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

fix(Multiselect): destruct options from props to not pass them to component

Browse source
This commit is contained in:
Botzy 2025-02-18 15:33:11 +02:00
parent 2816f7bcea
commit b1365e31d4
1 changed files with 10 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/Multiselect/Multiselect.js
View file

@ -10,16 +10,16 @@ const ModalDialog = require('stremio/components/ModalDialog');
const useBinaryState = require('stremio/common/useBinaryState'); const useBinaryState = require('stremio/common/useBinaryState');
const styles = require('./styles'); const styles = require('./styles');
const Multiselect = ({ className, mode, direction, title, disabled, dataset, renderLabelContent, renderLabelText, onOpen, onClose, onSelect, ...props }) => { const Multiselect = ({ className, mode, direction, title, disabled, dataset, options, renderLabelContent, renderLabelText, onOpen, onClose, onSelect, ...props }) => {
const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false); const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
const options = React.useMemo(() => { const filteredOptions = React.useMemo(() => {
return Array.isArray(props.options) ? return Array.isArray(options) ?
props.options.filter((option) => { options.filter((option) => {
return option && (typeof option.value === 'string' || option.value === null); return option && (typeof option.value === 'string' || option.value === null);
}) })
: :
[]; [];
}, [props.options]); }, [options]);
const selected = React.useMemo(() => { const selected = React.useMemo(() => {
return Array.isArray(props.selected) ? return Array.isArray(props.selected) ?
props.selected.filter((value) => { props.selected.filter((value) => {
@ -94,7 +94,7 @@ const Multiselect = ({ className, mode, direction, title, disabled, dataset, ren
: :
selected.length > 0 ? selected.length > 0 ?
selected.map((value) => { selected.map((value) => {
const option = options.find((option) => option.value === value); const option = filteredOptions.find((option) => option.value === value);
return option && typeof option.label === 'string' ? return option && typeof option.label === 'string' ?
option.label option.label
: :
@ -109,12 +109,12 @@ const Multiselect = ({ className, mode, direction, title, disabled, dataset, ren
} }
{children} {children}
</Button> </Button>
), [menuOpen, title, disabled, options, selected, labelOnClick, renderLabelContent, renderLabelText]); ), [menuOpen, title, disabled, filteredOptions, selected, labelOnClick, renderLabelContent, renderLabelText]);
const renderMenu = React.useCallback(() => ( const renderMenu = React.useCallback(() => (
<div className={styles['menu-container']} onKeyDown={menuOnKeyDown} onClick={menuOnClick}> <div className={styles['menu-container']} onKeyDown={menuOnKeyDown} onClick={menuOnClick}>
{ {
options.length > 0 ? filteredOptions.length > 0 ?
options.map(({ label, title, value }) => ( filteredOptions.map(({ label, title, value }) => (
<Button key={value} className={classnames(styles['option-container'], { 'selected': selected.includes(value) })} title={typeof title === 'string' ? title : typeof label === 'string' ? label : value} data-value={value} onClick={optionOnClick}> <Button key={value} className={classnames(styles['option-container'], { 'selected': selected.includes(value) })} title={typeof title === 'string' ? title : typeof label === 'string' ? label : value} data-value={value} onClick={optionOnClick}>
<div className={styles['label']}>{typeof label === 'string' ? label : value}</div> <div className={styles['label']}>{typeof label === 'string' ? label : value}</div>
<div className={styles['icon']} /> <div className={styles['icon']} />
@ -126,7 +126,7 @@ const Multiselect = ({ className, mode, direction, title, disabled, dataset, ren
</div> </div>
} }
</div> </div>
), [options, selected, menuOnKeyDown, menuOnClick, optionOnClick]); ), [filteredOptions, selected, menuOnKeyDown, menuOnClick, optionOnClick]);
const renderPopupLabel = React.useMemo(() => (labelProps) => { const renderPopupLabel = React.useMemo(() => (labelProps) => {
return renderLabel({ return renderLabel({
...labelProps, ...labelProps,