@tamagui/portal 1.0.21 → 1.0.22
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/dist/jsx/GorhomPortal.js +242 -0
- package/dist/jsx/GorhomPortal.js.map +7 -0
- package/dist/jsx/Portal.js +20 -0
- package/dist/jsx/Portal.js.map +7 -0
- package/dist/jsx/Portal.native.js +25 -0
- package/dist/jsx/Portal.native.js.map +7 -0
- package/dist/jsx/PortalProps.js +1 -0
- package/dist/jsx/PortalProps.js.map +7 -0
- package/dist/jsx/index.js +4 -0
- package/dist/jsx/index.js.map +7 -0
- package/package.json +5 -5
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
import {
|
|
2
|
+
useDidFinishSSR,
|
|
3
|
+
useEvent,
|
|
4
|
+
useIsomorphicLayoutEffect
|
|
5
|
+
} from "@tamagui/core";
|
|
6
|
+
import React, {
|
|
7
|
+
createContext,
|
|
8
|
+
memo,
|
|
9
|
+
startTransition,
|
|
10
|
+
useCallback,
|
|
11
|
+
useContext,
|
|
12
|
+
useEffect,
|
|
13
|
+
useId,
|
|
14
|
+
useMemo,
|
|
15
|
+
useReducer
|
|
16
|
+
} from "react";
|
|
17
|
+
var ACTIONS = /* @__PURE__ */ ((ACTIONS2) => {
|
|
18
|
+
ACTIONS2[ACTIONS2["REGISTER_HOST"] = 0] = "REGISTER_HOST";
|
|
19
|
+
ACTIONS2[ACTIONS2["DEREGISTER_HOST"] = 1] = "DEREGISTER_HOST";
|
|
20
|
+
ACTIONS2[ACTIONS2["ADD_UPDATE_PORTAL"] = 2] = "ADD_UPDATE_PORTAL";
|
|
21
|
+
ACTIONS2[ACTIONS2["REMOVE_PORTAL"] = 3] = "REMOVE_PORTAL";
|
|
22
|
+
return ACTIONS2;
|
|
23
|
+
})(ACTIONS || {});
|
|
24
|
+
const INITIAL_STATE = {};
|
|
25
|
+
const registerHost = (state, hostName) => {
|
|
26
|
+
if (!(hostName in state)) {
|
|
27
|
+
state[hostName] = [];
|
|
28
|
+
}
|
|
29
|
+
return state;
|
|
30
|
+
};
|
|
31
|
+
const deregisterHost = (state, hostName) => {
|
|
32
|
+
delete state[hostName];
|
|
33
|
+
return state;
|
|
34
|
+
};
|
|
35
|
+
const addUpdatePortal = (state, hostName, portalName, node) => {
|
|
36
|
+
if (!(hostName in state)) {
|
|
37
|
+
state = registerHost(state, hostName);
|
|
38
|
+
}
|
|
39
|
+
const index = state[hostName].findIndex((item) => item.name === portalName);
|
|
40
|
+
if (index !== -1) {
|
|
41
|
+
state[hostName][index].node = node;
|
|
42
|
+
} else {
|
|
43
|
+
state[hostName].push({
|
|
44
|
+
name: portalName,
|
|
45
|
+
node
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
return state;
|
|
49
|
+
};
|
|
50
|
+
const removePortal = (state, hostName, portalName) => {
|
|
51
|
+
if (!(hostName in state)) {
|
|
52
|
+
console.log(
|
|
53
|
+
`Failed to remove portal '${portalName}', '${hostName}' was not registered!`
|
|
54
|
+
);
|
|
55
|
+
return state;
|
|
56
|
+
}
|
|
57
|
+
const index = state[hostName].findIndex((item) => item.name === portalName);
|
|
58
|
+
if (index !== -1)
|
|
59
|
+
state[hostName].splice(index, 1);
|
|
60
|
+
return state;
|
|
61
|
+
};
|
|
62
|
+
const reducer = (state, action) => {
|
|
63
|
+
const { type } = action;
|
|
64
|
+
switch (type) {
|
|
65
|
+
case 0 /* REGISTER_HOST */:
|
|
66
|
+
return registerHost({ ...state }, action.hostName);
|
|
67
|
+
case 1 /* DEREGISTER_HOST */:
|
|
68
|
+
return deregisterHost({ ...state }, action.hostName);
|
|
69
|
+
case 2 /* ADD_UPDATE_PORTAL */:
|
|
70
|
+
return addUpdatePortal(
|
|
71
|
+
{ ...state },
|
|
72
|
+
action.hostName,
|
|
73
|
+
action.portalName,
|
|
74
|
+
action.node
|
|
75
|
+
);
|
|
76
|
+
case 3 /* REMOVE_PORTAL */:
|
|
77
|
+
return removePortal(
|
|
78
|
+
{ ...state },
|
|
79
|
+
action.hostName,
|
|
80
|
+
action.portalName
|
|
81
|
+
);
|
|
82
|
+
default:
|
|
83
|
+
return state;
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
const PortalStateContext = createContext(null);
|
|
87
|
+
const PortalDispatchContext = createContext(null);
|
|
88
|
+
const usePortalState = (hostName) => {
|
|
89
|
+
const state = useContext(PortalStateContext);
|
|
90
|
+
if (state === null) {
|
|
91
|
+
throw new Error(
|
|
92
|
+
"'PortalStateContext' cannot be null, please add 'PortalProvider' to the root component."
|
|
93
|
+
);
|
|
94
|
+
}
|
|
95
|
+
return state[hostName] || [];
|
|
96
|
+
};
|
|
97
|
+
const usePortal = (hostName = "root") => {
|
|
98
|
+
const dispatch = useContext(PortalDispatchContext);
|
|
99
|
+
if (dispatch === null) {
|
|
100
|
+
throw new Error(
|
|
101
|
+
"'PortalDispatchContext' cannot be null, please add 'PortalProvider' to the root component."
|
|
102
|
+
);
|
|
103
|
+
}
|
|
104
|
+
const registerHost2 = useCallback(() => {
|
|
105
|
+
dispatch({
|
|
106
|
+
type: 0 /* REGISTER_HOST */,
|
|
107
|
+
hostName
|
|
108
|
+
});
|
|
109
|
+
}, []);
|
|
110
|
+
const deregisterHost2 = useCallback(() => {
|
|
111
|
+
dispatch({
|
|
112
|
+
type: 1 /* DEREGISTER_HOST */,
|
|
113
|
+
hostName
|
|
114
|
+
});
|
|
115
|
+
}, []);
|
|
116
|
+
const addUpdatePortal2 = useCallback((name, node) => {
|
|
117
|
+
dispatch({
|
|
118
|
+
type: 2 /* ADD_UPDATE_PORTAL */,
|
|
119
|
+
hostName,
|
|
120
|
+
portalName: name,
|
|
121
|
+
node
|
|
122
|
+
});
|
|
123
|
+
}, []);
|
|
124
|
+
const removePortal2 = useCallback((name) => {
|
|
125
|
+
dispatch({
|
|
126
|
+
type: 3 /* REMOVE_PORTAL */,
|
|
127
|
+
hostName,
|
|
128
|
+
portalName: name
|
|
129
|
+
});
|
|
130
|
+
}, []);
|
|
131
|
+
return {
|
|
132
|
+
registerHost: registerHost2,
|
|
133
|
+
deregisterHost: deregisterHost2,
|
|
134
|
+
addPortal: addUpdatePortal2,
|
|
135
|
+
updatePortal: addUpdatePortal2,
|
|
136
|
+
removePortal: removePortal2
|
|
137
|
+
};
|
|
138
|
+
};
|
|
139
|
+
const PortalProviderComponent = ({
|
|
140
|
+
rootHostName = "root",
|
|
141
|
+
shouldAddRootHost = true,
|
|
142
|
+
children
|
|
143
|
+
}) => {
|
|
144
|
+
const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
|
|
145
|
+
const transitionDispatch = useMemo(() => {
|
|
146
|
+
const next = (value) => {
|
|
147
|
+
startTransition(() => {
|
|
148
|
+
dispatch(value);
|
|
149
|
+
});
|
|
150
|
+
};
|
|
151
|
+
return next;
|
|
152
|
+
}, [dispatch]);
|
|
153
|
+
return <PortalDispatchContext.Provider value={transitionDispatch}><PortalStateContext.Provider value={state}>
|
|
154
|
+
{children}
|
|
155
|
+
{shouldAddRootHost && <PortalHost name={rootHostName} />}
|
|
156
|
+
</PortalStateContext.Provider></PortalDispatchContext.Provider>;
|
|
157
|
+
};
|
|
158
|
+
const PortalProvider = memo(PortalProviderComponent);
|
|
159
|
+
PortalProvider.displayName = "PortalProvider";
|
|
160
|
+
const PortalHostComponent = (props) => {
|
|
161
|
+
const { name, forwardProps } = props;
|
|
162
|
+
const isServer = !useDidFinishSSR();
|
|
163
|
+
const state = usePortalState(name);
|
|
164
|
+
const { registerHost: registerHost2, deregisterHost: deregisterHost2 } = usePortal(props.name);
|
|
165
|
+
useEffect(() => {
|
|
166
|
+
if (isServer)
|
|
167
|
+
return;
|
|
168
|
+
registerHost2();
|
|
169
|
+
return () => {
|
|
170
|
+
deregisterHost2();
|
|
171
|
+
};
|
|
172
|
+
}, [isServer]);
|
|
173
|
+
if (forwardProps) {
|
|
174
|
+
return <>{state.map((item) => {
|
|
175
|
+
let next = item.node;
|
|
176
|
+
if (forwardProps) {
|
|
177
|
+
return React.Children.map(next, (child) => {
|
|
178
|
+
return React.isValidElement(child) ? React.cloneElement(child, { key: child.key, ...forwardProps }) : child;
|
|
179
|
+
});
|
|
180
|
+
}
|
|
181
|
+
return next;
|
|
182
|
+
})}</>;
|
|
183
|
+
}
|
|
184
|
+
return <>{state.map((item) => item.node)}</>;
|
|
185
|
+
};
|
|
186
|
+
const PortalHost = memo(PortalHostComponent);
|
|
187
|
+
PortalHost.displayName = "PortalHost";
|
|
188
|
+
const PortalComponent = (props) => {
|
|
189
|
+
const {
|
|
190
|
+
name: _providedName,
|
|
191
|
+
hostName,
|
|
192
|
+
handleOnMount: _providedHandleOnMount,
|
|
193
|
+
handleOnUnmount: _providedHandleOnUnmount,
|
|
194
|
+
handleOnUpdate: _providedHandleOnUpdate,
|
|
195
|
+
children
|
|
196
|
+
} = props;
|
|
197
|
+
const { addPortal: addUpdatePortal2, removePortal: removePortal2 } = usePortal(hostName);
|
|
198
|
+
const id = useId();
|
|
199
|
+
const name = _providedName || id;
|
|
200
|
+
const handleOnMount = useEvent(() => {
|
|
201
|
+
if (_providedHandleOnMount) {
|
|
202
|
+
_providedHandleOnMount(() => addUpdatePortal2(name, children));
|
|
203
|
+
} else {
|
|
204
|
+
addUpdatePortal2(name, children);
|
|
205
|
+
}
|
|
206
|
+
});
|
|
207
|
+
const handleOnUnmount = useEvent(() => {
|
|
208
|
+
if (_providedHandleOnUnmount) {
|
|
209
|
+
_providedHandleOnUnmount(() => removePortal2(name));
|
|
210
|
+
} else {
|
|
211
|
+
removePortal2(name);
|
|
212
|
+
}
|
|
213
|
+
});
|
|
214
|
+
const handleOnUpdate = useEvent(() => {
|
|
215
|
+
if (_providedHandleOnUpdate) {
|
|
216
|
+
_providedHandleOnUpdate(() => addUpdatePortal2(name, children));
|
|
217
|
+
} else {
|
|
218
|
+
addUpdatePortal2(name, children);
|
|
219
|
+
}
|
|
220
|
+
});
|
|
221
|
+
useIsomorphicLayoutEffect(() => {
|
|
222
|
+
handleOnMount();
|
|
223
|
+
return () => {
|
|
224
|
+
handleOnUnmount();
|
|
225
|
+
};
|
|
226
|
+
}, []);
|
|
227
|
+
useEffect(() => {
|
|
228
|
+
handleOnUpdate();
|
|
229
|
+
}, [children]);
|
|
230
|
+
return null;
|
|
231
|
+
};
|
|
232
|
+
const PortalItem = memo(PortalComponent);
|
|
233
|
+
PortalItem.displayName = "Portal";
|
|
234
|
+
export {
|
|
235
|
+
ACTIONS,
|
|
236
|
+
INITIAL_STATE,
|
|
237
|
+
PortalHost,
|
|
238
|
+
PortalItem,
|
|
239
|
+
PortalProvider,
|
|
240
|
+
usePortal
|
|
241
|
+
};
|
|
242
|
+
//# sourceMappingURL=GorhomPortal.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/GorhomPortal.tsx"],
|
|
4
|
+
"sourcesContent": ["// from https://github.com/gorhom/react-native-portal\n// MIT License Copyright (c) 2020 Mo Gorhom\n// fixing SSR issue\n\nimport {\n spacedChildren,\n useDidFinishSSR,\n useEvent,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport React, {\n ReactNode,\n cloneElement,\n createContext,\n isValidElement,\n memo,\n startTransition,\n useCallback,\n useContext,\n useEffect,\n useId,\n useMemo,\n useReducer,\n useRef,\n} from 'react'\n\ninterface PortalType {\n name: string\n node: ReactNode\n}\n\nenum ACTIONS {\n REGISTER_HOST,\n DEREGISTER_HOST,\n ADD_UPDATE_PORTAL,\n REMOVE_PORTAL,\n}\n\nconst INITIAL_STATE = {}\n\nexport { ACTIONS, INITIAL_STATE }\n\nexport interface AddUpdatePortalAction {\n type: ACTIONS\n hostName: string\n portalName: string\n node: ReactNode\n}\n\nexport interface RemovePortalAction {\n type: ACTIONS\n hostName: string\n portalName: string\n}\n\nexport interface RegisterHostAction {\n type: ACTIONS\n hostName: string\n}\n\nexport interface UnregisterHostAction {\n type: ACTIONS\n hostName: string\n}\n\nexport type ActionTypes =\n | AddUpdatePortalAction\n | RemovePortalAction\n | RegisterHostAction\n | UnregisterHostAction\n\nconst registerHost = (state: Record<string, Array<PortalType>>, hostName: string) => {\n if (!(hostName in state)) {\n state[hostName] = []\n }\n return state\n}\n\nconst deregisterHost = (state: Record<string, Array<PortalType>>, hostName: string) => {\n delete state[hostName]\n return state\n}\n\nconst addUpdatePortal = (\n state: Record<string, Array<PortalType>>,\n hostName: string,\n portalName: string,\n node: any\n) => {\n if (!(hostName in state)) {\n state = registerHost(state, hostName)\n }\n\n /**\n * updated portal, if it was already added.\n */\n const index = state[hostName].findIndex((item) => item.name === portalName)\n if (index !== -1) {\n state[hostName][index].node = node\n } else {\n state[hostName].push({\n name: portalName,\n node,\n })\n }\n return state\n}\n\nconst removePortal = (\n state: Record<string, Array<PortalType>>,\n hostName: string,\n portalName: string\n) => {\n if (!(hostName in state)) {\n // eslint-disable-next-line no-console\n console.log(\n `Failed to remove portal '${portalName}', '${hostName}' was not registered!`\n )\n return state\n }\n\n const index = state[hostName].findIndex((item) => item.name === portalName)\n if (index !== -1) state[hostName].splice(index, 1)\n return state\n}\n\nconst reducer = (state: Record<string, Array<PortalType>>, action: ActionTypes) => {\n const { type } = action\n switch (type) {\n case ACTIONS.REGISTER_HOST:\n return registerHost({ ...state }, action.hostName)\n case ACTIONS.DEREGISTER_HOST:\n return deregisterHost({ ...state }, action.hostName)\n case ACTIONS.ADD_UPDATE_PORTAL:\n return addUpdatePortal(\n { ...state },\n action.hostName,\n (action as AddUpdatePortalAction).portalName,\n (action as AddUpdatePortalAction).node\n )\n case ACTIONS.REMOVE_PORTAL:\n return removePortal(\n { ...state },\n action.hostName,\n (action as RemovePortalAction).portalName\n )\n default:\n return state\n }\n}\n\nconst PortalStateContext = createContext<Record<string, Array<PortalType>> | null>(null)\nconst PortalDispatchContext = createContext<React.Dispatch<ActionTypes> | null>(null)\n\nconst usePortalState = (hostName: string) => {\n const state = useContext(PortalStateContext)\n\n if (state === null) {\n throw new Error(\n \"'PortalStateContext' cannot be null, please add 'PortalProvider' to the root component.\"\n )\n }\n\n return state[hostName] || []\n}\n\nexport const usePortal = (hostName = 'root') => {\n const dispatch = useContext(PortalDispatchContext)\n\n if (dispatch === null) {\n throw new Error(\n \"'PortalDispatchContext' cannot be null, please add 'PortalProvider' to the root component.\"\n )\n }\n\n //#region methods\n const registerHost = useCallback(() => {\n dispatch({\n type: ACTIONS.REGISTER_HOST,\n hostName: hostName,\n })\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n const deregisterHost = useCallback(() => {\n dispatch({\n type: ACTIONS.DEREGISTER_HOST,\n hostName: hostName,\n })\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n const addUpdatePortal = useCallback((name: string, node: ReactNode) => {\n dispatch({\n type: ACTIONS.ADD_UPDATE_PORTAL,\n hostName,\n portalName: name,\n node,\n })\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n const removePortal = useCallback((name: string) => {\n dispatch({\n type: ACTIONS.REMOVE_PORTAL,\n hostName,\n portalName: name,\n })\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n //#endregion\n\n return {\n registerHost,\n deregisterHost,\n addPortal: addUpdatePortal,\n updatePortal: addUpdatePortal,\n removePortal,\n }\n}\n\nexport interface PortalProviderProps {\n /**\n * Defines whether to add a default root host or not.\n *\n * @default true\n * @type boolean\n */\n shouldAddRootHost?: boolean\n\n /**\n * Defines the root portal host name.\n *\n * @default \"root\"\n * @type string\n */\n rootHostName?: string\n\n children: ReactNode | ReactNode[]\n}\n\nconst PortalProviderComponent = ({\n rootHostName = 'root',\n shouldAddRootHost = true,\n children,\n}: PortalProviderProps) => {\n const [state, dispatch] = useReducer(reducer, INITIAL_STATE)\n const transitionDispatch = useMemo(() => {\n const next = (value: any) => {\n startTransition(() => {\n dispatch(value)\n })\n }\n return next as typeof dispatch\n }, [dispatch])\n\n return (\n <PortalDispatchContext.Provider value={transitionDispatch}>\n <PortalStateContext.Provider value={state}>\n {children}\n {shouldAddRootHost && <PortalHost name={rootHostName} />}\n </PortalStateContext.Provider>\n </PortalDispatchContext.Provider>\n )\n}\n\nexport const PortalProvider = memo(PortalProviderComponent)\nPortalProvider.displayName = 'PortalProvider'\n\nexport interface PortalHostProps {\n /**\n * Host's key or name to be used as an identifier.\n * @type string\n */\n name: string\n\n forwardProps?: Record<string, any>\n}\n\nconst PortalHostComponent = (props: PortalHostProps) => {\n const { name, forwardProps } = props\n const isServer = !useDidFinishSSR()\n const state = usePortalState(name)\n const { registerHost, deregisterHost } = usePortal(props.name)\n\n //#region effects\n useEffect(() => {\n if (isServer) return\n registerHost()\n return () => {\n deregisterHost()\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isServer])\n //#endregion\n\n if (forwardProps) {\n return (\n <>\n {state.map((item) => {\n let next = item.node\n\n if (forwardProps) {\n return React.Children.map(next, (child) => {\n return React.isValidElement(child)\n ? React.cloneElement(child, { key: child.key, ...forwardProps })\n : child\n })\n }\n\n return next\n })}\n </>\n )\n }\n\n //#region render\n return <>{state.map((item) => item.node)}</>\n //#endregion\n}\n\nexport const PortalHost = memo(PortalHostComponent)\nPortalHost.displayName = 'PortalHost'\n\nexport interface PortalItemProps {\n /**\n * Portal's key or name to be used as an identifier.\n * @type string\n * @default generated unique key.\n */\n name?: string\n /**\n * Host's name to teleport the portal content to.\n * @type string\n * @default 'root'\n */\n hostName?: string\n /**\n * Override internal mounting functionality, this is useful\n * if you want to trigger any action before mounting the portal content.\n * @type (mount?: () => void) => void\n * @default undefined\n */\n handleOnMount?: (mount: () => void) => void\n /**\n * Override internal un-mounting functionality, this is useful\n * if you want to trigger any action before un-mounting the portal content.\n * @type (unmount?: () => void) => void\n * @default undefined\n */\n handleOnUnmount?: (unmount: () => void) => void\n /**\n * Override internal updating functionality, this is useful\n * if you want to trigger any action before updating the portal content.\n * @type (update?: () => void) => void\n * @default undefined\n */\n handleOnUpdate?: (update: () => void) => void\n /**\n * Portal's content.\n * @type ReactNode\n * @default undefined\n */\n children?: ReactNode | ReactNode[]\n}\n\nconst PortalComponent = (props: PortalItemProps) => {\n const {\n name: _providedName,\n hostName,\n handleOnMount: _providedHandleOnMount,\n handleOnUnmount: _providedHandleOnUnmount,\n handleOnUpdate: _providedHandleOnUpdate,\n children,\n } = props\n const { addPortal: addUpdatePortal, removePortal } = usePortal(hostName)\n const id = useId()\n const name = _providedName || id\n\n const handleOnMount = useEvent(() => {\n if (_providedHandleOnMount) {\n _providedHandleOnMount(() => addUpdatePortal(name, children))\n } else {\n addUpdatePortal(name, children)\n }\n })\n\n const handleOnUnmount = useEvent(() => {\n if (_providedHandleOnUnmount) {\n _providedHandleOnUnmount(() => removePortal(name))\n } else {\n removePortal(name)\n }\n })\n\n const handleOnUpdate = useEvent(() => {\n if (_providedHandleOnUpdate) {\n _providedHandleOnUpdate(() => addUpdatePortal(name, children))\n } else {\n addUpdatePortal(name, children)\n }\n })\n\n useIsomorphicLayoutEffect(() => {\n handleOnMount()\n return () => {\n handleOnUnmount()\n }\n }, [])\n\n useEffect(() => {\n handleOnUpdate()\n }, [children])\n\n return null\n}\n\nexport const PortalItem = memo(PortalComponent)\nPortalItem.displayName = 'Portal'\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["ACTIONS", "registerHost", "deregisterHost", "addUpdatePortal", "removePortal"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import "@tamagui/polyfill-dev";
|
|
2
|
+
import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/core";
|
|
3
|
+
import { YStack } from "@tamagui/stacks";
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
import { createPortal } from "react-dom";
|
|
6
|
+
const Portal = ({ host = globalThis.document?.body, ...props }) => {
|
|
7
|
+
const contents = <YStack contain="strict" fullscreen position={isWeb ? "fixed" : "absolute"} maxWidth={isWeb ? "100vw" : "100%"} maxHeight={isWeb ? "100vh" : "100%"} pointerEvents="none" {...props} />;
|
|
8
|
+
const [hostElement, setHostElement] = React.useState(null);
|
|
9
|
+
useIsomorphicLayoutEffect(() => {
|
|
10
|
+
setHostElement(host);
|
|
11
|
+
}, [host]);
|
|
12
|
+
if (hostElement) {
|
|
13
|
+
return createPortal(contents, hostElement);
|
|
14
|
+
}
|
|
15
|
+
return null;
|
|
16
|
+
};
|
|
17
|
+
export {
|
|
18
|
+
Portal
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=Portal.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Portal.tsx"],
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react-hooks/rules-of-hooks */\nimport '@tamagui/polyfill-dev'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '@tamagui/core'\nimport { YStack } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { PortalProps } from './PortalProps'\n\nexport const Portal = ({ host = globalThis.document?.body, ...props }: PortalProps) => {\n const contents = (\n <YStack\n contain=\"strict\"\n fullscreen\n // @ts-expect-error ok on web\n position={isWeb ? 'fixed' : 'absolute'}\n maxWidth={isWeb ? '100vw' : '100%'}\n maxHeight={isWeb ? '100vh' : '100%'}\n pointerEvents=\"none\"\n {...props}\n />\n )\n\n const [hostElement, setHostElement] = React.useState<any>(null)\n\n useIsomorphicLayoutEffect(() => {\n setHostElement(host)\n }, [host])\n\n if (hostElement) {\n return createPortal(contents, hostElement)\n }\n\n // ssr return null\n return null\n}\n"],
|
|
5
|
+
"mappings": "AACA,OAAO;AAEP,SAAS,OAAO,iCAAiC;AACjD,SAAS,cAAc;AACvB,YAAY,WAAW;AACvB,SAAS,oBAAoB;AAItB,MAAM,SAAS,CAAC,EAAE,OAAO,WAAW,UAAU,SAAS,MAAM,MAAmB;AACrF,QAAM,WACJ,CAAC,OACC,QAAQ,SACR,WAEA,UAAU,QAAQ,UAAU,YAC5B,UAAU,QAAQ,UAAU,QAC5B,WAAW,QAAQ,UAAU,QAC7B,cAAc,WACV,OACN;AAGF,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAc,IAAI;AAE9D,4BAA0B,MAAM;AAC9B,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,IAAI,CAAC;AAET,MAAI,aAAa;AACf,WAAO,aAAa,UAAU,WAAW;AAAA,EAC3C;AAGA,SAAO;AACT;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { YStack } from "@tamagui/stacks";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { Platform, RootTagContext } from "react-native";
|
|
4
|
+
import { createPortal } from "react-native/Libraries/Renderer/shims/ReactNative";
|
|
5
|
+
import { PortalItem } from "./GorhomPortal";
|
|
6
|
+
const Portal = (props) => {
|
|
7
|
+
const rootTag = React.useContext(RootTagContext);
|
|
8
|
+
const contents = <YStack pointerEvents="box-none" fullscreen position="absolute" maxWidth="100%" zIndex={1e5} {...props} />;
|
|
9
|
+
if (Platform.OS === "android") {
|
|
10
|
+
return <PortalItem hostName="root">{contents}</PortalItem>;
|
|
11
|
+
}
|
|
12
|
+
if (rootTag) {
|
|
13
|
+
return createPortal(contents, rootTag);
|
|
14
|
+
}
|
|
15
|
+
if (process.env.NODE_ENV === "development") {
|
|
16
|
+
console.warn(
|
|
17
|
+
`Missing rootTag, this is a bug - you may need a different React Native version, or to avoid using "modal" on native.`
|
|
18
|
+
);
|
|
19
|
+
}
|
|
20
|
+
return null;
|
|
21
|
+
};
|
|
22
|
+
export {
|
|
23
|
+
Portal
|
|
24
|
+
};
|
|
25
|
+
//# sourceMappingURL=Portal.native.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Portal.native.tsx"],
|
|
4
|
+
"sourcesContent": ["import { YStack } from '@tamagui/stacks'\nimport * as React from 'react'\n// @ts-ignore\nimport { Platform, RootTagContext } from 'react-native'\nimport { createPortal } from 'react-native/Libraries/Renderer/shims/ReactNative'\n\nimport { PortalItem } from './GorhomPortal'\nimport { PortalProps } from './PortalProps'\n\nexport const Portal = (props: PortalProps) => {\n const rootTag = React.useContext(RootTagContext)\n\n const contents = (\n <YStack\n pointerEvents=\"box-none\"\n fullscreen\n position=\"absolute\"\n maxWidth=\"100%\"\n zIndex={100000}\n {...props}\n />\n )\n\n if (Platform.OS === 'android') {\n return <PortalItem hostName=\"root\">{contents}</PortalItem>\n }\n\n if (rootTag) {\n return createPortal(contents, rootTag)\n }\n\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn(\n `Missing rootTag, this is a bug - you may need a different React Native version, or to avoid using \"modal\" on native.`\n )\n }\n\n return null\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,cAAc;AACvB,YAAY,WAAW;AAEvB,SAAS,UAAU,sBAAsB;AACzC,SAAS,oBAAoB;AAE7B,SAAS,kBAAkB;AAGpB,MAAM,SAAS,CAAC,UAAuB;AAC5C,QAAM,UAAU,MAAM,WAAW,cAAc;AAE/C,QAAM,WACJ,CAAC,OACC,cAAc,WACd,WACA,SAAS,WACT,SAAS,OACT,QAAQ,SACJ,OACN;AAGF,MAAI,SAAS,OAAO,WAAW;AAC7B,WAAO,CAAC,WAAW,SAAS,QAAQ,SAAS,EAArC;AAAA,EACV;AAEA,MAAI,SAAS;AACX,WAAO,aAAa,UAAU,OAAO;AAAA,EACvC;AAEA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAE1C,YAAQ;AAAA,MACN;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=PortalProps.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/portal",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.22",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"types": "./types/index.d.ts",
|
|
6
6
|
"main": "dist/cjs",
|
|
@@ -19,9 +19,9 @@
|
|
|
19
19
|
"clean:build": "tamagui-build clean:build"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@tamagui/core": "^1.0.
|
|
23
|
-
"@tamagui/stacks": "^1.0.
|
|
24
|
-
"@tamagui/use-event": "^1.0.
|
|
22
|
+
"@tamagui/core": "^1.0.22",
|
|
23
|
+
"@tamagui/stacks": "^1.0.22",
|
|
24
|
+
"@tamagui/use-event": "^1.0.22"
|
|
25
25
|
},
|
|
26
26
|
"peerDependencies": {
|
|
27
27
|
"react": "*",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"react-native": "*"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"@tamagui/build": "^1.0.
|
|
32
|
+
"@tamagui/build": "^1.0.22",
|
|
33
33
|
"react": "^18.2.0",
|
|
34
34
|
"react-dom": "^18.2.0",
|
|
35
35
|
"react-native": "*"
|