ColorSliderGroup - refactor

demo/src/screens/incubatorScreens/IncubatorSliderScreen.tsx

@@ -10,6 +10,7 @@ const MAX = 350;
 const INITIAL_MIN = 30;
 const INITIAL_MAX = 270;
 const COLOR = Colors.blue30;
+const GROUP_COLOR = Colors.yellow30;
 
 const IncubatorSliderScreen = () => {
   const [disableRTL, setDisableRTL] = useState<boolean>(false);
@@ -21,7 +22,7 @@ const IncubatorSliderScreen = () => {
   const [sliderMaxValue, setSliderMaxValue] = useState(INITIAL_MAX);
 
   const [color, setColor] = useState(COLOR);
-  const [groupColor, setGroupColor] = useState(Colors.yellow30);
+  const [groupColor, setGroupColor] = useState(GROUP_COLOR);
   const [alpha, setAlpha] = useState(1);
 
   const slider = useRef<Incubator.SliderRef>(null);
@@ -236,7 +237,7 @@ const IncubatorSliderScreen = () => {
           Color Slider Group
         </Text>
         <ColorSliderGroup
-          initialColor={groupColor}
+          initialColor={GROUP_COLOR}
           sliderContainerStyle={styles.slider}
           containerStyle={[styles.group, {borderWidth: 12, borderColor: groupColor}]}
           showLabels

src/components/slider/ColorSliderGroup.tsx

@@ -1,11 +1,12 @@
 import _ from 'lodash';
-import React, {useState, useEffect, useCallback, useMemo} from 'react';
+import React, {useState, useCallback, useMemo} from 'react';
 import {Colors} from '../../style';
 import {useThemeProps} from '../../hooks';
+import View from '../view';
+import Text from '../text';
+import {ColorSliderGroupProps, HSLA, GradientSliderTypes} from './types';
+import SliderContext from './SliderContext';
 import GradientSlider from './GradientSlider';
-import SliderGroup from './context/SliderGroup';
-import ColorSlider from './ColorSlider';
-import {ColorSliderGroupProps, HSLA} from './types';
 
 /**
  * @description: A Gradient Slider component
@@ -14,27 +15,63 @@ import {ColorSliderGroupProps, HSLA} from './types';
  */
 const ColorSliderGroup = <T extends string | HSLA = string>(props: ColorSliderGroupProps<T>) => {
   const themeProps = useThemeProps(props, 'ColorSliderGroup');
-  const {initialColor, containerStyle, onValueChange, ...others} = themeProps;
+  const {
+    initialColor,
+    onValueChange,
+    containerStyle,
+    sliderContainerStyle,
+    showLabels,
+    labels = {hue: 'Hue', lightness: 'Lightness', saturation: 'Saturation', default: ''},
+    labelsStyle,
+    accessible,
+    migrate
+  } = themeProps;
+
   const _initialColor = useMemo<HSLA>(() => {
     return _.isString(initialColor) ? Colors.getHSL(initialColor) : initialColor;
   }, [initialColor]);
-  const [color, setColor] = useState<HSLA>(_initialColor);
-
-  useEffect(() => {
-    setColor(_initialColor);
-  }, [_initialColor]);
 
   const _onValueChange = useCallback((value: HSLA) => {
-    const _value = _.isString(initialColor) ? Colors.getHexString(value) : value;
-    onValueChange?.(_value as T);
-  }, [onValueChange, initialColor]);
+    const newValue = _.isString(initialColor) ? Colors.getHexString(value) : value;
+    onValueChange?.(newValue as T);
+  }, [initialColor, onValueChange]);
+
+  const [value, setValue] = useState(_initialColor);
+
+  const _setValue = useCallback((value: HSLA) => {
+    setValue(value);
+    _onValueChange?.(value);
+  }, [_onValueChange]);
+
+  const contextProviderValue = useMemo(() => ({value, setValue: _setValue}), [value, _setValue]);
+
+  const renderSlider = (type: GradientSliderTypes) => {
+    return (
+      <>
+        {showLabels && labels && (
+          <Text recorderTag={'unmask'} $textNeutral text80 style={labelsStyle} accessible={accessible}>
+            {labels[type]}
+          </Text>
+        )}
+        <GradientSlider
+          color={value}
+          type={type}
+          containerStyle={sliderContainerStyle}
+          accessible={accessible}
+          migrate={migrate}
+        />
+      </>
+    );
+  };
 
   return (
-    <SliderGroup style={containerStyle} color={color} onValueChange={_onValueChange}>
-      <ColorSlider type={GradientSlider.types.HUE} initialColor={_initialColor} {...others}/>
-      <ColorSlider type={GradientSlider.types.SATURATION} initialColor={_initialColor} {...others}/>
-      <ColorSlider type={GradientSlider.types.LIGHTNESS} initialColor={_initialColor} {...others}/>
-    </SliderGroup>
+    <View style={containerStyle}>
+      <SliderContext.Provider value={contextProviderValue}>
+        {renderSlider(GradientSlider.types.HUE)}
+        {renderSlider(GradientSlider.types.SATURATION)}
+        {renderSlider(GradientSlider.types.LIGHTNESS)}
+      </SliderContext.Provider>
+    </View>
   );
 };
 

src/components/slider/GradientSlider.tsx

@@ -1,20 +1,16 @@
 import _ from 'lodash';
-import React, {useCallback, useEffect, useState, useMemo} from 'react';
+import React, {useCallback, useMemo, useContext} from 'react';
 import {asBaseComponent, forwardRef, ForwardRefInjectedProps} from '../../commons/new';
 import {ComponentStatics} from '../../typings/common';
 import {Colors} from '../../style';
 import {Slider as NewSlider} from '../../incubator';
 import Gradient from '../gradient';
 import {GradientSliderProps, GradientSliderTypes, HSLA} from './types';
 import Slider from './index';
-import {SliderContextProps} from './context/SliderContext';
-import asSliderGroupChild from './context/asSliderGroupChild';
+import SliderContext from './SliderContext';
 
-type GradientSliderComponentProps<T> = {
-  sliderContext: SliderContextProps;
-} & GradientSliderProps<T>;
 
-type Props<T> = GradientSliderComponentProps<T> & ForwardRefInjectedProps;
+type Props<T> = GradientSliderProps<T> & ForwardRefInjectedProps;
 
 /**
  * @description: A Gradient Slider component
@@ -25,29 +21,25 @@ const GradientSlider = <T extends string | HSLA = string>(props: Props<T>) => {
   const {
     type = GradientSliderTypes.DEFAULT,
     gradientSteps = 120,
-    color: propsColors = Colors.$backgroundPrimaryHeavy,
-    sliderContext,
-    onValueChange: _onValueChange,
+    color: propsColor = Colors.$backgroundPrimaryHeavy, // initialColor
+    onValueChange,
     migrate,
     containerStyle,
     disabled,
     accessible,
     forwardedRef,
     ...others
   } = props;
+  const sliderContext = useContext(SliderContext);
+
 
   const initialColor = useMemo((): HSLA => {
-    return _.isString(propsColors) ? Colors.getHSL(propsColors) : propsColors;
-  }, [propsColors]);
-  const [color, setColor] = useState(initialColor);
-
-  useEffect(() => {
-    setColor(initialColor);
-  }, [initialColor]);
+    return _.isString(propsColor) ? Colors.getHSL(propsColor) : propsColor;
+  }, [propsColor]);
 
   const getColor = useCallback(() => {
-    return color || sliderContext.value;
-  }, [color, sliderContext.value]);
+    return initialColor || sliderContext.value;
+  }, [initialColor, sliderContext.value]);
 
   const hueColor = useMemo(() => {
     const color = getColor();
@@ -75,19 +67,12 @@ const GradientSlider = <T extends string | HSLA = string>(props: Props<T>) => {
     return <Gradient type={Gradient.types.SATURATION} color={hueColor} numberOfSteps={gradientSteps}/>;
   }, [hueColor, gradientSteps]);
 
-  const onValueChange = useCallback((value: string, alpha: number) => {
-    // alpha returns for type.DEFAULT
-    _onValueChange?.(value, alpha);
-  },
-  [_onValueChange]);
-
   const updateColor = useCallback((color: HSLA) => {
     if (!_.isEmpty(sliderContext)) {
       sliderContext.setValue?.(color);
     } else {
-      setColor(color);
-      const hex = Colors.getHexString(color);
-      onValueChange(hex, color.a);
+      const hex = Colors.getHexString(color); // alpha returns for type.DEFAULT
+      onValueChange?.(hex, color.a);
     }
   },
   [sliderContext, onValueChange]);
@@ -122,7 +107,7 @@ const GradientSlider = <T extends string | HSLA = string>(props: Props<T>) => {
 
   let step = 0.01;
   let maximumValue = 1;
-  let value = color.a;
+  let value = initialColor.a;
   let renderTrack = renderDefaultGradient;
   let sliderOnValueChange = updateAlpha;
 
@@ -172,6 +157,5 @@ GradientSlider.displayName = 'GradientSlider';
 GradientSlider.types = GradientSliderTypes;
 // @ts-expect-error
 export default asBaseComponent<GradientSliderProps, ComponentStatics<typeof GradientSlider>>(
-  // @ts-expect-error
-  forwardRef(asSliderGroupChild(forwardRef(GradientSlider)))
+  forwardRef(forwardRef(GradientSlider))
 );

src/components/slider/context/SliderContext.ts → src/components/slider/SliderContext.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import {HSLA} from '../types';
+import {HSLA} from './types';
 
-export interface SliderContextProps {
+export interface SliderContextType {
   value?: HSLA;
   setValue?: (value: HSLA) => void;
 }
 
-const SliderContext: React.Context<SliderContextProps> = React.createContext({});
+const SliderContext: React.Context<SliderContextType> = React.createContext({});
 SliderContext.displayName = 'IGNORE';
 export default SliderContext;

src/incubator/Slider/index.tsx

@@ -271,7 +271,7 @@ const Slider = React.memo((props: Props) => {
   }, [defaultThumbStyle, thumbStyle]);
 
   const onValueChangeThrottled = useCallback(_.throttle(value => {
-    if (!didValueUpdate.current) { // NOTE: fix for GradientSlider (should be removed after fix in the GradientSlider component): don't invoke onChange when slider's value changes to prevent updates loop
+    if (!didValueUpdate.current) { // NOTE: don't invoke onValueChange when slider's value prop updated programmatically
       onValueChange?.(value);
     } else {
       didValueUpdate.current = false;