react-native-system-ui 0.0.1 → 0.0.3

package/dist/cjs/components/number-keyboard/NumberKeyboard.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 function _react() {
-  const data = _interopRequireDefault(require("react"));
+  const data = _interopRequireWildcard(require("react"));
   _react = function () {
     return data;
   };
@@ -20,16 +20,18 @@ function _reactNative() {
 }
 var _hooks = require("../../hooks");
 var _platform = require("../../platform");
-var _number = require("../../utils/number");
 var _createPlatformShadow = require("../../utils/createPlatformShadow");
+var _number = require("../../utils/number");
 var _loading = _interopRequireDefault(require("../loading"));
 var _Portal = _interopRequireDefault(require("../portal/Portal"));
-var _validate = require("../../utils/validate");
+var _safeAreaView = require("../safe-area-view");
 var _tokens = require("./tokens");
 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); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const keyboardRegistry = new Set();
-const BASE_KEYS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
+const NUMBER_KEYS = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
+const ZERO_KEY = '0';
 const shuffle = list => {
   const next = [...list];
   for (let i = next.length - 1; i > 0; i -= 1) {
@@ -38,7 +40,7 @@ const shuffle = list => {
   }
   return next;
 };
-const NumberKeyboard = props => {
+const NumberKeyboard = /*#__PURE__*/_react().default.memo(props => {
   const {
     visible,
     title,
@@ -85,20 +87,25 @@ const NumberKeyboard = props => {
     trigger: 'onChange'
   });
   const value = mergedValue ?? '';
-  const maxlength = _react().default.useMemo(() => {
+  const maxlength = (0, _react().useMemo)(() => {
     const parsed = (0, _number.parseNumberLike)(maxlengthProp, undefined);
     if (parsed === undefined || !Number.isFinite(parsed) || parsed < 0) return undefined;
     return Math.floor(parsed);
   }, [maxlengthProp]);
-  const resolvedCloseText = theme === 'custom' ? closeButtonText ?? '完成' : closeButtonText;
-  const closeSelf = _react().default.useCallback(() => {
+  const valueRef = (0, _react().useRef)(value);
+  const maxlengthRef = (0, _react().useRef)(maxlength);
+  valueRef.current = value;
+  maxlengthRef.current = maxlength;
+  const isCustomTheme = theme === 'custom';
+  const resolvedCloseText = isCustomTheme ? closeButtonText ?? '完成' : closeButtonText;
+  const closeSelf = (0, _react().useCallback)(() => {
     onClose?.();
     if (blurOnClose) {
       onBlur?.();
     }
   }, [blurOnClose, onBlur, onClose]);
-  const prevVisible = _react().default.useRef(visible);
-  _react().default.useEffect(() => {
+  const prevVisible = (0, _react().useRef)(visible);
+  (0, _react().useEffect)(() => {
     if (visible && !prevVisible.current) {
       onShow?.();
     }
@@ -107,12 +114,9 @@ const NumberKeyboard = props => {
     }
     prevVisible.current = visible;
   }, [visible, onShow, onHide]);
-
-  // 仅允许一个键盘可见：当本实例显示时，通知其他实例关闭
-  _react().default.useEffect(() => {
+  (0, _react().useEffect)(() => {
     if (visible) {
       keyboardRegistry.add(closeSelf);
-      // 关闭其他已注册的键盘
       keyboardRegistry.forEach(fn => {
         if (fn !== closeSelf) {
           fn();
@@ -125,18 +129,18 @@ const NumberKeyboard = props => {
       keyboardRegistry.delete(closeSelf);
     };
   }, [visible, closeSelf]);
-  const keys = _react().default.useMemo(() => {
-    const shouldShuffle = Boolean(randomKeyOrder) && visible;
-    const numbers = shouldShuffle ? shuffle(BASE_KEYS.slice(0, 9)) : BASE_KEYS.slice(0, 9);
+  const keys = (0, _react().useMemo)(() => {
+    const shouldShuffle = randomKeyOrder && visible;
+    const numbers = shouldShuffle ? shuffle(NUMBER_KEYS) : NUMBER_KEYS;
     const main = numbers.map(text => ({
       text,
       type: ''
     }));
-    if (theme === 'custom') {
+    if (isCustomTheme) {
       const extras = Array.isArray(extraKey) ? extraKey : extraKey ? [extraKey] : [];
       if (extras.length === 1) {
         main.push({
-          text: '0',
+          text: ZERO_KEY,
           type: '',
           wider: true
         }, {
@@ -148,7 +152,7 @@ const NumberKeyboard = props => {
           text: extras[0],
           type: 'extra'
         }, {
-          text: '0',
+          text: ZERO_KEY,
           type: ''
         }, {
           text: extras[1],
@@ -156,7 +160,7 @@ const NumberKeyboard = props => {
         });
       } else {
         main.push({
-          text: '0',
+          text: ZERO_KEY,
           type: ''
         });
       }
@@ -168,7 +172,7 @@ const NumberKeyboard = props => {
       type: 'extra'
     });
     main.push({
-      text: '0',
+      text: ZERO_KEY,
       type: ''
     });
     main.push({
@@ -176,79 +180,67 @@ const NumberKeyboard = props => {
       text: showDeleteKey ? undefined : ''
     });
     return main;
-  }, [extraKey, randomKeyOrder, showDeleteKey, theme, visible]);
-  const handleInput = (text, type) => {
+  }, [extraKey, isCustomTheme, randomKeyOrder, showDeleteKey, visible]);
+  const handleInput = (0, _react().useCallback)((text, type) => {
     if (type === 'delete') {
-      if (!value) return;
+      const currentValue = valueRef.current;
+      if (!currentValue) return;
       onDelete?.();
-      const next = value.slice(0, -1);
-      setMergedValue(next);
+      setMergedValue(currentValue.slice(0, -1));
       return;
     }
-    if (type === 'close') {
-      closeSelf();
-      return;
-    }
-    if (type === 'extra' && !text) {
+    if (type === 'close' || type === 'extra' && !text) {
       closeSelf();
       return;
     }
     if (!text) return;
-    if (maxlength !== undefined && value.length >= maxlength) {
-      return;
-    }
+    const currentValue = valueRef.current;
+    const currentMaxlength = maxlengthRef.current;
+    if (currentMaxlength !== undefined && currentValue.length >= currentMaxlength) return;
     onInput?.(text);
-    const next = `${value}${text}`;
-    setMergedValue(next);
-  };
-  const wrapperShadow = (0, _createPlatformShadow.createPlatformShadow)({
+    setMergedValue(`${currentValue}${text}`);
+  }, [closeSelf, onDelete, onInput, setMergedValue]);
+  const wrapperShadow = (0, _react().useMemo)(() => (0, _createPlatformShadow.createPlatformShadow)({
     color: shadow.color,
     opacity: shadow.opacity,
     radius: shadow.radius,
     offsetY: shadow.offsetY,
     elevation: shadow.elevation
-  });
-  const getKeyContent = key => {
-    if (key.type === 'delete') {
-      if (deleteRender) return deleteRender();
-      return deleteButtonText ?? '⌫';
-    }
-    if (key.type === 'extra') {
-      const extraText = key.text ?? '';
-      if (extraKeyRender) return extraKeyRender(extraText);
-      return extraText || '⌨︎';
-    }
-    if (key.type === 'close') {
-      return resolvedCloseText ?? '完成';
-    }
-    const keyText = key.text ?? '';
-    if (numberKeyRender) {
-      return numberKeyRender(keyText);
-    }
-    return keyText;
-  };
-  const renderKey = (key, index, options) => {
-    const isClose = options?.isClose;
+  }), [shadow.color, shadow.opacity, shadow.radius, shadow.offsetY, shadow.elevation]);
+  const keyGap = spacing.keyGap;
+  const renderKey = (0, _react().useCallback)((key, index, isClose = false, fullWidth = false, customHeight) => {
     const isPlaceholder = key.type === '' && !key.text;
     const disabled = isPlaceholder || isClose && closeButtonLoading;
     const onPress = disabled ? undefined : () => handleInput(key.text, key.type);
     const backgroundColor = isClose ? colors.closeBackground : colors.keyBackground;
-    const activeBackground = colors.keyActiveBackground;
+    const activeBackground = isClose ? colors.closeActiveBackground : colors.keyActiveBackground;
     const inactiveTextColor = isClose ? colors.closeText : colors.keyText;
     const pressedTextColor = isClose ? colors.closeText : colors.keyTextActive;
-    const contentNode = getKeyContent(key);
+    const keyHeight = customHeight ?? (isClose ? sizing.closeHeight : sizing.keyHeight);
+    const actionFontSize = Math.round(sizing.fontSize * 0.64);
+    const textFontSize = key.type === 'close' || key.type === 'extra' || key.type === 'delete' ? actionFontSize : sizing.fontSize;
+    const keyText = key.text ?? '';
+    const contentNode = key.type === 'delete' ? deleteRender?.() ?? deleteButtonText ?? '⌫' : key.type === 'extra' ? extraKeyRender ? extraKeyRender(keyText) : keyText || '⌨︎' : key.type === 'close' ? resolvedCloseText ?? '完成' : numberKeyRender ? numberKeyRender(keyText) : keyText;
     return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
       key: `${key.type}-${index}-${key.text ?? index}`,
       onPress: onPress,
       disabled: disabled,
-      style: {
-        flexBasis: key.wider ? '64%' : '30%',
-        flexGrow: key.wider ? 2 : 1,
+      style: [{
         opacity: isPlaceholder ? 1 : disabled ? 0.6 : 1
-      },
+      }, fullWidth ? {
+        width: '100%',
+        flexBasis: 'auto',
+        flexGrow: 0,
+        alignSelf: 'stretch'
+      } : {
+        flexBasis: 0,
+        flexGrow: key.wider ? 2 : 1,
+        flexShrink: 1,
+        minWidth: 0
+      }],
       accessible: !isPlaceholder,
       accessibilityRole: isPlaceholder ? undefined : 'button',
-      accessibilityLabel: isPlaceholder ? undefined : key.type === 'delete' ? 'delete' : key.type === 'close' ? resolvedCloseText ?? 'close' : key.type === 'extra' ? key.text ?? 'collapse' : key.text,
+      accessibilityLabel: isPlaceholder ? undefined : key.type === 'delete' ? 'delete' : key.type === 'close' ? resolvedCloseText ?? 'close' : key.type === 'extra' ? keyText || 'collapse' : keyText,
       accessibilityState: isPlaceholder ? undefined : {
         disabled: !!disabled
       },
@@ -262,27 +254,30 @@ const NumberKeyboard = props => {
       const textColor = isPressed ? pressedTextColor : inactiveTextColor;
       return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
         style: [styles.key, {
-          height: isClose ? sizing.closeHeight : sizing.keyHeight,
+          height: keyHeight,
           backgroundColor: keyBackground,
           borderRadius: radii.key
         }]
       }, isClose && closeButtonLoading ? /*#__PURE__*/_react().default.createElement(_loading.default, {
         size: 18,
         color: textColor
-      }) : (0, _validate.isText)(contentNode) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+      }) : typeof contentNode === 'string' || typeof contentNode === 'number' ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
         style: [styles.keyText, {
           color: textColor,
-          fontSize: sizing.fontSize
+          fontSize: textFontSize
         }]
       }, contentNode) : contentNode == null || contentNode === false ? null : contentNode);
     });
-  };
-  const animated = _react().default.useRef(new (_reactNative().Animated.Value)(visible ? 1 : 0)).current;
-  const animationRef = _react().default.useRef(null);
-  const [contentHeight, setContentHeight] = _react().default.useState(0);
-  const [shouldRender, setShouldRender] = _react().default.useState(visible);
+  }, [closeButtonLoading, colors.closeActiveBackground, colors.closeBackground, colors.closeText, colors.keyActiveBackground, colors.keyBackground, colors.keyText, colors.keyTextActive, deleteButtonText, deleteRender, extraKeyRender, handleInput, numberKeyRender, radii.key, sizing.closeHeight, sizing.fontSize, sizing.keyHeight, resolvedCloseText]);
+  const animated = (0, _react().useRef)(new (_reactNative().Animated.Value)(visible ? 1 : 0)).current;
+  const animationRef = (0, _react().useRef)(null);
+  const animationSeqRef = (0, _react().useRef)(0);
+  const [contentHeight, setContentHeight] = (0, _react().useState)(0);
+  const [shouldRender, setShouldRender] = (0, _react().useState)(visible);
   const effectiveDuration = transition === false ? 0 : transitionDuration;
-  _react().default.useEffect(() => {
+  (0, _react().useEffect)(() => {
+    animationSeqRef.current += 1;
+    const currentSeq = animationSeqRef.current;
     if (visible) {
       setShouldRender(true);
     }
@@ -297,7 +292,7 @@ const NumberKeyboard = props => {
     animation.start(({
       finished
     }) => {
-      if (finished && !visible) {
+      if (finished && !visible && animationSeqRef.current === currentSeq) {
         setShouldRender(false);
       }
     });
@@ -306,22 +301,130 @@ const NumberKeyboard = props => {
       animationRef.current = null;
     };
   }, [animated, visible, effectiveDuration]);
-  const translateY = animated.interpolate({
+  const translateY = (0, _react().useMemo)(() => animated.interpolate({
     inputRange: [0, 1],
     outputRange: [contentHeight || 320, 0]
-  });
-  const handleLayout = e => {
+  }), [animated, contentHeight]);
+  const handleLayout = (0, _react().useCallback)(e => {
     const {
       height
     } = e.nativeEvent.layout;
-    if (Math.abs(height - contentHeight) > 0.5) {
-      setContentHeight(height);
+    setContentHeight(prev => Math.abs(height - prev) > 0.5 ? height : prev);
+  }, []);
+  const hasHeader = !isCustomTheme && (title || closeButtonText);
+  const doubleKeyHeight = sizing.keyHeight * 2 + keyGap;
+  const memo = (0, _react().useMemo)(() => {
+    const headerPaddingStyle = {
+      paddingHorizontal: spacing.titlePadding
+    };
+    const defaultContainerStyle = [styles.defaultRow, {
+      flexDirection: 'column',
+      flexWrap: 'nowrap',
+      paddingHorizontal: spacing.paddingHorizontal,
+      paddingTop: keyGap,
+      paddingBottom: keyGap,
+      gap: keyGap
+    }];
+    const defaultLineStyle = {
+      flexDirection: 'row',
+      gap: keyGap
+    };
+    const customRowStyle = [styles.customRow, {
+      paddingHorizontal: spacing.paddingHorizontal,
+      paddingTop: hasHeader ? 0 : keyGap,
+      paddingBottom: keyGap,
+      width: '100%'
+    }];
+    const customMainStyle = [styles.customMain, {
+      flexDirection: 'column',
+      flexWrap: 'nowrap',
+      gap: keyGap
+    }];
+    const customSidebarStyle = [styles.customSidebar, {
+      gap: keyGap,
+      marginLeft: keyGap
+    }];
+    const entries = keys.map((key, index) => ({
+      key,
+      index
+    }));
+    const defaultLines = [];
+    for (let i = 0; i < entries.length; i += 3) {
+      defaultLines.push(entries.slice(i, i + 3));
     }
-  };
+    const defaultNode = /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: defaultContainerStyle
+    }, defaultLines.map((line, lineIndex) => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      key: `l-${lineIndex}`,
+      style: defaultLineStyle
+    }, line.map(item => renderKey(item.key, item.index)))));
+    const customLines = [];
+    for (let i = 0; i < 9 && i < entries.length; i += 3) {
+      customLines.push(entries.slice(i, i + 3));
+    }
+    const tail = entries.slice(9);
+    if (tail.length === 1) {
+      customLines.push([{
+        key: {
+          type: ''
+        },
+        index: 1000001
+      }, tail[0], {
+        key: {
+          type: ''
+        },
+        index: 1000002
+      }]);
+    } else if (tail.length) {
+      customLines.push(tail);
+    }
+    const customMainNode = /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: customMainStyle
+    }, customLines.map((line, lineIndex) => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      key: `cl-${lineIndex}`,
+      style: defaultLineStyle
+    }, line.map(item => renderKey(item.key, item.index)))));
+    const deleteNode = showDeleteKey ? renderKey({
+      type: 'delete'
+    }, 999, false, true, doubleKeyHeight) : null;
+    const closeNode = renderKey({
+      type: 'close'
+    }, 1000, true, true, doubleKeyHeight);
+    const headerNode = hasHeader ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: [styles.header, headerPaddingStyle]
+    }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+      style: [styles.title, styles.titleOverlay, {
+        color: colors.title
+      }],
+      numberOfLines: 1
+    }, title), resolvedCloseText ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
+      onPress: closeSelf,
+      style: styles.headerClose,
+      accessibilityRole: "button",
+      accessibilityLabel: resolvedCloseText
+    }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+      style: {
+        color: colors.title
+      }
+    }, resolvedCloseText)) : null) : null;
+    const bodyNode = isCustomTheme ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: customRowStyle
+    }, customMainNode, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: customSidebarStyle
+    }, deleteNode, closeNode)) : defaultNode;
+    const safeAreaNode = safeAreaInsetBottom && /*#__PURE__*/_react().default.createElement(_safeAreaView.SafeAreaView, {
+      edge: "bottom"
+    });
+    return {
+      headerNode,
+      bodyNode,
+      safeAreaNode
+    };
+  }, [colors.title, doubleKeyHeight, hasHeader, isCustomTheme, keyGap, keys, renderKey, resolvedCloseText, safeAreaInsetBottom, showDeleteKey, closeSelf, spacing.paddingHorizontal, spacing.titlePadding, title]);
   if (!shouldRender && !visible) {
     return null;
   }
-  const keyboardNode = /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, _extends({}, rest, {
+  return /*#__PURE__*/_react().default.createElement(_Portal.default, null, /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, _extends({}, rest, {
     pointerEvents: visible ? 'auto' : 'none',
     onLayout: handleLayout,
     style: [styles.wrapper, wrapperShadow, style, {
@@ -330,58 +433,8 @@ const NumberKeyboard = props => {
       }],
       backgroundColor: colors.background
     }]
-  }), (title || closeButtonText) && theme === 'default' && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [styles.header, {
-      paddingHorizontal: spacing.titlePadding
-    }]
-  }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: [styles.title, styles.titleOverlay, {
-      color: colors.title
-    }],
-    numberOfLines: 1
-  }, title), resolvedCloseText ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
-    onPress: () => handleInput(undefined, 'close'),
-    style: styles.headerClose,
-    accessibilityRole: "button",
-    accessibilityLabel: resolvedCloseText
-  }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: {
-      color: colors.title
-    }
-  }, resolvedCloseText)) : null), theme === 'custom' ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [styles.customRow, {
-      paddingHorizontal: spacing.paddingHorizontal,
-      paddingBottom: spacing.paddingVertical,
-      gap: spacing.keyGap
-    }]
-  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [styles.customMain, {
-      gap: spacing.keyGap
-    }]
-  }, keys.map((key, index) => renderKey(key, index))), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [styles.customSidebar, {
-      gap: spacing.keyGap
-    }]
-  }, showDeleteKey ? renderKey({
-    type: 'delete'
-  }, 999) : null, renderKey({
-    type: 'close',
-    text: resolvedCloseText
-  }, 1000, {
-    isClose: true
-  }))) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [styles.defaultRow, {
-      paddingHorizontal: spacing.paddingHorizontal,
-      paddingBottom: spacing.paddingVertical,
-      gap: spacing.keyGap
-    }]
-  }, keys.map((key, index) => renderKey(key, index))), safeAreaInsetBottom ? /*#__PURE__*/_react().default.createElement(_reactNative().SafeAreaView, {
-    style: {
-      width: '100%'
-    }
-  }) : null);
-  return /*#__PURE__*/_react().default.createElement(_Portal.default, null, keyboardNode);
-};
+  }), memo.headerNode, memo.bodyNode, memo.safeAreaNode));
+});
 const styles = _reactNative().StyleSheet.create({
   wrapper: {
     position: 'absolute',
@@ -433,7 +486,7 @@ const styles = _reactNative().StyleSheet.create({
   customSidebar: {
     flex: 1,
     flexDirection: 'column',
-    justifyContent: 'space-between'
+    justifyContent: 'flex-start'
   }
 });
 NumberKeyboard.displayName = 'NumberKeyboard';

package/dist/cjs/components/number-keyboard/tokens.js

@@ -9,8 +9,7 @@ const createTokens = foundations => {
   const {
     palette,
     spacing,
-    radii,
-    fontSize
+    radii
   } = foundations;
   const onPrimary = palette.primary.foreground ?? '#ffffff';
   return {
@@ -18,17 +17,18 @@ const createTokens = foundations => {
       background: palette.default[100],
       title: palette.default[700],
       keyBackground: '#ffffff',
-      keyActiveBackground: palette.default[100],
+      keyActiveBackground: palette.default[50],
       keyText: palette.default[900],
       keyTextActive: palette.primary[600],
-      closeBackground: palette.primary[600],
+      closeBackground: palette.primary[500],
+      closeActiveBackground: palette.primary[400],
       closeText: onPrimary,
       border: palette.default[200]
     },
     spacing: {
-      paddingHorizontal: spacing.md,
-      paddingVertical: spacing.sm,
-      keyGap: spacing.xs,
+      paddingHorizontal: spacing.ssm,
+      paddingVertical: spacing.ssm,
+      keyGap: spacing.ssm,
       titlePadding: spacing.md
     },
     sizing: {

package/dist/cjs/components/overlay/Overlay.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Overlay = void 0;
 function _react() {
-  const data = _interopRequireDefault(require("react"));
+  const data = _interopRequireWildcard(require("react"));
   _react = function () {
     return data;
   };
@@ -24,33 +24,40 @@ var _Portal = _interopRequireDefault(require("../portal/Portal"));
 var _useOverlayStack = require("./useOverlayStack");
 var _tokens = require("./tokens");
 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 AnimatedPressable = _reactNative().Animated.createAnimatedComponent(_reactNative().Pressable);
 const Overlay = props => {
   const {
-    visible = false,
     color,
-    duration,
-    lockScroll = true,
-    closeOnBackPress = false,
     tokensOverride,
     onPress,
     onClick,
     style,
-    testID = 'rv-overlay',
-    accessibilityLabel = '关闭遮罩',
     zIndex,
-    children
+    children,
+    visible: visibleProp,
+    duration: durationProp,
+    lockScroll: lockScrollProp,
+    closeOnBackPress: closeOnBackPressProp,
+    testID: testIDProp,
+    accessibilityLabel: accessibilityLabelProp
   } = props;
   const hasAction = !!onPress || !!onClick;
   const tokens = (0, _tokens.useOverlayTokens)(tokensOverride);
-  const resolvedDuration = Math.max(0, (0, _number.parseNumberLike)(duration, tokens.animationDuration) ?? tokens.animationDuration);
+  const visible = visibleProp ?? tokens.defaults.visible;
+  const lockScroll = lockScrollProp ?? tokens.defaults.lockScroll;
+  const closeOnBackPress = closeOnBackPressProp ?? tokens.defaults.closeOnBackPress;
+  const testID = testIDProp ?? tokens.defaults.testID;
+  const accessibilityLabel = accessibilityLabelProp ?? tokens.defaults.accessibilityLabel;
+  const duration = durationProp ?? tokens.defaults.duration;
+  const resolvedDuration = Math.max(0, (0, _number.parseNumberLike)(duration, tokens.defaults.duration) ?? tokens.defaults.duration);
   const {
     mounted,
     animated
   } = (0, _usePresenceAnimation.usePresenceAnimation)(visible, {
     duration: resolvedDuration
   });
-  const handlePress = _react().default.useCallback(() => {
+  const handlePress = (0, _react().useCallback)(() => {
     if (onPress) {
       onPress();
       return;
@@ -73,12 +80,12 @@ const Overlay = props => {
   const resolvedColor = color ?? styleBackgroundColor ?? tokens.colors.backdrop;
   return /*#__PURE__*/_react().default.createElement(_Portal.default, null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     pointerEvents: "box-none",
-    style: [styles.portal, resolvedZIndex !== undefined && resolvedZIndex !== null ? {
+    style: [tokens.layout.portal, resolvedZIndex !== undefined && resolvedZIndex !== null ? {
       zIndex: resolvedZIndex
     } : null, style]
   }, /*#__PURE__*/_react().default.createElement(AnimatedPressable, {
     testID: testID,
-    style: [styles.overlay, {
+    style: [tokens.layout.overlay, {
       backgroundColor: resolvedColor,
       opacity: animated,
       touchAction: lockScroll ? 'none' : undefined
@@ -92,13 +99,5 @@ const Overlay = props => {
   }), children));
 };
 exports.Overlay = Overlay;
-const styles = _reactNative().StyleSheet.create({
-  portal: {
-    ..._reactNative().StyleSheet.absoluteFillObject
-  },
-  overlay: {
-    ..._reactNative().StyleSheet.absoluteFillObject
-  }
-});
 Overlay.displayName = 'Overlay';
 var _default = exports.default = Overlay;

package/dist/cjs/components/overlay/OverlayStackStore.js

@@ -12,7 +12,7 @@ function _reactNative() {
   return data;
 }
 var _platform = require("../../platform");
-var _validate = require("../../utils/validate");
+var _utils = require("../../utils");
 const DEFAULT_BASE_Z_INDEX = 1000;
 const DEFAULT_Z_INDEX_STEP = 2;
 class OverlayStackStore {
@@ -52,7 +52,7 @@ class OverlayStackStore {
     const next = {
       ...prev,
       ...options,
-      zIndex: (0, _validate.isNumber)(options.zIndex) ? this.resolveZIndex(options.zIndex) : prev.zIndex
+      zIndex: (0, _utils.isNumber)(options.zIndex) ? this.resolveZIndex(options.zIndex) : prev.zIndex
     };
     this.entries = [...this.entries.slice(0, index), next, ...this.entries.slice(index + 1)];
     this.emit();
@@ -70,8 +70,8 @@ class OverlayStackStore {
   size = () => this.entries.length;
   getBaseZIndex = () => this.baseZIndex;
   resolveZIndex = provided => {
-    if ((0, _validate.isNumber)(provided)) {
-      if (!Number.isFinite(provided)) {
+    if ((0, _utils.isNumber)(provided)) {
+      if (!Number.isFinite(provided) || provided < 0) {
         return this.baseZIndex;
       }
       return provided >= this.baseZIndex ? provided : this.baseZIndex + provided;