react-native-system-ui 0.0.4 → 0.0.6

package/dist/es/components/swiper/SwiperItem.js

@@ -1,21 +1 @@
-import React, { forwardRef } from 'react';
-import { View, StyleSheet } from 'react-native';
-const SwiperItem = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    style,
-    children,
-    testID
-  } = props;
-  return /*#__PURE__*/React.createElement(View, {
-    ref: ref,
-    style: [styles.item, style],
-    testID: testID
-  }, children);
-});
-SwiperItem.displayName = 'SwiperItem';
-const styles = StyleSheet.create({
-  item: {
-    flex: 1
-  }
-});
-export default SwiperItem;
+export { SwiperItem as default } from './Swiper';

package/dist/es/components/swiper/tokens.js

@@ -0,0 +1,5 @@
+import { createComponentTokensHook } from '../../design-system';
+const createSwiperTokens = _foundations => {
+  return {};
+};
+export const useSwiperTokens = createComponentTokensHook('swiper', createSwiperTokens);

package/dist/es/components/switch/Switch.js

@@ -1,16 +1,11 @@
-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 { ActivityIndicator, Animated, Easing, Pressable, View } from 'react-native';
-import { nativeDriverEnabled } from '../../platform';
-import { useAriaPress, useControllableValue } from '../../hooks';
+import React, { useCallback, useMemo } from 'react';
+import { Switch as RNSwitch } from 'react-native';
+import { useControllableValue } from '../../hooks';
 import { parseNumber } from '../../utils';
 import { useSwitchTokens } from './tokens';
-const AnimatedHandle = Animated.createAnimatedComponent(View);
-const switchEasing = Easing.bezier(0.25, 0.1, 0.25, 1);
 const SwitchImpl = props => {
   const {
     disabled: disabledProp,
-    loading: loadingProp,
     size,
     activeColor,
     inactiveColor,
@@ -18,25 +13,27 @@ const SwitchImpl = props => {
     inactiveValue: inactiveValueProp,
     tokensOverride,
     onClick,
-    style,
-    ...rest
+    style
   } = props;
   const tokens = useSwitchTokens(tokensOverride);
   const disabled = disabledProp ?? tokens.defaults.disabled;
-  const loading = loadingProp ?? tokens.defaults.loading;
-  const activeValue = activeValueProp ?? tokens.defaults.activeValue;
-  const inactiveValue = inactiveValueProp ?? tokens.defaults.inactiveValue;
-  const resolvedSize = Math.max(0, parseNumber(size, tokens.defaults.size));
-  const borderWidth = tokens.borders.width;
-  const inset = Math.max(0, tokens.spacing.inset);
-  const trackHeight = resolvedSize;
-  const trackWidth = trackHeight * 2;
-  const trackRadius = trackHeight / 2;
-  const innerHeight = Math.max(0, trackHeight - borderWidth * 2);
-  const innerWidth = Math.max(0, trackWidth - borderWidth * 2);
-  const handleSize = Math.max(0, innerHeight - inset * 2);
-  const handleRadius = handleSize / 2;
-  const translateDistance = Math.max(0, innerWidth - handleSize - inset * 2);
+  const activeValue = useMemo(() => activeValueProp ?? tokens.defaults.activeValue, [activeValueProp, tokens.defaults.activeValue]);
+  const inactiveValue = useMemo(() => inactiveValueProp ?? tokens.defaults.inactiveValue, [inactiveValueProp, tokens.defaults.inactiveValue]);
+  const scale = useMemo(() => {
+    if (!tokens.defaults.size) return 1;
+    if (typeof size === 'string') {
+      const value = size.toLowerCase();
+      if (value === 'sm') return 0.75;
+      if (value === 'md') return 1;
+      if (value === 'lg') return 1.25;
+      const numeric = parseNumber(size, tokens.defaults.size);
+      return Math.max(0, numeric / tokens.defaults.size);
+    }
+    if (typeof size === 'number') {
+      return Math.max(0, size / tokens.defaults.size);
+    }
+    return 1;
+  }, [size, tokens.defaults.size]);
   const [value, triggerChange] = useControllableValue(props, {
     valuePropName: 'checked',
     defaultValuePropName: 'defaultChecked',
@@ -44,93 +41,44 @@ const SwitchImpl = props => {
     trigger: 'onChange'
   });
   const isChecked = Object.is(value, activeValue);
-  const progress = useRef(new Animated.Value(isChecked ? 1 : 0)).current;
-  const colorProgress = useRef(new Animated.Value(isChecked ? 1 : 0)).current;
-  useEffect(() => {
-    const toValue = isChecked ? 1 : 0;
-    progress.stopAnimation();
-    colorProgress.stopAnimation();
-    const animation = Animated.parallel([Animated.timing(progress, {
-      toValue,
-      duration: tokens.animation.duration,
-      easing: switchEasing,
-      useNativeDriver: nativeDriverEnabled
-    }), Animated.timing(colorProgress, {
-      toValue,
-      duration: tokens.animation.duration,
-      easing: switchEasing,
-      useNativeDriver: false
-    })]);
-    animation.start();
-    return () => animation.stop();
-  }, [colorProgress, isChecked, progress, tokens.animation.duration]);
-  const translateX = progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, translateDistance]
-  });
-  const resolvedActiveColor = activeColor ?? tokens.colors.activeTrack;
-  const resolvedInactiveColor = inactiveColor ?? tokens.colors.inactiveTrack;
-  const trackColor = isChecked ? resolvedActiveColor : resolvedInactiveColor;
-  const animatedTrackColor = colorProgress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [resolvedInactiveColor, resolvedActiveColor]
-  });
-  const handlePress = event => {
+  const resolvedActiveColor = useMemo(() => activeColor ?? tokens.colors.activeTrack, [activeColor, tokens.colors.activeTrack]);
+  const resolvedInactiveColor = useMemo(() => inactiveColor ?? tokens.colors.inactiveTrack, [inactiveColor, tokens.colors.inactiveTrack]);
+  const handleTouchEnd = useCallback(event => {
     if (disabled) return;
     onClick?.(event);
-    if (loading) return;
+  }, [disabled, onClick]);
+  const handleValueChange = useCallback(() => {
+    if (disabled) return;
     const next = isChecked ? inactiveValue : activeValue;
     if (Object.is(next, value)) return;
     triggerChange(next);
-  };
-  const {
-    interactionProps
-  } = useAriaPress({
-    disabled,
-    onPress: handlePress,
-    extraProps: rest
-  });
-  return /*#__PURE__*/React.createElement(Pressable, _extends({}, interactionProps, {
+  }, [activeValue, disabled, inactiveValue, isChecked, triggerChange, value]);
+  return /*#__PURE__*/React.createElement(RNSwitch, {
+    value: isChecked,
+    disabled: disabled,
+    trackColor: {
+      false: resolvedInactiveColor,
+      true: resolvedActiveColor
+    },
+    thumbColor: tokens.colors.handle,
+    ios_backgroundColor: resolvedInactiveColor,
+    style: [{
+      transform: [{
+        scaleX: scale
+      }, {
+        scaleY: scale
+      }]
+    }, {
+      opacity: disabled ? tokens.opacity.disabled : 1
+    }, style],
     accessibilityRole: "switch",
     accessibilityState: {
       checked: isChecked,
       disabled
     },
-    disabled: disabled,
-    style: ({
-      pressed
-    }) => [tokens.layout.container, {
-      opacity: disabled ? tokens.opacity.disabled : pressed ? tokens.opacity.pressed : 1
-    }, style]
-  }), /*#__PURE__*/React.createElement(Animated.View, {
-    style: [tokens.layout.track, {
-      width: trackWidth,
-      height: trackHeight,
-      borderRadius: trackRadius,
-      backgroundColor: animatedTrackColor,
-      borderWidth,
-      borderColor: tokens.colors.border
-    }, {
-      pointerEvents: 'none'
-    }]
-  }, /*#__PURE__*/React.createElement(AnimatedHandle, {
-    style: [tokens.layout.handleOuter, tokens.layout.handleInner, {
-      width: handleSize,
-      height: handleSize,
-      borderRadius: handleRadius,
-      top: inset,
-      left: inset,
-      transform: [{
-        translateX
-      }],
-      backgroundColor: tokens.colors.handle,
-      borderWidth,
-      borderColor: tokens.colors.border
-    }]
-  }, loading && /*#__PURE__*/React.createElement(ActivityIndicator, {
-    size: tokens.loader.size,
-    color: trackColor
-  }))));
+    onValueChange: handleValueChange,
+    onTouchEnd: handleTouchEnd
+  });
 };
 export const Switch = /*#__PURE__*/React.memo(SwitchImpl);
 Switch.displayName = 'Switch';

package/dist/es/components/switch/tokens.js

@@ -1,72 +1,24 @@
 import { createComponentTokensHook } from '../../design-system';
-import { StyleSheet } from 'react-native';
 const createSwitchTokens = foundations => {
   const {
     palette,
     opacity
   } = foundations;
-  const borderWidth = StyleSheet.hairlineWidth;
   return {
     defaults: {
       size: 28,
       disabled: false,
-      loading: false,
       activeValue: true,
       inactiveValue: false
     },
-    spacing: {
-      inset: 1
-    },
-    layout: {
-      container: {
-        flexDirection: 'row',
-        alignItems: 'center'
-      },
-      track: {
-        position: 'relative'
-      },
-      handleOuter: {
-        position: 'absolute'
-      },
-      handleInner: {
-        alignItems: 'center',
-        justifyContent: 'center'
-      }
-    },
     colors: {
       activeTrack: palette.primary[500],
       inactiveTrack: palette.default[200],
-      handle: '#ffffff',
-      border: palette.default[300]
-    },
-    borders: {
-      width: borderWidth
+      handle: '#ffffff'
     },
     opacity: {
       disabled: opacity.disabled,
       pressed: opacity.pressed
-    },
-    animation: {
-      duration: 200
-    },
-    shadow: {
-      outer: {
-        color: '#000000',
-        opacity: 0.06,
-        radius: 3,
-        offsetY: 3,
-        elevation: 3
-      },
-      inner: {
-        color: '#000000',
-        opacity: 0.12,
-        radius: 2,
-        offsetY: 2,
-        elevation: 2
-      }
-    },
-    loader: {
-      size: 12
     }
   };
 };

package/dist/es/components/tabbar/Tabbar.js

@@ -1,5 +1,5 @@
 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 React, { useCallback, useMemo, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { mergeTokensOverride } from '../../design-system';
 import { useControllableValue } from '../../hooks';
@@ -34,16 +34,16 @@ const TabbarBase = props => {
   const placeholder = placeholderProp ?? tokens.defaults.placeholder;
   const iconSize = iconSizeProp ?? tokens.icon.size;
   const enableSafeAreaInsetBottom = safeAreaInsetBottom ?? fixed;
-  const items = React.Children.toArray(children).filter(React.isValidElement);
-  const firstName = items.length ? items[0].props.name ?? 0 : undefined;
+  const items = useMemo(() => React.Children.toArray(children).filter(React.isValidElement), [children]);
+  const firstName = useMemo(() => items.length ? items[0].props.name ?? 0 : undefined, [items]);
   const [activeValue, setActiveValue] = useControllableValue(props, {
     defaultValue: firstName,
     valuePropName: 'value',
     defaultValuePropName: 'defaultValue',
     trigger: 'onChange'
   });
-  const itemNames = items.map((item, index) => item.props.name ?? index);
-  const currentName = activeValue === undefined || activeValue === null ? firstName : itemNames.some(name => name === activeValue) ? activeValue : firstName;
+  const itemNames = useMemo(() => items.map((item, index) => item.props.name ?? index), [items]);
+  const currentName = useMemo(() => activeValue === undefined || activeValue === null ? firstName : itemNames.some(name => name === activeValue) ? activeValue : firstName, [activeValue, firstName, itemNames]);
   const [barHeight, setBarHeight] = useState(tokens.layout.height);
   const enablePlaceholder = fixed && placeholder;
   const handleLayout = useCallback(event => {
@@ -52,15 +52,15 @@ const TabbarBase = props => {
     setBarHeight(prev => Math.abs(prev - nextHeight) < 0.5 ? prev : nextHeight);
   }, [enablePlaceholder]);
   const onSelect = useCallback((name, index) => setActiveValue(name, index), [setActiveValue]);
-  const contextValue = {
+  const contextValue = useMemo(() => ({
     activeValue: currentName,
     activeColor: activeColor ?? tokens.colors.active,
     inactiveColor: inactiveColor ?? tokens.colors.inactive,
     fontSize: tokens.typography.fontSize,
     fontWeight: tokens.typography.fontWeight,
     onSelect
-  };
-  const clonedChildren = items.map((item, index) => {
+  }), [activeColor, currentName, inactiveColor, onSelect, tokens.colors.active, tokens.colors.inactive, tokens.typography.fontSize, tokens.typography.fontWeight]);
+  const clonedChildren = useMemo(() => items.map((item, index) => {
     const name = item.props.name ?? index;
     return /*#__PURE__*/React.cloneElement(item, {
       key: item.key ?? name,
@@ -69,31 +69,35 @@ const TabbarBase = props => {
       iconSize,
       tokensOverride: mergeTokensOverride(tokensOverride, item.props.tokensOverride)
     });
-  });
+  }), [iconSize, items, tokensOverride]);
   if (items.length === 0) return null;
   const ContentWrapper = enableSafeAreaInsetBottom ? SafeAreaView : View;
+  const placeholderStyle = useMemo(() => ({
+    height: barHeight
+  }), [barHeight]);
+  const containerStyle = useMemo(() => [styles.container, fixed && [styles.fixed, {
+    zIndex
+  }], style], [fixed, style, zIndex]);
+  const barStyle = useMemo(() => [styles.bar, {
+    backgroundColor: background,
+    paddingHorizontal: tokens.layout.paddingHorizontal,
+    minHeight: tokens.layout.height
+  }, border ? createHairlineBorderTop(tokens.colors.border) : null, contentStyle], [background, border, contentStyle, tokens.colors.border, tokens.layout.height, tokens.layout.paddingHorizontal]);
+  const rowStyle = useMemo(() => [styles.row, {
+    minHeight: tokens.layout.height
+  }], [tokens.layout.height]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, enablePlaceholder && /*#__PURE__*/React.createElement(View, {
     testID: "rv-tabbar-placeholder",
-    style: {
-      height: barHeight
-    }
+    style: placeholderStyle
   }), /*#__PURE__*/React.createElement(View, _extends({}, rest, {
-    style: [styles.container, fixed && [styles.fixed, {
-      zIndex
-    }], style],
+    style: containerStyle,
     onLayout: handleLayout
   }), /*#__PURE__*/React.createElement(ContentWrapper, {
-    style: [styles.bar, {
-      backgroundColor: background,
-      paddingHorizontal: tokens.layout.paddingHorizontal,
-      minHeight: tokens.layout.height
-    }, border ? createHairlineBorderTop(tokens.colors.border) : null, contentStyle]
+    style: barStyle
   }, /*#__PURE__*/React.createElement(TabbarContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles.row, {
-      minHeight: tokens.layout.height
-    }],
+    style: rowStyle,
     accessibilityRole: "tablist"
   }, clonedChildren)))));
 };

package/dist/es/components/tabbar/TabbarItem.js

@@ -1,5 +1,5 @@
 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 from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 import { useAriaPress } from '../../hooks';
 import { isFunction, isPlainObject, isRenderable, isText } from '../../utils/validate';
@@ -33,7 +33,7 @@ const TabbarItem = props => {
   const isActive = context.activeValue === itemName;
   const color = isActive ? context.activeColor : context.inactiveColor;
   const resolvedIconSize = iconSize ?? tokens.icon.size;
-  const applyIconTheme = node => {
+  const applyIconTheme = useCallback(node => {
     if (! /*#__PURE__*/React.isValidElement(node)) return node;
     const element = node;
     const nextProps = {};
@@ -47,15 +47,13 @@ const TabbarItem = props => {
       }];
     }
     return /*#__PURE__*/React.cloneElement(element, nextProps);
-  };
-  const renderIcon = () => {
+  }, [color, resolvedIconSize]);
+  const renderIcon = useCallback(() => {
     if (!icon) return null;
     const raw = isFunction(icon) ? icon(isActive) : icon;
     return applyIconTheme(raw);
-  };
-  const renderLabel = () => {
-    return isFunction(children) ? children(isActive) : children;
-  };
+  }, [applyIconTheme, icon, isActive]);
+  const renderLabel = useCallback(() => isFunction(children) ? children(isActive) : children, [children, isActive]);
   const ariaPress = useAriaPress({
     disabled,
     onPress: () => {
@@ -73,8 +71,8 @@ const TabbarItem = props => {
       testID: testID ?? `rv-tabbar-item-${itemName}`
     }
   });
-  const shouldRenderBadge = dot || isRenderable(badge);
-  const renderBadge = () => {
+  const shouldRenderBadge = useMemo(() => dot || isRenderable(badge), [badge, dot]);
+  const renderBadge = useCallback(() => {
     if (isRenderable(badge)) {
       if (isText(badge)) {
         return /*#__PURE__*/React.createElement(Badge, {
@@ -92,24 +90,26 @@ const TabbarItem = props => {
     return /*#__PURE__*/React.createElement(Badge, {
       dot: true
     });
-  };
+  }, [badge, dot]);
+  const itemStyle = useMemo(() => [styles.item, {
+    height: tokens.layout.height,
+    paddingVertical: tokens.layout.paddingVertical,
+    opacity: disabled ? 0.5 : 1
+  }, style], [disabled, style, tokens.layout.height, tokens.layout.paddingVertical]);
+  const labelStyle = useMemo(() => [styles.label, {
+    color,
+    fontSize: context.fontSize,
+    fontWeight: context.fontWeight,
+    lineHeight: context.fontSize
+  }, textStyle], [color, context.fontSize, context.fontWeight, textStyle]);
   return /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, ariaPress.interactionProps, {
-    style: [styles.item, {
-      height: tokens.layout.height,
-      paddingVertical: tokens.layout.paddingVertical,
-      opacity: disabled ? 0.5 : 1
-    }, style]
+    style: itemStyle
   }), /*#__PURE__*/React.createElement(View, {
     style: [styles.iconWrapper, iconStyle]
   }, renderIcon(), shouldRenderBadge && /*#__PURE__*/React.createElement(View, {
     style: styles.badge
   }, renderBadge())), isRenderable(children) ? /*#__PURE__*/React.createElement(Text, {
-    style: [styles.label, {
-      color,
-      fontSize: context.fontSize,
-      fontWeight: context.fontWeight,
-      lineHeight: context.fontSize
-    }, textStyle]
+    style: labelStyle
   }, renderLabel()) : null);
 };
 const styles = StyleSheet.create({

package/dist/es/components/tabbar/tokens.js

@@ -9,7 +9,6 @@ const createTokens = foundations => {
     defaults: {
       fixed: true,
       border: true,
-      // 与 Vant 默认一致：placeholder 默认关闭；safe-area 由 Tabbar 在 fixed 时默认开启
       placeholder: false,
       safeAreaInsetBottom: false
     },
@@ -20,7 +19,6 @@ const createTokens = foundations => {
       inactive: palette.default[600]
     },
     layout: {
-      // 对齐官方默认观感（Vant Tabbar）：50 高度、无左右 padding
       height: 50,
       paddingHorizontal: 0,
       paddingVertical: spacing.xs