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 with selectInput options implemented

Browse source
This commit is contained in:
svetlagasheva 2020-02-05 16:08:25 +02:00
parent bd1a4f2768
commit 4f37b43a05
3 changed files with 89 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -148,7 +148,26 @@ const Multiselect = ({ className, direction, title, disabled, dataset, modalSele
className
})}
{
menuOpen ? <ModalDialog /> : null
menuOpen ?
<ModalDialog title={title} onCloseRequest={() => closeMenu()}>
<div className={classnames(styles['menu-container'], { 'modal': modalSelects })}>
{
options.length > 0 ?
options.map(({ label, value }) => (
<Button key={value} className={classnames(styles['option-container'], { 'selected': selected.includes(value) })} title={typeof label === 'string' ? label : value} data-value={value} onClick={optionOnClick}>
<div className={styles['label']}>{typeof label === 'string' ? label : value}</div>
<Icon className={styles['icon']} icon={'ic_check'} />
</Button>
))
:
<div className={styles['no-options-container']}>
<div className={styles['label']}>No options available</div>
</div>
}
</div>
</ModalDialog>
:
null
}
</React.Fragment>
}

20
src/common/Multiselect/styles.less
View file

@ -37,8 +37,24 @@
.popup-menu-container {
width: 100%;
}
}
.menu-container {
&:global(.modal) {
.option-container {
width: 15rem;
&:not(:last-child) {
margin-bottom: 1rem;
}
}
.no-options-container {
width: 15rem;
}
}
.menu-container {
.option-container {
display: flex;
flex-direction: row;
@ -91,6 +107,4 @@
color: var(--color-surfacelighter);
}
}
}
}
}

6
src/routes/Discover/Discover.js
View file

@ -130,15 +130,13 @@ const Discover = ({ urlParams, queryParams }) => {
{
inputsModalOpen ?
<ModalDialog title={'Select inputs'} className={styles['selectable-inputs-modal-container']} onCloseRequest={() => closeInputsModal()}>
{
selectInputs.map((selectInput, index) => (
{selectInputs.map((selectInput, index) => (
<Multiselect
{...selectInput}
key={index}
modalSelects={true}
/>
))
}
))}
</ModalDialog>
:
null