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 1

Multiselect compatible with native data props

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-12-02 10:37:21 +02:00
parent 9696796d6b
commit 2ec1448841
2 changed files with 17 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/common/Multiselect/Multiselect.js
View file

@ -7,21 +7,19 @@ const Popup = require('stremio/common/Popup');
const useBinaryState = require('stremio/common/useBinaryState');
const styles = require('./styles');
const Multiselect = ({ className, direction, title, options, selected, disabled, dataset, renderLabelContent, renderLabelText, onOpen, onClose, onSelect }) => {
options = Array.isArray(options) ?
options.filter(option => option && typeof option.value === 'string')
:
[];
selected = Array.isArray(selected) ?
selected.filter(value => typeof value === 'string')
:
[];
const Multiselect = ({ className, direction, title, options, selected, disabled, dataset, renderLabelContent, renderLabelText, onOpen, onClose, onSelect, ...props }) => {
options = Array.isArray(options) ? options.filter((option) => option && typeof option.value === 'string') : [];
selected = Array.isArray(selected) ? selected.filter((value) => typeof value === 'string') : [];
const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false);
const popupLabelOnClick = React.useCallback((event) => {
if (typeof props.onClick === 'function') {
props.onClick(event);
}
if (!event.nativeEvent.togglePopupPrevented) {
toggleMenu();
}
}, [toggleMenu]);
}, [props.onClick, toggleMenu]);
const popupMenuOnClick = React.useCallback((event) => {
event.nativeEvent.togglePopupPrevented = true;
}, []);
@ -42,7 +40,7 @@ const Multiselect = ({ className, direction, title, options, selected, disabled,
if (!event.nativeEvent.closeMenuPrevented) {
closeMenu();
}
}, [onSelect, dataset]);
}, [dataset, onSelect]);
React.useLayoutEffect(() => {
if (menuOpen) {
if (typeof onOpen === 'function') {
@ -65,8 +63,8 @@ const Multiselect = ({ className, direction, title, options, selected, disabled,
open={menuOpen}
direction={direction}
onCloseRequest={closeMenu}
renderLabel={({ ref, className: popupLabelClassName, children }) => (
<Button ref={ref} className={classnames(className, popupLabelClassName, styles['label-container'], { 'active': menuOpen })} title={title} disabled={disabled} onClick={popupLabelOnClick}>
renderLabel={(popupProps) => (
<Button {...popupProps} {...props} className={classnames(className, popupProps.className, styles['label-container'], { 'active': menuOpen })} title={title} disabled={disabled} onClick={popupLabelOnClick}>
{
typeof renderLabelContent === 'function' ?
renderLabelContent()
@ -92,7 +90,7 @@ const Multiselect = ({ className, direction, title, options, selected, disabled,
<Icon className={styles['icon']} icon={'ic_arrow_down'} />
</React.Fragment>
}
{children}
{popupProps.children}
</Button>
)}
renderMenu={() => (

5
storybook/stories/Multiselect/MultiselectSingleValue/MultiselectSingleValue.js
View file

@ -10,6 +10,9 @@ storiesOf('Multiselect', module).add('MultiselectSingleValue', () => {
action('onSelect')(event);
setSelected([event.value]);
}, []);
const domEventHandler = React.useCallback((event) => {
action('domEventHandler')(event.currentTarget.dataset);
}, []);
return (
<Multiselect
className={styles['label-container']}
@ -28,6 +31,8 @@ storiesOf('Multiselect', module).add('MultiselectSingleValue', () => {
onOpen={action('onOpen')}
onClose={action('onClose')}
onSelect={onSelect}
data-prop={'data-value'}
onClick={domEventHandler}
/>
);
});