Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 15:52:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ModalDialog used in Multiselect for no dropdown case

Browse source
This commit is contained in:
svetlagasheva 2020-02-04 18:20:57 +02:00
parent fe3bcf2586
commit 92b4b8bca3
1 changed files with 76 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,10 +4,11 @@ const classnames = require('classnames');
const Icon = require('stremio-icons/dom');
const Button = require('stremio/common/Button');
const Popup = require('stremio/common/Popup');
const ModalDialog = require('stremio/common/ModalDialog');
const useBinaryState = require('stremio/common/useBinaryState');
const styles = require('./styles');
const Multiselect = ({ className, direction, title, disabled, dataset, renderLabelContent, renderLabelText, onOpen, onClose, onSelect, ...props }) => {
const Multiselect = ({ className, direction, title, disabled, dataset, modalSelects, renderLabelContent, renderLabelText, onOpen, onClose, onSelect, ...props }) => {
const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
const options = React.useMemo(() => {
return Array.isArray(props.options) ?
@ -77,13 +78,8 @@ const Multiselect = ({ className, direction, title, disabled, dataset, renderLab
mountedRef.current = true;
}, [menuOpen]);
return (
<Popup
open={menuOpen}
direction={direction}
onCloseRequest={closeMenu}
renderLabel={({ children, ...labelProps }) => (
<Button {...labelProps} {...props} className={classnames(className, labelProps.className, styles['label-container'], { 'active': menuOpen })} title={title} disabled={disabled} onClick={popupLabelOnClick}>
const renderLabel = React.useCallback(({ children, className, ...props }) => (
<Button {...props} className={classnames(className, styles['label-container'], { 'active': menuOpen })} title={title} disabled={disabled} onClick={popupLabelOnClick}>
{
typeof renderLabelContent === 'function' ?
renderLabelContent()
@ -111,7 +107,22 @@ const Multiselect = ({ className, direction, title, disabled, dataset, renderLab
}
{children}
</Button>
)}
));
return (
<React.Fragment>
{
!modalSelects ?
<Popup
open={menuOpen}
direction={direction}
onCloseRequest={closeMenu}
renderLabel={(labelProps) => {
return renderLabel({
...labelProps,
...props,
className: classnames(className, labelProps.className)
});
}}
renderMenu={() => (
<div className={styles['menu-container']} onKeyDown={popupMenuOnKeyDown} onClick={popupMenuOnClick}>
{
@ -130,6 +141,18 @@ const Multiselect = ({ className, direction, title, disabled, dataset, renderLab
</div>
)}
/>
:
<React.Fragment>
{renderLabel({
...props,
className
})}
{
menuOpen ? <ModalDialog /> : null
}
</React.Fragment>
}
</React.Fragment>
);
};
@ -144,6 +167,7 @@ Multiselect.propTypes = {
selected: PropTypes.arrayOf(PropTypes.string),
disabled: PropTypes.bool,
dataset: PropTypes.objectOf(PropTypes.string),
modalSelects: PropTypes.bool,
renderLabelContent: PropTypes.func,
renderLabelText: PropTypes.func,
onOpen: PropTypes.func,