From 41e8d70bde95e42824153f1c9f95d8a297d94b90 Mon Sep 17 00:00:00 2001
From: Jose-Luis Landabaso <landabaso@gmail.com>
Date: Fri, 22 Dec 2023 16:34:54 +0100
Subject: [PATCH] Web-Specific Fixes for onValueChange and Deprecated React
 Methods (#563)

* Fix web-specific onValueChange behavior and deprecate React methods

- Modify onValueChange in RNCSliderNativeComponent.web.tsx for web platform to ensure it's called only during user interaction.
- Replace deprecated StyleSheet.compose with array syntax in Slider.tsx and RNCSliderNativeComponent.web.tsx.

* Fix linting issues and improve code formatting in slider component

- Adjust onResponderMove and closing tag syntax for better readability and consistency
- Ensure adherence to project's linting rules for cleaner code structure

* Fix snapshot test issues by refining style definition in Slider

- Adjust the style array in Slider.tsx to conditionally include props.style
- Resolve snapshot test failures by preventing inclusion of undefined in style array
- Eliminate the need for updating snapshots as component rendering remains consistent
---
 package/src/RNCSliderNativeComponent.web.tsx | 17 +++++++++++------
 package/src/Slider.tsx                       |  2 +-
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/package/src/RNCSliderNativeComponent.web.tsx b/package/src/RNCSliderNativeComponent.web.tsx
index e25a64ad..67db17fc 100644
--- a/package/src/RNCSliderNativeComponent.web.tsx
+++ b/package/src/RNCSliderNativeComponent.web.tsx
@@ -4,7 +4,6 @@ import React, {RefObject, useCallback} from 'react';
 import {
   Animated,
   View,
-  StyleSheet,
   ColorValue,
   ViewStyle,
   GestureResponderEvent,
@@ -118,6 +117,7 @@ const RCTSliderWebComponent = React.forwardRef(
 
     const onSlidingStart = useCallback(
       (value: number) => {
+        isUserInteracting.current = true;
         onRNCSliderSlidingStart && onRNCSliderSlidingStart(valueToEvent(value));
       },
       [onRNCSliderSlidingStart],
@@ -125,11 +125,14 @@ const RCTSliderWebComponent = React.forwardRef(
 
     const onSlidingComplete = useCallback(
       (value: number) => {
+        isUserInteracting.current = false;
         onRNCSliderSlidingComplete &&
           onRNCSliderSlidingComplete(valueToEvent(value));
       },
       [onRNCSliderSlidingComplete],
     );
+    // Add a ref to track user interaction
+    const isUserInteracting = React.useRef(false);
     const updateValue = useCallback(
       (newValue: number) => {
         // Ensure that the value is correctly rounded
@@ -145,7 +148,9 @@ const RCTSliderWebComponent = React.forwardRef(
         );
         if (value !== withinBounds) {
           setValue(withinBounds);
-          onValueChange(withinBounds);
+          if (isUserInteracting.current) {
+            onValueChange(withinBounds);
+          }
           return withinBounds;
         }
         return hardRounded;
@@ -197,7 +202,7 @@ const RCTSliderWebComponent = React.forwardRef(
       };
     }, [containerRef]);
 
-    const containerStyle = StyleSheet.compose(
+    const containerStyle = [
       {
         flexGrow: 1,
         flexShrink: 1,
@@ -206,7 +211,7 @@ const RCTSliderWebComponent = React.forwardRef(
         alignItems: 'center',
       },
       style,
-    );
+    ] as ViewStyle[];
 
     const trackStyle = {
       height: trackHeight,
@@ -226,7 +231,7 @@ const RCTSliderWebComponent = React.forwardRef(
       flexGrow: maxPercent,
     };
 
-    const thumbViewStyle = StyleSheet.compose(
+    const thumbViewStyle = [
       {
         width: thumbSize,
         height: thumbSize,
@@ -236,7 +241,7 @@ const RCTSliderWebComponent = React.forwardRef(
         overflow: 'hidden',
       },
       thumbStyle,
-    );
+    ] as ViewStyle[];
 
     const decimalPrecision = React.useRef(
       calculatePrecision(minimumValue, maximumValue, step),
diff --git a/package/src/Slider.tsx b/package/src/Slider.tsx
index a553a398..9564082d 100644
--- a/package/src/Slider.tsx
+++ b/package/src/Slider.tsx
@@ -192,7 +192,7 @@ const SliderComponent = (
   props: Props,
   forwardedRef?: Ref<typeof RCTSliderNativeComponent>,
 ) => {
-  const style = StyleSheet.compose(props.style, styles.slider);
+  const style = props.style ? [props.style, styles.slider] : styles.slider;
 
   const {
     onValueChange,