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 }) => (
-  <React.Fragment>
-    <SketchPicker
-      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;
-        }
+export default function ColorPicker(props) {
+  const [color, setColor] = React.useState(props.color)
+  const { onChange = () => {}, presets, style, disableAlpha } = props
 
-        :global(.sketch-picker > div:nth-child(3) > div > div > input) {
-          width: 100% !important;
-          box-shadow: none;
-          outline: none;
-          border-radius: 2px;
-          background: ${COLORS.DARK_GRAY};
-          color: #fff !important;
-        }
+  return (
+    <React.Fragment>
+      <SketchPicker
+        styles={{ picker: style || pickerStyle }}
+        onChange={setColor}
+        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
+            }
 
-        /* prettier-ignore */
-        :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>
-)
+            :global(.sketch-picker > div:nth-child(3) > div > div > input) {
+              width: 100% !important
+              box-shadow: none
+              outline: none
+              border-radius: 2px
+              background: ${COLORS.DARK_GRAY}
+              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>
+  )
+}