diff --git a/src/common/MultiselectMenu/Dropdown/Dropdown.tsx b/src/common/MultiselectMenu/Dropdown/Dropdown.tsx index 74b88b3c0..9f82106d1 100644 --- a/src/common/MultiselectMenu/Dropdown/Dropdown.tsx +++ b/src/common/MultiselectMenu/Dropdown/Dropdown.tsx @@ -14,7 +14,7 @@ type Props = { menuOpen: boolean | (() => void); level: number; setLevel: (level: number) => void; - onSelect: (event: any) => void; + onSelect: (value: number) => void; }; const Dropdown = ({ level, setLevel, options, onSelect, selectedOption, menuOpen }: Props) => { @@ -25,11 +25,11 @@ const Dropdown = ({ level, setLevel, options, onSelect, selectedOption, menuOpen }; return ( -
+
{ level > 0 ? : null diff --git a/src/common/MultiselectMenu/Dropdown/Option/Option.less b/src/common/MultiselectMenu/Dropdown/Option/Option.less index 067934dfc..a0ee1743f 100644 --- a/src/common/MultiselectMenu/Dropdown/Option/Option.less +++ b/src/common/MultiselectMenu/Dropdown/Option/Option.less @@ -15,7 +15,6 @@ .icon { flex: none; - // display: none; width: 0.5rem; height: 0.5rem; border-radius: 100%; diff --git a/src/common/MultiselectMenu/Dropdown/Option/Option.tsx b/src/common/MultiselectMenu/Dropdown/Option/Option.tsx index 28a431b1f..4309e766e 100644 --- a/src/common/MultiselectMenu/Dropdown/Option/Option.tsx +++ b/src/common/MultiselectMenu/Dropdown/Option/Option.tsx @@ -9,7 +9,7 @@ import Icon from '@stremio/stremio-icons/react'; type Props = { option: MultiselectMenuOption; selectedOption?: MultiselectMenuOption | null; - onSelect: (value: string) => void; + onSelect: (value: number) => void; }; const Option = ({ option, selectedOption, onSelect }: Props) => { @@ -32,7 +32,7 @@ const Option = ({ option, selectedOption, onSelect }: Props) => { } { option.level ? - + : null } diff --git a/src/common/MultiselectMenu/MultiselectMenu.less b/src/common/MultiselectMenu/MultiselectMenu.less index 58eec12dd..3c7b81b59 100644 --- a/src/common/MultiselectMenu/MultiselectMenu.less +++ b/src/common/MultiselectMenu/MultiselectMenu.less @@ -3,11 +3,11 @@ @border-radius: 2.75rem; .multiselect-menu { - background-color: var(--overlay-color); position: relative; - min-width: 150px; + min-width: 8.5rem; overflow: visible; border-radius: @border-radius; + &.disabled { pointer-events: none; opacity: 0.3; @@ -15,7 +15,6 @@ .multiselect-button { color: var(--primary-foreground-color); - background-color: rgba(255, 255, 255, 0.05); padding: 0.75rem 1.5rem; display: flex; justify-content: space-between; @@ -24,12 +23,17 @@ border-radius: @border-radius; .icon { - width: 1.5rem; + width: 1rem; color: var(--primary-foreground-color); + opacity: 0.6; &.open { transform: rotate(180deg); } } } + + &:hover { + background-color: var(--overlay-color); + } } \ No newline at end of file diff --git a/src/common/MultiselectMenu/MultiselectMenu.tsx b/src/common/MultiselectMenu/MultiselectMenu.tsx index 030b097da..2bd298752 100644 --- a/src/common/MultiselectMenu/MultiselectMenu.tsx +++ b/src/common/MultiselectMenu/MultiselectMenu.tsx @@ -14,7 +14,7 @@ type Props = { title?: string; options: MultiselectMenuOption[]; selectedOption?: MultiselectMenuOption; - onSelect: (event: any) => void; + onSelect: (value: number) => void; }; const MultiselectMenu = ({ className, title, options, selectedOption, onSelect }: Props) => { @@ -22,9 +22,8 @@ const MultiselectMenu = ({ className, title, options, selectedOption, onSelect } const multiselectMenuRef = useOutsideClick(() => closeMenu()); const [level, setLevel] = React.useState(0); - const onOptionSelect = (event: any) => { - console.log(event.value); - level ? setLevel(level + 1) : onSelect(event), closeMenu(); + const onOptionSelect = (value: number) => { + level ? setLevel(level + 1) : onSelect(value), closeMenu(); }; return ( @@ -37,7 +36,7 @@ const MultiselectMenu = ({ className, title, options, selectedOption, onSelect } aria-expanded={menuOpen} > {title} - + { menuOpen ? diff --git a/src/common/MultiselectMenu/types.d.ts b/src/common/MultiselectMenu/types.d.ts index a1724ab9b..7ed039ddd 100644 --- a/src/common/MultiselectMenu/types.d.ts +++ b/src/common/MultiselectMenu/types.d.ts @@ -1,7 +1,7 @@ type MultiselectMenuOption = { id?: number; label: string; - value: string; + value: number; destination?: string; default?: boolean; hidden?: boolean; diff --git a/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js b/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js index 6ecc2c815..71c10ce92 100644 --- a/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js +++ b/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js @@ -36,8 +36,7 @@ const SeasonsBar = ({ className, seasons, season, onSelect }) => { }); } }, [season, seasons, onSelect]); - const seasonOnSelect = React.useCallback((event) => { - const value = parseFloat(event.value); + const seasonOnSelect = React.useCallback((value) => { if (typeof onSelect === 'function') { onSelect({ type: 'select',