gantt-task-react-powern 0.6.2 → 0.6.3

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

@@ -20,8 +20,8 @@ export declare type TaskGanttContentProps = {
     fontFamily: string;
     rtl: boolean;
     virtualItems?: VirtualItem[];
-    ganttHeight: number;
-    scrollY: number;
+    visibleStartY: number;
+    visibleEndY: number;
     setGanttEvent: (value: GanttEvent) => void;
     setFailedTask: (value: BarTask | null) => void;
     setSelectedTask: (taskId: string) => void;

package/dist/index.js

@@ -793,7 +793,7 @@ var TaskList = function TaskList(_ref) {
     estimateSize: function estimateSize() {
       return rowHeight;
     },
-    overscan: 5
+    overscan: 10
   });
   React.useEffect(function () {
     if (horizontalContainerRef.current) {
@@ -984,6 +984,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,
@@ -993,30 +994,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__default.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__default.createElement("rect", {
-        key: "today-rtl-" + i,
-        x: x,
+        key: "today-" + i,
+        x: rtl ? x + columnWidth : x,
         y: visibleStartY,
         width: columnWidth,
         height: visibleHeight,
@@ -1024,7 +1029,7 @@ var GridBody = function GridBody(_ref) {
       }));
     }
 
-    if (date.getDay() === 0 || date.getDay() === 6) {
+    if (isWeekend(dates[i])) {
       weekendRects.push(React__default.createElement("rect", {
         key: "weekend-" + i,
         x: x,
@@ -1034,44 +1039,43 @@ var GridBody = function GridBody(_ref) {
         fill: weekendColor
       }));
     }
-
-    x += columnWidth;
   }
 
-  x = 0;
   var tickLines = dates.map(function (_, i) {
-    var line = React__default.createElement("line", {
+    return React__default.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__default.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__default.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__default.createElement("line", {
       key: "line-" + vi.key,
@@ -1081,7 +1085,8 @@ var GridBody = function GridBody(_ref) {
       y2: y + rowHeight,
       className: styles$4.gridRowLine
     }));
-  });
+  }
+
   return React__default.createElement("g", {
     className: "gridBody"
   }, React__default.createElement("g", {
@@ -2529,8 +2534,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,
@@ -2538,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),
@@ -2746,8 +2751,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;
 
@@ -2768,7 +2771,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;
           }
 
@@ -2880,7 +2883,7 @@ var TaskGantt = function TaskGantt(_ref) {
     estimateSize: function estimateSize() {
       return barProps.rowHeight;
     },
-    overscan: 20
+    overscan: 10
   });
   React.useEffect(function () {
     if (horizontalContainerRef.current) {
@@ -2921,6 +2924,8 @@ var TaskGantt = function TaskGantt(_ref) {
     visibleStartY: visibleStartY,
     visibleEndY: visibleEndY
   })), React__default.createElement(TaskGanttContent, Object.assign({}, newBarProps, {
+    visibleStartY: visibleStartY,
+    visibleEndY: visibleEndY,
     virtualItems: virtualizer.getVirtualItems()
   })))));
 };
@@ -3494,8 +3499,8 @@ var Gantt = function Gantt(_ref) {
     onDoubleClick: onDoubleClick,
     onClick: onClick,
     onDelete: onDelete,
-    ganttHeight: ganttHeight,
-    scrollY: scrollY
+    visibleStartY: visibleStartY,
+    visibleEndY: visibleEndY
   };
   var tableProps = {
     rowHeight: rowHeight,