@react-native-aria/overlays 0.3.2 → 0.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/Portal.js +22 -9
- package/lib/commonjs/Portal.js.map +1 -1
- package/lib/module/Portal.js +22 -9
- package/lib/module/Portal.js.map +1 -1
- package/lib/typescript/Portal.d.ts +2 -1
- package/package.json +2 -2
- package/src/Portal.tsx +23 -9
- package/.DS_Store +0 -0
package/lib/commonjs/Portal.js
CHANGED
|
@@ -24,11 +24,11 @@ let globalOverlayCounter = 0;
|
|
|
24
24
|
function PortalProvider(props) {
|
|
25
25
|
const [items, setItems] = _react.default.useState([]);
|
|
26
26
|
|
|
27
|
-
const setOverlayItem =
|
|
27
|
+
const setOverlayItem = element => {
|
|
28
28
|
const overlayId = ++globalOverlayCounter;
|
|
29
29
|
setItems(prev => prev.concat([{
|
|
30
30
|
id: overlayId,
|
|
31
|
-
node:
|
|
31
|
+
node: element
|
|
32
32
|
}]));
|
|
33
33
|
return overlayId;
|
|
34
34
|
};
|
|
@@ -58,7 +58,8 @@ function PortalProvider(props) {
|
|
|
58
58
|
items,
|
|
59
59
|
setOverlayItem,
|
|
60
60
|
removeOverlayItem,
|
|
61
|
-
updateOverlayItem
|
|
61
|
+
updateOverlayItem,
|
|
62
|
+
isSSR: props === null || props === void 0 ? void 0 : props.isSSR
|
|
62
63
|
}
|
|
63
64
|
}, props.children, items.map(item => {
|
|
64
65
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
|
|
@@ -67,10 +68,13 @@ function PortalProvider(props) {
|
|
|
67
68
|
}));
|
|
68
69
|
}
|
|
69
70
|
|
|
70
|
-
function OverlayView(
|
|
71
|
+
function OverlayView({
|
|
72
|
+
style,
|
|
73
|
+
...props
|
|
74
|
+
}) {
|
|
71
75
|
return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
|
|
72
76
|
pointerEvents: "box-none",
|
|
73
|
-
style: _reactNative.StyleSheet.absoluteFill,
|
|
77
|
+
style: [_reactNative.StyleSheet.absoluteFill, style],
|
|
74
78
|
collapsable: false
|
|
75
79
|
}, props));
|
|
76
80
|
}
|
|
@@ -83,16 +87,16 @@ function OverlayContainer(props) {
|
|
|
83
87
|
|
|
84
88
|
const overlayId = _react.default.useRef(undefined);
|
|
85
89
|
|
|
86
|
-
|
|
90
|
+
const element = /*#__PURE__*/_react.default.createElement(OverlayView, props);
|
|
87
91
|
|
|
88
92
|
(0, _react.useEffect)(() => {
|
|
89
93
|
// Mount
|
|
90
94
|
if (overlayId.current === undefined) {
|
|
91
|
-
overlayId.current = context === null || context === void 0 ? void 0 : context.setOverlayItem(
|
|
95
|
+
overlayId.current = context === null || context === void 0 ? void 0 : context.setOverlayItem(element);
|
|
92
96
|
} // Update
|
|
93
97
|
else {
|
|
94
98
|
if (overlayId.current) {
|
|
95
|
-
context === null || context === void 0 ? void 0 : context.updateOverlayItem(overlayId.current,
|
|
99
|
+
context === null || context === void 0 ? void 0 : context.updateOverlayItem(overlayId.current, element);
|
|
96
100
|
}
|
|
97
101
|
}
|
|
98
102
|
}, // To re-render the child
|
|
@@ -104,7 +108,16 @@ function OverlayContainer(props) {
|
|
|
104
108
|
context === null || context === void 0 ? void 0 : context.removeOverlayItem(overlayId.current);
|
|
105
109
|
}
|
|
106
110
|
};
|
|
107
|
-
}, []);
|
|
111
|
+
}, []); // Rendering elements for SSR
|
|
112
|
+
|
|
113
|
+
if (context !== null && context !== void 0 && context.isSSR && !overlayId.current) {
|
|
114
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
115
|
+
style: {
|
|
116
|
+
display: 'none'
|
|
117
|
+
}
|
|
118
|
+
}, element);
|
|
119
|
+
}
|
|
120
|
+
|
|
108
121
|
return null;
|
|
109
122
|
}
|
|
110
123
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Portal.tsx"],"names":["PortalContext","React","createContext","globalOverlayCounter","PortalProvider","props","items","setItems","useState","setOverlayItem","
|
|
1
|
+
{"version":3,"sources":["Portal.tsx"],"names":["PortalContext","React","createContext","globalOverlayCounter","PortalProvider","props","items","setItems","useState","setOverlayItem","element","overlayId","prev","concat","id","node","updateOverlayItem","map","item","removeOverlayItem","newItems","filter","isSSR","children","OverlayView","style","StyleSheet","absoluteFill","OverlayProvider","OverlayContainer","context","usePortalProvider","useRef","undefined","current","display","useContext"],"mappings":";;;;;;;;;AAAA;;AAEA;;;;;;;;AAoBA,MAAMA,aAAa,gBAAGC,eAAMC,aAAN,CAA0C,IAA1C,CAAtB;;AAEA,IAAIC,oBAAoB,GAAG,CAA3B;;AAEO,SAASC,cAAT,CAAwBC,KAAxB,EAGJ;AACD,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoBN,eAAMO,QAAN,CAAmC,EAAnC,CAA1B;;AAEA,QAAMC,cAAc,GAAIC,OAAD,IAAwB;AAC7C,UAAMC,SAAS,GAAG,EAAER,oBAApB;AACAI,IAAAA,QAAQ,CAAEK,IAAD,IAAUA,IAAI,CAACC,MAAL,CAAY,CAAC;AAAEC,MAAAA,EAAE,EAAEH,SAAN;AAAiBI,MAAAA,IAAI,EAAEL;AAAvB,KAAD,CAAZ,CAAX,CAAR;AACA,WAAOC,SAAP;AACD,GAJD;;AAMA,QAAMK,iBAAiB,GAAG,CAACF,EAAD,EAAaC,IAAb,KAAiC;AACzDR,IAAAA,QAAQ,CAAEK,IAAD,IACPA,IAAI,CAACK,GAAL,CAAUC,IAAD,IAAU;AACjB,UAAIA,IAAI,CAACJ,EAAL,KAAYA,EAAhB,EAAoB;AAClB,eAAO;AAAEA,UAAAA,EAAF;AAAMC,UAAAA;AAAN,SAAP;AACD;;AACD,aAAOG,IAAP;AACD,KALD,CADM,CAAR;AAQD,GATD;;AAWA,QAAMC,iBAAiB,GAAIL,EAAD,IAAgB;AACxCP,IAAAA,QAAQ,CAAEK,IAAD,IAAU;AACjB,YAAMQ,QAAQ,GAAGR,IAAI,CAACS,MAAL,CAAaH,IAAD,IAAUA,IAAI,CAACJ,EAAL,KAAYA,EAAlC,CAAjB;AACA,aAAOM,QAAP;AACD,KAHO,CAAR;AAID,GALD;;AAOA,sBACE,6BAAC,aAAD,CAAe,QAAf;AACE,IAAA,KAAK,EAAE;AACLd,MAAAA,KADK;AAELG,MAAAA,cAFK;AAGLU,MAAAA,iBAHK;AAILH,MAAAA,iBAJK;AAKLM,MAAAA,KAAK,EAAEjB,KAAF,aAAEA,KAAF,uBAAEA,KAAK,CAAEiB;AALT;AADT,KASGjB,KAAK,CAACkB,QATT,EAYGjB,KAAK,CAACW,GAAN,CAAWC,IAAD,IAAU;AACnB,wBAAO,6BAAC,cAAD,CAAO,QAAP;AAAgB,MAAA,GAAG,EAAEA,IAAI,CAACJ;AAA1B,OAA+BI,IAAI,CAACH,IAApC,CAAP;AACD,GAFA,CAZH,CADF;AAkBD;;AAED,SAASS,WAAT,CAAqB;AAAEC,EAAAA,KAAF;AAAS,KAAGpB;AAAZ,CAArB,EAA8D;AAC5D,sBACE,6BAAC,iBAAD;AACE,IAAA,aAAa,EAAC,UADhB;AAEE,IAAA,KAAK,EAAE,CAACqB,wBAAWC,YAAZ,EAA0BF,KAA1B,CAFT;AAGE,IAAA,WAAW,EAAE;AAHf,KAIMpB,KAJN,EADF;AAQD;;AAEM,MAAMuB,eAAe,GAAGxB,cAAxB;;;AAEA,SAASyB,gBAAT,CAA0BxB,KAA1B,EAAqD;AAC1D,QAAMyB,OAAO,GAAGC,iBAAiB,EAAjC;;AACA,QAAMpB,SAAS,GAAGV,eAAM+B,MAAN,CAAiCC,SAAjC,CAAlB;;AACA,QAAMvB,OAAO,gBAAG,6BAAC,WAAD,EAAiBL,KAAjB,CAAhB;;AAEA,wBACE,MAAM;AACJ;AACA,QAAIM,SAAS,CAACuB,OAAV,KAAsBD,SAA1B,EAAqC;AACnCtB,MAAAA,SAAS,CAACuB,OAAV,GAAoBJ,OAApB,aAAoBA,OAApB,uBAAoBA,OAAO,CAAErB,cAAT,CAAwBC,OAAxB,CAApB;AACD,KAFD,CAGA;AAHA,SAIK;AACH,YAAIC,SAAS,CAACuB,OAAd,EAAuB;AACrBJ,UAAAA,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEd,iBAAT,CAA2BL,SAAS,CAACuB,OAArC,EAA8CxB,OAA9C;AACD;AACF;AACF,GAZH,EAaE;AACA,GAACL,KAAD,CAdF,EAL0D,CAsB1D;;AACA,wBAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAIM,SAAS,CAACuB,OAAd,EAAuB;AACrBJ,QAAAA,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEX,iBAAT,CAA2BR,SAAS,CAACuB,OAArC;AACD;AACF,KAJD;AAKD,GAND,EAMG,EANH,EAvB0D,CA+B1D;;AACA,MAAIJ,OAAO,SAAP,IAAAA,OAAO,WAAP,IAAAA,OAAO,CAAER,KAAT,IAAkB,CAACX,SAAS,CAACuB,OAAjC,EAA0C;AACxC,wBAAO,6BAAC,iBAAD;AAAM,MAAA,KAAK,EAAE;AAAEC,QAAAA,OAAO,EAAE;AAAX;AAAb,OAAmCzB,OAAnC,CAAP;AACD;;AACD,SAAO,IAAP;AACD;;AAED,SAASqB,iBAAT,GAA6B;AAC3B,QAAMD,OAAO,GAAG7B,eAAMmC,UAAN,CAAiBpC,aAAjB,CAAhB;;AACA,SAAO8B,OAAP;AACD","sourcesContent":["import React, { useEffect } from 'react';\nimport type { ReactNode } from 'react';\nimport { StyleSheet, View, ViewProps } from 'react-native';\n\ntype OverlayItem = {\n id: number;\n node: ReactNode;\n};\n\ninterface PortalContext {\n items: Array<OverlayItem>;\n setOverlayItem: (node: ReactNode) => number;\n removeOverlayItem: (id: number) => void;\n updateOverlayItem: (id: number, node: ReactNode) => void;\n isSSR?: boolean;\n}\n\ninterface ModalProviderProps extends ViewProps {\n children: ReactNode;\n provider?: boolean;\n}\n\nconst PortalContext = React.createContext<PortalContext | null>(null);\n\nlet globalOverlayCounter = 0;\n\nexport function PortalProvider(props: {\n children: ReactNode;\n isSSR?: boolean;\n}) {\n const [items, setItems] = React.useState<Array<OverlayItem>>([]);\n\n const setOverlayItem = (element: ReactNode) => {\n const overlayId = ++globalOverlayCounter;\n setItems((prev) => prev.concat([{ id: overlayId, node: element }]));\n return overlayId;\n };\n\n const updateOverlayItem = (id: number, node: ReactNode) => {\n setItems((prev) =>\n prev.map((item) => {\n if (item.id === id) {\n return { id, node };\n }\n return item;\n })\n );\n };\n\n const removeOverlayItem = (id: number) => {\n setItems((prev) => {\n const newItems = prev.filter((item) => item.id !== id);\n return newItems;\n });\n };\n\n return (\n <PortalContext.Provider\n value={{\n items,\n setOverlayItem,\n removeOverlayItem,\n updateOverlayItem,\n isSSR: props?.isSSR,\n }}\n >\n {props.children}\n\n {/* Render Overlays */}\n {items.map((item) => {\n return <React.Fragment key={item.id}>{item.node}</React.Fragment>;\n })}\n </PortalContext.Provider>\n );\n}\n\nfunction OverlayView({ style, ...props }: ModalProviderProps) {\n return (\n <View\n pointerEvents=\"box-none\"\n style={[StyleSheet.absoluteFill, style]}\n collapsable={false}\n {...props}\n />\n );\n}\n\nexport const OverlayProvider = PortalProvider;\n\nexport function OverlayContainer(props: ModalProviderProps) {\n const context = usePortalProvider();\n const overlayId = React.useRef<number | undefined>(undefined);\n const element = <OverlayView {...props} />;\n\n useEffect(\n () => {\n // Mount\n if (overlayId.current === undefined) {\n overlayId.current = context?.setOverlayItem(element);\n }\n // Update\n else {\n if (overlayId.current) {\n context?.updateOverlayItem(overlayId.current, element);\n }\n }\n },\n // To re-render the child\n [props]\n );\n\n // Unmount\n useEffect(() => {\n return () => {\n if (overlayId.current) {\n context?.removeOverlayItem(overlayId.current);\n }\n };\n }, []);\n\n // Rendering elements for SSR\n if (context?.isSSR && !overlayId.current) {\n return <View style={{ display: 'none' }}>{element}</View>;\n }\n return null;\n}\n\nfunction usePortalProvider() {\n const context = React.useContext(PortalContext);\n return context;\n}\n"]}
|
package/lib/module/Portal.js
CHANGED
|
@@ -7,11 +7,11 @@ let globalOverlayCounter = 0;
|
|
|
7
7
|
export function PortalProvider(props) {
|
|
8
8
|
const [items, setItems] = React.useState([]);
|
|
9
9
|
|
|
10
|
-
const setOverlayItem =
|
|
10
|
+
const setOverlayItem = element => {
|
|
11
11
|
const overlayId = ++globalOverlayCounter;
|
|
12
12
|
setItems(prev => prev.concat([{
|
|
13
13
|
id: overlayId,
|
|
14
|
-
node:
|
|
14
|
+
node: element
|
|
15
15
|
}]));
|
|
16
16
|
return overlayId;
|
|
17
17
|
};
|
|
@@ -41,7 +41,8 @@ export function PortalProvider(props) {
|
|
|
41
41
|
items,
|
|
42
42
|
setOverlayItem,
|
|
43
43
|
removeOverlayItem,
|
|
44
|
-
updateOverlayItem
|
|
44
|
+
updateOverlayItem,
|
|
45
|
+
isSSR: props === null || props === void 0 ? void 0 : props.isSSR
|
|
45
46
|
}
|
|
46
47
|
}, props.children, items.map(item => {
|
|
47
48
|
return /*#__PURE__*/React.createElement(React.Fragment, {
|
|
@@ -50,10 +51,13 @@ export function PortalProvider(props) {
|
|
|
50
51
|
}));
|
|
51
52
|
}
|
|
52
53
|
|
|
53
|
-
function OverlayView(
|
|
54
|
+
function OverlayView({
|
|
55
|
+
style,
|
|
56
|
+
...props
|
|
57
|
+
}) {
|
|
54
58
|
return /*#__PURE__*/React.createElement(View, _extends({
|
|
55
59
|
pointerEvents: "box-none",
|
|
56
|
-
style: StyleSheet.absoluteFill,
|
|
60
|
+
style: [StyleSheet.absoluteFill, style],
|
|
57
61
|
collapsable: false
|
|
58
62
|
}, props));
|
|
59
63
|
}
|
|
@@ -62,15 +66,15 @@ export const OverlayProvider = PortalProvider;
|
|
|
62
66
|
export function OverlayContainer(props) {
|
|
63
67
|
const context = usePortalProvider();
|
|
64
68
|
const overlayId = React.useRef(undefined);
|
|
65
|
-
|
|
69
|
+
const element = /*#__PURE__*/React.createElement(OverlayView, props);
|
|
66
70
|
useEffect(() => {
|
|
67
71
|
// Mount
|
|
68
72
|
if (overlayId.current === undefined) {
|
|
69
|
-
overlayId.current = context === null || context === void 0 ? void 0 : context.setOverlayItem(
|
|
73
|
+
overlayId.current = context === null || context === void 0 ? void 0 : context.setOverlayItem(element);
|
|
70
74
|
} // Update
|
|
71
75
|
else {
|
|
72
76
|
if (overlayId.current) {
|
|
73
|
-
context === null || context === void 0 ? void 0 : context.updateOverlayItem(overlayId.current,
|
|
77
|
+
context === null || context === void 0 ? void 0 : context.updateOverlayItem(overlayId.current, element);
|
|
74
78
|
}
|
|
75
79
|
}
|
|
76
80
|
}, // To re-render the child
|
|
@@ -82,7 +86,16 @@ export function OverlayContainer(props) {
|
|
|
82
86
|
context === null || context === void 0 ? void 0 : context.removeOverlayItem(overlayId.current);
|
|
83
87
|
}
|
|
84
88
|
};
|
|
85
|
-
}, []);
|
|
89
|
+
}, []); // Rendering elements for SSR
|
|
90
|
+
|
|
91
|
+
if (context !== null && context !== void 0 && context.isSSR && !overlayId.current) {
|
|
92
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
93
|
+
style: {
|
|
94
|
+
display: 'none'
|
|
95
|
+
}
|
|
96
|
+
}, element);
|
|
97
|
+
}
|
|
98
|
+
|
|
86
99
|
return null;
|
|
87
100
|
}
|
|
88
101
|
|
package/lib/module/Portal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Portal.tsx"],"names":["React","useEffect","StyleSheet","View","PortalContext","createContext","globalOverlayCounter","PortalProvider","props","items","setItems","useState","setOverlayItem","
|
|
1
|
+
{"version":3,"sources":["Portal.tsx"],"names":["React","useEffect","StyleSheet","View","PortalContext","createContext","globalOverlayCounter","PortalProvider","props","items","setItems","useState","setOverlayItem","element","overlayId","prev","concat","id","node","updateOverlayItem","map","item","removeOverlayItem","newItems","filter","isSSR","children","OverlayView","style","absoluteFill","OverlayProvider","OverlayContainer","context","usePortalProvider","useRef","undefined","current","display","useContext"],"mappings":"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","sourcesContent":["import React, { useEffect } from 'react';\nimport type { ReactNode } from 'react';\nimport { StyleSheet, View, ViewProps } from 'react-native';\n\ntype OverlayItem = {\n id: number;\n node: ReactNode;\n};\n\ninterface PortalContext {\n items: Array<OverlayItem>;\n setOverlayItem: (node: ReactNode) => number;\n removeOverlayItem: (id: number) => void;\n updateOverlayItem: (id: number, node: ReactNode) => void;\n isSSR?: boolean;\n}\n\ninterface ModalProviderProps extends ViewProps {\n children: ReactNode;\n provider?: boolean;\n}\n\nconst PortalContext = React.createContext<PortalContext | null>(null);\n\nlet globalOverlayCounter = 0;\n\nexport function PortalProvider(props: {\n children: ReactNode;\n isSSR?: boolean;\n}) {\n const [items, setItems] = React.useState<Array<OverlayItem>>([]);\n\n const setOverlayItem = (element: ReactNode) => {\n const overlayId = ++globalOverlayCounter;\n setItems((prev) => prev.concat([{ id: overlayId, node: element }]));\n return overlayId;\n };\n\n const updateOverlayItem = (id: number, node: ReactNode) => {\n setItems((prev) =>\n prev.map((item) => {\n if (item.id === id) {\n return { id, node };\n }\n return item;\n })\n );\n };\n\n const removeOverlayItem = (id: number) => {\n setItems((prev) => {\n const newItems = prev.filter((item) => item.id !== id);\n return newItems;\n });\n };\n\n return (\n <PortalContext.Provider\n value={{\n items,\n setOverlayItem,\n removeOverlayItem,\n updateOverlayItem,\n isSSR: props?.isSSR,\n }}\n >\n {props.children}\n\n {/* Render Overlays */}\n {items.map((item) => {\n return <React.Fragment key={item.id}>{item.node}</React.Fragment>;\n })}\n </PortalContext.Provider>\n );\n}\n\nfunction OverlayView({ style, ...props }: ModalProviderProps) {\n return (\n <View\n pointerEvents=\"box-none\"\n style={[StyleSheet.absoluteFill, style]}\n collapsable={false}\n {...props}\n />\n );\n}\n\nexport const OverlayProvider = PortalProvider;\n\nexport function OverlayContainer(props: ModalProviderProps) {\n const context = usePortalProvider();\n const overlayId = React.useRef<number | undefined>(undefined);\n const element = <OverlayView {...props} />;\n\n useEffect(\n () => {\n // Mount\n if (overlayId.current === undefined) {\n overlayId.current = context?.setOverlayItem(element);\n }\n // Update\n else {\n if (overlayId.current) {\n context?.updateOverlayItem(overlayId.current, element);\n }\n }\n },\n // To re-render the child\n [props]\n );\n\n // Unmount\n useEffect(() => {\n return () => {\n if (overlayId.current) {\n context?.removeOverlayItem(overlayId.current);\n }\n };\n }, []);\n\n // Rendering elements for SSR\n if (context?.isSSR && !overlayId.current) {\n return <View style={{ display: 'none' }}>{element}</View>;\n }\n return null;\n}\n\nfunction usePortalProvider() {\n const context = React.useContext(PortalContext);\n return context;\n}\n"]}
|
|
@@ -6,7 +6,8 @@ interface ModalProviderProps extends ViewProps {
|
|
|
6
6
|
}
|
|
7
7
|
export declare function PortalProvider(props: {
|
|
8
8
|
children: ReactNode;
|
|
9
|
+
isSSR?: boolean;
|
|
9
10
|
}): JSX.Element;
|
|
10
11
|
export declare const OverlayProvider: typeof PortalProvider;
|
|
11
|
-
export declare function OverlayContainer(props: ModalProviderProps):
|
|
12
|
+
export declare function OverlayContainer(props: ModalProviderProps): JSX.Element;
|
|
12
13
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-native-aria/overlays",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.3",
|
|
4
4
|
"description": "Overlay utilities. Part of react-native-aria",
|
|
5
5
|
"main": "lib/commonjs/index",
|
|
6
6
|
"module": "lib/module/index",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@react-aria/interactions": "^3.3.2",
|
|
36
36
|
"@react-aria/overlays": "^3.7.0",
|
|
37
|
-
"@react-native-aria/utils": "^0.2.
|
|
37
|
+
"@react-native-aria/utils": "^0.2.8",
|
|
38
38
|
"@react-stately/overlays": "^3.1.1",
|
|
39
39
|
"@react-types/overlays": "^3.4.0",
|
|
40
40
|
"dom-helpers": "^5.0.0"
|
package/src/Portal.tsx
CHANGED
|
@@ -12,6 +12,7 @@ interface PortalContext {
|
|
|
12
12
|
setOverlayItem: (node: ReactNode) => number;
|
|
13
13
|
removeOverlayItem: (id: number) => void;
|
|
14
14
|
updateOverlayItem: (id: number, node: ReactNode) => void;
|
|
15
|
+
isSSR?: boolean;
|
|
15
16
|
}
|
|
16
17
|
|
|
17
18
|
interface ModalProviderProps extends ViewProps {
|
|
@@ -23,12 +24,15 @@ const PortalContext = React.createContext<PortalContext | null>(null);
|
|
|
23
24
|
|
|
24
25
|
let globalOverlayCounter = 0;
|
|
25
26
|
|
|
26
|
-
export function PortalProvider(props: {
|
|
27
|
+
export function PortalProvider(props: {
|
|
28
|
+
children: ReactNode;
|
|
29
|
+
isSSR?: boolean;
|
|
30
|
+
}) {
|
|
27
31
|
const [items, setItems] = React.useState<Array<OverlayItem>>([]);
|
|
28
32
|
|
|
29
|
-
const setOverlayItem = (
|
|
33
|
+
const setOverlayItem = (element: ReactNode) => {
|
|
30
34
|
const overlayId = ++globalOverlayCounter;
|
|
31
|
-
setItems((prev) => prev.concat([{ id: overlayId, node:
|
|
35
|
+
setItems((prev) => prev.concat([{ id: overlayId, node: element }]));
|
|
32
36
|
return overlayId;
|
|
33
37
|
};
|
|
34
38
|
|
|
@@ -52,7 +56,13 @@ export function PortalProvider(props: { children: ReactNode }) {
|
|
|
52
56
|
|
|
53
57
|
return (
|
|
54
58
|
<PortalContext.Provider
|
|
55
|
-
value={{
|
|
59
|
+
value={{
|
|
60
|
+
items,
|
|
61
|
+
setOverlayItem,
|
|
62
|
+
removeOverlayItem,
|
|
63
|
+
updateOverlayItem,
|
|
64
|
+
isSSR: props?.isSSR,
|
|
65
|
+
}}
|
|
56
66
|
>
|
|
57
67
|
{props.children}
|
|
58
68
|
|
|
@@ -64,11 +74,11 @@ export function PortalProvider(props: { children: ReactNode }) {
|
|
|
64
74
|
);
|
|
65
75
|
}
|
|
66
76
|
|
|
67
|
-
function OverlayView(props: ModalProviderProps) {
|
|
77
|
+
function OverlayView({ style, ...props }: ModalProviderProps) {
|
|
68
78
|
return (
|
|
69
79
|
<View
|
|
70
80
|
pointerEvents="box-none"
|
|
71
|
-
style={StyleSheet.absoluteFill}
|
|
81
|
+
style={[StyleSheet.absoluteFill, style]}
|
|
72
82
|
collapsable={false}
|
|
73
83
|
{...props}
|
|
74
84
|
/>
|
|
@@ -80,18 +90,18 @@ export const OverlayProvider = PortalProvider;
|
|
|
80
90
|
export function OverlayContainer(props: ModalProviderProps) {
|
|
81
91
|
const context = usePortalProvider();
|
|
82
92
|
const overlayId = React.useRef<number | undefined>(undefined);
|
|
83
|
-
|
|
93
|
+
const element = <OverlayView {...props} />;
|
|
84
94
|
|
|
85
95
|
useEffect(
|
|
86
96
|
() => {
|
|
87
97
|
// Mount
|
|
88
98
|
if (overlayId.current === undefined) {
|
|
89
|
-
overlayId.current = context?.setOverlayItem(
|
|
99
|
+
overlayId.current = context?.setOverlayItem(element);
|
|
90
100
|
}
|
|
91
101
|
// Update
|
|
92
102
|
else {
|
|
93
103
|
if (overlayId.current) {
|
|
94
|
-
context?.updateOverlayItem(overlayId.current,
|
|
104
|
+
context?.updateOverlayItem(overlayId.current, element);
|
|
95
105
|
}
|
|
96
106
|
}
|
|
97
107
|
},
|
|
@@ -108,6 +118,10 @@ export function OverlayContainer(props: ModalProviderProps) {
|
|
|
108
118
|
};
|
|
109
119
|
}, []);
|
|
110
120
|
|
|
121
|
+
// Rendering elements for SSR
|
|
122
|
+
if (context?.isSSR && !overlayId.current) {
|
|
123
|
+
return <View style={{ display: 'none' }}>{element}</View>;
|
|
124
|
+
}
|
|
111
125
|
return null;
|
|
112
126
|
}
|
|
113
127
|
|
package/.DS_Store
DELETED
|
Binary file
|