@xhsreds/reds-rn-next 0.10.1-beta202511051512 → 0.10.1-beta202511062045

package/src/components/Sheets/AnimatedSheets.tsx

@@ -402,123 +402,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>
+      ) : (
+        <></>
+      )}
     </>
   );
 });

package/src/components/Slider/Slider.tsx

@@ -15,9 +15,17 @@ 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 = {} }: RedsSlider) => {
+const Slider = ({
+  defaultValue,
+  min = 0,
+  max = 100,
+  initalValue = 0,
+  onValueChange,
+  dotStyle = {},
+  step = 1,
+}: RedsSlider) => {
   useMounted("Slider");
-  const [sliderWidth, setSliderWidth] = useState(Dimensions.get("window").width * 0.8);
+  const [sliderWidth, setSliderWidth] = useState(Dimensions.get("window").width);
   const [value, setValue] = useState(initalValue);
 
   if (max < min) {
@@ -27,31 +35,90 @@ const Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChan
     return;
   }
 
-  const thumbPosition = (value / (max - min)) * sliderWidth;
-  const step = 1;
+  // 添加一个函数来计算最接近的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 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 * 0.8);
+      setSliderWidth(Dimensions.get("window").width);
     };
 
     const subscription = Dimensions.addEventListener("change", handleOrientationChange);
     return () => {
       subscription.remove();
-      //Dimensions.removeEventListener("change", handleOrientationChange);
     };
   }, []);
 
   // 可以根据需要调整的滑块高度
-  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 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 handleLayout = (event: LayoutChangeEvent) => {
     setSliderWidth(event.nativeEvent.layout.width);
@@ -69,7 +136,7 @@ const Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChan
           hanleValueUpdate(gestureState);
         },
       }),
-    [],
+    [hanleValueUpdate],
   );
 
   const styles = StyleSheet.create({
@@ -79,7 +146,7 @@ const Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChan
       justifyContent: "center",
     },
     trackContainer: {
-      width: "80%",
+      width: "100%",
       height: 4,
       backgroundColor: "rgba(48, 48, 52, 0.20)",
       borderRadius: 2,
@@ -106,11 +173,16 @@ const Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChan
   });
 
   return (
-    <View style={styles.sliderContainer} onLayout={handleLayout}>
-      <View style={styles.trackContainer}>
+    <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: animatedValue }] }, dotStyle]}
+          style={[styles.thumbButton, { transform: [{ translateX: animatedThumbValue }] }, dotStyle]}
           {...panResponder.panHandlers}
           hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
         />

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

@@ -8,6 +8,7 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     paddingTop: 100,
     paddingBottom: 100,
+    paddingHorizontal: 50,
   },
   scrollView: {
     backgroundColor: "pink",
@@ -44,6 +45,23 @@ 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>
   );
 }