github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: filter and display properties improvement (#3382)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2024-01-16 20:57:55 +05:30 committed by GitHub
parent 8ee5ba96ce
commit e751686683
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
View File

@ -1,10 +1,7 @@
import React, { Fragment, useRef, useState } from "react"; import React, { Fragment, useState } from "react";
import { usePopper } from "react-popper"; import { usePopper } from "react-popper";
import { Popover } from "@headlessui/react"; import { Popover, Transition } from "@headlessui/react";
import { Placement } from "@popperjs/core"; import { Placement } from "@popperjs/core";
// hooks
import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
import useOutsideClickDetector from "hooks/use-outside-click-detector";
// ui // ui
import { Button } from "@plane/ui"; import { Button } from "@plane/ui";
// icons // icons
@ -23,24 +20,13 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null); const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null); const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const [isOpen, setIsOpen] = useState(false);
// refs
const dropdownRef = useRef<HTMLDivElement | null>(null);
const { styles, attributes } = usePopper(referenceElement, popperElement, { const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: placement ?? "auto", placement: placement ?? "auto",
}); });
const openDropdown = () => {
setIsOpen(true);
if (referenceElement) referenceElement.focus();
};
const closeDropdown = () => setIsOpen(false);
const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
useOutsideClickDetector(dropdownRef, closeDropdown);
return ( return (
<Popover as="div" ref={dropdownRef} tabIndex={tabIndex} onKeyDown={handleKeyDown}> <Popover as="div">
{({ open }) => { {({ open }) => {
if (open) { if (open) {
} }
@ -55,15 +41,23 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
appendIcon={ appendIcon={
<ChevronUp className={`transition-all ${open ? "" : "rotate-180"}`} size={14} strokeWidth={2} /> <ChevronUp className={`transition-all ${open ? "" : "rotate-180"}`} size={14} strokeWidth={2} />
} }
onClick={openDropdown} tabIndex={tabIndex}
> >
<div className={`${open ? "text-custom-text-100" : "text-custom-text-200"}`}> <div className={`${open ? "text-custom-text-100" : "text-custom-text-200"}`}>
<span>{title}</span> <span>{title}</span>
</div> </div>
</Button> </Button>
</Popover.Button> </Popover.Button>
{isOpen && ( <Transition
<Popover.Panel static> as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel>
<div <div
className="z-10 overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg" className="z-10 overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg"
ref={setPopperElement} ref={setPopperElement}
@ -73,7 +67,7 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
<div className="flex max-h-[37.5rem] w-[18.75rem] flex-col overflow-hidden">{children}</div> <div className="flex max-h-[37.5rem] w-[18.75rem] flex-col overflow-hidden">{children}</div>
</div> </div>
</Popover.Panel> </Popover.Panel>
)} </Transition>
</> </>
); );
}} }}