| 1 | {"version":3,"sources":["Modal.tsx"],"names":["React","Animated","BackHandler","Easing","StyleSheet","TouchableWithoutFeedback","View","getStatusBarHeight","getBottomSpace","Surface","withTheme","useAnimatedValue","addEventListener","DEFAULT_DURATION","TOP_INSET","BOTTOM_INSET","Modal","dismissable","visible","overlayAccessibilityLabel","onDismiss","children","contentContainerStyle","style","theme","testID","visibleRef","useRef","useEffect","current","colors","animation","opacity","rendered","setRendered","useState","handleBack","hideModal","subscription","undefined","showModal","remove","scale","timing","toValue","duration","easing","out","cubic","useNativeDriver","start","removeListeners","removeEventListener","finished","prevVisible","absoluteFill","styles","backdrop","backgroundColor","wrapper","marginTop","marginBottom","content","create","flex","absoluteFillObject","justifyContent"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n Animated,\n BackHandler,\n Easing,\n StyleProp,\n StyleSheet,\n TouchableWithoutFeedback,\n ViewStyle,\n View,\n NativeEventSubscription,\n} from 'react-native';\nimport {\n getStatusBarHeight,\n getBottomSpace,\n} from 'react-native-iphone-x-helper';\nimport Surface from './Surface';\nimport { withTheme } from '../core/theming';\nimport useAnimatedValue from '../utils/useAnimatedValue';\nimport { addEventListener } from '../utils/addEventListener';\n\ntype Props = {\n /**\n * Determines whether clicking outside the modal dismiss it.\n */\n dismissable?: boolean;\n /**\n * Callback that is called when the user dismisses the modal.\n */\n onDismiss?: () => void;\n /**\n * Accessibility label for the overlay. This is read by the screen reader when the user taps outside the modal.\n */\n overlayAccessibilityLabel?: string;\n /**\n * Determines Whether the modal is visible.\n */\n visible: boolean;\n /**\n * Content of the `Modal`.\n */\n children: React.ReactNode;\n /**\n * Style for the content of the modal\n */\n contentContainerStyle?: StyleProp<ViewStyle>;\n /**\n * Style for the wrapper of the modal.\n * Use this prop to change the default wrapper style or to override safe area insets with marginTop and marginBottom.\n */\n style?: StyleProp<ViewStyle>;\n /**\n * @optional\n */\n theme: ReactNativePaper.Theme;\n testID?: string;\n};\n\nconst DEFAULT_DURATION = 220;\nconst TOP_INSET = getStatusBarHeight(true);\nconst BOTTOM_INSET = getBottomSpace();\n\n/**\n * The Modal component is a simple way to present content above an enclosing view.\n * To render the `Modal` above other components, you'll need to wrap it with the [`Portal`](portal.html) component.\n *\n * <div class=\"screenshots\">\n * <figure>\n * <img class=\"medium\" src=\"screenshots/modal.gif\" />\n * </figure>\n * </div>\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { Modal, Portal, Text, Button, Provider } from 'react-native-paper';\n *\n * const MyComponent = () => {\n * const [visible, setVisible] = React.useState(false);\n *\n * const showModal = () => setVisible(true);\n * const hideModal = () => setVisible(false);\n * const containerStyle = {backgroundColor: 'white', padding: 20};\n *\n * return (\n * <Provider>\n * <Portal>\n * <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>\n * <Text>Example Modal. Click outside this area to dismiss.</Text>\n * </Modal>\n * </Portal>\n * <Button style={{marginTop: 30}} onPress={showModal}>\n * Show\n * </Button>\n * </Provider>\n * );\n * };\n *\n * export default MyComponent;\n * ```\n */\nfunction Modal({\n dismissable = true,\n visible = false,\n overlayAccessibilityLabel = 'Close modal',\n onDismiss,\n children,\n contentContainerStyle,\n style,\n theme,\n testID,\n}: Props) {\n const visibleRef = React.useRef(visible);\n\n React.useEffect(() => {\n visibleRef.current = visible;\n });\n\n const { colors, animation } = theme;\n\n const opacity = useAnimatedValue(visible ? 1 : 0);\n\n const [rendered, setRendered] = React.useState(visible);\n\n if (visible && !rendered) {\n setRendered(true);\n }\n\n const handleBack = () => {\n if (dismissable) {\n hideModal();\n }\n return true;\n };\n\n const subscription = React.useRef<NativeEventSubscription | undefined>(\n undefined\n );\n\n const showModal = () => {\n subscription.current?.remove();\n subscription.current = addEventListener(\n BackHandler,\n 'hardwareBackPress',\n handleBack\n );\n\n const { scale } = animation;\n\n Animated.timing(opacity, {\n toValue: 1,\n duration: scale * DEFAULT_DURATION,\n easing: Easing.out(Easing.cubic),\n useNativeDriver: true,\n }).start();\n };\n\n const removeListeners = () => {\n if (subscription.current?.remove) {\n subscription.current?.remove();\n } else {\n BackHandler.removeEventListener('hardwareBackPress', handleBack);\n }\n };\n\n const hideModal = () => {\n removeListeners();\n const { scale } = animation;\n\n Animated.timing(opacity, {\n toValue: 0,\n duration: scale * DEFAULT_DURATION,\n easing: Easing.out(Easing.cubic),\n useNativeDriver: true,\n }).start(({ finished }) => {\n if (!finished) {\n return;\n }\n\n if (visible && onDismiss) {\n onDismiss();\n }\n\n if (visibleRef.current) {\n showModal();\n } else {\n setRendered(false);\n }\n });\n };\n\n const prevVisible = React.useRef<boolean | null>(null);\n\n React.useEffect(() => {\n if (prevVisible.current !== visible) {\n if (visible) {\n showModal();\n } else {\n hideModal();\n }\n }\n prevVisible.current = visible;\n });\n\n React.useEffect(() => {\n return removeListeners;\n }, []);\n\n if (!rendered) return null;\n\n return (\n <Animated.View\n pointerEvents={visible ? 'auto' : 'none'}\n accessibilityViewIsModal\n accessibilityLiveRegion=\"polite\"\n style={StyleSheet.absoluteFill}\n onAccessibilityEscape={hideModal}\n testID={testID}\n >\n <TouchableWithoutFeedback\n accessibilityLabel={overlayAccessibilityLabel}\n accessibilityRole=\"button\"\n disabled={!dismissable}\n onPress={dismissable ? hideModal : undefined}\n importantForAccessibility=\"no\"\n >\n <Animated.View\n testID={`${testID}-backdrop`}\n style={[\n styles.backdrop,\n { backgroundColor: colors.backdrop, opacity },\n ]}\n />\n </TouchableWithoutFeedback>\n <View\n style={[\n styles.wrapper,\n { marginTop: TOP_INSET, marginBottom: BOTTOM_INSET },\n style,\n ]}\n pointerEvents=\"box-none\"\n >\n <Surface\n style={\n [\n { opacity },\n styles.content,\n contentContainerStyle,\n ] as StyleProp<ViewStyle>\n }\n >\n {children}\n </Surface>\n </View>\n </Animated.View>\n );\n}\n\nexport default withTheme(Modal);\n\nconst styles = StyleSheet.create({\n backdrop: {\n flex: 1,\n },\n wrapper: {\n ...StyleSheet.absoluteFillObject,\n justifyContent: 'center',\n },\n content: {\n backgroundColor: 'transparent',\n justifyContent: 'center',\n },\n});\n"]} |