| 1 | {"version":3,"sources":["Snackbar.tsx"],"names":["React","Animated","SafeAreaView","StyleSheet","Button","Surface","Text","withTheme","DURATION_SHORT","DURATION_MEDIUM","DURATION_LONG","Snackbar","visible","action","duration","onDismiss","children","wrapperStyle","style","theme","rest","current","opacity","useRef","Value","hidden","setHidden","useState","hideTimeout","undefined","scale","animation","useEffect","clearTimeout","useLayoutEffect","timing","toValue","useNativeDriver","start","finished","isInfinity","Number","POSITIVE_INFINITY","NEGATIVE_INFINITY","setTimeout","colors","roundness","actionStyle","label","actionLabel","onPress","onPressAction","actionProps","styles","wrapper","container","borderRadius","transform","interpolate","inputRange","outputRange","backgroundColor","onSurface","content","marginRight","color","surface","button","accent","create","position","bottom","width","elevation","flexDirection","justifyContent","alignItems","margin","marginLeft","marginVertical","flexWrap","flex","marginHorizontal"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SACEC,QADF,EAEEC,YAFF,EAIEC,UAJF,QAOO,cAPP;AASA,OAAOC,MAAP,MAAmB,UAAnB;AACA,OAAOC,OAAP,MAAoB,WAApB;AACA,OAAOC,IAAP,MAAiB,mBAAjB;AACA,SAASC,SAAT,QAA0B,iBAA1B;AAuCA,MAAMC,cAAc,GAAG,IAAvB;AACA,MAAMC,eAAe,GAAG,IAAxB;AACA,MAAMC,aAAa,GAAG,KAAtB;AAEA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,QAAQ,GAAG,QAUI;AAAA,MAVH;AAChBC,IAAAA,OADgB;AAEhBC,IAAAA,MAFgB;AAGhBC,IAAAA,QAAQ,GAAGL,eAHK;AAIhBM,IAAAA,SAJgB;AAKhBC,IAAAA,QALgB;AAMhBC,IAAAA,YANgB;AAOhBC,IAAAA,KAPgB;AAQhBC,IAAAA,KARgB;AAShB,OAAGC;AATa,GAUG;AACnB,QAAM;AAAEC,IAAAA,OAAO,EAAEC;AAAX,MAAuBtB,KAAK,CAACuB,MAAN,CAC3B,IAAItB,QAAQ,CAACuB,KAAb,CAAmB,GAAnB,CAD2B,CAA7B;AAGA,QAAM,CAACC,MAAD,EAASC,SAAT,IAAsB1B,KAAK,CAAC2B,QAAN,CAAwB,CAACf,OAAzB,CAA5B;AAEA,QAAMgB,WAAW,GAAG5B,KAAK,CAACuB,MAAN,CAAyCM,SAAzC,CAApB;AAEA,QAAM;AAAEC,IAAAA;AAAF,MAAYX,KAAK,CAACY,SAAxB;AAEA/B,EAAAA,KAAK,CAACgC,SAAN,CAAgB,MAAM;AACpB,WAAO,MAAM;AACX,UAAIJ,WAAW,CAACP,OAAhB,EAAyBY,YAAY,CAACL,WAAW,CAACP,OAAb,CAAZ;AAC1B,KAFD;AAGD,GAJD,EAIG,EAJH;AAMArB,EAAAA,KAAK,CAACkC,eAAN,CAAsB,MAAM;AAC1B,QAAItB,OAAJ,EAAa;AACX;AACA,UAAIgB,WAAW,CAACP,OAAhB,EAAyBY,YAAY,CAACL,WAAW,CAACP,OAAb,CAAZ;AACzBK,MAAAA,SAAS,CAAC,KAAD,CAAT;AACAzB,MAAAA,QAAQ,CAACkC,MAAT,CAAgBb,OAAhB,EAAyB;AACvBc,QAAAA,OAAO,EAAE,CADc;AAEvBtB,QAAAA,QAAQ,EAAE,MAAMgB,KAFO;AAGvBO,QAAAA,eAAe,EAAE;AAHM,OAAzB,EAIGC,KAJH,CAIS,SAAkB;AAAA,YAAjB;AAAEC,UAAAA;AAAF,SAAiB;;AACzB,YAAIA,QAAJ,EAAc;AACZ,gBAAMC,UAAU,GACd1B,QAAQ,KAAK2B,MAAM,CAACC,iBAApB,IACA5B,QAAQ,KAAK2B,MAAM,CAACE,iBAFtB;;AAIA,cAAIJ,QAAQ,IAAI,CAACC,UAAjB,EAA6B;AAC3BZ,YAAAA,WAAW,CAACP,OAAZ,GAAsBuB,UAAU,CAC9B7B,SAD8B,EAE9BD,QAF8B,CAAhC;AAID;AACF;AACF,OAjBD;AAkBD,KAtBD,MAsBO;AACL;AACA,UAAIc,WAAW,CAACP,OAAhB,EAAyBY,YAAY,CAACL,WAAW,CAACP,OAAb,CAAZ;AAEzBpB,MAAAA,QAAQ,CAACkC,MAAT,CAAgBb,OAAhB,EAAyB;AACvBc,QAAAA,OAAO,EAAE,CADc;AAEvBtB,QAAAA,QAAQ,EAAE,MAAMgB,KAFO;AAGvBO,QAAAA,eAAe,EAAE;AAHM,OAAzB,EAIGC,KAJH,CAIS,SAAkB;AAAA,YAAjB;AAAEC,UAAAA;AAAF,SAAiB;AACzB,YAAIA,QAAJ,EAAcb,SAAS,CAAC,IAAD,CAAT;AACf,OAND;AAOD;AACF,GAnCD,EAmCG,CAACd,OAAD,EAAUE,QAAV,EAAoBQ,OAApB,EAA6BQ,KAA7B,EAAoCf,SAApC,CAnCH;AAqCA,QAAM;AAAE8B,IAAAA,MAAF;AAAUC,IAAAA;AAAV,MAAwB3B,KAA9B;AAEA,MAAIM,MAAJ,EAAY,OAAO,IAAP;AAEZ,QAAM;AACJP,IAAAA,KAAK,EAAE6B,WADH;AAEJC,IAAAA,KAAK,EAAEC,WAFH;AAGJC,IAAAA,OAAO,EAAEC,aAHL;AAIJ,OAAGC;AAJC,MAKFvC,MAAM,IAAI,EALd;AAOA,sBACE,oBAAC,YAAD;AACE,IAAA,aAAa,EAAC,UADhB;AAEE,IAAA,KAAK,EAAE,CAACwC,MAAM,CAACC,OAAR,EAAiBrC,YAAjB;AAFT,kBAIE,oBAAC,OAAD;AACE,IAAA,aAAa,EAAC,UADhB;AAEE,IAAA,uBAAuB,EAAC,QAF1B;AAGE,IAAA,KAAK,EACH,CACEoC,MAAM,CAACE,SADT,EAEE;AACEC,MAAAA,YAAY,EAAEV,SADhB;AAEExB,MAAAA,OAAO,EAAEA,OAFX;AAGEmC,MAAAA,SAAS,EAAE,CACT;AACE3B,QAAAA,KAAK,EAAElB,OAAO,GACVU,OAAO,CAACoC,WAAR,CAAoB;AAClBC,UAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CADM;AAElBC,UAAAA,WAAW,EAAE,CAAC,GAAD,EAAM,CAAN;AAFK,SAApB,CADU,GAKV;AANN,OADS;AAHb,KAFF,EAgBE;AAAEC,MAAAA,eAAe,EAAEhB,MAAM,CAACiB;AAA1B,KAhBF,EAiBE5C,KAjBF;AAJJ,KAwBME,IAxBN,gBA0BE,oBAAC,IAAD;AACE,IAAA,KAAK,EAAE,CACLiC,MAAM,CAACU,OADF,EAEL;AAAEC,MAAAA,WAAW,EAAEnD,MAAM,GAAG,CAAH,GAAO,EAA5B;AAAgCoD,MAAAA,KAAK,EAAEpB,MAAM,CAACqB;AAA9C,KAFK;AADT,KAMGlD,QANH,CA1BF,EAkCGH,MAAM,gBACL,oBAAC,MAAD;AACE,IAAA,OAAO,EAAE,MAAM;AACbsC,MAAAA,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa;AACbpC,MAAAA,SAAS;AACV,KAJH;AAKE,IAAA,KAAK,EAAE,CAACsC,MAAM,CAACc,MAAR,EAAgBpB,WAAhB,CALT;AAME,IAAA,KAAK,EAAEF,MAAM,CAACuB,MANhB;AAOE,IAAA,OAAO,MAPT;AAQE,IAAA,IAAI,EAAC;AARP,KASMhB,WATN,GAWGH,WAXH,CADK,GAcH,IAhDN,CAJF,CADF;AAyDD,CAnID;AAqIA;AACA;AACA;;;AACAtC,QAAQ,CAACH,cAAT,GAA0BA,cAA1B;AAEA;AACA;AACA;;AACAG,QAAQ,CAACF,eAAT,GAA2BA,eAA3B;AAEA;AACA;AACA;;AACAE,QAAQ,CAACD,aAAT,GAAyBA,aAAzB;AAEA,MAAM2C,MAAM,GAAGlD,UAAU,CAACkE,MAAX,CAAkB;AAC/Bf,EAAAA,OAAO,EAAE;AACPgB,IAAAA,QAAQ,EAAE,UADH;AAEPC,IAAAA,MAAM,EAAE,CAFD;AAGPC,IAAAA,KAAK,EAAE;AAHA,GADsB;AAM/BjB,EAAAA,SAAS,EAAE;AACTkB,IAAAA,SAAS,EAAE,CADF;AAETC,IAAAA,aAAa,EAAE,KAFN;AAGTC,IAAAA,cAAc,EAAE,eAHP;AAITC,IAAAA,UAAU,EAAE,QAJH;AAKTC,IAAAA,MAAM,EAAE,CALC;AAMTrB,IAAAA,YAAY,EAAE;AANL,GANoB;AAc/BO,EAAAA,OAAO,EAAE;AACPe,IAAAA,UAAU,EAAE,EADL;AAEPC,IAAAA,cAAc,EAAE,EAFT;AAGPC,IAAAA,QAAQ,EAAE,MAHH;AAIPC,IAAAA,IAAI,EAAE;AAJC,GAdsB;AAoB/Bd,EAAAA,MAAM,EAAE;AACNe,IAAAA,gBAAgB,EAAE,CADZ;AAENH,IAAAA,cAAc,EAAE;AAFV;AApBuB,CAAlB,CAAf;AA0BA,eAAexE,SAAS,CAACI,QAAD,CAAxB","sourcesContent":["import * as React from 'react';\nimport {\n Animated,\n SafeAreaView,\n StyleProp,\n StyleSheet,\n ViewStyle,\n View,\n} from 'react-native';\n\nimport Button from './Button';\nimport Surface from './Surface';\nimport Text from './Typography/Text';\nimport { withTheme } from '../core/theming';\n\nexport type SnackbarProps = React.ComponentProps<typeof Surface> & {\n /**\n * Whether the Snackbar is currently visible.\n */\n visible: boolean;\n /**\n * Label and press callback for the action button. It should contain the following properties:\n * - `label` - Label of the action button\n * - `onPress` - Callback that is called when action button is pressed.\n */\n action?: Omit<React.ComponentProps<typeof Button>, 'children'> & {\n label: string;\n };\n /**\n * The duration for which the Snackbar is shown.\n */\n duration?: number;\n /**\n * Callback called when Snackbar is dismissed. The `visible` prop needs to be updated when this is called.\n */\n onDismiss: () => void;\n /**\n * Text content of the Snackbar.\n */\n children: React.ReactNode;\n /**\n * Style for the wrapper of the snackbar\n */\n wrapperStyle?: StyleProp<ViewStyle>;\n style?: StyleProp<ViewStyle>;\n ref?: React.RefObject<View>;\n /**\n * @optional\n */\n theme: ReactNativePaper.Theme;\n};\n\nconst DURATION_SHORT = 4000;\nconst DURATION_MEDIUM = 7000;\nconst DURATION_LONG = 10000;\n\n/**\n * Snackbars provide brief feedback about an operation through a message at the bottom of the screen.\n * Snackbar by default uses `onSurface` color from theme.\n * <div class=\"screenshots\">\n * <img class=\"medium\" src=\"screenshots/snackbar.gif\" />\n * </div>\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { View, StyleSheet } from 'react-native';\n * import { Button, Snackbar } from 'react-native-paper';\n *\n * const MyComponent = () => {\n * const [visible, setVisible] = React.useState(false);\n *\n * const onToggleSnackBar = () => setVisible(!visible);\n *\n * const onDismissSnackBar = () => setVisible(false);\n *\n * return (\n * <View style={styles.container}>\n * <Button onPress={onToggleSnackBar}>{visible ? 'Hide' : 'Show'}</Button>\n * <Snackbar\n * visible={visible}\n * onDismiss={onDismissSnackBar}\n * action={{\n * label: 'Undo',\n * onPress: () => {\n * // Do something\n * },\n * }}>\n * Hey there! I'm a Snackbar.\n * </Snackbar>\n * </View>\n * );\n * };\n *\n * const styles = StyleSheet.create({\n * container: {\n * flex: 1,\n * justifyContent: 'space-between',\n * },\n * });\n *\n * export default MyComponent;\n * ```\n */\nconst Snackbar = ({\n visible,\n action,\n duration = DURATION_MEDIUM,\n onDismiss,\n children,\n wrapperStyle,\n style,\n theme,\n ...rest\n}: SnackbarProps) => {\n const { current: opacity } = React.useRef<Animated.Value>(\n new Animated.Value(0.0)\n );\n const [hidden, setHidden] = React.useState<boolean>(!visible);\n\n const hideTimeout = React.useRef<NodeJS.Timeout | undefined>(undefined);\n\n const { scale } = theme.animation;\n\n React.useEffect(() => {\n return () => {\n if (hideTimeout.current) clearTimeout(hideTimeout.current);\n };\n }, []);\n\n React.useLayoutEffect(() => {\n if (visible) {\n // show\n if (hideTimeout.current) clearTimeout(hideTimeout.current);\n setHidden(false);\n Animated.timing(opacity, {\n toValue: 1,\n duration: 200 * scale,\n useNativeDriver: true,\n }).start(({ finished }) => {\n if (finished) {\n const isInfinity =\n duration === Number.POSITIVE_INFINITY ||\n duration === Number.NEGATIVE_INFINITY;\n\n if (finished && !isInfinity) {\n hideTimeout.current = setTimeout(\n onDismiss,\n duration\n ) as unknown as NodeJS.Timeout;\n }\n }\n });\n } else {\n // hide\n if (hideTimeout.current) clearTimeout(hideTimeout.current);\n\n Animated.timing(opacity, {\n toValue: 0,\n duration: 100 * scale,\n useNativeDriver: true,\n }).start(({ finished }) => {\n if (finished) setHidden(true);\n });\n }\n }, [visible, duration, opacity, scale, onDismiss]);\n\n const { colors, roundness } = theme;\n\n if (hidden) return null;\n\n const {\n style: actionStyle,\n label: actionLabel,\n onPress: onPressAction,\n ...actionProps\n } = action || {};\n\n return (\n <SafeAreaView\n pointerEvents=\"box-none\"\n style={[styles.wrapper, wrapperStyle]}\n >\n <Surface\n pointerEvents=\"box-none\"\n accessibilityLiveRegion=\"polite\"\n style={\n [\n styles.container,\n {\n borderRadius: roundness,\n opacity: opacity,\n transform: [\n {\n scale: visible\n ? opacity.interpolate({\n inputRange: [0, 1],\n outputRange: [0.9, 1],\n })\n : 1,\n },\n ],\n },\n { backgroundColor: colors.onSurface },\n style,\n ] as StyleProp<ViewStyle>\n }\n {...rest}\n >\n <Text\n style={[\n styles.content,\n { marginRight: action ? 0 : 16, color: colors.surface },\n ]}\n >\n {children}\n </Text>\n {action ? (\n <Button\n onPress={() => {\n onPressAction?.();\n onDismiss();\n }}\n style={[styles.button, actionStyle]}\n color={colors.accent}\n compact\n mode=\"text\"\n {...actionProps}\n >\n {actionLabel}\n </Button>\n ) : null}\n </Surface>\n </SafeAreaView>\n );\n};\n\n/**\n * Show the Snackbar for a short duration.\n */\nSnackbar.DURATION_SHORT = DURATION_SHORT;\n\n/**\n * Show the Snackbar for a medium duration.\n */\nSnackbar.DURATION_MEDIUM = DURATION_MEDIUM;\n\n/**\n * Show the Snackbar for a long duration.\n */\nSnackbar.DURATION_LONG = DURATION_LONG;\n\nconst styles = StyleSheet.create({\n wrapper: {\n position: 'absolute',\n bottom: 0,\n width: '100%',\n },\n container: {\n elevation: 6,\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignItems: 'center',\n margin: 8,\n borderRadius: 4,\n },\n content: {\n marginLeft: 16,\n marginVertical: 14,\n flexWrap: 'wrap',\n flex: 1,\n },\n button: {\n marginHorizontal: 8,\n marginVertical: 6,\n },\n});\n\nexport default withTheme(Snackbar);\n"]} |