Merge pull request #2205 from gluestack/fix/slider-disabled-state

fix: slider disabled state
gluestack · Jun 3, 2024 · a1916e0 · a1916e0
2 parents 19cd11c + 0a1c61d
commit a1916e0
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 64 deletions.
diff --git a/packages/unstyled/slider/src/Slider.tsx b/packages/unstyled/slider/src/Slider.tsx
@@ -77,27 +77,22 @@ function Slider<StyledSliderProps>(
       );
       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
@@ -27,11 +27,6 @@ function SliderFilledTrack<StyledSliderFilledTrack>(
         isHovered,
         isPressed,
         isFocusVisible,
-        isHoveredProp,
-        isDisabledProp,
-        isFocusedProp,
-        isFocusVisibleProp,
-        isPressedProp,
       } = React.useContext(SliderContext);
 
       const getSliderTrackPosition = () => {
@@ -62,19 +57,18 @@ function SliderFilledTrack<StyledSliderFilledTrack>(
           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
@@ -51,11 +51,6 @@ function SliderThumb<StyledSliderThumb, StyledSliderThumbInteraction>(
         setIsPressed,
         setIsFocused,
         setIsFocusVisible,
-        isHoveredProp,
-        isDisabledProp,
-        isFocusedProp,
-        isFocusVisibleProp,
-        isPressedProp,
       } = React.useContext(SliderContext);
 
       const inputRef = React.useRef(null);
@@ -64,6 +59,7 @@ function SliderThumb<StyledSliderThumb, StyledSliderThumbInteraction>(
           index: 0,
           trackLayout,
           inputRef,
+          isDisabled,
           orientation: orientation,
         },
         state,
@@ -124,19 +120,18 @@ function SliderThumb<StyledSliderThumb, StyledSliderThumbInteraction>(
             });
           }}
           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
@@ -16,11 +16,6 @@ function SliderTrack<StyledSliderTrackProps>(
       isFocusVisible,
       isDisabled,
       isPressed,
-      isHoveredProp,
-      isDisabledProp,
-      isFocusedProp,
-      isFocusVisibleProp,
-      isPressedProp,
     } = React.useContext(SliderContext);
 
     return (
@@ -33,18 +28,18 @@ function SliderTrack<StyledSliderTrackProps>(
         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}
       >