Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-08-16 15:44:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

renderOptions func created to avoid duplicate code

Browse source
This commit is contained in:
svetlagasheva 2020-02-05 18:29:18 +02:00
parent db14f79ba5
commit a3efef4528
1 changed files with 17 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -108,6 +108,21 @@ const Multiselect = ({ className, direction, title, disabled, dataset, modalSele
{children}
</Button>
));
const renderOptions = React.useCallback((options) => {
return (
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>
);
}, [options]);
return (
<React.Fragment>
{
@ -125,19 +140,7 @@ const Multiselect = ({ className, direction, title, disabled, dataset, modalSele
}}
renderMenu={() => (
<div className={styles['menu-container']} onKeyDown={popupMenuOnKeyDown} onClick={popupMenuOnClick}>
{
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>
}
{renderOptions(options)}
</div>
)}
/>
@ -151,19 +154,7 @@ const Multiselect = ({ className, direction, title, disabled, dataset, modalSele
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>
}
{renderOptions(options)}
</div>
</ModalDialog>
: