forked from github/plane
76 lines
2.8 KiB
TypeScript
76 lines
2.8 KiB
TypeScript
import { FC } from "react";
|
|
import { observer } from "mobx-react";
|
|
// hooks
|
|
import { HEADER_HEIGHT, SIDEBAR_WIDTH } from "components/gantt-chart/constants";
|
|
import { useGanttChart } from "components/gantt-chart/hooks/use-gantt-chart";
|
|
// helpers
|
|
import { cn } from "helpers/common.helper";
|
|
// types
|
|
import { IMonthBlock } from "../../views";
|
|
// constants
|
|
|
|
export const MonthChartView: FC<any> = observer(() => {
|
|
// chart hook
|
|
const { currentViewData, renderView } = useGanttChart();
|
|
const monthBlocks: IMonthBlock[] = renderView;
|
|
|
|
return (
|
|
<div className="absolute top-0 left-0 min-h-full h-max w-max flex divide-x divide-custom-border-100/50">
|
|
{monthBlocks?.map((block, rootIndex) => (
|
|
<div key={`month-${block?.month}-${block?.year}`} className="relative flex flex-col">
|
|
<div
|
|
className="w-full sticky top-0 z-[5] bg-custom-background-100 flex-shrink-0"
|
|
style={{
|
|
height: `${HEADER_HEIGHT}px`,
|
|
}}
|
|
>
|
|
<div className="h-1/2">
|
|
<div
|
|
className="sticky inline-flex whitespace-nowrap px-3 py-2 text-xs font-medium capitalize"
|
|
style={{
|
|
left: `${SIDEBAR_WIDTH}px`,
|
|
}}
|
|
>
|
|
{block?.title}
|
|
</div>
|
|
</div>
|
|
<div className="h-1/2 w-full flex">
|
|
{block?.children?.map((monthDay, index) => (
|
|
<div
|
|
key={`sub-title-${rootIndex}-${index}`}
|
|
className="flex-shrink-0 border-b-[0.5px] border-custom-border-200 py-1 text-center capitalize"
|
|
style={{ width: `${currentViewData?.data.width}px` }}
|
|
>
|
|
<div className="space-x-1 text-xs">
|
|
<span className="text-custom-text-200">{monthDay.dayData.shortTitle[0]}</span>{" "}
|
|
<span
|
|
className={cn({
|
|
"rounded-full bg-custom-primary-100 px-1 text-white": monthDay.today,
|
|
})}
|
|
>
|
|
{monthDay.day}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="h-full w-full flex-grow flex divide-x divide-custom-border-100/50">
|
|
{block?.children?.map((monthDay, index) => (
|
|
<div
|
|
key={`column-${rootIndex}-${index}`}
|
|
className="h-full overflow-hidden"
|
|
style={{ width: `${currentViewData?.data.width}px` }}
|
|
>
|
|
{["sat", "sun"].includes(monthDay?.dayData?.shortTitle) && (
|
|
<div className="h-full bg-custom-background-90" />
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
});
|