From 0a1c61d8e43ac1f976e069e5ff6a2893ccfa8a4a Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 3 Jun 2024 13:04:58 +0530 Subject: [PATCH] fix: slider disabled state --- packages/unstyled/slider/src/Slider.tsx | 29 ++++++++----------- .../unstyled/slider/src/SliderFilledTrack.tsx | 26 +++++++---------- packages/unstyled/slider/src/SliderThumb.tsx | 27 +++++++---------- packages/unstyled/slider/src/SliderTrack.tsx | 25 +++++++--------- 4 files changed, 43 insertions(+), 64 deletions(-) diff --git a/packages/unstyled/slider/src/Slider.tsx b/packages/unstyled/slider/src/Slider.tsx index 14103ac182..950e78f00f 100644 --- a/packages/unstyled/slider/src/Slider.tsx +++ b/packages/unstyled/slider/src/Slider.tsx @@ -77,27 +77,22 @@ function Slider( ); const contextValue = React.useMemo(() => { return { + isDisabled: isDisabled || isDisabledProp, + isFocused: isFocused || isFocusedProp, + isFocusVisible: isFocusVisible || isFocusVisibleProp, + isPressed: isPressed || isPressedProp, + isHovered: isHovered || isHoveredProp, + isReadOnly, + isReversed, trackLayout, state, - orientation: orientation, - isDisabled: isDisabled, - isFocused: isFocused, - setIsFocused: setIsFocused, - isFocusVisible: isFocusVisible, - setIsFocusVisible: setIsFocusVisible, - isPressed: isPressed, - setIsPressed: setIsPressed, - isHovered: isHovered, - setIsHovered: setIsHovered, - isReversed: isReversed, + orientation, + setIsFocused, + setIsFocusVisible, + setIsPressed, + setIsHovered, trackProps, - isReadOnly: isReadOnly, onTrackLayout: onLayout, - isHoveredProp, - isDisabledProp, - isFocusedProp, - isFocusVisibleProp, - isPressedProp, }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [ diff --git a/packages/unstyled/slider/src/SliderFilledTrack.tsx b/packages/unstyled/slider/src/SliderFilledTrack.tsx index 69b0c180f5..e9a1e08eb9 100644 --- a/packages/unstyled/slider/src/SliderFilledTrack.tsx +++ b/packages/unstyled/slider/src/SliderFilledTrack.tsx @@ -27,11 +27,6 @@ function SliderFilledTrack( isHovered, isPressed, isFocusVisible, - isHoveredProp, - isDisabledProp, - isFocusedProp, - isFocusVisibleProp, - isPressedProp, } = React.useContext(SliderContext); const getSliderTrackPosition = () => { @@ -62,19 +57,18 @@ function SliderFilledTrack( ref={mergeRefs([_ref, ref])} style={[style, positionProps]} states={{ - hover: isHovered || isHoveredProp, - disabled: isDisabled || isDisabledProp, - focus: isFocused || isFocusedProp, - focusVisible: isFocusVisible || isFocusVisibleProp, - active: isPressed || isPressedProp, + hover: isHovered, + disabled: isDisabled, + focus: isFocused, + focusVisible: isFocusVisible, + active: isPressed, }} dataSet={{ - hover: isHovered || isHoveredProp ? 'true' : 'false', - disabled: isDisabled || isDisabledProp ? 'true' : 'false', - focus: isFocused || isFocusedProp ? 'true' : 'false', - focusVisible: - isFocusVisible || isFocusVisibleProp ? 'true' : 'false', - active: isPressed || isPressedProp ? 'true' : 'false', + hover: isHovered ? 'true' : 'false', + disabled: isDisabled ? 'true' : 'false', + focus: isFocused ? 'true' : 'false', + focusVisible: isFocusVisible ? 'true' : 'false', + active: isPressed ? 'true' : 'false', }} disabled={isDisabled} tabIndex={Platform.OS === 'web' ? -1 : undefined} diff --git a/packages/unstyled/slider/src/SliderThumb.tsx b/packages/unstyled/slider/src/SliderThumb.tsx index 1e344f9cb3..f4c10b0d5b 100644 --- a/packages/unstyled/slider/src/SliderThumb.tsx +++ b/packages/unstyled/slider/src/SliderThumb.tsx @@ -51,11 +51,6 @@ function SliderThumb( setIsPressed, setIsFocused, setIsFocusVisible, - isHoveredProp, - isDisabledProp, - isFocusedProp, - isFocusVisibleProp, - isPressedProp, } = React.useContext(SliderContext); const inputRef = React.useRef(null); @@ -64,6 +59,7 @@ function SliderThumb( index: 0, trackLayout, inputRef, + isDisabled, orientation: orientation, }, state, @@ -124,19 +120,18 @@ function SliderThumb( }); }} states={{ - hover: isHovered || isHoveredProp, - disabled: isDisabled || isDisabledProp, - focus: isFocused || isFocusedProp, - focusVisible: isFocusVisible || isFocusVisibleProp, - active: isPressed || isPressedProp, + hover: isHovered, + disabled: isDisabled, + focus: isFocused, + focusVisible: isFocusVisible, + active: isPressed, }} dataSet={{ - hover: isHovered || isHoveredProp ? 'true' : 'false', - disabled: isDisabled || isDisabledProp ? 'true' : 'false', - focus: isFocused || isFocusedProp ? 'true' : 'false', - focusVisible: - isFocusVisible || isFocusVisibleProp ? 'true' : 'false', - active: isPressed || isPressedProp ? 'true' : 'false', + hover: isHovered ? 'true' : 'false', + disabled: isDisabled ? 'true' : 'false', + focus: isFocused ? 'true' : 'false', + focusVisible: isFocusVisible ? 'true' : 'false', + active: isPressed ? 'true' : 'false', }} disabled={isDisabled} {...thumbProps} diff --git a/packages/unstyled/slider/src/SliderTrack.tsx b/packages/unstyled/slider/src/SliderTrack.tsx index e27a4cab06..49eec98370 100644 --- a/packages/unstyled/slider/src/SliderTrack.tsx +++ b/packages/unstyled/slider/src/SliderTrack.tsx @@ -16,11 +16,6 @@ function SliderTrack( isFocusVisible, isDisabled, isPressed, - isHoveredProp, - isDisabledProp, - isFocusedProp, - isFocusVisibleProp, - isPressedProp, } = React.useContext(SliderContext); return ( @@ -33,18 +28,18 @@ function SliderTrack( isDisabled={isDisabled} tabIndex={-1} states={{ - hover: isHovered || isHoveredProp, - disabled: isDisabled || isDisabledProp, - focus: isFocused || isFocusedProp, - focusVisible: isFocusVisible || isFocusVisibleProp, - active: isPressed || isPressedProp, + hover: isHovered, + disabled: isDisabled, + focus: isFocused, + focusVisible: isFocusVisible, + active: isPressed, }} dataSet={{ - hover: isHovered || isHoveredProp ? 'true' : 'false', - disabled: isDisabled || isDisabledProp ? 'true' : 'false', - focus: isFocused || isFocusedProp ? 'true' : 'false', - focusVisible: isFocusVisible || isFocusVisibleProp ? 'true' : 'false', - active: isPressed || isPressedProp ? 'true' : 'false', + hover: isHovered ? 'true' : 'false', + disabled: isDisabled ? 'true' : 'false', + focus: isFocused ? 'true' : 'false', + focusVisible: isFocusVisible ? 'true' : 'false', + active: isPressed ? 'true' : 'false', }} disabled={isDisabled} >