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

[WEB-1176] chore: filter dropdown indicator and code refactor (#4379)

Browse source 
* chore: filter dropdown indicator and code refactor

* chore: code refactor

* chore: code refactor

* chore: code refactor

* chore: refactor calculateTotalFilters function with typescript generics
This commit is contained in:
Anmol Singh Bhatia 2024-05-07 14:56:19 +05:30 • committed by GitHub
parent 1eba6c24cd
commit 2aef40b7c5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
22 changed files with 219 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

31
web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
View file

@ -1,11 +1,12 @@
import React, { Fragment, useState } from "react";
import { Placement } from "@popperjs/core";
import { usePopper } from "react-popper";
// icons
import { ChevronUp } from "lucide-react";
// headless ui
import { Popover, Transition } from "@headlessui/react";
// ui
import { Button } from "@plane/ui";
// icons
type Props = {
children: React.ReactNode;
@ -15,10 +16,20 @@ type Props = {
disabled?: boolean;
tabIndex?: number;
menuButton?: React.ReactNode;
isFiltersApplied?: boolean;
};
export const FiltersDropdown: React.FC<Props> = (props) => {
const { children, icon, title = "Dropdown", placement, disabled = false, tabIndex, menuButton } = props;
const {
children,
icon,
title = "Dropdown",
placement,
disabled = false,
tabIndex,
menuButton,
isFiltersApplied = false,
} = props;
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@ -50,10 +61,16 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
<ChevronUp className={`transition-all ${open ? "" : "rotate-180"}`} size={14} strokeWidth={2} />
}
tabIndex={tabIndex}
className="relative"
>
<div className={`${open ? "text-custom-text-100" : "text-custom-text-200"}`}>
<span>{title}</span>
</div>
<>
<div className={`${open ? "text-custom-text-100" : "text-custom-text-200"}`}>
<span>{title}</span>
</div>
{isFiltersApplied && (
<span className="absolute h-2 w-2 -right-0.5 -top-0.5 bg-custom-primary-100 rounded-full" />
)}
</>
</Button>
)}
</Popover.Button>
@ -73,7 +90,9 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
style={styles.popper}
{...attributes.popper}
>
<div className="flex max-h-[30rem] lg:max-h-[37.5rem] w-[18.75rem] flex-col overflow-hidden">{children}</div>
<div className="flex max-h-[30rem] lg:max-h-[37.5rem] w-[18.75rem] flex-col overflow-hidden">
{children}
</div>
</div>
</Popover.Panel>
</Transition>