react-native-system-ui 0.0.4 → 0.0.6

package/dist/cjs/components/portal/PortalHost.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.portalStore = exports.portalManager = exports.ensureGlobalPortalHost = exports.PortalHost = void 0;
+exports.portalStore = exports.portalManager = exports.PortalHost = void 0;
 function _react() {
-  const data = _interopRequireDefault(require("react"));
+  const data = _interopRequireWildcard(require("react"));
   _react = function () {
     return data;
   };
@@ -19,38 +19,14 @@ function _reactNative() {
   return data;
 }
 var _utils = require("../../utils");
+var _overlay = require("../overlay");
 var _PortalContext = require("./PortalContext");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-class PortalLayer extends _react().default.PureComponent {
-  state = {
-    entries: []
-  };
-  setEntries = entries => {
-    this.setState(prev => prev.entries === entries ? null : {
-      entries
-    });
-  };
-  render() {
-    const {
-      fixed
-    } = this.props;
-    const {
-      entries
-    } = this.state;
-    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      pointerEvents: "box-none",
-      style: [styles.portalLayer, fixed && webFixedStyle],
-      collapsable: false
-    }, entries.map(entry => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      key: entry.key,
-      pointerEvents: "box-none",
-      collapsable: false,
-      style: [styles.portalEntry, (0, _utils.isNumber)(entry.zIndex) && {
-        zIndex: entry.zIndex
-      }]
-    }, entry.children)));
-  }
-}
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const ADD_EVENT = 'RNSU_PORTAL_ADD';
+const UPDATE_EVENT = 'RNSU_PORTAL_UPDATE';
+const REMOVE_EVENT = 'RNSU_PORTAL_REMOVE';
+const CLEAR_EVENT = 'RNSU_PORTAL_CLEAR';
+const TopViewEventEmitter = _reactNative().DeviceEventEmitter || new (_reactNative().NativeEventEmitter)();
 const getMaxZIndex = node => {
   if (!node) return undefined;
   if (Array.isArray(node)) {
@@ -78,156 +54,263 @@ const getMaxZIndex = node => {
   if (!(0, _utils.isNumber)(max)) return childMax;
   return Math.max(max, childMax);
 };
-const hostStack = [];
-const portalEntries = new Map();
-const emptyEntries = [];
-let nextPortalKey = 1;
-let snapshotDirty = true;
-let snapshotCache = emptyEntries;
-const markSnapshotDirty = () => {
-  snapshotDirty = true;
-};
-const getEntriesSnapshot = () => {
-  if (!snapshotDirty) return snapshotCache;
-  snapshotDirty = false;
-  snapshotCache = portalEntries.size === 0 ? emptyEntries : Array.from(portalEntries.values());
-  return snapshotCache;
-};
-const syncCurrentHost = () => {
-  const currentHost = hostStack[hostStack.length - 1];
-  if (currentHost) {
-    currentHost.setEntries(getEntriesSnapshot());
-  }
-};
-const setHostPresence = (host, present) => {
-  if (present) {
-    hostStack.push(host);
-    syncCurrentHost();
-    maybeTeardownAutoHost();
-    return;
-  }
-  const index = hostStack.lastIndexOf(host);
-  if (index >= 0) {
-    hostStack.splice(index, 1);
-  }
-  if (hostStack.length === 0) {
-    clearPortals();
-    return;
+const applyOperation = (manager, operation) => {
+  if (operation.type === 'mount') {
+    manager.mount(operation.children, operation.key);
+  } else if (operation.type === 'update') {
+    manager.update(operation.key, operation.children);
+  } else if (operation.type === 'clear') {
+    manager.clear();
+  } else {
+    manager.unmount(operation.key);
   }
-  syncCurrentHost();
-  maybeTeardownAutoHost();
 };
-const mountPortal = (children, key) => {
-  const resolvedKey = key ?? nextPortalKey++;
-  portalEntries.set(resolvedKey, {
-    key: resolvedKey,
-    children,
-    zIndex: getMaxZIndex(children)
-  });
-  markSnapshotDirty();
-  syncCurrentHost();
-  return resolvedKey;
-};
-const updatePortal = (key, children) => {
-  const prev = portalEntries.get(key);
-  if (prev) {
-    prev.children = children;
-    prev.zIndex = getMaxZIndex(children);
-  } else {
-    portalEntries.set(key, {
-      key,
+const PortalManagerView = /*#__PURE__*/_react().default.forwardRef((_, ref) => {
+  const [entries, setEntries] = (0, _react().useState)([]);
+  const keySeed = (0, _react().useRef)(0);
+  const mount = (0, _react().useCallback)((children, key) => {
+    const resolvedKey = key ?? ++keySeed.current;
+    if ((0, _utils.isNumber)(key) && key >= keySeed.current) {
+      keySeed.current = key + 1;
+    }
+    const entry = {
+      key: resolvedKey,
       children,
       zIndex: getMaxZIndex(children)
+    };
+    setEntries(prev => {
+      const index = prev.findIndex(item => item.key === resolvedKey);
+      if (index === -1) {
+        return [...prev, entry];
+      }
+      return [...prev.slice(0, index), entry, ...prev.slice(index + 1)];
     });
-  }
-  markSnapshotDirty();
-  syncCurrentHost();
-};
-const unmountPortal = key => {
-  if (portalEntries.delete(key)) {
-    markSnapshotDirty();
-    syncCurrentHost();
-    maybeTeardownAutoHost();
-  }
-};
-const scheduleTeardown = typeof queueMicrotask === 'function' ? queueMicrotask : task => {
-  Promise.resolve().then(task);
-};
-const teardownAutoHost = () => {
-  if (!autoHostRoot || teardownScheduled) return;
-  teardownScheduled = true;
-  scheduleTeardown(() => {
-    teardownScheduled = false;
-    if (!autoHostRoot) return;
-    if (hostStack.length > 1 || portalEntries.size === 0) {
-      const root = autoHostRoot;
-      const container = autoHostContainer;
-      autoHostRoot = null;
-      autoHostContainer = null;
-      root.unmount();
-      if (container?.parentNode) {
-        container.parentNode.removeChild(container);
+    return resolvedKey;
+  }, []);
+  const update = (0, _react().useCallback)((key, children) => {
+    setEntries(prev => {
+      const index = prev.findIndex(item => item.key === key);
+      const entry = {
+        key,
+        children,
+        zIndex: getMaxZIndex(children)
+      };
+      if (index === -1) {
+        return [...prev, entry];
       }
+      return [...prev.slice(0, index), entry, ...prev.slice(index + 1)];
+    });
+  }, []);
+  const unmount = (0, _react().useCallback)(key => {
+    setEntries(prev => prev.filter(item => item.key !== key));
+  }, []);
+  const clear = (0, _react().useCallback)(() => {
+    setEntries([]);
+  }, []);
+  _react().default.useImperativeHandle(ref, () => ({
+    mount,
+    update,
+    unmount,
+    clear
+  }), [mount, update, unmount, clear]);
+  if (entries.length === 0) return null;
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    pointerEvents: "box-none",
+    style: styles.portalLayer,
+    collapsable: false
+  }, entries.map(entry => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    key: entry.key,
+    pointerEvents: "box-none",
+    collapsable: false,
+    style: [styles.portalEntry, (0, _utils.isNumber)(entry.zIndex) && {
+      zIndex: entry.zIndex
+    }]
+  }, entry.children)));
+});
+let activeHostId = 0;
+let nextHostId = 1;
+let nextGlobalKey = 1;
+const globalManager = {
+  mount: (children, key) => {
+    if (typeof __DEV__ !== 'undefined' && __DEV__ && activeHostId === 0) {
+      console.warn('[Portal] 请在根节点挂载 <PortalHost> 或 <ConfigProvider> 以启用静态组件能力。');
     }
-  });
-};
-const maybeTeardownAutoHost = () => {
-  if (!autoHostRoot) return;
-  if (hostStack.length > 1 || portalEntries.size === 0) {
-    teardownAutoHost();
-  }
-};
-const clearPortals = () => {
-  if (portalEntries.size > 0) {
-    portalEntries.clear();
-    markSnapshotDirty();
-    syncCurrentHost();
+    const resolvedKey = key ?? nextGlobalKey++;
+    if ((0, _utils.isNumber)(key) && key >= nextGlobalKey) {
+      nextGlobalKey = key + 1;
+    }
+    TopViewEventEmitter.emit(ADD_EVENT, {
+      key: resolvedKey,
+      children
+    });
+    return resolvedKey;
+  },
+  update: (key, children) => {
+    TopViewEventEmitter.emit(UPDATE_EVENT, {
+      key,
+      children
+    });
+  },
+  unmount: key => {
+    TopViewEventEmitter.emit(REMOVE_EVENT, {
+      key
+    });
   }
-  maybeTeardownAutoHost();
-};
-const globalManager = {
-  mount: mountPortal,
-  update: updatePortal,
-  unmount: unmountPortal
 };
-class PortalHost extends _react().default.Component {
-  layer = null;
-  componentWillUnmount() {
-    if (this.layer) {
-      setHostPresence(this.layer, false);
-      this.layer = null;
+const PortalHost = ({
+  children
+}) => {
+  const hostIdRef = (0, _react().useRef)(nextHostId++);
+  const managerRef = (0, _react().useRef)(null);
+  const queueRef = (0, _react().useRef)([]);
+  const nextKeyRef = (0, _react().useRef)(1);
+  const enqueueOrRun = (0, _react().useCallback)(operation => {
+    const manager = managerRef.current;
+    if (manager) {
+      applyOperation(manager, operation);
+    } else {
+      queueRef.current.push(operation);
     }
-  }
-  setLayerRef = layer => {
-    if (this.layer === layer) return;
-    if (this.layer) {
-      setHostPresence(this.layer, false);
+  }, []);
+  const scopedManager = (0, _react().useMemo)(() => ({
+    mount: (children, key) => {
+      const resolvedKey = key ?? nextKeyRef.current++;
+      if ((0, _utils.isNumber)(key) && key >= nextKeyRef.current) {
+        nextKeyRef.current = key + 1;
+      }
+      enqueueOrRun({
+        type: 'mount',
+        key: resolvedKey,
+        children
+      });
+      return resolvedKey;
+    },
+    update: (key, children) => {
+      enqueueOrRun({
+        type: 'update',
+        key,
+        children
+      });
+    },
+    unmount: key => {
+      enqueueOrRun({
+        type: 'unmount',
+        key
+      });
     }
-    this.layer = layer;
-    if (layer) {
-      setHostPresence(layer, true);
+  }), [enqueueOrRun]);
+  const handleManagerRef = (0, _react().useCallback)(manager => {
+    managerRef.current = manager;
+    if (manager) {
+      if (queueRef.current.length > 0) {
+        const pending = queueRef.current.splice(0, queueRef.current.length);
+        pending.forEach(operation => applyOperation(manager, operation));
+      }
+      if (activeHostId === 0 || activeHostId === hostIdRef.current) {
+        activeHostId = hostIdRef.current;
+        if (typeof __DEV__ !== 'undefined' && __DEV__) {
+          console.log('[PortalHost] activeHost', activeHostId);
+        }
+      } else if (typeof __DEV__ !== 'undefined' && __DEV__) {
+        console.warn('[PortalHost] 检测到多个 Portal.Host，静态 API 仅会使用第一个挂载的 Host。建议全局只挂载一个。');
+      }
     }
-  };
-  render() {
-    const {
-      children,
-      fixed
-    } = this.props;
-    return /*#__PURE__*/_react().default.createElement(_PortalContext.PortalContext.Provider, {
-      value: globalManager
-    }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: styles.host,
-      collapsable: false
-    }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: styles.root,
-      collapsable: false,
-      pointerEvents: "box-none"
-    }, children), /*#__PURE__*/_react().default.createElement(PortalLayer, {
-      ref: this.setLayerRef,
-      fixed: fixed
-    })));
-  }
-}
+  }, []);
+  (0, _react().useEffect)(() => () => {
+    if (activeHostId === hostIdRef.current) {
+      activeHostId = 0;
+      queueRef.current = [];
+      portalStore.clear();
+    }
+  }, []);
+  (0, _react().useEffect)(() => {
+    if (typeof __DEV__ !== 'undefined' && __DEV__) {
+      console.log('[PortalHost] mounted', {
+        hostId: hostIdRef.current,
+        activeHostId
+      });
+    }
+  }, []);
+  (0, _react().useEffect)(() => {
+    const handleAdd = ({
+      key,
+      children
+    }) => {
+      if (activeHostId !== hostIdRef.current) return;
+      if (typeof __DEV__ !== 'undefined' && __DEV__) {
+        console.log('[PortalHost] add', key);
+      }
+      enqueueOrRun({
+        type: 'mount',
+        key,
+        children
+      });
+    };
+    const handleUpdate = ({
+      key,
+      children
+    }) => {
+      if (activeHostId !== hostIdRef.current) return;
+      if (typeof __DEV__ !== 'undefined' && __DEV__) {
+        console.log('[PortalHost] update', key);
+      }
+      enqueueOrRun({
+        type: 'update',
+        key,
+        children
+      });
+    };
+    const handleRemove = ({
+      key
+    }) => {
+      if (activeHostId !== hostIdRef.current) return;
+      if (typeof __DEV__ !== 'undefined' && __DEV__) {
+        console.log('[PortalHost] remove', key);
+      }
+      enqueueOrRun({
+        type: 'unmount',
+        key
+      });
+    };
+    const handleClear = () => {
+      if (activeHostId !== hostIdRef.current) return;
+      if (typeof __DEV__ !== 'undefined' && __DEV__) {
+        console.log('[PortalHost] clear');
+      }
+      queueRef.current = [];
+      enqueueOrRun({
+        type: 'clear'
+      });
+    };
+    const addSub = TopViewEventEmitter.addListener(ADD_EVENT, handleAdd);
+    const updateSub = TopViewEventEmitter.addListener(UPDATE_EVENT, handleUpdate);
+    const removeSub = TopViewEventEmitter.addListener(REMOVE_EVENT, handleRemove);
+    const clearSub = TopViewEventEmitter.addListener(CLEAR_EVENT, handleClear);
+    return () => {
+      addSub.remove?.();
+      updateSub.remove?.();
+      removeSub.remove?.();
+      clearSub.remove?.();
+      const emitter = TopViewEventEmitter;
+      emitter.removeListener?.(ADD_EVENT, handleAdd);
+      emitter.removeListener?.(UPDATE_EVENT, handleUpdate);
+      emitter.removeListener?.(REMOVE_EVENT, handleRemove);
+      emitter.removeListener?.(CLEAR_EVENT, handleClear);
+    };
+  }, [enqueueOrRun]);
+  return /*#__PURE__*/_react().default.createElement(_overlay.OverlayProvider, null, /*#__PURE__*/_react().default.createElement(_PortalContext.PortalContext.Provider, {
+    value: scopedManager
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: styles.host,
+    collapsable: false
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: styles.root,
+    collapsable: false,
+    pointerEvents: "box-none"
+  }, children), /*#__PURE__*/_react().default.createElement(PortalManagerView, {
+    ref: handleManagerRef
+  }))));
+};
 exports.PortalHost = PortalHost;
 const styles = _reactNative().StyleSheet.create({
   host: {
@@ -244,48 +327,10 @@ const styles = _reactNative().StyleSheet.create({
     ..._reactNative().StyleSheet.absoluteFillObject
   }
 });
-const webFixedStyle = _reactNative().Platform.OS === 'web' ? {
-  position: 'fixed'
-} : undefined;
-let autoHostContainer = null;
-let autoHostRoot = null;
-let hostPromise = null;
-let teardownScheduled = false;
-const ensureGlobalPortalHost = () => {
-  if (hostStack.length > 0) {
-    return Promise.resolve();
-  }
-  if (typeof document === 'undefined') {
-    return Promise.resolve();
-  }
-  if (autoHostRoot) return Promise.resolve();
-  if (hostPromise) return hostPromise;
-  hostPromise = Promise.resolve().then(async () => {
-    if (hostStack.length > 0 || autoHostRoot) return;
-    const doc = document;
-    const {
-      createRoot
-    } = await import('react-dom/client');
-    if (hostStack.length > 0 || autoHostRoot) return;
-    autoHostContainer = doc.createElement('div');
-    autoHostContainer.setAttribute('data-rnsu-portal-host', 'true');
-    doc.body.appendChild(autoHostContainer);
-    autoHostRoot = createRoot(autoHostContainer);
-    autoHostRoot.render(/*#__PURE__*/_react().default.createElement(PortalHost, {
-      fixed: true
-    }));
-    maybeTeardownAutoHost();
-  }).catch(() => {
-    teardownAutoHost();
-  }).finally(() => {
-    hostPromise = null;
-  });
-  return hostPromise;
-};
-exports.ensureGlobalPortalHost = ensureGlobalPortalHost;
 const portalManager = exports.portalManager = globalManager;
 const portalStore = exports.portalStore = {
-  clear: clearPortals,
-  getSnapshot: () => getEntriesSnapshot(),
-  hasHosts: () => hostStack.length > 0
+  clear: () => {
+    TopViewEventEmitter.emit(CLEAR_EVENT);
+  },
+  hasHosts: () => activeHostId !== 0
 };

package/dist/cjs/components/portal/tokens.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePortalTokens = void 0;
+var _designSystem = require("../../design-system");
+const createPortalTokens = _foundations => {
+  return {};
+};
+const usePortalTokens = exports.usePortalTokens = (0, _designSystem.createComponentTokensHook)('portal', createPortalTokens);