Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-01-11 22:40:31 +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 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 options = React.useMemo(() => {
return Array.isArray(props.options) ?
props.options.filter((option) => {
const filteredOptions = React.useMemo(() => {
return Array.isArray(options) ?
options.filter((option) => {
return option && (typeof option.value === 'string' || option.value === null);
})
:
[];
}, [props.options]);
}, [options]);
const selected = React.useMemo(() => {
return Array.isArray(props.selected) ?
props.selected.filter((value) => {
@ -94,7 +94,7 @@ const Multiselect = ({ className, mode, direction, title, disabled, dataset, ren
:
selected.length > 0 ?
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' ?
option.label
:
@ -109,12 +109,12 @@ const Multiselect = ({ className, mode, direction, title, disabled, dataset, ren
}
{children}
</Button>
), [menuOpen, title, disabled, options, selected, labelOnClick, renderLabelContent, renderLabelText]);
), [menuOpen, title, disabled, filteredOptions, selected, labelOnClick, renderLabelContent, renderLabelText]);
const renderMenu = React.useCallback(() => (
<div className={styles['menu-container']} onKeyDown={menuOnKeyDown} onClick={menuOnClick}>
{
options.length > 0 ?
options.map(({ label, title, value }) => (
filteredOptions.length > 0 ?
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}>
<div className={styles['label']}>{typeof label === 'string' ? label : value}</div>
<div className={styles['icon']} />
@ -126,7 +126,7 @@ const Multiselect = ({ className, mode, direction, title, disabled, dataset, ren
</div>
}
</div>
), [options, selected, menuOnKeyDown, menuOnClick, optionOnClick]);
), [filteredOptions, selected, menuOnKeyDown, menuOnClick, optionOnClick]);
const renderPopupLabel = React.useMemo(() => (labelProps) => {
return renderLabel({
...labelProps,

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

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

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

@ -59,7 +59,9 @@
display: none;
&~.filter-container {
display: flex;
.filter-button {
display: flex;
}
}
}
@ -69,20 +71,27 @@
}
.filter-container {
flex: none;
display: none;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: var(--border-radius);
background-color: var(--overlay-color);
display: flex;
flex: 1 0 5rem;
justify-content: flex-end;
.filter-icon {
.filter-button {
flex: none;
width: 1.4rem;
height: 1.4rem;
color: var(--primary-foreground-color);
display: none;
align-items: center;
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 {
height: 3.5rem;
display: none;
&:not(:last-child) {
margin-bottom: 1rem;
&:nth-child(n+4) {
display: flex;
&:not(:last-child) {
margin-bottom: 1rem;
}
}
.multiselect-menu-container {
@ -363,7 +377,9 @@
display: none;
&~.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;
}
}
}
}
}
}
}