[WEB-4531]chore: refactor for timeline chart (#7440)

apps/web/ce/components/gantt-chart/blocks/block-row-list.tsx

@@ -0,0 +1,59 @@
+import { FC } from "react";
+// components
+import type { IBlockUpdateData, IGanttBlock } from "@plane/types";
+import RenderIfVisible from "@/components/core/render-if-visible-HOC";
+// hooks
+import { BlockRow } from "@/components/gantt-chart/blocks/block-row";
+import { BLOCK_HEIGHT } from "@/components/gantt-chart/constants";
+import { TSelectionHelper } from "@/hooks/use-multiple-select";
+// types
+
+export type GanttChartBlocksProps = {
+  blockIds: string[];
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  handleScrollToBlock: (block: IGanttBlock) => void;
+  enableAddBlock: boolean | ((blockId: string) => boolean);
+  showAllBlocks: boolean;
+  selectionHelpers: TSelectionHelper;
+  ganttContainerRef: React.RefObject<HTMLDivElement>;
+};
+
+export const GanttChartRowList: FC<GanttChartBlocksProps> = (props) => {
+  const {
+    blockIds,
+    blockUpdateHandler,
+    handleScrollToBlock,
+    enableAddBlock,
+    showAllBlocks,
+    selectionHelpers,
+    ganttContainerRef,
+  } = props;
+
+  return (
+    <div className="absolute top-0 left-0 min-w-full w-max">
+      {blockIds?.map((blockId) => (
+        <>
+          <RenderIfVisible
+            root={ganttContainerRef}
+            horizontalOffset={100}
+            verticalOffset={200}
+            classNames="relative min-w-full w-max"
+            placeholderChildren={<div className="w-full pointer-events-none" style={{ height: `${BLOCK_HEIGHT}px` }} />}
+            shouldRecordHeights={false}
+          >
+            <BlockRow
+              key={blockId}
+              blockId={blockId}
+              showAllBlocks={showAllBlocks}
+              blockUpdateHandler={blockUpdateHandler}
+              handleScrollToBlock={handleScrollToBlock}
+              enableAddBlock={typeof enableAddBlock === "function" ? enableAddBlock(blockId) : enableAddBlock}
+              selectionHelpers={selectionHelpers}
+              ganttContainerRef={ganttContainerRef}
+            />
+          </RenderIfVisible>
+        </>
+      ))}
+    </div>
+  );
+};

apps/web/ce/components/gantt-chart/blocks/blocks-list.tsx

@@ -0,0 +1,53 @@
+import { FC } from "react";
+//
+import type { IBlockUpdateDependencyData } from "@plane/types";
+import { GanttChartBlock } from "@/components/gantt-chart/blocks/block";
+
+export type GanttChartBlocksProps = {
+  blockIds: string[];
+  blockToRender: (data: any) => React.ReactNode;
+  enableBlockLeftResize: boolean | ((blockId: string) => boolean);
+  enableBlockRightResize: boolean | ((blockId: string) => boolean);
+  enableBlockMove: boolean | ((blockId: string) => boolean);
+  ganttContainerRef: React.RefObject<HTMLDivElement>;
+  showAllBlocks: boolean;
+  updateBlockDates?: (updates: IBlockUpdateDependencyData[]) => Promise<void>;
+  enableDependency: boolean | ((blockId: string) => boolean);
+};
+
+export const GanttChartBlocksList: FC<GanttChartBlocksProps> = (props) => {
+  const {
+    blockIds,
+    blockToRender,
+    enableBlockLeftResize,
+    enableBlockRightResize,
+    enableBlockMove,
+    ganttContainerRef,
+    showAllBlocks,
+    updateBlockDates,
+    enableDependency,
+  } = props;
+
+  return (
+    <>
+      {blockIds?.map((blockId) => (
+        <GanttChartBlock
+          key={blockId}
+          blockId={blockId}
+          showAllBlocks={showAllBlocks}
+          blockToRender={blockToRender}
+          enableBlockLeftResize={
+            typeof enableBlockLeftResize === "function" ? enableBlockLeftResize(blockId) : enableBlockLeftResize
+          }
+          enableBlockRightResize={
+            typeof enableBlockRightResize === "function" ? enableBlockRightResize(blockId) : enableBlockRightResize
+          }
+          enableBlockMove={typeof enableBlockMove === "function" ? enableBlockMove(blockId) : enableBlockMove}
+          enableDependency={typeof enableDependency === "function" ? enableDependency(blockId) : enableDependency}
+          ganttContainerRef={ganttContainerRef}
+          updateBlockDates={updateBlockDates}
+        />
+      ))}
+    </>
+  );
+};