Migrate Slider, GradientSlider and ColorSliderGroup components to TypeScript. (#1408)

* Add Props and State, Fix Imports

* wip fix ts errors

* Migrate demo screen, gradient slider, slider group,
and slider context to TS

* Migrate asSliderGroupChild HOC to TS

* Migrate ColorSliderGroup to TS

* Fix ts errors

* Add correct exports, remove Slider.d.ts, remove comments

* Add default color prop to GradientSlider, TS improvements

* remove unnecessary import

* Rename exported props

* Small improvements

* change example url

* Add generated types

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

Author: saulve

demo/src/screens/componentScreens/SliderScreen.js renamed to 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);
   }
 

generatedTypes/components/slider/ColorSliderGroup.d.ts

@@ -0,0 +1,70 @@
+import React, { PureComponent, GetDerivedStateFromProps } from 'react';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { GradientSliderTypes } from './GradientSlider';
+declare type SliderOnValueChange = (value: string) => void;
+export declare type ColorSliderGroupProps = {
+    /**
+       * The gradient color
+       */
+    initialColor: string;
+    /**
+       * Callback for onValueChange returns the new hex color
+       */
+    onValueChange?: SliderOnValueChange;
+    /**
+       * Group container style
+       */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+       * Sliders style
+       */
+    sliderContainerStyle?: StyleProp<ViewStyle>;
+    /**
+       * Show the sliders labels (defaults are: Hue, Lightness, Saturation)
+       */
+    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?: {
+        [key in GradientSliderTypes]: string;
+    };
+    /**
+       * The labels style
+       */
+    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
+ */
+declare class ColorSliderGroup extends PureComponent<ColorSliderGroupProps, ColorSliderGroupState> {
+    static displayName: string;
+    static defaultProps: {
+        labels: {
+            hue: string;
+            lightness: string;
+            saturation: string;
+        };
+    };
+    state: {
+        initialColor: string;
+    };
+    static getDerivedStateFromProps: GetDerivedStateFromProps<ColorSliderGroupProps, ColorSliderGroupState>;
+    onValueChange: (value: string) => void;
+    renderSlider: (type: GradientSliderTypes) => JSX.Element;
+    render(): JSX.Element;
+}
+declare const _default: React.ComponentClass<ColorSliderGroupProps & {
+    useCustomTheme?: boolean | undefined;
+}, any> & typeof ColorSliderGroup;
+export default _default;

generatedTypes/components/slider/GradientSlider.d.ts

@@ -0,0 +1,101 @@
+import React, { Component } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import tinycolor from 'tinycolor2';
+import { SliderContextProps } from './context/SliderContext';
+declare type SliderOnValueChange = (value: string, alfa: number) => void;
+export declare enum GradientSliderTypes {
+    DEFAULT = "default",
+    HUE = "hue",
+    LIGHTNESS = "lightness",
+    SATURATION = "saturation"
+}
+export declare type GradientSliderProps = {
+    /**
+       * The gradient color
+       */
+    color?: string;
+    /**
+       * The gradient type (default, hue, lightness, saturation)
+       */
+    type?: GradientSliderTypes;
+    /**
+       * The gradient steps
+       */
+    gradientSteps?: number;
+    /**
+       * Callback for onValueChange, returns the updated color
+       */
+    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;
+};
+declare type GradientSliderComponentProps = {
+    /**
+       * Context of the slider group
+       */
+    sliderContext: SliderContextProps;
+} & GradientSliderProps & typeof defaultProps;
+interface GradientSliderState {
+    color: tinycolor.ColorFormats.HSLA;
+    prevColor: string | undefined;
+}
+declare const defaultProps: {
+    type: GradientSliderTypes;
+    gradientSteps: number;
+    color: 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/GradientSlider/GradientSlider.gif?raw=true
+ */
+declare class GradientSlider extends Component<GradientSliderComponentProps, GradientSliderState> {
+    static displayName: string;
+    static defaultProps: {
+        type: GradientSliderTypes;
+        gradientSteps: number;
+        color: string;
+    };
+    static types: typeof GradientSliderTypes;
+    constructor(props: GradientSliderComponentProps);
+    static getDerivedStateFromProps(nextProps: GradientSliderComponentProps, prevState: GradientSliderState): {
+        color: tinycolor.ColorFormats.HSLA;
+        prevColor: tinycolor.ColorFormats.HSLA;
+    } | null;
+    getColor(): tinycolor.ColorFormats.HSLA;
+    getStepColor: (i: number) => string;
+    renderDefaultGradient: () => JSX.Element;
+    renderHueGradient: () => JSX.Element;
+    renderLightnessGradient: () => JSX.Element;
+    renderSaturationGradient: () => JSX.Element;
+    onValueChange: (value: string, alpha: number) => void;
+    updateColor(color: tinycolor.ColorFormats.HSLA): void;
+    updateAlpha: (a: number) => void;
+    updateHue: (h: number) => void;
+    updateLightness: (l: number) => void;
+    updateSaturation: (s: number) => void;
+    render(): JSX.Element;
+}
+declare const _default: React.ComponentClass<{
+    /**
+       * Context of the slider group
+       */
+    sliderContext: SliderContextProps;
+} & GradientSliderProps & {
+    type: GradientSliderTypes;
+    gradientSteps: number;
+    color: string;
+} & {
+    useCustomTheme?: boolean | undefined;
+}, any> & typeof GradientSlider;
+export default _default;

generatedTypes/components/slider/context/SliderContext.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="tinycolor2" />
+import React from 'react';
+export interface SliderContextProps {
+    value?: tinycolor.ColorFormats.HSLA;
+    setValue?: (value: tinycolor.ColorFormats.HSLA) => void;
+}
+declare const SliderContext: React.Context<SliderContextProps>;
+export default SliderContext;

generatedTypes/components/slider/context/SliderGroup.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="tinycolor2" />
+import { Component } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+interface SliderGroupProps {
+    color: string;
+    onValueChange: (color: string) => void;
+    style?: StyleProp<ViewStyle>;
+}
+interface SliderGroupState {
+    value: tinycolor.ColorFormats.HSLA;
+}
+export default class SliderGroup extends Component<SliderGroupProps, SliderGroupState> {
+    static displayName: string;
+    constructor(props: SliderGroupProps);
+    getContextProviderValue(): {
+        value: import("tinycolor2").ColorFormats.HSLA;
+        setValue: (value: import("tinycolor2").ColorFormats.HSLA) => void;
+    };
+    setValue: (value: tinycolor.ColorFormats.HSLA) => void;
+    render(): JSX.Element;
+}
+export {};

generatedTypes/components/slider/context/asSliderGroupChild.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import { View } from 'react-native';
+declare function asSliderGroupChild(WrappedComponent: any): {
+    new (props: {} | Readonly<{}>): {
+        contentRef: View | undefined;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<{}> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: {}, context: any): {
+        contentRef: View | undefined;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<{}> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+export default asSliderGroupChild;