react-native-system-ui 0.0.1 → 0.0.3

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

@@ -6,10 +6,33 @@ Object.defineProperty(exports, "__esModule", {
 exports.useOverlayTokens = exports.createOverlayTokens = void 0;
 var _designSystem = require("../../design-system");
 const createOverlayTokens = _foundations => ({
+  defaults: {
+    visible: false,
+    duration: 300,
+    lockScroll: true,
+    closeOnBackPress: false,
+    testID: 'rv-overlay',
+    accessibilityLabel: '关闭遮罩'
+  },
+  layout: {
+    portal: {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
+    },
+    overlay: {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
+    }
+  },
   colors: {
     backdrop: 'rgba(0, 0, 0, 0.7)'
-  },
-  animationDuration: 300
+  }
 });
 exports.createOverlayTokens = createOverlayTokens;
 const useOverlayTokens = exports.useOverlayTokens = (0, _designSystem.createComponentTokensHook)('overlay', createOverlayTokens);

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

@@ -5,22 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useOverlayStack = void 0;
 function _react() {
-  const data = _interopRequireWildcard(require("react"));
+  const data = require("react");
   _react = function () {
     return data;
   };
   return data;
 }
 var _OverlayStackStore = require("./OverlayStackStore");
-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 useOverlayEntries = () => (0, _react().useSyncExternalStore)(_OverlayStackStore.overlayStackStore.subscribe, _OverlayStackStore.overlayStackStore.getSnapshot, _OverlayStackStore.overlayStackStore.getSnapshot);
 const useOverlayStack = ({
   visible,
   ...options
 }) => {
   const entries = useOverlayEntries();
-  const entryRef = _react().default.useRef(null);
-  _react().default.useEffect(() => {
+  const entryRef = (0, _react().useRef)(null);
+  const stableOptions = (0, _react().useMemo)(() => options, [options.onClose, options.closeOnBack, options.lockScroll, options.zIndex, options.type, options.meta]);
+  (0, _react().useEffect)(() => {
     if (!visible) {
       if (entryRef.current) {
         _OverlayStackStore.overlayStackStore.unmount(entryRef.current.key);
@@ -28,7 +28,7 @@ const useOverlayStack = ({
       }
       return;
     }
-    const entry = _OverlayStackStore.overlayStackStore.mount(options);
+    const entry = _OverlayStackStore.overlayStackStore.mount(stableOptions);
     entryRef.current = entry;
     return () => {
       if (entryRef.current) {
@@ -37,18 +37,18 @@ const useOverlayStack = ({
       }
     };
   }, [visible]);
-  _react().default.useEffect(() => {
+  (0, _react().useEffect)(() => {
     if (!visible || !entryRef.current) {
       return;
     }
-    _OverlayStackStore.overlayStackStore.update(entryRef.current.key, options);
-  }, [visible, options.onClose, options.closeOnBack, options.lockScroll, options.zIndex, options.type]);
+    _OverlayStackStore.overlayStackStore.update(entryRef.current.key, stableOptions);
+  }, [stableOptions, visible]);
   const current = entryRef.current;
   const snapshotEntry = current ? entries.find(entry => entry.key === current.key) : undefined;
   const top = entries[entries.length - 1];
   return {
     entryKey: snapshotEntry?.key ?? null,
-    zIndex: snapshotEntry?.zIndex ?? options.zIndex,
+    zIndex: snapshotEntry?.zIndex ?? stableOptions.zIndex,
     isTopMost: !!snapshotEntry && !!top && top.key === snapshotEntry.key
   };
 };

package/dist/cjs/components/pagination/Pagination.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;
   };
@@ -22,7 +22,7 @@ var _tokens = require("./tokens");
 var _hooks = require("../../hooks");
 var _number = require("../../utils/number");
 var _validate = require("../../utils/validate");
-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 Pagination = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   const {
@@ -58,7 +58,7 @@ const Pagination = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   const showPageSizeNumber = Number.isFinite(showPageSize) ? Math.floor(showPageSize) : 0;
   const count = pageCountNumber > 0 ? pageCountNumber : totalItemsNumber > 0 && itemsPerPageNumber > 0 ? Math.max(1, Math.ceil(totalItemsNumber / itemsPerPageNumber)) : 1;
   const currentPage = (0, _number.clamp)(page, 1, count);
-  const pages = _react().default.useMemo(() => {
+  const pages = (0, _react().useMemo)(() => {
     const items = [];
     if (mode !== 'multi') return items;
     const limit = Math.max(1, showPageSizeNumber);
@@ -92,7 +92,7 @@ const Pagination = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     }
     return items;
   }, [mode, count, showPageSizeNumber, currentPage, forceEllipses]);
-  _react().default.useEffect(() => {
+  (0, _react().useEffect)(() => {
     if (page !== currentPage) {
       setPage(currentPage);
     }
@@ -107,11 +107,11 @@ const Pagination = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       onPress: () => handleSelect(item.number),
       style: ({
         pressed
-      }) => [tokens.layout.item, item.active ? {
+      }) => [tokens.layout.item, item.active && {
         backgroundColor: tokens.colors.activeBackground
-      } : null, pressed && !item.active ? {
+      }, pressed && !item.active && {
         opacity: tokens.defaults.pressedOpacity
-      } : null],
+      }],
       testID: `rv-pagination-page-${index}`
     }, (0, _validate.isText)(node) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
       style: {
@@ -130,11 +130,11 @@ const Pagination = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       disabled: disabled,
       style: ({
         pressed
-      }) => [tokens.layout.control, disabled ? {
+      }) => [tokens.layout.control, disabled && {
         opacity: tokens.defaults.disabledOpacity
-      } : null, pressed && !disabled ? {
+      }, pressed && !disabled && {
         opacity: tokens.defaults.pressedOpacity
-      } : null],
+      }],
       testID: `rv-pagination-${type}`
     }, (0, _validate.isText)(label) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
       style: {

package/dist/cjs/components/password-input/PasswordInput.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;
   };
@@ -22,7 +22,7 @@ var _designSystem = require("../../design-system");
 var _hooks = require("../../hooks");
 var _number = require("../../utils/number");
 var _validate = require("../../utils/validate");
-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 HIDDEN_INPUT_PROPS = {
   caretHidden: true,
@@ -103,18 +103,19 @@ const PasswordInput = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     radii,
     sizing,
     typography,
-    opacity
+    opacity,
+    spacing
   } = tokens;
-  const inputRef = _react().default.useRef(null);
-  const [cursorVisible, setCursorVisible] = _react().default.useState(true);
-  const blinkTimer = _react().default.useRef(null);
-  const [focused, setFocused] = _react().default.useState(autoFocus);
-  const keyboardType = type === 'number' ? 'number-pad' : 'default';
-  const inputMode = type === 'number' ? 'numeric' : 'text';
+  const inputRef = (0, _react().useRef)(null);
+  const [cursorVisible, setCursorVisible] = (0, _react().useState)(true);
+  const blinkTimer = (0, _react().useRef)(null);
+  const [focused, setFocused] = (0, _react().useState)(autoFocus);
+  const keyboardType = (0, _react().useMemo)(() => type === 'number' ? 'number-pad' : 'default', [type]);
+  const inputMode = (0, _react().useMemo)(() => type === 'number' ? 'numeric' : 'text', [type]);
   const [code = '', setCode] = (0, _hooks.useControllableValue)(props, {
     defaultValue: ''
   });
-  const normalizeValue = nextValue => {
+  const normalizeValue = (0, _react().useCallback)(nextValue => {
     let next = nextValue === null || nextValue === undefined ? '' : (0, _validate.isString)(nextValue) ? nextValue : String(nextValue);
     if (type === 'number') {
       next = sanitizeNumber(next);
@@ -123,52 +124,52 @@ const PasswordInput = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       next = next.slice(0, lengthSafe);
     }
     return next;
-  };
-  const normalizedCode = normalizeValue(code);
-  const updateValue = nextValue => {
+  }, [lengthSafe, type]);
+  const normalizedCode = (0, _react().useMemo)(() => normalizeValue(code), [code, normalizeValue]);
+  const updateValue = (0, _react().useCallback)(nextValue => {
     const normalized = normalizeValue(nextValue);
     if (normalized === normalizedCode) return;
     if (validator && !validator(normalized)) return;
     setCode(normalized);
-  };
-  const focusInput = () => {
+  }, [normalizeValue, normalizedCode, setCode, validator]);
+  const focusInput = (0, _react().useCallback)(() => {
     if (disabled) return;
     inputRef.current?.focus();
-  };
-  const blurInput = () => {
+  }, [disabled]);
+  const blurInput = (0, _react().useCallback)(() => {
     inputRef.current?.blur();
-  };
-  const clearInput = () => {
+  }, []);
+  const clearInput = (0, _react().useCallback)(() => {
     updateValue('');
-  };
-  _react().default.useImperativeHandle(ref, () => ({
+  }, [updateValue]);
+  (0, _react().useImperativeHandle)(ref, () => ({
     focus: focusInput,
     blur: blurInput,
     clear: clearInput
-  }));
-  _react().default.useEffect(() => {
+  }), [blurInput, clearInput, focusInput]);
+  (0, _react().useEffect)(() => {
     if (!autoFocus || disabled) return;
     const timer = setTimeout(() => {
       inputRef.current?.focus();
     }, 60);
     return () => clearTimeout(timer);
   }, [autoFocus, disabled]);
-  const handleChangeText = text => {
+  const handleChangeText = (0, _react().useCallback)(text => {
     updateValue(text ?? '');
-  };
-  const handleFocus = () => {
+  }, [updateValue]);
+  const handleFocus = (0, _react().useCallback)(() => {
     setFocused(true);
     onFocus?.();
-  };
-  const handleBlur = () => {
+  }, [onFocus]);
+  const handleBlur = (0, _react().useCallback)(() => {
     setFocused(false);
     onBlur?.();
-  };
-  const prevSubmitRef = _react().default.useRef({
+  }, [onBlur]);
+  const prevSubmitRef = (0, _react().useRef)({
     value: normalizedCode,
     length: lengthSafe
   });
-  _react().default.useEffect(() => {
+  (0, _react().useEffect)(() => {
     const prev = prevSubmitRef.current;
     prevSubmitRef.current = {
       value: normalizedCode,
@@ -181,7 +182,7 @@ const PasswordInput = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     onSubmit(normalizedCode);
     inputRef.current?.blur();
   }, [lengthSafe, normalizedCode, onSubmit]);
-  _react().default.useEffect(() => {
+  (0, _react().useEffect)(() => {
     const shouldBlink = showCursor && focused && !disabled;
     if (blinkTimer.current) {
       clearInterval(blinkTimer.current);
@@ -202,7 +203,7 @@ const PasswordInput = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       }
     };
   }, [disabled, focused, showCursor]);
-  const cells = Array.from({
+  const cells = (0, _react().useMemo)(() => Array.from({
     length: lengthSafe
   }, (_, index) => {
     const char = normalizedCode?.[index];
@@ -214,29 +215,34 @@ const PasswordInput = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       isFilled,
       showBlink
     };
-  });
-  const gutterValue = Math.max(0, (0, _number.parseNumberLike)(gutter, 0) ?? 0);
+  }), [disabled, focused, lengthSafe, normalizedCode, showCursor]);
+  const gutterValue = (0, _react().useMemo)(() => Math.max(0, (0, _number.parseNumberLike)(gutter, 0) ?? 0), [gutter]);
   const hasGutter = gutterValue > 0;
   const tip = errorInfo ?? info;
   const tipColor = errorInfo ? colors.error : colors.muted;
   const backgroundColor = hasGutter ? 'transparent' : colors.background;
-  const cellTextBase = {
+  const cellTextBase = (0, _react().useMemo)(() => ({
     color: colors.text,
     fontSize: sizing.cellTextSize,
     fontWeight: typography.cellTextWeight,
     fontFamily: typography.fontFamily
-  };
+  }), [colors.text, sizing.cellTextSize, typography.cellTextWeight, typography.fontFamily]);
+  const wrapperStyle = (0, _react().useMemo)(() => [styles.wrapper, {
+    backgroundColor,
+    borderRadius: radii.wrapper,
+    opacity: disabled ? opacity.disabled : 1
+  }, !hasGutter && {
+    borderWidth: _reactNative().StyleSheet.hairlineWidth,
+    borderColor: colors.border
+  }], [backgroundColor, colors.border, disabled, hasGutter, opacity.disabled, radii.wrapper]);
+  const securityStyle = (0, _react().useMemo)(() => [styles.security, {
+    borderRadius: hasGutter ? 0 : radii.wrapper,
+    backgroundColor
+  }], [backgroundColor, hasGutter, radii.wrapper]);
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: style
   }, /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({}, rest, {
-    style: [styles.wrapper, {
-      backgroundColor,
-      borderRadius: radii.wrapper,
-      opacity: disabled ? opacity.disabled : 1
-    }, !hasGutter && {
-      borderWidth: _reactNative().StyleSheet.hairlineWidth,
-      borderColor: colors.border
-    }],
+    style: wrapperStyle,
     onPress: focusInput,
     disabled: disabled,
     accessibilityRole: "button",
@@ -244,10 +250,7 @@ const PasswordInput = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       disabled
     }
   }), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [styles.security, {
-      borderRadius: hasGutter ? 0 : radii.wrapper,
-      backgroundColor
-    }]
+    style: securityStyle
   }, cells.map((item, index) => {
     const filledTextStyle = [cellTextBase, cellTextStyle, !mask && item.isFilled && highlightTextStyle];
     const baseCell = [styles.cell, {
@@ -257,9 +260,9 @@ const PasswordInput = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     if (hasGutter) {
       baseCell.push(styles.cellGutter, {
         borderColor: colors.border
-      }, index > 0 ? {
+      }, index > 0 && {
         marginLeft: gutterValue
-      } : null);
+      });
     } else if (index < lengthSafe - 1) {
       baseCell.push({
         borderRightWidth: _reactNative().StyleSheet.hairlineWidth,
@@ -308,7 +311,9 @@ const PasswordInput = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     onBlur: handleBlur,
     accessible: false
   })))), tip ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: styles.infoWrapper
+    style: [styles.infoWrapper, {
+      marginTop: spacing.infoMarginTop
+    }]
   }, (0, _validate.isText)(tip) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: [styles.infoText, {
       color: tipColor