Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 23:12:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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 Icon = require('stremio-icons/dom/Icon');
const styles = require('./styles'); const styles = require('./styles');
const ColorInput = React.forwardRef((props, ref) => { const ColorInput = ({ className, defaultValue, onChange }) => {
const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false); const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false);
const [color, setColor] = React.useState(props.defaultValue); const [color, setColor] = React.useState(defaultValue);
const [chosenColor, setChosenColor] = React.useState(props.defaultValue); const [selectedColor, setSelectedColor] = React.useState(defaultValue);
const updateColorsAndCloseMenu = () => { setChosenColor(color); props.onChange(color); closeMenu(); }; const updateColorsAndCloseMenu = React.useCallback(() => {
setSelectedColor(color);
onChange(color);
closeMenu();
}, [color, onChange]);
return ( return (
<Popup <Popup
open={menuOpen} open={menuOpen}
@ -20,25 +24,23 @@ const ColorInput = React.forwardRef((props, ref) => {
onCloseRequest={closeMenu} onCloseRequest={closeMenu}
// onCloseRequest={(event) => event.type === 'scroll' || closeMenu()} // onCloseRequest={(event) => event.type === 'scroll' || closeMenu()}
renderLabel={(ref) => ( 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={() => ( renderMenu={() => (
<div className={classnames(styles['color-input-container'] )}> <div className={classnames(styles['color-input-container'])}>
<Button onClick={closeMenu}> <Button onClick={closeMenu}>
<Icon className={classnames(styles['x-icon'])} icon={'ic_x'} /> <Icon className={classnames(styles['x-icon'])} icon={'ic_x'} />
</Button> </Button>
<h1>Choose a color:</h1> <h1>Choose a color:</h1>
<ColorPicker value={color} onChange={setColor} className={classnames(styles['color-input'])}/> <ColorPicker className={classnames(styles['color-input'])} value={color} onChange={setColor} />
<Button className={classnames(styles['button'])} onClick={updateColorsAndCloseMenu}>Select</Button> <Button className={classnames(styles['button'])} onClick={updateColorsAndCloseMenu}>Select</Button>
</div> </div>
)} )}
/> />
); );
}); };
ColorInput.displayName = 'ColorInput';
ColorInput.propTypes = { ColorInput.propTypes = {
className: PropTypes.string, className: PropTypes.string,
defaultValue: PropTypes.string, defaultValue: PropTypes.string,