ColorPicker - small fixes (#2650)

Author: M-i-k-e-l

demo/src/screens/componentScreens/ColorPickerScreen.tsx

@@ -4,7 +4,6 @@ import {StyleSheet, ScrollView} from 'react-native';
 import {Colors, View, Text, ColorPicker, ColorPalette, ColorName} from 'react-native-ui-lib';
 import {renderMultipleSegmentOptions} from '../ExampleScreenPresenter';
 
-interface Props {}
 interface State {
   color: string;
   textColor?: string;
@@ -14,6 +13,7 @@ interface State {
 }
 
 const INITIAL_COLOR = Colors.$backgroundPrimaryHeavy;
+// prettier-ignore
 const colors = [
   '#20303C', '#43515C', '#66737C', '#858F96', '#A3ABB0', '#C2C7CB', '#E0E3E5', '#F2F4F5',
   '#3182C8', '#4196E0', '#459FED', '#57a8ef', '#8fc5f4', '#b5d9f8', '#daecfb', '#ecf5fd',
@@ -25,7 +25,7 @@ const colors = [
   '#8B1079', '#A0138E', '#B13DAC', '#C164BD', '#D08BCD', '#E0B1DE', '#EFD8EE', '#F7EBF7'
 ];
 
-export default class ColorPickerScreen extends Component<Props, State> {
+export default class ColorPickerScreen extends Component<{}, State> {
   state: State = {
     color: INITIAL_COLOR,
     textColor: Colors.$textDefaultLight,

src/components/colorPicker/ColorPickerDialog.tsx

@@ -45,24 +45,24 @@ interface Props extends DialogProps {
   /**
    * Ok (v) button color
    */
-  doneButtonColor?: string,
+  doneButtonColor?: string;
   accessibilityLabels?: {
-    dismissButton?: string,
-    doneButton?: string,
-    input?: string
+    dismissButton?: string;
+    doneButton?: string;
+    input?: string;
   };
-  /** 
+  /**
    * Whether to use the new Slider implementation using Reanimated
    */
   migrate?: boolean;
 }
 export type ColorPickerDialogProps = Props;
 
 interface State {
-  keyboardHeight: number,
-  color: any,
-  text?: string,
-  valid: boolean
+  keyboardHeight: number;
+  color: any;
+  text?: string;
+  valid: boolean;
 }
 
 const KEYBOARD_HEIGHT = 216;
@@ -357,7 +357,6 @@ class ColorPickerDialog extends PureComponent<Props, State> {
 
 export default asBaseComponent<Props>(ColorPickerDialog);
 
-
 const BORDER_RADIUS = 12;
 
 const styles = StyleSheet.create({

src/components/colorPicker/index.tsx

@@ -4,11 +4,11 @@ import Assets from '../../assets';
 import {Colors} from '../../style';
 import View from '../view';
 import Button from '../button';
-import ColorPalette from '../colorPalette';
+import ColorPalette, {ColorPaletteProps} from '../colorPalette';
 import {SWATCH_MARGIN, SWATCH_SIZE} from '../colorSwatch';
 import ColorPickerDialog, {ColorPickerDialogProps} from './ColorPickerDialog';
 
-interface Props extends ColorPickerDialogProps {
+interface Props extends ColorPickerDialogProps, Pick<ColorPaletteProps, 'onValueChange'> {
   /**
    * Array of colors for the picker's color palette (hex values)
    */
@@ -21,10 +21,6 @@ interface Props extends ColorPickerDialogProps {
    * 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.
    * {
@@ -90,7 +86,7 @@ class ColorPicker extends PureComponent<Props> {
   };
 
   render() {
-    const {initialColor, colors, value, testID, accessibilityLabels, backgroundColor} = this.props;
+    const {initialColor, colors, value, testID, accessibilityLabels, backgroundColor, onValueChange} = this.props;
     const {show} = this.state;
     return (
       <View row testID={testID} style={{backgroundColor}}>
@@ -100,7 +96,7 @@ class ColorPicker extends PureComponent<Props> {
           style={styles.palette}
           usePagination={false}
           animatedIndex={this.animatedIndex}
-          onValueChange={this.onValueChange}
+          onValueChange={onValueChange}
           testID={`${testID}-palette`}
           backgroundColor={backgroundColor}
         />
@@ -131,11 +127,6 @@ class ColorPicker extends PureComponent<Props> {
       </View>
     );
   }
-
-  // ColorPalette
-  onValueChange = (value: string, options: object) => {
-    this.props.onValueChange?.(value, options);
-  };
 }
 
 export default ColorPicker;