refactor(color-picker): drag the pointer smoothly (#1036)

* refactor(color-picker): drag the pointer smoothly

* keep Color picker as Functional componentgd

Co-authored-by: Mike Fix <mrfix84@gmail.com>

components/ColorPicker.js

@@ -9,38 +9,41 @@ const pickerStyle = {
   margin: '0 auto 1px',
 }
 
-const ColorPicker = ({ onChange = () => {}, color, presets, style, disableAlpha }) => (
+export default function ColorPicker(props) {
-  <React.Fragment>
+  const [color, setColor] = React.useState(props.color)
-    <SketchPicker
+  const { onChange = () => {}, presets, style, disableAlpha } = props
-      styles={{ picker: style || pickerStyle }}
-      color={color}
-      onChangeComplete={onChange}
-      presetColors={presets}
-      disableAlpha={disableAlpha}
-    />
-    <style jsx>
-      {`
-        /* react-color overrides */
-        :global(.sketch-picker > div:nth-child(3) > div > div > span) {
-          color: ${COLORS.SECONDARY} !important;
-        }
 
-        :global(.sketch-picker > div:nth-child(3) > div > div > input) {
+  return (
-          width: 100% !important;
+    <React.Fragment>
-          box-shadow: none;
+      <SketchPicker
-          outline: none;
+        styles={{ picker: style || pickerStyle }}
-          border-radius: 2px;
+        onChange={setColor}
-          background: ${COLORS.DARK_GRAY};
+        color={color}
-          color: #fff !important;
+        onChangeComplete={onChange}
-        }
+        presetColors={presets}
+        disableAlpha={disableAlpha}
+      />
+      <style jsx>
+        {`
+            /* react-color overrides */
+            :global(.sketch-picker > div:nth-child(3) > div > div > span) {
+              color: ${COLORS.SECONDARY} !important
+            }
 
-        /* prettier-ignore */
+            :global(.sketch-picker > div:nth-child(3) > div > div > input) {
-        :global(.sketch-picker > div:nth-child(2) > div:nth-child(1) > div:nth-child(2), .sketch-picker > div:nth-child(2) > div:nth-child(2)) {
+              width: 100% !important
-          background: #fff;
+              box-shadow: none
-        }
+              outline: none
-      `}
+              border-radius: 2px
-    </style>
+              background: ${COLORS.DARK_GRAY}
-  </React.Fragment>
+              color: #fff !important
-)
+            }
 
-export default ColorPicker
+            :global(.sketch-picker > div:nth-child(2) > div:nth-child(1) > div:nth-child(2), .sketch-picker > div:nth-child(2) > div:nth-child(2)) {
+              background: #fff
+            }
+          `}
+      </style>
+    </React.Fragment>
+  )
+}