diff --git a/README.md b/README.md index e1e12cb..f0b52a5 100644 --- a/README.md +++ b/README.md @@ -111,3 +111,11 @@ The React node you want to display on top of the rest. | Type | Required | | ---- | -------- | | node | Yes | + +- `style` + +Optional props to define the style of the Portal component. + +| Type | Required | +| ----- | -------- | +| style | No | diff --git a/src/Consumer.tsx b/src/Consumer.tsx old mode 100644 new mode 100755 index 806b469..a70df30 --- a/src/Consumer.tsx +++ b/src/Consumer.tsx @@ -1,13 +1,15 @@ import * as React from 'react'; +import { ViewStyle } from 'react-native'; import { IProvider } from './Host'; interface IConsumerProps { children: React.ReactNode; manager: IProvider | null; + style?: ViewStyle; } -export const Consumer = ({ children, manager }: IConsumerProps): null => { +export const Consumer = ({ children, manager, style }: IConsumerProps): null => { const key = React.useRef(undefined); const checkManager = (): void => { @@ -18,13 +20,13 @@ export const Consumer = ({ children, manager }: IConsumerProps): null => { const handleInit = (): void => { checkManager(); - key.current = manager?.mount(children); + key.current = manager?.mount(children, style); }; React.useEffect(() => { checkManager(); - manager?.update(key.current, children); - }, [children, manager]); + manager?.update(key.current, children, style); + }, [children, manager, style]); React.useEffect(() => { handleInit(); diff --git a/src/Host.tsx b/src/Host.tsx old mode 100644 new mode 100755 index b236584..ab8e24d --- a/src/Host.tsx +++ b/src/Host.tsx @@ -10,8 +10,8 @@ interface IHostProps { } export interface IProvider { - mount(children: React.ReactNode): string; - update(key?: string, children?: React.ReactNode): void; + mount(children: React.ReactNode, style?: ViewStyle): string; + update(key?: string, children?: React.ReactNode, style?: ViewStyle): void; unmount(key?: string): void; } @@ -23,6 +23,7 @@ export const Host = ({ children, style }: IHostProps): JSX.Element => { type: 'mount' | 'update' | 'unmount'; key: string; children?: React.ReactNode; + style?: ViewStyle; }[] = []; const { generateKey, removeKey } = useKey(); @@ -33,10 +34,10 @@ export const Host = ({ children, style }: IHostProps): JSX.Element => { if (action) { switch (action.type) { case 'mount': - managerRef.current?.mount(action.key, action.children); + managerRef.current?.mount(action.key, action.children, action.style); break; case 'update': - managerRef.current?.update(action.key, action.children); + managerRef.current?.update(action.key, action.children, action.style); break; case 'unmount': managerRef.current?.unmount(action.key); @@ -46,23 +47,23 @@ export const Host = ({ children, style }: IHostProps): JSX.Element => { } }, []); - const mount = (children: React.ReactNode): string => { + const mount = (children: React.ReactNode, style?: ViewStyle): string => { const key = generateKey(); if (managerRef.current) { - managerRef.current.mount(key, children); + managerRef.current.mount(key, children, style); } else { - queue.push({ type: 'mount', key, children }); + queue.push({ type: 'mount', key, children, style }); } return key; }; - const update = (key: string, children: React.ReactNode): void => { + const update = (key: string, children: React.ReactNode, style?: ViewStyle): void => { if (managerRef.current) { - managerRef.current.update(key, children); + managerRef.current.update(key, children, style); } else { - const op = { type: 'mount' as 'mount', key, children }; + const op = { type: 'mount' as 'mount', key, children, style }; const index = queue.findIndex( o => o.type === 'mount' || (o.type === 'update' && o.key === key), ); diff --git a/src/Manager.tsx b/src/Manager.tsx old mode 100644 new mode 100755 index 8bd91fa..0147089 --- a/src/Manager.tsx +++ b/src/Manager.tsx @@ -1,27 +1,29 @@ import * as React from 'react'; -import { View, StyleSheet } from 'react-native'; +import { View, StyleSheet, ViewStyle } from 'react-native'; export interface IManagerHandles { - mount(key: string, children: React.ReactNode): void; - update(key?: string, children?: React.ReactNode): void; + mount(key: string, children: React.ReactNode, style?: ViewStyle): void; + update(key?: string, children?: React.ReactNode, style?: ViewStyle): void; unmount(key?: string): void; } export const Manager = React.forwardRef((_, ref): any => { - const [portals, setPortals] = React.useState<{ key: string; children: React.ReactNode }[]>([]); + const [portals, setPortals] = React.useState< + { key: string; children: React.ReactNode; style?: ViewStyle }[] + >([]); React.useImperativeHandle( ref, (): IManagerHandles => ({ - mount(key: string, children: React.ReactNode): void { - setPortals(prev => [...prev, { key, children }]); + mount(key: string, children: React.ReactNode, style?: ViewStyle): void { + setPortals(prev => [...prev, { key, children, style }]); }, - update(key: string, children: React.ReactNode): void { + update(key: string, children: React.ReactNode, style?: ViewStyle): void { setPortals(prev => prev.map(item => { if (item.key === key) { - return { ...item, children }; + return { ...item, children, style }; } return item; @@ -35,12 +37,12 @@ export const Manager = React.forwardRef((_, ref): any => { }), ); - return portals.map(({ key, children }, index: number) => ( + return portals.map(({ key, children, style }, index: number) => ( {children} diff --git a/src/Portal.tsx b/src/Portal.tsx old mode 100644 new mode 100755 index d5f5d82..8de8001 --- a/src/Portal.tsx +++ b/src/Portal.tsx @@ -1,14 +1,20 @@ import * as React from 'react'; +import { ViewStyle } from 'react-native'; import { Consumer } from './Consumer'; import { Context } from './Host'; interface IPortalProps { children: React.ReactNode; + style?: ViewStyle; } -export const Portal = ({ children }: IPortalProps): JSX.Element => ( +export const Portal = ({ children, style }: IPortalProps): JSX.Element => ( - {(manager): JSX.Element => {children}} + {(manager): JSX.Element => ( + + {children} + + )} );