Infra/color slider group remove unsafe (#944)

* GradientSlider - wrap in 'asBaseComponent' hoc

* updating 'prevColor' on state

* ColorSliderGroup - wrap with 'asBaseComponent' hoc

* SliderGroup - removing UNSAFE method

* removing commented code

* removing 'forwardedRef'

* removing android/gradlew.bat

* remove expoDemo/android/gradlew.bat

Co-authored-by: Ethan Sharabi <[email protected]>

Author: Inbal-Tish

src/components/slider/ColorSliderGroup.js

@@ -1,17 +1,17 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, {PureComponent} from 'react';
+import {asBaseComponent} from '../../commons';
 import GradientSlider from './GradientSlider';
 import SliderGroup from './context/SliderGroup';
 import Text from '../text';
-import {PureBaseComponent} from '../../commons';
 
 
 /**
  * @description: A Gradient Slider component
  * @example: https://github.com/wix/react-native-ui-lib/blob/feat/new_components/demo/src/screens/componentScreens/SliderScreen.js
  */
-export default class ColorSliderGroup extends PureBaseComponent {
+class ColorSliderGroup extends PureComponent {
   static displayName = 'ColorSliderGroup';
 
   static propTypes = {
@@ -54,25 +54,22 @@ export default class ColorSliderGroup extends PureBaseComponent {
     initialColor: this.props.initialColor
   }
 
-  // static getDerivedStateFromProps(nextProps, prevState) {
-  //   if (prevState.initialColor !== nextProps.initialColor) {
-  //     return {initialColor: nextProps.initialColor};
-  //   }
-  //   return null;
-  // }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.state.initialColor !== nextProps.initialColor) {
-      return {initialColor: nextProps.initialColor};
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (prevState.initialColor !== nextProps.initialColor) {
+      return {
+        initialColor: nextProps.initialColor
+      };
     }
+    return null;
   }
 
   onValueChange = (value) => {
     _.invoke(this.props, 'onValueChange', value);
   }
 
   renderSlider = (type) => {
-    const {sliderContainerStyle, showLabels, labelsStyle, accessible, labels} = this.getThemeProps();
+    const {sliderContainerStyle, showLabels, labelsStyle, accessible, labels} = this.props;
+
     return (
       <>
         {showLabels && (
@@ -98,3 +95,5 @@ export default class ColorSliderGroup extends PureBaseComponent {
     );
   }
 }
+
+export default asBaseComponent(ColorSliderGroup);

src/components/slider/GradientSlider.js

@@ -1,10 +1,10 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import tinycolor from 'tinycolor2';
-import React from 'react';
+import React, {Component} from 'react';
 import {HueGradient, LightnessGradient, SaturationGradient, Gradient} from 'react-native-color';
 import {Colors} from '../../style';
-import {BaseComponent} from '../../commons';
+import {asBaseComponent} from '../../commons';
 import Slider from './index';
 import asSliderGroupChild from './context/asSliderGroupChild';
 
@@ -20,7 +20,7 @@ const GRADIENT_TYPES = {
  * @description: A Gradient Slider component
  * @example: https://github.com/wix/react-native-ui-lib/blob/feat/new_components/demo/src/screens/componentScreens/SliderScreen.js
  */
-class GradientSlider extends BaseComponent {
+class GradientSlider extends Component {
   static displayName = 'GradientSlider';
 
   static propTypes = {
@@ -53,14 +53,19 @@ class GradientSlider extends BaseComponent {
     super(props);
 
     this.state = {
+      prevColor: props.color,
       color: props.color ? Colors.getHSL(props.color) : undefined
     };
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.color !== nextProps.color) {
-      this.setState({color: Colors.getHSL(nextProps.color)});
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (prevState.prevColor !== nextProps.color) {
+      return {
+        color: Colors.getHSL(nextProps.color),
+        prevColor: Colors.getHSL(nextProps.color)
+      };
     }
+    return null;
   }
 
   getColor() {
@@ -88,7 +93,7 @@ class GradientSlider extends BaseComponent {
 
   renderHueGradient = () => {
     const {gradientSteps} = this.props;
-    
+
     return (
       <HueGradient gradientSteps={gradientSteps}/>
     );
@@ -180,7 +185,7 @@ class GradientSlider extends BaseComponent {
     }
 
     return (
-      <Slider 
+      <Slider
         renderTrack={renderTrack}
         step={step}
         maximumValue={maximumValue}
@@ -195,4 +200,4 @@ class GradientSlider extends BaseComponent {
   }
 }
 
-export default asSliderGroupChild(GradientSlider);
+export default asBaseComponent(asSliderGroupChild(GradientSlider));

src/components/slider/context/SliderGroup.js

@@ -21,22 +21,9 @@ export default class SliderGroup extends Component {
     };
   }
 
-  // static getDerivedStateFromProps(nextProps, prevState) {
-  //   if (nextProps.color !== Colors.getHexString(prevState.value)) {
-  //     return {value: Colors.getHSL(nextProps.color)};
-  //   }
-  //   return null;
-  // }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.color !== Colors.getHexString(this.state.value)) {
-      return {value: Colors.getHSL(nextProps.color)};
-    }
-  }
-
   getContextProviderValue() {
     return {
-      value: this.state.value, 
+      value: this.state.value,
       setValue: this.setValue
     };
   }