@xhsreds/reds-rn-next 0.10.1-fix-pull-refresh202511272021 → 0.11.1-beta202512161327

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

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>
+      ) : (
+        <></>
+      )}
     </>
   );
 });