New component for color input

src/common/ColorInput/ColorInput.js

@@ -0,0 +1,45 @@
+const React = require('react');
+const classnames = require('classnames');
+const PropTypes = require('prop-types');
+const Popup = require('stremio/common/Popup');
+const Button = require('stremio/common/Button');
+const ColorPicker = require('stremio/common/ColorPicker');
+const useBinaryState = require('stremio/common/useBinaryState');
+const styles = require('./styles');
+
+const ColorInput = React.forwardRef((props, ref) => {
+    const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false);
+    const [color, setColor] = React.useState(props.defaultValue);
+    const [chosenColor, setChosenColor] = React.useState(props.defaultValue);
+    const updateolorsAndCloseMenu = () => { setChosenColor(color); props.onChange(color); closeMenu(); };
+    return (
+        <Popup
+            open={menuOpen}
+            menuMatchLabelWidth={false}
+            onCloseRequest={closeMenu}
+            renderLabel={(ref) => (
+                <Button ref={ref} title={name} onClick={toggleMenu} style={{ backgroundColor: chosenColor }} className={props.className}></Button>
+            )}
+            renderMenu={() => (
+                <div className={classnames(styles['color-input-container'] )}>
+                    <ColorPicker value={color} onChange={setColor}  className={classnames(styles['color-input'] )} pickerOpts={{showAlpha: false}}/>
+                    <div className={classnames(styles['buttons-container'])}>
+                        <Button onClick={updateolorsAndCloseMenu} style={{ color: '#fff', backgroundColor: 'var(--color-primary)', padding: '1rem', marginTop: '1rem' }}>OK</Button>
+                        <Button onClick={closeMenu} style={{ color: '#fff', backgroundColor: 'var(--color-secondary)', padding: '1rem', marginTop: '1rem' }}>Cancel</Button>
+                    </div>
+                </div>
+            )}
+        />
+    );
+});
+
+
+ColorInput.displayName = 'ColorInput';
+
+ColorInput.propTypes = {
+    className: PropTypes.string,
+    defaultValue: PropTypes.string,
+    onChange: PropTypes.func
+};
+
+module.exports = ColorInput;

src/common/ColorInput/index.js

@@ -0,0 +1,4 @@
+const ColorInput = require('./ColorInput');
+
+module.exports = ColorInput;
+

src/common/ColorInput/styles.less

@@ -0,0 +1,11 @@
+.color-input-container {
+    display: flex;
+    padding: 10px;
+    background-color: #000;
+    flex-direction: row;
+
+    .buttons-container {
+        padding-left: 1rem;
+        flex-grow: .5;
+    }
+}

src/common/ColorPicker/ColorPicker.js

@@ -4,7 +4,7 @@ const AColorPicker = require('a-color-picker');
 
 const COLOR_FORMAT = 'rgbacss';
 
-const ColorPicker = ({ className, value, onChange }) => {
+const ColorPicker = ({ className, value, onChange, pickerOpts }) => {
     value = AColorPicker.parseColor(value, COLOR_FORMAT);
     const pickerRef = React.useRef(null);
     const pickerElementRef = React.useRef(null);
@@ -14,7 +14,8 @@ const ColorPicker = ({ className, value, onChange }) => {
             showHSL: false,
             showHEX: false,
             showRGB: false,
-            showAlpha: true
+            showAlpha: true,
+            ...pickerOpts
         });
     }, []);
     React.useEffect(() => {

src/common/index.js

@@ -1,6 +1,7 @@
 const Button = require('./Button');
 const Checkbox = require('./Checkbox');
 const ColorPicker = require('./ColorPicker');
+const ColorInput = require('./ColorInput');
 const Dropdown = require('./Dropdown');
 const MainNavBar = require('./MainNavBar');
 const MetaItem = require('./MetaItem');
@@ -26,6 +27,7 @@ module.exports = {
     Button,
     Checkbox,
     ColorPicker,
+    ColorInput,
     Dropdown,
     MainNavBar,
     MetaItem,