fix(sacmii#87): attempted to fix sacmii#87 but this is causing slider…

… value to reset each render
ryancat · Jun 20, 2023 · 214c018 · 214c018
1 parent a31b5e4
commit 214c018
Showing 1 changed file with 68 additions and 57 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -100,24 +100,6 @@ const VerticalSlider: React.FC<SliderProps> = ({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   React.useEffect(calculateValues, []);
 
-  const _calculateValue = (gestureState: PanResponderGestureState) => {
-    const ratio = -gestureState.dy / height;
-    const diff = max - min;
-    return step
-      ? Math.max(
-          min,
-          Math.min(
-            max,
-            // @ts-ignore
-            _moveStartValue.value + Math.round((ratio * diff) / step) * step
-          )
-        )
-      : Math.floor(
-          // @ts-ignore
-          Math.max(min, _moveStartValue.value + ratio * diff) * 100
-        ) / 100;
-  };
-
   // Make values stable stand in between min and max
   const _clamp = (newValue: number, minValue: number, maxValue: number) => {
     return Math.min(Math.max(newValue, minValue), maxValue);
@@ -129,53 +111,82 @@ const VerticalSlider: React.FC<SliderProps> = ({
     value.setValue(valueToUpdate);
   };
 
-  // PanResponder handlers
-  const onStartShouldSetPanResponder = () => true;
-  const onMoveShouldSetPanResponder = () => false;
-  const onPanResponderTerminationRequest = () => false;
-  const onPanResponderGrant = () => {
-    _moveStartValue.value = _value.value;
-  };
-  const onPanResponderMove = (
-    _event: GestureResponderEvent,
-    gestureState: PanResponderGestureState
-  ) => {
-    if (disabled) {
-      return;
-    }
-    onChange(_calculateValue(gestureState));
-  };
-  const onPanResponderRelease = (
-    _event: GestureResponderEvent,
-    gestureState: PanResponderGestureState
-  ) => {
-    if (disabled) {
-      return;
-    }
-    onChange(_calculateValue(gestureState));
-  };
-  const onPanResponderTerminate = (
-    _event: GestureResponderEvent,
-    gestureState: PanResponderGestureState
-  ) => {
-    if (disabled) {
-      return;
-    }
-    onComplete(_calculateValue(gestureState));
-  };
-  // End PanResponder handlers
   // Value connected to state, slider height Animated Value, ballHeight Animated Value, panResponder
-  const panResponder = React.useRef(
-    PanResponder.create({
+  const panResponder = React.useMemo(() => {
+    const _calculateValue = (gestureState: PanResponderGestureState) => {
+      const ratio = -gestureState.dy / height;
+      const diff = max - min;
+      return step
+        ? Math.max(
+            min,
+            Math.min(
+              max,
+              // @ts-ignore
+              _moveStartValue.value + Math.round((ratio * diff) / step) * step
+            )
+          )
+        : Math.floor(
+            // @ts-ignore
+            Math.max(min, _moveStartValue.value + ratio * diff) * 100
+          ) / 100;
+    };
+
+    // PanResponder handlers
+    const onStartShouldSetPanResponder = () => true;
+    const onMoveShouldSetPanResponder = () => false;
+    const onPanResponderTerminationRequest = () => false;
+    const onPanResponderGrant = () => {
+      _moveStartValue.value = _value.value;
+    };
+    const onPanResponderMove = (
+      _event: GestureResponderEvent,
+      gestureState: PanResponderGestureState
+    ) => {
+      if (disabled) {
+        return;
+      }
+      onChange(_calculateValue(gestureState));
+    };
+    const onPanResponderRelease = (
+      _event: GestureResponderEvent,
+      gestureState: PanResponderGestureState
+    ) => {
+      if (disabled) {
+        return;
+      }
+      onChange(_calculateValue(gestureState));
+    };
+    const onPanResponderTerminate = (
+      _event: GestureResponderEvent,
+      gestureState: PanResponderGestureState
+    ) => {
+      if (disabled) {
+        return;
+      }
+      onComplete(_calculateValue(gestureState));
+    };
+    // End PanResponder handlers
+
+    return PanResponder.create({
       onStartShouldSetPanResponder,
       onMoveShouldSetPanResponder,
       onPanResponderTerminationRequest,
       onPanResponderGrant,
       onPanResponderMove,
       onPanResponderRelease,
       onPanResponderTerminate,
-    })
-  ).current;
+    });
+  }, [
+    _moveStartValue,
+    _value.value,
+    disabled,
+    height,
+    max,
+    min,
+    onChange,
+    onComplete,
+    step,
+  ]);
   // End Value connected to state, slider height Animated Value, ballHeight Animated Value, panResponder
 
   const sliderStyle = useAnimatedStyle(