| 1 | {"version":3,"sources":["Modal.tsx"],"names":["React","Animated","BackHandler","Easing","StyleSheet","TouchableWithoutFeedback","View","getStatusBarHeight","getBottomSpace","Surface","useTheme","useAnimatedValue","DEFAULT_DURATION","TOP_INSET","BOTTOM_INSET","Modal","dismissable","visible","overlayAccessibilityLabel","onDismiss","children","contentContainerStyle","style","visibleRef","useRef","useEffect","current","colors","animation","opacity","rendered","setRendered","useState","handleBack","hideModal","subscription","undefined","showModal","remove","removeEventListener","addEventListener","scale","timing","toValue","duration","easing","out","cubic","useNativeDriver","start","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 { useTheme } from '../core/theming';\nimport useAnimatedValue from '../utils/useAnimatedValue';\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\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 */\nexport default function Modal({\n dismissable = true,\n visible = false,\n overlayAccessibilityLabel = 'Close modal',\n onDismiss,\n children,\n contentContainerStyle,\n style,\n}: Props) {\n const visibleRef = React.useRef(visible);\n\n React.useEffect(() => {\n visibleRef.current = visible;\n });\n\n const { colors, animation } = useTheme();\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 if (subscription.current?.remove) {\n subscription.current.remove();\n } else {\n BackHandler.removeEventListener('hardwareBackPress', handleBack);\n }\n subscription.current = BackHandler.addEventListener(\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 hideModal = () => {\n if (subscription.current?.remove) {\n subscription.current?.remove();\n } else {\n BackHandler.removeEventListener('hardwareBackPress', handleBack);\n }\n\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 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 >\n <TouchableWithoutFeedback\n accessibilityLabel={overlayAccessibilityLabel}\n accessibilityRole=\"button\"\n disabled={!dismissable}\n onPress={dismissable ? hideModal : undefined}\n importantForAccessibility=\"no\"\n >\n <Animated.View\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 [{ opacity }, styles.content, contentContainerStyle] as StyleProp<\n ViewStyle\n >\n }\n >\n {children}\n </Surface>\n </View>\n </Animated.View>\n );\n}\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"]} |