Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-18 08:42:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Simplified ColorInput

Browse source
This commit is contained in:
Vladimir Borisov 2019-11-05 17:46:44 +02:00
parent 0b032106db
commit e6163085b5
No known key found for this signature in database
GPG key ID: F9A584BE4FCB6603
1 changed files with 6 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -14,19 +14,6 @@ const ColorInput = ({ className, value, onChange, ...props }) => {
const dataset = useDataset(props);
const [modalOpen, setModalOpen, setModalClosed] = useBinaryState(false);
const [tempValue, setTempValue] = React.useState(value);
const closeModal = (event) => {
event.nativeEvent.openModalPrevented = true;
setModalClosed();
};
const pickerLabelOnClick = React.useCallback((event) => {
if (typeof props.onClick === 'function') {
props.onClick(event);
}
if (!event.nativeEvent.openModalPrevented) {
setModalOpen();
}
}, [props.onClick]);
const colorPickerOnInput = React.useCallback((event) => {
setTempValue(event.value);
}, []);
@ -40,23 +27,23 @@ const ColorInput = ({ className, value, onChange, ...props }) => {
nativeEvent: event.nativeEvent
});
}
closeModal(event);
}, [onChange, tempValue, dataset, closeModal]);
setModalClosed();
}, [onChange, tempValue, dataset]);
React.useEffect(() => {
setTempValue(value);
}, [value, modalOpen]);
return (
<Button title={value} {...props} style={{ ...props.style, backgroundColor: value }} className={className} onClick={pickerLabelOnClick}>
<React.Fragment>
<Button title={value} {...props} style={{ ...props.style, backgroundColor: value }} className={className} onClick={setModalOpen} />
{
modalOpen ?
<ModalDialog title={'Choose a color:'} buttons={[{ label: 'Select', props: { onClick: submitButtonOnClick } }]} onCloseRequest={closeModal}>
<ModalDialog title={'Choose a color:'} buttons={[{ label: 'Select', props: { onClick: submitButtonOnClick, 'data-autofocus': true } }]} onCloseRequest={setModalClosed}>
<ColorPicker value={tempValue} onInput={colorPickerOnInput} />
</ModalDialog>
:
null
}
</Button>
</React.Fragment>
);
};