react-native-system-ui 0.0.1 → 0.0.2

package/dist/es/list/List.js

@@ -0,0 +1,145 @@
+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, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { Pressable, ScrollView, Text, View } from 'react-native';
+import { isFunction, isRenderable, isText, isUndefined } from '../../utils/validate';
+import { useLocale } from '../config-provider/useLocale';
+import Loading from '../loading';
+import { useListTokens } from './tokens';
+const List = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const locale = useLocale();
+  const {
+    onLoad,
+    loading,
+    error,
+    finished: finishedProp,
+    offset: offsetProp,
+    immediateCheck: immediateCheckProp,
+    loadingText: loadingTextProp,
+    finishedText,
+    errorText,
+    children,
+    contentContainerStyle,
+    tokensOverride,
+    onScroll,
+    onContentSizeChange,
+    onLayout,
+    scrollEventThrottle: scrollEventThrottleProp,
+    ScrollComponent = ScrollView,
+    ...scrollProps
+  } = props;
+  const tokens = useListTokens(tokensOverride);
+  const finished = finishedProp ?? tokens.defaults.finished;
+  const offset = offsetProp ?? tokens.defaults.offset;
+  const immediateCheck = immediateCheckProp ?? tokens.defaults.immediateCheck;
+  const horizontal = !!scrollProps.horizontal;
+  const loadingText = isUndefined(loadingTextProp) ? locale.loading : loadingTextProp;
+  const loadingControlled = !isUndefined(loading);
+  const errorControlled = !isUndefined(error);
+  const [innerLoading, setInnerLoading] = useState(false);
+  const [innerError, setInnerError] = useState(false);
+  const mergedLoading = loadingControlled ? !!loading : innerLoading;
+  const mergedError = errorControlled ? !!error : innerError;
+  const loadingRef = useRef(false);
+  const mergedLoadingRef = useRef(mergedLoading);
+  const mergedErrorRef = useRef(mergedError);
+  const containerMainSizeRef = useRef(0);
+  const contentMainSizeRef = useRef(0);
+  useEffect(() => {
+    mergedLoadingRef.current = mergedLoading;
+    mergedErrorRef.current = mergedError;
+  }, [mergedLoading, mergedError]);
+  const triggerLoad = useCallback(async isRetry => {
+    if (!onLoad || finished) return;
+    if (loadingRef.current || mergedLoadingRef.current) return;
+    if (mergedErrorRef.current && !isRetry) return;
+    loadingRef.current = true;
+    if (!loadingControlled) setInnerLoading(true);
+    if (!errorControlled) setInnerError(false);
+    try {
+      await Promise.resolve(onLoad(isRetry));
+    } catch {
+      if (!errorControlled) setInnerError(true);
+    } finally {
+      loadingRef.current = false;
+      if (!loadingControlled) setInnerLoading(false);
+    }
+  }, [errorControlled, finished, loadingControlled, onLoad]);
+  const check = useCallback(() => {
+    if (mergedLoadingRef.current || mergedErrorRef.current) return;
+    if (!containerMainSizeRef.current) return;
+    if (contentMainSizeRef.current <= containerMainSizeRef.current && !finished) {
+      triggerLoad(false);
+    }
+  }, [finished, triggerLoad]);
+  useImperativeHandle(ref, () => ({
+    check
+  }), [check]);
+  const handleScroll = useCallback(event => {
+    onScroll?.(event);
+    const {
+      layoutMeasurement,
+      contentOffset,
+      contentSize
+    } = event.nativeEvent;
+    const distance = horizontal ? contentSize.width - (layoutMeasurement.width + contentOffset.x) : contentSize.height - (layoutMeasurement.height + contentOffset.y);
+    if (distance <= offset) triggerLoad(false);
+  }, [horizontal, offset, onScroll, triggerLoad]);
+  const handleContentSizeChange = useCallback((width, height) => {
+    onContentSizeChange?.(width, height);
+    contentMainSizeRef.current = horizontal ? width : height;
+    if (immediateCheck) check();
+  }, [check, horizontal, immediateCheck, onContentSizeChange]);
+  const handleLayout = useCallback(event => {
+    onLayout?.(event);
+    const {
+      layout
+    } = event.nativeEvent;
+    containerMainSizeRef.current = horizontal ? layout.width : layout.height;
+    if (immediateCheck) check();
+  }, [check, horizontal, immediateCheck, onLayout]);
+  const retry = () => triggerLoad(true);
+  return /*#__PURE__*/React.createElement(ScrollComponent, _extends({}, scrollProps, {
+    onScroll: handleScroll,
+    scrollEventThrottle: scrollEventThrottleProp ?? tokens.defaults.scrollEventThrottle,
+    contentContainerStyle: contentContainerStyle,
+    onContentSizeChange: handleContentSizeChange,
+    onLayout: handleLayout
+  }), children, /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.footer, {
+      paddingVertical: tokens.spacing.footerPaddingVertical
+    }],
+    testID: "rv-list-footer"
+  }, mergedLoading ? isText(loadingText) ? /*#__PURE__*/React.createElement(Loading, {
+    size: tokens.sizing.loadingIndicator,
+    testID: "rv-list-loading"
+  }, loadingText) : /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.loadingInline,
+    testID: "rv-list-loading"
+  }, /*#__PURE__*/React.createElement(Loading, {
+    size: tokens.sizing.loadingIndicator
+  }), loadingText && /*#__PURE__*/React.createElement(View, {
+    style: {
+      marginLeft: tokens.spacing.inlineGap
+    }
+  }, loadingText)) : null, mergedError ? isFunction(errorText) ? errorText(retry) : isRenderable(errorText) ? isText(errorText) ? /*#__PURE__*/React.createElement(Text, {
+    testID: "rv-list-error",
+    onPress: retry,
+    accessibilityRole: "button",
+    style: {
+      color: tokens.colors.errorText
+    }
+  }, errorText) : /*#__PURE__*/React.createElement(Pressable, {
+    testID: "rv-list-error",
+    onPress: retry,
+    accessibilityRole: "button"
+  }, errorText) : null : null, finished && !mergedLoading && !mergedError && isRenderable(finishedText) ? isText(finishedText) ? /*#__PURE__*/React.createElement(Text, {
+    testID: "rv-list-finished",
+    style: {
+      color: tokens.colors.finishedText
+    }
+  }, finishedText) : /*#__PURE__*/React.createElement(View, {
+    testID: "rv-list-finished"
+  }, finishedText) : null));
+});
+List.displayName = 'List';
+export default List;

package/dist/es/loading/Loading.js

@@ -0,0 +1,186 @@
+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, useRef } from 'react';
+import { Animated, Easing, Text, View } from 'react-native';
+import { nativeDriverEnabled } from '../../platform';
+import { withAlpha } from '../../utils/color';
+import { isText } from '../../utils/validate';
+import { useLoadingTokens } from './tokens';
+export const Loading = props => {
+  const {
+    tokensOverride,
+    color: colorProp,
+    size: sizeProp,
+    textSize: textSizeProp,
+    textColor: textColorProp,
+    type: typeProp,
+    vertical: verticalProp,
+    style,
+    textStyle,
+    contentStyle,
+    children,
+    ...rest
+  } = props;
+  const tokens = useLoadingTokens(tokensOverride);
+  const color = colorProp ?? tokens.colors.indicator;
+  const size = sizeProp ?? tokens.defaults.size;
+  const textSize = textSizeProp ?? tokens.defaults.textSize;
+  const textColor = textColorProp ?? tokens.colors.text;
+  const type = typeProp ?? tokens.defaults.type;
+  const vertical = verticalProp ?? tokens.defaults.vertical;
+  const spinValue = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    if (type === 'spinner' || type === 'circular' || type === 'ball') {
+      spinValue.setValue(0);
+      const animation = Animated.loop(Animated.timing(spinValue, {
+        toValue: 1,
+        duration: 1000,
+        easing: Easing.linear,
+        useNativeDriver: nativeDriverEnabled
+      }));
+      animation.start();
+      return () => animation.stop();
+    }
+    return undefined;
+  }, [type]);
+  const rotateValue = spinValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg']
+  });
+  const renderCircular = () => {
+    const thickness = Math.max(2, Math.min(size / 8, 6));
+    const trackColor = withAlpha(color, 0.2);
+    return /*#__PURE__*/React.createElement(Animated.View, {
+      testID: "rv-loading-circular",
+      style: {
+        width: size,
+        height: size,
+        transform: [{
+          rotate: rotateValue
+        }]
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      pointerEvents: "none",
+      style: {
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        borderWidth: thickness,
+        borderColor: trackColor,
+        borderTopColor: color
+      }
+    }));
+  };
+  const renderSpinner = () => {
+    const innerGap = Math.min(size / 2 - 1, Math.max(0, tokens.sizing.spinner.innerGapRatio * size));
+    const lineWidth = Math.max(1, Math.min(size / 3, size / tokens.defaults.size * tokens.sizing.spinner.lineWidth));
+    const scaledLength = size / tokens.defaults.size * tokens.sizing.spinner.lineLength;
+    const maxLength = Math.max(2, size / 2 - innerGap);
+    const lineLength = Math.max(2, Math.min(maxLength, Math.max(tokens.sizing.spinner.lineLength, scaledLength)));
+    return /*#__PURE__*/React.createElement(Animated.View, {
+      testID: "rv-loading-spinner",
+      style: {
+        width: size,
+        height: size,
+        transform: [{
+          rotate: rotateValue
+        }]
+      }
+    }, Array.from({
+      length: tokens.sizing.spinner.itemCount
+    }, (_, index) => {
+      const angle = index * 360 / tokens.sizing.spinner.itemCount;
+      const opacity = 0.2 + index / tokens.sizing.spinner.itemCount * 0.8;
+      return /*#__PURE__*/React.createElement(View, {
+        key: index,
+        pointerEvents: "none",
+        style: [tokens.layout.spinnerItem, {
+          transform: [{
+            rotate: `${angle}deg`
+          }]
+        }]
+      }, /*#__PURE__*/React.createElement(View, {
+        style: [{
+          width: lineWidth,
+          height: lineLength,
+          borderRadius: lineWidth / 2,
+          backgroundColor: color,
+          opacity,
+          marginTop: size / 2 - lineLength - innerGap
+        }]
+      }));
+    }));
+  };
+  const renderBall = () => {
+    const itemCount = tokens.sizing.ball.itemCount;
+    const dotSize = Math.max(2, Math.round(size * tokens.sizing.ball.dotSizeRatio));
+    const gap = Math.max(1, Math.round(size * tokens.sizing.ball.gapRatio));
+    const totalWidth = dotSize * itemCount + gap * (itemCount - 1);
+    const pulseWidth = 0.4 / itemCount;
+    return /*#__PURE__*/React.createElement(View, {
+      testID: "rv-loading-ball",
+      style: {
+        width: totalWidth,
+        height: size,
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      }
+    }, Array.from({
+      length: itemCount
+    }, (_, index) => {
+      const center = (index + 0.5) / itemCount;
+      const left = Math.max(0, center - pulseWidth);
+      const right = Math.min(1, center + pulseWidth);
+      const scale = spinValue.interpolate({
+        inputRange: [0, left, center, right, 1],
+        outputRange: [tokens.sizing.ball.dotScaleMin, tokens.sizing.ball.dotScaleMin, 1, tokens.sizing.ball.dotScaleMin, tokens.sizing.ball.dotScaleMin]
+      });
+      const opacity = spinValue.interpolate({
+        inputRange: [0, left, center, right, 1],
+        outputRange: [0.4, 0.4, 1, 0.4, 0.4]
+      });
+      return /*#__PURE__*/React.createElement(Animated.View, {
+        key: index,
+        pointerEvents: "none",
+        style: {
+          width: dotSize,
+          height: dotSize,
+          borderRadius: dotSize / 2,
+          backgroundColor: color,
+          marginRight: index === itemCount - 1 ? 0 : gap,
+          opacity,
+          transform: [{
+            scale
+          }]
+        }
+      });
+    })));
+  };
+  const indicator = type === 'spinner' ? renderSpinner() : type === 'ball' ? renderBall() : renderCircular();
+  const hasChildren = children !== undefined && children !== null && children !== false;
+  const textSpacingStyle = {
+    marginLeft: vertical ? 0 : tokens.spacing.gap,
+    marginTop: vertical ? tokens.spacing.gap : 0
+  };
+  const textNode = hasChildren && (isText(children) ? /*#__PURE__*/React.createElement(Text, {
+    style: [tokens.layout.text, textSpacingStyle, {
+      fontSize: textSize,
+      color: textColor
+    }, textStyle]
+  }, children) : /*#__PURE__*/React.createElement(View, {
+    style: textSpacingStyle
+  }, children));
+  return /*#__PURE__*/React.createElement(View, _extends({
+    style: [tokens.layout.container, {
+      flexDirection: vertical ? 'column' : 'row',
+      justifyContent: vertical ? 'center' : 'flex-start'
+    }, style]
+  }, rest), /*#__PURE__*/React.createElement(View, {
+    style: contentStyle
+  }, indicator), textNode);
+};
+Loading.displayName = 'Loading';

package/dist/es/nav-bar/NavBar.js

@@ -0,0 +1,182 @@
+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, { useCallback, useState } from 'react';
+import { Pressable, SafeAreaView, Text, View } from 'react-native';
+import { ArrowLeft } from 'react-native-system-icon';
+import { useAriaPress } from '../../hooks';
+import { createHairlineBorderBottom } from '../../utils/hairline';
+import { isRenderable, isText } from '../../utils/validate';
+import { useNavBarTokens } from './tokens';
+const NavBarBase = props => {
+  const {
+    tokensOverride,
+    title,
+    description,
+    children,
+    leftText,
+    rightText,
+    leftIcon,
+    rightIcon,
+    leftArrow: leftArrowProp,
+    fixed: fixedProp,
+    placeholder: placeholderProp,
+    zIndex: zIndexProp,
+    border: borderProp,
+    safeAreaInsetTop: safeAreaInsetTopProp,
+    background: backgroundProp,
+    tintColor,
+    titleStyle,
+    descriptionStyle,
+    sideStyle,
+    onPressLeft,
+    onClickLeft,
+    onPressRight,
+    onClickRight,
+    style,
+    ...rest
+  } = props;
+  const tokens = useNavBarTokens(tokensOverride);
+  const leftArrow = leftArrowProp ?? tokens.defaults.leftArrow;
+  const fixed = fixedProp ?? tokens.defaults.fixed;
+  const placeholder = placeholderProp ?? tokens.defaults.placeholder;
+  const zIndex = zIndexProp ?? tokens.defaults.zIndex;
+  const border = borderProp ?? tokens.defaults.border;
+  const safeAreaInsetTop = safeAreaInsetTopProp ?? fixed;
+  const background = backgroundProp ?? tokens.colors.background;
+  const handlePressLeft = onPressLeft ?? onClickLeft;
+  const handlePressRight = onPressRight ?? onClickRight;
+  const [height, setHeight] = useState(tokens.sizing.height);
+  const enablePlaceholder = fixed && placeholder;
+  const handleLayout = useCallback(event => {
+    if (!enablePlaceholder) return;
+    const nextHeight = event.nativeEvent.layout.height;
+    setHeight(prev => Math.abs(prev - nextHeight) < 0.5 ? prev : nextHeight);
+  }, [enablePlaceholder]);
+  const resolvedColor = tintColor ?? tokens.colors.text;
+  const sideColor = tintColor ?? tokens.colors.icon;
+  const leftAccessibilityLabel = isText(leftText) ? String(leftText) : '返回';
+  const rightAccessibilityLabel = isText(rightText) ? String(rightText) : '操作';
+  const leftPress = useAriaPress({
+    disabled: !handlePressLeft,
+    onPress: handlePressLeft,
+    extraProps: {
+      accessibilityRole: 'button',
+      accessibilityLabel: leftAccessibilityLabel
+    }
+  });
+  const rightPress = useAriaPress({
+    disabled: !handlePressRight,
+    onPress: handlePressRight,
+    extraProps: {
+      accessibilityRole: 'button',
+      accessibilityLabel: rightAccessibilityLabel
+    }
+  });
+  const renderLeft = () => {
+    const arrowNode = leftArrow === true ? /*#__PURE__*/React.createElement(ArrowLeft, {
+      size: 18,
+      fill: sideColor,
+      color: sideColor
+    }) : isRenderable(leftArrow) && leftArrow;
+    const hasAction = !!handlePressLeft || isRenderable(arrowNode) || isRenderable(leftText) || isRenderable(leftIcon);
+    if (!hasAction) {
+      return /*#__PURE__*/React.createElement(View, {
+        style: tokens.layout.sidePlaceholder
+      });
+    }
+    const content = /*#__PURE__*/React.createElement(React.Fragment, null, arrowNode, leftIcon, isRenderable(leftText) ? isText(leftText) ? /*#__PURE__*/React.createElement(Text, {
+      numberOfLines: 1,
+      style: [tokens.layout.sideText, {
+        color: sideColor
+      }]
+    }, leftText) : leftText : null);
+    if (!handlePressLeft) {
+      return /*#__PURE__*/React.createElement(View, {
+        testID: "rv-navbar-left",
+        style: [tokens.layout.side, sideStyle]
+      }, content);
+    }
+    return /*#__PURE__*/React.createElement(Pressable, _extends({
+      hitSlop: {
+        top: 8,
+        right: 8,
+        bottom: 8,
+        left: 8
+      },
+      testID: "rv-navbar-left",
+      style: [tokens.layout.side, sideStyle]
+    }, leftPress.interactionProps), content);
+  };
+  const renderRight = () => {
+    const hasAction = !!handlePressRight || isRenderable(rightText) || isRenderable(rightIcon);
+    if (!hasAction) {
+      return /*#__PURE__*/React.createElement(View, {
+        style: tokens.layout.sidePlaceholder
+      });
+    }
+    const content = /*#__PURE__*/React.createElement(React.Fragment, null, isRenderable(rightText) ? isText(rightText) ? /*#__PURE__*/React.createElement(Text, {
+      numberOfLines: 1,
+      style: [tokens.layout.sideText, {
+        color: sideColor
+      }]
+    }, rightText) : rightText : null, rightIcon);
+    if (!handlePressRight) {
+      return /*#__PURE__*/React.createElement(View, {
+        testID: "rv-navbar-right",
+        style: [tokens.layout.side, tokens.layout.rightAlign, sideStyle]
+      }, content);
+    }
+    return /*#__PURE__*/React.createElement(Pressable, _extends({
+      hitSlop: {
+        top: 8,
+        right: 8,
+        bottom: 8,
+        left: 8
+      },
+      testID: "rv-navbar-right",
+      style: [tokens.layout.side, tokens.layout.rightAlign, sideStyle]
+    }, rightPress.interactionProps), content);
+  };
+  const centerContent = isRenderable(children) ? children : /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.titleWrapper
+  }, isRenderable(title) ? isText(title) ? /*#__PURE__*/React.createElement(Text, {
+    style: [tokens.layout.title, {
+      color: resolvedColor,
+      fontSize: tokens.typography.titleSize,
+      fontWeight: tokens.typography.titleWeight
+    }, titleStyle],
+    numberOfLines: 1
+  }, title) : title : null, isRenderable(description) ? isText(description) ? /*#__PURE__*/React.createElement(Text, {
+    style: [tokens.layout.description, {
+      color: tintColor ?? tokens.colors.description,
+      fontSize: tokens.typography.descriptionSize
+    }, descriptionStyle],
+    numberOfLines: 1
+  }, description) : description : null);
+  const bar = /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.bar, {
+      backgroundColor: background
+    }, border ? createHairlineBorderBottom(tokens.colors.border) : null],
+    onLayout: safeAreaInsetTop ? undefined : handleLayout
+  }, renderLeft(), /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.center
+  }, centerContent), renderRight());
+  const wrapped = safeAreaInsetTop ? /*#__PURE__*/React.createElement(SafeAreaView, {
+    onLayout: handleLayout,
+    style: {
+      backgroundColor: background
+    }
+  }, bar) : bar;
+  const navContent = /*#__PURE__*/React.createElement(View, _extends({}, rest, {
+    style: [tokens.layout.container, fixed && [tokens.layout.fixed, {
+      zIndex
+    }], style]
+  }), wrapped);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, enablePlaceholder ? /*#__PURE__*/React.createElement(View, {
+    testID: "rv-navbar-placeholder",
+    style: {
+      height
+    }
+  }) : null, navContent);
+};
+NavBarBase.displayName = 'NavBar';
+export default NavBarBase;

package/dist/es/nav-bar/tokens.js

@@ -0,0 +1,83 @@
+import { Platform } from 'react-native';
+import { createComponentTokensHook } from '../../design-system';
+export const createNavBarTokens = ({
+  palette,
+  spacing,
+  fontSize
+}) => {
+  const fixedPosition = Platform.OS === 'web' ? 'fixed' : 'absolute';
+  return {
+    defaults: {
+      fixed: false,
+      placeholder: false,
+      border: true,
+      safeAreaInsetTop: false,
+      leftArrow: false,
+      zIndex: 1
+    },
+    layout: {
+      container: {
+        width: '100%'
+      },
+      bar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        minHeight: 48,
+        paddingHorizontal: spacing.md
+      },
+      center: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 12
+      },
+      side: {
+        minWidth: 60,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4
+      },
+      rightAlign: {
+        justifyContent: 'flex-end'
+      },
+      sidePlaceholder: {
+        minWidth: 60
+      },
+      sideText: {
+        fontSize: 16
+      },
+      titleWrapper: {
+        alignItems: 'center'
+      },
+      title: {
+        includeFontPadding: false
+      },
+      description: {
+        marginTop: 2,
+        includeFontPadding: false
+      },
+      fixed: {
+        position: fixedPosition,
+        top: 0,
+        left: 0,
+        right: 0
+      }
+    },
+    colors: {
+      background: '#ffffff',
+      text: palette.default[900],
+      description: palette.default[500],
+      border: palette.default[200],
+      icon: palette.default[700]
+    },
+    typography: {
+      titleSize: fontSize.lg,
+      titleWeight: '600',
+      descriptionSize: fontSize.sm
+    },
+    sizing: {
+      height: 52
+    }
+  };
+};
+export const useNavBarTokens = createComponentTokensHook('navBar', createNavBarTokens);