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

package/src/components/PickerView/Wheel.tsx

@@ -15,6 +15,26 @@ const Wheel = (props: RedsWheel) => {
    */
   const scrollerRef = useRef();
 
+  const [scrollEnded, setScrollEnded] = useState(false);
+
+  const [scrollHeight, setScrollHeight] = useState(0);
+
+  const [lastValue, setLastValue] = useState(value);
+
+  const onScrollEndDrag = () => {
+    setScrollEnded(true);
+  };
+
+  /**
+   * 初始化滚动高度
+   */
+  useEffect(() => {
+    if (value !== lastValue) {
+      const idx = getSelectIndex(column, value);
+      setIndex(idx);
+    }
+  }, [column, value]);
+
   /**
    * themeColor
    */
@@ -25,6 +45,8 @@ const Wheel = (props: RedsWheel) => {
    */
   const [index, setIndex] = useState<any>();
 
+  const timer = useRef<any>();
+
   /**
    * 初始化滚动高度
    */
@@ -37,9 +59,28 @@ const Wheel = (props: RedsWheel) => {
     scrollTo(index * itemHeight);
     if (newVal) {
       onSelect(newVal, props.index);
+      setLastValue(newVal);
     }
   }, [index, props.index]);
 
+  useEffect(() => {
+    if (scrollEnded) {
+      // @ts-ignore
+      if (scrollHeight != null) {
+        timer.current = setTimeout(() => {
+          const selectIndex = Math.round(scrollHeight / itemHeight);
+          if (selectIndex >= 0 && selectIndex < column.length) {
+            setIndex(selectIndex);
+          }
+        }, 0);
+      }
+      setScrollEnded(false);
+    }
+    return () => {
+      timer.current && clearTimeout(timer.current);
+    };
+  }, [scrollEnded]);
+
   /**
    * 滚动ScrollView
    * @param y 滚动距离
@@ -84,6 +125,12 @@ const Wheel = (props: RedsWheel) => {
     let contentOffset = e.nativeEvent.contentOffset;
     const selectIndex = Math.round(contentOffset.y / itemHeight);
     setIndex(selectIndex);
+    const newVal = column?.[selectIndex]?.value;
+    setLastValue(newVal);
+  };
+
+  const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    setScrollHeight(e.nativeEvent.contentOffset.y);
   };
 
   const handleClick = (index: number) => {
@@ -124,6 +171,9 @@ const Wheel = (props: RedsWheel) => {
       decelerationRate="fast"
       snapToInterval={itemHeight}
       onMomentumScrollEnd={onMomentumScrollEnd}
+      onScrollEndDrag={onScrollEndDrag}
+      onScroll={onScroll}
+      scrollEventThrottle={16}
       testID={`wheel${props.index}`}
       {...accessibility}
     >

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

@@ -19,6 +19,6 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Events
 
-| 事件     | 描述     | 类型                    | 默认值   |
-| -------- | -------- | ----------------------- | -------- |
-| onChange | 选择变化 | (val: string[]) => void | () => {} |
+| 事件     | 描述     | 类型                       | 默认值      |
+| -------- | -------- | -------------------------- | ----------- |
+| onChange | 选择变化 | (val: string[]) => void | () => {} |

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

@@ -12,7 +12,7 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | ------------------ | --------------------------------- | --------------------------------------------------------------------------------------------------- | --------------- |
 | visible            | 是否显示气泡                      | boolean                                                                                             | undefined       |
 | placement          | 气泡方向                          | "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end" | top             |
-| content            | 弹出内容                          | ReactNode | (() => ReactNode)                                                                  |                 |
+| content            | 弹出内容                          | ReactNode | (() => ReactNode)                                                               |                 |
 | opacity            | 遮罩透明度                        | number                                                                                              | 0               |
 | mode               | 主题色                            | "light" | "dark" | "alwaysLight" | "alwaysDark"                                      | light           |
 | trigger            | 触发方式                          | "click" | "touch"                                                                              | click           |
@@ -33,7 +33,7 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Events
 
-| 事件            | 描述              | 类型                                   | 默认值 |
-| --------------- | ----------------- | -------------------------------------- | ------ |
-| onClickMask     | 点击遮罩层时触发  | (evnet: GestureResponderEvent) => void |        |
-| onVisibleChange | visible改变时触发 | (value: boolean) => void               |        |
+| 事件            | 描述              | 类型                                      | 默认值 |
+| --------------- | ----------------- | ----------------------------------------- | ------ |
+| onClickMask     | 点击遮罩层时触发  | (evnet: GestureResponderEvent) => void |        |
+| onVisibleChange | visible改变时触发 | (value: boolean) => void               |        |

package/src/components/Portal/core/PortalHost.tsx

@@ -1,4 +1,5 @@
 import React, { memo, useEffect } from "react";
+import { View } from "react-native";
 import { usePortalState } from "./hooks/usePortalState";
 import { usePortal } from "./hooks/usePortal";
 import { PortalHostProps } from "../interface";
@@ -16,7 +17,7 @@ const PortalHostComponent = ({ name }: PortalHostProps) => {
   return (
     <>
       {state.map((item, index) => {
-        return item.node;
+        return <React.Fragment key={`protal-key-${item.name}`}>{item.node}</React.Fragment>;
       })}
     </>
   );

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/Refresh.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useMemo } from "react";
 import { View, StyleSheet, Animated, Easing } from "react-native";
-import Svg, { Path } from "react-native-svg";
+import Svg, { Path } from "@xhs/reds-components/libs/svg";
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 

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 |        |