mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
55 lines
2.0 KiB
TypeScript
55 lines
2.0 KiB
TypeScript
|
import { FC } from "react";
|
||
|
|
import { observer } from "mobx-react-lite";
|
||
|
|
import { LucideIcon, List, Kanban, Calendar, Sheet, GanttChartSquare } from "lucide-react";
|
||
|
|
// hooks
|
||
|
|
import { useViewDetail } from "hooks/store";
|
||
|
|
// ui
|
||
|
|
import { Tooltip } from "@plane/ui";
|
||
|
|
// types
|
||
|
|
import { TViewTypes } from "@plane/types";
|
||
|
|
import { TViewOperations } from "./types";
|
||
|
|
|
||
|
|
type TViewLayoutRoot = {
|
||
|
|
workspaceSlug: string;
|
||
|
|
projectId: string | undefined;
|
||
|
|
viewId: string;
|
||
|
|
viewType: TViewTypes;
|
||
|
|
viewOperations: TViewOperations;
|
||
|
|
};
|
||
|
|
|
||
|
|
const LAYOUTS_DATA: { key: string; title: string; icon: LucideIcon }[] = [
|
||
|
|
{ key: "list", title: "List Layout", icon: List },
|
||
|
|
{ key: "kanban", title: "Kanban Layout", icon: Kanban },
|
||
|
|
{ key: "calendar", title: "Calendar Layout", icon: Calendar },
|
||
|
|
{ key: "spreadsheet", title: "Spreadsheet Layout", icon: Sheet },
|
||
|
|
{ key: "gantt", title: "Gantt Chart layout", icon: GanttChartSquare },
|
||
|
|
];
|
||
|
|
|
||
|
|
export const ViewLayoutRoot: FC<TViewLayoutRoot> = observer((props) => {
|
||
|
|
const { workspaceSlug, projectId, viewId, viewType, viewOperations } = props;
|
||
|
|
// hooks
|
||
|
|
const viewDetailStore = useViewDetail(workspaceSlug, projectId, viewId, viewType);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="relative flex gap-0.5 items-center bg-custom-background-80 rounded-md p-1">
|
||
|
|
{LAYOUTS_DATA.map((layout) => (
|
||
|
|
<Tooltip tooltipContent={layout.title} position="bottom">
|
||
|
|
<div
|
||
|
|
key={layout.key}
|
||
|
|
className={`relative h-[24px] w-7 flex justify-center items-center overflow-hidden rounded transition-all cursor-pointer
|
||
|
|
${
|
||
|
|
viewDetailStore?.filtersToUpdate?.display_filters?.layout === layout.key
|
||
|
|
? `bg-custom-background-100 shadow-custom-shadow-2xs`
|
||
|
|
: `hover:bg-custom-background-100`
|
||
|
|
}
|
||
|
|
`}
|
||
|
|
onClick={() => viewOperations.setDisplayFilters({ layout: layout.key })}
|
||
|
|
>
|
||
|
|
<layout.icon size={12} />
|
||
|
|
</div>
|
||
|
|
</Tooltip>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
});
|