gantt-task-react-powern 0.6.28 → 0.6.29

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.calender;
+
+      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"
@@ -3733,8 +3817,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 +3907,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 +3919,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 +3955,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 +4086,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 +4131,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 +4403,7 @@ var Gantt = function Gantt(_ref) {
     rtl: rtl,
     visibleStartY: visibleStartY,
     visibleEndY: visibleEndY,
-    projectCalendar: effectiveCalendar,
+    projectCalendar: projectCalendar,
     viewMode: viewMode
   };
   var calendarProps = {
@@ -4333,7 +4415,7 @@ var Gantt = function Gantt(_ref) {
     fontFamily: fontFamily,
     fontSize: fontSize,
     rtl: rtl,
-    projectCalendar: effectiveCalendar
+    projectCalendar: projectCalendar
   };
   var barProps = {
     tasks: barTasks,
@@ -4360,7 +4442,7 @@ var Gantt = function Gantt(_ref) {
     onClick: onClick,
     onDelete: onDelete,
     onCalendarError: onCalendarError,
-    projectCalendar: effectiveCalendar,
+    projectCalendar: projectCalendar,
     visibleStartY: visibleStartY,
     visibleEndY: visibleEndY,
     sliderTime: sliderTime
@@ -4393,7 +4475,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 +4572,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", {