Feat/color picker add full color to result (#2651)

* ColorPicker - small fixes

* ColorSwatch - refactor result

* Add hexString

* Rename to value

* Rename to value 2

* Rename to ColorInfo

Author: M-i-k-e-l

demo/src/screens/componentScreens/ColorPickerScreen.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {Colors, View, Text, ColorPicker, ColorPalette, ColorName} from 'react-native-ui-lib';
+import {Colors, View, Text, ColorPicker, ColorPalette, ColorName, ColorInfo} from 'react-native-ui-lib';
 import {renderMultipleSegmentOptions} from '../ExampleScreenPresenter';
 
 interface State {
@@ -44,12 +44,12 @@ export default class ColorPickerScreen extends Component<{}, State> {
     this.setState({color, textColor, customColors: _.clone(customColors), paletteChange: false});
   };
 
-  onValueChange = (value: string, options: object) => {
-    this.setState({color: value, textColor: options ? _.get(options, 'tintColor') : undefined, paletteChange: false});
+  onValueChange = (value: string, colorInfo: ColorInfo) => {
+    this.setState({color: value, textColor: colorInfo?.tintColor, paletteChange: false});
   };
 
-  onPaletteValueChange = (value: string, options: object) => {
-    this.setState({color: value, textColor: options ? _.get(options, 'tintColor') : undefined, paletteChange: true});
+  onPaletteValueChange = (value: string, colorInfo: ColorInfo) => {
+    this.setState({color: value, textColor: colorInfo?.tintColor, paletteChange: true});
   };
 
   render() {

src/components/colorPalette/ColorPalette.api.json

@@ -31,7 +31,7 @@
     },
     {
       "name": "onValueChange",
-      "type": "(value: string, options: object) => void",
+      "type": "(value: string, colorInfo: ColorInfo) => void",
       "description": "Invoked once when value changes by selecting one of the swatches in the palette"
     },
     {"name": "swatchStyle", "type": "ViewStyle", "description": "Style to pass all the ColorSwatches in the palette"},

src/components/colorPalette/index.tsx

@@ -8,7 +8,7 @@ import View from '../view';
 import Carousel from '../carousel';
 import ScrollBar from '../scrollBar';
 import PageControl from '../pageControl';
-import ColorSwatch, {SWATCH_SIZE, SWATCH_MARGIN} from '../colorSwatch';
+import ColorSwatch, {ColorSwatchProps, ColorInfo, SWATCH_SIZE, SWATCH_MARGIN} from '../colorSwatch';
 
 interface Props {
   /**
@@ -50,7 +50,7 @@ interface Props {
   /**
    * Invoked once when value changes by selecting one of the swatches in the palette
    */
-  onValueChange?: (value: string, options: object) => void;
+  onValueChange?: ColorSwatchProps['onPress'];
   style?: StyleProp<ViewStyle>;
   testID?: string;
   /**
@@ -261,8 +261,8 @@ class ColorPalette extends PureComponent<Props, State> {
     this.setState({currentPage: index});
   };
 
-  onValueChange = (value: string, options: object) => {
-    this.props.onValueChange?.(value, options);
+  onValueChange = (value: string, colorInfo: ColorInfo) => {
+    this.props.onValueChange?.(value, colorInfo);
   };
 
   getHorizontalMargins = (index: number) => {

src/components/colorPicker/colorPicker.api.json

@@ -22,7 +22,7 @@
     },
     {
       "name": "onValueChange",
-      "type": "(value: string, options: object) => void",
+      "type": "(value: string, colorInfo: ColorInfo) => void",
       "description": "Callback for the picker's color palette change"
     },
     {

src/components/colorSwatch/colorSwatch.api.json

@@ -16,7 +16,7 @@
     {"name": "color", "type": "string", "description": "The color of the ColorSwatch"},
     {"name": "selected", "type": "boolean", "description": "Is the initial state is selected"},
     {"name": "animated", "type": "boolean", "description": "Is first render should be animated"},
-    {"name": "onPress", "type": "(value: string, options: object) => void", "description": "Callback from press event"},
+    {"name": "onPress", "type": "(value: string, colorInfo: ColorInfo) => void", "description": "Callback from press event"},
     {"name": "index", "type": "number", "description": "The index of the Swatch if in array"},
     {"name": "style", "type": "ViewStyle", "description": "Component's style"},
     {"name": "testID", "type": "string", "description": "The test id for e2e tests"},

src/components/colorSwatch/index.tsx

@@ -7,6 +7,15 @@ import View from '../view';
 import TouchableOpacity from '../touchableOpacity';
 import Image from '../image';
 
+export interface ColorInfo {
+  index?: number;
+  tintColor?: string;
+  /**
+   * The color result with 6 characters (#FFFFFF and never #FFF)
+   */
+  hexString: string;
+}
+
 interface Props {
   /**
    * The identifier value of the ColorSwatch in a ColorSwatch palette.
@@ -32,7 +41,7 @@ interface Props {
   /**
    * onPress callback
    */
-  onPress?: (value: string, options: object) => void;
+  onPress?: (value: string, colorInfo: ColorInfo) => void;
   index?: number;
   style?: StyleProp<ViewStyle>;
   testID?: string;
@@ -111,7 +120,9 @@ class ColorSwatch extends PureComponent<Props> {
   onPress = () => {
     const {color = '', value, index} = this.props;
     const tintColor = this.getTintColor(value);
-    this.props.onPress?.(value || color, {tintColor, index});
+    const result = value || color;
+    const hexString = Colors.getHexString(result);
+    this.props.onPress?.(result, {tintColor, index, hexString});
   };
 
   getTintColor(color?: string) {

src/index.ts

@@ -65,7 +65,7 @@ export {default as Chip, ChipProps} from './components/chip';
 export {default as ColorPicker, ColorPickerProps} from './components/colorPicker';
 export {default as ColorPalette, ColorPaletteProps} from './components/colorPalette';
 export {default as ColorSliderGroup, ColorSliderGroupProps} from './components/slider/ColorSliderGroup';
-export {default as ColorSwatch, ColorSwatchProps} from './components/colorSwatch';
+export {default as ColorSwatch, ColorSwatchProps, ColorInfo} from './components/colorSwatch';
 export {default as ConnectionStatusBar, ConnectionStatusBarProps} from './components/connectionStatusBar';
 export {default as Dash, DashProps} from './components/dash';
 export {default as DateTimePicker, DateTimePickerProps, DateTimePickerMode} from './components/dateTimePicker';