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

ColorInput props spread dropped

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-10-15 15:44:54 +03:00
parent 032273de15
commit 7a12e1feba
1 changed files with 23 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -11,14 +11,27 @@ const styles = require('./styles');
const COLOR_FORMAT = 'hexcss4'; const COLOR_FORMAT = 'hexcss4';
const ColorInput = ({ value, onChange, ...props }) => { const ColorInput = ({ className, value, onChange, ...props }) => {
value = AColorPicker.parseColor(value, COLOR_FORMAT); value = AColorPicker.parseColor(value, COLOR_FORMAT);
const dataset = useDataset(props); const dataset = useDataset(props);
const [modalOpen, openModal, closeModal] = useBinaryState(false); const [modalOpen, openModal, closeModal] = useBinaryState(false);
const [tempValue, setTempValue] = React.useState(value); const [tempValue, setTempValue] = React.useState(value);
React.useEffect(() => { const pickerLabelOnClick = React.useCallback((event) => {
setTempValue(value); if (!event.nativeEvent.openModalPrevented) {
}, [value, modalOpen]); openModal();
}
}, []);
const modalContainerOnClick = React.useCallback((event) => {
event.nativeEvent.openModalPrevented = true;
}, []);
const modalContainerOnMouseDown = React.useCallback((event) => {
if (!event.nativeEvent.closeModalPrevented) {
closeModal();
}
}, []);
const modalContentOnMouseDown = React.useCallback((event) => {
event.nativeEvent.closeModalPrevented = true;
}, []);
const colorPickerOnInput = React.useCallback((event) => { const colorPickerOnInput = React.useCallback((event) => {
setTempValue(event.value); setTempValue(event.value);
}, []); }, []);
@ -35,25 +48,14 @@ const ColorInput = ({ value, onChange, ...props }) => {
closeModal(); closeModal();
}, [onChange, tempValue, dataset]); }, [onChange, tempValue, dataset]);
const modalContainerOnMouseDown = React.useCallback((event) => { React.useEffect(() => {
if (!event.nativeEvent.closeModalPrevented) { setTempValue(value);
closeModal(); }, [value, modalOpen]);
}
}, []);
const modalContentOnMouseDown = React.useCallback((event) => {
event.nativeEvent.closeModalPrevented = true;
}, []);
return ( return (
<React.Fragment> <Button style={{ backgroundColor: value }} className={className} title={value} onClick={pickerLabelOnClick}>
<Button
title={value}
{...props}
style={{ backgroundColor: value }}
onClick={openModal}
/>
{ {
modalOpen ? modalOpen ?
<Modal className={styles['color-input-modal-container']} onMouseDown={modalContainerOnMouseDown}> <Modal className={styles['color-input-modal-container']} onMouseDown={modalContainerOnMouseDown} onClick={modalContainerOnClick}>
<div className={styles['color-input-container']} onMouseDown={modalContentOnMouseDown}> <div className={styles['color-input-container']} onMouseDown={modalContentOnMouseDown}>
<div className={styles['header-container']}> <div className={styles['header-container']}>
<div className={styles['title']}>Choose a color:</div> <div className={styles['title']}>Choose a color:</div>
@ -70,7 +72,7 @@ const ColorInput = ({ value, onChange, ...props }) => {
: :
null null
} }
</React.Fragment> </Button>
); );
}; };