| 1 | {"version":3,"sources":["Banner.tsx"],"names":["React","View","StyleSheet","Animated","Surface","Text","Button","Icon","withTheme","shadow","ELEVATION","DEFAULT_MAX_WIDTH","Banner","visible","icon","children","actions","contentStyle","style","theme","onShowAnimationFinished","onHideAnimationFinished","rest","current","position","useRef","Value","layout","setLayout","useState","height","measured","scale","animation","useEffect","timing","duration","toValue","useNativeDriver","start","handleLayout","nativeEvent","multiply","translateY","add","styles","container","wrapper","absolute","transform","opacity","content","message","color","colors","text","map","i","label","others","button","primary","create","elevation","overflow","alignSelf","width","maxWidth","top","flexDirection","justifyContent","marginHorizontal","marginTop","marginBottom","margin","flex"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { View, ViewStyle, StyleSheet, StyleProp, Animated } from 'react-native';\nimport Surface from './Surface';\nimport Text from './Typography/Text';\nimport Button from './Button';\nimport Icon, { IconSource } from './Icon';\nimport { withTheme } from '../core/theming';\nimport type { $RemoveChildren } from '../types';\nimport shadow from '../styles/shadow';\n\nconst ELEVATION = 1;\nconst DEFAULT_MAX_WIDTH = 960;\n\ntype Props = $RemoveChildren<typeof Surface> & {\n /**\n * Whether banner is currently visible.\n */\n visible: boolean;\n /**\n * Content that will be displayed inside banner.\n */\n children: string;\n /**\n * Icon to display for the `Banner`. Can be an image.\n */\n icon?: IconSource;\n /**\n * Action items to shown in the banner.\n * An action item should contain the following properties:\n *\n * - `label`: label of the action button (required)\n * - `onPress`: callback that is called when button is pressed (required)\n *\n * To customize button you can pass other props that button component takes.\n */\n actions: Array<\n {\n label: string;\n } & Omit<React.ComponentProps<typeof Button>, 'children'>\n >;\n /**\n * Style of banner's inner content.\n * Use this prop to apply custom width for wide layouts.\n */\n contentStyle?: StyleProp<ViewStyle>;\n style?: StyleProp<ViewStyle>;\n ref?: React.RefObject<View>;\n /**\n * @optional\n */\n theme: ReactNativePaper.Theme;\n /**\n * @optional\n * Optional callback that will be called after the opening animation finished running normally\n */\n onShowAnimationFinished?: Animated.EndCallback;\n /**\n * @optional\n * Optional callback that will be called after the closing animation finished running normally\n */\n onHideAnimationFinished?: Animated.EndCallback;\n};\n\ntype NativeEvent = {\n nativeEvent: {\n layout: {\n x: number;\n y: number;\n width: number;\n height: number;\n };\n };\n};\n\n/**\n * Banner displays a prominent message and related actions.\n *\n * <div class=\"screenshots\">\n * <img class=\"medium\" src=\"screenshots/banner.gif\" />\n * </div>\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { Image } from 'react-native';\n * import { Banner } from 'react-native-paper';\n *\n * const MyComponent = () => {\n * const [visible, setVisible] = React.useState(true);\n *\n * return (\n * <Banner\n * visible={visible}\n * actions={[\n * {\n * label: 'Fix it',\n * onPress: () => setVisible(false),\n * },\n * {\n * label: 'Learn more',\n * onPress: () => setVisible(false),\n * },\n * ]}\n * icon={({size}) => (\n * <Image\n * source={{\n * uri: 'https://avatars3.githubusercontent.com/u/17571969?s=400&v=4',\n * }}\n * style={{\n * width: size,\n * height: size,\n * }}\n * />\n * )}>\n * There was a problem processing a transaction on your credit card.\n * </Banner>\n * );\n * };\n *\n * export default MyComponent;\n * ```\n */\nconst Banner = ({\n visible,\n icon,\n children,\n actions,\n contentStyle,\n style,\n theme,\n onShowAnimationFinished = () => {},\n onHideAnimationFinished = () => {},\n ...rest\n}: Props) => {\n const { current: position } = React.useRef<Animated.Value>(\n new Animated.Value(visible ? 1 : 0)\n );\n const [layout, setLayout] = React.useState<{\n height: number;\n measured: boolean;\n }>({\n height: 0,\n measured: false,\n });\n\n const { scale } = theme.animation;\n\n React.useEffect(() => {\n if (visible) {\n // show\n Animated.timing(position, {\n duration: 250 * scale,\n toValue: 1,\n useNativeDriver: false,\n }).start(onShowAnimationFinished);\n } else {\n // hide\n Animated.timing(position, {\n duration: 200 * scale,\n toValue: 0,\n useNativeDriver: false,\n }).start(onHideAnimationFinished);\n }\n }, [visible, position, scale]);\n\n const handleLayout = ({ nativeEvent }: NativeEvent) => {\n const { height } = nativeEvent.layout;\n setLayout({ height, measured: true });\n };\n\n // The banner animation has 2 parts:\n // 1. Blank spacer element which animates its height to move the content\n // 2. Actual banner which animates its translateY\n // In initial render, we position everything normally and measure the height of the banner\n // Once we have the height, we apply the height to the spacer and switch the banner to position: absolute\n // We need this because we need to move the content below as if banner's height was being animated\n // However we can't animated banner's height directly as it'll also resize the content inside\n const height = Animated.multiply(position, layout.height);\n\n const translateY = Animated.multiply(\n Animated.add(position, -1),\n layout.height\n );\n return (\n <Surface\n {...rest}\n style={[styles.container, shadow(ELEVATION) as ViewStyle, style]}\n theme={theme}\n >\n <View style={[styles.wrapper, contentStyle]}>\n <Animated.View style={{ height }} />\n <Animated.View\n onLayout={handleLayout}\n style={[\n layout.measured || !visible\n ? // If we have measured banner's height or it's invisible,\n // Position it absolutely, the layout will be taken care of the spacer\n [styles.absolute, { transform: [{ translateY }] }]\n : // Otherwise position it normally\n null,\n !layout.measured && !visible\n ? // If we haven't measured banner's height yet and it's invisible,\n // hide it with opacity: 0 so user doesn't see it\n { opacity: 0 }\n : null,\n ]}\n >\n <View style={styles.content}>\n {icon ? (\n <View style={styles.icon}>\n <Icon source={icon} size={40} />\n </View>\n ) : null}\n <Text\n style={[styles.message, { color: theme.colors.text }]}\n accessibilityLiveRegion={visible ? 'polite' : 'none'}\n accessibilityRole=\"alert\"\n >\n {children}\n </Text>\n </View>\n <View style={styles.actions}>\n {actions.map(({ label, ...others }, i) => (\n <Button\n key={/* eslint-disable-line react/no-array-index-key */ i}\n compact\n mode=\"text\"\n style={styles.button}\n color={theme.colors.primary}\n {...others}\n >\n {label}\n </Button>\n ))}\n </View>\n </Animated.View>\n </View>\n </Surface>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n elevation: ELEVATION,\n },\n wrapper: {\n overflow: 'hidden',\n alignSelf: 'center',\n width: '100%',\n maxWidth: DEFAULT_MAX_WIDTH,\n },\n absolute: {\n position: 'absolute',\n top: 0,\n width: '100%',\n },\n content: {\n flexDirection: 'row',\n justifyContent: 'flex-start',\n marginHorizontal: 8,\n marginTop: 16,\n marginBottom: 0,\n },\n icon: {\n margin: 8,\n },\n message: {\n flex: 1,\n margin: 8,\n },\n actions: {\n flexDirection: 'row',\n justifyContent: 'flex-end',\n margin: 4,\n },\n button: {\n margin: 4,\n },\n});\n\nexport default withTheme(Banner);\n"]} |