Moved ColorSliderGroup to FC. (#2833)

* Moved ColorSliderGroup to FC

* Changed slider props

* Changed slider props passing

* Added usecallback

* Chnaged the way props were passed to the colorslider

* Changed invoke to optional chaining

* Fixed lint problems

* Handle props might be undefined

Author: nitzanyiz

src/components/slider/ColorSlider.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import Text from '../text';
+import GradientSlider, {GradientSliderTypes} from './GradientSlider';
+import {ColorSliderGroupProps} from './ColorSliderGroup';
+
+type ColorSliderProps = Pick<
+  ColorSliderGroupProps,
+  'sliderContainerStyle' | 'showLabels' | 'labelsStyle' | 'accessible' | 'labels' | 'migrate' | 'initialColor'
+> & {
+  type: GradientSliderTypes;
+};
+
+const ColorSlider = (props: ColorSliderProps) => {
+  const {
+    labels = {hue: 'Hue', lightness: 'Lightness', saturation: 'Saturation', default: ''},
+    type,
+    sliderContainerStyle,
+    showLabels,
+    labelsStyle,
+    accessible,
+    migrate,
+    initialColor
+  } = props;
+  return (
+    <>
+      {showLabels && labels && (
+        <Text recorderTag={'unmask'} $textNeutral text80 style={labelsStyle} accessible={accessible}>
+          {labels[type]}
+        </Text>
+      )}
+      <GradientSlider
+        color={initialColor}
+        type={type}
+        containerStyle={sliderContainerStyle}
+        accessible={accessible}
+        migrate={migrate}
+      />
+    </>
+  );
+};
+
+export default ColorSlider;

src/components/slider/ColorSliderGroup.tsx

@@ -1,10 +1,9 @@
-import _ from 'lodash';
-import React, {PureComponent, GetDerivedStateFromProps} from 'react';
+import React, {useState, useEffect, useCallback} from 'react';
 import {StyleProp, ViewStyle, TextStyle} from 'react-native';
 import {asBaseComponent} from '../../commons/new';
 import GradientSlider, {GradientSliderTypes} from './GradientSlider';
 import SliderGroup from './context/SliderGroup';
-import Text from '../text';
+import ColorSlider from './ColorSlider';
 
 type SliderOnValueChange = (value: string) => void;
 
@@ -42,79 +41,37 @@ export type ColorSliderGroupProps = {
    * If true the component will have accessibility features enabled
    */
   accessible?: boolean;
-  /** 
+  /**
    * Whether to use the new Slider implementation using Reanimated
    */
   migrate?: boolean;
 };
 
-interface ColorSliderGroupState {
-  initialColor: string;
-}
-
 /**
  * @description: A Gradient Slider component
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SliderScreen.tsx
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ColorSliderGroup/ColorSliderGroup.gif?raw=true
  */
-class ColorSliderGroup extends PureComponent<ColorSliderGroupProps, ColorSliderGroupState> {
-  static displayName = 'ColorSliderGroup';
-
-  static defaultProps = {
-    labels: {hue: 'Hue', lightness: 'Lightness', saturation: 'Saturation'}
-  };
-
-  state = {
-    initialColor: this.props.initialColor
-  };
+const ColorSliderGroup = (props: ColorSliderGroupProps) => {
+  const {initialColor, containerStyle, ...others} = props;
+  const [color, setColor] = useState(initialColor);
+  useEffect(() => {
+    setColor(initialColor);
+  }, [initialColor]);
 
-  static getDerivedStateFromProps: GetDerivedStateFromProps<ColorSliderGroupProps, ColorSliderGroupState> = (nextProps,
-    prevState) => {
-    if (prevState.initialColor !== nextProps.initialColor) {
-      return {
-        initialColor: nextProps.initialColor
-      };
-    }
-    return null;
-  };
+  const onValueChange = useCallback((value: string) => {
+    props?.onValueChange?.(value);
+  },
+  [props]);
 
-  onValueChange = (value: string) => {
-    _.invoke(this.props, 'onValueChange', value);
-  };
-
-  renderSlider = (type: GradientSliderTypes) => {
-    const {sliderContainerStyle, showLabels, labelsStyle, accessible, labels, migrate} = this.props;
-
-    return (
-      <>
-        {showLabels && labels && (
-          <Text recorderTag={'unmask'} $textNeutral text80 style={labelsStyle} accessible={accessible}>
-            {labels[type]}
-          </Text>
-        )}
-        <GradientSlider
-          color={this.props.initialColor}
-          type={type}
-          containerStyle={sliderContainerStyle}
-          accessible={accessible}
-          migrate={migrate}
-        />
-      </>
-    );
-  };
-
-  render() {
-    const {containerStyle} = this.props;
-    const {initialColor} = this.state;
-
-    return (
-      <SliderGroup style={containerStyle} color={initialColor} onValueChange={this.onValueChange}>
-        {this.renderSlider(GradientSlider.types.HUE)}
-        {this.renderSlider(GradientSlider.types.LIGHTNESS)}
-        {this.renderSlider(GradientSlider.types.SATURATION)}
-      </SliderGroup>
-    );
-  }
-}
+  return (
+    <SliderGroup style={containerStyle} color={color} onValueChange={onValueChange}>
+      <ColorSlider type={GradientSlider.types.HUE} initialColor={initialColor} {...others}/>
+      <ColorSlider type={GradientSlider.types.LIGHTNESS} initialColor={initialColor} {...others}/>
+      <ColorSlider type={GradientSlider.types.SATURATION} initialColor={initialColor} {...others}/>
+    </SliderGroup>
+  );
+};
 
+ColorSliderGroup.displayName = 'ColorSliderGroup';
 export default asBaseComponent<ColorSliderGroupProps, typeof ColorSliderGroup>(ColorSliderGroup);