spread props in more common components

This commit is contained in:
NikolaBorislavovHristov 2019-10-21 14:48:39 +03:00
parent 7d99a17b98
commit 8300d09418
3 changed files with 13 additions and 4 deletions

View file

@ -17,10 +17,14 @@ const ColorInput = ({ className, value, onChange, ...props }) => {
const [modalOpen, openModal, closeModal] = useBinaryState(false);
const [tempValue, setTempValue] = React.useState(value);
const pickerLabelOnClick = React.useCallback((event) => {
if (typeof props.onClick === 'function') {
props.onClick(event);
}
if (!event.nativeEvent.openModalPrevented) {
openModal();
}
}, []);
}, [props.onClick]);
const modalContainerOnClick = React.useCallback((event) => {
event.nativeEvent.openModalPrevented = true;
}, []);
@ -52,7 +56,7 @@ const ColorInput = ({ className, value, onChange, ...props }) => {
setTempValue(value);
}, [value, modalOpen]);
return (
<Button style={{ backgroundColor: value }} className={className} title={value} onClick={pickerLabelOnClick}>
<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}>

View file

@ -22,6 +22,10 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, playI
const dataset = useDataset(props);
const [menuOpen, onMenuOpen, onMenuClose] = useBinaryState(false);
const metaItemOnClick = React.useCallback((event) => {
if (typeof props.onClick === 'function') {
props.onClick(event);
}
if (!event.nativeEvent.selectMetaItemPrevented && typeof onSelect === 'function') {
onSelect({
type: 'select',
@ -30,7 +34,7 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, playI
nativeEvent: event.nativeEvent
});
}
}, [onSelect, dataset]);
}, [props.onClick, onSelect, dataset]);
const multiselectOnClick = React.useCallback((event) => {
event.nativeEvent.selectMetaItemPrevented = true;
}, []);
@ -45,7 +49,7 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, playI
}
}, [menuOptionOnSelect, dataset]);
return (
<Button {...props} className={classnames(className, styles['meta-item-container'], styles['poster-shape-poster'], styles[`poster-shape-${posterShape}`], { 'active': menuOpen })} title={name} onClick={metaItemOnClick}>
<Button title={name} {...props} className={classnames(className, styles['meta-item-container'], styles['poster-shape-poster'], styles[`poster-shape-${posterShape}`], { 'active': menuOpen })} onClick={metaItemOnClick}>
<div className={styles['poster-container']}>
<div className={styles['poster-image-layer']}>
<Image

View file

@ -31,6 +31,7 @@ const Multiselect = ({ className, direction, title, renderLabelContent, options,
if (typeof onSelect === 'function') {
onSelect({
type: 'select',
value: event.currentTarget.dataset.value,
reactEvent: event,
nativeEvent: event.nativeEvent,
dataset: dataset