plane/web/components/cycles/list/root.tsx
Aaryan Khandelwal d2717a221c
[WEB-1110] dev: custom context menu for issues, cycles, modules, views, pages and projects (#4267)
* dev: context menu

* chore: handle menu position on close

* chore: project quick actions

* chore: add more options to the project context menu

* chore: cycle item context menu

* refactor: context menu folder structure

* chore: module custom context menu

* chore: view custom context menu

* chore: issues custom context menu

* chore: reorder options

* chore: issues custom context menu

* chore: render the context menu in a portal
2024-04-30 18:59:07 +05:30

56 lines
1.9 KiB
TypeScript

import { FC } from "react";
import { observer } from "mobx-react-lite";
import { ChevronRight } from "lucide-react";
import { Disclosure } from "@headlessui/react";
// components
import { ListLayout } from "@/components/core/list";
import { CyclePeekOverview, CyclesListMap } from "@/components/cycles";
// helpers
import { cn } from "@/helpers/common.helper";
export interface ICyclesList {
completedCycleIds: string[];
cycleIds: string[];
workspaceSlug: string;
projectId: string;
isArchived?: boolean;
}
export const CyclesList: FC<ICyclesList> = observer((props) => {
const { completedCycleIds, cycleIds, workspaceSlug, projectId, isArchived = false } = props;
return (
<div className="h-full overflow-y-auto">
<div className="flex h-full w-full justify-between">
<ListLayout>
<CyclesListMap
cycleIds={cycleIds}
projectId={projectId}
workspaceSlug={workspaceSlug}
/>
{completedCycleIds.length !== 0 && (
<Disclosure as="div" className="py-8 pl-3 space-y-4">
<Disclosure.Button className="bg-custom-background-80 font-semibold text-sm py-1 px-2 rounded ml-5 flex items-center gap-1">
{({ open }) => (
<>
Completed cycles ({completedCycleIds.length})
<ChevronRight
className={cn("h-3 w-3 transition-all", {
"rotate-90": open,
})}
/>
</>
)}
</Disclosure.Button>
<Disclosure.Panel>
<CyclesListMap cycleIds={completedCycleIds} projectId={projectId} workspaceSlug={workspaceSlug} />
</Disclosure.Panel>
</Disclosure>
)}
</ListLayout>
<CyclePeekOverview projectId={projectId} workspaceSlug={workspaceSlug} isArchived={isArchived} />
</div>
</div>
);
});