Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make use of the modal dialog

Browse source
This commit is contained in:
Vladimir Borisov 2019-11-04 14:44:35 +02:00
parent cdd6df9a83
commit 2093f8118e
No known key found for this signature in database
GPG key ID: F9A584BE4FCB6603
2 changed files with 12 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,41 +1,32 @@
const React = require('react');
const PropTypes = require('prop-types');
const AColorPicker = require('a-color-picker');
const Icon = require('stremio-icons/dom');
const { Modal } = require('stremio-router');
const Button = require('stremio/common/Button');
const useBinaryState = require('stremio/common/useBinaryState');
const ModalDialog = require('stremio/common/ModalDialog');
const useDataset = require('stremio/common/useDataset');
const ColorPicker = require('./ColorPicker');
const styles = require('./styles');
const COLOR_FORMAT = 'hexcss4';
const ColorInput = ({ className, value, onChange, ...props }) => {
value = AColorPicker.parseColor(value, COLOR_FORMAT);
const dataset = useDataset(props);
const [modalOpen, openModal, closeModal] = useBinaryState(false);
const [modalOpen, setModalOpen, setModalClsoed] = useBinaryState(false);
const [tempValue, setTempValue] = React.useState(value);
const closeModal = (event) => {
event.nativeEvent.openModalPrevented = true;
setModalClsoed();
};
const pickerLabelOnClick = React.useCallback((event) => {
if (typeof props.onClick === 'function') {
props.onClick(event);
}
if (!event.nativeEvent.openModalPrevented) {
openModal();
setModalOpen();
}
}, [props.onClick]);
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) => {
setTempValue(event.value);
}, []);
@ -50,8 +41,8 @@ const ColorInput = ({ className, value, onChange, ...props }) => {
});
}
closeModal();
}, [onChange, tempValue, dataset]);
closeModal(event);
}, [onChange, tempValue, dataset, closeModal]);
React.useEffect(() => {
setTempValue(value);
}, [value, modalOpen]);
@ -59,20 +50,9 @@ const ColorInput = ({ className, value, onChange, ...props }) => {
<Button title={value} {...props} style={{ ...props.style, backgroundColor: value }} className={className} onClick={pickerLabelOnClick}>
{
modalOpen ?
<Modal className={styles['color-input-modal-container']} onMouseDown={modalContainerOnMouseDown} onClick={modalContainerOnClick}>
<div className={styles['color-input-container']} onMouseDown={modalContentOnMouseDown}>
<div className={styles['header-container']}>
<div className={styles['title']}>Choose a color:</div>
<Button className={styles['close-button-container']} title={'Close'} onClick={closeModal}>
<Icon className={styles['icon']} icon={'ic_x'} />
</Button>
</div>
<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>
</Modal>
<ModalDialog title={'Choose a color:'} buttons={[{ label: 'Select', props: { onClick: submitButtonOnClick } }]} onCloseRequest={closeModal}>
<ColorPicker value={tempValue} onInput={colorPickerOnInput} />
</ModalDialog>
:
null
}

81
src/common/ColorInput/styles.less
View file

@ -1,81 +0,0 @@
.color-input-modal-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
pointer-events: auto;
background-color: var(--color-backgrounddarker40);
.color-input-container {
flex: none;
display: flex;
flex-direction: column;
align-items: center;
max-width: 25rem;
padding: 1rem;
background-color: var(--color-surfacelighter);
.header-container {
flex: none;
align-self: stretch;
display: flex;
flex-direction: row;
align-items: flex-start;
.title {
flex: 1;
margin-right: 1rem;
font-size: 1.2rem;
max-height: 2.4em;
}
.close-button-container {
flex: none;
width: 1.5rem;
height: 1.5rem;
padding: 0.25rem;
&:hover, &:focus {
background-color: var(--color-surfacedark20);
}
&:focus {
outline-color: var(--color-surfacedarker);
}
.icon {
display: block;
width: 100%;
height: 100%;
fill: var(--color-surfacedarker);
}
}
}
.color-picker {
flex: none;
margin: 1rem;
}
.submit-button-container {
flex: none;
align-self: stretch;
padding: 1rem;
background-color: var(--color-signal5);
&:hover, &:focus {
filter: brightness(1.2);
}
&:focus {
outline-color: var(--color-surfacedarker);
}
.label {
max-height: 2.4em;
text-align: center;
color: var(--color-surfacelighter);
}
}
}
}