@xhsreds/reds-rn-next 0.10.1-beta202511201716 → 0.10.1-fix-pull-refresh-animated202511211152

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/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="占位符" />

package/src/i18n/@types/resources.d.ts

@@ -1,32 +1,32 @@
 interface Resources {
   componentKey: {
-    sureKey: "確定";
-    satisfyKey: "滿意";
-    confirmKey: "確認";
-    uploadingKey: "上傳中";
-    resetKey: "重置";
-    NoDataKey: "暫無數據";
-    liveStreamingKey: "直播";
-    generallyKey: "一般";
-    uploadFailedKey: "上傳失敗";
-    submitKey: "提交";
-    requestSuccessfulKey: "請求成功";
-    cancelKey: "取消";
-    PullDownToRefreshKey: "下拉重繪";
-    selectAllKey: "全選";
-    requestDataKey: "請求數據中";
-    closeKey: "收起";
-    veryBadKey: "極差";
-    searchKey: "蒐索";
-    expandKey: "展開";
-    IDCardPhotoKey: "身份證人像面";
-    finishKey: "完成";
-    surpriseKey: "驚喜";
-    releaseRefreshKey: "鬆開重繪";
-    nationalEmblemSideOfIDCardKey: "身份证国徽面";
-    buttonKey: "按鈕";
-    jumpKey: "跳轉";
-    disappointmentKey: "失望";
+    sureKey: "Confirm";
+    satisfyKey: "Satisfy";
+    confirmKey: "Confirm";
+    uploadingKey: "Uploading";
+    resetKey: "Reset";
+    NoDataKey: "No data available at the moment";
+    liveStreamingKey: "live";
+    generallyKey: "Generally";
+    uploadFailedKey: "Upload failed";
+    submitKey: "Submit";
+    requestSuccessfulKey: "Request successful";
+    cancelKey: "Cancel";
+    PullDownToRefreshKey: "Pull down to refresh";
+    selectAllKey: "SelectAll";
+    requestDataKey: "Request data";
+    closeKey: "Close";
+    veryBadKey: "Very bad";
+    searchKey: "Search";
+    expandKey: "Expand";
+    IDCardPhotoKey: "ID card photo";
+    finishKey: "Finish";
+    surpriseKey: "Surprise";
+    releaseRefreshKey: "Release refresh";
+    nationalEmblemSideOfIDCardKey: "National emblem side of ID card";
+    buttonKey: "Button";
+    jumpKey: "Jump";
+    disappointmentKey: "Disappointment";
   };
 }
 export default Resources;

package/src/i18n/index.json

@@ -1,35 +1,4 @@
 {
-  "zh_tw": {
-    "componentKey": {
-      "sureKey": "確定",
-      "satisfyKey": "滿意",
-      "confirmKey": "確認",
-      "uploadingKey": "上傳中",
-      "resetKey": "重置",
-      "NoDataKey": "暫無數據",
-      "liveStreamingKey": "直播",
-      "generallyKey": "一般",
-      "uploadFailedKey": "上傳失敗",
-      "submitKey": "提交",
-      "requestSuccessfulKey": "請求成功",
-      "cancelKey": "取消",
-      "PullDownToRefreshKey": "下拉重繪",
-      "selectAllKey": "全選",
-      "requestDataKey": "請求數據中",
-      "closeKey": "收起",
-      "veryBadKey": "極差",
-      "searchKey": "蒐索",
-      "expandKey": "展開",
-      "IDCardPhotoKey": "身份證人像面",
-      "finishKey": "完成",
-      "surpriseKey": "驚喜",
-      "releaseRefreshKey": "鬆開重繪",
-      "nationalEmblemSideOfIDCardKey": "身份证国徽面",
-      "buttonKey": "按鈕",
-      "jumpKey": "跳轉",
-      "disappointmentKey": "失望"
-    }
-  },
   "en_us": {
     "componentKey": {
       "sureKey": "Confirm",
@@ -91,5 +60,36 @@
       "jumpKey": "跳转",
       "disappointmentKey": "失望"
     }
+  },
+  "zh_tw": {
+    "componentKey": {
+      "sureKey": "確定",
+      "satisfyKey": "滿意",
+      "confirmKey": "確認",
+      "uploadingKey": "上傳中",
+      "resetKey": "重置",
+      "NoDataKey": "暫無數據",
+      "liveStreamingKey": "直播",
+      "generallyKey": "一般",
+      "uploadFailedKey": "上傳失敗",
+      "submitKey": "提交",
+      "requestSuccessfulKey": "請求成功",
+      "cancelKey": "取消",
+      "PullDownToRefreshKey": "下拉重繪",
+      "selectAllKey": "全選",
+      "requestDataKey": "請求數據中",
+      "closeKey": "收起",
+      "veryBadKey": "極差",
+      "searchKey": "蒐索",
+      "expandKey": "展開",
+      "IDCardPhotoKey": "身份證人像面",
+      "finishKey": "完成",
+      "surpriseKey": "驚喜",
+      "releaseRefreshKey": "鬆開重繪",
+      "nationalEmblemSideOfIDCardKey": "身份证国徽面",
+      "buttonKey": "按鈕",
+      "jumpKey": "跳轉",
+      "disappointmentKey": "失望"
+    }
   }
 }