thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

[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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
web/components/dropdowns/cycle/index.tsx
View File

@ -8,8 +8,7 @@ import { ContrastIcon } from "@plane/ui";
import { cn } from "@/helpers/common.helper";
// hooks
import { useCycle } 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";
// local components and constants
import { DropdownButton } from "../buttons";
import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
@ -57,32 +56,18 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
const selectedName = value ? getCycleNameById(value) : null;
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 | null) => {
onChange(val);
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"

29
web/components/dropdowns/date-range.tsx
View File

@ -4,15 +4,14 @@ import { DateRange, DayPicker, Matcher } from "react-day-picker";
import { usePopper } from "react-popper";
import { ArrowRight, CalendarDays } from "lucide-react";
import { Combobox } from "@headlessui/react";
// hooks
// components
// ui
import { Button } from "@plane/ui";
// helpers
import { cn } from "@/helpers/common.helper";
import { renderFormattedDate } from "@/helpers/date-time.helper";
import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
// hooks
import { useDropdown } from "@/hooks/use-dropdown";
// components
import { DropdownButton } from "./buttons";
// types
import { TButtonVariants } from "./types";
@ -105,6 +104,13 @@ export const DateRangeDropdown: React.FC<Props> = (props) => {
if (referenceElement) referenceElement.focus();
};
const { handleKeyDown, handleOnClick } = useDropdown({
dropdownRef,
isOpen,
onOpen,
setIsOpen,
});
const handleClose = () => {
if (!isOpen) return;
setIsOpen(false);
@ -115,21 +121,6 @@ export const DateRangeDropdown: React.FC<Props> = (props) => {
if (referenceElement) referenceElement.blur();
};
const toggleDropdown = () => {
if (!isOpen) onOpen();
setIsOpen((prevIsOpen) => !prevIsOpen);
};
const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.stopPropagation();
e.preventDefault();
toggleDropdown();
};
useOutsideClickDetector(dropdownRef, handleClose);
const disabledDays: Matcher[] = [];
if (minDate) disabledDays.push({ before: minDate });
if (maxDate) disabledDays.push({ after: maxDate });

43
web/components/dropdowns/date.tsx
View File

@ -7,14 +7,13 @@ import { Combobox } from "@headlessui/react";
import { cn } from "@/helpers/common.helper";
import { renderFormattedDate, getDate } from "@/helpers/date-time.helper";
// hooks
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";
// types
import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
import { TDropdownProps } from "./types";
// constants
import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
// types
import { TDropdownProps } from "./types";
type Props = TDropdownProps & {
clearIconClassName?: string;
@ -76,34 +75,22 @@ export const DateDropdown: React.FC<Props> = (props) => {
if (referenceElement) referenceElement.focus();
};
const handleClose = () => {
if (!isOpen) return;
setIsOpen(false);
if (referenceElement) referenceElement.blur();
onClose && onClose();
};
const toggleDropdown = () => {
if (!isOpen) onOpen();
setIsOpen((prevIsOpen) => !prevIsOpen);
if (isOpen) onClose && onClose();
};
const { handleClose, handleKeyDown, handleOnClick } = useDropdown({
dropdownRef,
isOpen,
onClose,
onOpen,
setIsOpen,
});
const dropdownOnChange = (val: Date | null) => {
onChange(val);
if (closeOnSelect) handleClose();
if (closeOnSelect) {
handleClose();
referenceElement?.blur();
}
};
const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.stopPropagation();
e.preventDefault();
toggleDropdown();
};
useOutsideClickDetector(dropdownRef, handleClose);
const disabledDays: Matcher[] = [];
if (minDate) disabledDays.push({ before: minDate });
if (maxDate) disabledDays.push({ after: maxDate });

53
web/components/dropdowns/estimate.tsx
View File

@ -1,4 +1,4 @@
import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
import { Fragment, ReactNode, useRef, useState } from "react";
import sortBy from "lodash/sortBy";
import { observer } from "mobx-react";
import { usePopper } from "react-popper";
@ -8,8 +8,7 @@ import { Combobox } from "@headlessui/react";
import { cn } from "@/helpers/common.helper";
// hooks
import { useAppRouter, useEstimate } 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";
@ -106,50 +105,26 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
const selectedEstimate = value !== null ? getEstimatePointValue(value, projectId) : null;
const onOpen = () => {
if (!activeEstimate && workspaceSlug) fetchProjectEstimates(workspaceSlug, projectId);
const onOpen = async () => {
if (!activeEstimate && workspaceSlug) await fetchProjectEstimates(workspaceSlug, projectId);
};
const handleClose = () => {
if (!isOpen) return;
setIsOpen(false);
onClose && onClose();
};
const toggleDropdown = () => {
if (!isOpen) onOpen();
setIsOpen((prevIsOpen) => !prevIsOpen);
if (isOpen) onClose && onClose();
};
const { handleClose, handleKeyDown, handleOnClick, searchInputKeyDown } = useDropdown({
dropdownRef,
inputRef,
isOpen,
onClose,
onOpen,
query,
setIsOpen,
setQuery,
});
const dropdownOnChange = (val: number | null) => {
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);
useEffect(() => {
if (isOpen && inputRef.current) {
inputRef.current.focus();
}
}, [isOpen]);
return (
<Combobox
as="div"

29
web/components/dropdowns/member/index.tsx
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"

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,

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"

52
web/components/dropdowns/project.tsx
View File

@ -1,22 +1,23 @@
import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
import { Fragment, ReactNode, useRef, useState } from "react";
import { observer } from "mobx-react";
import { usePopper } from "react-popper";
import { Check, ChevronDown, Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// types
import { IProject } from "@plane/types";
// hooks
// components
import { ProjectLogo } from "@/components/project";
// helpers
import { cn } from "@/helpers/common.helper";
// hooks
import { useProject } 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";
// helpers
// types
import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
import { TDropdownProps } from "./types";
// constants
import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
// types
import { TDropdownProps } from "./types";
type Props = TDropdownProps & {
button?: ReactNode;
@ -96,37 +97,21 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
const selectedProject = value ? getProjectById(value) : null;
const handleClose = () => {
if (!isOpen) return;
setIsOpen(false);
onClose && onClose();
};
const toggleDropdown = () => {
setIsOpen((prevIsOpen) => !prevIsOpen);
};
const { handleClose, handleKeyDown, handleOnClick, searchInputKeyDown } = useDropdown({
dropdownRef,
inputRef,
isOpen,
onClose,
query,
setIsOpen,
setQuery,
});
const dropdownOnChange = (val: string) => {
onChange(val);
handleClose();
};
const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.stopPropagation();
e.preventDefault();
toggleDropdown();
};
useOutsideClickDetector(dropdownRef, handleClose);
useEffect(() => {
if (isOpen && inputRef.current) {
inputRef.current.focus();
}
}, [isOpen]);
return (
<Combobox
as="div"
@ -203,6 +188,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
onChange={(e) => setQuery(e.target.value)}
placeholder="Search"
displayValue={(assigned: any) => assigned?.name}
onKeyDown={searchInputKeyDown}
/>
</div>
<div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">

62
web/components/dropdowns/state.tsx
View File

@ -3,20 +3,19 @@ import { observer } from "mobx-react";
import { usePopper } from "react-popper";
import { Check, ChevronDown, Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// hooks
// ui
import { Spinner, StateGroupIcon } from "@plane/ui";
// helpers
import { cn } from "@/helpers/common.helper";
// hooks
import { useAppRouter, useProjectState } 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";
// icons
// helpers
// types
import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
import { TDropdownProps } from "./types";
// constants
import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
// types
import { TDropdownProps } from "./types";
type Props = TDropdownProps & {
button?: ReactNode;
@ -99,51 +98,28 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
setStateLoader(false);
}
};
const { handleClose, handleKeyDown, handleOnClick, searchInputKeyDown } = useDropdown({
dropdownRef,
inputRef,
isOpen,
onClose,
onOpen,
query,
setIsOpen,
setQuery,
});
useEffect(() => {
if (projectId) onOpen();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [projectId]);
const handleClose = () => {
if (!isOpen) return;
setIsOpen(false);
onClose && onClose();
};
const toggleDropdown = () => {
if (!isOpen) onOpen();
setIsOpen((prevIsOpen) => !prevIsOpen);
if (isOpen) onClose && onClose();
};
const dropdownOnChange = (val: string) => {
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);
useEffect(() => {
if (isOpen && inputRef.current) {
inputRef.current.focus();
}
}, [isOpen]);
return (
<Combobox
as="div"

1
web/components/issues/issue-layouts/properties/labels.tsx
View File

@ -72,6 +72,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
const handleClose = () => {
if (!isOpen) return;
setIsOpen(false);
setQuery("");
onClose && onClose();
};

1
web/components/issues/select/label.tsx
View File

@ -57,6 +57,7 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
const handleClose = () => {
if (isDropdownOpen) setIsDropdownOpen(false);
if (referenceElement) referenceElement.blur();
setQuery("");
};
const toggleDropdown = () => {

76
web/hooks/use-dropdown.ts Normal file
View File

@ -0,0 +1,76 @@
import { useEffect } from "react";
// hooks
import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
type TArguments = {
dropdownRef: React.RefObject<HTMLDivElement>;
inputRef?: React.RefObject<HTMLInputElement | null>;
isOpen: boolean;
onClose?: () => void;
onOpen?: () => Promise<void> | void;
query?: string;
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
setQuery?: React.Dispatch<React.SetStateAction<string>>;
};
export const useDropdown = (args: TArguments) => {
const { dropdownRef, inputRef, isOpen, onClose, onOpen, query, setIsOpen, setQuery } = args;
/**
* @description clear the search input when the user presses the escape key, if the search input is not empty
* @param {React.KeyboardEvent<HTMLInputElement>} e
*/
const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (query !== "" && e.key === "Escape") {
e.stopPropagation();
setQuery?.("");
}
};
/**
* @description close the dropdown, clear the search input, and call the onClose callback
*/
const handleClose = () => {
if (!isOpen) return;
setIsOpen(false);
onClose?.();
setQuery?.("");
};
// toggle the dropdown, call the onOpen callback if the dropdown is closed, and call the onClose callback if the dropdown is open
const toggleDropdown = () => {
if (!isOpen) onOpen?.();
setIsOpen((prevIsOpen) => !prevIsOpen);
if (isOpen) onClose?.();
};
const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
/**
* @description toggle the dropdown on click
* @param {React.MouseEvent<HTMLButtonElement, MouseEvent>} e
*/
const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.stopPropagation();
e.preventDefault();
toggleDropdown();
};
// close the dropdown when the user clicks outside of the dropdown
useOutsideClickDetector(dropdownRef, handleClose);
// focus the search input when the dropdown is open
useEffect(() => {
if (isOpen && inputRef?.current) {
inputRef.current.focus();
}
}, [inputRef, isOpen]);
return {
handleClose,
handleKeyDown,
handleOnClick,
searchInputKeyDown,
};
};