| 1 | {"version":3,"sources":["DialogScrollArea.tsx"],"names":["React","View","StyleSheet","DialogScrollArea","props","styles","container","style","children","displayName","create","borderColor","borderTopWidth","hairlineWidth","borderBottomWidth","paddingHorizontal","flexGrow","flexShrink"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,EAA0BC,UAA1B,QAAuD,cAAvD;;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,gBAAgB,GAAIC,KAAD,iBACvB,oBAAC,IAAD,eAAUA,KAAV;AAAiB,EAAA,KAAK,EAAE,CAACC,MAAM,CAACC,SAAR,EAAmBF,KAAK,CAACG,KAAzB;AAAxB,IACGH,KAAK,CAACI,QADT,CADF;;AAMAL,gBAAgB,CAACM,WAAjB,GAA+B,mBAA/B;AAEA,MAAMJ,MAAM,GAAGH,UAAU,CAACQ,MAAX,CAAkB;AAC/BJ,EAAAA,SAAS,EAAE;AACTK,IAAAA,WAAW,EAAE,oBADJ;AAETC,IAAAA,cAAc,EAAEV,UAAU,CAACW,aAFlB;AAGTC,IAAAA,iBAAiB,EAAEZ,UAAU,CAACW,aAHrB;AAITE,IAAAA,iBAAiB,EAAE,EAJV;AAKTC,IAAAA,QAAQ,EAAE,CALD;AAMTC,IAAAA,UAAU,EAAE;AANH;AADoB,CAAlB,CAAf;AAWA,eAAed,gBAAf","sourcesContent":["import * as React from 'react';\nimport { View, ViewStyle, StyleSheet, StyleProp } from 'react-native';\n\ntype Props = React.ComponentPropsWithRef<typeof View> & {\n /**\n * Content of the `DialogScrollArea`.\n */\n children: React.ReactNode;\n style?: StyleProp<ViewStyle>;\n};\n\n/**\n * A component to show a scrollable content in a Dialog. The component only provides appropriate styling.\n * For the scrollable content you can use `ScrollView`, `FlatList` etc. depending on your requirement.\n *\n * <div class=\"screenshots\">\n * <figure>\n * <img class=\"medium\" src=\"screenshots/dialog-scroll-area.gif\" />\n * </figure>\n * </div>\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { ScrollView } from 'react-native';\n * import { Dialog, Portal, Text } from 'react-native-paper';\n *\n * const MyComponent = () => {\n * const [visible, setVisible] = React.useState(false);\n *\n * const hideDialog = () => setVisible(false);\n *\n * return (\n * <Portal>\n * <Dialog visible={visible} onDismiss={hideDialog}>\n * <Dialog.ScrollArea>\n * <ScrollView contentContainerStyle={{paddingHorizontal: 24}}>\n * <Text>This is a scrollable area</Text>\n * </ScrollView>\n * </Dialog.ScrollArea>\n * </Dialog>\n * </Portal>\n * );\n * };\n *\n * export default MyComponent;\n * ```\n */\nconst DialogScrollArea = (props: Props) => (\n <View {...props} style={[styles.container, props.style]}>\n {props.children}\n </View>\n);\n\nDialogScrollArea.displayName = 'Dialog.ScrollArea';\n\nconst styles = StyleSheet.create({\n container: {\n borderColor: 'rgba(0, 0, 0, .12)',\n borderTopWidth: StyleSheet.hairlineWidth,\n borderBottomWidth: StyleSheet.hairlineWidth,\n paddingHorizontal: 24,\n flexGrow: 1,\n flexShrink: 1,\n },\n});\n\nexport default DialogScrollArea;\n"]} |