Merge pull request #4952 from GeekyAnts/fix/slider-states

surajahmed · web-flow · commit f607066428c3 · 2022-04-20T11:53:13.000+05:30
Fix/slider states
diff --git a/src/components/primitives/Slider/Slider.tsx b/src/components/primitives/Slider/Slider.tsx
@@ -70,7 +70,8 @@ function Slider({ isDisabled, isReadOnly, ...props }: ISliderProps, ref?: any) {
       isReadOnly: isReadOnly,
       onTrackLayout: onLayout,
       thumbSize: resolvedProps.thumbSize,
-      sliderSize: resolvedProps.sliderSize,
+      sliderSize: resolvedProps.sliderTrackHeight,
+      _interactionBox: resolvedProps._interactionBox,
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
@@ -83,7 +84,7 @@ function Slider({ isDisabled, isReadOnly, ...props }: ISliderProps, ref?: any) {
     isReadOnly,
     onLayout,
     resolvedProps.thumbSize,
-    resolvedProps.sliderSize,
+    resolvedProps.sliderTrackHeight,
   ]);
 
   //TODO: refactor for responsive prop
diff --git a/src/components/primitives/Slider/SliderThumb.tsx b/src/components/primitives/Slider/SliderThumb.tsx
@@ -8,8 +8,24 @@ import type { ISliderThumbProps } from './types';
 import Box from '../Box';
 import { SliderContext } from './Context';
 import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { useHover } from '@react-native-aria/interactions';
+import { mergeRefs } from '../../../utils';
+import { extractInObject, stylingProps } from '../../../theme/tools/utils';
+import { Stack } from '../Stack';
+import { Center } from '../../composites/Center';
 
 function SliderThumb(props: ISliderThumbProps, ref: any) {
+  const [isPressed, setIsPressed] = React.useState(false);
+
+  const [isFocused, setIsFocused] = React.useState(false);
+  const handleFocus = (focusState: boolean, callback: any) => {
+    setIsFocused(focusState);
+    callback();
+  };
+
+  const _ref = React.useRef(null);
+  const { isHovered } = useHover({}, _ref);
+
   const {
     state,
     trackLayout,
@@ -18,16 +34,31 @@ function SliderThumb(props: ISliderThumbProps, ref: any) {
     thumbSize,
     isReadOnly,
     isDisabled,
+    _interactionBox: interactionBoxContext,
   } = React.useContext(SliderContext);
-  const resolvedProps = usePropsResolution(
+  const {
+    onFocus,
+    onBlur,
+    _stack,
+    _interactionBox,
+    ...resolvedProps
+  } = usePropsResolution(
     'SliderThumb',
     {
       size: thumbSize,
+      _interactionBox: interactionBoxContext,
       colorScheme,
       ...props,
     },
-    { isDisabled, isReadOnly }
+    {
+      isDisabled,
+      isReadOnly,
+      isPressed,
+      isFocused,
+      isHovered,
+    }
   );
+
   const inputRef = React.useRef(null);
   const { thumbProps, inputProps } = useSliderThumb(
     {
@@ -39,6 +70,10 @@ function SliderThumb(props: ISliderThumbProps, ref: any) {
     state
   );
 
+  React.useEffect(() => {
+    setIsPressed(state.isThumbDragging(0));
+  }, [state]);
+
   const thumbAbsoluteSize = useToken('sizes', resolvedProps.size);
 
   const thumbStyles: any = {
@@ -59,6 +94,23 @@ function SliderThumb(props: ISliderThumbProps, ref: any) {
   thumbStyles.transform.push({
     scale: state.isThumbDragging(0) ? resolvedProps.scaleOnPressed : 1,
   });
+
+  const [layoutProps, nonLayoutProps] = extractInObject(resolvedProps, [
+    ...stylingProps.margin,
+    ...stylingProps.layout,
+    ...stylingProps.flexbox,
+    ...stylingProps.position,
+    ...stylingProps.outline,
+  ]);
+
+  const [
+    accessibilityProps,
+    nonAccessibilityProps,
+  ] = extractInObject(nonLayoutProps, [
+    'accessibilityRole',
+    'accessibilityState',
+  ]);
+
   //TODO: refactor for responsive prop
   if (useHasResponsiveProps(props)) {
     return null;
@@ -69,17 +121,30 @@ function SliderThumb(props: ISliderThumbProps, ref: any) {
       position="absolute"
       {...thumbProps}
       {...resolvedProps}
-      ref={ref}
-      style={[thumbStyles, props.style]}
+      {...accessibilityProps}
+      {...layoutProps}
+      style={[thumbStyles, resolvedProps.style]}
+      onFocus={(e: any) => {
+        handleFocus(true, onFocus ? () => onFocus(e) : () => {});
+      }}
+      onBlur={(e: any) => {
+        handleFocus(false, onBlur ? () => onBlur(e) : () => {});
+      }}
       // {...(isReadOnly && _readOnly)}
       // {...(isDisabled && _disabled)}
+      ref={mergeRefs([_ref, ref])}
     >
-      {props.children}
-      {Platform.OS === 'web' && (
-        <VisuallyHidden>
-          <input ref={inputRef} {...inputProps} />
-        </VisuallyHidden>
-      )}
+      <Stack {..._stack}>
+        <Box {..._interactionBox} />
+        <Center {...nonAccessibilityProps}>
+          {props.children}
+          {Platform.OS === 'web' && (
+            <VisuallyHidden>
+              <input ref={inputRef} {...inputProps} />
+            </VisuallyHidden>
+          )}
+        </Center>
+      </Stack>
     </Box>
   );
 }
diff --git a/src/components/primitives/Slider/types.tsx b/src/components/primitives/Slider/types.tsx
@@ -2,6 +2,8 @@ import type { MutableRefObject } from 'react';
 import type { CustomProps } from '../../../components/types';
 import type { InterfaceBoxProps } from '../Box';
 import type { ColorSchemeType } from '../../../components/types';
+import type { ResponsiveValue } from '../../types';
+import type { ISizes } from '../../../theme/base/sizes';
 
 export interface InterfaceSliderProps extends InterfaceBoxProps<ISliderProps> {
   /** The current value of the Slider */
@@ -52,6 +54,14 @@ export interface InterfaceSliderProps extends InterfaceBoxProps<ISliderProps> {
   _disabled?: any;
   /** Props applied if isReadOnly is true. */
   _readOnly?: any;
+  /** Prop applied to change slider track height */
+  sliderTrackHeight?: ResponsiveValue<ISizes | (string & {}) | number>;
+  /**Prop applied to change size of slider thumb */
+  thumbSize?: ResponsiveValue<ISizes | (string & {}) | number>;
+  /**
+   * You can style interaction box around the checkbox using this.
+   */
+  _interactionBox?: Omit<Partial<ISliderThumbProps>, '_interactionBox'>;
 }
 
 export interface ISliderTrackProps
@@ -91,6 +101,18 @@ export interface ISliderThumbProps
   _disabled?: any;
   /** Props applied if isReadOnly is true. */
   _readOnly?: any;
+  /**
+   * Props to be passed to the slider thumb when button is hovered.
+   */
+  _hover?: Omit<Partial<ISliderThumbProps>, '_hover'>;
+  /**
+   * Props to be passed to the slider thumb when button is pressed.
+   */
+  _pressed?: Omit<Partial<ISliderThumbProps>, '_pressed'>;
+  /**
+   * Props to be passed to the slider thumb when button is focused.
+   */
+  _focus?: Omit<Partial<ISliderThumbProps>, '_focus'>;
 }
 
 export type ISliderComponentType = ((
diff --git a/src/theme/components/slider.ts b/src/theme/components/slider.ts
@@ -27,25 +27,91 @@ export const SliderTrack = {
 
 export const SliderThumb = {
   baseStyle: (props: any) => {
-    let { colorScheme } = props;
+    const { colorScheme } = props;
+    const { primary } = props.theme.colors;
     return {
       borderRadius: 'full',
       zIndex: 999,
       alignItems: 'center',
       justifyContent: 'center',
-      scaleOnPressed: 1.2,
+      scaleOnPressed: 1,
+      _interactionBox: {
+        position: 'absolute',
+        borderRadius: 'full',
+        zIndex: -1,
+      },
+      _stack: {
+        direction: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        space: 2,
+      },
       _light: {
         bg: `${colorScheme}.600`,
+        _hover: {
+          _web: {
+            outlineWidth: '4px',
+            outlineColor: primary[300],
+            outlineStyle: 'solid',
+          },
+        },
+        _focus: {
+          _web: {
+            outlineWidth: '2px',
+            outlineColor: primary[400],
+            outlineStyle: 'solid',
+          },
+        },
+        _pressed: {
+          _interactionBox: {
+            borderWidth: '8',
+            borderColor: `${colorScheme}.300`,
+          },
+        },
       },
       _dark: {
         bg: `${colorScheme}.500`,
+        _hover: {
+          _web: {
+            outlineWidth: '4px',
+            outlineColor: primary[800],
+            outlineStyle: 'solid',
+          },
+        },
+        _focus: {
+          _web: {
+            outlineWidth: '2px',
+            outlineColor: primary[400],
+            outlineStyle: 'solid',
+          },
+        },
+        _pressed: {
+          _interactionBox: {
+            borderWidth: '8',
+            borderColor: `${colorScheme}.800`,
+          },
+        },
+      },
+      // shadow: 6,
+      _web: {
+        cursor: 'pointer',
       },
-      shadow: 6,
     };
   },
   defaultProps: {
     colorScheme: 'primary',
   },
+  sizes: {
+    lg: {
+      _interactionBox: '3',
+    },
+    md: {
+      _interactionBox: '2',
+    },
+    sm: {
+      _interactionBox: '2.5',
+    },
+  },
 };
 
 export const SliderFilledTrack = {
@@ -79,9 +145,9 @@ export const SliderFilledTrack = {
 };
 
 const sizes = {
-  lg: { thumbSize: 6, sliderSize: 6 },
-  md: { thumbSize: 5, sliderSize: 5 },
-  sm: { thumbSize: 4, sliderSize: 4 },
+  lg: { thumbSize: 6, sliderTrackHeight: 6, _interactionBox: { p: '3' } },
+  md: { thumbSize: 5, sliderTrackHeight: 5, _interactionBox: { p: '2.5' } },
+  sm: { thumbSize: 4, sliderTrackHeight: 4, _interactionBox: { p: '2' } },
 };
 
 export const Slider = {
diff --git a/src/theme/styled-system.ts b/src/theme/styled-system.ts
@@ -566,6 +566,8 @@ export const typography = {
 const extraProps = {
   outline: true,
   outlineWidth: true,
+  outlineColor: true,
+  outlineStyle: true,
   shadow: {
     scale: 'shadows',
   },
diff --git a/src/theme/tools/utils.ts b/src/theme/tools/utils.ts
@@ -104,6 +104,7 @@ export const stylingProps = {
     'order',
   ],
   position: ['position', 'zIndex', 'top', 'right', 'bottom', 'left'],
+  outline: ['outlineWidth', 'outlineColor', 'outlineStyle'],
   background: ['bg', 'backgroundColor', 'bgColor'],
 };
 export type Dict = Record<string, any>;
