UNPKG

6.83 kBSource Map (JSON)View Raw
1{"version":3,"sources":["PortalHost.tsx"],"names":["React","View","StyleSheet","PortalManager","PortalContext","createContext","PortalHost","Component","manager","children","key","nextKey","mount","queue","push","type","update","op","index","findIndex","o","unmount","componentDidMount","length","action","pop","render","styles","container","props","setManager","create","flex"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport PortalManager from './PortalManager';\n\ntype Props = {\n children: React.ReactNode;\n};\n\ntype Operation =\n | { type: 'mount'; key: number; children: React.ReactNode }\n | { type: 'update'; key: number; children: React.ReactNode }\n | { type: 'unmount'; key: number };\n\nexport type PortalMethods = {\n mount: (children: React.ReactNode) => number;\n update: (key: number, children: React.ReactNode) => void;\n unmount: (key: number) => void;\n};\n\nexport const PortalContext = React.createContext<PortalMethods>(null as any);\n\n/**\n * Portal host renders all of its children `Portal` elements.\n * For example, you can wrap a screen in `Portal.Host` to render items above the screen.\n * If you're using the `Provider` component, it already includes `Portal.Host`.\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { Text } from 'react-native';\n * import { Portal } from 'react-native-paper';\n *\n * const MyComponent = () => (\n * <Portal.Host>\n * <Text>Content of the app</Text>\n * </Portal.Host>\n * );\n *\n * export default MyComponent;\n * ```\n *\n * Here any `Portal` elements under `<App />` are rendered alongside `<App />` and will appear above `<App />` like a `Modal`.\n */\nexport default class PortalHost extends React.Component<Props> {\n static displayName = 'Portal.Host';\n\n componentDidMount() {\n const manager = this.manager;\n const queue = this.queue;\n\n while (queue.length && manager) {\n const action = queue.pop();\n if (action) {\n // eslint-disable-next-line default-case\n switch (action.type) {\n case 'mount':\n manager.mount(action.key, action.children);\n break;\n case 'update':\n manager.update(action.key, action.children);\n break;\n case 'unmount':\n manager.unmount(action.key);\n break;\n }\n }\n }\n }\n\n private setManager = (manager: PortalManager | undefined | null) => {\n this.manager = manager;\n };\n\n private mount = (children: React.ReactNode) => {\n const key = this.nextKey++;\n\n if (this.manager) {\n this.manager.mount(key, children);\n } else {\n this.queue.push({ type: 'mount', key, children });\n }\n\n return key;\n };\n\n private update = (key: number, children: React.ReactNode) => {\n if (this.manager) {\n this.manager.update(key, children);\n } else {\n const op: Operation = { type: 'mount', key, children };\n const index = this.queue.findIndex(\n (o) => o.type === 'mount' || (o.type === 'update' && o.key === key)\n );\n\n if (index > -1) {\n this.queue[index] = op;\n } else {\n this.queue.push(op as Operation);\n }\n }\n };\n\n private unmount = (key: number) => {\n if (this.manager) {\n this.manager.unmount(key);\n } else {\n this.queue.push({ type: 'unmount', key });\n }\n };\n\n private nextKey = 0;\n private queue: Operation[] = [];\n private manager: PortalManager | null | undefined;\n\n render() {\n return (\n <PortalContext.Provider\n value={{\n mount: this.mount,\n update: this.update,\n unmount: this.unmount,\n }}\n >\n {/* Need collapsable=false here to clip the elevations, otherwise they appear above Portal components */}\n <View\n style={styles.container}\n collapsable={false}\n pointerEvents=\"box-none\"\n >\n {this.props.children}\n </View>\n <PortalManager ref={this.setManager} />\n </PortalContext.Provider>\n );\n }\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n },\n});\n"]}
\No newline at end of file