gantt-task-react-powern 0.6.2 → 0.6.3

package/dist/index.modern.js

@@ -792,7 +792,7 @@ var TaskList = function TaskList(_ref) {
     estimateSize: function estimateSize() {
       return rowHeight;
     },
-    overscan: 5
+    overscan: 10
   });
   useEffect(function () {
     if (horizontalContainerRef.current) {
@@ -983,6 +983,7 @@ var GridBody = function GridBody(_ref) {
       visibleStartY = _ref.visibleStartY,
       visibleEndY = _ref.visibleEndY;
   var visibleHeight = visibleEndY - visibleStartY;
+  var now = new Date();
   var items = virtualItems.length > 0 ? virtualItems : tasks.map(function (_, i) {
     return {
       index: i,
@@ -992,30 +993,34 @@ var GridBody = function GridBody(_ref) {
       key: i
     };
   });
-  var now = new Date();
-  var x = 0;
-  var todayRects = [];
-  var weekendRects = [];
 
-  for (var i = 0; i < dates.length; i++) {
+  var isWeekend = function isWeekend(date) {
+    var d = date.getDay();
+    return d === 0 || d === 6;
+  };
+
+  var isTodayColumn = function isTodayColumn(i) {
     var date = dates[i];
-    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();
+    var next = dates[i + 1];
+    if (next && date <= now && next > now) return true;
 
-    if (isTodayColumn) {
-      todayRects.push(React.createElement("rect", {
-        key: "today-" + i,
-        x: rtl ? x + columnWidth : x,
-        y: visibleStartY,
-        width: columnWidth,
-        height: visibleHeight,
-        fill: todayColor
-      }));
+    if (!next && date <= now) {
+      var step = date.getTime() - dates[i - 1].getTime();
+      var end = addToDate(date, step, "millisecond");
+      return end > now;
     }
 
-    if (rtl && i + 1 < dates.length && date.getTime() >= now.getTime() && dates[i + 1].getTime() < now.getTime()) {
+    return false;
+  };
+
+  var todayRects = [];
+  var weekendRects = [];
+
+  for (var i = 0, x = 0; i < dates.length; i++, x += columnWidth) {
+    if (isTodayColumn(i)) {
       todayRects.push(React.createElement("rect", {
-        key: "today-rtl-" + i,
-        x: x,
+        key: "today-" + i,
+        x: rtl ? x + columnWidth : x,
         y: visibleStartY,
         width: columnWidth,
         height: visibleHeight,
@@ -1023,7 +1028,7 @@ var GridBody = function GridBody(_ref) {
       }));
     }
 
-    if (date.getDay() === 0 || date.getDay() === 6) {
+    if (isWeekend(dates[i])) {
       weekendRects.push(React.createElement("rect", {
         key: "weekend-" + i,
         x: x,
@@ -1033,44 +1038,43 @@ var GridBody = function GridBody(_ref) {
         fill: weekendColor
       }));
     }
-
-    x += columnWidth;
   }
 
-  x = 0;
   var tickLines = dates.map(function (_, i) {
-    var line = React.createElement("line", {
+    return React.createElement("line", {
       key: "tick-" + i,
-      x1: x,
+      x1: i * columnWidth,
       y1: visibleStartY,
-      x2: x,
+      x2: i * columnWidth,
       y2: visibleEndY,
       className: styles$4.gridTick
     });
-    x += columnWidth;
-    return line;
   });
   var rowBackgrounds = [];
   var rowLines = [];
   rowLines.push(React.createElement("line", {
-    key: "top",
+    key: "top-line",
     x1: 0,
     y1: visibleStartY,
     x2: svgWidth,
     y2: visibleStartY,
     className: styles$4.gridRowLine
   }));
-  items.forEach(function (vi) {
+
+  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.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
+      className: rowClass
     }));
     rowLines.push(React.createElement("line", {
       key: "line-" + vi.key,
@@ -1080,7 +1084,8 @@ var GridBody = function GridBody(_ref) {
       y2: y + rowHeight,
       className: styles$4.gridRowLine
     }));
-  });
+  }
+
   return React.createElement("g", {
     className: "gridBody"
   }, React.createElement("g", {
@@ -2528,8 +2533,6 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
       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,
@@ -2537,7 +2540,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 = useState(0),
@@ -2745,8 +2750,6 @@ 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;
 
@@ -2767,7 +2770,7 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
           var minY = Math.min(yFrom, yTo);
           var maxY = Math.max(yFrom, yTo);
 
-          if (maxY < visibleMinY || minY > visibleMaxY) {
+          if (maxY < visibleStartY || minY > visibleEndY) {
             return null;
           }
 
@@ -2879,7 +2882,7 @@ var TaskGantt = function TaskGantt(_ref) {
     estimateSize: function estimateSize() {
       return barProps.rowHeight;
     },
-    overscan: 20
+    overscan: 10
   });
   useEffect(function () {
     if (horizontalContainerRef.current) {
@@ -2920,6 +2923,8 @@ var TaskGantt = function TaskGantt(_ref) {
     visibleStartY: visibleStartY,
     visibleEndY: visibleEndY
   })), React.createElement(TaskGanttContent, Object.assign({}, newBarProps, {
+    visibleStartY: visibleStartY,
+    visibleEndY: visibleEndY,
     virtualItems: virtualizer.getVirtualItems()
   })))));
 };
@@ -3493,8 +3498,8 @@ var Gantt = function Gantt(_ref) {
     onDoubleClick: onDoubleClick,
     onClick: onClick,
     onDelete: onDelete,
-    ganttHeight: ganttHeight,
-    scrollY: scrollY
+    visibleStartY: visibleStartY,
+    visibleEndY: visibleEndY
   };
   var tableProps = {
     rowHeight: rowHeight,