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

Reset ColorInput when closed; Close by clicking outside the dialog

Browse source
This commit is contained in:
Vladimir Borisov 2019-09-27 11:38:54 +03:00
parent 0d03bfe9db
commit 9c4715a052
No known key found for this signature in database
GPG key ID: F9A584BE4FCB6603
1 changed files with 28 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/routes/Settings/ColorInput/ColorInput.js
View file

@ -9,27 +9,41 @@ const Icon = require('stremio-icons/dom/Icon');
const styles = require('./styles');
const ColorInput = ({ className, defaultValue, onChange }) => {
const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false);
const colorInputRef = React.useRef(null);
const [colorInputVisible, showColorInput, closeColorInput] = useBinaryState(false);
const [color, setColor] = React.useState(defaultValue);
const [selectedColor, setSelectedColor] = React.useState(defaultValue);
const updateColorsAndCloseMenu = React.useCallback(() => {
const discardColorInput = React.useCallback((event) => {
if (event.type === "mousedown" && colorInputRef.current.contains(event.target)) {
return;
}
setColor(selectedColor);
closeColorInput();
});
const confirmColorInput = React.useCallback(() => {
setSelectedColor(color);
onChange(color);
closeMenu();
closeColorInput();
}, [color, onChange]);
return (
<React.Fragment>
<Button className={className} title={selectedColor} onClick={toggleMenu} style={{ backgroundColor: selectedColor }}></Button>
{menuOpen ? <Modal className={classnames(styles['color-input-modal'])}>
<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 className={classnames(styles['color-input'])} value={color} onChange={setColor} />
<Button className={classnames(styles['button'])} onClick={updateColorsAndCloseMenu}>Select</Button>
</div>
</Modal> : null}
<Button className={className} title={selectedColor} onClick={showColorInput} style={{ backgroundColor: selectedColor }}></Button>
{
colorInputVisible
?
<Modal className={classnames(styles['color-input-modal'])} onMouseDown={discardColorInput}>
<div ref={colorInputRef} className={classnames(styles['color-input-container'])}>
<Button onClick={discardColorInput}>
<Icon className={classnames(styles['x-icon'])} icon={'ic_x'} />
</Button>
<h1>Choose a color:</h1>
<ColorPicker className={classnames(styles['color-input'])} value={color} onChange={setColor} />
<Button className={classnames(styles['button'])} onClick={confirmColorInput}>Select</Button>
</div>
</Modal>
:
null
}
</React.Fragment>
);
};