Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-05-12 09:10:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(Discover): replace Multiselect with MultiselectMenu component

Browse source
This commit is contained in:
Botzy 2025-03-12 19:27:49 +02:00
parent db7277714b
commit a96a44b0dd
3 changed files with 58 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,7 +6,7 @@ const classnames = require('classnames');
const { default: Icon } = require('@stremio/stremio-icons/react'); const { default: Icon } = require('@stremio/stremio-icons/react');
const { useServices } = require('stremio/services'); const { useServices } = require('stremio/services');
const { CONSTANTS, useBinaryState, useOnScrollToBottom, withCoreSuspender } = require('stremio/common'); const { CONSTANTS, useBinaryState, useOnScrollToBottom, withCoreSuspender } = require('stremio/common');
const { AddonDetailsModal, Button, DelayedRenderer, Image, MainNavBars, MetaItem, MetaPreview, Multiselect, ModalDialog } = require('stremio/components'); const { AddonDetailsModal, Button, DelayedRenderer, Image, MainNavBars, MetaItem, MetaPreview, Multiselect, ModalDialog, MultiselectMenu } = require('stremio/components');
const useDiscover = require('./useDiscover'); const useDiscover = require('./useDiscover');
const useSelectableInputs = require('./useSelectableInputs'); const useSelectableInputs = require('./useSelectableInputs');
const styles = require('./styles'); const styles = require('./styles');
@ -87,14 +87,13 @@ const Discover = ({ urlParams, queryParams }) => {
<div className={styles['discover-content']}> <div className={styles['discover-content']}>
<div className={styles['catalog-container']}> <div className={styles['catalog-container']}>
<div className={styles['selectable-inputs-container']}> <div className={styles['selectable-inputs-container']}>
{selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => ( {selectInputs.map(({ title, options, selectedOption, onSelect }, index) => (
<Multiselect <MultiselectMenu
key={index} key={index}
className={styles['select-input']} className={styles['select-input']}
title={title} title={title}
options={options} options={options}
selected={selected} selectedOption={selectedOption}
renderLabelText={renderLabelText}
onSelect={onSelect} onSelect={onSelect}
/> />
))} ))}
@ -187,14 +186,13 @@ const Discover = ({ urlParams, queryParams }) => {
{ {
inputsModalOpen ? inputsModalOpen ?
<ModalDialog title={'Catalog filters'} className={styles['selectable-inputs-modal']} onCloseRequest={closeInputsModal}> <ModalDialog title={'Catalog filters'} className={styles['selectable-inputs-modal']} onCloseRequest={closeInputsModal}>
{selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => ( {selectInputs.map(({ title, options, selectedOption, onSelect }, index) => (
<Multiselect <MultiselectMenu
key={index} key={index}
className={styles['select-input']} className={styles['select-input']}
title={title} title={title}
options={options} options={options}
selected={selected} selectedOption={selectedOption}
renderLabelText={renderLabelText}
onSelect={onSelect} onSelect={onSelect}
/> />
))} ))}

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

@ -50,6 +50,7 @@
.select-input { .select-input {
flex: 0 1 15rem; flex: 0 1 15rem;
background-color: var(--overlay-color);
&:not(:first-child) { &:not(:first-child) {
margin-left: 1.5rem; margin-left: 1.5rem;

93
src/routes/Discover/useSelectableInputs.js
View file

@ -4,72 +4,79 @@ const React = require('react');
const { useTranslate } = require('stremio/common'); const { useTranslate } = require('stremio/common');
const mapSelectableInputs = (discover, t) => { const mapSelectableInputs = (discover, t) => {
const selectedType = discover.selectable.types.find(({ selected }) => selected);
const typeSelect = { const typeSelect = {
title: t.string('SELECT_TYPE'),
options: discover.selectable.types options: discover.selectable.types
.map(({ type, deepLinks }) => ({ .map(({ type, deepLinks }) => ({
value: deepLinks.discover, value: deepLinks.discover,
label: t.stringWithPrefix(type, 'TYPE_') label: t.stringWithPrefix(type, 'TYPE_')
})), })),
selected: discover.selectable.types selectedOption: selectedType
.filter(({ selected }) => selected) ? {
.map(({ deepLinks }) => deepLinks.discover), label: t.stringWithPrefix(selectedType.type, 'TYPE_'),
renderLabelText: discover.selected !== null ? value: selectedType.deepLinks.discover,
() => t.stringWithPrefix(discover.selected.request.path.type, 'TYPE_') }
: : undefined,
null, title: discover.selected !== null
onSelect: (event) => { ? () => t.stringWithPrefix(discover.selected.request.path.type, 'TYPE_')
window.location = event.value; : t.string('SELECT_TYPE'),
onSelect: (value) => {
window.location = value;
} }
}; };
const selectedCatalog = discover.selectable.catalogs.find(({ selected }) => selected);
const catalogSelect = { const catalogSelect = {
title: t.string('SELECT_CATALOG'),
options: discover.selectable.catalogs options: discover.selectable.catalogs
.map(({ id, name, addon, deepLinks }) => ({ .map(({ id, name, addon, deepLinks }) => ({
value: deepLinks.discover, value: deepLinks.discover,
label: t.catalogTitle({ addon, id, name }), label: t.catalogTitle({ addon, id, name }),
title: `${name} (${addon.manifest.name})` title: `${name} (${addon.manifest.name})`
})), })),
selected: discover.selectable.catalogs selectedOption: discover.selected?.request.path.id
.filter(({ selected }) => selected) ? {
.map(({ deepLinks }) => deepLinks.discover), label: t.catalogTitle({ addon: selectedCatalog.addon, id: selectedCatalog.id, name: selectedCatalog.name }),
renderLabelText: discover.selected !== null ? value: selectedCatalog.deepLinks.discover
() => { }
: undefined,
title: discover.selected !== null
? () => {
const selectableCatalog = discover.selectable.catalogs const selectableCatalog = discover.selectable.catalogs
.find(({ id }) => id === discover.selected.request.path.id); .find(({ id }) => id === discover.selected.request.path.id);
return selectableCatalog ? t.catalogTitle(selectableCatalog, false) : discover.selected.request.path.id; return selectableCatalog ? t.catalogTitle(selectableCatalog, false) : discover.selected.request.path.id;
} }
: :
null, t.string('SELECT_CATALOG'),
onSelect: (event) => { onSelect: (value) => {
window.location = event.value; window.location =value;
} }
}; };
const extraSelects = discover.selectable.extra.map(({ name, isRequired, options }) => ({ const extraSelects = discover.selectable.extra.map(({ name, isRequired, options }) => {
title: t.stringWithPrefix(name, 'SELECT_'), const selectedExtra = options.find(({ selected }) => selected);
isRequired: isRequired, return {
options: options.map(({ value, deepLinks }) => ({ isRequired: isRequired,
label: typeof value === 'string' ? t.stringWithPrefix(value) : t.string('NONE'), options: options.map(({ value, deepLinks }) => ({
value: JSON.stringify({ label: typeof value === 'string' ? t.stringWithPrefix(value) : t.string('NONE'),
href: deepLinks.discover, value: JSON.stringify({
value href: deepLinks.discover,
}) value
})), })
selected: options
.filter(({ selected }) => selected)
.map(({ value, deepLinks }) => JSON.stringify({
href: deepLinks.discover,
value
})), })),
renderLabelText: options.some(({ selected, value }) => selected && value === null) ? selectedOption: {
() => t.stringWithPrefix(name, 'SELECT_') label: typeof selectedExtra.value === 'string' ? t.stringWithPrefix(selectedExtra.value) : t.string('NONE'),
: value: JSON.stringify({
null, href: selectedExtra.deepLinks.discover,
onSelect: (event) => { value: selectedExtra.value,
const { href } = JSON.parse(event.value); })
window.location = href; },
} title: options.some(({ selected, value }) => selected && value === null) ?
})); () => t.stringWithPrefix(name, 'SELECT_')
: t.stringWithPrefix(selectedExtra.value),
onSelect: (value) => {
const { href } = JSON.parse(value);
window.location = href;
}
};
});
return [[typeSelect, catalogSelect, ...extraSelects], discover.selectable.nextPage]; return [[typeSelect, catalogSelect, ...extraSelects], discover.selectable.nextPage];
}; };