mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-05-18 15:11:51 +00:00
refactor(MultiselectMenu): lint & types
This commit is contained in:
parent
fd4c9e73c8
commit
a162397d29
3 changed files with 14 additions and 14 deletions
|
|
@ -10,11 +10,11 @@ import styles from './Dropdown.less';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
options: MultiselectMenuOption[];
|
options: MultiselectMenuOption[];
|
||||||
value?: string | number | null;
|
value?: string | number;
|
||||||
menuOpen: boolean | (() => void);
|
menuOpen: boolean | (() => void);
|
||||||
level: number;
|
level: number;
|
||||||
setLevel: (level: number) => void;
|
setLevel: (level: number) => void;
|
||||||
onSelect: (value: string | number | null) => void;
|
onSelect: (value: string | number) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props) => {
|
const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props) => {
|
||||||
|
|
@ -22,7 +22,7 @@ const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props
|
||||||
const optionsRef = useRef(new Map());
|
const optionsRef = useRef(new Map());
|
||||||
const containerRef = useRef(null);
|
const containerRef = useRef(null);
|
||||||
|
|
||||||
const selectedOption = options.find(opt => opt.value === value) || null;
|
const selectedOption = options.find((opt) => opt.value === value);
|
||||||
|
|
||||||
const handleSetOptionRef = useCallback((optionValue: string | number) => (node: HTMLButtonElement | null) => {
|
const handleSetOptionRef = useCallback((optionValue: string | number) => (node: HTMLButtonElement | null) => {
|
||||||
if (node) {
|
if (node) {
|
||||||
|
|
|
||||||
|
|
@ -8,8 +8,8 @@ import Icon from '@stremio/stremio-icons/react';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
option: MultiselectMenuOption;
|
option: MultiselectMenuOption;
|
||||||
selectedValue?: string | number | null;
|
selectedValue?: string | number;
|
||||||
onSelect: (value: string | number | null) => void;
|
onSelect: (value: string | number) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
const Option = forwardRef<HTMLButtonElement, Props>(({ option, selectedValue, onSelect }, ref) => {
|
const Option = forwardRef<HTMLButtonElement, Props>(({ option, selectedValue, onSelect }, ref) => {
|
||||||
|
|
|
||||||
|
|
@ -13,8 +13,8 @@ type Props = {
|
||||||
className?: string,
|
className?: string,
|
||||||
title?: string | (() => string);
|
title?: string | (() => string);
|
||||||
options: MultiselectMenuOption[];
|
options: MultiselectMenuOption[];
|
||||||
value?: string | number | null;
|
value?: string | number;
|
||||||
onSelect: (value: string | number | null) => void;
|
onSelect: (value: string | number) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
const MultiselectMenu = ({ className, title, options, value, onSelect }: Props) => {
|
const MultiselectMenu = ({ className, title, options, value, onSelect }: Props) => {
|
||||||
|
|
@ -22,9 +22,9 @@ const MultiselectMenu = ({ className, title, options, value, onSelect }: Props)
|
||||||
const multiselectMenuRef = useOutsideClick(() => closeMenu());
|
const multiselectMenuRef = useOutsideClick(() => closeMenu());
|
||||||
const [level, setLevel] = React.useState<number>(0);
|
const [level, setLevel] = React.useState<number>(0);
|
||||||
|
|
||||||
const selectedOption = options.find(opt => opt.value === value);
|
const selectedOption = options.find((opt) => opt.value === value);
|
||||||
|
|
||||||
const onOptionSelect = (selectedValue: string | number | null) => {
|
const onOptionSelect = (selectedValue: string | number) => {
|
||||||
level ? setLevel(level + 1) : onSelect(selectedValue), closeMenu();
|
level ? setLevel(level + 1) : onSelect(selectedValue), closeMenu();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue