Migrate Slider, GradientSlider and ColorSliderGroup components to TypeScript.

demo/src/screens/componentScreens/SliderScreen.js → demo/src/screens/componentScreens/SliderScreen.tsx

@@ -2,12 +2,21 @@ import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
 import {Colors, View, Text, Image, Slider, GradientSlider, ColorSliderGroup} from 'react-native-ui-lib';
 
-
 const INITIAL_VALUE = 0;
 const COLOR = Colors.blue30;
 
-export default class SliderScreen extends Component {
-  constructor(props) {
+interface SliderScreenProps {
+  componentId: string;
+}
+
+interface SliderScreenState {
+  alpha: number;
+  color: string;
+  sliderValue: number;
+}
+
+export default class SliderScreen extends Component<SliderScreenProps, SliderScreenState> {
+  constructor(props: SliderScreenProps) {
     super(props);
 
     this.state = {
@@ -17,15 +26,15 @@ export default class SliderScreen extends Component {
     };
   }
 
-  onSliderValueChange = (value) => {
+  onSliderValueChange = (value: number) => {
     this.setState({sliderValue: value});
   }
 
-  onGradientValueChange = (value, alpha) => {
+  onGradientValueChange = (value: string, alpha: number) => {
     this.setState({color: value, alpha});
   }
 
-  onGroupValueChange = (value) => {
+  onGroupValueChange = (value: string) => {
     console.warn('onGroupValueChange: ', value);
   }
 

src/components/colorPicker/ColorPickerDialog.tsx

@@ -20,7 +20,6 @@ import Text from '../text';
 import TouchableOpacity from '../touchableOpacity';
 import Dialog, {DialogProps} from '../dialog';
 import Button from '../button';
-//@ts-expect-error
 import ColorSliderGroup from '../slider/ColorSliderGroup';
 import PanningProvider from '../panningViews/panningProvider';
 

src/components/slider/ColorSliderGroup.js → src/components/slider/ColorSliderGroup.tsx

@@ -1,61 +1,70 @@
+import React, {PureComponent, GetDerivedStateFromProps} from 'react';
+import {StyleProp, ViewStyle, TextStyle} from 'react-native';
 import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React, {PureComponent} from 'react';
-import {asBaseComponent} from '../../commons';
-import GradientSlider from './GradientSlider';
+import {asBaseComponent} from '../../commons/new';
+import GradientSlider, {GradientSliderTypes} from './GradientSlider';
 import SliderGroup from './context/SliderGroup';
 import Text from '../text';
 
+type SliderOnValueChange = (value: string) => void;
 
-/**
- * @description: A Gradient Slider component
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SliderScreen.js
- * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ColorSliderGroup/ColorSliderGroup.gif?raw=true
- */
-class ColorSliderGroup extends PureComponent {
-  static displayName = 'ColorSliderGroup';
-
-  static propTypes = {
-    /**
+export type ColorSliderGroupProps = {
+  /**
      * The gradient color
      */
-    initialColor: PropTypes.string.isRequired,
-    /**
+  initialColor: string;
+  /**
      * Callback for onValueChange returns the new hex color
      */
-    onValueChange: PropTypes.func,
-    /**
+  onValueChange?: SliderOnValueChange;
+  /**
      * Group container style
      */
-    containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
-    /**
+  containerStyle?: StyleProp<ViewStyle>;
+  /**
      * Sliders style
      */
-    sliderContainerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
-    /**
+  sliderContainerStyle?: StyleProp<ViewStyle>;
+  /**
      * Show the sliders labels (defaults are: Hue, Lightness, Saturation)
      */
-    showLabels: PropTypes.bool,
-    /**
+  showLabels?: boolean;
+  /**
      * In case you would like to change the default labels (translations etc.), you can provide
      * this prop with a map to the relevant labels ({hue: ..., lightness: ..., saturation: ...}).
      */
-    labels: PropTypes.object,
-    /**
+  labels?: {[key in GradientSliderTypes]: string};
+  /**
      * The labels style
      */
-    labelsStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array])
-  }
+  labelsStyle?: StyleProp<TextStyle>;
+  /**
+     * If true the component will have accessibility features enabled
+     */
+   accessible?: 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(nextProps, prevState) {
+  static getDerivedStateFromProps: GetDerivedStateFromProps<ColorSliderGroupProps, ColorSliderGroupState> = (nextProps, prevState) => {
     if (prevState.initialColor !== nextProps.initialColor) {
       return {
         initialColor: nextProps.initialColor
@@ -64,16 +73,16 @@ class ColorSliderGroup extends PureComponent {
     return null;
   }
 
-  onValueChange = (value) => {
+  onValueChange = (value: string) => {
     _.invoke(this.props, 'onValueChange', value);
   }
 
-  renderSlider = (type) => {
+  renderSlider = (type: GradientSliderTypes) => {
     const {sliderContainerStyle, showLabels, labelsStyle, accessible, labels} = this.props;
 
     return (
       <>
-        {showLabels && (
+        {showLabels && labels && (
           <Text dark30 text80 style={labelsStyle} accessible={accessible}>
             {labels[type]}
           </Text>
@@ -97,4 +106,4 @@ class ColorSliderGroup extends PureComponent {
   }
 }
 
-export default asBaseComponent(ColorSliderGroup);
+export default asBaseComponent<ColorSliderGroupProps, typeof ColorSliderGroup>(ColorSliderGroup);

src/components/slider/GradientSlider.js → src/components/slider/GradientSlider.tsx

@@ -1,65 +1,95 @@
+import React, {Component} from 'react';
+import {StyleProp, ViewStyle} from 'react-native';
 import _ from 'lodash';
-import PropTypes from 'prop-types';
 import tinycolor from 'tinycolor2';
-import React, {Component} from 'react';
 import {HueGradient, LightnessGradient, SaturationGradient, Gradient} from 'react-native-color';
 import {Colors} from '../../style';
-import {asBaseComponent} from '../../commons';
+import {asBaseComponent} from '../../commons/new';
 import Slider from './index';
+import {SliderContextProps} from './context/SliderContext';
 import asSliderGroupChild from './context/asSliderGroupChild';
 
+type SliderOnValueChange = (value: string, alfa: number) => void;
 
-const GRADIENT_TYPES = {
-  DEFAULT: 'default',
-  HUE: 'hue',
-  LIGHTNESS: 'lightness',
-  SATURATION: 'saturation'
-};
-
-/**
- * @description: A Gradient Slider component
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SliderScreen.js
- * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/GradientSlider/GradientSlider.gif?raw=true
- */
-class GradientSlider extends Component {
-  static displayName = 'GradientSlider';
+export enum GradientSliderTypes {
+  DEFAULT = 'default',
+  HUE = 'hue',
+  LIGHTNESS = 'lightness',
+  SATURATION = 'saturation'
+}
 
-  static propTypes = {
-    /**
+export type GradientSliderProps = {
+  /**
      * The gradient color
      */
-    color: PropTypes.string,
-    /**
+  color?: string;
+  /**
      * The gradient type (default, hue, lightness, saturation)
      */
-    type: PropTypes.oneOf(Object.values(GRADIENT_TYPES)),
-    /**
+  type?: GradientSliderTypes;
+  /**
      * The gradient steps
      */
-    gradientSteps: PropTypes.number,
-    /**
+  gradientSteps?: number;
+  /**
      * Callback for onValueChange, returns the updated color
      */
-    onValueChange: PropTypes.func
-  }
+  onValueChange?: SliderOnValueChange;
+  /**
+     * If true the component will have accessibility features enabled
+     */
+  accessible?: boolean;
+   /**
+     * The container style
+     */
+  containerStyle?: StyleProp<ViewStyle>;
+  /**
+     * If true the Slider will be disabled and will appear in disabled color
+     */
+  disabled?: boolean;
+}
 
-  static defaultProps = {
-    type: GRADIENT_TYPES.DEFAULT,
-    gradientSteps: 120
-  }
+type GradientSliderComponentProps = {
+  /**
+     * Context of the slider group
+     */
+   sliderContext: SliderContextProps;
+} & GradientSliderProps & typeof defaultProps;
+
+
+interface GradientSliderState {
+  color: tinycolor.ColorFormats.HSLA;
+  prevColor: string | undefined;
+}
 
-  static types = GRADIENT_TYPES;
+const defaultProps = {
+  type: GradientSliderTypes.DEFAULT,
+  gradientSteps: 120,
+  color: Colors.blue30
+};
 
-  constructor(props) {
+/**
+ * @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/GradientSlider/GradientSlider.gif?raw=true
+ */
+class GradientSlider extends Component<GradientSliderComponentProps, GradientSliderState> {
+  static displayName = 'GradientSlider';
+
+  static defaultProps = defaultProps;
+
+  static types = GradientSliderTypes;
+
+  constructor(props: GradientSliderComponentProps) {
     super(props);
 
     this.state = {
       prevColor: props.color,
-      color: props.color ? Colors.getHSL(props.color) : undefined
+      color: Colors.getHSL(props.color)
     };
   }
 
-  static getDerivedStateFromProps(nextProps, prevState) {
+  static getDerivedStateFromProps(nextProps: GradientSliderComponentProps, prevState: GradientSliderState) {
     if (prevState.prevColor !== nextProps.color) {
       return {
         color: Colors.getHSL(nextProps.color),
@@ -72,10 +102,11 @@ class GradientSlider extends Component {
   getColor() {
     const {color} = this.state;
     const {value} = this.props.sliderContext;
+
     return value || color;
   }
 
-  getStepColor = (i) => {
+  getStepColor = (i: number) => {
     const color = this.getColor();
     return tinycolor({...color, a: i}).toHslString();
   }
@@ -118,12 +149,12 @@ class GradientSlider extends Component {
     );
   }
 
-  onValueChange = (value, alpha) => {
+  onValueChange = (value: string, alpha: number) => {
     // alpha returns for type.DEFAULT
     _.invoke(this.props, 'onValueChange', value, alpha);
   }
 
-  updateColor(color) {
+  updateColor(color: tinycolor.ColorFormats.HSLA) {
     if (!_.isEmpty(this.props.sliderContext)) {
       _.invoke(this.props.sliderContext, 'setValue', color);
     } else {
@@ -133,22 +164,22 @@ class GradientSlider extends Component {
     }
   }
 
-  updateAlpha = a => {
+  updateAlpha = (a: number) => {
     const color = this.getColor();
     this.updateColor({...color, a});
   };
 
-  updateHue = h => {
+  updateHue = (h: number) => {
     const color = this.getColor();
     this.updateColor({...color, h});
   };
 
-  updateLightness = l => {
+  updateLightness = (l: number) => {
     const color = this.getColor();
     this.updateColor({...color, l});
   };
 
-  updateSaturation = s => {
+  updateSaturation = (s: number) => {
     const color = this.getColor();
     this.updateColor({...color, s});
   };
@@ -164,19 +195,19 @@ class GradientSlider extends Component {
     let onValueChange = this.updateAlpha;
 
     switch (type) {
-      case GRADIENT_TYPES.HUE:
+      case GradientSliderTypes.HUE:
         step = 1;
         maximumValue = 359;
         value = color.h;
         renderTrack = this.renderHueGradient;
         onValueChange = this.updateHue;
         break;
-      case GRADIENT_TYPES.LIGHTNESS:
+      case GradientSliderTypes.LIGHTNESS:
         value = color.l;
         renderTrack = this.renderLightnessGradient;
         onValueChange = this.updateLightness;
         break;
-      case GRADIENT_TYPES.SATURATION:
+      case GradientSliderTypes.SATURATION:
         value = color.s;
         renderTrack = this.renderSaturationGradient;
         onValueChange = this.updateSaturation;
@@ -201,4 +232,4 @@ class GradientSlider extends Component {
   }
 }
 
-export default asBaseComponent(asSliderGroupChild(GradientSlider));
+export default asBaseComponent<GradientSliderComponentProps, typeof GradientSlider>(asSliderGroupChild(GradientSlider));