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