react-native-multiple-modals
Version:
Native implementation with the ability to display multiple Modals
1 lines • 17.1 kB
Source Map (JSON)
{"version":3,"sources":["/Users/pavelpakseev/code/react-native-multiple-modals/lib/index.mjs","../src/ModalView.tsx","../src/ScrollContextResetter.tsx","../src/integrations/GestureHandlerRootView.tsx","../src/newarch/NativeRNTModalView.ts"],"names":["__defProp","Object","defineProperty","__name","target","value","configurable","__require","x","require","Proxy","get","a","b","apply","arguments","Error","Platform","Pressable","StatusBar","StyleSheet","View","VirtualizedListContextResetter","ScrollViewContext","ScrollContextResetter","children","React","createElement","Provider","importGestureHandlerRootView","Errors","GestureHandlerRootViewNotFound","GestureHandlerRootViewComponent","GestureHandlerRootView","e","console","error","codegenNativeComponent","NativeRNTModalView_default","interfaceOnly","DismissalSource","DismissalSource2","backdropAccessibilityLabel","backdropAccessibilityHint","defaultBackdropColor","isIOS","OS","ModalView","renderBackdrop","onRequestDismiss","contentContainerStyle","statusBar","BackdropPressableComponent","backdropColor","disableDefaultStatusBarIOS","animationType","statusBarTranslucent","RNTModalView","style","styles","container","translucent","statusBarIconsStyle","barStyle","undefined","onPressBackAndroid","collapsable","flex","backdropContainer","accessibilityLabel","accessibilityHint","onPress","backgroundColor","pointerEvents","content","create","position","zIndex","top","bottom","left","right"],"mappings":"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","sourcesContent":["var __defProp = Object.defineProperty;\nvar __name = (target, value) => __defProp(target, \"name\", { value, configurable: true });\nvar __require = /* @__PURE__ */ ((x) => typeof require !== \"undefined\" ? require : typeof Proxy !== \"undefined\" ? new Proxy(x, {\n get: (a, b) => (typeof require !== \"undefined\" ? require : a)[b]\n}) : x)(function(x) {\n if (typeof require !== \"undefined\") return require.apply(this, arguments);\n throw Error('Dynamic require of \"' + x + '\" is not supported');\n});\n\n// src/ModalView.tsx\nimport { Platform, Pressable, StatusBar, StyleSheet, View } from \"react-native\";\n\n// src/ScrollContextResetter.tsx\nimport { VirtualizedListContextResetter } from \"@react-native/virtualized-lists\";\nimport ScrollViewContext from \"react-native/Libraries/Components/ScrollView/ScrollViewContext\";\nvar ScrollContextResetter = /* @__PURE__ */ __name(({ children }) => {\n return /* @__PURE__ */ React.createElement(VirtualizedListContextResetter, null, /* @__PURE__ */ React.createElement(ScrollViewContext.Provider, {\n value: null\n }, children));\n}, \"ScrollContextResetter\");\n\n// src/integrations/GestureHandlerRootView.tsx\nvar importGestureHandlerRootView = /* @__PURE__ */ __name(() => {\n const Errors = {\n GestureHandlerRootViewNotFound: new Error(\"GestureHandlerRootView not found. Please report the issue: https://github.com/paufau/react-native-multiple-modals/issues\")\n };\n try {\n const GestureHandlerRootViewComponent = __require(\"react-native-gesture-handler\").GestureHandlerRootView;\n if (!GestureHandlerRootViewComponent) {\n throw Errors.GestureHandlerRootViewNotFound;\n }\n return GestureHandlerRootViewComponent;\n } catch (e) {\n if (e === Errors.GestureHandlerRootViewNotFound) {\n console.error(e);\n }\n return ({ children }) => children;\n }\n}, \"importGestureHandlerRootView\");\nvar GestureHandlerRootView = importGestureHandlerRootView();\n\n// src/newarch/NativeRNTModalView.ts\nimport codegenNativeComponent from \"react-native/Libraries/Utilities/codegenNativeComponent\";\nvar NativeRNTModalView_default = codegenNativeComponent(\"RNTModalView\", {\n interfaceOnly: true\n});\n\n// src/ModalView.tsx\nvar DismissalSource = /* @__PURE__ */ function(DismissalSource2) {\n DismissalSource2[\"BackButton\"] = \"BackButton\";\n DismissalSource2[\"Backdrop\"] = \"Backdrop\";\n return DismissalSource2;\n}({});\nvar backdropAccessibilityLabel = \"Backdrop\";\nvar backdropAccessibilityHint = \"Double-tap to close the modal\";\nvar defaultBackdropColor = \"rgba(0, 0, 0, 0.3)\";\nvar isIOS = Platform.OS === \"ios\";\nvar ModalView = /* @__PURE__ */ __name(({ children, renderBackdrop, onRequestDismiss, contentContainerStyle, statusBar, BackdropPressableComponent = Pressable, backdropColor = defaultBackdropColor, disableDefaultStatusBarIOS = false, animationType = \"none\", statusBarTranslucent }) => {\n return /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(NativeRNTModalView_default, {\n style: styles.container,\n statusBarTranslucent: statusBar?.translucent ?? statusBarTranslucent,\n statusBarIconsStyle: statusBar?.barStyle ?? void 0,\n onPressBackAndroid: /* @__PURE__ */ __name(() => onRequestDismiss?.(\"BackButton\"), \"onPressBackAndroid\"),\n animationType\n }, /* @__PURE__ */ React.createElement(View, {\n collapsable: false,\n style: styles.flex\n }, isIOS && statusBar && !disableDefaultStatusBarIOS ? /* @__PURE__ */ React.createElement(StatusBar, statusBar) : null, /* @__PURE__ */ React.createElement(GestureHandlerRootView, {\n style: styles.flex\n }, /* @__PURE__ */ React.createElement(View, {\n style: [\n styles.backdropContainer\n ]\n }, /* @__PURE__ */ React.createElement(BackdropPressableComponent, {\n accessibilityLabel: backdropAccessibilityLabel,\n accessibilityHint: backdropAccessibilityHint,\n style: styles.flex,\n onPress: /* @__PURE__ */ __name(() => onRequestDismiss?.(\"Backdrop\"), \"onPress\")\n }, renderBackdrop ? renderBackdrop() : /* @__PURE__ */ React.createElement(View, {\n style: [\n styles.flex,\n {\n backgroundColor: backdropColor\n }\n ]\n }))), /* @__PURE__ */ React.createElement(ScrollContextResetter, null, /* @__PURE__ */ React.createElement(View, {\n pointerEvents: \"box-none\",\n style: [\n styles.content,\n contentContainerStyle\n ]\n }, children))))));\n}, \"ModalView\");\nvar styles = StyleSheet.create({\n container: {\n position: \"absolute\"\n },\n flex: {\n flex: 1\n },\n content: {\n zIndex: 1,\n flex: 1\n },\n backdropContainer: {\n position: \"absolute\",\n zIndex: 0,\n top: 0,\n bottom: 0,\n left: 0,\n right: 0\n }\n});\nexport {\n DismissalSource,\n ModalView\n};\n","import { FC, ReactNode } from 'react';\n\nimport {\n Platform,\n Pressable,\n PressableProps,\n StatusBar,\n StatusBarProps,\n StyleProp,\n StyleSheet,\n View,\n ViewStyle,\n} from 'react-native';\n\nimport { ScrollContextResetter } from './ScrollContextResetter';\nimport { GestureHandlerRootView } from './integrations/GestureHandlerRootView';\nimport RNTModalView from './newarch/NativeRNTModalView';\n\nexport type BackdropProps = Omit<PressableProps, 'onPress' | 'style'> & {\n style?: StyleProp<ViewStyle>;\n};\n\nexport enum DismissalSource {\n BackButton = 'BackButton',\n Backdrop = 'Backdrop',\n}\n\nexport type ModalViewProps = {\n /**\n * The content of the modal.\n */\n children: ReactNode;\n\n /**\n * A function that renders the backdrop.\n * If not provided, a default backdrop will be rendered.\n */\n renderBackdrop?: () => ReactNode;\n\n /**\n * Callback function that is called when the modal is dismissed.\n * The `calledBy` parameter indicates the source of the dismissal.\n */\n onRequestDismiss?: (calledBy: DismissalSource) => void;\n\n /**\n * Style for the content container of the modal.\n * This is applied to the view that contains the children.\n */\n contentContainerStyle?: StyleProp<ViewStyle>;\n\n /**\n * Custom status bar properties.\n * Android supports only `translucent` & `barStyle` props.\n */\n statusBar?: StatusBarProps;\n\n /**\n * Whether to disable the default iOS status bar behavior.\n * If true, the status bar will not be rendered on iOS.\n * Useful when you want to manage the status bar manually or use `expo-status-bar`.\n */\n disableDefaultStatusBarIOS?: boolean;\n\n /**\n * Custom component to be used as the backdrop pressable.\n * Useful when you want to apply additional props or use `react-native-gesture-handler`'s `Pressable`.\n */\n BackdropPressableComponent?: FC<PressableProps>;\n\n /**\n * The color of the backdrop.\n * Defaults to 'rgba(0, 0, 0, 0.3)'.\n */\n backdropColor?: string;\n\n /**\n * The type of animation to use when showing the modal.\n * Can be 'none', 'fade', or 'slide'.\n * Defaults to 'none'.\n */\n animationType?: 'none' | 'fade' | 'slide';\n\n /**\n * @deprecated Use `statusBar.translucent` instead.\n */\n statusBarTranslucent?: boolean;\n};\n\nconst backdropAccessibilityLabel = 'Backdrop';\nconst backdropAccessibilityHint = 'Double-tap to close the modal';\nconst defaultBackdropColor = 'rgba(0, 0, 0, 0.3)';\nconst isIOS = Platform.OS === 'ios';\n\nexport const ModalView: FC<ModalViewProps> = ({\n children,\n renderBackdrop,\n onRequestDismiss,\n contentContainerStyle,\n statusBar,\n BackdropPressableComponent = Pressable,\n backdropColor = defaultBackdropColor,\n disableDefaultStatusBarIOS = false,\n animationType = 'none',\n statusBarTranslucent,\n}) => {\n // RNTModalView is wrapped in a View to fix the reanimated layout entering issue\n // https://github.com/software-mansion/react-native-reanimated/issues/6659\n return (\n <View>\n <RNTModalView\n style={styles.container}\n statusBarTranslucent={statusBar?.translucent ?? statusBarTranslucent}\n statusBarIconsStyle={statusBar?.barStyle ?? undefined}\n onPressBackAndroid={() =>\n onRequestDismiss?.(DismissalSource.BackButton)\n }\n animationType={animationType}\n >\n <View collapsable={false} style={styles.flex}>\n {isIOS && statusBar && !disableDefaultStatusBarIOS ? (\n <StatusBar {...statusBar} />\n ) : null}\n <GestureHandlerRootView style={styles.flex}>\n <View style={[styles.backdropContainer]}>\n <BackdropPressableComponent\n accessibilityLabel={backdropAccessibilityLabel}\n accessibilityHint={backdropAccessibilityHint}\n style={styles.flex}\n onPress={() => onRequestDismiss?.(DismissalSource.Backdrop)}\n >\n {renderBackdrop ? (\n renderBackdrop()\n ) : (\n <View\n style={[styles.flex, { backgroundColor: backdropColor }]}\n />\n )}\n </BackdropPressableComponent>\n </View>\n <ScrollContextResetter>\n <View\n pointerEvents='box-none'\n style={[styles.content, contentContainerStyle]}\n >\n {children}\n </View>\n </ScrollContextResetter>\n </GestureHandlerRootView>\n </View>\n </RNTModalView>\n </View>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n position: 'absolute',\n },\n flex: {\n flex: 1,\n },\n content: {\n zIndex: 1,\n flex: 1,\n },\n backdropContainer: {\n position: 'absolute',\n zIndex: 0,\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n },\n} as const);\n","import { FC, ReactNode } from 'react';\n\nimport { VirtualizedListContextResetter } from '@react-native/virtualized-lists';\nimport ScrollViewContext from 'react-native/Libraries/Components/ScrollView/ScrollViewContext';\n\ntype ScrollContextResetterProps = {\n children: ReactNode;\n};\n\n// Mimicking RN solution\n// https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Modal/Modal.js\nexport const ScrollContextResetter: FC<ScrollContextResetterProps> = ({\n children,\n}) => {\n return (\n <VirtualizedListContextResetter>\n <ScrollViewContext.Provider value={null}>\n {children}\n </ScrollViewContext.Provider>\n </VirtualizedListContextResetter>\n );\n};\n","/* eslint-disable no-console */\n/* eslint-disable @typescript-eslint/no-require-imports */\n/* eslint-disable @typescript-eslint/no-var-requires */\n/* eslint-disable import/no-unused-modules */\n/* eslint-disable global-require */\n\nimport { ReactNode } from 'react';\n\n// The library is connected if it is detected at runtime.\n// By default, gestures do not work inside a modal window.\nconst importGestureHandlerRootView = () => {\n const Errors = {\n GestureHandlerRootViewNotFound: new Error(\n 'GestureHandlerRootView not found. Please report the issue: https://github.com/paufau/react-native-multiple-modals/issues',\n ),\n };\n\n try {\n const GestureHandlerRootViewComponent =\n require('react-native-gesture-handler').GestureHandlerRootView;\n\n if (!GestureHandlerRootViewComponent) {\n throw Errors.GestureHandlerRootViewNotFound;\n }\n\n return GestureHandlerRootViewComponent;\n } catch (e) {\n if (e === Errors.GestureHandlerRootViewNotFound) {\n console.error(e);\n }\n\n // Fallback component used if the library is not found\n return ({ children }: { children: ReactNode }) => children;\n }\n};\n\nexport const GestureHandlerRootView = importGestureHandlerRootView();\n","/* eslint-disable filename-rules/match */\n/* eslint-disable @typescript-eslint/no-empty-object-type */\nimport type { ViewProps } from 'react-native';\nimport { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';\nimport codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';\n\ntype PressBackAndroidEvent = Readonly<{}>;\ninterface NativeProps extends ViewProps {\n onPressBackAndroid?: DirectEventHandler<PressBackAndroidEvent>;\n statusBarTranslucent?: boolean;\n statusBarIconsStyle?: string;\n animationType: string;\n}\n\n// Codegen doesn't accept variables, so component name is hardcoded\nexport default codegenNativeComponent<NativeProps>('RNTModalView', {\n interfaceOnly: true,\n});\n"]}