@xhsreds/reds-rn-next 0.10.1-beta202512041155 → 0.10.1-feat-sheets-anim202512041203

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,7 +183,7 @@ const AnimatedSheets = forwardRef((props: RedsSheets, ref) => {
     Animated.timing(translateY, {
       toValue: 0, // 移动到目标位置（顶部）
       useNativeDriver: true,
-      duration: 150,
+      duration: openAnimation?.duration ?? 150,
       easing: Easing.ease,
     }).start();
   };
@@ -243,7 +245,7 @@ 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, // 动画缓动函数
       }).start(() => {
@@ -351,7 +353,7 @@ const AnimatedSheets = forwardRef((props: RedsSheets, ref) => {
       Animated.timing(translateY, {
         toValue: screenHeight || Dimensions.get("screen").height, // 移动到屏幕底部
         useNativeDriver: true,
-        duration: 150,
+        duration: closeAnimation?.duration ?? 150,
         easing: Easing.ease,
       }).start((data) => {
         if (data.finished) {
@@ -370,7 +372,7 @@ const AnimatedSheets = forwardRef((props: RedsSheets, ref) => {
       Animated.timing(translateY, {
         toValue: screenHeight || Dimensions.get("screen").height, // 移动到屏幕底部
         useNativeDriver: true,
-        duration: 150,
+        duration: closeAnimation?.duration ?? 150,
         easing: Easing.ease,
       }).start((data) => {
         if (data.finished) {
@@ -402,127 +404,123 @@ const AnimatedSheets = forwardRef((props: RedsSheets, ref) => {
       ) : (
         <></>
       )}
-      {_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>
+      <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 />
               ) : (
                 <></>
-              )}
-              {!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}>
+              )
+            ) : (
+              <TouchableOpacity onPress={handleCancel} activeOpacity={1}>
+                {cancelType === SheetsActionType.text ? (
+                  <Text style={[styles.cancel, { color: themeColor.Title }]} testID="cancel">
                     {cancelText || cancelKey}
-                  </Button>
-                </View>
-              ) : (
-                <></>
-              )}
-              {close ? (
-                <View style={styles.action}>
-                  <Button block onClick={handleConfirm} type="primary">
-                    {closeText || sureKey}
-                  </Button>
-                </View>
+                  </Text>
+                ) : (
+                  iconWrapper("cancel")
+                )}
+              </TouchableOpacity>
+            )}
+            {label ? (
+              <Text style={[styles.label, { color: themeColor.Title }]}>
+                {label}
+                {showMask}
+              </Text>
+            ) : (
+              <></>
+            )}
+            {!close ? (
+              props.headlerLayout === "center" ? (
+                <Block />
               ) : (
                 <></>
-              )}
-            </View>
-          ) : (
-            <></>
-          )}
-        </Animated.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>
     </>
   );
 });

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

@@ -38,6 +38,14 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | onImmediateConfirm | 点击确定弹窗立即执行               | () => void             | () => {}                |
 | avoidSheetsMove    | 安卓上是否阻止键盘弹出弹窗位置上移 | boolean                | false                   |
 | headlerLayout      | headlerLayout                      | "center" | "left" | center                  |
+| openAnimation      | openAnimation                      | {                      |
+
+    duration?: number
+
+} | `{}` |
+| closeAnimation | openAnimation | {
+duration?: number
+} | `{}` |
 
 ### Events
 

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

@@ -33,6 +33,11 @@ export const enum AnimatedSheetsSize {
   auto = "auto",
   fixed = "fixed",
 }
+
+export interface SheetAnimationConfig {
+  /** Duration in milliseconds. Default: 150 */
+  duration?: number;
+}
 export interface RedsSheets {
   label?: string;
   mask?: boolean;
@@ -63,6 +68,12 @@ export interface RedsSheets {
   onImmediateConfirm?: () => void;
   avoidSheetsMove?: boolean;
   headlerLayout?: "center" | "left";
+  openAnimation?: {
+    duration?: number;
+  };
+  closeAnimation?: {
+    duration?: number;
+  };
 }
 
 export interface RedsSheetsEvent {}
@@ -91,4 +102,6 @@ export const SheetsDefaultProps = {
   onImmediateConfirm: () => {},
   avoidSheetsMove: false,
   headlerLayout: "center",
+  openAnimation: {},
+  closeAnimation: {},
 };

package/src/components/Slider/Slider.tsx

@@ -15,17 +15,10 @@ import { RedsSlider, SliderDefaultProps } from "./interface/index";
 import styles from "./styles";
 import useMounted from "../../pvCount/useUnmountedProcess";
 
-const Slider = ({
-  defaultValue,
-  min = 0,
-  max = 100,
-  initalValue = 0,
-  onValueChange,
-  dotStyle = {},
-  step = 1,
-}: RedsSlider) => {
+const Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChange, dotStyle = {} }: RedsSlider) => {
   useMounted("Slider");
-  const [sliderWidth, setSliderWidth] = useState(Dimensions.get("window").width);
+  const [panResponder, setPanResponder] = useState(PanResponder.create({}));
+  const [sliderWidth, setSliderWidth] = useState(Dimensions.get("window").width * 0.8);
   const [value, setValue] = useState(initalValue);
 
   if (max < min) {
@@ -35,109 +28,51 @@ const Slider = ({
     return;
   }
 
-  // 添加一个函数来计算最接近的step值
-  const getSteppedValue = useCallback(
-    (rawValue: number) => {
-      const steppedValue = Math.round((rawValue - min) / step) * step + min;
-      return Math.max(min, Math.min(max, steppedValue));
-    },
-    [min, max, step],
-  );
-
+  const thumbPosition = (value / (max - min)) * sliderWidth;
+  const step = 1;
   const animatedValue = useRef(new Animated.Value((initalValue * sliderWidth) / (max - min))).current;
-
-  const animatedThumbValue = useRef(
-    new Animated.Value(
-      (initalValue * sliderWidth) / (max - min) > 0
-        ? (initalValue * sliderWidth) / (max - min) - 8
-        : (initalValue * sliderWidth) / (max - min),
-    ),
-  ).current;
-
   useEffect(() => {
     const handleOrientationChange = () => {
-      setSliderWidth(Dimensions.get("window").width);
+      setSliderWidth(Dimensions.get("window").width * 0.8);
     };
 
     const subscription = Dimensions.addEventListener("change", handleOrientationChange);
+    createPanResponder();
     return () => {
       subscription.remove();
+      //Dimensions.removeEventListener("change", handleOrientationChange);
     };
   }, []);
 
   // 可以根据需要调整的滑块高度
-  const hanleValueUpdate = useCallback(
-    (gestureState: PanResponderGestureState) => {
-      // 计算原始值
-      const rawValue = Math.max(min, Math.min(max, (gestureState.dx / sliderWidth) * (max - min) + initalValue));
-      // 根据step计算实际值
-      const steppedValue = getSteppedValue(rawValue);
-
-      setValue(steppedValue);
-      animatedValue.setValue((steppedValue * sliderWidth) / (max - min));
-      animatedThumbValue.setValue(
-        (steppedValue * sliderWidth) / (max - min) > 0
-          ? (steppedValue * sliderWidth) / (max - min) - 8
-          : (steppedValue * sliderWidth) / (max - min),
-      );
-
-      if (onValueChange) {
-        onValueChange(steppedValue);
-      }
-    },
-    [min, max, sliderWidth, initalValue, step, getSteppedValue, onValueChange],
-  );
-
-  // 添加点击轨道跳转功能（可选）
-  const handleTrackPress = useCallback(
-    (event: GestureResponderEvent) => {
-      const { locationX } = event.nativeEvent;
-      const rawValue = (locationX / sliderWidth) * (max - min) + min;
-      const steppedValue = getSteppedValue(rawValue);
-
-      setValue(steppedValue);
-
-      // 使用动画过渡到新位置
-      Animated.timing(animatedValue, {
-        toValue: (steppedValue * sliderWidth) / (max - min),
-        duration: 200,
-        useNativeDriver: false,
-      }).start();
-
-      Animated.timing(animatedThumbValue, {
-        toValue:
-          (steppedValue * sliderWidth) / (max - min) > 0
-            ? (steppedValue * sliderWidth) / (max - min) - 8
-            : (steppedValue * sliderWidth) / (max - min),
-        duration: 200,
-        useNativeDriver: false,
-      }).start();
-
-      if (onValueChange) {
-        onValueChange(steppedValue);
-      }
-    },
-    [sliderWidth, min, max, getSteppedValue, onValueChange, animatedValue, animatedThumbValue],
-  );
+  const hanleValueUpdate = (gestureState: PanResponderGestureState) => {
+    const currentValue = Math.max(min, Math.min(max, (gestureState.dx / sliderWidth) * (max - min) + initalValue));
+
+    setValue(currentValue);
+    animatedValue.setValue((currentValue * sliderWidth) / (max - min));
+    if (onValueChange) {
+      onValueChange(currentValue);
+    }
+  };
 
   const handleLayout = (event: LayoutChangeEvent) => {
     setSliderWidth(event.nativeEvent.layout.width);
   };
 
-  const panResponder = useMemo(
-    () =>
+  const createPanResponder = () => {
+    setPanResponder(
       PanResponder.create({
         onStartShouldSetPanResponder: () => true,
         onMoveShouldSetPanResponder: () => true,
-        onPanResponderGrant: () => true,
-        onPanResponderRelease: () => true,
+        onPanResponderGrant: () => {},
+        onPanResponderRelease: () => {},
         onPanResponderTerminate: () => {},
         onPanResponderMove: (evt, gestureState) => {
           hanleValueUpdate(gestureState);
         },
       }),
-    [hanleValueUpdate],
-  );
+    );
+  };
 
   const styles = StyleSheet.create({
     sliderContainer: {
@@ -146,7 +81,7 @@ const Slider = ({
       justifyContent: "center",
     },
     trackContainer: {
-      width: "100%",
+      width: "80%",
       height: 4,
       backgroundColor: "rgba(48, 48, 52, 0.20)",
       borderRadius: 2,
@@ -172,22 +107,21 @@ const Slider = ({
     },
   });
 
+  //<View style={[styles.track, { width: sliderWidth }]}>
+  //<View style={[styles.thumb, { left: thumbPosition }]} {...panResponder.panHandlers} />
+  //</View>
   return (
-    <View style={styles.sliderContainer}>
-      <View style={styles.trackContainer} onLayout={handleLayout}>
-        {/* 添加可点击的轨道 */}
-        <TouchableWithoutFeedback onPress={handleTrackPress}>
-          <View style={{ position: "absolute", width: "100%", height: 4 }} />
-        </TouchableWithoutFeedback>
-
-        <Animated.View style={[styles.coloredTrack, { width: animatedValue }]} />
-        <Animated.View
-          style={[styles.thumbButton, { transform: [{ translateX: animatedThumbValue }] }, dotStyle]}
-          {...panResponder.panHandlers}
-          hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
-        />
+    <TouchableWithoutFeedback onPress={(e) => {}}>
+      <View style={styles.sliderContainer} onLayout={handleLayout}>
+        <View style={styles.trackContainer}>
+          <Animated.View style={[styles.coloredTrack, { width: animatedValue }]} />
+          <Animated.View
+            style={[styles.thumbButton, { transform: [{ translateX: animatedValue }] }, dotStyle]}
+            {...panResponder.panHandlers}
+          />
+        </View>
       </View>
-    </View>
+    </TouchableWithoutFeedback>
   );
 };
 

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

@@ -8,7 +8,6 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     paddingTop: 100,
     paddingBottom: 100,
-    paddingHorizontal: 50,
   },
   scrollView: {
     backgroundColor: "pink",
@@ -45,23 +44,6 @@ export default function App() {
       <Br />
       <Slider min={200} max={100}></Slider>
       <Br />
-      <Desc>step使用示例</Desc>
-      <Slider
-        min={0}
-        max={100}
-        step={10} // 每次移动10个单位
-        initalValue={0}
-        onValueChange={(value: any) => console.log("Current value:", value)}
-      />
-      <Br />
-      <Desc>step使用示例(或者更小的步长)</Desc>
-      <Slider
-        min={0}
-        max={1}
-        step={0.1} // 每次移动0.1个单位
-        initalValue={0.5}
-        onValueChange={(value: any) => console.log("Current value:", value)}
-      />
     </View>
   );
 }

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,

package/src/components/TextView/TextView.tsx

@@ -68,8 +68,7 @@ const TextField = forwardRef((props: RedsTextView, ref) => {
 
   const handleChangeText = useCallback(
     (value: string) => {
-      const filteredValue = props.returnKeyType !== "next" ? value.replace(/\n/g, "") : value;
-      updateValue(filteredValue);
+      updateValue(value);
       // Only apply cursor fix on iOS when text equals maxLength (indicating truncation)
       if (Platform.OS === "ios" && maxLength && value.length >= maxLength && inputRef.current) {
         // Use requestAnimationFrame instead of setTimeout
@@ -135,10 +134,8 @@ const TextField = forwardRef((props: RedsTextView, ref) => {
   }, [layout]);
 
   const handleKeyPress = ({ nativeEvent }: any) => {
-    if (nativeEvent.key === "Enter") {
-      if (props.returnKeyType !== "next") {
-        Keyboard.dismiss();
-      }
+    if (nativeEvent.key === "Enter" && props.returnKeyType !== "next") {
+      Keyboard.dismiss();
     }
   };
 

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

@@ -26,7 +26,7 @@ export default function App() {
         clearable
         actionLayout={"horizontal"}
         autofocus={true}
-        returnKeyType={"done"}
+        returnKeyType={"search"}
       />
       <Desc>最大长度</Desc>
       <TextView modelValue={modelValue} maxLength={100} showCount placeholder="占位符" />