react-native-system-ui 0.0.6 → 1.0.0

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

@@ -1,37 +1,18 @@
-import React, { useContext, useLayoutEffect, useMemo, useRef } from 'react';
-import Overlay from '../overlay';
+import React, { useContext, useLayoutEffect, useRef } from 'react';
 import { PortalHost, portalManager as globalManager, portalStore } from './PortalHost';
 import { PortalContext } from './PortalContext';
-const PortalComponent = /*#__PURE__*/React.forwardRef(({
+const PortalComponentImpl = ({
   children,
   isOpen,
-  visible,
-  useRNModal,
-  useRNModalOnAndroid,
-  isKeyboardDismissable,
-  animationPreset,
-  onRequestClose,
-  style
+  visible
 }, _ref) => {
   const manager = useContext(PortalContext) ?? globalManager;
   const keyRef = useRef(null);
-  const resolvedOpen = isOpen ?? visible ?? true;
-  const overlayNode = useMemo(() => /*#__PURE__*/React.createElement(Overlay, {
-    isOpen: resolvedOpen,
-    useRNModal: useRNModal,
-    useRNModalOnAndroid: useRNModalOnAndroid,
-    isKeyboardDismissable: isKeyboardDismissable,
-    animationPreset: animationPreset,
-    onRequestClose: onRequestClose,
-    style: style
-  }, children), [animationPreset, children, isKeyboardDismissable, onRequestClose, resolvedOpen, style, useRNModal, useRNModalOnAndroid]);
+  const shouldRender = isOpen ?? visible ?? true;
+  const content = shouldRender ? children : null;
   useLayoutEffect(() => {
-    if (keyRef.current === null) {
-      keyRef.current = manager.mount(overlayNode);
-    } else {
-      manager.update(keyRef.current, overlayNode);
-    }
-  }, [manager, overlayNode]);
+    if (keyRef.current === null) keyRef.current = manager.mount(content);else manager.update(keyRef.current, content);
+  }, [manager, content]);
   useLayoutEffect(() => () => {
     if (keyRef.current !== null) {
       manager.unmount(keyRef.current);
@@ -39,10 +20,13 @@ const PortalComponent = /*#__PURE__*/React.forwardRef(({
     }
   }, [manager]);
   return null;
-});
-const add = (children, key) => globalManager.mount(children, key);
+};
+const PortalComponentRef = /*#__PURE__*/React.forwardRef(PortalComponentImpl);
+PortalComponentRef.displayName = 'Portal';
+const PortalComponent = /*#__PURE__*/React.memo(PortalComponentRef);
+const add = (content, key) => globalManager.mount(content, key);
 const remove = key => globalManager.unmount(key);
-const update = (key, children) => globalManager.update(key, children);
+const update = (key, content) => globalManager.update(key, content);
 const clear = () => portalStore.clear();
 export const Portal = Object.assign(PortalComponent, {
   Host: PortalHost,

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

@@ -1,316 +1,234 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { DeviceEventEmitter, NativeEventEmitter, StyleSheet, View } from 'react-native';
+import { DeviceEventEmitter, NativeEventEmitter, Platform, StyleSheet, View } from 'react-native';
 import { isNumber } from '../../utils';
-import { OverlayProvider } from '../overlay';
 import { PortalContext } from './PortalContext';
-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 = DeviceEventEmitter || new NativeEventEmitter();
-const getMaxZIndex = node => {
-  if (!node) return undefined;
-  if (Array.isArray(node)) {
-    let max;
-    for (const child of node) {
-      const value = getMaxZIndex(child);
-      if (!isNumber(value)) continue;
-      max = isNumber(max) ? Math.max(max, value) : value;
-    }
-    return max;
-  }
-  if (! /*#__PURE__*/React.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 : StyleSheet.flatten(style);
-    const zIndex = flattened?.zIndex;
-    if (isNumber(zIndex)) {
-      max = zIndex;
-    }
-  }
-  const childMax = getMaxZIndex(element.props.children);
-  if (!isNumber(childMax)) return max;
-  if (!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 = DeviceEventEmitter || new NativeEventEmitter();
+const IW = 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.forwardRef((_, ref) => {
-  const [entries, setEntries] = useState([]);
-  const keySeed = useRef(0);
-  const mount = useCallback((children, key) => {
-    const resolvedKey = key ?? ++keySeed.current;
-    if (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] = useState([]);
+  const ks = useRef(0);
+  const us = 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 = 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 = useCallback((c, k) => {
+    const rk = k ?? ++ks.current;
+    if (isNumber(k) && k >= ks.current) ks.current = k + 1;
+    us({
+      key: rk,
+      children: c
     });
+    return rk;
+  }, [us]);
+  const up = useCallback((k, c) => {
+    us({
+      key: k,
+      children: c
+    });
+  }, [us]);
+  const um = useCallback(k => {
+    setE(p => p.filter(it => it.key !== k));
   }, []);
-  const unmount = useCallback(key => {
-    setEntries(prev => prev.filter(item => item.key !== key));
-  }, []);
-  const clear = useCallback(() => {
-    setEntries([]);
+  const cl = useCallback(() => {
+    setE([]);
   }, []);
   React.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.createElement(View, {
     pointerEvents: "box-none",
-    style: styles.portalLayer,
+    style: S.pl,
     collapsable: false
-  }, entries.map(entry => /*#__PURE__*/React.createElement(View, {
-    key: entry.key,
+  }, e.map(en => /*#__PURE__*/React.createElement(View, {
+    key: en.key,
     pointerEvents: "box-none",
     collapsable: false,
-    style: [styles.portalEntry, 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 (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 (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
     });
   }
 };
-export const PortalHost = ({
+const PortalHostImpl = ({
   children
 }) => {
-  const hostIdRef = useRef(nextHostId++);
-  const managerRef = useRef(null);
-  const queueRef = useRef([]);
-  const nextKeyRef = useRef(1);
-  const enqueueOrRun = useCallback(operation => {
-    const manager = managerRef.current;
-    if (manager) {
-      applyOperation(manager, operation);
-    } else {
-      queueRef.current.push(operation);
-    }
+  const hir = useRef(nh++),
+    mr = useRef(null),
+    qr = useRef([]),
+    nkr = useRef(1);
+  const eor = useCallback(o => {
+    const m = mr.current;
+    if (m) ao(m, o);else qr.current.push(o);
   }, []);
-  const scopedManager = useMemo(() => ({
-    mount: (children, key) => {
-      const resolvedKey = key ?? nextKeyRef.current++;
-      if (isNumber(key) && key >= nextKeyRef.current) {
-        nextKeyRef.current = key + 1;
-      }
-      enqueueOrRun({
+  const sm = useMemo(() => ({
+    mount: (c, k) => {
+      const rk = k ?? nkr.current++;
+      if (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 = 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 = 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.');
     }
   }, []);
   useEffect(() => () => {
-    if (activeHostId === hostIdRef.current) {
-      activeHostId = 0;
-      queueRef.current = [];
+    if (ah === hir.current) {
+      ah = 0;
+      qr.current = [];
       portalStore.clear();
     }
   }, []);
   useEffect(() => {
-    if (typeof __DEV__ !== 'undefined' && __DEV__) {
-      console.log('[PortalHost] mounted', {
-        hostId: hostIdRef.current,
-        activeHostId
-      });
-    }
-  }, []);
-  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.createElement(OverlayProvider, null, /*#__PURE__*/React.createElement(PortalContext.Provider, {
-    value: scopedManager
+  }, [eor]);
+  return /*#__PURE__*/React.createElement(PortalContext.Provider, {
+    value: sm
   }, /*#__PURE__*/React.createElement(View, {
-    style: styles.host,
+    style: S.h,
     collapsable: false
   }, /*#__PURE__*/React.createElement(View, {
-    style: styles.root,
+    style: S.r,
     collapsable: false,
     pointerEvents: "box-none"
   }, children), /*#__PURE__*/React.createElement(PortalManagerView, {
-    ref: handleManagerRef
-  }))));
+    ref: hmr
+  })));
 };
-const styles = StyleSheet.create({
-  host: {
+export const PortalHost = /*#__PURE__*/React.memo(PortalHostImpl);
+PortalHost.displayName = 'PortalHost';
+const S = StyleSheet.create({
+  h: {
     position: 'relative',
     flex: 1
   },
-  root: {
+  r: {
     flex: 1
   },
-  portalLayer: {
+  pl: IW ? {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  } : {
     ...StyleSheet.absoluteFillObject
   },
-  portalEntry: {
+  pe: {
     ...StyleSheet.absoluteFillObject
   }
 });
-export const portalManager = globalManager;
+export const portalManager = gm;
 export const portalStore = {
   clear: () => {
-    TopViewEventEmitter.emit(CLEAR_EVENT);
+    TVE.emit(CE);
   },
-  hasHosts: () => activeHostId !== 0
+  hasHosts: () => ah !== 0
 };