Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Dropped forwardRef. Minor formatting changes

Browse source
This commit is contained in:
Vladimir Borisov 2019-09-25 15:51:43 +03:00
parent 51b607e7b4
commit d9c3743400
No known key found for this signature in database
GPG key ID: F9A584BE4FCB6603
1 changed files with 13 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/common/ColorInput/ColorInput.js
View file

@ -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,