binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

38
web/components/dropdowns/module/index.tsx
View file

@ -2,19 +2,18 @@ import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
import { observer } from "mobx-react-lite";
import { ChevronDown, X } from "lucide-react";
import { Combobox } from "@headlessui/react";
// hooks
// ui
import { DiceIcon, Tooltip } from "@plane/ui";
// helpers
import { cn } from "@/helpers/common.helper";
// hooks
import { useModule } 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";
import { usePlatformOS } from "@/hooks/use-platform-os";
// components
import { DropdownButton } from "../buttons";
// icons
// helpers
// types
import { BUTTON_VARIANTS_WITHOUT_TEXT } from "../constants";
// types
import { TDropdownProps } from "../types";
// constants
import { ModuleOptions } from "./module-options";
@ -178,32 +177,19 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
const { getModuleNameById } = useModule();
const handleClose = () => {
if (!isOpen) return;
setIsOpen(false);
onClose && onClose();
};
const toggleDropdown = () => {
setIsOpen((prevIsOpen) => !prevIsOpen);
if (isOpen) onClose && onClose();
};
const { handleClose, handleKeyDown, handleOnClick } = useDropdown({
dropdownRef,
inputRef,
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);
const comboboxProps: any = {
value,
onChange: dropdownOnChange,