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

package/src/components/PickerView/Wheel.tsx

@@ -15,71 +15,31 @@ 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
    */
   const themeColor = useThemeColor();
 
-  /**
-   * index
-   */
-  const [index, setIndex] = useState<any>();
-
-  const timer = useRef<any>();
+  const [lastValue, setLastValue] = useState(value);
 
   /**
    * 初始化滚动高度
    */
   useEffect(() => {
-    value && setIndex(getSelectIndex(column, value));
+    if (value !== lastValue) {
+      const idx = getSelectIndex(column, value);
+      handleScroll(idx);
+    }
   }, [column, value]);
 
-  useEffect(() => {
-    const newVal = column?.[index]?.value;
-    scrollTo(index * itemHeight);
+  const handleScroll = (idx: number) => {
+    const newVal = column?.[idx]?.value;
+    scrollTo(idx * itemHeight);
     if (newVal) {
-      onSelect(newVal, props.index);
       setLastValue(newVal);
+      onSelect(newVal, props.index);
     }
-  }, [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
@@ -124,17 +84,13 @@ 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);
-  };
-
-  const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-    setScrollHeight(e.nativeEvent.contentOffset.y);
+    onSelect(newVal, props.index);
   };
 
   const handleClick = (index: number) => {
-    setIndex(index);
+    handleScroll(index);
   };
 
   /**
@@ -171,9 +127,6 @@ 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,5 +1,4 @@
 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";
@@ -17,7 +16,7 @@ const PortalHostComponent = ({ name }: PortalHostProps) => {
   return (
     <>
       {state.map((item, index) => {
-        return <React.Fragment key={`protal-key-${item.name}`}>{item.node}</React.Fragment>;
+        return item.node;
       })}
     </>
   );

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/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 "react-native-svg";
+import Svg, { Defs, LinearGradient, Stop, Rect, ClipPath } from "@xhs/reds-components/libs/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, props.style]}>
+    <View style={styles.container}>
       <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} style={{ width: 200 }} />
+      <Stepper value={value} onChange={handleChange} />
 
       <Text>基础用法(非受控)</Text>
       <Stepper isControl={false} />

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

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

package/src/components/Stepper/styles.ts

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