[WEB-1262] refactor: custom hook for common dropdown logic (#4420)

* refactor: custom hook for common dropdown logic

* chore: clear query for label dropdowns
This commit is contained in:
Aaryan Khandelwal 2024-05-22 12:45:51 +05:30 committed by GitHub
parent f13c190676
commit 639d24bd5a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 204 additions and 278 deletions

View file

@ -7,8 +7,7 @@ import { Combobox } from "@headlessui/react";
import { cn } from "@/helpers/common.helper";
// hooks
import { useMember } from "@/hooks/store";
import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
import { useDropdown } from "@/hooks/use-dropdown";
// components
import { DropdownButton } from "../buttons";
import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
@ -62,32 +61,18 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
};
if (multiple) comboboxProps.multiple = true;
const handleClose = () => {
if (!isOpen) return;
setIsOpen(false);
onClose && onClose();
};
const toggleDropdown = () => {
setIsOpen((prevIsOpen) => !prevIsOpen);
if (isOpen) onClose && onClose();
};
const { handleClose, handleKeyDown, handleOnClick } = useDropdown({
dropdownRef,
isOpen,
onClose,
setIsOpen,
});
const dropdownOnChange = (val: string & string[]) => {
onChange(val);
if (!multiple) handleClose();
};
const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.stopPropagation();
e.preventDefault();
toggleDropdown();
};
useOutsideClickDetector(dropdownRef, handleClose);
return (
<Combobox
as="div"