Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 17:15:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #836 from Stremio/fix/discover-page-remove-duplicated-filters
Some checks failed
Build / build (push) Has been cancelled
Details

Browse source 
Discover: Remove duplicated filters in filter modal
This commit is contained in:
Timothy Z. 2025-04-15 13:44:25 +03:00 committed by GitHub
commit 3f631b1b72
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 65 additions and 29 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,

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

@ -107,9 +107,11 @@ const Discover = ({ urlParams, queryParams }) => {
onSelect={onSelect} onSelect={onSelect}
/> />
))} ))}
<Button className={styles['filter-container']} title={'All filters'} onClick={openInputsModal}> <div className={styles['filter-container']}>
<Icon className={styles['filter-icon']} name={'filters'} /> <Button className={styles['filter-button']} title={'All filters'} onClick={openInputsModal}>
</Button> <Icon className={styles['filter-icon']} name={'filters'} />
</Button>
</div>
</div> </div>
{ {
discover.catalog !== null && !discover.catalog.installed ? discover.catalog !== null && !discover.catalog.installed ?

66
src/routes/Discover/styles.less
View file

@ -59,7 +59,9 @@
display: none; display: none;
&~.filter-container { &~.filter-container {
display: flex; .filter-button {
display: flex;
}
} }
} }
@ -69,20 +71,27 @@
} }
.filter-container { .filter-container {
flex: none; display: flex;
display: none; flex: 1 0 5rem;
align-items: center; justify-content: flex-end;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: var(--border-radius);
background-color: var(--overlay-color);
.filter-icon { .filter-button {
flex: none; flex: none;
width: 1.4rem; display: none;
height: 1.4rem; align-items: center;
color: var(--primary-foreground-color); justify-content: center;
width: 3rem;
height: 3rem;
margin-left: 1.5rem;
border-radius: var(--border-radius);
background-color: var(--overlay-color);
.filter-icon {
flex: none;
width: 1.4rem;
height: 1.4rem;
color: var(--primary-foreground-color);
}
} }
} }
} }
@ -219,9 +228,14 @@
.select-input { .select-input {
height: 3.5rem; height: 3.5rem;
display: none;
&:not(:last-child) { &:nth-child(n+4) {
margin-bottom: 1rem; display: flex;
&:not(:last-child) {
margin-bottom: 1rem;
}
} }
.multiselect-menu-container { .multiselect-menu-container {
@ -363,7 +377,9 @@
display: none; display: none;
&~.filter-container { &~.filter-container {
display: flex; .filter-button {
display: flex;
}
} }
} }
} }
@ -375,4 +391,22 @@
} }
} }
} }
.selectable-inputs-modal {
.selectable-inputs-modal-container {
.selectable-inputs-modal-content {
.select-input {
display: none;
&:nth-child(n+2) {
display: flex;
&:not(:last-child) {
margin-bottom: 1rem;
}
}
}
}
}
}
} }