Merge pull request #65 from Stremio/color-picker

Color picker

package.json

@@ -12,6 +12,7 @@
         "storybook": "start-storybook --ci --config-dir ./storybook --static-dir ./ --port 6060"
     },
     "dependencies": {
+        "a-color-picker": "1.1.8",
         "classnames": "2.2.6",
         "events": "1.1.1",
         "hat": "0.0.3",

src/common/ColorPicker/ColorPicker.js

@@ -1,18 +1,43 @@
 const React = require('react');
 const PropTypes = require('prop-types');
+const AColorPicker = require('a-color-picker');
+
+const COLOR_FORMAT = 'rgbacss';
 
-// TODO: impl this
 const ColorPicker = ({ className, value, onChange }) => {
+    value = AColorPicker.parseColor(value, COLOR_FORMAT);
+    const pickerRef = React.useRef(null);
+    const pickerElementRef = React.useRef(null);
+    React.useEffect(() => {
+        pickerRef.current = AColorPicker.createPicker(pickerElementRef.current, {
+            color: value,
+            showHSL: false,
+            showHEX: false,
+            showRGB: false,
+            showAlpha: true
+        });
+    }, []);
+    React.useEffect(() => {
+        pickerRef.current.off('change');
+        pickerRef.current.on('change', (picker, color) => {
+            if (typeof onChange === 'function') {
+                onChange(AColorPicker.parseColor(color, COLOR_FORMAT));
+            }
+        });
+    }, [onChange]);
+    React.useEffect(() => {
+        if (AColorPicker.parseColor(pickerRef.current.color, COLOR_FORMAT) !== value) {
+            pickerRef.current.color = value;
+        }
+    }, [value]);
     return (
-        <div style={{ backgroundColor: 'red' }} className={className}>
-            {value}
-        </div>
+        <div ref={pickerElementRef} className={className} />
     );
 };
 
 ColorPicker.propTypes = {
     className: PropTypes.string,
-    value: PropTypes.string.isRequired,
+    value: PropTypes.string,
     onChange: PropTypes.func
 };
 

storybook/stories/ColorPicker/ColorPicker.js

@@ -0,0 +1,18 @@
+const React = require('react');
+const { storiesOf } = require('@storybook/react');
+const { ColorPicker } = require('stremio/common');
+const styles = require('./styles');
+
+const ColorPickerExampleusage = () => {
+    const [color, setColor] = React.useState('rgba(166, 196, 213, 0.97)');
+    return (
+        <div className={styles['demo-container']}>
+            <ColorPicker
+                value={color}
+                onChange={setColor}
+            />
+            <div className={styles['test-output']}>Current color is {color}</div>
+        </div>
+    );
+}
+storiesOf('ColorPicker', module).add('ColorPicker', () => <ColorPickerExampleusage />);

storybook/stories/ColorPicker/index.js

@@ -0,0 +1 @@
+require('./ColorPicker');

storybook/stories/ColorPicker/styles.less

@@ -0,0 +1,5 @@
+.demo-container {
+    color: var(--color-surfacelighter);
+    padding: 1rem; 
+    .test-output { margin-top: 1rem; }
+}

storybook/stories/index.js

@@ -1,2 +1,3 @@
 require('./Addon');
 require('./MetaItem');
+require('./ColorPicker');

yarn.lock

@@ -1678,6 +1678,13 @@
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
+a-color-picker@1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/a-color-picker/-/a-color-picker-1.1.8.tgz#5e0ef5c8d99f5d2471682e2f76fe5562e7cb74d0"
+  integrity sha512-PGKDLFV3Qp190YKVd+TF+7ib0jvaVkq6ezaCnnFUhLVmnKLCEzUAH8CumLkP+kfeBukRcJtE9RMwbiR2Z40FbA==
+  dependencies:
+    is-plain-object "^2.0.4"
+
 abbrev@1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"