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

[WEB-1098] chore: dropdowns enhancement (#4375)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2024-05-07 14:02:48 +05:30 committed by GitHub
parent fb68b77068
commit a85517de99
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/ui/src/dropdowns/custom-search-select.tsx
View File

@ -66,6 +66,11 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen); const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
useOutsideClickDetector(dropdownRef, closeDropdown); useOutsideClickDetector(dropdownRef, closeDropdown);
const toggleDropdown = () => {
if (isOpen) closeDropdown();
else openDropdown();
};
return ( return (
<Combobox <Combobox
as="div" as="div"
@ -90,7 +95,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
? "cursor-not-allowed text-custom-text-200" ? "cursor-not-allowed text-custom-text-200"
: "cursor-pointer hover:bg-custom-background-80" : "cursor-pointer hover:bg-custom-background-80"
} ${customButtonClassName}`} } ${customButtonClassName}`}
onClick={openDropdown} onClick={toggleDropdown}
> >
{customButton} {customButton}
</button> </button>
@ -107,7 +112,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
? "cursor-not-allowed text-custom-text-200" ? "cursor-not-allowed text-custom-text-200"
: "cursor-pointer hover:bg-custom-background-80" : "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`} } ${buttonClassName}`}
onClick={openDropdown} onClick={toggleDropdown}
> >
{label} {label}
{!noChevron && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />} {!noChevron && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}

9
packages/ui/src/dropdowns/custom-select.tsx
View File

@ -47,6 +47,11 @@ const CustomSelect = (props: ICustomSelectProps) => {
const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen); const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
useOutsideClickDetector(dropdownRef, closeDropdown); useOutsideClickDetector(dropdownRef, closeDropdown);
const toggleDropdown = () => {
if (isOpen) closeDropdown();
else openDropdown();
};
return ( return (
<Listbox <Listbox
as="div" as="div"
@ -67,7 +72,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
className={`flex items-center justify-between gap-1 text-xs ${ className={`flex items-center justify-between gap-1 text-xs ${
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80" disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
} ${customButtonClassName}`} } ${customButtonClassName}`}
onClick={openDropdown} onClick={toggleDropdown}
> >
{customButton} {customButton}
</button> </button>
@ -82,7 +87,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
} ${ } ${
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80" disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`} } ${buttonClassName}`}
onClick={openDropdown} onClick={toggleDropdown}
> >
{label} {label}
{!noChevron && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />} {!noChevron && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}