Infra/color picker to ts (#1235)

* ColorPicker, ColorPalette, ColorSwatch and ColorPickerDialog - migrate to TS

* removing unused type

* types for demo screens

* fix generated types

* Update src/components/colorPicker/ColorPickerDialog.tsx

use optional chaining instead of _.get()

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

* fix PR comments

* removing 'height' prop passed to Dialog component

* generating types

* Colors.getHSL param to optional

* generating types

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

Author: Inbal-Tish

demo/src/screens/componentScreens/ColorPickerScreen.js renamed to demo/src/screens/componentScreens/ColorPickerScreen.tsx

@@ -4,6 +4,14 @@ import {StyleSheet, ScrollView} from 'react-native';
 import {Colors, View, Text, ColorPicker, ColorPalette, ColorName} from 'react-native-ui-lib';
 
 
+interface Props {}
+interface State {
+  color: string,
+  textColor: string,
+  customColors: string[],
+  paletteChange: boolean
+}
+
 const INITIAL_COLOR = Colors.blue30;
 const colors = [
   '#20303C', '#43515C', '#66737C', '#858F96', '#A3ABB0', '#C2C7CB', '#E0E3E5', '#F2F4F5',
@@ -17,34 +25,30 @@ const colors = [
 ];
 
 
-export default class ColorPickerScreen extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      color: INITIAL_COLOR,
-      textColor: Colors.white,
-      customColors: [],
-      paletteChange: false
-    };
-  }
+export default class ColorPickerScreen extends Component<Props, State> {
+  state: State = {
+    color: INITIAL_COLOR,
+    textColor: Colors.white,
+    customColors: [],
+    paletteChange: false
+  };
 
   onDismiss = () => {
     console.log(`screen onDismiss`);
   }
 
-  onSubmit = (color, textColor) => {
+  onSubmit = (color: string, textColor: string) => {
     const {customColors} = this.state;
     customColors.push(color);
     this.setState({color, textColor, customColors: _.clone(customColors), paletteChange: false});
   }
 
-  onValueChange = (value, options) => {
-    this.setState({color: value, textColor: options ? options.tintColor : undefined, paletteChange: false});
+  onValueChange = (value: string, options: object) => {
+    this.setState({color: value, textColor: options ? _.get(options, 'tintColor') : undefined, paletteChange: false});
   }
 
-  onPaletteValueChange = (value, options) => {
-    this.setState({color: value, textColor: options ? options.tintColor : undefined, paletteChange: true});
+  onPaletteValueChange = (value: string, options: object) => {
+    this.setState({color: value, textColor: options ? _.get(options, 'tintColor') : undefined, paletteChange: true});
   }
 
   render() {
@@ -74,7 +78,7 @@ export default class ColorPickerScreen extends Component {
             Theme Color
           </Text>
           <Text marginL-20>Choose a color for your place’s theme.</Text>
-          <ColorPalette value={paletteValue} onValueChange={this.onPaletteValueChange} colors={colors} />
+          <ColorPalette value={paletteValue} onValueChange={this.onPaletteValueChange} colors={colors}/>
           <Text marginL-20 marginT-16>
             Custom Colors
           </Text>

demo/src/screens/componentScreens/ColorSwatchScreen.js renamed to demo/src/screens/componentScreens/ColorSwatchScreen.tsx

@@ -5,38 +5,34 @@ import {Constants, Colors, View, Text, ColorSwatch, ColorPalette} from 'react-na
 
 
 export default class ColorSwatchScreen extends Component {
-  constructor(props) {
-    super(props);
-    
-    this.colors = ['transparent', Colors.green30, Colors.yellow30, Colors.red30];
-    this.mainColors = ['#66737C', '#459FED', '#1D5382', '#3CC7C5', '#65C888', '#FAAD4D', '#F27052', '#F2564D', '#B13DAC', '#733CA6', '#79838A', '#5847FF', '#00BBF2', '#00CD8B', '#FF563D', '#ffb600'];
-    this.allColors = _.filter(Object.values(Colors), _.isString);
+  colors = ['transparent', Colors.green30, Colors.yellow30, Colors.red30];
+  mainColors = ['#66737C', '#459FED', '#1D5382', '#3CC7C5', '#65C888', '#FAAD4D', '#F27052', '#F2564D', '#B13DAC', '#733CA6', '#79838A', '#5847FF', '#00BBF2', '#00CD8B', '#FF563D', '#ffb600'];
+  allColors = _.filter(Object.values(Colors), _.isString);
 
-    this.state = {
-      color: this.colors[0],
-      color1: this.mainColors[this.mainColors.length - 1],
-      color2: this.allColors[20],
-      selected: false
-    };
-  }
+  state = {
+    color: this.colors[0],
+    color1: this.mainColors[this.mainColors.length - 1],
+    color2: this.allColors[20],
+    selected: false
+  };
 
   onPress = () => {
     this.setState({selected: !this.state.selected});
   }
 
-  onValueChange = (value) => {
+  onValueChange = (value: string) => {
     this.setState({color: value});
   }
-  onValueChange1 = (value) => {
+  onValueChange1 = (value: string) => {
     this.setState({color1: value});
   }
-  onValueChange2 = (value) => {
+  onValueChange2 = (value: string) => {
     this.setState({color2: value});
   }
 
   render() {
     const {color, color1, color2, selected} = this.state;
-    
+
     return (
       <ScrollView style={{backgroundColor: Colors.dark80}}>
         <View flex center useSafeArea>
@@ -48,16 +44,29 @@ export default class ColorSwatchScreen extends Component {
               <Text>Disabled</Text>
             </View>
           </View>
-          
+
           <Text marginT-20 text60 dark10>ColorPalette</Text>
           <Text marginB-10 text70 style={{color}}>Selected Color: {color}</Text>
-          <ColorPalette value={color} onValueChange={this.onValueChange} colors={this.colors}/>
+          <ColorPalette
+            value={color}
+            onValueChange={this.onValueChange}
+            colors={this.colors}
+          />
 
           <Text margin-10 text60 dark10>Scrollable</Text>
-          <ColorPalette value={color1} onValueChange={this.onValueChange1} colors={this.mainColors}/>
-          
+          <ColorPalette
+            value={color1}
+            onValueChange={this.onValueChange1}
+            colors={this.mainColors}
+          />
+
           <Text margin-10 text60 dark10>Pagination</Text>
-          <ColorPalette numberOfRows={!Constants.isTablet ? 4 : undefined} value={color2} onValueChange={this.onValueChange2} colors={this.allColors}/>
+          <ColorPalette
+            numberOfRows={!Constants.isTablet ? 4 : undefined}
+            value={color2}
+            onValueChange={this.onValueChange2}
+            colors={this.allColors}
+          />
         </View>
       </ScrollView>
     );

generatedTypes/components/colorPicker/ColorPalette.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+interface Props {
+    /**
+     * Array of colors to render in the palette
+     */
+    colors: string[];
+    /**
+     * Style to pass the palette container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * The container margins
+     */
+    containerWidth?: number;
+    /**
+     * Whether to use pagination when number of colors exceeds the number of rows
+     */
+    usePagination?: boolean;
+    /**
+     * Whether the colors pagination scrolls in a loop
+     */
+    loop?: boolean;
+    /**
+     * The number of color rows from 2 to 5
+     */
+    numberOfRows?: number;
+    /**
+     * Style to pass all the ColorSwatches in the palette
+     */
+    swatchStyle?: StyleProp<ViewStyle>;
+    /**
+     * The value of the selected swatch
+     */
+    value?: string;
+    /**
+     * The index of the item to animate at first render (default is last)
+     */
+    animatedIndex?: number;
+    /**
+     * Invoked once when value changes by selecting one of the swatches in the palette
+     */
+    onValueChange?: (value: string, options: object) => void;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+export declare type ColorPaletteProps = Props;
+declare const _default: React.ComponentClass<Props & {
+    useCustomTheme?: boolean | undefined;
+}, any>;
+export default _default;

generatedTypes/components/colorPicker/ColorPickerDialog.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { DialogProps } from '../dialog';
+interface Props extends DialogProps {
+    /**
+     * The initial color to pass the picker dialog
+     */
+    initialColor?: string;
+    /**
+     * onSubmit callback for the picker dialog color change
+     */
+    onSubmit?: () => void;
+    /**
+     * Props to pass the Dialog component // TODO: deprecate 'dialogProps' prop
+     */
+    dialogProps?: object;
+    /**
+     * Additional styling for the color preview text.
+     */
+    previewInputStyle?: StyleProp<ViewStyle>;
+    /**
+     * Accessibility labels as an object of strings, ex. {addButton: 'add custom color using hex code', dismissButton: 'dismiss', doneButton: 'done', input: 'custom hex color code'}
+     */
+    /**
+     * Ok (v) button color
+     */
+    doneButtonColor?: string;
+    accessibilityLabels?: {
+        dismissButton?: string;
+        doneButton?: string;
+        input?: string;
+    };
+}
+export declare type ColorPickerDialogProps = Props;
+declare const _default: React.ComponentClass<Props & {
+    useCustomTheme?: boolean | undefined;
+}, any>;
+export default _default;

generatedTypes/components/colorPicker/ColorSwatch.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+interface Props {
+    /**
+     * The identifier value of the ColorSwatch in a ColorSwatch palette.
+     * Must be different than other ColorSwatches in the same group
+     */
+    value?: string;
+    /**
+     * The color of the ColorSwatch
+     */
+    color?: string;
+    /**
+     * Is the initial state is selected
+     */
+    selected?: boolean;
+    /**
+     * Is first render should be animated
+     */
+    animated?: boolean;
+    /**
+     * onPress callback
+     */
+    onPress?: (value: string, options: object) => void;
+    index?: number;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+export declare type ColorSwatchProps = Props;
+export declare const SWATCH_MARGIN = 12;
+export declare const SWATCH_SIZE: number;
+declare const _default: React.ComponentClass<Props & {
+    useCustomTheme?: boolean | undefined;
+}, any>;
+export default _default;

generatedTypes/components/colorPicker/index.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { ColorPickerDialogProps } from './ColorPickerDialog';
+interface Props extends ColorPickerDialogProps {
+    /**
+     * Array of colors for the picker's color palette (hex values)
+     */
+    colors: string[];
+    /**
+     * The value of the selected swatch // TODO: rename prop 'selectedValue'
+     */
+    value?: string;
+    /**
+     * The index of the item to animate at first render (default is last)
+     */
+    animatedIndex?: number;
+    /**
+     * onValueChange callback for the picker's color palette change
+     */
+    onValueChange?: (value: string, options: object) => void;
+    /**
+     * Accessibility labels as an object of strings, ex.
+     * {
+     *  addButton: 'add custom color using hex code',
+     *  dismissButton: 'dismiss',
+     *  doneButton: 'done',
+     *  input: 'custom hex color code'
+     * }
+     */
+    accessibilityLabels: {
+        addButton?: string;
+        dismissButton?: string;
+        doneButton?: string;
+        input?: string;
+    };
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+export declare type ColorPickerProps = Props;
+declare const _default: React.ComponentClass<Props & {
+    useCustomTheme?: boolean | undefined;
+}, any>;
+export default _default;

generatedTypes/incubator/TextField/index.d.ts

@@ -92,7 +92,7 @@ declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL
     /**
      * A single or multiple validator. Can be a string (required, email) or custom function.
      */
-    validate?: "number" | Function | "required" | "email" | "url" | "price" | Validator[] | undefined;
+    validate?: "number" | Function | "email" | "required" | "url" | "price" | Validator[] | undefined;
     /**
      * Should validate when the TextField mounts
      */
@@ -147,7 +147,7 @@ declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL
     /**
      * A single or multiple validator. Can be a string (required, email) or custom function.
      */
-    validate?: "number" | Function | "required" | "email" | "url" | "price" | Validator[] | undefined;
+    validate?: "number" | Function | "email" | "required" | "url" | "price" | Validator[] | undefined;
     /**
      * Should validate when the TextField mounts
      */
@@ -202,7 +202,7 @@ declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL
     /**
      * A single or multiple validator. Can be a string (required, email) or custom function.
      */
-    validate?: "number" | Function | "required" | "email" | "url" | "price" | Validator[] | undefined;
+    validate?: "number" | Function | "email" | "required" | "url" | "price" | Validator[] | undefined;
     /**
      * Should validate when the TextField mounts
      */
@@ -257,7 +257,7 @@ declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL
     /**
      * A single or multiple validator. Can be a string (required, email) or custom function.
      */
-    validate?: "number" | Function | "required" | "email" | "url" | "price" | Validator[] | undefined;
+    validate?: "number" | Function | "email" | "required" | "url" | "price" | Validator[] | undefined;
     /**
      * Should validate when the TextField mounts
      */