@xhsreds/reds-rn-next 0.10.1-beta202512092141 → 0.10.1-beta202512101131

package/src/components/PickerView/Wheel.tsx

@@ -15,31 +15,71 @@ const Wheel = (props: RedsWheel) => {
    */
   const scrollerRef = useRef();
 
-  /**
-   * themeColor
-   */
-  const themeColor = useThemeColor();
+  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);
-      handleScroll(idx);
+      setIndex(idx);
     }
   }, [column, value]);
 
-  const handleScroll = (idx: number) => {
-    const newVal = column?.[idx]?.value;
-    scrollTo(idx * itemHeight);
+  /**
+   * themeColor
+   */
+  const themeColor = useThemeColor();
+
+  /**
+   * index
+   */
+  const [index, setIndex] = useState<any>();
+
+  const timer = useRef<any>();
+
+  /**
+   * 初始化滚动高度
+   */
+  useEffect(() => {
+    value && setIndex(getSelectIndex(column, value));
+  }, [column, value]);
+
+  useEffect(() => {
+    const newVal = column?.[index]?.value;
+    scrollTo(index * itemHeight);
     if (newVal) {
-      setLastValue(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
@@ -84,13 +124,17 @@ const Wheel = (props: RedsWheel) => {
     e.persist?.();
     let contentOffset = e.nativeEvent.contentOffset;
     const selectIndex = Math.round(contentOffset.y / itemHeight);
+    setIndex(selectIndex);
     const newVal = column?.[selectIndex]?.value;
     setLastValue(newVal);
-    onSelect(newVal, props.index);
+  };
+
+  const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    setScrollHeight(e.nativeEvent.contentOffset.y);
   };
 
   const handleClick = (index: number) => {
-    handleScroll(index);
+    setIndex(index);
   };
 
   /**
@@ -127,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/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/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 "@xhs/reds-components/libs/svg";
+import Svg, { Path } from "react-native-svg";
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 

package/src/components/Skeleton/Item/SkeletonItem.tsx

@@ -3,7 +3,7 @@ import { View, Easing, Animated, Text } from "react-native";
 import { RedsSkeletonItem, SkeletonItemDefaultProps } from "./interface/index";
 import createStyles from "./styles";
 import { useThemeColor } from "../../ConfigProvider";
-import Svg, { Defs, LinearGradient, Stop, Rect, ClipPath } from "@xhs/reds-components/libs/svg";
+import Svg, { Defs, LinearGradient, Stop, Rect, ClipPath } from "react-native-svg";
 
 const RectAnimation = Animated.createAnimatedComponent(Rect);
 

package/src/components/Stepper/Stepper.tsx

@@ -84,7 +84,7 @@ const Stepper = (props: RedsStepper) => {
   }, [colorMode]);
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, props.style]}>
       <TouchableWithoutFeedback onPress={() => handleNumber("min")}>
         <View style={[styles.icon, minus]}>
           <Image source={{ uri: minusImage }} style={[styles.minus]} />

package/src/components/Stepper/demo/index.tsx

@@ -21,7 +21,7 @@ export default function App() {
   return (
     <View style={styles.container}>
       <Text>基础用法</Text>
-      <Stepper value={value} onChange={handleChange} />
+      <Stepper value={value} onChange={handleChange} style={{ width: 200 }} />
 
       <Text>基础用法(非受控)</Text>
       <Stepper isControl={false} />

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

@@ -17,6 +17,7 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | min       | 最小值     | number  |        |
 | disable   | disable    | boolean | false  |
 | isControl | 是否受控   | boolean | true   |
+| style     | style      | any     |        |
 
 ### Events
 

package/src/components/Stepper/interface/index.ts

@@ -7,6 +7,7 @@ export interface RedsStepper {
   disable?: boolean;
   onChange?: (value: number) => any;
   isControl?: boolean;
+  style?: any;
 }
 
 export interface RedsStepperEvent {}

package/src/components/Stepper/styles.ts

@@ -5,7 +5,8 @@ export const getStyles = (themeColor: any, typography: any) => {
       display: "flex",
       flexDirection: "row",
       alignItems: "center",
-      justifyContent: "center",
+      justifyContent: "space-between",
+      width: 72,
     },
     opacity: {
       opacity: 0.5,
@@ -21,7 +22,6 @@ export const getStyles = (themeColor: any, typography: any) => {
       lineHeight: 20,
     },
     text: {
-      paddingHorizontal: 8,
       fontWeight: typography.B1LooseFontWeight,
       fontSize: typography.T3FontSize,
       color: themeColor.Title,