mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-01-11 22:40:31 +00:00
refactor(Discover): replace Multiselect with MultiselectMenu component
This commit is contained in:
Botzy
parent
db7277714b
commit
a96a44b0dd
3 changed files with 58 additions and 52 deletions
|
|
@ -6,7 +6,7 @@ const classnames = require('classnames');
|
|||
const { default: Icon } = require('@stremio/stremio-icons/react');
|
||||
const { useServices } = require('stremio/services');
|
||||
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 useSelectableInputs = require('./useSelectableInputs');
|
||||
const styles = require('./styles');
|
||||
|
|
@ -87,14 +87,13 @@ const Discover = ({ urlParams, queryParams }) => {
|
|||
<div className={styles['discover-content']}>
|
||||
<div className={styles['catalog-container']}>
|
||||
<div className={styles['selectable-inputs-container']}>
|
||||
{selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => (
|
||||
<Multiselect
|
||||
{selectInputs.map(({ title, options, selectedOption, onSelect }, index) => (
|
||||
<MultiselectMenu
|
||||
key={index}
|
||||
className={styles['select-input']}
|
||||
title={title}
|
||||
options={options}
|
||||
selected={selected}
|
||||
renderLabelText={renderLabelText}
|
||||
selectedOption={selectedOption}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
))}
|
||||
|
|
@ -187,14 +186,13 @@ const Discover = ({ urlParams, queryParams }) => {
|
|||
{
|
||||
inputsModalOpen ?
|
||||
<ModalDialog title={'Catalog filters'} className={styles['selectable-inputs-modal']} onCloseRequest={closeInputsModal}>
|
||||
{selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => (
|
||||
<Multiselect
|
||||
{selectInputs.map(({ title, options, selectedOption, onSelect }, index) => (
|
||||
<MultiselectMenu
|
||||
key={index}
|
||||
className={styles['select-input']}
|
||||
title={title}
|
||||
options={options}
|
||||
selected={selected}
|
||||
renderLabelText={renderLabelText}
|
||||
selectedOption={selectedOption}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@
|
|||
|
||||
.select-input {
|
||||
flex: 0 1 15rem;
|
||||
background-color: var(--overlay-color);
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 1.5rem;
|
||||
|
|
|
|||
|
|
@ -4,72 +4,79 @@ const React = require('react');
|
|||
const { useTranslate } = require('stremio/common');
|
||||
|
||||
const mapSelectableInputs = (discover, t) => {
|
||||
const selectedType = discover.selectable.types.find(({ selected }) => selected);
|
||||
const typeSelect = {
|
||||
title: t.string('SELECT_TYPE'),
|
||||
options: discover.selectable.types
|
||||
.map(({ type, deepLinks }) => ({
|
||||
value: deepLinks.discover,
|
||||
label: t.stringWithPrefix(type, 'TYPE_')
|
||||
})),
|
||||
selected: discover.selectable.types
|
||||
.filter(({ selected }) => selected)
|
||||
.map(({ deepLinks }) => deepLinks.discover),
|
||||
renderLabelText: discover.selected !== null ?
|
||||
() => t.stringWithPrefix(discover.selected.request.path.type, 'TYPE_')
|
||||
:
|
||||
null,
|
||||
onSelect: (event) => {
|
||||
window.location = event.value;
|
||||
selectedOption: selectedType
|
||||
? {
|
||||
label: t.stringWithPrefix(selectedType.type, 'TYPE_'),
|
||||
value: selectedType.deepLinks.discover,
|
||||
}
|
||||
: undefined,
|
||||
title: discover.selected !== null
|
||||
? () => t.stringWithPrefix(discover.selected.request.path.type, 'TYPE_')
|
||||
: t.string('SELECT_TYPE'),
|
||||
onSelect: (value) => {
|
||||
window.location = value;
|
||||
}
|
||||
};
|
||||
const selectedCatalog = discover.selectable.catalogs.find(({ selected }) => selected);
|
||||
const catalogSelect = {
|
||||
title: t.string('SELECT_CATALOG'),
|
||||
options: discover.selectable.catalogs
|
||||
.map(({ id, name, addon, deepLinks }) => ({
|
||||
value: deepLinks.discover,
|
||||
label: t.catalogTitle({ addon, id, name }),
|
||||
title: `${name} (${addon.manifest.name})`
|
||||
})),
|
||||
selected: discover.selectable.catalogs
|
||||
.filter(({ selected }) => selected)
|
||||
.map(({ deepLinks }) => deepLinks.discover),
|
||||
renderLabelText: discover.selected !== null ?
|
||||
() => {
|
||||
selectedOption: discover.selected?.request.path.id
|
||||
? {
|
||||
label: t.catalogTitle({ addon: selectedCatalog.addon, id: selectedCatalog.id, name: selectedCatalog.name }),
|
||||
value: selectedCatalog.deepLinks.discover
|
||||
}
|
||||
: undefined,
|
||||
title: discover.selected !== null
|
||||
? () => {
|
||||
const selectableCatalog = discover.selectable.catalogs
|
||||
.find(({ id }) => id === discover.selected.request.path.id);
|
||||
return selectableCatalog ? t.catalogTitle(selectableCatalog, false) : discover.selected.request.path.id;
|
||||
}
|
||||
:
|
||||
null,
|
||||
onSelect: (event) => {
|
||||
window.location = event.value;
|
||||
t.string('SELECT_CATALOG'),
|
||||
onSelect: (value) => {
|
||||
window.location =value;
|
||||
}
|
||||
};
|
||||
const extraSelects = discover.selectable.extra.map(({ name, isRequired, options }) => ({
|
||||
title: t.stringWithPrefix(name, 'SELECT_'),
|
||||
isRequired: isRequired,
|
||||
options: options.map(({ value, deepLinks }) => ({
|
||||
label: typeof value === 'string' ? t.stringWithPrefix(value) : t.string('NONE'),
|
||||
value: JSON.stringify({
|
||||
href: deepLinks.discover,
|
||||
value
|
||||
})
|
||||
})),
|
||||
selected: options
|
||||
.filter(({ selected }) => selected)
|
||||
.map(({ value, deepLinks }) => JSON.stringify({
|
||||
href: deepLinks.discover,
|
||||
value
|
||||
const extraSelects = discover.selectable.extra.map(({ name, isRequired, options }) => {
|
||||
const selectedExtra = options.find(({ selected }) => selected);
|
||||
return {
|
||||
isRequired: isRequired,
|
||||
options: options.map(({ value, deepLinks }) => ({
|
||||
label: typeof value === 'string' ? t.stringWithPrefix(value) : t.string('NONE'),
|
||||
value: JSON.stringify({
|
||||
href: deepLinks.discover,
|
||||
value
|
||||
})
|
||||
})),
|
||||
renderLabelText: options.some(({ selected, value }) => selected && value === null) ?
|
||||
() => t.stringWithPrefix(name, 'SELECT_')
|
||||
:
|
||||
null,
|
||||
onSelect: (event) => {
|
||||
const { href } = JSON.parse(event.value);
|
||||
window.location = href;
|
||||
}
|
||||
}));
|
||||
selectedOption: {
|
||||
label: typeof selectedExtra.value === 'string' ? t.stringWithPrefix(selectedExtra.value) : t.string('NONE'),
|
||||
value: JSON.stringify({
|
||||
href: selectedExtra.deepLinks.discover,
|
||||
value: selectedExtra.value,
|
||||
})
|
||||
},
|
||||
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];
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue