From d86ddb1c90bee1f449e3c46b263f080404e55cf4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Landabaso=20D=C3=ADaz?= Date: Sun, 17 Dec 2023 10:51:47 +0100 Subject: [PATCH 1/3] 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. --- package/src/RNCSliderNativeComponent.web.tsx | 20 +++++++++++++------- package/src/Slider.tsx | 2 +- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/package/src/RNCSliderNativeComponent.web.tsx b/package/src/RNCSliderNativeComponent.web.tsx index e25a64ad..bfe3cff8 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, - ); + ]; 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, - ); + ]; const decimalPrecision = React.useRef( calculatePrecision(minimumValue, maximumValue, step), @@ -339,7 +344,8 @@ const RCTSliderWebComponent = React.forwardRef( onMoveShouldSetResponder={() => !disabled} onResponderGrant={() => onSlidingStart(value)} onResponderRelease={onTouchEnd} - onResponderMove={onMove}> + onResponderMove={onMove} + > {thumbImage !== undefined ? ( diff --git a/package/src/Slider.tsx b/package/src/Slider.tsx index a553a398..09137335 100644 --- a/package/src/Slider.tsx +++ b/package/src/Slider.tsx @@ -192,7 +192,7 @@ const SliderComponent = ( props: Props, forwardedRef?: Ref, ) => { - const style = StyleSheet.compose(props.style, styles.slider); + const style = [props.style, styles.slider]; const { onValueChange, From 0ddb47c5efe6e66a3bcf8c8ccbd1416f0c72d30f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Landabaso=20D=C3=ADaz?= Date: Sun, 17 Dec 2023 16:41:51 +0100 Subject: [PATCH 2/3] 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 --- package/src/RNCSliderNativeComponent.web.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/package/src/RNCSliderNativeComponent.web.tsx b/package/src/RNCSliderNativeComponent.web.tsx index bfe3cff8..67db17fc 100644 --- a/package/src/RNCSliderNativeComponent.web.tsx +++ b/package/src/RNCSliderNativeComponent.web.tsx @@ -211,7 +211,7 @@ const RCTSliderWebComponent = React.forwardRef( alignItems: 'center', }, style, - ]; + ] as ViewStyle[]; const trackStyle = { height: trackHeight, @@ -241,7 +241,7 @@ const RCTSliderWebComponent = React.forwardRef( overflow: 'hidden', }, thumbStyle, - ]; + ] as ViewStyle[]; const decimalPrecision = React.useRef( calculatePrecision(minimumValue, maximumValue, step), @@ -344,8 +344,7 @@ const RCTSliderWebComponent = React.forwardRef( onMoveShouldSetResponder={() => !disabled} onResponderGrant={() => onSlidingStart(value)} onResponderRelease={onTouchEnd} - onResponderMove={onMove} - > + onResponderMove={onMove}> {thumbImage !== undefined ? ( From 989700d399f8775016cea426fdaa7b91c31accb3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Landabaso=20D=C3=ADaz?= Date: Sun, 17 Dec 2023 17:05:51 +0100 Subject: [PATCH 3/3] 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/Slider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package/src/Slider.tsx b/package/src/Slider.tsx index 09137335..9564082d 100644 --- a/package/src/Slider.tsx +++ b/package/src/Slider.tsx @@ -192,7 +192,7 @@ const SliderComponent = ( props: Props, forwardedRef?: Ref, ) => { - const style = [props.style, styles.slider]; + const style = props.style ? [props.style, styles.slider] : styles.slider; const { onValueChange,