From b86c3b5cd6f629f9b5d19b67815cfed17060b579 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Tue, 6 Feb 2024 11:37:41 +0530 Subject: [PATCH] chore: implement scroll sync --- .../gantt-chart/blocks/blocks-list.tsx | 60 +++++---- web/components/gantt-chart/chart/header.tsx | 120 +++++++++++++----- .../gantt-chart/chart/main-content.tsx | 31 +++-- web/components/gantt-chart/chart/root.tsx | 67 +++++----- .../gantt-chart/chart/views/month.tsx | 76 ++++------- .../gantt-chart/helpers/draggable.tsx | 22 ++-- web/package.json | 2 + yarn.lock | 16 ++- 8 files changed, 218 insertions(+), 176 deletions(-) diff --git a/web/components/gantt-chart/blocks/blocks-list.tsx b/web/components/gantt-chart/blocks/blocks-list.tsx index 8dc344cd0..ae68bbc79 100644 --- a/web/components/gantt-chart/blocks/blocks-list.tsx +++ b/web/components/gantt-chart/blocks/blocks-list.tsx @@ -35,7 +35,7 @@ export const GanttChartBlocksList: FC = observer((props) // store hooks const { peekIssue } = useIssueDetail(); // chart hook - const { activeBlock, dispatch, updateScrollTop } = useChart(); + const { activeBlock, dispatch } = useChart(); // update the active block on hover const updateActiveBlock = (block: IGanttBlock | null) => { @@ -77,22 +77,12 @@ export const GanttChartBlocksList: FC = observer((props) }); }; - const handleBlocksScroll = (e: React.UIEvent) => { - updateScrollTop(e.currentTarget.scrollTop); - - const sidebarScrollContainer = document.getElementById("gantt-sidebar-scroll-container") as HTMLDivElement; - if (!sidebarScrollContainer) return; - - sidebarScrollContainer.scrollTop = e.currentTarget.scrollTop; - }; - return (
- {blocks?.map((block) => { + {blocks?.map((block, index) => { // hide the block if it doesn't have start and target dates and showAllBlocks is false if (!showAllBlocks && !(block.start_date && block.target_date)) return; @@ -101,26 +91,34 @@ export const GanttChartBlocksList: FC = observer((props) return (
updateActiveBlock(block)} onMouseLeave={() => updateActiveBlock(null)} > - {isBlockVisibleOnChart ? ( - handleChartBlockPosition(block, ...args)} - enableBlockLeftResize={enableBlockLeftResize} - enableBlockRightResize={enableBlockRightResize} - enableBlockMove={enableBlockMove} - /> - ) : ( - - )} +
+ {isBlockVisibleOnChart ? ( + handleChartBlockPosition(block, ...args)} + enableBlockLeftResize={enableBlockLeftResize} + enableBlockRightResize={enableBlockRightResize} + enableBlockMove={enableBlockMove} + /> + ) : ( + + )} +
); })} diff --git a/web/components/gantt-chart/chart/header.tsx b/web/components/gantt-chart/chart/header.tsx index a98c5d883..6e3fbd741 100644 --- a/web/components/gantt-chart/chart/header.tsx +++ b/web/components/gantt-chart/chart/header.tsx @@ -3,6 +3,8 @@ import { Expand, Shrink } from "lucide-react"; import { useChart } from "../hooks"; // types import { IGanttBlock, TGanttViews } from "../types"; +import { IMonthBlock } from "../views"; +import { ScrollSyncPane } from "react-scroll-sync"; type Props = { blocks: IGanttBlock[] | null; @@ -17,48 +19,102 @@ type Props = { export const GanttChartHeader: React.FC = (props) => { const { blocks, fullScreenMode, handleChartView, handleToday, loaderTitle, title, toggleFullScreenMode } = props; // chart hook - const { currentView, allViews } = useChart(); + const { currentView, currentViewData, allViews, renderView } = useChart(); + + const monthBlocks: IMonthBlock[] = renderView; return ( -
-
{title}
+ <> +
+
{title}
-
-
{blocks ? `${blocks.length} ${loaderTitle}` : "Loading..."}
-
+
+
{blocks ? `${blocks.length} ${loaderTitle}` : "Loading..."}
+
-
- {allViews && - allViews.map((_chatView: any) => ( -
handleChartView(_chatView?.key)} - > - {_chatView?.title} -
- ))} -
+
+ {allViews && + allViews.map((_chatView: any) => ( +
handleChartView(_chatView?.key)} + > + {_chatView?.title} +
+ ))} +
+ +
+ +
-
+
+ +
+ {monthBlocks?.map((block, rootIndex) => ( +
+
+
+
+ {block?.title} +
+
- -
+
+ {block?.children?.map((monthDay, _idx) => ( +
+
+ {monthDay.dayData.shortTitle[0]}{" "} + + {monthDay.day} + +
+
+ ))} +
+
+ + {/*
+ {block?.children?.map((monthDay, index) => ( +
+
+
+ ))} +
*/} +
+ ))} +
+ +
+ ); }; diff --git a/web/components/gantt-chart/chart/main-content.tsx b/web/components/gantt-chart/chart/main-content.tsx index 084e13da6..12f147520 100644 --- a/web/components/gantt-chart/chart/main-content.tsx +++ b/web/components/gantt-chart/chart/main-content.tsx @@ -3,7 +3,6 @@ import { BiWeekChartView, DayChartView, GanttChartBlocksList, - GanttChartSidebar, HourChartView, IBlockUpdateData, IGanttBlock, @@ -16,6 +15,7 @@ import { } from "components/gantt-chart"; // helpers import { cn } from "helpers/common.helper"; +import { ScrollSyncPane } from "react-scroll-sync"; type Props = { blocks: IGanttBlock[] | null; @@ -86,25 +86,23 @@ export const GanttChartMainContent: React.FC = (props) => {
- -
- +
+ +
+ +
+ {currentViewData && ( + // = (props) => { enableBlockMove={enableBlockMove} showAllBlocks={showAllBlocks} /> + // )}
diff --git a/web/components/gantt-chart/chart/root.tsx b/web/components/gantt-chart/chart/root.tsx index 82cca4911..3d77fa194 100644 --- a/web/components/gantt-chart/chart/root.tsx +++ b/web/components/gantt-chart/chart/root.tsx @@ -21,6 +21,7 @@ import { cn } from "helpers/common.helper"; import { ChartDataType, IBlockUpdateData, IGanttBlock, TGanttViews } from "../types"; // data import { currentViewDataWithView } from "../data"; +import { ScrollSync } from "react-scroll-sync"; type ChartViewRootProps = { border: boolean; @@ -180,37 +181,39 @@ export const ChartViewRoot: FC = (props) => { }; return ( -
- setFullScreenMode((prevData) => !prevData)} - handleChartView={(key) => updateCurrentViewRenderPayload(null, key)} - handleToday={handleToday} - loaderTitle={loaderTitle} - title={title} - /> - -
+ +
+ setFullScreenMode((prevData) => !prevData)} + handleChartView={(key) => updateCurrentViewRenderPayload(null, key)} + handleToday={handleToday} + loaderTitle={loaderTitle} + title={title} + /> + +
+ ); }; diff --git a/web/components/gantt-chart/chart/views/month.tsx b/web/components/gantt-chart/chart/views/month.tsx index afdb8b326..b467523a5 100644 --- a/web/components/gantt-chart/chart/views/month.tsx +++ b/web/components/gantt-chart/chart/views/month.tsx @@ -1,4 +1,3 @@ -import { FC } from "react"; // hooks import { useChart } from "components/gantt-chart"; // helpers @@ -6,65 +5,36 @@ import { cn } from "helpers/common.helper"; // types import { IMonthBlock } from "../../views"; -export const MonthChartView: FC = () => { +export const MonthChartView = () => { // chart hook const { currentViewData, renderView } = useChart(); const monthBlocks: IMonthBlock[] = renderView; return ( - <> -
- {monthBlocks?.map((block, rootIndex) => ( -
-
-
-
- {block?.title} -
-
- -
- {block?.children?.map((monthDay, _idx) => ( -
-
- {monthDay.dayData.shortTitle[0]}{" "} - - {monthDay.day} - -
-
- ))} -
-
- -
- {block?.children?.map((monthDay, index) => ( +
+ {monthBlocks?.map((block, rootIndex) => ( +
+
+ {block?.children?.map((monthDay, index) => ( +
-
- {/* highlight today */} - {/* {monthDay?.today && ( -
- )} */} -
-
- ))} -
+ className={cn("relative flex h-full w-full flex-1 justify-center", { + "bg-custom-background-90": ["sat", "sun"].includes(monthDay?.dayData?.shortTitle), + })} + /> + + {block.monthData.shortTitle} {monthDay?.dayData?.shortTitle[0]} {monthDay?.day} + +
+ ))}
- ))} -
- +
+ ))} +
); }; diff --git a/web/components/gantt-chart/helpers/draggable.tsx b/web/components/gantt-chart/helpers/draggable.tsx index 79d672572..df1434ef2 100644 --- a/web/components/gantt-chart/helpers/draggable.tsx +++ b/web/components/gantt-chart/helpers/draggable.tsx @@ -240,17 +240,17 @@ export const ChartDraggable: React.FC = (props) => {
)} {/* move to right side hidden block button */} - {/* {isBlockHiddenOnRight && ( */} -
- -
- {/* )} */} + {isBlockHiddenOnRight && ( +
+ +
+ )}