New component - ColorPickerDialog (#2737)

* Expose ColorPickerDialog component

* add to demo screen

Author: Inbal-Tish

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, ColorInfo} from 'react-native-ui-lib';
+import {Colors, View, Text, ColorPicker, ColorPalette, ColorName, ColorInfo, TouchableOpacity, ColorPickerDialog} from 'react-native-ui-lib';
 import {renderMultipleSegmentOptions} from '../ExampleScreenPresenter';
 
 interface State {
@@ -10,6 +10,7 @@ interface State {
   customColors: string[];
   paletteChange: boolean;
   backgroundColor: string;
+  showPicker: boolean;
 }
 
 const INITIAL_COLOR = Colors.$backgroundPrimaryHeavy;
@@ -31,7 +32,8 @@ export default class ColorPickerScreen extends Component<{}, State> {
     textColor: Colors.$textDefaultLight,
     customColors: [],
     paletteChange: false,
-    backgroundColor: Colors.$backgroundDefault
+    backgroundColor: Colors.$backgroundDefault,
+    showPicker: false
   };
 
   onDismiss = () => {
@@ -123,6 +125,25 @@ export default class ColorPickerScreen extends Component<{}, State> {
             </Text>
           </View>
         </View>
+
+        <Text center text60 marginT-10>Color Picker Dialog</Text>
+        <View center>
+          <TouchableOpacity
+            margin-10 
+            center
+            style={{width: 60, height: 60, borderWidth: 1, borderRadius: 30, backgroundColor: color}} 
+            onPress={() => this.setState({showPicker: true})}
+          >
+            <Text>Press</Text>
+          </TouchableOpacity>
+        </View>
+        <ColorPickerDialog
+          visible={this.state.showPicker}
+          initialColor={color}
+          key={color}
+          onDismiss={() => this.setState({showPicker: false})}
+          onSubmit={this.onSubmit}
+        />
       </ScrollView>
     );
   }

src/components/index.js

@@ -35,6 +35,9 @@ export default {
   get ColorPalette() {
     return require('./colorPicker/ColorPalette').default;
   },
+  get ColorPickerDialog() {
+    return require('./colorPicker/ColorPickerDialog').default;
+  },
   get ColorPicker() {
     return require('./colorPicker').default;
   },

src/index.ts

@@ -64,6 +64,7 @@ export {default as ChipsInput, ChipsInputProps, ChipsInputChipProps} from './com
 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 ColorPickerDialog, ColorPickerDialogProps} from './components/colorPicker/ColorPickerDialog';
 export {default as ColorSliderGroup, ColorSliderGroupProps} from './components/slider/ColorSliderGroup';
 export {default as ColorSwatch, ColorSwatchProps, ColorInfo} from './components/colorSwatch';
 export {default as ConnectionStatusBar, ConnectionStatusBarProps} from './components/connectionStatusBar';