react-native-system-ui 0.0.1-beta0 → 0.0.2

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/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Overlay: true
+};
+Object.defineProperty(exports, "Overlay", {
+  enumerable: true,
+  get: function () {
+    return _Overlay.default;
+  }
+});
+exports.default = void 0;
+var _Overlay = _interopRequireDefault(require("./Overlay"));
+var _OverlayStackStore = require("./OverlayStackStore");
+Object.keys(_OverlayStackStore).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _OverlayStackStore[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _OverlayStackStore[key];
+    }
+  });
+});
+var _useOverlayStack = require("./useOverlayStack");
+Object.keys(_useOverlayStack).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useOverlayStack[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useOverlayStack[key];
+    }
+  });
+});
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _Overlay.default;

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;

package/dist/cjs/pagination/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Pagination", {
+  enumerable: true,
+  get: function () {
+    return _Pagination.default;
+  }
+});
+exports.default = void 0;
+Object.defineProperty(exports, "usePaginationTokens", {
+  enumerable: true,
+  get: function () {
+    return _tokens.usePaginationTokens;
+  }
+});
+var _Pagination = _interopRequireDefault(require("./Pagination"));
+var _tokens = require("./tokens");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _Pagination.default;

package/dist/cjs/pagination/tokens.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePaginationTokens = void 0;
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _designSystem = require("../../design-system");
+const createTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    radii
+  } = foundations;
+  const onPrimary = palette.primary.foreground ?? '#ffffff';
+  const borderWidth = _reactNative().StyleSheet.hairlineWidth;
+  const borderColor = palette.default[200];
+  const textColor = palette.default[600];
+  const gap = spacing.xs;
+  const paddingX = spacing.sm;
+  const paddingY = spacing.xs;
+  const itemRadius = radii.sm;
+  return {
+    defaults: {
+      mode: 'multi',
+      pageCount: 0,
+      totalItems: 0,
+      itemsPerPage: 10,
+      showPageSize: 5,
+      forceEllipses: false,
+      prevText: '上一页',
+      nextText: '下一页',
+      defaultPage: 1,
+      pressedOpacity: 0.7,
+      disabledOpacity: 0.5
+    },
+    layout: {
+      container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap
+      },
+      pages: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap
+      },
+      item: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth,
+        paddingHorizontal: paddingX,
+        paddingVertical: paddingY,
+        borderColor,
+        borderRadius: itemRadius
+      },
+      control: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth,
+        paddingHorizontal: paddingX,
+        paddingVertical: paddingY,
+        borderColor,
+        borderRadius: itemRadius
+      },
+      desc: {
+        marginHorizontal: gap,
+        color: textColor,
+        textAlign: 'center'
+      }
+    },
+    colors: {
+      text: textColor,
+      disabled: palette.default[300],
+      activeText: onPrimary,
+      activeBackground: palette.primary[500],
+      border: borderColor
+    },
+    typography: {
+      fontWeight: '400',
+      activeFontWeight: '600'
+    },
+    radii: {
+      item: itemRadius
+    },
+    borders: {
+      width: borderWidth
+    },
+    spacing: {
+      gap,
+      paddingX,
+      paddingY,
+      descMarginHorizontal: gap
+    }
+  };
+};
+const usePaginationTokens = exports.usePaginationTokens = (0, _designSystem.createComponentTokensHook)('pagination', createTokens);