react-native-system-ui 0.0.7 → 1.0.1

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

@@ -37,6 +37,7 @@ const createPopupTokens = foundations => {
       closeIconPadding: spacing.ssm
     },
     typography: {
+      fontFamily: typography.fontFamily,
       titleSize: fontSize.md,
       titleWeight: typography.weight.medium,
       descriptionSize: fontSize.sm,

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

@@ -11,52 +11,34 @@ function _react() {
   };
   return data;
 }
-var _overlay = _interopRequireDefault(require("../overlay"));
 var _PortalHost = require("./PortalHost");
 var _PortalContext = require("./PortalContext");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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 PortalComponent = /*#__PURE__*/_react().default.forwardRef(({
+const PortalComponentImpl = ({
   children,
   isOpen,
-  visible,
-  useRNModal,
-  useRNModalOnAndroid,
-  isKeyboardDismissable,
-  animationPreset,
-  onRequestClose,
-  style
+  visible
 }, _ref) => {
   const manager = (0, _react().useContext)(_PortalContext.PortalContext) ?? _PortalHost.portalManager;
   const keyRef = (0, _react().useRef)(null);
-  const resolvedOpen = isOpen ?? visible ?? true;
-  const overlayNode = (0, _react().useMemo)(() => /*#__PURE__*/_react().default.createElement(_overlay.default, {
-    isOpen: resolvedOpen,
-    useRNModal: useRNModal,
-    useRNModalOnAndroid: useRNModalOnAndroid,
-    isKeyboardDismissable: isKeyboardDismissable,
-    animationPreset: animationPreset,
-    onRequestClose: onRequestClose,
-    style: style
-  }, children), [animationPreset, children, isKeyboardDismissable, onRequestClose, resolvedOpen, style, useRNModal, useRNModalOnAndroid]);
+  const content = isOpen ?? visible ?? true ? children : null;
   (0, _react().useLayoutEffect)(() => {
-    if (keyRef.current === null) {
-      keyRef.current = manager.mount(overlayNode);
-    } else {
-      manager.update(keyRef.current, overlayNode);
-    }
-  }, [manager, overlayNode]);
+    keyRef.current === null ? keyRef.current = manager.mount(content) : manager.update(keyRef.current, content);
+  }, [manager, content]);
   (0, _react().useLayoutEffect)(() => () => {
-    if (keyRef.current !== null) {
+    if (keyRef.current != null) {
       manager.unmount(keyRef.current);
       keyRef.current = null;
     }
   }, [manager]);
   return null;
-});
-const add = (children, key) => _PortalHost.portalManager.mount(children, key);
+};
+const PortalComponentRef = /*#__PURE__*/_react().default.forwardRef(PortalComponentImpl);
+PortalComponentRef.displayName = 'Portal';
+const PortalComponent = /*#__PURE__*/_react().default.memo(PortalComponentRef);
+const add = (content, key) => _PortalHost.portalManager.mount(content, key);
 const remove = key => _PortalHost.portalManager.unmount(key);
-const update = (key, children) => _PortalHost.portalManager.update(key, children);
+const update = (key, content) => _PortalHost.portalManager.update(key, content);
 const clear = () => _PortalHost.portalStore.clear();
 const Portal = exports.Portal = Object.assign(PortalComponent, {
   Host: _PortalHost.PortalHost,

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

@@ -19,318 +19,235 @@ function _reactNative() {
   return data;
 }
 var _utils = require("../../utils");
-var _overlay = require("../overlay");
 var _PortalContext = require("./PortalContext");
 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)) {
-    let max;
-    for (const child of node) {
-      const value = getMaxZIndex(child);
-      if (!(0, _utils.isNumber)(value)) continue;
-      max = (0, _utils.isNumber)(max) ? Math.max(max, value) : value;
-    }
-    return max;
-  }
-  if (! /*#__PURE__*/_react().default.isValidElement(node)) return undefined;
-  const element = node;
-  const style = element.props.style;
-  let max;
-  if (style && typeof style !== 'function') {
-    const flattened = typeof style === 'object' && !Array.isArray(style) && style !== null ? style : _reactNative().StyleSheet.flatten(style);
-    const zIndex = flattened?.zIndex;
-    if ((0, _utils.isNumber)(zIndex)) {
-      max = zIndex;
-    }
-  }
-  const childMax = getMaxZIndex(element.props.children);
-  if (!(0, _utils.isNumber)(childMax)) return max;
-  if (!(0, _utils.isNumber)(max)) return childMax;
-  return Math.max(max, childMax);
-};
-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);
-  }
+const AE = 'RNSU_PORTAL_ADD';
+const UE = 'RNSU_PORTAL_UPDATE';
+const RE = 'RNSU_PORTAL_REMOVE';
+const CE = 'RNSU_PORTAL_CLEAR';
+const TVE = _reactNative().DeviceEventEmitter || new (_reactNative().NativeEventEmitter)();
+const IW = _reactNative().Platform.OS === 'web';
+const ao = (m, o) => {
+  if (o.type === 'mount') m.mount(o.children, o.key);else if (o.type === 'update') m.update(o.key, o.children);else if (o.type === 'clear') m.clear();else m.unmount(o.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)];
+  const [e, setE] = (0, _react().useState)([]);
+  const ks = (0, _react().useRef)(0);
+  const us = (0, _react().useCallback)(en => {
+    setE(p => {
+      const i = p.findIndex(it => it.key === en.key);
+      return i === -1 ? [...p, en] : [...p.slice(0, i), en, ...p.slice(i + 1)];
     });
-    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 mt = (0, _react().useCallback)((c, k) => {
+    const rk = k ?? ++ks.current;
+    if ((0, _utils.isNumber)(k) && k >= ks.current) ks.current = k + 1;
+    us({
+      key: rk,
+      children: c
     });
+    return rk;
+  }, [us]);
+  const up = (0, _react().useCallback)((k, c) => {
+    us({
+      key: k,
+      children: c
+    });
+  }, [us]);
+  const um = (0, _react().useCallback)(k => {
+    setE(p => p.filter(it => it.key !== k));
   }, []);
-  const unmount = (0, _react().useCallback)(key => {
-    setEntries(prev => prev.filter(item => item.key !== key));
-  }, []);
-  const clear = (0, _react().useCallback)(() => {
-    setEntries([]);
+  const cl = (0, _react().useCallback)(() => {
+    setE([]);
   }, []);
   _react().default.useImperativeHandle(ref, () => ({
-    mount,
-    update,
-    unmount,
-    clear
-  }), [mount, update, unmount, clear]);
-  if (entries.length === 0) return null;
+    mount: mt,
+    update: up,
+    unmount: um,
+    clear: cl
+  }), [mt, up, um, cl]);
+  if (e.length === 0) return null;
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     pointerEvents: "box-none",
-    style: styles.portalLayer,
+    style: S.pl,
     collapsable: false
-  }, entries.map(entry => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    key: entry.key,
+  }, e.map(en => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    key: en.key,
     pointerEvents: "box-none",
     collapsable: false,
-    style: [styles.portalEntry, (0, _utils.isNumber)(entry.zIndex) && {
-      zIndex: entry.zIndex
-    }]
-  }, entry.children)));
+    style: S.pe
+  }, en.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 resolvedKey = key ?? nextGlobalKey++;
-    if ((0, _utils.isNumber)(key) && key >= nextGlobalKey) {
-      nextGlobalKey = key + 1;
-    }
-    TopViewEventEmitter.emit(ADD_EVENT, {
-      key: resolvedKey,
-      children
+let ah = 0;
+let nh = 1;
+let ngk = 10000;
+const gm = {
+  mount: (c, k) => {
+    if (typeof __DEV__ !== 'undefined' && __DEV__ && ah === 0) console.warn('[Portal] Please mount <PortalHost> or <ConfigProvider> at the root to enable imperative APIs.');
+    const rk = k ?? ngk++;
+    if ((0, _utils.isNumber)(k) && k >= ngk) ngk = k + 1;
+    TVE.emit(AE, {
+      key: rk,
+      children: c
     });
-    return resolvedKey;
+    return rk;
   },
-  update: (key, children) => {
-    TopViewEventEmitter.emit(UPDATE_EVENT, {
-      key,
-      children
+  update: (k, c) => {
+    TVE.emit(UE, {
+      key: k,
+      children: c
     });
   },
-  unmount: key => {
-    TopViewEventEmitter.emit(REMOVE_EVENT, {
-      key
+  unmount: k => {
+    TVE.emit(RE, {
+      key: k
     });
   }
 };
-const PortalHost = ({
+const PortalHostImpl = ({
   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);
-    }
+  const hir = (0, _react().useRef)(nh++),
+    mr = (0, _react().useRef)(null),
+    qr = (0, _react().useRef)([]),
+    nkr = (0, _react().useRef)(1);
+  const eor = (0, _react().useCallback)(o => {
+    const m = mr.current;
+    if (m) ao(m, o);else qr.current.push(o);
   }, []);
-  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({
+  const sm = (0, _react().useMemo)(() => ({
+    mount: (c, k) => {
+      const rk = k ?? nkr.current++;
+      if ((0, _utils.isNumber)(k) && k >= nkr.current) nkr.current = k + 1;
+      eor({
         type: 'mount',
-        key: resolvedKey,
-        children
+        key: rk,
+        children: c
       });
-      return resolvedKey;
+      return rk;
     },
-    update: (key, children) => {
-      enqueueOrRun({
+    update: (k, c) => {
+      eor({
         type: 'update',
-        key,
-        children
+        key: k,
+        children: c
       });
     },
-    unmount: key => {
-      enqueueOrRun({
+    unmount: k => {
+      eor({
         type: 'unmount',
-        key
+        key: k
       });
     }
-  }), [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。建议全局只挂载一个。');
+  }), [eor]);
+  const hmr = (0, _react().useCallback)(m => {
+    mr.current = m;
+    if (m) {
+      if (qr.current.length > 0) {
+        const pd = qr.current.splice(0, qr.current.length);
+        pd.forEach(o => ao(m, o));
       }
+      ;
+      if (ah === 0 || ah === hir.current) ah = hir.current;else if (typeof __DEV__ !== 'undefined' && __DEV__) console.warn('[PortalHost] Multiple PortalHost instances detected. Imperative APIs will only use the first mounted host.');
     }
   }, []);
   (0, _react().useEffect)(() => () => {
-    if (activeHostId === hostIdRef.current) {
-      activeHostId = 0;
-      queueRef.current = [];
+    if (ah === hir.current) {
+      ah = 0;
+      qr.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
+    const ha = ({
+      key: k,
+      children: c
     }) => {
-      if (activeHostId !== hostIdRef.current) return;
-      if (typeof __DEV__ !== 'undefined' && __DEV__) {
-        console.log('[PortalHost] add', key);
-      }
-      enqueueOrRun({
+      if (ah !== hir.current) return;
+      eor({
         type: 'mount',
-        key,
-        children
+        key: k,
+        children: c
       });
     };
-    const handleUpdate = ({
-      key,
-      children
+    const hu = ({
+      key: k,
+      children: c
     }) => {
-      if (activeHostId !== hostIdRef.current) return;
-      if (typeof __DEV__ !== 'undefined' && __DEV__) {
-        console.log('[PortalHost] update', key);
-      }
-      enqueueOrRun({
+      if (ah !== hir.current) return;
+      eor({
         type: 'update',
-        key,
-        children
+        key: k,
+        children: c
       });
     };
-    const handleRemove = ({
-      key
+    const hr = ({
+      key: k
     }) => {
-      if (activeHostId !== hostIdRef.current) return;
-      if (typeof __DEV__ !== 'undefined' && __DEV__) {
-        console.log('[PortalHost] remove', key);
-      }
-      enqueueOrRun({
+      if (ah !== hir.current) return;
+      eor({
         type: 'unmount',
-        key
+        key: k
       });
     };
-    const handleClear = () => {
-      if (activeHostId !== hostIdRef.current) return;
-      if (typeof __DEV__ !== 'undefined' && __DEV__) {
-        console.log('[PortalHost] clear');
-      }
-      queueRef.current = [];
-      enqueueOrRun({
+    const hc = () => {
+      if (ah !== hir.current) return;
+      qr.current = [];
+      eor({
         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);
+    const as = TVE.addListener(AE, ha);
+    const us = TVE.addListener(UE, hu);
+    const rs = TVE.addListener(RE, hr);
+    const cs = TVE.addListener(CE, hc);
     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);
+      as.remove();
+      us.remove();
+      rs.remove();
+      cs.remove();
     };
-  }, [enqueueOrRun]);
-  return /*#__PURE__*/_react().default.createElement(_overlay.OverlayProvider, null, /*#__PURE__*/_react().default.createElement(_PortalContext.PortalContext.Provider, {
-    value: scopedManager
+  }, [eor]);
+  return /*#__PURE__*/_react().default.createElement(_PortalContext.PortalContext.Provider, {
+    value: sm
   }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: styles.host,
+    style: S.h,
     collapsable: false
   }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: styles.root,
+    style: S.r,
     collapsable: false,
     pointerEvents: "box-none"
   }, children), /*#__PURE__*/_react().default.createElement(PortalManagerView, {
-    ref: handleManagerRef
-  }))));
+    ref: hmr
+  })));
 };
-exports.PortalHost = PortalHost;
-const styles = _reactNative().StyleSheet.create({
-  host: {
+const PortalHost = exports.PortalHost = /*#__PURE__*/_react().default.memo(PortalHostImpl);
+PortalHost.displayName = 'PortalHost';
+const S = _reactNative().StyleSheet.create({
+  h: {
     position: 'relative',
     flex: 1
   },
-  root: {
+  r: {
     flex: 1
   },
-  portalLayer: {
+  pl: IW ? {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  } : {
     ..._reactNative().StyleSheet.absoluteFillObject
   },
-  portalEntry: {
+  pe: {
     ..._reactNative().StyleSheet.absoluteFillObject
   }
 });
-const portalManager = exports.portalManager = globalManager;
+const portalManager = exports.portalManager = gm;
 const portalStore = exports.portalStore = {
   clear: () => {
-    TopViewEventEmitter.emit(CLEAR_EVENT);
+    TVE.emit(CE);
   },
-  hasHosts: () => activeHostId !== 0
+  hasHosts: () => ah !== 0
 };