@react-native-aria/overlays 0.3.3-rc.0 → 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 +17 -7
- package/lib/commonjs/Portal.js.map +1 -1
- package/lib/module/Portal.js +17 -7
- package/lib/module/Portal.js.map +1 -1
- package/lib/typescript/Portal.d.ts +2 -1
- package/package.json +1 -1
- package/src/Portal.tsx +22 -8
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, {
|
|
@@ -86,16 +87,16 @@ function OverlayContainer(props) {
|
|
|
86
87
|
|
|
87
88
|
const overlayId = _react.default.useRef(undefined);
|
|
88
89
|
|
|
89
|
-
|
|
90
|
+
const element = /*#__PURE__*/_react.default.createElement(OverlayView, props);
|
|
90
91
|
|
|
91
92
|
(0, _react.useEffect)(() => {
|
|
92
93
|
// Mount
|
|
93
94
|
if (overlayId.current === undefined) {
|
|
94
|
-
overlayId.current = context === null || context === void 0 ? void 0 : context.setOverlayItem(
|
|
95
|
+
overlayId.current = context === null || context === void 0 ? void 0 : context.setOverlayItem(element);
|
|
95
96
|
} // Update
|
|
96
97
|
else {
|
|
97
98
|
if (overlayId.current) {
|
|
98
|
-
context === null || context === void 0 ? void 0 : context.updateOverlayItem(overlayId.current,
|
|
99
|
+
context === null || context === void 0 ? void 0 : context.updateOverlayItem(overlayId.current, element);
|
|
99
100
|
}
|
|
100
101
|
}
|
|
101
102
|
}, // To re-render the child
|
|
@@ -107,7 +108,16 @@ function OverlayContainer(props) {
|
|
|
107
108
|
context === null || context === void 0 ? void 0 : context.removeOverlayItem(overlayId.current);
|
|
108
109
|
}
|
|
109
110
|
};
|
|
110
|
-
}, []);
|
|
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
|
+
|
|
111
121
|
return null;
|
|
112
122
|
}
|
|
113
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":"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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"]}
|
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, {
|
|
@@ -65,15 +66,15 @@ export const OverlayProvider = PortalProvider;
|
|
|
65
66
|
export function OverlayContainer(props) {
|
|
66
67
|
const context = usePortalProvider();
|
|
67
68
|
const overlayId = React.useRef(undefined);
|
|
68
|
-
|
|
69
|
+
const element = /*#__PURE__*/React.createElement(OverlayView, props);
|
|
69
70
|
useEffect(() => {
|
|
70
71
|
// Mount
|
|
71
72
|
if (overlayId.current === undefined) {
|
|
72
|
-
overlayId.current = context === null || context === void 0 ? void 0 : context.setOverlayItem(
|
|
73
|
+
overlayId.current = context === null || context === void 0 ? void 0 : context.setOverlayItem(element);
|
|
73
74
|
} // Update
|
|
74
75
|
else {
|
|
75
76
|
if (overlayId.current) {
|
|
76
|
-
context === null || context === void 0 ? void 0 : context.updateOverlayItem(overlayId.current,
|
|
77
|
+
context === null || context === void 0 ? void 0 : context.updateOverlayItem(overlayId.current, element);
|
|
77
78
|
}
|
|
78
79
|
}
|
|
79
80
|
}, // To re-render the child
|
|
@@ -85,7 +86,16 @@ export function OverlayContainer(props) {
|
|
|
85
86
|
context === null || context === void 0 ? void 0 : context.removeOverlayItem(overlayId.current);
|
|
86
87
|
}
|
|
87
88
|
};
|
|
88
|
-
}, []);
|
|
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
|
+
|
|
89
99
|
return null;
|
|
90
100
|
}
|
|
91
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
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,7 +74,7 @@ export function PortalProvider(props: { children: ReactNode }) {
|
|
|
64
74
|
);
|
|
65
75
|
}
|
|
66
76
|
|
|
67
|
-
function OverlayView({style, ...props}: ModalProviderProps) {
|
|
77
|
+
function OverlayView({ style, ...props }: ModalProviderProps) {
|
|
68
78
|
return (
|
|
69
79
|
<View
|
|
70
80
|
pointerEvents="box-none"
|
|
@@ -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
|
|