react-native-system-ui 0.0.1 → 0.0.3

package/dist/es/components/pull-refresh/PullRefresh.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, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, PanResponder, Platform, RefreshControl, ScrollView, StyleSheet, Text, View } from 'react-native';
 import { nativeDriverEnabled } from '../../platform';
 import { parseNumberLike } from '../../utils/number';
@@ -34,23 +34,26 @@ const PullRefresh = /*#__PURE__*/React.forwardRef((props, ref) => {
     colors,
     sizing
   } = tokens;
-  const translateY = React.useRef(new Animated.Value(0)).current;
-  const headHeightNumber = Math.max(0, parseNumberLike(headHeight, sizing.headHeight) ?? sizing.headHeight);
-  const pullDistanceNumber = Math.max(0, parseNumberLike(pullDistance, headHeightNumber) ?? headHeightNumber);
-  const successDurationMs = Math.max(0, parseNumberLike(successDuration, DEFAULT_SUCCESS_DURATION) ?? DEFAULT_SUCCESS_DURATION);
-  const animationDurationMs = Math.max(0, parseNumberLike(animationDuration, 300) ?? 300);
+  const translateY = useRef(new Animated.Value(0)).current;
+  const headHeightNumber = useMemo(() => Math.max(0, parseNumberLike(headHeight, sizing.headHeight) ?? sizing.headHeight), [headHeight, sizing.headHeight]);
+  const pullDistanceNumber = useMemo(() => Math.max(0, parseNumberLike(pullDistance, headHeightNumber) ?? headHeightNumber), [headHeightNumber, pullDistance]);
+  const successDurationMs = useMemo(() => Math.max(0, parseNumberLike(successDuration, DEFAULT_SUCCESS_DURATION) ?? DEFAULT_SUCCESS_DURATION), [successDuration]);
+  const animationDurationMs = useMemo(() => Math.max(0, parseNumberLike(animationDuration, 300) ?? 300), [animationDuration]);
   const isControlled = !isUndefined(refreshing);
-  const [innerRefreshing, setInnerRefreshing] = React.useState(!!defaultRefreshing);
+  const [innerRefreshing, setInnerRefreshing] = useState(!!defaultRefreshing);
   const mergedRefreshing = isControlled ? !!refreshing : innerRefreshing;
-  const scrollTopRef = React.useRef(0);
-  const draggingRef = React.useRef(false);
-  const [distance, setDistance] = React.useState(0);
-  const [showSuccess, setShowSuccess] = React.useState(false);
-  const timerRef = React.useRef(null);
-  const mergedRefreshingRef = React.useRef(mergedRefreshing);
-  const refreshTriggeredRef = React.useRef(false);
-  const refreshSucceededRef = React.useRef(false);
-  const setDistanceValue = React.useCallback((nextDistance, animate = false) => {
+  const scrollTopRef = useRef(0);
+  const draggingRef = useRef(false);
+  const webDragRafRef = useRef(null);
+  const webDragPendingRef = useRef(null);
+  const [distance, setDistance] = useState(0);
+  const [showSuccess, setShowSuccess] = useState(false);
+  const timerRef = useRef(null);
+  const refreshEndTimerRef = useRef(null);
+  const mergedRefreshingRef = useRef(mergedRefreshing);
+  const refreshTriggeredRef = useRef(false);
+  const refreshSucceededRef = useRef(false);
+  const setDistanceValue = useCallback((nextDistance, animate = false) => {
     const normalized = Math.max(0, Math.round(nextDistance));
     if (isWeb) {
       translateY.stopAnimation();
@@ -66,26 +69,55 @@ const PullRefresh = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
     setDistance(prev => Math.abs(prev - normalized) < 1 ? prev : normalized);
   }, [animationDurationMs, isWeb, translateY]);
-  React.useEffect(() => {
+  const flushWebDrag = useCallback(() => {
+    const pending = webDragPendingRef.current;
+    if (pending == null) return;
+    webDragPendingRef.current = null;
+    setDistanceValue(pending);
+  }, [setDistanceValue]);
+  const cancelWebDrag = useCallback(() => {
+    if (webDragRafRef.current != null && typeof cancelAnimationFrame === 'function') {
+      cancelAnimationFrame(webDragRafRef.current);
+    }
+    webDragRafRef.current = null;
+    webDragPendingRef.current = null;
+  }, []);
+  const scheduleWebDrag = useCallback(nextDistance => {
+    if (!isWeb || typeof requestAnimationFrame !== 'function') {
+      setDistanceValue(nextDistance);
+      return;
+    }
+    webDragPendingRef.current = nextDistance;
+    if (webDragRafRef.current != null) return;
+    webDragRafRef.current = requestAnimationFrame(() => {
+      webDragRafRef.current = null;
+      flushWebDrag();
+    });
+  }, [flushWebDrag, isWeb, setDistanceValue]);
+  useEffect(() => {
     return () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
       }
+      if (refreshEndTimerRef.current) {
+        clearTimeout(refreshEndTimerRef.current);
+      }
+      cancelWebDrag();
     };
-  }, []);
-  const setRefreshing = value => {
+  }, [cancelWebDrag]);
+  const setRefreshing = useCallback(value => {
     if (!isControlled) setInnerRefreshing(value);
-  };
-  React.useEffect(() => {
+  }, [isControlled]);
+  useEffect(() => {
     mergedRefreshingRef.current = mergedRefreshing;
   }, [mergedRefreshing]);
-  const resolveStatusText = (text, fallback) => {
+  const resolveStatusText = useCallback((text, fallback) => {
     const resolved = isUndefined(text) ? fallback : text;
     return isFunction(resolved) ? resolved({
       distance
     }) : resolved;
-  };
-  const triggerSuccess = React.useCallback(() => {
+  }, [distance]);
+  const triggerSuccess = useCallback(() => {
     if (successText === null || successText === undefined || successText === false) return;
     if (successDurationMs <= 0) return;
     setShowSuccess(true);
@@ -96,7 +128,7 @@ const PullRefresh = /*#__PURE__*/React.forwardRef((props, ref) => {
       setShowSuccess(false);
     }, successDurationMs);
   }, [successDurationMs, successText]);
-  const handleRefresh = React.useCallback(async () => {
+  const handleRefresh = useCallback(async () => {
     if (disabled || mergedRefreshing) return;
     if (!isFunction(onRefresh)) return;
     setShowSuccess(false);
@@ -108,17 +140,20 @@ const PullRefresh = /*#__PURE__*/React.forwardRef((props, ref) => {
       refreshSucceededRef.current = true;
     } finally {
       setRefreshing(false);
-      if (isFunction(onRefreshEnd)) setTimeout(onRefreshEnd, 0);
+      if (isFunction(onRefreshEnd)) {
+        if (refreshEndTimerRef.current) {
+          clearTimeout(refreshEndTimerRef.current);
+        }
+        refreshEndTimerRef.current = setTimeout(onRefreshEnd, 0);
+      }
       if (refreshTriggeredRef.current && refreshSucceededRef.current && !mergedRefreshingRef.current) {
         triggerSuccess();
         refreshTriggeredRef.current = false;
         refreshSucceededRef.current = false;
       }
     }
-  }, [disabled, mergedRefreshing, onRefresh, onRefreshEnd, triggerSuccess]);
-
-  // Web 端没有原生下拉回弹与 RefreshControl，需要用拖拽手势模拟内容下移。
-  React.useEffect(() => {
+  }, [disabled, mergedRefreshing, onRefresh, onRefreshEnd, setRefreshing, triggerSuccess]);
+  useEffect(() => {
     if (!isWeb) return;
     if (draggingRef.current) return;
     if (disabled) {
@@ -131,12 +166,12 @@ const PullRefresh = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
     setDistanceValue(0, true);
   }, [disabled, headHeightNumber, isWeb, mergedRefreshing, setDistanceValue, showSuccess]);
-  React.useEffect(() => {
+  useEffect(() => {
     if (isWeb) return;
     if (!mergedRefreshing && !showSuccess) return;
     setDistanceValue(0);
   }, [isWeb, mergedRefreshing, setDistanceValue, showSuccess]);
-  React.useEffect(() => {
+  useEffect(() => {
     if (!refreshTriggeredRef.current) return;
     if (mergedRefreshing) return;
     if (!refreshSucceededRef.current) {
@@ -153,9 +188,9 @@ const PullRefresh = /*#__PURE__*/React.forwardRef((props, ref) => {
     refreshTriggeredRef.current = false;
     refreshSucceededRef.current = false;
   }, [mergedRefreshing, showSuccess, triggerSuccess]);
-  const status = mergedRefreshing ? 'loading' : showSuccess ? 'success' : disabled || distance === 0 ? 'normal' : distance < pullDistanceNumber ? 'pulling' : 'loosing';
-  const opacity = React.useRef(new Animated.Value(status === 'normal' ? 0 : 1)).current;
-  React.useEffect(() => {
+  const status = useMemo(() => mergedRefreshing ? 'loading' : showSuccess ? 'success' : disabled || distance === 0 ? 'normal' : distance < pullDistanceNumber ? 'pulling' : 'loosing', [disabled, distance, mergedRefreshing, pullDistanceNumber, showSuccess]);
+  const opacity = useRef(new Animated.Value(status === 'normal' ? 0 : 1)).current;
+  useEffect(() => {
     const toValue = status === 'normal' ? 0 : 1;
     opacity.stopAnimation();
     if (animationDurationMs <= 0) {
@@ -168,7 +203,7 @@ const PullRefresh = /*#__PURE__*/React.forwardRef((props, ref) => {
       useNativeDriver: nativeDriverEnabled
     }).start();
   }, [animationDurationMs, opacity, status]);
-  const statusNode = (() => {
+  const statusNode = useMemo(() => {
     switch (status) {
       case 'pulling':
         return resolveStatusText(pullingText, locale.vanPullRefresh.pulling);
@@ -181,16 +216,17 @@ const PullRefresh = /*#__PURE__*/React.forwardRef((props, ref) => {
       default:
         return null;
     }
-  })();
+  }, [loadingText, locale.vanPullRefresh.loading, locale.vanPullRefresh.loosing, locale.vanPullRefresh.pulling, loosingText, pullingText, resolveStatusText, status, successText]);
   const shouldReserveHead = (status === 'loading' || status === 'success') && distance === 0;
-  const flattenedContainerStyle = StyleSheet.flatten(scrollProps.contentContainerStyle);
+  const flattenedContainerStyle = useMemo(() => StyleSheet.flatten(scrollProps.contentContainerStyle), [scrollProps.contentContainerStyle]);
   const basePaddingTop = isNumber(flattenedContainerStyle?.paddingTop) ? flattenedContainerStyle.paddingTop : 0;
-  const contentContainerStyle = shouldReserveHead ? [scrollProps.contentContainerStyle, {
+  const contentContainerStyle = useMemo(() => shouldReserveHead ? [scrollProps.contentContainerStyle, {
     paddingTop: basePaddingTop + headHeightNumber
-  }] : scrollProps.contentContainerStyle;
-  const handleScroll = event => {
-    scrollProps.onScroll?.(event);
-    const offset = event?.nativeEvent?.contentOffset?.y ?? 0;
+  }] : scrollProps.contentContainerStyle, [basePaddingTop, headHeightNumber, scrollProps.contentContainerStyle, shouldReserveHead]);
+  const onScrollProp = scrollProps.onScroll;
+  const handleScroll = useCallback(event => {
+    onScrollProp?.(event);
+    const offset = event.nativeEvent.contentOffset?.y ?? 0;
     if (isWeb) {
       scrollTopRef.current = Math.max(0, offset);
       return;
@@ -201,8 +237,8 @@ const PullRefresh = /*#__PURE__*/React.forwardRef((props, ref) => {
       return;
     }
     setDistanceValue(offset < 0 ? -offset : 0);
-  };
-  const panResponder = React.useMemo(() => {
+  }, [disabled, isWeb, mergedRefreshing, onRefresh, onScrollProp, setDistanceValue, showSuccess]);
+  const panResponder = useMemo(() => {
     if (!isWeb || !isFunction(onRefresh)) return null;
     const easeDistance = raw => {
       const pullDistance = pullDistanceNumber;
@@ -235,14 +271,12 @@ const PullRefresh = /*#__PURE__*/React.forwardRef((props, ref) => {
         if (showSuccess) return;
         if (scrollTopRef.current > 0) return;
         const raw = Math.max(0, gestureState.dy ?? 0);
-        setDistanceValue(easeDistance(raw));
-        if (isFunction(event?.preventDefault)) {
-          ;
-          event.preventDefault();
-        }
+        scheduleWebDrag(easeDistance(raw));
+        event.preventDefault?.();
       },
       onPanResponderRelease: async (_event, gestureState) => {
         draggingRef.current = false;
+        cancelWebDrag();
         if (disabled) return;
         if (mergedRefreshingRef.current) return;
         if (showSuccess) return;
@@ -257,10 +291,11 @@ const PullRefresh = /*#__PURE__*/React.forwardRef((props, ref) => {
       },
       onPanResponderTerminate: () => {
         draggingRef.current = false;
+        cancelWebDrag();
         setDistanceValue(0, true);
       }
     });
-  }, [disabled, handleRefresh, headHeightNumber, isWeb, pullDistanceNumber, setDistanceValue, showSuccess]);
+  }, [disabled, handleRefresh, headHeightNumber, isWeb, pullDistanceNumber, cancelWebDrag, scheduleWebDrag, setDistanceValue, showSuccess]);
   return /*#__PURE__*/React.createElement(ScrollView, _extends({}, scrollProps, {
     ref: ref,
     style: style,

package/dist/es/components/radio/Radio.js

@@ -1,17 +1,18 @@
 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, useContext, useEffect, useRef } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { useRadio } from '@react-native-aria/radio';
 import { useToggleState } from '@react-stately/toggle';
 import { RadioGroupContext } from './RadioContext';
 import { useRadioTokens } from './tokens';
-import { parseNumber } from '../../utils/number';
-import { isText } from '../../utils/validate';
-export const Radio = props => {
+import { parseNumber, isText } from '../../utils';
+export const Radio = /*#__PURE__*/React.memo(props => {
   const {
     children,
     name,
     value,
+    checked,
+    defaultChecked,
     iconSize,
     checkedColor,
     iconRender,
@@ -23,10 +24,13 @@ export const Radio = props => {
     labelStyle,
     tokensOverride,
     onClick,
+    onChange,
+    accessibilityLabel,
+    ['aria-label']: ariaLabel,
     ...rest
   } = props;
   const tokens = useRadioTokens(tokensOverride);
-  const group = React.useContext(RadioGroupContext);
+  const group = useContext(RadioGroupContext);
   const optionValue = value ?? name;
   const serializedValue = optionValue == null ? undefined : String(optionValue);
   const isGroup = !!group && serializedValue !== undefined;
@@ -37,15 +41,15 @@ export const Radio = props => {
   const resolvedDisabled = Boolean(disabled || group?.state.isDisabled);
   const shape = shapeProp ?? tokens.defaults.shape;
   const standaloneKey = serializedValue ?? 'standalone';
-  const inputRef = React.useRef(null);
-  const resolvedAccessibilityLabel = props.accessibilityLabel ?? props['aria-label'] ?? (isText(children) ? String(children) : undefined) ?? serializedValue ?? 'radio';
+  const inputRef = useRef(null);
+  const resolvedAccessibilityLabel = accessibilityLabel ?? ariaLabel ?? (isText(children) ? String(children) : undefined) ?? serializedValue ?? 'radio';
   const {
     isSelected: standaloneSelected,
     setSelected: setStandaloneSelected
   } = useToggleState({
-    isSelected: props.checked,
-    defaultSelected: props.defaultChecked,
-    onChange: next => props.onChange?.(next)
+    isSelected: checked,
+    defaultSelected: defaultChecked,
+    onChange: next => onChange?.(next)
   });
   const pseudoState = {
     selectedValue: standaloneSelected ? standaloneKey : null,
@@ -53,7 +57,7 @@ export const Radio = props => {
       setStandaloneSelected(next === standaloneKey);
     }
   };
-  React.useEffect(() => {
+  useEffect(() => {
     if (isGroup && group && serializedValue !== undefined) {
       group.registerValue(serializedValue, optionValue ?? serializedValue);
       return () => group.unregisterValue(serializedValue);
@@ -76,25 +80,28 @@ export const Radio = props => {
     accessibilityLabel: resolvedAccessibilityLabel,
     ...compatibleRest
   }, state, inputRef);
-  const isChecked = isGroup && group && serializedValue !== undefined ? group.state.selectedValue === serializedValue : props.checked !== undefined ? props.checked : standaloneSelected;
+  const isChecked = isGroup && group && serializedValue !== undefined ? group.state.selectedValue === serializedValue : checked !== undefined ? checked : standaloneSelected;
+  const inputOnPress = inputProps?.onPress;
+  const handlePress = useCallback(e => {
+    onClick?.(e);
+    if (resolvedDisabled) return;
+    if (isGroup && group && serializedValue !== undefined) {
+      if (!isChecked) group.state.setSelectedValue(serializedValue);
+      return;
+    }
+    if (checked !== undefined) {
+      onChange?.(!checked);
+      return;
+    }
+    if (onChange) {
+      setStandaloneSelected(!standaloneSelected);
+      return;
+    }
+    inputOnPress?.(e);
+  }, [checked, group, inputOnPress, isChecked, isGroup, onChange, onClick, resolvedDisabled, serializedValue, setStandaloneSelected, standaloneSelected]);
   const mergedInputProps = inputProps ? {
     ...inputProps,
-    onPress: e => {
-      onClick?.(e);
-      if (isGroup && group && serializedValue !== undefined) {
-        if (!isChecked) group.state.setSelectedValue(serializedValue);
-        return;
-      }
-      if (props.checked !== undefined) {
-        props.onChange?.(!props.checked);
-        return;
-      }
-      if (props.onChange) {
-        setStandaloneSelected(!standaloneSelected);
-        return;
-      }
-      inputProps.onPress?.(e);
-    }
+    onPress: handlePress
   } : {};
   const borderColor = resolvedDisabled ? tokens.colors.disabledBorder : isChecked ? resolvedCheckedColor : tokens.colors.border;
   const backgroundColor = resolvedDisabled ? tokens.colors.disabledBackground : tokens.colors.background;
@@ -106,7 +113,6 @@ export const Radio = props => {
   const labelColor = resolvedDisabled ? tokens.colors.labelDisabled : tokens.colors.label;
   const borderRadius = shape === 'square' ? tokens.radii.square : tokens.radii.round;
   const labelNode = children === null || children === undefined || children === false ? null : /*#__PURE__*/React.createElement(View, {
-    key: "radio-label",
     style: [tokens.layout.labelWrapper, spacingStyle],
     pointerEvents: "none",
     accessible: false
@@ -138,25 +144,13 @@ export const Radio = props => {
       backgroundColor: resolvedCheckedColor
     }
   }) : null);
-  let iconVisual = defaultIcon;
-  if (iconRender) {
-    try {
-      iconVisual = iconRender({
-        checked: Boolean(isChecked),
-        disabled: Boolean(resolvedDisabled)
-      }) ?? null;
-    } catch (error) {
-      if (typeof __DEV__ !== 'undefined' && __DEV__) {
-        console.warn('[Radio] iconRender error:', error);
-      }
-      iconVisual = defaultIcon;
-    }
-  }
+  const iconVisual = iconRender ? iconRender({
+    checked: Boolean(isChecked),
+    disabled: Boolean(resolvedDisabled)
+  }) ?? null : defaultIcon;
   const iconNode = interactive ? /*#__PURE__*/React.createElement(View, {
-    key: "radio-icon",
     style: tokens.layout.iconWrapper
   }, iconVisual) : /*#__PURE__*/React.createElement(Pressable, _extends({}, mergedInputProps, {
-    key: "radio-icon",
     ref: inputRef,
     testID: serializedValue !== undefined ? `radio-icon-${serializedValue}` : undefined,
     disabled: resolvedDisabled,
@@ -167,7 +161,9 @@ export const Radio = props => {
     },
     style: tokens.layout.iconWrapper
   }), iconVisual);
-  const nodes = resolvedLabelPosition === 'left' ? [labelNode, iconNode] : [iconNode, labelNode];
+  const left = resolvedLabelPosition === 'left';
+  const first = left ? labelNode : iconNode;
+  const second = left ? iconNode : labelNode;
   if (interactive) {
     return /*#__PURE__*/React.createElement(Pressable, _extends({}, mergedInputProps, {
       ref: inputRef,
@@ -179,9 +175,10 @@ export const Radio = props => {
         disabled: resolvedDisabled
       },
       style: [tokens.layout.container, style]
-    }), nodes.filter(Boolean));
+    }), first, second);
   }
   return /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.container, style]
-  }, nodes.filter(Boolean));
-};
+  }, first, second);
+});
+Radio.displayName = 'Radio';

package/dist/es/components/radio/RadioGroup.js

@@ -1,11 +1,10 @@
 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, useRef } from 'react';
 import { Platform, View } from 'react-native';
 import { useRadioGroup } from '@react-native-aria/radio';
 import { useRadioGroupState } from '@react-stately/radio';
 import { RadioGroupContext } from './RadioContext';
 import { useRadioTokens } from './tokens';
-import { isBoolean } from '../../utils/validate';
 export const RadioGroup = props => {
   const {
     value,
@@ -29,11 +28,11 @@ export const RadioGroup = props => {
   const disabled = disabledProp ?? tokens.defaults.groupDisabled;
   const direction = directionProp ?? tokens.defaults.groupDirection;
   const gap = Math.max(0, gapProp ?? tokens.spacing.groupGap);
-  const registryRef = React.useRef(new Map());
-  const registerValue = React.useCallback((key, raw) => {
+  const registryRef = useRef(new Map());
+  const registerValue = useCallback((key, raw) => {
     registryRef.current.set(key, raw);
   }, []);
-  const unregisterValue = React.useCallback(key => {
+  const unregisterValue = useCallback(key => {
     registryRef.current.delete(key);
   }, []);
   const state = useRadioGroupState({
@@ -55,13 +54,13 @@ export const RadioGroup = props => {
   }, state);
   const resolvedRadioGroupProps = {
     ...(radioGroupProps ?? {}),
-    ...(accessibilityHint ? {
+    ...(accessibilityHint && {
       'aria-describedby': accessibilityHint
-    } : null),
+    }),
     'aria-disabled': disabled
   };
   const supportsGap = Platform.OS === 'web';
-  const childrenArray = React.Children.toArray(children).filter(child => child != null && !isBoolean(child));
+  const childrenArray = React.Children.toArray(children).filter(child => child != null && typeof child !== 'boolean');
   const itemStyleForIndex = index => {
     if (supportsGap) return tokens.layout.groupItem;
     const isLast = index === childrenArray.length - 1;
@@ -78,7 +77,7 @@ export const RadioGroup = props => {
     columnGap: direction === 'horizontal' ? gap : undefined,
     rowGap: gap
   } : null;
-  const contextValue = React.useMemo(() => ({
+  const contextValue = useMemo(() => ({
     state,
     direction,
     iconSize,

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

@@ -61,7 +61,7 @@ const createRadioTokens = foundations => {
     typography: {
       fontSize: fontSize.md,
       fontFamily: typography.fontFamily,
-      fontWeight: String(typography.weight.medium),
+      fontWeight: typography.weight.medium,
       lineHeightMultiplier: typography.lineHeightMultiplier
     },
     sizing: {