@xhsreds/reds-rn-next 0.10.1-fix-pull-refresh202511272003 → 0.10.1

package/src/components/ProgressIndicator/doc/index.mdx

@@ -25,16 +25,16 @@ import ProgressDemo from "!!raw-loader!../demo/progress.tsx";
 
 ### Props
 
-| 属性         | 描述           | 类型                                   | 默认值                                                        |
-| ------------ | -------------- | -------------------------------------- | ------------------------------------------------------------- |
-| percent      | 当前进度       | number                                 | 0                                                             |
-| showPercent  | 展示文字       | boolean                                | true                                                          |
-| textStyle    | 字体样式       | any                                    |                                                               |
-| formatText   | 进度条文字函数 | (percent: number) => string            | (percent: number) => (percent > 100 ? "100%" : percent + "%") |
-| size         | 进度条尺寸     | number                                 |                                                               |
-| type         | 类型           | string                                 | default                                                       |
-| strokeColor  | 边框颜色       | "dark" | "light" | "primary" |                                                               |
-| strokeWidth  | 边框宽度       | number                                 |                                                               |
-| lottieSource | lottie自定义   | string                                 |                                                               |
+| 属性         | 描述           | 类型                                   | 默认值                                                           |
+| ------------ | -------------- | -------------------------------------- | ---------------------------------------------------------------- |
+| percent      | 当前进度       | number                                 | 0                                                                |
+| showPercent  | 展示文字       | boolean                                | true                                                             |
+| textStyle    | 字体样式       | any                                    |                                                                  |
+| formatText   | 进度条文字函数 | (percent: number) => string         | (percent: number) => (percent > 100 ? "100%" : percent + "%") |
+| size         | 进度条尺寸     | number                                 |                                                                  |
+| type         | 类型           | string                                 | default                                                          |
+| strokeColor  | 边框颜色       | "dark" | "light" | "primary" |                                                                  |
+| strokeWidth  | 边框宽度       | number                                 |                                                                  |
+| lottieSource | lottie自定义   | string                                 |                                                                  |
 
 ### Events

package/src/components/PullRefresh/PullRefresh.tsx

@@ -126,14 +126,22 @@ export default function PullRefresh(props: RedsPullRefresh) {
       // 有拉动距离但是不够设定的下拉高度
     } else if (panValue > 0) {
       updatePullState(PullState.FINISH);
+      setMoveHeight(0);
+      setMovePercent(0);
       animatedTo(0, () => {
         setIsPulling(false);
         updatePullState(PullState.INIT);
+        pan.setValue(0);
+        pan.flattenOffset();
       });
       // 否则就是初始状态
     } else {
       updatePullState(PullState.INIT);
       setIsPulling(false);
+      setMoveHeight(0);
+      setMovePercent(0);
+      pan.setValue(0);
+      pan.flattenOffset();
     }
   };
 
@@ -202,7 +210,19 @@ export default function PullRefresh(props: RedsPullRefresh) {
     if (props.initRefresh && !hasInitRefreshed) {
       return false;
     }
-    return isPulling ? false : scrollY <= 0 && gestureState.vy > 0 && gestureState.vy > Math.abs(gestureState.vx);
+    // Block during refresh states
+    if (isRefreshing || pullState === PullState.LOADING || pullState === PullState.HOLDING) {
+      return false;
+    }
+    // Block if already pulling
+    if (isPulling) {
+      return false;
+    }
+    // Explicitly reject upward swipes
+    if (gestureState.vy < 0) {
+      return false;
+    }
+    return scrollY <= 0 && gestureState.vy > 0 && gestureState.vy > Math.abs(gestureState.vx);
   };
 
   // 手势对象
@@ -216,12 +236,13 @@ export default function PullRefresh(props: RedsPullRefresh) {
       });
     }
     return PanResponder.create({
-      onStartShouldSetPanResponder: canMove,
-      onStartShouldSetPanResponderCapture: canMove,
+      onStartShouldSetPanResponder: () => false,
+      onStartShouldSetPanResponderCapture: () => false,
       onMoveShouldSetPanResponder: canMove,
       onMoveShouldSetPanResponderCapture: canMove,
       onPanResponderGrant: () => {
         animation && animation.stop();
+        pan.flattenOffset();
         // @ts-ignore
         pan.setOffset(pan._value);
         updatePullState(PullState.PULLING);
@@ -244,14 +265,26 @@ export default function PullRefresh(props: RedsPullRefresh) {
       },
       onPanResponderRelease: onRelease,
       onPanResponderTerminationRequest() {
-        return false;
+        if (isPulling || pullState === PullState.PULLING) {
+          return false;
+        }
+        return true;
       },
       onPanResponderTerminate: onRelease,
       onShouldBlockNativeResponder() {
-        return true;
+        return isPulling || pullState === PullState.PULLING;
       },
     });
-  }, [isPulling, scrollY, props.initRefresh, hasInitRefreshed, pullAnimHeight, props.nativeAndroidPullRefresh]);
+  }, [
+    isPulling,
+    scrollY,
+    props.initRefresh,
+    hasInitRefreshed,
+    pullAnimHeight,
+    props.nativeAndroidPullRefresh,
+    isRefreshing,
+    pullState,
+  ]);
 
   // 根据外层传递参数变化进行更新执行（自定义实现启用时）
   useEffect(() => {
@@ -274,16 +307,14 @@ export default function PullRefresh(props: RedsPullRefresh) {
       setPullTimeout(
         //@ts-ignore
         setTimeout(() => {
+          pan.flattenOffset();
+          setMoveHeight(0);
+          setMovePercent(0);
           animatedTo(0, () => {
             setIsPulling(false);
             updatePullState(PullState.INIT);
-            // Reset manually-set transforms to sync with animated value (fixes iOS first swipe not responding)
-            viewRef.current?.setNativeProps({
-              style: { transform: [{ translateY: 0 }] },
-            });
-            animatedViewRef.current?.setNativeProps({
-              style: { transform: [{ translateY: 0 }] },
-            });
+            pan.setValue(0);
+            pan.flattenOffset();
           });
           updatePullState(PullState.FINISH);
         }, props?.msHoldingTime ?? 1000),

package/src/components/PullRefresh/doc/index.mdx

@@ -32,6 +32,6 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Events
 
-| 事件      | 描述               | 类型       | 默认值 |
-| --------- | ------------------ | ---------- | ------ |
-| onRequest | 下拉执行的请求函数 | () => void |        |
+| 事件      | 描述               | 类型          | 默认值 |
+| --------- | ------------------ | ------------- | ------ |
+| onRequest | 下拉执行的请求函数 | () => void |        |

package/src/components/Radio/Radio.tsx

@@ -64,9 +64,9 @@ const Radio = (props: RedsRadio) => {
   const labelStyle = getLabelStyle(disabled || parent?.disabled, size, parent?.direction);
 
   const iconSizeMap: Record<"small" | "medium" | "large", number> = {
-    small: 16,
-    medium: 20,
-    large: 24,
+    small: 12,
+    medium: 16,
+    large: 20,
   };
 
   const rightStyle = getRightIconStyle(size);

package/src/components/Radio/doc/index.mdx

@@ -32,6 +32,6 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Events
 
-| 事件    | 描述     | 类型                    | 默认值 |
-| ------- | -------- | ----------------------- | ------ |
-| onClick | 点击事件 | (value: string) => void |        |
+| 事件    | 描述     | 类型                       | 默认值 |
+| ------- | -------- | -------------------------- | ------ |
+| onClick | 点击事件 | (value: string) => void |        |

package/src/components/Radio/styles.ts

@@ -2,9 +2,9 @@ import { StyleSheet, ViewStyle, TextStyle, DimensionValue } from "react-native";
 import { useThemeColor } from "../ConfigProvider";
 import { typography } from "@xhs/reds-token-next";
 const iconSizeMap: Record<"small" | "medium" | "large" | string, number> = {
-  small: typography.B1FontSize,
-  medium: typography.H3FontSize,
-  large: typography.H2FontSize,
+  small: 12,
+  medium: 16,
+  large: 20,
 };
 const fontSizeMap: Record<"small" | "medium" | "large", number> = {
   small: 12,
@@ -43,7 +43,6 @@ export const getContainerStyle = (direction?: string | undefined, position?: "le
     alignItems: "center",
     justifyContent: "flex-start",
     backgroundColor: direction === "vertical" ? themeColor.Bg : undefined,
-    paddingHorizontal: 16,
   };
 };
 
@@ -99,7 +98,6 @@ export const getLabelStyle = (
 
   return {
     color: disabled ? themeColor.Disabled : themeColor.Title,
-    lineHeight: iconSizeMap[size],
     fontSize: fontSizeMap[size],
     marginRight: direction === "horizontal" ? 8 : 0,
   };

package/src/components/Rate/doc/index.mdx

@@ -28,6 +28,6 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Events
 
-| 事件     | 描述               | 类型                    | 默认值 |
-| -------- | ------------------ | ----------------------- | ------ |
-| onChange | 当值发生变化时触发 | (value: number) => void |        |
+| 事件     | 描述               | 类型                       | 默认值 |
+| -------- | ------------------ | -------------------------- | ------ |
+| onChange | 当值发生变化时触发 | (value: number) => void |        |

package/src/components/Search/doc/index.mdx

@@ -19,7 +19,7 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | disabled         | 是否禁用输入框                                                             | boolean                    |          |
 | readonly         | 是否为只读状态，只读状态下无法输入内容                                     | boolean                    |          |
 | clearable        | 是否启用清除图标，点击清除图标后会清空输入框                               | boolean                    | true     |
-| formatter        | 输入内容格式化函数                                                         | (val: string) => string    |          |
+| formatter        | 输入内容格式化函数                                                         | (val: string) => string |          |
 | formatterTrigger | 格式化函数触发的时机                                                       | TextFieldFormatTriggerType | onChange |
 | inputAlign       | 输入框对齐方式                                                             | "left" | "right"      |          |
 | autocomplete     | 对齐方式                                                                   | string                     |          |
@@ -37,19 +37,19 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Events
 
-| 事件                   | 描述                               | 类型                       | 默认值   |
-| ---------------------- | ---------------------------------- | -------------------------- | -------- |
-| onSearch               | 键盘的搜索事件                     | (val: Event) => void       |          |
-| onInput                | 输入框输入时触发                   | (value: string) => any     |          |
-| onChange               | 当modelValue发生变化时触发         | (e: any) => void           |          |
-| onFocus                | 输入框获得焦点时触发               | (event: FocusEvent) => any |          |
-| onBlur                 | 输入框失去焦点时触发               | (event: FocusEvent) => any |          |
-| onClear                | 点击清除按钮时触发                 | () => any                  |          |
-| onCameraIconClick      | 相机图标                           | () => any                  |          |
-| onSearchIconClick      | 搜索图标                           | () => any                  |          |
-| onLeftBackIconClick    | 左箭头返回                         | () => any                  |          |
-| onButtonClick          | 文字按钮                           | (value: string) => any     |          |
-| onCancelClick          | 取消按钮                           | () => any                  |          |
-| onSearchClick          | 搜索按钮                           | (value: string) => any     |          |
-| onAdditionalIconsClick | 额外图标区域                       | () => any                  |          |
-| onButtonTextClick      | 自定义操作文案buttonText的点击事件 | (value: string) => any     | () => {} |
+| 事件                   | 描述                               | 类型                          | 默认值      |
+| ---------------------- | ---------------------------------- | ----------------------------- | ----------- |
+| onSearch               | 键盘的搜索事件                     | (val: Event) => void       |             |
+| onInput                | 输入框输入时触发                   | (value: string) => any     |             |
+| onChange               | 当modelValue发生变化时触发         | (e: any) => void           |             |
+| onFocus                | 输入框获得焦点时触发               | (event: FocusEvent) => any |             |
+| onBlur                 | 输入框失去焦点时触发               | (event: FocusEvent) => any |             |
+| onClear                | 点击清除按钮时触发                 | () => any                  |             |
+| onCameraIconClick      | 相机图标                           | () => any                  |             |
+| onSearchIconClick      | 搜索图标                           | () => any                  |             |
+| onLeftBackIconClick    | 左箭头返回                         | () => any                  |             |
+| onButtonClick          | 文字按钮                           | (value: string) => any     |             |
+| onCancelClick          | 取消按钮                           | () => any                  |             |
+| onSearchClick          | 搜索按钮                           | (value: string) => any     |             |
+| onAdditionalIconsClick | 额外图标区域                       | () => any                  |             |
+| onButtonTextClick      | 自定义操作文案buttonText的点击事件 | (value: string) => any     | () => {} |

package/src/components/SegmentedControl/doc/index.mdx

@@ -18,6 +18,6 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Events
 
-| 事件     | 描述               | 类型                                  | 默认值 |
-| -------- | ------------------ | ------------------------------------- | ------ |
-| onChange | 当值发生变化时触发 | (value: string | number) => void |        |
+| 事件     | 描述               | 类型                                     | 默认值 |
+| -------- | ------------------ | ---------------------------------------- | ------ |
+| onChange | 当值发生变化时触发 | (value: string | number) => void |        |

package/src/components/Sheets/AnimatedSheets.tsx

@@ -56,6 +56,8 @@ const AnimatedSheets = forwardRef((props: RedsSheets, ref) => {
     close,
     iconType,
     size,
+    openAnimation,
+    closeAnimation,
   } = props;
 
   const themeColor = useThemeColor();
@@ -181,8 +183,8 @@ const AnimatedSheets = forwardRef((props: RedsSheets, ref) => {
     Animated.timing(translateY, {
       toValue: 0, // 移动到目标位置（顶部）
       useNativeDriver: true,
-      duration: 150,
-      easing: Easing.ease,
+      duration: openAnimation?.duration ?? 150,
+      easing: openAnimation?.easing ?? Easing.ease,
     }).start();
   };
 
@@ -243,9 +245,9 @@ const AnimatedSheets = forwardRef((props: RedsSheets, ref) => {
       }
       Animated.timing(opacityValue, {
         toValue: _visible && mask ? 1 : 0,
-        duration: 150,
+        duration: _visible ? openAnimation?.duration ?? 150 : closeAnimation?.duration ?? 150,
         useNativeDriver: true, // 使用原生驱动
-        easing: Easing.linear, // 动画缓动函数
+        easing: _visible ? openAnimation?.easing ?? Easing.linear : closeAnimation?.easing ?? Easing.linear,
       }).start(() => {
         setShowMask(_visible);
       });
@@ -351,8 +353,8 @@ const AnimatedSheets = forwardRef((props: RedsSheets, ref) => {
       Animated.timing(translateY, {
         toValue: screenHeight || Dimensions.get("screen").height, // 移动到屏幕底部
         useNativeDriver: true,
-        duration: 150,
-        easing: Easing.ease,
+        duration: closeAnimation?.duration ?? 150,
+        easing: closeAnimation?.easing ?? Easing.ease,
       }).start((data) => {
         if (data.finished) {
           onAnimatedOut?.();
@@ -370,8 +372,8 @@ const AnimatedSheets = forwardRef((props: RedsSheets, ref) => {
       Animated.timing(translateY, {
         toValue: screenHeight || Dimensions.get("screen").height, // 移动到屏幕底部
         useNativeDriver: true,
-        duration: 150,
-        easing: Easing.ease,
+        duration: closeAnimation?.duration ?? 150,
+        easing: closeAnimation?.easing ?? Easing.ease,
       }).start((data) => {
         if (data.finished) {
           onAnimatedOut?.();
@@ -402,123 +404,127 @@ const AnimatedSheets = forwardRef((props: RedsSheets, ref) => {
       ) : (
         <></>
       )}
-      <Animated.View
-        testID="Sheets"
-        style={[
-          styles.picker,
-          { backgroundColor: themeColor.Bg2 },
-          {
-            height: sheetsHeight,
-            transform: [{ translateY }],
-          },
-          { zIndex: props.zIndex },
-          props.sheetsStyle,
-        ]}
-      >
-        {props.header ? <View onLayout={handleLabelLayout}>{props.header}</View> : <></>}
-        {/** normal */}
-        {showLabel && !props.header ? (
-          <View
-            style={[
-              props.headlerLayout === "center" ? styles.labelContainer : styles.leftLabelContainer,
-              { backgroundColor: themeColor.Bg2 },
-              props.headerStyle,
-            ]}
-            onLayout={handleLabelLayout}
-          >
-            {!cancel ? (
-              props.headlerLayout === "center" ? (
-                <Block />
+      {_visible ? (
+        <Animated.View
+          testID="Sheets"
+          style={[
+            styles.picker,
+            { backgroundColor: themeColor.Bg2 },
+            {
+              height: sheetsHeight,
+              transform: [{ translateY }],
+            },
+            { zIndex: props.zIndex },
+            props.sheetsStyle,
+          ]}
+        >
+          {props.header ? <View onLayout={handleLabelLayout}>{props.header}</View> : <></>}
+          {/** normal */}
+          {showLabel && !props.header ? (
+            <View
+              style={[
+                props.headlerLayout === "center" ? styles.labelContainer : styles.leftLabelContainer,
+                { backgroundColor: themeColor.Bg2 },
+                props.headerStyle,
+              ]}
+              onLayout={handleLabelLayout}
+            >
+              {!cancel ? (
+                props.headlerLayout === "center" ? (
+                  <Block />
+                ) : (
+                  <></>
+                )
+              ) : (
+                <TouchableOpacity onPress={handleCancel} activeOpacity={1}>
+                  {cancelType === SheetsActionType.text ? (
+                    <Text style={[styles.cancel, { color: themeColor.Title }]} testID="cancel">
+                      {cancelText || cancelKey}
+                    </Text>
+                  ) : (
+                    iconWrapper("cancel")
+                  )}
+                </TouchableOpacity>
+              )}
+              {label ? (
+                <Text style={[styles.label, { color: themeColor.Title }]}>
+                  {label}
+                  {showMask}
+                </Text>
               ) : (
                 <></>
-              )
-            ) : (
-              <TouchableOpacity onPress={handleCancel} activeOpacity={1}>
-                {cancelType === SheetsActionType.text ? (
-                  <Text style={[styles.cancel, { color: themeColor.Title }]} testID="cancel">
-                    {cancelText || cancelKey}
-                  </Text>
+              )}
+              {!close ? (
+                props.headlerLayout === "center" ? (
+                  <Block />
                 ) : (
-                  iconWrapper("cancel")
-                )}
-              </TouchableOpacity>
-            )}
-            {label ? (
-              <Text style={[styles.label, { color: themeColor.Title }]}>
-                {label}
-                {showMask}
-              </Text>
-            ) : (
-              <></>
-            )}
-            {!close ? (
-              props.headlerLayout === "center" ? (
-                <Block />
+                  <></>
+                )
+              ) : (
+                <TouchableOpacity onPress={handleConfirm} activeOpacity={1}>
+                  {closeType === SheetsActionType.text ? (
+                    <View>
+                      <Text
+                        style={[
+                          styles.confirm,
+                          { color: themeColor.Primary },
+                          { elevation: 0, shadowColor: "transparent" },
+                        ]}
+                        testID="close"
+                      >
+                        {closeText || sureKey}
+                      </Text>
+                    </View>
+                  ) : (
+                    iconWrapper("confirm")
+                  )}
+                </TouchableOpacity>
+              )}
+            </View>
+          ) : (
+            <></>
+          )}
+
+          {/** 拖拽按钮 */}
+          {sheetsType === SheetsType.dragable && !props.header ? (
+            <Animated.View style={[styles.dragableContainer]} {...panResponder.panHandlers} testID={"draggable"}>
+              <View style={[styles.dragable, { backgroundColor: themeColor.Fill3 }]} />
+            </Animated.View>
+          ) : (
+            <></>
+          )}
+
+          <View onLayout={handleLayout}>{children}</View>
+
+          {/** action */}
+          {showAction ? (
+            <View style={[styles.actionContainer]} onLayout={handleActionLayout}>
+              {cancel ? (
+                <View style={styles.action}>
+                  <Button block onClick={handleCancel}>
+                    {cancelText || cancelKey}
+                  </Button>
+                </View>
               ) : (
                 <></>
-              )
-            ) : (
-              <TouchableOpacity onPress={handleConfirm} activeOpacity={1}>
-                {closeType === SheetsActionType.text ? (
-                  <View>
-                    <Text
-                      style={[
-                        styles.confirm,
-                        { color: themeColor.Primary },
-                        { elevation: 0, shadowColor: "transparent" },
-                      ]}
-                      testID="close"
-                    >
-                      {closeText || sureKey}
-                    </Text>
-                  </View>
-                ) : (
-                  iconWrapper("confirm")
-                )}
-              </TouchableOpacity>
-            )}
-          </View>
-        ) : (
-          <></>
-        )}
-
-        {/** 拖拽按钮 */}
-        {sheetsType === SheetsType.dragable && !props.header ? (
-          <Animated.View style={[styles.dragableContainer]} {...panResponder.panHandlers} testID={"draggable"}>
-            <View style={[styles.dragable, { backgroundColor: themeColor.Fill3 }]} />
-          </Animated.View>
-        ) : (
-          <></>
-        )}
-
-        <View onLayout={handleLayout}>{children}</View>
-
-        {/** action */}
-        {showAction ? (
-          <View style={[styles.actionContainer]} onLayout={handleActionLayout}>
-            {cancel ? (
-              <View style={styles.action}>
-                <Button block onClick={handleCancel}>
-                  {cancelText || cancelKey}
-                </Button>
-              </View>
-            ) : (
-              <></>
-            )}
-            {close ? (
-              <View style={styles.action}>
-                <Button block onClick={handleConfirm} type="primary">
-                  {closeText || sureKey}
-                </Button>
-              </View>
-            ) : (
-              <></>
-            )}
-          </View>
-        ) : (
-          <></>
-        )}
-      </Animated.View>
+              )}
+              {close ? (
+                <View style={styles.action}>
+                  <Button block onClick={handleConfirm} type="primary">
+                    {closeText || sureKey}
+                  </Button>
+                </View>
+              ) : (
+                <></>
+              )}
+            </View>
+          ) : (
+            <></>
+          )}
+        </Animated.View>
+      ) : (
+        <></>
+      )}
     </>
   );
 });