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

ColorInput works with custom syntetic events

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-10-10 18:15:35 +03:00
parent fbddd392d9
commit 5e9c1b8ff1
3 changed files with 29 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -13,6 +13,20 @@ const ColorInput = ({ value, onChange, ...props }) => {
React.useEffect(() => {
setTempValue(value);
}, [value, modalOpen]);
const colorPickerOnInput = React.useCallback((event) => {
setTempValue(event.value);
}, []);
const submitButtonOnClick = React.useCallback((event) => {
if (typeof onChange === 'function') {
onChange({
type: 'change',
value: tempValue,
nativeEvent: event.nativeEvent
});
}
closeModal();
}, [onChange, tempValue]);
const modalContainerOnMouseDown = React.useCallback((event) => {
if (!event.nativeEvent.closeModalPrevented) {
closeModal();
@ -21,15 +35,6 @@ const ColorInput = ({ value, onChange, ...props }) => {
const modalContentOnMouseDown = React.useCallback((event) => {
event.nativeEvent.closeModalPrevented = true;
}, []);
const submitButtonOnClick = React.useCallback((event) => {
if (typeof onChange === 'function') {
onChange(event);
}
if (!event.nativeEvent.closeModalPrevented) {
closeModal();
}
}, [onChange]);
return (
<React.Fragment>
<Button
@ -48,8 +53,8 @@ const ColorInput = ({ value, onChange, ...props }) => {
<Icon className={styles['icon']} icon={'ic_x'} />
</Button>
</div>
<ColorPicker className={styles['color-picker']} value={tempValue} onChange={setTempValue} />
<Button className={styles['submit-button-container']} title={'Submit'} data-value={tempValue} onClick={submitButtonOnClick}>
<ColorPicker className={styles['color-picker']} value={tempValue} onInput={colorPickerOnInput} />
<Button className={styles['submit-button-container']} title={'Submit'} onClick={submitButtonOnClick}>
<div className={styles['label']}>Select</div>
</Button>
</div>

17
src/common/ColorInput/ColorPicker/ColorPicker.js
View file

@ -7,7 +7,7 @@ const styles = require('./styles');
const COLOR_FORMAT = 'hexcss4';
// TODO implement custom picker which is keyboard accessible
const ColorPicker = ({ className, value, onChange }) => {
const ColorPicker = ({ className, value, onInput }) => {
value = AColorPicker.parseColor(value, COLOR_FORMAT);
const pickerRef = React.useRef(null);
const pickerElementRef = React.useRef(null);
@ -19,17 +19,24 @@ const ColorPicker = ({ className, value, onChange }) => {
showRGB: false,
showAlpha: true
});
const clipboardPicker = pickerElementRef.current.querySelector('.a-color-picker-clipbaord');
if (clipboardPicker instanceof HTMLElement) {
clipboardPicker.tabIndex = -1;
}
}, []);
React.useEffect(() => {
pickerRef.current.on('change', (picker, color) => {
if (typeof onChange === 'function') {
onChange(AColorPicker.parseColor(color, COLOR_FORMAT));
if (typeof onInput === 'function') {
onInput({
type: 'input',
value: AColorPicker.parseColor(color, COLOR_FORMAT)
});
}
});
return () => {
pickerRef.current.off('change');
};
}, [onChange]);
}, [onInput]);
React.useEffect(() => {
if (AColorPicker.parseColor(pickerRef.current.color, COLOR_FORMAT) !== value) {
pickerRef.current.color = value;
@ -43,7 +50,7 @@ const ColorPicker = ({ className, value, onChange }) => {
ColorPicker.propTypes = {
className: PropTypes.string,
value: PropTypes.string,
onChange: PropTypes.func
onInput: PropTypes.func
};
module.exports = ColorPicker;

2
src/common/ColorInput/ColorPicker/styles.less
View file

@ -6,7 +6,7 @@
}
:global(.a-color-picker-stack):not(:global(.a-color-picker-row-top)) canvas, :global(.a-color-picker-circle) {
border: solid 1px var(--color-surfacedark);
border: solid thin var(--color-surfacedark);
}
:global(.a-color-picker-circle) {