forked from github/plane
963d26ccda
* chore: gantt sidebar and main content scroll sync * chore: add arrow navigation position logic * refactor: scroll position update logic * refactor: gantt chart components * refactor: gantt sidebar * fix: vertical scroll issue * fix: move to the hidden block button flickering * refactor: gantt sidebar components * chore: move timeline header outside * fix gantt scroll issue * fix: sticky position issues * fix: infinite timeline scroll logic * chore: removed unnecessary import statements --------- Co-authored-by: rahulramesha <rahulramesham@gmail.com>
42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
// components
|
|
import { IBlockUpdateData, IGanttBlock } from "components/gantt-chart";
|
|
// constants
|
|
import { HEADER_HEIGHT, SIDEBAR_WIDTH } from "../constants";
|
|
|
|
type Props = {
|
|
blocks: IGanttBlock[] | null;
|
|
blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
|
|
enableReorder: boolean;
|
|
sidebarToRender: (props: any) => React.ReactNode;
|
|
title: string;
|
|
};
|
|
|
|
export const GanttChartSidebar: React.FC<Props> = (props) => {
|
|
const { blocks, blockUpdateHandler, enableReorder, sidebarToRender, title } = props;
|
|
|
|
return (
|
|
<div
|
|
// DO NOT REMOVE THE ID
|
|
id="gantt-sidebar"
|
|
className="sticky left-0 z-10 min-h-full h-max flex-shrink-0 border-r-[0.5px] border-custom-border-200"
|
|
style={{
|
|
width: `${SIDEBAR_WIDTH}px`,
|
|
}}
|
|
>
|
|
<div
|
|
className="box-border flex-shrink-0 flex items-end justify-between gap-2 border-b-[0.5px] border-custom-border-200 pb-2 pl-8 pr-4 text-sm font-medium text-custom-text-300 sticky top-0 z-10 bg-custom-background-100"
|
|
style={{
|
|
height: `${HEADER_HEIGHT}px`,
|
|
}}
|
|
>
|
|
<h6>{title}</h6>
|
|
<h6>Duration</h6>
|
|
</div>
|
|
|
|
<div className="min-h-full h-max bg-custom-background-100">
|
|
{sidebarToRender && sidebarToRender({ title, blockUpdateHandler, blocks, enableReorder })}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|