gantt-task-react-powern 0.6.1 → 0.6.3

package/dist/components/gantt/task-gantt-content.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { VirtualItem } from "@tanstack/react-virtual";
 import { EventOption } from "../../types/public-types";
 import { BarTask } from "../../types/bar-task";
 import { GanttEvent } from "../../types/gantt-task-actions";
@@ -18,6 +19,9 @@ export declare type TaskGanttContentProps = {
     fontSize: string;
     fontFamily: string;
     rtl: boolean;
+    virtualItems?: VirtualItem[];
+    visibleStartY: number;
+    visibleEndY: number;
     setGanttEvent: (value: GanttEvent) => void;
     setFailedTask: (value: BarTask | null) => void;
     setSelectedTask: (taskId: string) => void;

package/dist/components/grid/grid-body.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { VirtualItem } from "@tanstack/react-virtual";
 import { Task } from "../../types/public-types";
 export declare type GridBodyProps = {
     tasks: Task[];
@@ -10,5 +11,8 @@ export declare type GridBodyProps = {
     todayColor: string;
     weekendColor: string;
     rtl: boolean;
+    virtualItems?: VirtualItem[];
+    visibleStartY: number;
+    visibleEndY: number;
 };
 export declare const GridBody: React.FC<GridBodyProps>;

package/dist/components/task-list/task-list-table.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { VirtualItem } from "@tanstack/react-virtual";
 import { Task } from "../../types/public-types";
 export declare const TaskListTableDefault: React.FC<{
     rowHeight: number;
@@ -15,4 +16,5 @@ export declare const TaskListTableDefault: React.FC<{
     selectedTasks?: string[];
     onTaskSelect?: (taskId: string, selected: boolean) => void;
     taskLabelRenderer?: (Task: Task) => React.ReactNode;
+    virtualItems?: VirtualItem[];
 }>;

package/dist/components/task-list/task-list.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { VirtualItem } from "@tanstack/react-virtual";
 import { EventOption } from "../../types/public-types";
 import { BarTask } from "../../types/bar-task";
 import { Task } from "../../types/public-types";
@@ -44,6 +45,7 @@ export declare type TaskListProps = {
         selectedTasks?: string[];
         onTaskSelect?: (taskId: string, selected: boolean) => void;
         taskLabelRenderer?: (Task: Task) => React.ReactNode;
+        virtualItems?: VirtualItem[];
     }>;
 } & EventOption;
 export declare const TaskList: React.FC<TaskListProps>;

package/dist/index.js

@@ -2,6 +2,7 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var React = require('react');
 var React__default = _interopDefault(React);
+var reactVirtual = require('@tanstack/react-virtual');
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -424,7 +425,8 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
       _ref$taskLabelRendere = _ref.taskLabelRenderer,
       taskLabelRenderer = _ref$taskLabelRendere === void 0 ? function (t) {
     return " " + t.name;
-  } : _ref$taskLabelRendere;
+  } : _ref$taskLabelRendere,
+      virtualItems = _ref.virtualItems;
   var toLocaleDateString = React.useMemo(function () {
     return toLocaleDateStringFactory(locale);
   }, [locale]);
@@ -445,13 +447,25 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
     return hasSelectedAncestor(parentWbs, selectedSet, allTasks);
   };
 
+  var itemsToRender = virtualItems || tasks.map(function (_, index) {
+    return {
+      index: index,
+      start: index * rowHeight,
+      size: rowHeight,
+      key: index,
+      end: (index + 1) * rowHeight,
+      lane: 0,
+      measureElement: function measureElement() {}
+    };
+  });
   return React__default.createElement("div", {
     className: styles$1.taskListWrapper,
     style: {
       fontFamily: fontFamily,
       fontSize: fontSize
     }
-  }, tasks.map(function (t) {
+  }, itemsToRender.map(function (vi) {
+    var t = tasks[vi.index];
     var expanderSymbol = "";
 
     if (!(leafTaskIds.has(t.id) || t.type === "milestone")) {
@@ -465,6 +479,17 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
     var isSelected = selectedTasks.includes(t.id);
     var isAncestorSelected = hasSelectedAncestor(t.id, new Set(selectedTasks), tasks);
     return React__default.createElement("div", {
+      key: "" + vi.key,
+      "data-index": vi.index,
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: vi.size + "px",
+        transform: "translateY(" + vi.start + "px)"
+      }
+    }, React__default.createElement("div", {
       className: t.type === "milestone" ? styles$1.taskListMilestoneRow : scheduleType === "lookAhead" ? styles$1.taskListLookAheadRow : styles$1.taskListTableRow,
       style: {
         height: rowHeight
@@ -568,7 +593,7 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
       }
     }, React__default.createElement("div", {
       className: styles$1.taskListText
-    }, "\xA0", toLocaleDateString(t.actualEnd, dateTimeOptions))));
+    }, "\xA0", toLocaleDateString(t.actualEnd, dateTimeOptions)))));
   }));
 };
 
@@ -760,6 +785,16 @@ var TaskList = function TaskList(_ref) {
 
   var prevSelectedTasksRef = React.useRef([]);
   var expandedTasks = React.useRef([]);
+  var virtualizer = reactVirtual.useVirtualizer({
+    count: tasks.length,
+    getScrollElement: function getScrollElement() {
+      return horizontalContainerRef.current;
+    },
+    estimateSize: function estimateSize() {
+      return rowHeight;
+    },
+    overscan: 10
+  });
   React.useEffect(function () {
     if (horizontalContainerRef.current) {
       horizontalContainerRef.current.scrollTop = scrollY;
@@ -911,8 +946,10 @@ var TaskList = function TaskList(_ref) {
     onExpanderClick: onExpanderClick,
     selectedTasks: onMultiSelect ? selectedTasks : undefined,
     onTaskSelect: onMultiSelect ? handleTaskSelect : undefined,
-    taskLabelRenderer: taskLabelRenderer
+    taskLabelRenderer: taskLabelRenderer,
+    virtualItems: virtualizer.getVirtualItems()
   };
+  console.debug(virtualizer.getTotalSize());
   return React__default.createElement("div", {
     ref: taskListRef
   }, React__default.createElement(TaskListHeader, Object.assign({}, headerProps)), React__default.createElement("div", {
@@ -921,7 +958,13 @@ var TaskList = function TaskList(_ref) {
     style: ganttHeight ? {
       height: ganttHeight
     } : {}
-  }, React__default.createElement(TaskListTable, Object.assign({}, tableProps))));
+  }, React__default.createElement("div", {
+    style: {
+      height: virtualizer.getTotalSize() + "px",
+      width: "100%",
+      position: "relative"
+    }
+  }, React__default.createElement(TaskListTable, Object.assign({}, tableProps)))));
 };
 
 var styles$4 = {"gridRow":"_2dZTy","gridRowLookAhead":"_2RRca","gridRowLine":"_3rUKi","gridTick":"_RuwuK","darkerGridRow":"_2M-tt"};
@@ -935,103 +978,128 @@ var GridBody = function GridBody(_ref) {
       columnWidth = _ref.columnWidth,
       todayColor = _ref.todayColor,
       weekendColor = _ref.weekendColor,
-      rtl = _ref.rtl;
-  var y = 0;
-  var gridRows = [];
-  var rowLines = [React__default.createElement("line", {
-    key: "RowLineFirst",
-    x: "0",
-    y1: 0,
-    x2: svgWidth,
-    y2: 0,
-    className: styles$4.gridRowLine
-  })];
-
-  for (var _iterator = _createForOfIteratorHelperLoose(tasks), _step; !(_step = _iterator()).done;) {
-    var task = _step.value;
-    var isDarkerRow = task.type === "milestone";
-    gridRows.push(React__default.createElement("rect", {
-      key: "Row" + task.id,
-      x: "0",
-      y: y,
-      width: svgWidth,
-      height: rowHeight,
-      className: isDarkerRow ? styles$4.darkerGridRow : scheduleType === "lookAhead" ? styles$4.gridRowLookAhead : styles$4.gridRow
-    }));
-    rowLines.push(React__default.createElement("line", {
-      key: "RowLine" + task.id,
-      x: "0",
-      y1: y + rowHeight,
-      x2: svgWidth,
-      y2: y + rowHeight,
-      className: styles$4.gridRowLine
-    }));
-    y += rowHeight;
-  }
-
+      rtl = _ref.rtl,
+      _ref$virtualItems = _ref.virtualItems,
+      virtualItems = _ref$virtualItems === void 0 ? [] : _ref$virtualItems,
+      visibleStartY = _ref.visibleStartY,
+      visibleEndY = _ref.visibleEndY;
+  var visibleHeight = visibleEndY - visibleStartY;
   var now = new Date();
-  var tickX = 0;
-  var ticks = [];
-  var today = React__default.createElement("rect", null);
-  var weekend = [];
+  var items = virtualItems.length > 0 ? virtualItems : tasks.map(function (_, i) {
+    return {
+      index: i,
+      start: i * rowHeight,
+      end: (i + 1) * rowHeight,
+      size: rowHeight,
+      key: i
+    };
+  });
+
+  var isWeekend = function isWeekend(date) {
+    var d = date.getDay();
+    return d === 0 || d === 6;
+  };
 
-  for (var i = 0; i < dates.length; i++) {
+  var isTodayColumn = function isTodayColumn(i) {
     var date = dates[i];
-    ticks.push(React__default.createElement("line", {
-      key: date.getTime(),
-      x1: tickX,
-      y1: 0,
-      x2: tickX,
-      y2: y,
-      className: styles$4.gridTick
-    }));
+    var next = dates[i + 1];
+    if (next && date <= now && next > now) return true;
+
+    if (!next && date <= now) {
+      var step = date.getTime() - dates[i - 1].getTime();
+      var end = addToDate(date, step, "millisecond");
+      return end > now;
+    }
+
+    return false;
+  };
+
+  var todayRects = [];
+  var weekendRects = [];
 
-    if (i + 1 !== dates.length && date.getTime() < now.getTime() && dates[i + 1].getTime() >= now.getTime() || i !== 0 && i + 1 === dates.length && date.getTime() < now.getTime() && addToDate(date, date.getTime() - dates[i - 1].getTime(), "millisecond").getTime() >= now.getTime()) {
-      today = React__default.createElement("rect", {
-        x: tickX,
-        y: 0,
+  for (var i = 0, x = 0; i < dates.length; i++, x += columnWidth) {
+    if (isTodayColumn(i)) {
+      todayRects.push(React__default.createElement("rect", {
+        key: "today-" + i,
+        x: rtl ? x + columnWidth : x,
+        y: visibleStartY,
         width: columnWidth,
-        height: y,
+        height: visibleHeight,
         fill: todayColor
-      });
+      }));
     }
 
-    if (date.getDay() === 6 || date.getDay() === 0) {
-      weekend.push(React__default.createElement("rect", {
-        x: tickX,
-        y: 0,
+    if (isWeekend(dates[i])) {
+      weekendRects.push(React__default.createElement("rect", {
+        key: "weekend-" + i,
+        x: x,
+        y: visibleStartY,
         width: columnWidth,
-        height: y,
+        height: visibleHeight,
         fill: weekendColor
       }));
     }
+  }
 
-    if (rtl && i + 1 !== dates.length && date.getTime() >= now.getTime() && dates[i + 1].getTime() < now.getTime()) {
-      today = React__default.createElement("rect", {
-        x: tickX + columnWidth,
-        y: 0,
-        width: columnWidth,
-        height: y,
-        fill: todayColor
-      });
-    }
+  var tickLines = dates.map(function (_, i) {
+    return React__default.createElement("line", {
+      key: "tick-" + i,
+      x1: i * columnWidth,
+      y1: visibleStartY,
+      x2: i * columnWidth,
+      y2: visibleEndY,
+      className: styles$4.gridTick
+    });
+  });
+  var rowBackgrounds = [];
+  var rowLines = [];
+  rowLines.push(React__default.createElement("line", {
+    key: "top-line",
+    x1: 0,
+    y1: visibleStartY,
+    x2: svgWidth,
+    y2: visibleStartY,
+    className: styles$4.gridRowLine
+  }));
 
-    tickX += columnWidth;
+  for (var _iterator = _createForOfIteratorHelperLoose(items), _step; !(_step = _iterator()).done;) {
+    var vi = _step.value;
+    var task = tasks[vi.index];
+    if (!task) break;
+    var y = vi.start;
+    var isMilestone = task.type === "milestone";
+    var rowClass = isMilestone ? styles$4.darkerGridRow : scheduleType === "lookAhead" ? styles$4.gridRowLookAhead : styles$4.gridRow;
+    rowBackgrounds.push(React__default.createElement("rect", {
+      key: "bg-" + vi.key,
+      x: 0,
+      y: y,
+      width: svgWidth,
+      height: rowHeight,
+      className: rowClass
+    }));
+    rowLines.push(React__default.createElement("line", {
+      key: "line-" + vi.key,
+      x1: 0,
+      y1: y + rowHeight,
+      x2: svgWidth,
+      y2: y + rowHeight,
+      className: styles$4.gridRowLine
+    }));
   }
 
   return React__default.createElement("g", {
     className: "gridBody"
   }, React__default.createElement("g", {
     className: "rows"
-  }, gridRows), React__default.createElement("g", {
+  }, rowBackgrounds), React__default.createElement("g", {
     className: "rowLines"
   }, rowLines), React__default.createElement("g", {
     className: "ticks"
-  }, ticks), scheduleType === "lookAhead" && React__default.createElement("g", {
+  }, tickLines), scheduleType === "lookAhead" && React__default.createElement("g", {
     className: "weekend"
-  }, weekend), React__default.createElement("g", {
+  }, weekendRects), React__default.createElement("g", {
     className: "today"
-  }, today));
+  }, todayRects));
 };
 
 var Grid = function Grid(props) {
@@ -2464,6 +2532,8 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
       fontFamily = _ref.fontFamily,
       fontSize = _ref.fontSize,
       rtl = _ref.rtl,
+      _ref$virtualItems = _ref.virtualItems,
+      virtualItems = _ref$virtualItems === void 0 ? [] : _ref$virtualItems,
       setGanttEvent = _ref.setGanttEvent,
       setFailedTask = _ref.setFailedTask,
       setSelectedTask = _ref.setSelectedTask,
@@ -2471,7 +2541,9 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
       onProgressChange = _ref.onProgressChange,
       onDoubleClick = _ref.onDoubleClick,
       onClick = _ref.onClick,
-      onDelete = _ref.onDelete;
+      onDelete = _ref.onDelete,
+      visibleStartY = _ref.visibleStartY,
+      visibleEndY = _ref.visibleEndY;
   var point = svg === null || svg === void 0 ? void 0 : (_svg$current = svg.current) === null || _svg$current === void 0 ? void 0 : _svg$current.createSVGPoint();
 
   var _useState = React.useState(0),
@@ -2683,12 +2755,7 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
       var task = _task.start.getTime() > 0 && _task.end.getTime() > 0 ? _task : undefined;
 
       if (!task) {
-        return [React__default.createElement("g", {
-          key: _task.id + (isCritical ? "-critical" : "-normal"),
-          style: {
-            height: taskHeight
-          }
-        })];
+        return [];
       }
 
       return task.barChildren.map(function (child) {
@@ -2698,6 +2765,15 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
           var criticalTask = (_task$criticalPathArr = task.criticalPathArrows) === null || _task$criticalPathArr === void 0 ? void 0 : _task$criticalPathArr.find(function (arrow) {
             return arrow.taskId === tasks[child.index].id && (!!arrow.criticalPathType ? arrow.criticalPathType === criticalPathType : !criticalPathType);
           });
+          var taskTo = tasks[child.index];
+          var yFrom = task.y + taskHeight / 2;
+          var yTo = taskTo.y + taskHeight / 2;
+          var minY = Math.min(yFrom, yTo);
+          var maxY = Math.max(yFrom, yTo);
+
+          if (maxY < visibleStartY || minY > visibleEndY) {
+            return null;
+          }
 
           if (!!criticalTask === isCritical) {
             return React__default.createElement(Arrow, {
@@ -2726,34 +2802,44 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
     className: "bar",
     fontFamily: fontFamily,
     fontSize: fontSize
-  }, tasks.map(function (_task) {
-    var task = _task.start.getTime() > 0 && _task.end.getTime() > 0 || _task.actualStart.getTime() > 0 && _task.actualEnd.getTime() > 0 ? _task : undefined;
+  }, virtualItems.map(function (vi) {
+    var _task = tasks[vi.index];
+
+    var task = _extends({}, _task, {
+      y: 0
+    });
 
     if (!task && _task.typeInternal === "milestone") {
-      return React__default.createElement(Milestone, {
-        task: _task,
+      return React__default.createElement("g", {
+        key: _task.id,
+        transform: "translate(0, " + vi.start + ")"
+      }, React__default.createElement(Milestone, {
+        task: task,
         arrowIndent: arrowIndent,
         taskHeight: taskHeight,
         isProgressChangeable: false,
         isDateChangeable: false,
         isDelete: !_task.isDisabled,
         onEventStart: handleBarEventStart,
-        key: _task.id,
         isSelected: !!selectedTask && _task.id === selectedTask.id,
         rtl: rtl
-      });
+      }));
     }
 
     if (!task) {
       return React__default.createElement("g", {
         key: _task.id,
+        transform: "translate(0, " + vi.start + ")",
         style: {
           height: taskHeight
         }
       });
     }
 
-    return React__default.createElement(TaskItem, {
+    return React__default.createElement("g", {
+      key: task.id,
+      transform: "translate(0, " + vi.start + ")"
+    }, React__default.createElement(TaskItem, {
       task: task,
       arrowIndent: arrowIndent,
       taskHeight: taskHeight,
@@ -2761,10 +2847,9 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
       isDateChangeable: !!onDateChange && !task.isDisabled,
       isDelete: !task.isDisabled,
       onEventStart: handleBarEventStart,
-      key: task.id,
       isSelected: !!selectedTask && task.id === selectedTask.id,
       rtl: rtl
-    });
+    }));
   })));
 };
 
@@ -2782,9 +2867,24 @@ var TaskGantt = function TaskGantt(_ref) {
   var verticalGanttContainerRef = React.useRef(null);
 
   var newBarProps = _extends({}, barProps, {
-    svg: ganttSVGRef
+    svg: ganttSVGRef,
+    ganttHeight: ganttHeight,
+    scrollY: scrollY
   });
 
+  var buffer = barProps.rowHeight * 10;
+  var visibleStartY = scrollY - buffer;
+  var visibleEndY = scrollY + ganttHeight + buffer;
+  var virtualizer = reactVirtual.useVirtualizer({
+    count: barProps.tasks.length,
+    getScrollElement: function getScrollElement() {
+      return horizontalContainerRef.current;
+    },
+    estimateSize: function estimateSize() {
+      return barProps.rowHeight;
+    },
+    overscan: 10
+  });
   React.useEffect(function () {
     if (horizontalContainerRef.current) {
       horizontalContainerRef.current.scrollTop = scrollY;
@@ -2816,10 +2916,18 @@ var TaskGantt = function TaskGantt(_ref) {
   }, React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: gridProps.svgWidth,
-    height: barProps.rowHeight * barProps.tasks.length,
+    height: virtualizer.getTotalSize(),
     fontFamily: barProps.fontFamily,
     ref: ganttSVGRef
-  }, React__default.createElement(Grid, Object.assign({}, gridProps)), React__default.createElement(TaskGanttContent, Object.assign({}, newBarProps)))));
+  }, React__default.createElement(Grid, Object.assign({}, gridProps, {
+    virtualItems: virtualizer.getVirtualItems(),
+    visibleStartY: visibleStartY,
+    visibleEndY: visibleEndY
+  })), React__default.createElement(TaskGanttContent, Object.assign({}, newBarProps, {
+    visibleStartY: visibleStartY,
+    visibleEndY: visibleEndY,
+    virtualItems: virtualizer.getVirtualItems()
+  })))));
 };
 
 var styles$a = {"scrollWrapper":"_2k9Ys","scroll":"_19jgW"};
@@ -3020,6 +3128,9 @@ var Gantt = function Gantt(_ref) {
       lastTouchY = _useState14[0],
       setLastTouchY = _useState14[1];
 
+  var buffer = rowHeight * 10;
+  var visibleStartY = scrollY - buffer;
+  var visibleEndY = scrollY + ganttHeight + buffer;
   React.useEffect(function () {
     if (scheduleType === "lookAhead" && startDate && endDate) {
       setDateSetup({
@@ -3076,7 +3187,7 @@ var Gantt = function Gantt(_ref) {
     }
 
     setBarTasks(convertToBarTasks(filteredTasks, newDates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor));
-  }, [tasks, viewMode, preStepsCount, rowHeight, barCornerRadius, columnWidth, taskHeight, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor, rtl, scrollX, onExpanderClick]);
+  }, [tasks, viewMode, preStepsCount, rowHeight, barCornerRadius, columnWidth, taskHeight, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor, rtl, onExpanderClick]);
   React.useEffect(function () {
     if (viewMode === dateSetup.viewMode && (viewDate && !currentViewDate || viewDate && (currentViewDate === null || currentViewDate === void 0 ? void 0 : currentViewDate.valueOf()) !== viewDate.valueOf())) {
       var dates = dateSetup.dates;
@@ -3351,7 +3462,9 @@ var Gantt = function Gantt(_ref) {
     dates: dateSetup.dates,
     todayColor: todayColor,
     weekendColor: weekendColor,
-    rtl: rtl
+    rtl: rtl,
+    visibleStartY: visibleStartY,
+    visibleEndY: visibleEndY
   };
   var calendarProps = {
     dateSetup: dateSetup,
@@ -3385,7 +3498,9 @@ var Gantt = function Gantt(_ref) {
     onProgressChange: onProgressChange,
     onDoubleClick: onDoubleClick,
     onClick: onClick,
-    onDelete: onDelete
+    onDelete: onDelete,
+    visibleStartY: visibleStartY,
+    visibleEndY: visibleEndY
   };
   var tableProps = {
     rowHeight: rowHeight,