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

69
web/components/dropdowns/priority.tsx
View file

@ -1,22 +1,23 @@
import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
import { Fragment, ReactNode, useRef, useState } from "react";
import { useTheme } from "next-themes";
import { usePopper } from "react-popper";
import { Check, ChevronDown, Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
import { TIssuePriorities } from "@plane/types";
// hooks
import { PriorityIcon, Tooltip } from "@plane/ui";
import { ISSUE_PRIORITIES } from "@/constants/issue";
import { cn } from "@/helpers/common.helper";
import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
import { usePlatformOS } from "@/hooks/use-platform-os";
// icons
// helpers
// types
import { BACKGROUND_BUTTON_VARIANTS, BORDER_BUTTON_VARIANTS, BUTTON_VARIANTS_WITHOUT_TEXT } from "./constants";
import { TDropdownProps } from "./types";
import { TIssuePriorities } from "@plane/types";
// ui
import { PriorityIcon, Tooltip } from "@plane/ui";
// constants
import { ISSUE_PRIORITIES } from "@/constants/issue";
// helpers
import { cn } from "@/helpers/common.helper";
// hooks
import { useDropdown } from "@/hooks/use-dropdown";
import { usePlatformOS } from "@/hooks/use-platform-os";
// constants
import { BACKGROUND_BUTTON_VARIANTS, BORDER_BUTTON_VARIANTS, BUTTON_VARIANTS_WITHOUT_TEXT } from "./constants";
// types
import { TDropdownProps } from "./types";
type Props = TDropdownProps & {
button?: ReactNode;
@ -328,38 +329,20 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
const filteredOptions =
query === "" ? options : options.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
const handleClose = () => {
if (!isOpen) return;
setIsOpen(false);
onClose && onClose();
};
const toggleDropdown = () => {
setIsOpen((prevIsOpen) => !prevIsOpen);
if (isOpen) onClose && onClose();
};
const dropdownOnChange = (val: TIssuePriorities) => {
onChange(val);
handleClose();
};
const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.stopPropagation();
e.preventDefault();
toggleDropdown();
};
const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (query !== "" && e.key === "Escape") {
e.stopPropagation();
setQuery("");
}
};
useOutsideClickDetector(dropdownRef, handleClose);
const { handleClose, handleKeyDown, handleOnClick, searchInputKeyDown } = useDropdown({
dropdownRef,
inputRef,
isOpen,
onClose,
query,
setIsOpen,
setQuery,
});
const ButtonToRender = BORDER_BUTTON_VARIANTS.includes(buttonVariant)
? BorderButton
@ -367,12 +350,6 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
? BackgroundButton
: TransparentButton;
useEffect(() => {
if (isOpen && inputRef.current) {
inputRef.current.focus();
}
}, [isOpen]);
return (
<Combobox
as="div"