gantt-task-react-powern 0.6.28 → 0.6.30

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

@@ -49,5 +49,6 @@ export declare type TaskListProps = {
     }>;
     containerWidth?: number;
     innerScrollRef?: React.RefObject<HTMLDivElement>;
+    horizontalContainerRef?: React.RefObject<HTMLDivElement>;
 } & EventOption;
 export declare const TaskList: React.FC<TaskListProps>;

package/dist/index.js

@@ -898,8 +898,26 @@ var TaskList = function TaskList(_ref) {
       taskLabelRenderer = _ref.taskLabelRenderer,
       onMultiSelect = _ref.onMultiSelect,
       containerWidth = _ref.containerWidth,
-      innerScrollRef = _ref.innerScrollRef;
-  var horizontalContainerRef = React.useRef(null);
+      innerScrollRef = _ref.innerScrollRef,
+      externalHorizontalContainerRef = _ref.horizontalContainerRef;
+  var internalHorizontalContainerRef = React.useRef(null);
+  var horizontalContainerRef = externalHorizontalContainerRef != null ? externalHorizontalContainerRef : internalHorizontalContainerRef;
+  var headerScrollRef = React.useRef(null);
+  React.useEffect(function () {
+    var rowsEl = horizontalContainerRef.current;
+    if (!rowsEl) return;
+
+    var onScroll = function onScroll() {
+      if (headerScrollRef.current) {
+        headerScrollRef.current.scrollLeft = rowsEl.scrollLeft;
+      }
+    };
+
+    rowsEl.addEventListener("scroll", onScroll);
+    return function () {
+      return rowsEl.removeEventListener("scroll", onScroll);
+    };
+  }, [horizontalContainerRef]);
 
   var _useState = React.useState([]),
       selectedTasks = _useState[0],
@@ -1086,9 +1104,14 @@ var TaskList = function TaskList(_ref) {
     ref: innerScrollRef,
     className: styles$4.hideScrollbar,
     style: {
-      overflowX: "auto"
+      overflowX: "hidden"
     }
-  }, React__default.createElement(TaskListHeader, Object.assign({}, headerProps)), React__default.createElement("div", {
+  }, React__default.createElement("div", {
+    ref: headerScrollRef,
+    style: {
+      overflow: "hidden"
+    }
+  }, React__default.createElement(TaskListHeader, Object.assign({}, headerProps))), React__default.createElement("div", {
     ref: horizontalContainerRef,
     className: horizontalContainerClass,
     style: ganttHeight ? {
@@ -1356,6 +1379,7 @@ var GridBody = function GridBody(_ref) {
   });
   var rowBackgrounds = [];
   var rowLines = [];
+  var rowOverlays = [];
   rowLines.push(React__default.createElement("line", {
     key: "top-line",
     x1: 0,
@@ -1364,6 +1388,7 @@ var GridBody = function GridBody(_ref) {
     y2: visibleStartY,
     className: styles$5.gridRowLine
   }));
+  var showPerRowOffDays = viewMode !== exports.ViewMode.Month && viewMode !== exports.ViewMode.Quarter;
 
   for (var _iterator = _createForOfIteratorHelperLoose(items), _step; !(_step = _iterator()).done;) {
     var vi = _step.value;
@@ -1388,6 +1413,63 @@ var GridBody = function GridBody(_ref) {
       y2: y + rowHeight,
       className: styles$5.gridRowLine
     }));
+
+    if (showPerRowOffDays) {
+      var rowEven = vi.index % 2 === 1;
+      var rowFill = isMilestone ? "#e6e4e4" : scheduleType === "lookAhead" ? "#fff" : rowEven ? "#f5f5f5" : "#fff";
+      rowOverlays.push(React__default.createElement("rect", {
+        key: "row-clean-" + vi.key,
+        x: 0,
+        y: y,
+        width: svgWidth,
+        height: rowHeight,
+        fill: rowFill
+      }));
+      var cal = task.calendar;
+
+      if (cal) {
+        for (var _i = 0, _x = 0; _i < dates.length; _i++, _x += columnWidth) {
+          var _dates2;
+
+          var _pEnd = (_dates2 = dates[_i + 1]) != null ? _dates2 : addToDate(dates[_i], 1, "day");
+
+          var _periodMs = _pEnd.getTime() - dates[_i].getTime();
+
+          if (_periodMs <= 0) continue;
+
+          var _cursor = new Date(dates[_i]);
+
+          _cursor.setHours(0, 0, 0, 0);
+
+          while (_cursor.getTime() < _pEnd.getTime()) {
+            if (isOffDay(_cursor, cal)) {
+              var _ds = _cursor.getTime() - dates[_i].getTime();
+
+              var _de = _ds + 86400000;
+
+              var _startFrac = Math.max(0, _ds) / _periodMs;
+
+              var _endFrac = Math.min(_periodMs, _de) / _periodMs;
+
+              var _rw = (_endFrac - _startFrac) * columnWidth;
+
+              if (_rw > 0.5) {
+                rowOverlays.push(React__default.createElement("rect", {
+                  key: "row-offday-" + vi.key + "-" + _cursor.getTime(),
+                  x: rtl ? _x + columnWidth - (_startFrac * columnWidth + _rw) : _x + _startFrac * columnWidth,
+                  y: y,
+                  width: _rw,
+                  height: rowHeight,
+                  fill: weekendColor
+                }));
+              }
+            }
+
+            _cursor.setDate(_cursor.getDate() + 1);
+          }
+        }
+      }
+    }
   }
 
   return React__default.createElement("g", {
@@ -1399,6 +1481,8 @@ var GridBody = function GridBody(_ref) {
   }, rowLines), React__default.createElement("g", {
     className: "offdays"
   }, offDayRects), React__default.createElement("g", {
+    className: "rowOverlays"
+  }, rowOverlays), React__default.createElement("g", {
     className: "ticks"
   }, tickLines), React__default.createElement("g", {
     className: "today"
@@ -2123,9 +2207,9 @@ var convertToBar = function convertToBar(task, index, dates, columnWidth, rowHei
   var plannedSegments;
   var actualSegments;
 
-  if (task.calender && task.start && task.end && task.start.getTime() > 0) {
+  if (task.calendar && task.start && task.end && task.start.getTime() > 0) {
     var planEnd = addToDate(startOfDate(task.end, "day"), 1, "day");
-    var intervals = getWorkingIntervals(task.start, planEnd, task.calender);
+    var intervals = getWorkingIntervals(task.start, planEnd, task.calendar);
     var segs = intervals.map(function (iv) {
       return {
         x1: taskXCoordinate(iv.start, dates, columnWidth),
@@ -2137,10 +2221,10 @@ var convertToBar = function convertToBar(task, index, dates, columnWidth, rowHei
     if (segs.length > 0) plannedSegments = segs;
   }
 
-  if (task.calender && task.actualStart && task.actualEnd && task.actualStart.getTime() > 0) {
+  if (task.calendar && task.actualStart && task.actualEnd && task.actualStart.getTime() > 0) {
     var actEnd = addToDate(startOfDate(task.actualEnd, "day"), 1, "day");
 
-    var _intervals = getWorkingIntervals(task.actualStart, actEnd, task.calender);
+    var _intervals = getWorkingIntervals(task.actualStart, actEnd, task.calendar);
 
     var _segs = _intervals.map(function (iv) {
       return {
@@ -3124,8 +3208,8 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
 
           var dragType = ganttEvent.type;
 
-          if (changedTask.calender && (ganttEvent.action === "end" || ganttEvent.action === "start" || ganttEvent.action === "move")) {
-            var cal = finalTask.calender;
+          if (changedTask.calendar && (ganttEvent.action === "end" || ganttEvent.action === "start" || ganttEvent.action === "move")) {
+            var cal = finalTask.calendar;
 
             if (dragType === "actual") {
               if (ganttEvent.action === "end") {
@@ -3246,8 +3330,8 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
         var isNotLikeOriginal = originalSelectedTask.start !== newChangedTask.start || originalSelectedTask.end !== newChangedTask.end || originalSelectedTask.actualStart !== newChangedTask.actualStart || originalSelectedTask.actualEnd !== newChangedTask.actualEnd || originalSelectedTask.progress !== newChangedTask.progress;
         var dropType = type;
 
-        if (newChangedTask.calender && (action === "move" || action === "end" || action === "start")) {
-          var cal = newChangedTask.calender;
+        if (newChangedTask.calendar && (action === "move" || action === "end" || action === "start")) {
+          var cal = newChangedTask.calendar;
 
           if (dropType === "actual") {
             if (action === "end") {
@@ -3544,18 +3628,6 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
 
   var lineX = sliderTime !== undefined ? taskXCoordinate(new Date(sliderTime), dates, columnWidth) : null;
   var totalHeight = tasks.length * rowHeight;
-  React.useEffect(function () {
-    if (sliderTime !== undefined) {
-      console.log('Vertical line debug:', {
-        sliderTime: new Date(sliderTime).toLocaleString(),
-        lineX: lineX,
-        totalHeight: totalHeight,
-        tasksCount: tasks.length,
-        columnWidth: columnWidth,
-        datesRange: dates.length > 0 ? dates[0].toLocaleString() + " - " + dates[dates.length - 1].toLocaleString() : 'empty'
-      });
-    }
-  }, [sliderTime, lineX, totalHeight, tasks.length, dates, columnWidth]);
   return React__default.createElement("g", {
     className: "content"
   }, lineX !== null && lineX > 0 && React__default.createElement("line", {
@@ -3563,7 +3635,7 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
     y1: 0,
     x2: lineX,
     y2: totalHeight,
-    stroke: "red",
+    stroke: "blue",
     strokeWidth: 2,
     pointerEvents: "none",
     opacity: 0.8
@@ -3733,8 +3805,6 @@ var HorizontalScroll = function HorizontalScroll(_ref) {
 };
 
 var Gantt = function Gantt(_ref) {
-  var _tasks$find$calender, _tasks$find;
-
   var tasks = _ref.tasks,
       _ref$leafTasks = _ref.leafTasks,
       leafTasks = _ref$leafTasks === void 0 ? [] : _ref$leafTasks,
@@ -3825,9 +3895,6 @@ var Gantt = function Gantt(_ref) {
       projectCalendar = _ref.projectCalendar,
       onCalendarError = _ref.onCalendarError,
       sliderTime = _ref.sliderTime;
-  var effectiveCalendar = (_tasks$find$calender = (_tasks$find = tasks.find(function (t) {
-    return t.calender;
-  })) === null || _tasks$find === void 0 ? void 0 : _tasks$find.calender) != null ? _tasks$find$calender : projectCalendar;
   var wrapperRef = React.useRef(null);
   var taskListRef = React.useRef(null);
   var isDraggingTable = React.useRef(false);
@@ -3840,6 +3907,7 @@ var Gantt = function Gantt(_ref) {
       setTableContainerWidth = _useState[1];
 
   var tableInnerScrollRef = React.useRef(null);
+  var tableHorizontalContainerRef = React.useRef(null);
   var tableHScrollRef = React.useRef(null);
 
   var _useState2 = React.useState(0),
@@ -3875,18 +3943,20 @@ var Gantt = function Gantt(_ref) {
       setTaskListWidth = _useState5[1];
 
   React.useEffect(function () {
-    if (tableInnerScrollRef.current) {
+    if (tableHorizontalContainerRef.current) {
+      setTableScrollableWidth(tableHorizontalContainerRef.current.scrollWidth);
+    } else if (tableInnerScrollRef.current) {
       setTableScrollableWidth(tableInnerScrollRef.current.scrollWidth);
     }
   }, [taskListWidth, listCellWidth]);
 
   var handleTableResizeMouseDown = function handleTableResizeMouseDown(e) {
-    var _taskListRef$current$, _taskListRef$current, _tableInnerScrollRef$, _tableInnerScrollRef$2, _wrapperRef$current$o, _wrapperRef$current;
+    var _taskListRef$current$, _taskListRef$current, _ref2, _tableHorizontalConta, _tableHorizontalConta2, _tableInnerScrollRef$, _wrapperRef$current$o, _wrapperRef$current;
 
     isDraggingTable.current = true;
     dragStartX.current = e.clientX;
     dragStartWidth.current = tableContainerWidth != null ? tableContainerWidth : (_taskListRef$current$ = (_taskListRef$current = taskListRef.current) === null || _taskListRef$current === void 0 ? void 0 : _taskListRef$current.offsetWidth) != null ? _taskListRef$current$ : 0;
-    dragMaxWidth.current = (_tableInnerScrollRef$ = (_tableInnerScrollRef$2 = tableInnerScrollRef.current) === null || _tableInnerScrollRef$2 === void 0 ? void 0 : _tableInnerScrollRef$2.scrollWidth) != null ? _tableInnerScrollRef$ : Math.max(100, ((_wrapperRef$current$o = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.offsetWidth) != null ? _wrapperRef$current$o : Infinity) - 200);
+    dragMaxWidth.current = (_ref2 = (_tableHorizontalConta = (_tableHorizontalConta2 = tableHorizontalContainerRef.current) === null || _tableHorizontalConta2 === void 0 ? void 0 : _tableHorizontalConta2.scrollWidth) != null ? _tableHorizontalConta : (_tableInnerScrollRef$ = tableInnerScrollRef.current) === null || _tableInnerScrollRef$ === void 0 ? void 0 : _tableInnerScrollRef$.scrollWidth) != null ? _ref2 : Math.max(100, ((_wrapperRef$current$o = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.offsetWidth) != null ? _wrapperRef$current$o : Infinity) - 200);
     e.preventDefault();
   };
 
@@ -4004,13 +4074,13 @@ var Gantt = function Gantt(_ref) {
     }
 
     debounceRef.current = setTimeout(function () {
-      var _effectiveCalendar$qu;
+      var _projectCalendar$quar;
 
       var filteredTasks;
       filteredTasks = removeHiddenTasks(tasks);
       filteredTasks = filteredTasks.sort(sortTasks);
 
-      var _ganttDateRange2 = ganttDateRange(filteredTasks, viewMode, preStepsCount, (_effectiveCalendar$qu = effectiveCalendar === null || effectiveCalendar === void 0 ? void 0 : effectiveCalendar.quarter_start) != null ? _effectiveCalendar$qu : 0),
+      var _ganttDateRange2 = ganttDateRange(filteredTasks, viewMode, preStepsCount, (_projectCalendar$quar = projectCalendar === null || projectCalendar === void 0 ? void 0 : projectCalendar.quarter_start) != null ? _projectCalendar$quar : 0),
           startDateRange = _ganttDateRange2[0],
           endDateRange = _ganttDateRange2[1];
 
@@ -4049,7 +4119,7 @@ var Gantt = function Gantt(_ref) {
       setBarTasks(convertToBarTasks(filteredTasks, newDates, effectiveColumnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor));
       setIsProcessing(false);
     }, delayToRender);
-  }, [tasks, viewMode, preStepsCount, rowHeight, barCornerRadius, taskHeight, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor, rtl, shouldNotShowLoadingOverlay, effectiveColumnWidth, effectiveCalendar]);
+  }, [tasks, viewMode, preStepsCount, rowHeight, barCornerRadius, taskHeight, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor, rtl, shouldNotShowLoadingOverlay, effectiveColumnWidth, projectCalendar]);
   React.useEffect(function () {
     return function () {
       clearTimeout(debounceRef.current);
@@ -4321,7 +4391,7 @@ var Gantt = function Gantt(_ref) {
     rtl: rtl,
     visibleStartY: visibleStartY,
     visibleEndY: visibleEndY,
-    projectCalendar: effectiveCalendar,
+    projectCalendar: projectCalendar,
     viewMode: viewMode
   };
   var calendarProps = {
@@ -4333,7 +4403,7 @@ var Gantt = function Gantt(_ref) {
     fontFamily: fontFamily,
     fontSize: fontSize,
     rtl: rtl,
-    projectCalendar: effectiveCalendar
+    projectCalendar: projectCalendar
   };
   var barProps = {
     tasks: barTasks,
@@ -4360,7 +4430,7 @@ var Gantt = function Gantt(_ref) {
     onClick: onClick,
     onDelete: onDelete,
     onCalendarError: onCalendarError,
-    projectCalendar: effectiveCalendar,
+    projectCalendar: projectCalendar,
     visibleStartY: visibleStartY,
     visibleEndY: visibleEndY,
     sliderTime: sliderTime
@@ -4393,7 +4463,8 @@ var Gantt = function Gantt(_ref) {
     taskLabelRenderer: taskLabelRenderer,
     onMultiSelect: onMultiSelect,
     containerWidth: tableContainerWidth != null ? tableContainerWidth : undefined,
-    innerScrollRef: tableInnerScrollRef
+    innerScrollRef: tableInnerScrollRef,
+    horizontalContainerRef: tableHorizontalContainerRef
   };
   return React__default.createElement("div", {
     style: {
@@ -4489,8 +4560,8 @@ var Gantt = function Gantt(_ref) {
       flexShrink: 0
     },
     onScroll: function onScroll(e) {
-      if (tableInnerScrollRef.current) {
-        tableInnerScrollRef.current.scrollLeft = e.currentTarget.scrollLeft;
+      if (tableHorizontalContainerRef.current) {
+        tableHorizontalContainerRef.current.scrollLeft = e.currentTarget.scrollLeft;
       }
     }
   }, React__default.createElement("div", {