diff --git a/src/components/Multiselect/Multiselect.js b/src/components/Multiselect/Multiselect.js index c791c60d1..0e353eef4 100644 --- a/src/components/Multiselect/Multiselect.js +++ b/src/components/Multiselect/Multiselect.js @@ -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} - ), [menuOpen, title, disabled, options, selected, labelOnClick, renderLabelContent, renderLabelText]); + ), [menuOpen, title, disabled, filteredOptions, selected, labelOnClick, renderLabelContent, renderLabelText]); const renderMenu = React.useCallback(() => (
{ - options.length > 0 ? - options.map(({ label, title, value }) => ( + filteredOptions.length > 0 ? + filteredOptions.map(({ label, title, value }) => (
- ), [options, selected, menuOnKeyDown, menuOnClick, optionOnClick]); + ), [filteredOptions, selected, menuOnKeyDown, menuOnClick, optionOnClick]); const renderPopupLabel = React.useMemo(() => (labelProps) => { return renderLabel({ ...labelProps, diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js index bab40a1c2..edbb26550 100644 --- a/src/routes/Discover/Discover.js +++ b/src/routes/Discover/Discover.js @@ -107,9 +107,11 @@ const Discover = ({ urlParams, queryParams }) => { onSelect={onSelect} /> ))} - +
+ +
{ discover.catalog !== null && !discover.catalog.installed ? diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index 62e3adaee..527238757 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -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; + } + } + } + } + } + } } \ No newline at end of file