react-native-system-ui 0.0.1 → 0.0.2

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

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNumberKeyboardTokens = void 0;
+var _designSystem = require("../../design-system");
+const createTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    radii
+  } = foundations;
+  const onPrimary = palette.primary.foreground ?? '#ffffff';
+  return {
+    colors: {
+      background: palette.default[100],
+      title: palette.default[700],
+      keyBackground: '#ffffff',
+      keyActiveBackground: palette.default[50],
+      keyText: palette.default[900],
+      keyTextActive: palette.primary[600],
+      closeBackground: palette.primary[500],
+      closeActiveBackground: palette.primary[400],
+      closeText: onPrimary,
+      border: palette.default[200]
+    },
+    spacing: {
+      paddingHorizontal: spacing.ssm,
+      paddingVertical: spacing.ssm,
+      keyGap: spacing.ssm,
+      titlePadding: spacing.md
+    },
+    sizing: {
+      keyHeight: 54,
+      closeHeight: 44,
+      fontSize: 28
+    },
+    radii: {
+      key: radii.xs
+    },
+    shadow: {
+      color: '#000000',
+      opacity: 0.08,
+      radius: 6,
+      offsetY: 0,
+      elevation: 6
+    }
+  };
+};
+const useNumberKeyboardTokens = exports.useNumberKeyboardTokens = (0, _designSystem.createComponentTokensHook)('numberKeyboard', createTokens);

package/dist/cjs/overlay/Overlay.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Overlay = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _usePresenceAnimation = require("../../hooks/usePresenceAnimation");
+var _number = require("../../utils/number");
+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 {
+    color,
+    tokensOverride,
+    onPress,
+    onClick,
+    style,
+    zIndex,
+    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 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 = (0, _react().useCallback)(() => {
+    if (onPress) {
+      onPress();
+      return;
+    }
+    onClick?.();
+  }, [onClick, onPress]);
+  const {
+    zIndex: stackZIndex
+  } = (0, _useOverlayStack.useOverlayStack)({
+    visible: mounted,
+    onClose: hasAction ? handlePress : undefined,
+    closeOnBack: hasAction ? closeOnBackPress : false,
+    lockScroll,
+    zIndex: (0, _number.parseNumberLike)(zIndex),
+    type: 'overlay'
+  });
+  if (!mounted) return null;
+  const resolvedZIndex = stackZIndex ?? (0, _number.parseNumberLike)(zIndex);
+  const styleBackgroundColor = _reactNative().StyleSheet.flatten(style)?.backgroundColor;
+  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: [tokens.layout.portal, resolvedZIndex !== undefined && resolvedZIndex !== null ? {
+      zIndex: resolvedZIndex
+    } : null, style]
+  }, /*#__PURE__*/_react().default.createElement(AnimatedPressable, {
+    testID: testID,
+    style: [tokens.layout.overlay, {
+      backgroundColor: resolvedColor,
+      opacity: animated,
+      touchAction: lockScroll ? 'none' : undefined
+    }],
+    pointerEvents: mounted ? 'auto' : 'none',
+    accessible: hasAction,
+    accessibilityRole: hasAction ? 'button' : undefined,
+    accessibilityLabel: hasAction ? accessibilityLabel : undefined,
+    accessibilityHint: hasAction ? '双击即可关闭遮罩' : undefined,
+    onPress: handlePress
+  }), children));
+};
+exports.Overlay = Overlay;
+Overlay.displayName = 'Overlay';
+var _default = exports.default = Overlay;

package/dist/cjs/overlay/OverlayStackStore.js

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.overlayStackStore = exports.OverlayStackStore = void 0;
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _platform = require("../../platform");
+var _utils = require("../../utils");
+const DEFAULT_BASE_Z_INDEX = 1000;
+const DEFAULT_Z_INDEX_STEP = 2;
+class OverlayStackStore {
+  listeners = new Set();
+  entries = [];
+  keySeed = 0;
+  constructor(baseZIndex = DEFAULT_BASE_Z_INDEX, zIndexStep = DEFAULT_Z_INDEX_STEP) {
+    this.baseZIndex = baseZIndex;
+    this.zIndexStep = zIndexStep;
+  }
+  subscribe = listener => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+  getSnapshot = () => this.entries;
+  mount = options => {
+    const key = ++this.keySeed;
+    const entry = {
+      key,
+      zIndex: this.resolveZIndex(options.zIndex),
+      onClose: options.onClose,
+      closeOnBack: options.closeOnBack,
+      lockScroll: options.lockScroll,
+      type: options.type,
+      meta: options.meta
+    };
+    this.entries = [...this.entries, entry];
+    this.emit();
+    return entry;
+  };
+  update = (key, options) => {
+    const index = this.entries.findIndex(item => item.key === key);
+    if (index === -1) return undefined;
+    const prev = this.entries[index];
+    const next = {
+      ...prev,
+      ...options,
+      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();
+    return next;
+  };
+  unmount = key => {
+    const next = this.entries.filter(entry => entry.key !== key);
+    if (next.length === this.entries.length) {
+      return;
+    }
+    this.entries = next;
+    this.emit();
+  };
+  peek = () => this.entries[this.entries.length - 1];
+  size = () => this.entries.length;
+  getBaseZIndex = () => this.baseZIndex;
+  resolveZIndex = provided => {
+    if ((0, _utils.isNumber)(provided)) {
+      if (!Number.isFinite(provided) || provided < 0) {
+        return this.baseZIndex;
+      }
+      return provided >= this.baseZIndex ? provided : this.baseZIndex + provided;
+    }
+    const top = this.peek();
+    if (!top) {
+      return this.baseZIndex;
+    }
+    return top.zIndex + this.zIndexStep;
+  };
+  emit = () => {
+    this.listeners.forEach(listener => {
+      listener();
+    });
+  };
+}
+exports.OverlayStackStore = OverlayStackStore;
+const overlayStackStore = exports.overlayStackStore = new OverlayStackStore();
+let backHandlerSubscription = null;
+const syncBackHandler = () => {
+  if (_reactNative().Platform.OS === 'web') return;
+  const entries = overlayStackStore.getSnapshot();
+  const hasClosable = entries.some(entry => entry.closeOnBack && entry.onClose);
+  if (hasClosable && !backHandlerSubscription && _reactNative().BackHandler?.addEventListener) {
+    backHandlerSubscription = _reactNative().BackHandler.addEventListener('hardwareBackPress', () => {
+      const currentEntries = overlayStackStore.getSnapshot();
+      for (let i = currentEntries.length - 1; i >= 0; i -= 1) {
+        const entry = currentEntries[i];
+        if (entry.closeOnBack && entry.onClose) {
+          entry.onClose();
+          return true;
+        }
+      }
+      return false;
+    });
+    return;
+  }
+  if (!hasClosable && backHandlerSubscription) {
+    backHandlerSubscription.remove();
+    backHandlerSubscription = null;
+  }
+};
+const syncScrollLock = () => {
+  const shouldLock = overlayStackStore.getSnapshot().some(entry => entry.lockScroll);
+  (0, _platform.setBodyScrollLocked)(shouldLock);
+};
+const handleStoreChange = () => {
+  syncBackHandler();
+  syncScrollLock();
+};
+overlayStackStore.subscribe(handleStoreChange);
+handleStoreChange();

package/dist/cjs/overlay/tokens.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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)'
+  }
+});
+exports.createOverlayTokens = createOverlayTokens;
+const useOverlayTokens = exports.useOverlayTokens = (0, _designSystem.createComponentTokensHook)('overlay', createOverlayTokens);

package/dist/cjs/overlay/useOverlayStack.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOverlayStack = void 0;
+function _react() {
+  const data = require("react");
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+var _OverlayStackStore = require("./OverlayStackStore");
+const useOverlayEntries = () => (0, _react().useSyncExternalStore)(_OverlayStackStore.overlayStackStore.subscribe, _OverlayStackStore.overlayStackStore.getSnapshot, _OverlayStackStore.overlayStackStore.getSnapshot);
+const useOverlayStack = ({
+  visible,
+  ...options
+}) => {
+  const entries = useOverlayEntries();
+  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);
+        entryRef.current = null;
+      }
+      return;
+    }
+    const entry = _OverlayStackStore.overlayStackStore.mount(stableOptions);
+    entryRef.current = entry;
+    return () => {
+      if (entryRef.current) {
+        _OverlayStackStore.overlayStackStore.unmount(entryRef.current.key);
+        entryRef.current = null;
+      }
+    };
+  }, [visible]);
+  (0, _react().useEffect)(() => {
+    if (!visible || !entryRef.current) {
+      return;
+    }
+    _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 ?? stableOptions.zIndex,
+    isTopMost: !!snapshotEntry && !!top && top.key === snapshotEntry.key
+  };
+};
+exports.useOverlayStack = useOverlayStack;

package/dist/cjs/pagination/Pagination.js

@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _tokens = require("./tokens");
+var _hooks = require("../../hooks");
+var _number = require("../../utils/number");
+var _validate = require("../../utils/validate");
+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 {
+    tokensOverride,
+    mode: modeProp,
+    pageCount: pageCountProp,
+    totalItems: totalItemsProp,
+    itemsPerPage: itemsPerPageProp,
+    showPageSize: showPageSizeProp,
+    forceEllipses: forceEllipsesProp,
+    prevText: prevTextProp,
+    nextText: nextTextProp,
+    pageDesc,
+    pageRender,
+    style,
+    ...rest
+  } = props;
+  const tokens = (0, _tokens.usePaginationTokens)(tokensOverride);
+  const mode = modeProp ?? tokens.defaults.mode;
+  const pageCount = pageCountProp ?? tokens.defaults.pageCount;
+  const totalItems = totalItemsProp ?? tokens.defaults.totalItems;
+  const itemsPerPage = itemsPerPageProp ?? tokens.defaults.itemsPerPage;
+  const showPageSize = showPageSizeProp ?? tokens.defaults.showPageSize;
+  const forceEllipses = forceEllipsesProp ?? tokens.defaults.forceEllipses;
+  const prevText = prevTextProp ?? tokens.defaults.prevText;
+  const nextText = nextTextProp ?? tokens.defaults.nextText;
+  const [page, setPage] = (0, _hooks.useControllableValue)(props, {
+    defaultValue: tokens.defaults.defaultPage
+  });
+  const pageCountNumber = Number.isFinite(pageCount) ? Math.floor(pageCount) : 0;
+  const totalItemsNumber = Number.isFinite(totalItems) ? Math.floor(totalItems) : 0;
+  const itemsPerPageNumber = Number.isFinite(itemsPerPage) ? Math.floor(itemsPerPage) : 0;
+  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 = (0, _react().useMemo)(() => {
+    const items = [];
+    if (mode !== 'multi') return items;
+    const limit = Math.max(1, showPageSizeNumber);
+    let startPage = 1;
+    let endPage = count;
+    const maxSized = limit < count;
+    if (maxSized) {
+      startPage = Math.max(currentPage - Math.floor(limit / 2), 1);
+      endPage = startPage + limit - 1;
+      if (endPage > count) {
+        endPage = count;
+        startPage = endPage - limit + 1;
+      }
+    }
+    for (let number = startPage; number <= endPage; number += 1) {
+      items.push({
+        number,
+        text: number,
+        active: number === currentPage
+      });
+    }
+    if (maxSized && forceEllipses) {
+      if (startPage > 1) items.unshift({
+        number: startPage - 1,
+        text: '...'
+      });
+      if (endPage < count) items.push({
+        number: endPage + 1,
+        text: '...'
+      });
+    }
+    return items;
+  }, [mode, count, showPageSizeNumber, currentPage, forceEllipses]);
+  (0, _react().useEffect)(() => {
+    if (page !== currentPage) {
+      setPage(currentPage);
+    }
+  }, [currentPage, page, setPage]);
+  const handleSelect = next => setPage((0, _number.clamp)(next, 1, count));
+  const renderPage = (item, index) => {
+    const node = pageRender ? pageRender(item) : item.text;
+    const textColor = item.active ? tokens.colors.activeText : tokens.colors.text;
+    return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
+      accessibilityRole: "button",
+      key: `${item.number}-${index}`,
+      onPress: () => handleSelect(item.number),
+      style: ({
+        pressed
+      }) => [tokens.layout.item, item.active && {
+        backgroundColor: tokens.colors.activeBackground
+      }, pressed && !item.active && {
+        opacity: tokens.defaults.pressedOpacity
+      }],
+      testID: `rv-pagination-page-${index}`
+    }, (0, _validate.isText)(node) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+      style: {
+        color: textColor,
+        fontWeight: item.active ? tokens.typography.activeFontWeight : tokens.typography.fontWeight
+      }
+    }, node) : node);
+  };
+  const renderControl = type => {
+    const disabled = type === 'prev' ? currentPage <= 1 : currentPage >= count;
+    const target = type === 'prev' ? currentPage - 1 : currentPage + 1;
+    const label = type === 'prev' ? prevText : nextText;
+    return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
+      accessibilityRole: "button",
+      onPress: () => handleSelect(target),
+      disabled: disabled,
+      style: ({
+        pressed
+      }) => [tokens.layout.control, disabled && {
+        opacity: tokens.defaults.disabledOpacity
+      }, pressed && !disabled && {
+        opacity: tokens.defaults.pressedOpacity
+      }],
+      testID: `rv-pagination-${type}`
+    }, (0, _validate.isText)(label) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+      style: {
+        color: disabled ? tokens.colors.disabled : tokens.colors.text
+      }
+    }, label) : label);
+  };
+  const descNode = mode === 'multi' ? null : pageDesc ?? `${currentPage}/${count}`;
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
+    ref: ref,
+    style: [tokens.layout.container, style]
+  }, rest), renderControl('prev'), mode === 'multi' ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: tokens.layout.pages
+  }, pages.map(renderPage)) : null, descNode == null ? null : (0, _validate.isText)(descNode) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: tokens.layout.desc,
+    testID: "rv-pagination-desc"
+  }, descNode) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: tokens.layout.desc,
+    testID: "rv-pagination-desc"
+  }, descNode), renderControl('next'));
+});
+Pagination.displayName = 'Pagination';
+var _default = exports.default = Pagination;