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

package/lib/cjs/components/Slider/Slider.js

@@ -22,18 +22,14 @@ var Slider = function Slider(_ref) {
     _ref$dotStyle = _ref.dotStyle,
     dotStyle = _ref$dotStyle === void 0 ? {} : _ref$dotStyle;
   pvCount_useUnmountedProcess.default("Slider");
-  var _useState = React.useState(reactNative.PanResponder.create({})),
+  var _useState = React.useState(reactNative.Dimensions.get("window").width * 0.8),
     _useState2 = _rollupPluginBabelHelpers._slicedToArray(_useState, 2),
-    panResponder = _useState2[0],
-    setPanResponder = _useState2[1];
-  var _useState3 = React.useState(reactNative.Dimensions.get("window").width * 0.8),
+    sliderWidth = _useState2[0],
+    setSliderWidth = _useState2[1];
+  var _useState3 = React.useState(initalValue),
     _useState4 = _rollupPluginBabelHelpers._slicedToArray(_useState3, 2),
-    sliderWidth = _useState4[0],
-    setSliderWidth = _useState4[1];
-  var _useState5 = React.useState(initalValue),
-    _useState6 = _rollupPluginBabelHelpers._slicedToArray(_useState5, 2),
-    value = _useState6[0],
-    setValue = _useState6[1];
+    value = _useState4[0],
+    setValue = _useState4[1];
   if (max < min) {
     return;
   }
@@ -46,7 +42,6 @@ var Slider = function Slider(_ref) {
       setSliderWidth(reactNative.Dimensions.get("window").width * 0.8);
     };
     var subscription = reactNative.Dimensions.addEventListener("change", handleOrientationChange);
-    createPanResponder();
     return function () {
       subscription.remove();
     };
@@ -62,22 +57,26 @@ var Slider = function Slider(_ref) {
   var handleLayout = function handleLayout(event) {
     setSliderWidth(event.nativeEvent.layout.width);
   };
-  var createPanResponder = function createPanResponder() {
-    setPanResponder(reactNative.PanResponder.create({
+  var panResponder = React.useMemo(function () {
+    return reactNative.PanResponder.create({
       onStartShouldSetPanResponder: function onStartShouldSetPanResponder() {
         return true;
       },
       onMoveShouldSetPanResponder: function onMoveShouldSetPanResponder() {
         return true;
       },
-      onPanResponderGrant: function onPanResponderGrant() {},
-      onPanResponderRelease: function onPanResponderRelease() {},
+      onPanResponderGrant: function onPanResponderGrant() {
+        return true;
+      },
+      onPanResponderRelease: function onPanResponderRelease() {
+        return true;
+      },
       onPanResponderTerminate: function onPanResponderTerminate() {},
       onPanResponderMove: function onPanResponderMove(evt, gestureState) {
         hanleValueUpdate(gestureState);
       }
-    }));
-  };
+    });
+  }, []);
   var styles2 = reactNative.StyleSheet.create({
     sliderContainer: {
       flexDirection: "row",
@@ -113,9 +112,7 @@ var Slider = function Slider(_ref) {
       elevation: 2
     }
   });
-  return /* @__PURE__ */React.createElement(reactNative.TouchableWithoutFeedback, {
-    onPress: function onPress(e) {}
-  }, /* @__PURE__ */React.createElement(reactNative.View, {
+  return /* @__PURE__ */React.createElement(reactNative.View, {
     style: styles2.sliderContainer,
     onLayout: handleLayout
   }, /* @__PURE__ */React.createElement(reactNative.View, {
@@ -124,13 +121,20 @@ var Slider = function Slider(_ref) {
     style: [styles2.coloredTrack, {
       width: animatedValue
     }]
-  }), /* @__PURE__ */React.createElement(reactNative.Animated.View, _rollupPluginBabelHelpers._objectSpread2({
+  }), /* @__PURE__ */React.createElement(reactNative.Animated.View, _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({
     style: [styles2.thumbButton, {
       transform: [{
         translateX: animatedValue
       }]
     }, dotStyle]
-  }, panResponder.panHandlers)))));
+  }, panResponder.panHandlers), {}, {
+    hitSlop: {
+      top: 20,
+      bottom: 20,
+      left: 20,
+      right: 20
+    }
+  }))));
 };
 Slider.defaultProps = components_Slider_interface_index.SliderDefaultProps;
 

package/lib/cjs/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo, useCallback } from \"react\";\nimport {\n  View,\n  TouchableWithoutFeedback,\n  Animated,\n  StyleSheet,\n  Dimensions,\n  GestureResponderEvent,\n  PanResponder,\n  LayoutChangeEvent,\n  PanResponderGestureState,\n} from \"react-native\";\n\nimport { RedsSlider, SliderDefaultProps } from \"./interface/index\";\nimport styles from \"./styles\";\nimport useMounted from \"../../pvCount/useUnmountedProcess\";\n\nconst Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChange, dotStyle = {} }: RedsSlider) => {\n  useMounted(\"Slider\");\n  const [panResponder, setPanResponder] = useState(PanResponder.create({}));\n  const [sliderWidth, setSliderWidth] = useState(Dimensions.get(\"window\").width * 0.8);\n  const [value, setValue] = useState(initalValue);\n\n  if (max < min) {\n    return;\n  }\n  if (value < min || value > max) {\n    return;\n  }\n\n  const thumbPosition = (value / (max - min)) * sliderWidth;\n  const step = 1;\n  const animatedValue = useRef(new Animated.Value((initalValue * sliderWidth) / (max - min))).current;\n  useEffect(() => {\n    const handleOrientationChange = () => {\n      setSliderWidth(Dimensions.get(\"window\").width * 0.8);\n    };\n\n    const subscription = Dimensions.addEventListener(\"change\", handleOrientationChange);\n    createPanResponder();\n    return () => {\n      subscription.remove();\n      //Dimensions.removeEventListener(\"change\", handleOrientationChange);\n    };\n  }, []);\n\n  // 可以根据需要调整的滑块高度\n  const hanleValueUpdate = (gestureState: PanResponderGestureState) => {\n    const currentValue = Math.max(min, Math.min(max, (gestureState.dx / sliderWidth) * (max - min) + initalValue));\n\n    setValue(currentValue);\n    animatedValue.setValue((currentValue * sliderWidth) / (max - min));\n    if (onValueChange) {\n      onValueChange(currentValue);\n    }\n  };\n\n  const handleLayout = (event: LayoutChangeEvent) => {\n    setSliderWidth(event.nativeEvent.layout.width);\n  };\n\n  const createPanResponder = () => {\n    setPanResponder(\n      PanResponder.create({\n        onStartShouldSetPanResponder: () => true,\n        onMoveShouldSetPanResponder: () => true,\n        onPanResponderGrant: () => {},\n        onPanResponderRelease: () => {},\n        onPanResponderTerminate: () => {},\n        onPanResponderMove: (evt, gestureState) => {\n          hanleValueUpdate(gestureState);\n        },\n      }),\n    );\n  };\n\n  const styles = StyleSheet.create({\n    sliderContainer: {\n      flexDirection: \"row\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n    },\n    trackContainer: {\n      width: \"80%\",\n      height: 4,\n      backgroundColor: \"rgba(48, 48, 52, 0.20)\",\n      borderRadius: 2,\n    },\n    coloredTrack: {\n      height: 4,\n      backgroundColor: \"#FF2442\",\n      borderRadius: 2,\n    },\n    thumbButton: {\n      width: 16,\n      height: 16,\n      position: \"absolute\",\n      top: -8,\n      borderRadius: 10,\n      backgroundColor: \"#FFF\",\n      shadowColor: \"rgba(0, 0, 0, 0.20)\",\n      shadowOffset: { width: 0, height: 1 },\n      shadowOpacity: 1,\n      shadowRadius: 4,\n      //Android\n      elevation: 2,\n    },\n  });\n\n  //<View style={[styles.track, { width: sliderWidth }]}>\n  //<View style={[styles.thumb, { left: thumbPosition }]} {...panResponder.panHandlers} />\n  //</View>\n  return (\n    <TouchableWithoutFeedback onPress={(e) => {}}>\n      <View style={styles.sliderContainer} onLayout={handleLayout}>\n        <View style={styles.trackContainer}>\n          <Animated.View style={[styles.coloredTrack, { width: animatedValue }]} />\n          <Animated.View\n            style={[styles.thumbButton, { transform: [{ translateX: animatedValue }] }, dotStyle]}\n            {...panResponder.panHandlers}\n          />\n        </View>\n      </View>\n    </TouchableWithoutFeedback>\n  );\n};\n\nSlider.defaultProps = SliderDefaultProps;\nexport default Slider;\n"],"names":["Slider","_ref","defaultValue","_ref$min","min","_ref$max","max","_ref$initalValue","initalValue","onValueChange","_ref$dotStyle","dotStyle","useMounted","_useState","useState","PanResponder","create","_useState2","_slicedToArray","panResponder","setPanResponder","_useState3","Dimensions","get","width","_useState4","sliderWidth","setSliderWidth","_useState5","_useState6","value","setValue","animatedValue","useRef","Animated","Value","current","useEffect","handleOrientationChange","subscription","addEventListener","createPanResponder","remove","hanleValueUpdate","gestureState","currentValue","Math","dx","handleLayout","event","nativeEvent","layout","onStartShouldSetPanResponder","onMoveShouldSetPanResponder","onPanResponderGrant","onPanResponderRelease","onPanResponderTerminate","onPanResponderMove","evt","styles","StyleSheet","sliderContainer","flexDirection","alignItems","justifyContent","trackContainer","height","backgroundColor","borderRadius","coloredTrack","thumbButton","position","top","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","React","createElement","TouchableWithoutFeedback","onPress","e","View","style","onLayout","_objectSpread","transform","translateX","panHandlers","defaultProps","SliderDefaultProps"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo, useCallback } from \"react\";\nimport {\n  View,\n  TouchableWithoutFeedback,\n  Animated,\n  StyleSheet,\n  Dimensions,\n  GestureResponderEvent,\n  PanResponder,\n  LayoutChangeEvent,\n  PanResponderGestureState,\n} from \"react-native\";\n\nimport { RedsSlider, SliderDefaultProps } from \"./interface/index\";\nimport styles from \"./styles\";\nimport useMounted from \"../../pvCount/useUnmountedProcess\";\n\nconst Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChange, dotStyle = {} }: RedsSlider) => {\n  useMounted(\"Slider\");\n  const [sliderWidth, setSliderWidth] = useState(Dimensions.get(\"window\").width * 0.8);\n  const [value, setValue] = useState(initalValue);\n\n  if (max < min) {\n    return;\n  }\n  if (value < min || value > max) {\n    return;\n  }\n\n  const thumbPosition = (value / (max - min)) * sliderWidth;\n  const step = 1;\n  const animatedValue = useRef(new Animated.Value((initalValue * sliderWidth) / (max - min))).current;\n  useEffect(() => {\n    const handleOrientationChange = () => {\n      setSliderWidth(Dimensions.get(\"window\").width * 0.8);\n    };\n\n    const subscription = Dimensions.addEventListener(\"change\", handleOrientationChange);\n    return () => {\n      subscription.remove();\n      //Dimensions.removeEventListener(\"change\", handleOrientationChange);\n    };\n  }, []);\n\n  // 可以根据需要调整的滑块高度\n  const hanleValueUpdate = (gestureState: PanResponderGestureState) => {\n    const currentValue = Math.max(min, Math.min(max, (gestureState.dx / sliderWidth) * (max - min) + initalValue));\n\n    setValue(currentValue);\n    animatedValue.setValue((currentValue * sliderWidth) / (max - min));\n    if (onValueChange) {\n      onValueChange(currentValue);\n    }\n  };\n\n  const handleLayout = (event: LayoutChangeEvent) => {\n    setSliderWidth(event.nativeEvent.layout.width);\n  };\n\n  const panResponder = useMemo(\n    () =>\n      PanResponder.create({\n        onStartShouldSetPanResponder: () => true,\n        onMoveShouldSetPanResponder: () => true,\n        onPanResponderGrant: () => true,\n        onPanResponderRelease: () => true,\n        onPanResponderTerminate: () => {},\n        onPanResponderMove: (evt, gestureState) => {\n          hanleValueUpdate(gestureState);\n        },\n      }),\n    [],\n  );\n\n  const styles = StyleSheet.create({\n    sliderContainer: {\n      flexDirection: \"row\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n    },\n    trackContainer: {\n      width: \"80%\",\n      height: 4,\n      backgroundColor: \"rgba(48, 48, 52, 0.20)\",\n      borderRadius: 2,\n    },\n    coloredTrack: {\n      height: 4,\n      backgroundColor: \"#FF2442\",\n      borderRadius: 2,\n    },\n    thumbButton: {\n      width: 16,\n      height: 16,\n      position: \"absolute\",\n      top: -8,\n      borderRadius: 10,\n      backgroundColor: \"#FFF\",\n      shadowColor: \"rgba(0, 0, 0, 0.20)\",\n      shadowOffset: { width: 0, height: 1 },\n      shadowOpacity: 1,\n      shadowRadius: 4,\n      //Android\n      elevation: 2,\n    },\n  });\n\n  return (\n    <View style={styles.sliderContainer} onLayout={handleLayout}>\n      <View style={styles.trackContainer}>\n        <Animated.View style={[styles.coloredTrack, { width: animatedValue }]} />\n        <Animated.View\n          style={[styles.thumbButton, { transform: [{ translateX: animatedValue }] }, dotStyle]}\n          {...panResponder.panHandlers}\n          hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}\n        />\n      </View>\n    </View>\n  );\n};\n\nSlider.defaultProps = SliderDefaultProps;\nexport default Slider;\n"],"names":["Slider","_ref","defaultValue","_ref$min","min","_ref$max","max","_ref$initalValue","initalValue","onValueChange","_ref$dotStyle","dotStyle","useMounted","_useState","useState","Dimensions","get","width","_useState2","_slicedToArray","sliderWidth","setSliderWidth","_useState3","_useState4","value","setValue","animatedValue","useRef","Animated","Value","current","useEffect","handleOrientationChange","subscription","addEventListener","remove","hanleValueUpdate","gestureState","currentValue","Math","dx","handleLayout","event","nativeEvent","layout","panResponder","useMemo","PanResponder","create","onStartShouldSetPanResponder","onMoveShouldSetPanResponder","onPanResponderGrant","onPanResponderRelease","onPanResponderTerminate","onPanResponderMove","evt","styles","StyleSheet","sliderContainer","flexDirection","alignItems","justifyContent","trackContainer","height","backgroundColor","borderRadius","coloredTrack","thumbButton","position","top","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","React","createElement","View","style","onLayout","_objectSpread","transform","translateX","panHandlers","hitSlop","bottom","left","right","defaultProps","SliderDefaultProps"],"mappings":"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"}

package/lib/esm/components/Slider/Slider.js

@@ -1,6 +1,6 @@
 import { _ as _slicedToArray, a as _objectSpread2 } from '../../_chunks/CAkwE9ZD.js';
-import React, { useState, useRef, useEffect } from 'react';
-import { PanResponder, Dimensions, Animated, StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
+import React, { useState, useRef, useEffect, useMemo } from 'react';
+import { Dimensions, Animated, PanResponder, StyleSheet, View } from 'react-native';
 import { S as SliderDefaultProps } from '../../_chunks/BwgGhxV7.js';
 import useMounted from '../../pvCount/useUnmountedProcess.js';
 import '@xhs/reds-apm/src/index.native';
@@ -18,18 +18,14 @@ var Slider = function Slider(_ref) {
     _ref$dotStyle = _ref.dotStyle,
     dotStyle = _ref$dotStyle === void 0 ? {} : _ref$dotStyle;
   useMounted("Slider");
-  var _useState = useState(PanResponder.create({})),
+  var _useState = useState(Dimensions.get("window").width * 0.8),
     _useState2 = _slicedToArray(_useState, 2),
-    panResponder = _useState2[0],
-    setPanResponder = _useState2[1];
-  var _useState3 = useState(Dimensions.get("window").width * 0.8),
+    sliderWidth = _useState2[0],
+    setSliderWidth = _useState2[1];
+  var _useState3 = useState(initalValue),
     _useState4 = _slicedToArray(_useState3, 2),
-    sliderWidth = _useState4[0],
-    setSliderWidth = _useState4[1];
-  var _useState5 = useState(initalValue),
-    _useState6 = _slicedToArray(_useState5, 2),
-    value = _useState6[0],
-    setValue = _useState6[1];
+    value = _useState4[0],
+    setValue = _useState4[1];
   if (max < min) {
     return;
   }
@@ -42,7 +38,6 @@ var Slider = function Slider(_ref) {
       setSliderWidth(Dimensions.get("window").width * 0.8);
     };
     var subscription = Dimensions.addEventListener("change", handleOrientationChange);
-    createPanResponder();
     return function () {
       subscription.remove();
     };
@@ -58,22 +53,26 @@ var Slider = function Slider(_ref) {
   var handleLayout = function handleLayout(event) {
     setSliderWidth(event.nativeEvent.layout.width);
   };
-  var createPanResponder = function createPanResponder() {
-    setPanResponder(PanResponder.create({
+  var panResponder = useMemo(function () {
+    return PanResponder.create({
       onStartShouldSetPanResponder: function onStartShouldSetPanResponder() {
         return true;
       },
       onMoveShouldSetPanResponder: function onMoveShouldSetPanResponder() {
         return true;
       },
-      onPanResponderGrant: function onPanResponderGrant() {},
-      onPanResponderRelease: function onPanResponderRelease() {},
+      onPanResponderGrant: function onPanResponderGrant() {
+        return true;
+      },
+      onPanResponderRelease: function onPanResponderRelease() {
+        return true;
+      },
       onPanResponderTerminate: function onPanResponderTerminate() {},
       onPanResponderMove: function onPanResponderMove(evt, gestureState) {
         hanleValueUpdate(gestureState);
       }
-    }));
-  };
+    });
+  }, []);
   var styles2 = StyleSheet.create({
     sliderContainer: {
       flexDirection: "row",
@@ -109,9 +108,7 @@ var Slider = function Slider(_ref) {
       elevation: 2
     }
   });
-  return /* @__PURE__ */React.createElement(TouchableWithoutFeedback, {
-    onPress: function onPress(e) {}
-  }, /* @__PURE__ */React.createElement(View, {
+  return /* @__PURE__ */React.createElement(View, {
     style: styles2.sliderContainer,
     onLayout: handleLayout
   }, /* @__PURE__ */React.createElement(View, {
@@ -120,13 +117,20 @@ var Slider = function Slider(_ref) {
     style: [styles2.coloredTrack, {
       width: animatedValue
     }]
-  }), /* @__PURE__ */React.createElement(Animated.View, _objectSpread2({
+  }), /* @__PURE__ */React.createElement(Animated.View, _objectSpread2(_objectSpread2({
     style: [styles2.thumbButton, {
       transform: [{
         translateX: animatedValue
       }]
     }, dotStyle]
-  }, panResponder.panHandlers)))));
+  }, panResponder.panHandlers), {}, {
+    hitSlop: {
+      top: 20,
+      bottom: 20,
+      left: 20,
+      right: 20
+    }
+  }))));
 };
 Slider.defaultProps = SliderDefaultProps;
 

package/lib/esm/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo, useCallback } from \"react\";\nimport {\n  View,\n  TouchableWithoutFeedback,\n  Animated,\n  StyleSheet,\n  Dimensions,\n  GestureResponderEvent,\n  PanResponder,\n  LayoutChangeEvent,\n  PanResponderGestureState,\n} from \"react-native\";\n\nimport { RedsSlider, SliderDefaultProps } from \"./interface/index\";\nimport styles from \"./styles\";\nimport useMounted from \"../../pvCount/useUnmountedProcess\";\n\nconst Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChange, dotStyle = {} }: RedsSlider) => {\n  useMounted(\"Slider\");\n  const [panResponder, setPanResponder] = useState(PanResponder.create({}));\n  const [sliderWidth, setSliderWidth] = useState(Dimensions.get(\"window\").width * 0.8);\n  const [value, setValue] = useState(initalValue);\n\n  if (max < min) {\n    return;\n  }\n  if (value < min || value > max) {\n    return;\n  }\n\n  const thumbPosition = (value / (max - min)) * sliderWidth;\n  const step = 1;\n  const animatedValue = useRef(new Animated.Value((initalValue * sliderWidth) / (max - min))).current;\n  useEffect(() => {\n    const handleOrientationChange = () => {\n      setSliderWidth(Dimensions.get(\"window\").width * 0.8);\n    };\n\n    const subscription = Dimensions.addEventListener(\"change\", handleOrientationChange);\n    createPanResponder();\n    return () => {\n      subscription.remove();\n      //Dimensions.removeEventListener(\"change\", handleOrientationChange);\n    };\n  }, []);\n\n  // 可以根据需要调整的滑块高度\n  const hanleValueUpdate = (gestureState: PanResponderGestureState) => {\n    const currentValue = Math.max(min, Math.min(max, (gestureState.dx / sliderWidth) * (max - min) + initalValue));\n\n    setValue(currentValue);\n    animatedValue.setValue((currentValue * sliderWidth) / (max - min));\n    if (onValueChange) {\n      onValueChange(currentValue);\n    }\n  };\n\n  const handleLayout = (event: LayoutChangeEvent) => {\n    setSliderWidth(event.nativeEvent.layout.width);\n  };\n\n  const createPanResponder = () => {\n    setPanResponder(\n      PanResponder.create({\n        onStartShouldSetPanResponder: () => true,\n        onMoveShouldSetPanResponder: () => true,\n        onPanResponderGrant: () => {},\n        onPanResponderRelease: () => {},\n        onPanResponderTerminate: () => {},\n        onPanResponderMove: (evt, gestureState) => {\n          hanleValueUpdate(gestureState);\n        },\n      }),\n    );\n  };\n\n  const styles = StyleSheet.create({\n    sliderContainer: {\n      flexDirection: \"row\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n    },\n    trackContainer: {\n      width: \"80%\",\n      height: 4,\n      backgroundColor: \"rgba(48, 48, 52, 0.20)\",\n      borderRadius: 2,\n    },\n    coloredTrack: {\n      height: 4,\n      backgroundColor: \"#FF2442\",\n      borderRadius: 2,\n    },\n    thumbButton: {\n      width: 16,\n      height: 16,\n      position: \"absolute\",\n      top: -8,\n      borderRadius: 10,\n      backgroundColor: \"#FFF\",\n      shadowColor: \"rgba(0, 0, 0, 0.20)\",\n      shadowOffset: { width: 0, height: 1 },\n      shadowOpacity: 1,\n      shadowRadius: 4,\n      //Android\n      elevation: 2,\n    },\n  });\n\n  //<View style={[styles.track, { width: sliderWidth }]}>\n  //<View style={[styles.thumb, { left: thumbPosition }]} {...panResponder.panHandlers} />\n  //</View>\n  return (\n    <TouchableWithoutFeedback onPress={(e) => {}}>\n      <View style={styles.sliderContainer} onLayout={handleLayout}>\n        <View style={styles.trackContainer}>\n          <Animated.View style={[styles.coloredTrack, { width: animatedValue }]} />\n          <Animated.View\n            style={[styles.thumbButton, { transform: [{ translateX: animatedValue }] }, dotStyle]}\n            {...panResponder.panHandlers}\n          />\n        </View>\n      </View>\n    </TouchableWithoutFeedback>\n  );\n};\n\nSlider.defaultProps = SliderDefaultProps;\nexport default Slider;\n"],"names":["Slider","_ref","defaultValue","_ref$min","min","_ref$max","max","_ref$initalValue","initalValue","onValueChange","_ref$dotStyle","dotStyle","useMounted","_useState","useState","PanResponder","create","_useState2","_slicedToArray","panResponder","setPanResponder","_useState3","Dimensions","get","width","_useState4","sliderWidth","setSliderWidth","_useState5","_useState6","value","setValue","animatedValue","useRef","Animated","Value","current","useEffect","handleOrientationChange","subscription","addEventListener","createPanResponder","remove","hanleValueUpdate","gestureState","currentValue","Math","dx","handleLayout","event","nativeEvent","layout","onStartShouldSetPanResponder","onMoveShouldSetPanResponder","onPanResponderGrant","onPanResponderRelease","onPanResponderTerminate","onPanResponderMove","evt","styles","StyleSheet","sliderContainer","flexDirection","alignItems","justifyContent","trackContainer","height","backgroundColor","borderRadius","coloredTrack","thumbButton","position","top","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","React","createElement","TouchableWithoutFeedback","onPress","e","View","style","onLayout","_objectSpread","transform","translateX","panHandlers","defaultProps","SliderDefaultProps"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo, useCallback } from \"react\";\nimport {\n  View,\n  TouchableWithoutFeedback,\n  Animated,\n  StyleSheet,\n  Dimensions,\n  GestureResponderEvent,\n  PanResponder,\n  LayoutChangeEvent,\n  PanResponderGestureState,\n} from \"react-native\";\n\nimport { RedsSlider, SliderDefaultProps } from \"./interface/index\";\nimport styles from \"./styles\";\nimport useMounted from \"../../pvCount/useUnmountedProcess\";\n\nconst Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChange, dotStyle = {} }: RedsSlider) => {\n  useMounted(\"Slider\");\n  const [sliderWidth, setSliderWidth] = useState(Dimensions.get(\"window\").width * 0.8);\n  const [value, setValue] = useState(initalValue);\n\n  if (max < min) {\n    return;\n  }\n  if (value < min || value > max) {\n    return;\n  }\n\n  const thumbPosition = (value / (max - min)) * sliderWidth;\n  const step = 1;\n  const animatedValue = useRef(new Animated.Value((initalValue * sliderWidth) / (max - min))).current;\n  useEffect(() => {\n    const handleOrientationChange = () => {\n      setSliderWidth(Dimensions.get(\"window\").width * 0.8);\n    };\n\n    const subscription = Dimensions.addEventListener(\"change\", handleOrientationChange);\n    return () => {\n      subscription.remove();\n      //Dimensions.removeEventListener(\"change\", handleOrientationChange);\n    };\n  }, []);\n\n  // 可以根据需要调整的滑块高度\n  const hanleValueUpdate = (gestureState: PanResponderGestureState) => {\n    const currentValue = Math.max(min, Math.min(max, (gestureState.dx / sliderWidth) * (max - min) + initalValue));\n\n    setValue(currentValue);\n    animatedValue.setValue((currentValue * sliderWidth) / (max - min));\n    if (onValueChange) {\n      onValueChange(currentValue);\n    }\n  };\n\n  const handleLayout = (event: LayoutChangeEvent) => {\n    setSliderWidth(event.nativeEvent.layout.width);\n  };\n\n  const panResponder = useMemo(\n    () =>\n      PanResponder.create({\n        onStartShouldSetPanResponder: () => true,\n        onMoveShouldSetPanResponder: () => true,\n        onPanResponderGrant: () => true,\n        onPanResponderRelease: () => true,\n        onPanResponderTerminate: () => {},\n        onPanResponderMove: (evt, gestureState) => {\n          hanleValueUpdate(gestureState);\n        },\n      }),\n    [],\n  );\n\n  const styles = StyleSheet.create({\n    sliderContainer: {\n      flexDirection: \"row\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n    },\n    trackContainer: {\n      width: \"80%\",\n      height: 4,\n      backgroundColor: \"rgba(48, 48, 52, 0.20)\",\n      borderRadius: 2,\n    },\n    coloredTrack: {\n      height: 4,\n      backgroundColor: \"#FF2442\",\n      borderRadius: 2,\n    },\n    thumbButton: {\n      width: 16,\n      height: 16,\n      position: \"absolute\",\n      top: -8,\n      borderRadius: 10,\n      backgroundColor: \"#FFF\",\n      shadowColor: \"rgba(0, 0, 0, 0.20)\",\n      shadowOffset: { width: 0, height: 1 },\n      shadowOpacity: 1,\n      shadowRadius: 4,\n      //Android\n      elevation: 2,\n    },\n  });\n\n  return (\n    <View style={styles.sliderContainer} onLayout={handleLayout}>\n      <View style={styles.trackContainer}>\n        <Animated.View style={[styles.coloredTrack, { width: animatedValue }]} />\n        <Animated.View\n          style={[styles.thumbButton, { transform: [{ translateX: animatedValue }] }, dotStyle]}\n          {...panResponder.panHandlers}\n          hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}\n        />\n      </View>\n    </View>\n  );\n};\n\nSlider.defaultProps = SliderDefaultProps;\nexport default Slider;\n"],"names":["Slider","_ref","defaultValue","_ref$min","min","_ref$max","max","_ref$initalValue","initalValue","onValueChange","_ref$dotStyle","dotStyle","useMounted","_useState","useState","Dimensions","get","width","_useState2","_slicedToArray","sliderWidth","setSliderWidth","_useState3","_useState4","value","setValue","animatedValue","useRef","Animated","Value","current","useEffect","handleOrientationChange","subscription","addEventListener","remove","hanleValueUpdate","gestureState","currentValue","Math","dx","handleLayout","event","nativeEvent","layout","panResponder","useMemo","PanResponder","create","onStartShouldSetPanResponder","onMoveShouldSetPanResponder","onPanResponderGrant","onPanResponderRelease","onPanResponderTerminate","onPanResponderMove","evt","styles","StyleSheet","sliderContainer","flexDirection","alignItems","justifyContent","trackContainer","height","backgroundColor","borderRadius","coloredTrack","thumbButton","position","top","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","React","createElement","View","style","onLayout","_objectSpread","transform","translateX","panHandlers","hitSlop","bottom","left","right","defaultProps","SliderDefaultProps"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xhsreds/reds-rn-next",
-  "version": "0.10.1-beta202511041914",
+  "version": "0.10.1-beta202511051512",
   "author": "贾斌(呀哈) <jiabin@xiaohongshu.com>",
   "license": "ISC",
   "dependencies": {
@@ -26,7 +26,7 @@
     "react-native-fs": "2.20.0",
     "react-native-svg": "13.14.0",
     "@xhs/react-native-harmony": "*",
-    "@xhsreds/reds-token-next": "0.10.1-beta202511041914"
+    "@xhsreds/reds-token-next": "0.10.1-beta202511051512"
   },
   "peerDependenciesMeta": {
     "ozone-schema-web": {

package/src/components/Slider/Slider.tsx

@@ -17,7 +17,6 @@ import useMounted from "../../pvCount/useUnmountedProcess";
 
 const Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChange, dotStyle = {} }: RedsSlider) => {
   useMounted("Slider");
-  const [panResponder, setPanResponder] = useState(PanResponder.create({}));
   const [sliderWidth, setSliderWidth] = useState(Dimensions.get("window").width * 0.8);
   const [value, setValue] = useState(initalValue);
 
@@ -37,7 +36,6 @@ const Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChan
     };
 
     const subscription = Dimensions.addEventListener("change", handleOrientationChange);
-    createPanResponder();
     return () => {
       subscription.remove();
       //Dimensions.removeEventListener("change", handleOrientationChange);
@@ -59,20 +57,20 @@ const Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChan
     setSliderWidth(event.nativeEvent.layout.width);
   };
 
-  const createPanResponder = () => {
-    setPanResponder(
+  const panResponder = useMemo(
+    () =>
       PanResponder.create({
         onStartShouldSetPanResponder: () => true,
         onMoveShouldSetPanResponder: () => true,
-        onPanResponderGrant: () => {},
-        onPanResponderRelease: () => {},
+        onPanResponderGrant: () => true,
+        onPanResponderRelease: () => true,
         onPanResponderTerminate: () => {},
         onPanResponderMove: (evt, gestureState) => {
           hanleValueUpdate(gestureState);
         },
       }),
-    );
-  };
+    [],
+  );
 
   const styles = StyleSheet.create({
     sliderContainer: {
@@ -107,21 +105,17 @@ const Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChan
     },
   });
 
-  //<View style={[styles.track, { width: sliderWidth }]}>
-  //<View style={[styles.thumb, { left: thumbPosition }]} {...panResponder.panHandlers} />
-  //</View>
   return (
-    <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 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}
+          hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
+        />
       </View>
-    </TouchableWithoutFeedback>
+    </View>
   );
 };