@xhsreds/reds-rn-next 0.10.1-beta202511241537 → 0.10.1-beta202512021041

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