gantt-task-react-powern 0.6.1 → 0.6.2

package/dist/index.modern.js

@@ -1,4 +1,5 @@
 import React, { useMemo, useRef, useState, useEffect } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -423,7 +424,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 = useMemo(function () {
     return toLocaleDateStringFactory(locale);
   }, [locale]);
@@ -444,13 +446,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.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")) {
@@ -464,6 +478,17 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
     var isSelected = selectedTasks.includes(t.id);
     var isAncestorSelected = hasSelectedAncestor(t.id, new Set(selectedTasks), tasks);
     return React.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.createElement("div", {
       className: t.type === "milestone" ? styles$1.taskListMilestoneRow : scheduleType === "lookAhead" ? styles$1.taskListLookAheadRow : styles$1.taskListTableRow,
       style: {
         height: rowHeight
@@ -567,7 +592,7 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
       }
     }, React.createElement("div", {
       className: styles$1.taskListText
-    }, "\xA0", toLocaleDateString(t.actualEnd, dateTimeOptions))));
+    }, "\xA0", toLocaleDateString(t.actualEnd, dateTimeOptions)))));
   }));
 };
 
@@ -759,6 +784,16 @@ var TaskList = function TaskList(_ref) {
 
   var prevSelectedTasksRef = useRef([]);
   var expandedTasks = useRef([]);
+  var virtualizer = useVirtualizer({
+    count: tasks.length,
+    getScrollElement: function getScrollElement() {
+      return horizontalContainerRef.current;
+    },
+    estimateSize: function estimateSize() {
+      return rowHeight;
+    },
+    overscan: 5
+  });
   useEffect(function () {
     if (horizontalContainerRef.current) {
       horizontalContainerRef.current.scrollTop = scrollY;
@@ -910,8 +945,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.createElement("div", {
     ref: taskListRef
   }, React.createElement(TaskListHeader, Object.assign({}, headerProps)), React.createElement("div", {
@@ -920,7 +957,13 @@ var TaskList = function TaskList(_ref) {
     style: ganttHeight ? {
       height: ganttHeight
     } : {}
-  }, React.createElement(TaskListTable, Object.assign({}, tableProps))));
+  }, React.createElement("div", {
+    style: {
+      height: virtualizer.getTotalSize() + "px",
+      width: "100%",
+      position: "relative"
+    }
+  }, React.createElement(TaskListTable, Object.assign({}, tableProps)))));
 };
 
 var styles$4 = {"gridRow":"_2dZTy","gridRowLookAhead":"_2RRca","gridRowLine":"_3rUKi","gridTick":"_RuwuK","darkerGridRow":"_2M-tt"};
@@ -934,103 +977,123 @@ 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.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.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.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 items = virtualItems.length > 0 ? virtualItems : tasks.map(function (_, i) {
+    return {
+      index: i,
+      start: i * rowHeight,
+      end: (i + 1) * rowHeight,
+      size: rowHeight,
+      key: i
+    };
+  });
   var now = new Date();
-  var tickX = 0;
-  var ticks = [];
-  var today = React.createElement("rect", null);
-  var weekend = [];
+  var x = 0;
+  var todayRects = [];
+  var weekendRects = [];
 
   for (var i = 0; i < dates.length; i++) {
     var date = dates[i];
-    ticks.push(React.createElement("line", {
-      key: date.getTime(),
-      x1: tickX,
-      y1: 0,
-      x2: tickX,
-      y2: y,
-      className: styles$4.gridTick
-    }));
+    var isTodayColumn = i + 1 < dates.length && date.getTime() < now.getTime() && dates[i + 1].getTime() >= now.getTime() || i + 1 === dates.length && date.getTime() <= now.getTime() && addToDate(date, date.getTime() - dates[i - 1].getTime(), "millisecond").getTime() > now.getTime();
 
-    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.createElement("rect", {
-        x: tickX,
-        y: 0,
+    if (isTodayColumn) {
+      todayRects.push(React.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.createElement("rect", {
-        x: tickX,
-        y: 0,
+    if (rtl && i + 1 < dates.length && date.getTime() >= now.getTime() && dates[i + 1].getTime() < now.getTime()) {
+      todayRects.push(React.createElement("rect", {
+        key: "today-rtl-" + i,
+        x: x,
+        y: visibleStartY,
         width: columnWidth,
-        height: y,
-        fill: weekendColor
+        height: visibleHeight,
+        fill: todayColor
       }));
     }
 
-    if (rtl && i + 1 !== dates.length && date.getTime() >= now.getTime() && dates[i + 1].getTime() < now.getTime()) {
-      today = React.createElement("rect", {
-        x: tickX + columnWidth,
-        y: 0,
+    if (date.getDay() === 0 || date.getDay() === 6) {
+      weekendRects.push(React.createElement("rect", {
+        key: "weekend-" + i,
+        x: x,
+        y: visibleStartY,
         width: columnWidth,
-        height: y,
-        fill: todayColor
-      });
+        height: visibleHeight,
+        fill: weekendColor
+      }));
     }
 
-    tickX += columnWidth;
+    x += columnWidth;
   }
 
+  x = 0;
+  var tickLines = dates.map(function (_, i) {
+    var line = React.createElement("line", {
+      key: "tick-" + i,
+      x1: x,
+      y1: visibleStartY,
+      x2: x,
+      y2: visibleEndY,
+      className: styles$4.gridTick
+    });
+    x += columnWidth;
+    return line;
+  });
+  var rowBackgrounds = [];
+  var rowLines = [];
+  rowLines.push(React.createElement("line", {
+    key: "top",
+    x1: 0,
+    y1: visibleStartY,
+    x2: svgWidth,
+    y2: visibleStartY,
+    className: styles$4.gridRowLine
+  }));
+  items.forEach(function (vi) {
+    var task = tasks[vi.index];
+    var y = vi.start;
+    var isMilestone = task.type === "milestone";
+    rowBackgrounds.push(React.createElement("rect", {
+      key: "bg-" + vi.key,
+      x: 0,
+      y: y,
+      width: svgWidth,
+      height: rowHeight,
+      className: isMilestone ? styles$4.darkerGridRow : scheduleType === "lookAhead" ? styles$4.gridRowLookAhead : styles$4.gridRow
+    }));
+    rowLines.push(React.createElement("line", {
+      key: "line-" + vi.key,
+      x1: 0,
+      y1: y + rowHeight,
+      x2: svgWidth,
+      y2: y + rowHeight,
+      className: styles$4.gridRowLine
+    }));
+  });
   return React.createElement("g", {
     className: "gridBody"
   }, React.createElement("g", {
     className: "rows"
-  }, gridRows), React.createElement("g", {
+  }, rowBackgrounds), React.createElement("g", {
     className: "rowLines"
   }, rowLines), React.createElement("g", {
     className: "ticks"
-  }, ticks), scheduleType === "lookAhead" && React.createElement("g", {
+  }, tickLines), scheduleType === "lookAhead" && React.createElement("g", {
     className: "weekend"
-  }, weekend), React.createElement("g", {
+  }, weekendRects), React.createElement("g", {
     className: "today"
-  }, today));
+  }, todayRects));
 };
 
 var Grid = function Grid(props) {
@@ -2463,6 +2526,10 @@ 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,
+      ganttHeight = _ref.ganttHeight,
+      scrollY = _ref.scrollY,
       setGanttEvent = _ref.setGanttEvent,
       setFailedTask = _ref.setFailedTask,
       setSelectedTask = _ref.setSelectedTask,
@@ -2678,16 +2745,13 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
   };
 
   var getArrows = function getArrows(isCritical, criticalPathType) {
+    var visibleMinY = scrollY - rowHeight * 5;
+    var visibleMaxY = scrollY + ganttHeight + rowHeight * 5;
     return tasks.flatMap(function (_task) {
       var task = _task.start.getTime() > 0 && _task.end.getTime() > 0 ? _task : undefined;
 
       if (!task) {
-        return [React.createElement("g", {
-          key: _task.id + (isCritical ? "-critical" : "-normal"),
-          style: {
-            height: taskHeight
-          }
-        })];
+        return [];
       }
 
       return task.barChildren.map(function (child) {
@@ -2697,6 +2761,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 < visibleMinY || minY > visibleMaxY) {
+            return null;
+          }
 
           if (!!criticalTask === isCritical) {
             return React.createElement(Arrow, {
@@ -2725,34 +2798,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.createElement(Milestone, {
-        task: _task,
+      return React.createElement("g", {
+        key: _task.id,
+        transform: "translate(0, " + vi.start + ")"
+      }, React.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.createElement("g", {
         key: _task.id,
+        transform: "translate(0, " + vi.start + ")",
         style: {
           height: taskHeight
         }
       });
     }
 
-    return React.createElement(TaskItem, {
+    return React.createElement("g", {
+      key: task.id,
+      transform: "translate(0, " + vi.start + ")"
+    }, React.createElement(TaskItem, {
       task: task,
       arrowIndent: arrowIndent,
       taskHeight: taskHeight,
@@ -2760,10 +2843,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
-    });
+    }));
   })));
 };
 
@@ -2781,9 +2863,24 @@ var TaskGantt = function TaskGantt(_ref) {
   var verticalGanttContainerRef = 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 = useVirtualizer({
+    count: barProps.tasks.length,
+    getScrollElement: function getScrollElement() {
+      return horizontalContainerRef.current;
+    },
+    estimateSize: function estimateSize() {
+      return barProps.rowHeight;
+    },
+    overscan: 20
+  });
   useEffect(function () {
     if (horizontalContainerRef.current) {
       horizontalContainerRef.current.scrollTop = scrollY;
@@ -2815,10 +2912,16 @@ var TaskGantt = function TaskGantt(_ref) {
   }, React.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.createElement(Grid, Object.assign({}, gridProps)), React.createElement(TaskGanttContent, Object.assign({}, newBarProps)))));
+  }, React.createElement(Grid, Object.assign({}, gridProps, {
+    virtualItems: virtualizer.getVirtualItems(),
+    visibleStartY: visibleStartY,
+    visibleEndY: visibleEndY
+  })), React.createElement(TaskGanttContent, Object.assign({}, newBarProps, {
+    virtualItems: virtualizer.getVirtualItems()
+  })))));
 };
 
 var styles$a = {"scrollWrapper":"_2k9Ys","scroll":"_19jgW"};
@@ -3019,6 +3122,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;
   useEffect(function () {
     if (scheduleType === "lookAhead" && startDate && endDate) {
       setDateSetup({
@@ -3075,7 +3181,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]);
   useEffect(function () {
     if (viewMode === dateSetup.viewMode && (viewDate && !currentViewDate || viewDate && (currentViewDate === null || currentViewDate === void 0 ? void 0 : currentViewDate.valueOf()) !== viewDate.valueOf())) {
       var dates = dateSetup.dates;
@@ -3350,7 +3456,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,
@@ -3384,7 +3492,9 @@ var Gantt = function Gantt(_ref) {
     onProgressChange: onProgressChange,
     onDoubleClick: onDoubleClick,
     onClick: onClick,
-    onDelete: onDelete
+    onDelete: onDelete,
+    ganttHeight: ganttHeight,
+    scrollY: scrollY
   };
   var tableProps = {
     rowHeight: rowHeight,