From 5e9c1b8ff18c8f8ce4ba009aeb649eb1eaaf9fa0 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Thu, 10 Oct 2019 18:15:35 +0300
Subject: [PATCH] ColorInput works with custom syntetic events

---
 src/common/ColorInput/ColorInput.js           | 27 +++++++++++--------
 .../ColorInput/ColorPicker/ColorPicker.js     | 17 ++++++++----
 src/common/ColorInput/ColorPicker/styles.less |  2 +-
 3 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/common/ColorInput/ColorInput.js b/src/common/ColorInput/ColorInput.js
index 026926276..a2b294bb1 100644
--- a/src/common/ColorInput/ColorInput.js
+++ b/src/common/ColorInput/ColorInput.js
@@ -13,6 +13,20 @@ const ColorInput = ({ value, onChange, ...props }) => {
     React.useEffect(() => {
         setTempValue(value);
     }, [value, modalOpen]);
+    const colorPickerOnInput = React.useCallback((event) => {
+        setTempValue(event.value);
+    }, []);
+    const submitButtonOnClick = React.useCallback((event) => {
+        if (typeof onChange === 'function') {
+            onChange({
+                type: 'change',
+                value: tempValue,
+                nativeEvent: event.nativeEvent
+            });
+        }
+
+        closeModal();
+    }, [onChange, tempValue]);
     const modalContainerOnMouseDown = React.useCallback((event) => {
         if (!event.nativeEvent.closeModalPrevented) {
             closeModal();
@@ -21,15 +35,6 @@ const ColorInput = ({ value, onChange, ...props }) => {
     const modalContentOnMouseDown = React.useCallback((event) => {
         event.nativeEvent.closeModalPrevented = true;
     }, []);
-    const submitButtonOnClick = React.useCallback((event) => {
-        if (typeof onChange === 'function') {
-            onChange(event);
-        }
-
-        if (!event.nativeEvent.closeModalPrevented) {
-            closeModal();
-        }
-    }, [onChange]);
     return (
         <React.Fragment>
             <Button
@@ -48,8 +53,8 @@ const ColorInput = ({ value, onChange, ...props }) => {
                                     <Icon className={styles['icon']} icon={'ic_x'} />
                                 </Button>
                             </div>
-                            <ColorPicker className={styles['color-picker']} value={tempValue} onChange={setTempValue} />
-                            <Button className={styles['submit-button-container']} title={'Submit'} data-value={tempValue} onClick={submitButtonOnClick}>
+                            <ColorPicker className={styles['color-picker']} value={tempValue} onInput={colorPickerOnInput} />
+                            <Button className={styles['submit-button-container']} title={'Submit'} onClick={submitButtonOnClick}>
                                 <div className={styles['label']}>Select</div>
                             </Button>
                         </div>
diff --git a/src/common/ColorInput/ColorPicker/ColorPicker.js b/src/common/ColorInput/ColorPicker/ColorPicker.js
index 223cefbb1..d27a1142f 100644
--- a/src/common/ColorInput/ColorPicker/ColorPicker.js
+++ b/src/common/ColorInput/ColorPicker/ColorPicker.js
@@ -7,7 +7,7 @@ const styles = require('./styles');
 const COLOR_FORMAT = 'hexcss4';
 
 // TODO implement custom picker which is keyboard accessible
-const ColorPicker = ({ className, value, onChange }) => {
+const ColorPicker = ({ className, value, onInput }) => {
     value = AColorPicker.parseColor(value, COLOR_FORMAT);
     const pickerRef = React.useRef(null);
     const pickerElementRef = React.useRef(null);
@@ -19,17 +19,24 @@ const ColorPicker = ({ className, value, onChange }) => {
             showRGB: false,
             showAlpha: true
         });
+        const clipboardPicker = pickerElementRef.current.querySelector('.a-color-picker-clipbaord');
+        if (clipboardPicker instanceof HTMLElement) {
+            clipboardPicker.tabIndex = -1;
+        }
     }, []);
     React.useEffect(() => {
         pickerRef.current.on('change', (picker, color) => {
-            if (typeof onChange === 'function') {
-                onChange(AColorPicker.parseColor(color, COLOR_FORMAT));
+            if (typeof onInput === 'function') {
+                onInput({
+                    type: 'input',
+                    value: AColorPicker.parseColor(color, COLOR_FORMAT)
+                });
             }
         });
         return () => {
             pickerRef.current.off('change');
         };
-    }, [onChange]);
+    }, [onInput]);
     React.useEffect(() => {
         if (AColorPicker.parseColor(pickerRef.current.color, COLOR_FORMAT) !== value) {
             pickerRef.current.color = value;
@@ -43,7 +50,7 @@ const ColorPicker = ({ className, value, onChange }) => {
 ColorPicker.propTypes = {
     className: PropTypes.string,
     value: PropTypes.string,
-    onChange: PropTypes.func
+    onInput: PropTypes.func
 };
 
 module.exports = ColorPicker;
diff --git a/src/common/ColorInput/ColorPicker/styles.less b/src/common/ColorInput/ColorPicker/styles.less
index 6cd52668a..174895a99 100644
--- a/src/common/ColorInput/ColorPicker/styles.less
+++ b/src/common/ColorInput/ColorPicker/styles.less
@@ -6,7 +6,7 @@
     }
 
     :global(.a-color-picker-stack):not(:global(.a-color-picker-row-top)) canvas, :global(.a-color-picker-circle) {
-        border: solid 1px var(--color-surfacedark);
+        border: solid thin var(--color-surfacedark);
     }
 
     :global(.a-color-picker-circle) {