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

no options label rendered when there are no options

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-10-18 14:51:18 +03:00
parent 9923970a54
commit a09b9b42d2
2 changed files with 31 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -92,12 +92,19 @@ const Multiselect = ({ className, direction, title, renderLabelContent, options,
)}
renderMenu={() => (
<div className={styles['menu-container']} onClick={popupMenuOnClick}>
{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>
))}
{
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>
)}
/>

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

@ -73,6 +73,24 @@
fill: var(--color-surfacelighter);
}
}
.no-options-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 1rem;
background-color: var(--color-backgroundlighter);
.label {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
font-size: 1.2rem;
text-align: center;
color: var(--color-surfacelighter);
}
}
}
}
}