Portal

1import { Fragment, useEffect, useSyncExternalStore } from "react";
2import { Platform } from "react-native";
3import { FullWindowOverlay } from "react-native-screens";
4 
5// Constants
6const DEFAULT_PORTAL_HOST = "TETRA_UI_DEFAULT_HOST_NAME";
7 
8// Types
9type PortalHostProps = {
10  name?: string;
11};
12 
13type PortalProps = {
14  name: string;
15  hostName?: string;
16  children: React.ReactNode;
17};
18 
19type PortalMap = Map<string, React.ReactNode>;
20 
21type PortalHostMap = Map<string, PortalMap>;
22 
23type PortalListener = () => void;
24 
25// Components
26export const PortalOverlay =
27  Platform.OS === "ios" ? FullWindowOverlay : Fragment;
28 
29export const PortalHost = ({ name = DEFAULT_PORTAL_HOST }: PortalHostProps) => {
30  const map = usePortalMap();
31  const portal = map.get(name) ?? new Map<string, React.ReactNode>();
32 
33  if (portal.size === 0) {
34    return null;
35  }
36 
37  return <>{Array.from(portal.values())}</>;
38};
39 
40export const Portal = ({
41  name,
42  hostName = DEFAULT_PORTAL_HOST,
43  children,
44}: PortalProps) => {
45  useEffect(() => {
46    updatePortal(hostName, name, children);
47  }, [hostName, name, children]);
48 
49  useEffect(() => {
50    return () => {
51      removePortal(hostName, name);
52    };
53  }, [hostName, name]);
54 
55  return null;
56};
57 
58// Hooks
59const usePortalMap = () => {
60  return useSyncExternalStore(
61    (onStoreChange) => {
62      listeners.add(onStoreChange);
63      return () => {
64        listeners.delete(onStoreChange);
65      };
66    },
67    () => portalMap
68  );
69};
70 
71// Utils
72let portalMap: PortalHostMap = new Map<string, PortalMap>().set(
73  DEFAULT_PORTAL_HOST,
74  new Map<string, React.ReactNode>()
75);
76 
77const listeners = new Set<PortalListener>();
78 
79const notifyListeners = () => {
80  for (const listener of listeners) {
81    listener();
82  }
83};
84 
85const updatePortal = (
86  hostName: string,
87  name: string,
88  content: React.ReactNode
89) => {
90  const next = new Map(portalMap);
91  const portal = next.get(hostName) ?? new Map<string, React.ReactNode>();
92  const updatedPortal = new Map(portal);
93  updatedPortal.set(name, content);
94  next.set(hostName, updatedPortal);
95  portalMap = next;
96  notifyListeners();
97};
98 
99const removePortal = (hostName: string, name: string) => {
100  const next = new Map(portalMap);
101  const portal = next.get(hostName);
102  if (portal) {
103    const updatedPortal = new Map(portal);
104    updatedPortal.delete(name);
105    if (updatedPortal.size === 0) {
106      next.delete(hostName);
107    } else {
108      next.set(hostName, updatedPortal);
109    }
110    portalMap = next;
111    notifyListeners();
112  }
113};