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

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

@@ -0,0 +1,45 @@
+import { createComponentTokensHook } from '../../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
+    }
+  };
+};
+export const useNumberKeyboardTokens = createComponentTokensHook('numberKeyboard', createTokens);

package/dist/es/overlay/Overlay.js

@@ -0,0 +1,82 @@
+import React, { useCallback } from 'react';
+import { Animated, Pressable, StyleSheet, View } from 'react-native';
+import { usePresenceAnimation } from '../../hooks/usePresenceAnimation';
+import { parseNumberLike } from '../../utils/number';
+import Portal from '../portal/Portal';
+import { useOverlayStack } from './useOverlayStack';
+import { useOverlayTokens } from './tokens';
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+export 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 = 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, parseNumberLike(duration, tokens.defaults.duration) ?? tokens.defaults.duration);
+  const {
+    mounted,
+    animated
+  } = usePresenceAnimation(visible, {
+    duration: resolvedDuration
+  });
+  const handlePress = useCallback(() => {
+    if (onPress) {
+      onPress();
+      return;
+    }
+    onClick?.();
+  }, [onClick, onPress]);
+  const {
+    zIndex: stackZIndex
+  } = useOverlayStack({
+    visible: mounted,
+    onClose: hasAction ? handlePress : undefined,
+    closeOnBack: hasAction ? closeOnBackPress : false,
+    lockScroll,
+    zIndex: parseNumberLike(zIndex),
+    type: 'overlay'
+  });
+  if (!mounted) return null;
+  const resolvedZIndex = stackZIndex ?? parseNumberLike(zIndex);
+  const styleBackgroundColor = StyleSheet.flatten(style)?.backgroundColor;
+  const resolvedColor = color ?? styleBackgroundColor ?? tokens.colors.backdrop;
+  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(View, {
+    pointerEvents: "box-none",
+    style: [tokens.layout.portal, resolvedZIndex !== undefined && resolvedZIndex !== null ? {
+      zIndex: resolvedZIndex
+    } : null, style]
+  }, /*#__PURE__*/React.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));
+};
+Overlay.displayName = 'Overlay';
+export default Overlay;

package/dist/es/overlay/OverlayStackStore.js

@@ -0,0 +1,113 @@
+import { BackHandler, Platform } from 'react-native';
+import { setBodyScrollLocked } from '../../platform';
+import { isNumber } from '../../utils';
+const DEFAULT_BASE_Z_INDEX = 1000;
+const DEFAULT_Z_INDEX_STEP = 2;
+export 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: 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 (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();
+    });
+  };
+}
+export const overlayStackStore = new OverlayStackStore();
+let backHandlerSubscription = null;
+const syncBackHandler = () => {
+  if (Platform.OS === 'web') return;
+  const entries = overlayStackStore.getSnapshot();
+  const hasClosable = entries.some(entry => entry.closeOnBack && entry.onClose);
+  if (hasClosable && !backHandlerSubscription && BackHandler?.addEventListener) {
+    backHandlerSubscription = 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);
+  setBodyScrollLocked(shouldLock);
+};
+const handleStoreChange = () => {
+  syncBackHandler();
+  syncScrollLock();
+};
+overlayStackStore.subscribe(handleStoreChange);
+handleStoreChange();

package/dist/es/overlay/index.js

@@ -0,0 +1,5 @@
+import Overlay from './Overlay';
+export { Overlay };
+export default Overlay;
+export * from './OverlayStackStore';
+export * from './useOverlayStack';

package/dist/es/overlay/tokens.js

@@ -0,0 +1,31 @@
+import { createComponentTokensHook } from '../../design-system';
+export 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)'
+  }
+});
+export const useOverlayTokens = createComponentTokensHook('overlay', createOverlayTokens);

package/dist/es/overlay/useOverlayStack.js

@@ -0,0 +1,42 @@
+import { useEffect, useMemo, useRef, useSyncExternalStore } from 'react';
+import { overlayStackStore } from './OverlayStackStore';
+const useOverlayEntries = () => useSyncExternalStore(overlayStackStore.subscribe, overlayStackStore.getSnapshot, overlayStackStore.getSnapshot);
+export const useOverlayStack = ({
+  visible,
+  ...options
+}) => {
+  const entries = useOverlayEntries();
+  const entryRef = useRef(null);
+  const stableOptions = useMemo(() => options, [options.onClose, options.closeOnBack, options.lockScroll, options.zIndex, options.type, options.meta]);
+  useEffect(() => {
+    if (!visible) {
+      if (entryRef.current) {
+        overlayStackStore.unmount(entryRef.current.key);
+        entryRef.current = null;
+      }
+      return;
+    }
+    const entry = overlayStackStore.mount(stableOptions);
+    entryRef.current = entry;
+    return () => {
+      if (entryRef.current) {
+        overlayStackStore.unmount(entryRef.current.key);
+        entryRef.current = null;
+      }
+    };
+  }, [visible]);
+  useEffect(() => {
+    if (!visible || !entryRef.current) {
+      return;
+    }
+    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
+  };
+};

package/dist/es/pagination/Pagination.js

@@ -0,0 +1,141 @@
+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); }
+import React, { useEffect, useMemo } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { usePaginationTokens } from './tokens';
+import { useControllableValue } from '../../hooks';
+import { clamp } from '../../utils/number';
+import { isText } from '../../utils/validate';
+const Pagination = /*#__PURE__*/React.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 = 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] = 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 = clamp(page, 1, count);
+  const pages = 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]);
+  useEffect(() => {
+    if (page !== currentPage) {
+      setPage(currentPage);
+    }
+  }, [currentPage, page, setPage]);
+  const handleSelect = next => setPage(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.createElement(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}`
+    }, isText(node) ? /*#__PURE__*/React.createElement(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.createElement(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}`
+    }, isText(label) ? /*#__PURE__*/React.createElement(Text, {
+      style: {
+        color: disabled ? tokens.colors.disabled : tokens.colors.text
+      }
+    }, label) : label);
+  };
+  const descNode = mode === 'multi' ? null : pageDesc ?? `${currentPage}/${count}`;
+  return /*#__PURE__*/React.createElement(View, _extends({
+    ref: ref,
+    style: [tokens.layout.container, style]
+  }, rest), renderControl('prev'), mode === 'multi' ? /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.pages
+  }, pages.map(renderPage)) : null, descNode == null ? null : isText(descNode) ? /*#__PURE__*/React.createElement(Text, {
+    style: tokens.layout.desc,
+    testID: "rv-pagination-desc"
+  }, descNode) : /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.desc,
+    testID: "rv-pagination-desc"
+  }, descNode), renderControl('next'));
+});
+Pagination.displayName = 'Pagination';
+export default Pagination;

package/dist/es/pagination/index.js

@@ -0,0 +1,4 @@
+import Pagination from './Pagination';
+export { usePaginationTokens } from './tokens';
+export default Pagination;
+export { Pagination };

package/dist/es/pagination/tokens.js

@@ -0,0 +1,91 @@
+import { StyleSheet } from 'react-native';
+import { createComponentTokensHook } from '../../design-system';
+const createTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    radii
+  } = foundations;
+  const onPrimary = palette.primary.foreground ?? '#ffffff';
+  const borderWidth = 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
+    }
+  };
+};
+export const usePaginationTokens = createComponentTokensHook('pagination', createTokens);