From d9c3743400b18ee3e2f5cd5ccca55eeea24693be Mon Sep 17 00:00:00 2001
From: Vladimir Borisov <borisov1024@gmail.com>
Date: Wed, 25 Sep 2019 15:51:43 +0300
Subject: [PATCH] Dropped forwardRef. Minor formatting changes

---
 src/common/ColorInput/ColorInput.js | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/common/ColorInput/ColorInput.js b/src/common/ColorInput/ColorInput.js
index 3d6f4df08..28278d354 100644
--- a/src/common/ColorInput/ColorInput.js
+++ b/src/common/ColorInput/ColorInput.js
@@ -8,11 +8,15 @@ const useBinaryState = require('stremio/common/useBinaryState');
 const Icon = require('stremio-icons/dom/Icon');
 const styles = require('./styles');
 
-const ColorInput = React.forwardRef((props, ref) => {
+const ColorInput = ({ className, defaultValue, onChange }) => {
     const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false);
-    const [color, setColor] = React.useState(props.defaultValue);
-    const [chosenColor, setChosenColor] = React.useState(props.defaultValue);
-    const updateColorsAndCloseMenu = () => { setChosenColor(color); props.onChange(color); closeMenu(); };
+    const [color, setColor] = React.useState(defaultValue);
+    const [selectedColor, setSelectedColor] = React.useState(defaultValue);
+    const updateColorsAndCloseMenu = React.useCallback(() => {
+        setSelectedColor(color);
+        onChange(color);
+        closeMenu();
+    }, [color, onChange]);
     return (
         <Popup
             open={menuOpen}
@@ -20,25 +24,23 @@ const ColorInput = React.forwardRef((props, ref) => {
             onCloseRequest={closeMenu}
             // onCloseRequest={(event) => event.type === 'scroll' || closeMenu()}
             renderLabel={(ref) => (
-                <Button ref={ref} title={name} onClick={toggleMenu} style={{ backgroundColor: chosenColor }} className={props.className}></Button>
+                <Button className={className} ref={ref} title={selectedColor} onClick={toggleMenu} style={{ backgroundColor: selectedColor }}></Button>
             )}
             renderMenu={() => (
-                <div className={classnames(styles['color-input-container'] )}>
+                <div className={classnames(styles['color-input-container'])}>
                     <Button onClick={closeMenu}>
                         <Icon className={classnames(styles['x-icon'])} icon={'ic_x'} />
                     </Button>
                     <h1>Choose a color:</h1>
-                    <ColorPicker value={color} onChange={setColor}  className={classnames(styles['color-input'])}/>
-                    <Button  className={classnames(styles['button'])} onClick={updateColorsAndCloseMenu}>Select</Button>
+                    <ColorPicker className={classnames(styles['color-input'])} value={color} onChange={setColor} />
+                    <Button className={classnames(styles['button'])} onClick={updateColorsAndCloseMenu}>Select</Button>
                 </div>
             )}
         />
     );
-});
+};
 
 
-ColorInput.displayName = 'ColorInput';
-
 ColorInput.propTypes = {
     className: PropTypes.string,
     defaultValue: PropTypes.string,