Reverting changes to ColorSliderGroup

Author: nitzanyiz

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;
 
@@ -48,76 +47,31 @@ export type ColorSliderGroupProps = {
   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
-  };
-
-  static getDerivedStateFromProps: GetDerivedStateFromProps<ColorSliderGroupProps, ColorSliderGroupState> = (nextProps,
-    prevState) => {
-    if (prevState.initialColor !== nextProps.initialColor) {
-      return {
-        initialColor: nextProps.initialColor
-      };
-    }
-    return null;
-  };
+const ColorSliderGroup = (props: ColorSliderGroupProps) => {
+  const {initialColor, containerStyle, ...others} = props;
+  const [color, setColor] = useState(initialColor);
+  useEffect(() => {
+    setColor(initialColor);
+  }, [initialColor]);
 
-  onValueChange = (value: string) => {
-    _.invoke(this.props, 'onValueChange', value);
-  };
+  const onValueChange = useCallback((value: string) => {
+    props?.onValueChange?.(value);
+  },
+  [props]);
 
-  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>
-        )}
-        {
-          // @ts-ignore
-          <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);