gantt-task-react-powern 0.6.36 → 0.6.38

package/dist/index.js

@@ -22,10 +22,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function _objectDestructuringEmpty(obj) {
-  if (obj == null) throw new TypeError("Cannot destructure undefined");
-}
-
 function _unsupportedIterableToArray(o, minLen) {
   if (!o) return;
   if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -600,7 +596,7 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
 
       var percentComplete = t.percentComplete != null ? t.percentComplete : (_t$progress = t.progress) != null ? _t$progress : 0;
       var plannedDuration = t.plannedDuration != null ? t.plannedDuration : null;
-      var remainingDuration = plannedDuration != null ? Math.round(plannedDuration - plannedDuration * (percentComplete / 100)) : null;
+      var remainingDuration = plannedDuration != null ? Math.max(Math.round(plannedDuration - plannedDuration * (percentComplete / 100)), 0) : null;
 
       var actualDuration = function () {
         if (!t.actualStart || t.actualStart.getTime() === 0) return null;
@@ -822,7 +818,7 @@ var VerticalScroll = function VerticalScroll(_ref) {
 };
 
 function getTaskListColumns(scheduleType, hasCheckbox) {
-  var columns = [];
+  const columns = [];
   if (hasCheckbox) columns.push({
     id: "select",
     factor: 0.3
@@ -875,13 +871,12 @@ function getTaskListColumns(scheduleType, hasCheckbox) {
 
   return columns;
 }
-var MIN_COLUMN_WIDTH = 40;
+const MIN_COLUMN_WIDTH = 40;
 function buildDefaultColumnWidths(scheduleType, hasCheckbox, rowWidth) {
-  var base = parseInt(rowWidth) || 0;
-  var widths = {};
+  const base = parseInt(rowWidth) || 0;
+  const widths = {};
 
-  for (var _iterator = _createForOfIteratorHelperLoose(getTaskListColumns(scheduleType, hasCheckbox)), _step; !(_step = _iterator()).done;) {
-    var col = _step.value;
+  for (const col of getTaskListColumns(scheduleType, hasCheckbox)) {
     widths[col.id] = base * col.factor;
   }
 
@@ -984,6 +979,14 @@ var TaskList = function TaskList(_ref) {
   React.useEffect(function () {
     onContentWidthChange === null || onContentWidthChange === void 0 ? void 0 : onContentWidthChange(contentWidth);
   }, [contentWidth, onContentWidthChange]);
+  var taskIdsKey = React.useMemo(function () {
+    return tasks.map(function (t) {
+      return t.id;
+    }).join("|");
+  }, [tasks]);
+  var selectedTaskIds = React.useMemo(function () {
+    return new Set(selectedTasks);
+  }, [selectedTasks]);
 
   var _useState3 = React.useState([]),
       pendingTaskSelect = _useState3[0],
@@ -1032,10 +1035,10 @@ var TaskList = function TaskList(_ref) {
       } else {
         var _descendants = getDescendants(taskId, tasks);
 
-        newSelected["delete"](taskId);
+        newSelected.delete(taskId);
 
         _descendants.forEach(function (d) {
-          return newSelected["delete"](d);
+          return newSelected.delete(d);
         });
       }
     });
@@ -1068,7 +1071,7 @@ var TaskList = function TaskList(_ref) {
     if (JSON.stringify(newSelectedArray) !== JSON.stringify(selectedTasks)) {
       setSelectedTasks(newSelectedArray);
     }
-  }, [tasks.length]);
+  }, [taskIdsKey]);
 
   var getDescendants = function getDescendants(taskId, allTasks) {
     var task = allTasks.find(function (t) {
@@ -1113,15 +1116,10 @@ var TaskList = function TaskList(_ref) {
 
   var handleSelectAll = function handleSelectAll(selected) {
     if (selected) {
-      var topLevelTasks = tasks.filter(function (task) {
-        return !getParentWbs(task.id);
-      });
-      setPendingTaskSelect(topLevelTasks.map(function (task) {
-        return {
-          taskId: task.id,
-          selected: true
-        };
+      setSelectedTasks(tasks.map(function (task) {
+        return task.id;
       }));
+      setPendingTaskSelect([]);
     } else {
       setSelectedTasks([]);
       setPendingTaskSelect([]);
@@ -1134,7 +1132,9 @@ var TaskList = function TaskList(_ref) {
     fontSize: fontSize,
     rowWidth: rowWidth,
     scheduleType: scheduleType,
-    allSelected: tasks.length > 0 && selectedTasks.length === tasks.length,
+    allSelected: tasks.length > 0 && tasks.every(function (t) {
+      return selectedTaskIds.has(t.id);
+    }),
     onSelectAll: onMultiSelect ? handleSelectAll : undefined,
     columnWidths: columnWidths,
     onColumnResize: handleColumnResize
@@ -1195,15 +1195,15 @@ var TaskList = function TaskList(_ref) {
 };
 
 function parseTimeToMinutes(t) {
-  var parts = t.split(":").map(Number);
+  const parts = t.split(":").map(Number);
   return parts[0] * 60 + parts[1] + (parts[2] ? parts[2] / 60 : 0);
 }
 
 function toDateString(date) {
-  var y = date.getFullYear();
-  var m = String(date.getMonth() + 1).padStart(2, "0");
-  var d = String(date.getDate()).padStart(2, "0");
-  return y + "-" + m + "-" + d;
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
 }
 
 function isHoliday(date, cal) {
@@ -1222,9 +1222,8 @@ function isOffDay(date, cal) {
 }
 function getShiftsForDay(date, cal) {
   if (isOffDay(date, cal) || !cal.shifts) return [];
-  return cal.shifts.map(function (_ref) {
-    var s = _ref[0],
-        e = _ref[1];
+  return cal.shifts.map(_ref => {
+    let [s, e] = _ref;
     return {
       start: parseTimeToMinutes(s),
       end: parseTimeToMinutes(e)
@@ -1233,21 +1232,20 @@ function getShiftsForDay(date, cal) {
 }
 function getWorkingIntervals(start, end, cal) {
   if (start >= end) return [];
-  var intervals = [];
-  var cursor = new Date(start);
+  const intervals = [];
+  const cursor = new Date(start);
   cursor.setHours(0, 0, 0, 0);
 
   while (cursor <= end) {
-    var shifts = getShiftsForDay(cursor, cal);
+    const shifts = getShiftsForDay(cursor, cal);
 
-    for (var _iterator = _createForOfIteratorHelperLoose(shifts), _step; !(_step = _iterator()).done;) {
-      var shift = _step.value;
-      var shiftStart = new Date(cursor);
+    for (const shift of shifts) {
+      const shiftStart = new Date(cursor);
       shiftStart.setHours(Math.floor(shift.start / 60), Math.floor(shift.start % 60), Math.round(shift.start % 1 * 60), 0);
-      var shiftEnd = new Date(cursor);
+      const shiftEnd = new Date(cursor);
       shiftEnd.setHours(Math.floor(shift.end / 60), Math.floor(shift.end % 60), Math.round(shift.end % 1 * 60), 0);
-      var intervalStart = shiftStart < start ? start : shiftStart;
-      var intervalEnd = shiftEnd > end ? end : shiftEnd;
+      const intervalStart = shiftStart < start ? start : shiftStart;
+      const intervalEnd = shiftEnd > end ? end : shiftEnd;
 
       if (intervalStart < intervalEnd) {
         intervals.push({
@@ -1263,21 +1261,19 @@ function getWorkingIntervals(start, end, cal) {
   return intervals;
 }
 function snapToWorkingTime(date, cal, direction) {
-  var MAX_DAYS = 60;
-  var result = new Date(date);
+  const MAX_DAYS = 60;
+  const result = new Date(date);
 
-  for (var attempt = 0; attempt < MAX_DAYS * 24 * 60; attempt++) {
-    var dayStart = new Date(result);
+  for (let attempt = 0; attempt < MAX_DAYS * 24 * 60; attempt++) {
+    const dayStart = new Date(result);
     dayStart.setHours(0, 0, 0, 0);
-    var shifts = getShiftsForDay(dayStart, cal);
+    const shifts = getShiftsForDay(dayStart, cal);
 
     if (shifts.length > 0) {
       if (direction === "forward") {
-        var currentMins = result.getHours() * 60 + result.getMinutes() + result.getSeconds() / 60;
-
-        for (var _iterator2 = _createForOfIteratorHelperLoose(shifts), _step2; !(_step2 = _iterator2()).done;) {
-          var shift = _step2.value;
+        const currentMins = result.getHours() * 60 + result.getMinutes() + result.getSeconds() / 60;
 
+        for (const shift of shifts) {
           if (currentMins <= shift.end) {
             if (currentMins < shift.start) {
               result.setHours(Math.floor(shift.start / 60), Math.round(shift.start % 60), 0, 0);
@@ -1290,11 +1286,11 @@ function snapToWorkingTime(date, cal, direction) {
         result.setDate(result.getDate() + 1);
         result.setHours(0, 0, 0, 0);
       } else {
-        var _currentMins = result.getHours() * 60 + result.getMinutes() + result.getSeconds() / 60;
+        const currentMins = result.getHours() * 60 + result.getMinutes() + result.getSeconds() / 60;
 
-        for (var i = shifts.length - 1; i >= 0; i--) {
-          if (_currentMins >= shifts[i].start) {
-            if (_currentMins > shifts[i].end) {
+        for (let i = shifts.length - 1; i >= 0; i--) {
+          if (currentMins >= shifts[i].start) {
+            if (currentMins > shifts[i].end) {
               result.setHours(Math.floor(shifts[i].end / 60), Math.round(shifts[i].end % 60), 0, 0);
             }
 
@@ -1319,72 +1315,69 @@ function snapToWorkingTime(date, cal, direction) {
   return date;
 }
 function getQuarterNumber(date, quarterStart) {
-  var month = date.getMonth();
-  var offset = (month - quarterStart + 12) % 12;
+  const month = date.getMonth();
+  const offset = (month - quarterStart + 12) % 12;
   return Math.floor(offset / 3) + 1;
 }
 
 var styles$5 = {"gridRow":"_2dZTy","gridRowLookAhead":"_2RRca","gridRowLine":"_3rUKi","gridTick":"_RuwuK","gridTickWeekStart":"_1q0EV","gridTickDashed":"_Zh9jh","darkerGridRow":"_2M-tt"};
 
-var GridBody = function GridBody(_ref) {
-  var _projectCalendar$week;
-
-  var tasks = _ref.tasks,
-      scheduleType = _ref.scheduleType,
-      dates = _ref.dates,
-      rowHeight = _ref.rowHeight,
-      svgWidth = _ref.svgWidth,
-      columnWidth = _ref.columnWidth,
-      todayColor = _ref.todayColor,
-      weekendColor = _ref.weekendColor,
-      rtl = _ref.rtl,
-      _ref$virtualItems = _ref.virtualItems,
-      virtualItems = _ref$virtualItems === void 0 ? [] : _ref$virtualItems,
-      visibleStartY = _ref.visibleStartY,
-      visibleEndY = _ref.visibleEndY,
-      projectCalendar = _ref.projectCalendar,
-      viewMode = _ref.viewMode;
-  var visibleHeight = visibleEndY - visibleStartY;
-  var now = new Date();
-  var items = virtualItems.length > 0 ? virtualItems : tasks.map(function (_, i) {
-    return {
-      index: i,
-      start: i * rowHeight,
-      end: (i + 1) * rowHeight,
-      size: rowHeight,
-      key: i
-    };
-  });
+const GridBody = _ref => {
+  let {
+    tasks,
+    scheduleType,
+    dates,
+    rowHeight,
+    svgWidth,
+    columnWidth,
+    todayColor,
+    weekendColor,
+    rtl,
+    virtualItems = [],
+    visibleStartY,
+    visibleEndY,
+    projectCalendar,
+    viewMode
+  } = _ref;
+  const visibleHeight = visibleEndY - visibleStartY;
+  const now = new Date();
+  const items = virtualItems.length > 0 ? virtualItems : tasks.map((_, i) => ({
+    index: i,
+    start: i * rowHeight,
+    end: (i + 1) * rowHeight,
+    size: rowHeight,
+    key: i
+  }));
 
-  var isDayOff = function isDayOff(date) {
+  const isDayOff = date => {
     if (projectCalendar) return isOffDay(date, projectCalendar);
-    var d = date.getDay();
+    const d = date.getDay();
     return d === 0 || d === 6;
   };
 
-  var isTodayColumn = function isTodayColumn(i) {
-    var date = dates[i];
-    var next = dates[i + 1];
+  const isTodayColumn = i => {
+    const date = dates[i];
+    const next = dates[i + 1];
     if (next && date <= now && next > now) return true;
 
     if (!next && date <= now) {
-      var prev = dates[i - 1];
-      var step = prev ? date.getTime() - prev.getTime() : 86400000;
-      var end = addToDate(date, step, "millisecond");
+      const prev = dates[i - 1];
+      const step = prev ? date.getTime() - prev.getTime() : 86400000;
+      const end = addToDate(date, step, "millisecond");
       return end > now;
     }
 
     return false;
   };
 
-  var todayRects = [];
-  var offDayRects = [];
-  var weekStartDay = (_projectCalendar$week = projectCalendar === null || projectCalendar === void 0 ? void 0 : projectCalendar.week_start) != null ? _projectCalendar$week : 1;
+  const todayRects = [];
+  const offDayRects = [];
+  const weekStartDay = (projectCalendar === null || projectCalendar === void 0 ? void 0 : projectCalendar.week_start) ?? 1;
 
-  for (var i = 0, x = 0; i < dates.length; i++, x += columnWidth) {
+  for (let i = 0, x = 0; i < dates.length; i++, x += columnWidth) {
     if (isTodayColumn(i)) {
       todayRects.push(React__default.createElement("rect", {
-        key: "today-" + i,
+        key: `today-${i}`,
         x: rtl ? x + columnWidth : x,
         y: visibleStartY,
         width: columnWidth,
@@ -1394,26 +1387,24 @@ var GridBody = function GridBody(_ref) {
     }
 
     if (viewMode !== exports.ViewMode.Month && viewMode !== exports.ViewMode.Quarter) {
-      var _dates;
-
-      var pEnd = (_dates = dates[i + 1]) != null ? _dates : addToDate(dates[i], 1, "day");
-      var periodMs = pEnd.getTime() - dates[i].getTime();
+      const pEnd = dates[i + 1] ?? addToDate(dates[i], 1, "day");
+      const periodMs = pEnd.getTime() - dates[i].getTime();
 
       if (periodMs > 0) {
-        var cursor = new Date(dates[i]);
+        const cursor = new Date(dates[i]);
         cursor.setHours(0, 0, 0, 0);
 
         while (cursor.getTime() < pEnd.getTime()) {
           if (isDayOff(cursor)) {
-            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;
+            const ds = cursor.getTime() - dates[i].getTime();
+            const de = ds + 86400000;
+            const startFrac = Math.max(0, ds) / periodMs;
+            const endFrac = Math.min(periodMs, de) / periodMs;
+            const rw = (endFrac - startFrac) * columnWidth;
 
             if (rw > 0.5) {
               offDayRects.push(React__default.createElement("rect", {
-                key: "offday-" + i + "-" + cursor.getTime(),
+                key: `offday-${i}-${cursor.getTime()}`,
                 x: x + startFrac * columnWidth,
                 y: visibleStartY,
                 width: rw,
@@ -1429,10 +1420,10 @@ var GridBody = function GridBody(_ref) {
     }
   }
 
-  var isDayView = viewMode === exports.ViewMode.Day;
-  var isWeekView = viewMode === exports.ViewMode.Week;
-  var tickLines = dates.map(function (date, i) {
-    var tickClass = styles$5.gridTick;
+  const isDayView = viewMode === exports.ViewMode.Day;
+  const isWeekView = viewMode === exports.ViewMode.Week;
+  const tickLines = dates.map((date, i) => {
+    let tickClass = styles$5.gridTick;
 
     if (isDayView) {
       tickClass = date.getDay() === weekStartDay ? styles$5.gridTickWeekStart : styles$5.gridTickDashed;
@@ -1441,7 +1432,7 @@ var GridBody = function GridBody(_ref) {
     }
 
     return React__default.createElement("line", {
-      key: "tick-" + i,
+      key: `tick-${i}`,
       x1: i * columnWidth,
       y1: visibleStartY,
       x2: i * columnWidth,
@@ -1449,9 +1440,9 @@ var GridBody = function GridBody(_ref) {
       className: tickClass
     });
   });
-  var rowBackgrounds = [];
-  var rowLines = [];
-  var rowOverlays = [];
+  const rowBackgrounds = [];
+  const rowLines = [];
+  const rowOverlays = [];
   rowLines.push(React__default.createElement("line", {
     key: "top-line",
     x1: 0,
@@ -1460,17 +1451,16 @@ var GridBody = function GridBody(_ref) {
     y2: visibleStartY,
     className: styles$5.gridRowLine
   }));
-  var showPerRowOffDays = viewMode !== exports.ViewMode.Month && viewMode !== exports.ViewMode.Quarter;
+  const showPerRowOffDays = viewMode !== exports.ViewMode.Month && viewMode !== exports.ViewMode.Quarter;
 
-  for (var _iterator = _createForOfIteratorHelperLoose(items), _step; !(_step = _iterator()).done;) {
-    var vi = _step.value;
-    var task = tasks[vi.index];
+  for (const vi of items) {
+    const task = tasks[vi.index];
     if (!task) break;
-    var y = vi.start;
-    var isMilestone = task.type === "milestone";
-    var rowClass = isMilestone ? styles$5.darkerGridRow : scheduleType === "lookAhead" ? styles$5.gridRowLookAhead : styles$5.gridRow;
+    const y = vi.start;
+    const isMilestone = task.type === "milestone";
+    const rowClass = isMilestone ? styles$5.darkerGridRow : scheduleType === "lookAhead" ? styles$5.gridRowLookAhead : styles$5.gridRow;
     rowBackgrounds.push(React__default.createElement("rect", {
-      key: "bg-" + vi.key,
+      key: `bg-${vi.key}`,
       x: 0,
       y: y,
       width: svgWidth,
@@ -1478,7 +1468,7 @@ var GridBody = function GridBody(_ref) {
       className: rowClass
     }));
     rowLines.push(React__default.createElement("line", {
-      key: "line-" + vi.key,
+      key: `line-${vi.key}`,
       x1: 0,
       y1: y + rowHeight,
       x2: svgWidth,
@@ -1487,57 +1477,47 @@ var GridBody = function GridBody(_ref) {
     }));
 
     if (showPerRowOffDays) {
-      var rowEven = vi.index % 2 === 1;
-      var rowFill = isMilestone ? "#e6e4e4" : scheduleType === "lookAhead" ? "#fff" : rowEven ? "#f5f5f5" : "#fff";
+      const rowEven = vi.index % 2 === 1;
+      const rowFill = isMilestone ? "#e6e4e4" : scheduleType === "lookAhead" ? "#fff" : rowEven ? "#f5f5f5" : "#fff";
       rowOverlays.push(React__default.createElement("rect", {
-        key: "row-clean-" + vi.key,
+        key: `row-clean-${vi.key}`,
         x: 0,
         y: y,
         width: svgWidth,
         height: rowHeight,
         fill: rowFill
       }));
-      var cal = task.calendar;
+      const 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) {
+        for (let i = 0, x = 0; i < dates.length; i++, x += columnWidth) {
+          const pEnd = dates[i + 1] ?? addToDate(dates[i], 1, "day");
+          const periodMs = pEnd.getTime() - dates[i].getTime();
+          if (periodMs <= 0) continue;
+          const cursor = new Date(dates[i]);
+          cursor.setHours(0, 0, 0, 0);
+
+          while (cursor.getTime() < pEnd.getTime()) {
+            if (isOffDay(cursor, cal)) {
+              const ds = cursor.getTime() - dates[i].getTime();
+              const de = ds + 86400000;
+              const startFrac = Math.max(0, ds) / periodMs;
+              const endFrac = Math.min(periodMs, de) / periodMs;
+              const 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,
+                  key: `row-offday-${vi.key}-${cursor.getTime()}`,
+                  x: rtl ? x + columnWidth - (startFrac * columnWidth + rw) : x + startFrac * columnWidth,
                   y: y,
-                  width: _rw,
+                  width: rw,
                   height: rowHeight,
                   fill: weekendColor
                 }));
               }
             }
 
-            _cursor.setDate(_cursor.getDate() + 1);
+            cursor.setDate(cursor.getDate() + 1);
           }
         }
       }
@@ -1561,7 +1541,7 @@ var GridBody = function GridBody(_ref) {
   }, todayRects));
 };
 
-var Grid = function Grid(props) {
+const Grid = props => {
   return React__default.createElement("g", {
     className: "grid"
   }, React__default.createElement(GridBody, Object.assign({}, props)));
@@ -1569,16 +1549,17 @@ var Grid = function Grid(props) {
 
 var styles$6 = {"calendarBottomText":"_9w8d5","calendarTopTick":"_1rLuZ","calendarTickSolid":"_2X-yN","calendarTickDashed":"_2BaXZ","calendarOffDayHeader":"_24p-y","calendarTopText":"_2q1Kt","calendarHeader":"_35nLX","textAnchorStart":"_2Shd-","textAnchorMiddle":"_2XXW4","textAnchorEnd":"_3GdnC"};
 
-var TopPartOfCalendar = function TopPartOfCalendar(_ref) {
-  var value = _ref.value,
-      x1Line = _ref.x1Line,
-      y1Line = _ref.y1Line,
-      y2Line = _ref.y2Line,
-      xText = _ref.xText,
-      yText = _ref.yText,
-      _ref$textAnchor = _ref.textAnchor,
-      textAnchor = _ref$textAnchor === void 0 ? "middle" : _ref$textAnchor;
-  var textAnchorClass = textAnchor === "start" ? styles$6.textAnchorStart : textAnchor === "middle" ? styles$6.textAnchorMiddle : styles$6.textAnchorEnd;
+const TopPartOfCalendar = _ref => {
+  let {
+    value,
+    x1Line,
+    y1Line,
+    y2Line,
+    xText,
+    yText,
+    textAnchor = "middle"
+  } = _ref;
+  const textAnchorClass = textAnchor === "start" ? styles$6.textAnchorStart : textAnchor === "middle" ? styles$6.textAnchorMiddle : styles$6.textAnchorEnd;
   return React__default.createElement("g", {
     className: "calendarTop"
   }, React__default.createElement("line", {
@@ -1592,41 +1573,41 @@ var TopPartOfCalendar = function TopPartOfCalendar(_ref) {
     key: value + "text",
     y: yText,
     x: xText,
-    className: styles$6.calendarTopText + " " + textAnchorClass
+    className: `${styles$6.calendarTopText} ${textAnchorClass}`
   }, value));
 };
 
-var Calendar = function Calendar(_ref) {
-  var dateSetup = _ref.dateSetup,
-      locale = _ref.locale,
-      viewMode = _ref.viewMode,
-      rtl = _ref.rtl,
-      headerHeight = _ref.headerHeight,
-      columnWidth = _ref.columnWidth,
-      fontFamily = _ref.fontFamily,
-      fontSize = _ref.fontSize,
-      projectCalendar = _ref.projectCalendar,
-      weekendColor = _ref.weekendColor;
-
-  var isDayOff = function isDayOff(date) {
+const Calendar = _ref => {
+  let {
+    dateSetup,
+    locale,
+    viewMode,
+    rtl,
+    headerHeight,
+    columnWidth,
+    fontFamily,
+    fontSize,
+    projectCalendar,
+    weekendColor
+  } = _ref;
+
+  const isDayOff = date => {
     if (projectCalendar) return isOffDay(date, projectCalendar);
     return false;
   };
 
-  var shortMonth = function shortMonth(date) {
-    return date.toLocaleString(locale, {
-      month: "short"
-    });
-  };
+  const shortMonth = date => date.toLocaleString(locale, {
+    month: "short"
+  });
 
-  var getCalendarValuesForYear = function getCalendarValuesForYear() {
-    var topValues = [];
-    var bottomValues = [];
-    var topDefaultHeight = headerHeight * 0.5;
+  const getCalendarValuesForYear = () => {
+    const topValues = [];
+    const bottomValues = [];
+    const topDefaultHeight = headerHeight * 0.5;
 
-    for (var i = 0; i < dateSetup.dates.length; i++) {
-      var date = dateSetup.dates[i];
-      var bottomValue = date.getFullYear();
+    for (let i = 0; i < dateSetup.dates.length; i++) {
+      const date = dateSetup.dates[i];
+      const bottomValue = date.getFullYear();
       bottomValues.push(React__default.createElement("text", {
         key: date.getFullYear(),
         y: headerHeight * 0.8,
@@ -1635,8 +1616,8 @@ var Calendar = function Calendar(_ref) {
       }, bottomValue));
 
       if (i === 0 || date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()) {
-        var topValue = date.getFullYear().toString();
-        var xText = void 0;
+        const topValue = date.getFullYear().toString();
+        let xText;
 
         if (rtl) {
           xText = (6 + i + date.getFullYear() + 1) * columnWidth;
@@ -1659,37 +1640,35 @@ var Calendar = function Calendar(_ref) {
     return [topValues, bottomValues];
   };
 
-  var getCalendarValuesForQuarter = function getCalendarValuesForQuarter() {
-    var _projectCalendar$quar;
+  const getCalendarValuesForQuarter = () => {
+    const topValues = [];
+    const bottomValues = [];
+    const offDayRects = [];
+    const quarterStart = (projectCalendar === null || projectCalendar === void 0 ? void 0 : projectCalendar.quarter_start) ?? 0;
+    const rowH = headerHeight / 3;
 
-    var topValues = [];
-    var bottomValues = [];
-    var offDayRects = [];
-    var quarterStart = (_projectCalendar$quar = projectCalendar === null || projectCalendar === void 0 ? void 0 : projectCalendar.quarter_start) != null ? _projectCalendar$quar : 0;
-    var rowH = headerHeight / 3;
+    for (let i = 0; i < dateSetup.dates.length; i++) {
+      const date = dateSetup.dates[i];
+      const qNum = getQuarterNumber(date, quarterStart);
 
-    for (var i = 0; i < dateSetup.dates.length; i++) {
-      var date = dateSetup.dates[i];
-      var qNum = getQuarterNumber(date, quarterStart);
-
-      for (var m = 0; m < 3; m++) {
-        var monthDate = addToDate(date, m, "month");
+      for (let m = 0; m < 3; m++) {
+        const monthDate = addToDate(date, m, "month");
         bottomValues.push(React__default.createElement("text", {
-          key: "qmonth-" + i + "-" + m,
+          key: `qmonth-${i}-${m}`,
           y: headerHeight * 0.9,
           x: columnWidth * i + columnWidth * (m * 2 + 1) / 6,
-          className: styles$6.calendarTopText + " " + styles$6.textAnchorMiddle
+          className: `${styles$6.calendarTopText} ${styles$6.textAnchorMiddle}`
         }, shortMonth(monthDate)));
       }
 
       bottomValues.push(React__default.createElement("text", {
-        key: "qlabel-" + i,
+        key: `qlabel-${i}`,
         y: rowH * 1.6,
         x: columnWidth * i + columnWidth * 0.5,
-        className: styles$6.calendarTopText + " " + styles$6.textAnchorMiddle
-      }, "Qtr " + qNum));
+        className: `${styles$6.calendarTopText} ${styles$6.textAnchorMiddle}`
+      }, `Qtr ${qNum}`));
       bottomValues.push(React__default.createElement("line", {
-        key: "qsep-" + i,
+        key: `qsep-${i}`,
         x1: columnWidth * i,
         y1: rowH,
         x2: columnWidth * i,
@@ -1717,14 +1696,14 @@ var Calendar = function Calendar(_ref) {
       }
 
       if (i === 0 || date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()) {
-        var topValue = date.getFullYear().toString();
-        var span = 0;
+        const topValue = date.getFullYear().toString();
+        let span = 0;
 
-        for (var j = i; j < dateSetup.dates.length && dateSetup.dates[j].getFullYear() === date.getFullYear(); j++) {
+        for (let j = i; j < dateSetup.dates.length && dateSetup.dates[j].getFullYear() === date.getFullYear(); j++) {
           span++;
         }
 
-        var xText = columnWidth * i + columnWidth * span / 2;
+        const xText = columnWidth * i + columnWidth * span / 2;
         topValues.push(React__default.createElement(TopPartOfCalendar, {
           key: topValue + i,
           value: topValue,
@@ -1741,38 +1720,36 @@ var Calendar = function Calendar(_ref) {
     return [topValues, bottomValues, offDayRects];
   };
 
-  var getCalendarValuesForMonth = function getCalendarValuesForMonth() {
-    var _projectCalendar$quar2;
-
-    var topValues = [];
-    var bottomValues = [];
-    var offDayRects = [];
-    var topDefaultHeight = headerHeight * 0.5;
-    var quarterStart = (_projectCalendar$quar2 = projectCalendar === null || projectCalendar === void 0 ? void 0 : projectCalendar.quarter_start) != null ? _projectCalendar$quar2 : 0;
+  const getCalendarValuesForMonth = () => {
+    const topValues = [];
+    const bottomValues = [];
+    const offDayRects = [];
+    const topDefaultHeight = headerHeight * 0.5;
+    const quarterStart = (projectCalendar === null || projectCalendar === void 0 ? void 0 : projectCalendar.quarter_start) ?? 0;
 
-    for (var i = 0; i < dateSetup.dates.length; i++) {
-      var date = dateSetup.dates[i];
-      var bottomValue = shortMonth(date);
+    for (let i = 0; i < dateSetup.dates.length; i++) {
+      const date = dateSetup.dates[i];
+      const bottomValue = shortMonth(date);
       bottomValues.push(React__default.createElement("text", {
         key: bottomValue + date.getFullYear() + i,
         y: headerHeight * 0.8,
         x: columnWidth * i + columnWidth * 0.5,
-        className: styles$6.calendarTopText + " " + styles$6.textAnchorMiddle
+        className: `${styles$6.calendarTopText} ${styles$6.textAnchorMiddle}`
       }, bottomValue));
-      var qNum = getQuarterNumber(date, quarterStart);
-      var prevDate = i > 0 ? dateSetup.dates[i - 1] : null;
-      var prevQNum = prevDate ? getQuarterNumber(prevDate, quarterStart) : -1;
-      var isNewQuarter = i === 0 || qNum !== prevQNum || date.getFullYear() !== (prevDate ? prevDate.getFullYear() : -1);
+      const qNum = getQuarterNumber(date, quarterStart);
+      const prevDate = i > 0 ? dateSetup.dates[i - 1] : null;
+      const prevQNum = prevDate ? getQuarterNumber(prevDate, quarterStart) : -1;
+      const isNewQuarter = i === 0 || qNum !== prevQNum || date.getFullYear() !== (prevDate ? prevDate.getFullYear() : -1);
 
       if (isNewQuarter) {
-        var topValue = "Qtr " + qNum + ", " + date.getFullYear();
-        var span = 0;
+        const topValue = `Qtr ${qNum}, ${date.getFullYear()}`;
+        let span = 0;
 
-        for (var j = i; j < dateSetup.dates.length && getQuarterNumber(dateSetup.dates[j], quarterStart) === qNum && dateSetup.dates[j].getFullYear() === date.getFullYear(); j++) {
+        for (let j = i; j < dateSetup.dates.length && getQuarterNumber(dateSetup.dates[j], quarterStart) === qNum && dateSetup.dates[j].getFullYear() === date.getFullYear(); j++) {
           span++;
         }
 
-        var xText = rtl ? columnWidth * i + columnWidth * span * 0.5 + columnWidth : columnWidth * i + columnWidth * span / 2;
+        const xText = rtl ? columnWidth * i + columnWidth * span * 0.5 + columnWidth : columnWidth * i + columnWidth * span / 2;
         topValues.push(React__default.createElement(TopPartOfCalendar, {
           key: topValue + i,
           value: topValue,
@@ -1786,7 +1763,7 @@ var Calendar = function Calendar(_ref) {
 
         if (i > 0) {
           bottomValues.push(React__default.createElement("line", {
-            key: "qbound-" + i,
+            key: `qbound-${i}`,
             x1: columnWidth * i,
             y1: topDefaultHeight,
             x2: columnWidth * i,
@@ -1800,28 +1777,28 @@ var Calendar = function Calendar(_ref) {
     return [topValues, bottomValues, offDayRects];
   };
 
-  var getCalendarValuesForWeek = function getCalendarValuesForWeek() {
-    var topValues = [];
-    var bottomValues = [];
-    var offDayRects = [];
-    var weeksCount = 1;
-    var topDefaultHeight = headerHeight * 0.5;
-    var dates = dateSetup.dates;
+  const getCalendarValuesForWeek = () => {
+    const topValues = [];
+    const bottomValues = [];
+    const offDayRects = [];
+    let weeksCount = 1;
+    const topDefaultHeight = headerHeight * 0.5;
+    const dates = dateSetup.dates;
 
-    for (var i = dates.length - 1; i >= 0; i--) {
-      var date = dates[i];
-      var topValue = "";
+    for (let i = dates.length - 1; i >= 0; i--) {
+      const date = dates[i];
+      let topValue = "";
 
       if (i === 0 || date.getMonth() !== dates[i - 1].getMonth()) {
-        topValue = shortMonth(date) + " " + date.getFullYear();
+        topValue = `${shortMonth(date)} ${date.getFullYear()}`;
       }
 
-      var bottomValue = date.getDate().toString();
+      const bottomValue = date.getDate().toString();
       bottomValues.push(React__default.createElement("text", {
         key: date.getTime(),
         y: headerHeight * 0.8,
         x: columnWidth * (i + +rtl),
-        className: styles$6.calendarTopText + " " + styles$6.textAnchorStart
+        className: `${styles$6.calendarTopText} ${styles$6.textAnchorStart}`
       }, bottomValue));
 
       if (topValue) {
@@ -1847,23 +1824,21 @@ var Calendar = function Calendar(_ref) {
     return [topValues, bottomValues, offDayRects];
   };
 
-  var getCalendarValuesForDay = function getCalendarValuesForDay() {
-    var _projectCalendar$week;
+  const getCalendarValuesForDay = () => {
+    const topValues = [];
+    const bottomValues = [];
+    const offDayRects = [];
+    const tickLines = [];
+    const topDefaultHeight = headerHeight * 0.5;
+    const dates = dateSetup.dates;
+    const weekStartDay = (projectCalendar === null || projectCalendar === void 0 ? void 0 : projectCalendar.week_start) ?? 1;
 
-    var topValues = [];
-    var bottomValues = [];
-    var offDayRects = [];
-    var tickLines = [];
-    var topDefaultHeight = headerHeight * 0.5;
-    var dates = dateSetup.dates;
-    var weekStartDay = (_projectCalendar$week = projectCalendar === null || projectCalendar === void 0 ? void 0 : projectCalendar.week_start) != null ? _projectCalendar$week : 1;
-
-    for (var i = 0; i < dates.length; i++) {
-      var date = dates[i];
+    for (let i = 0; i < dates.length; i++) {
+      const date = dates[i];
 
       if (isDayOff(date)) {
         offDayRects.push(React__default.createElement("rect", {
-          key: "offday-header-" + i,
+          key: `offday-header-${i}`,
           x: columnWidth * i,
           y: topDefaultHeight,
           width: columnWidth,
@@ -1872,25 +1847,25 @@ var Calendar = function Calendar(_ref) {
         }));
       }
 
-      var isWeekStart = date.getDay() === weekStartDay;
+      const isWeekStart = date.getDay() === weekStartDay;
       tickLines.push(React__default.createElement("line", {
-        key: "tick-day-" + i,
+        key: `tick-day-${i}`,
         x1: columnWidth * i,
         y1: topDefaultHeight,
         x2: columnWidth * i,
         y2: headerHeight,
         className: isWeekStart ? styles$6.calendarTickSolid : styles$6.calendarTickDashed
       }));
-      var bottomValue = columnWidth > 55 ? getLocalDayOfWeek(date, locale, "short") + ", " + date.getDate() : getLocalDayOfWeek(date, locale, "narrow") + "," + date.getDate();
+      const bottomValue = columnWidth > 55 ? `${getLocalDayOfWeek(date, locale, "short")}, ${date.getDate()}` : `${getLocalDayOfWeek(date, locale, "narrow")},${date.getDate()}`;
       bottomValues.push(React__default.createElement("text", {
         key: date.getTime(),
         y: headerHeight * 0.8,
         x: columnWidth * i + columnWidth * 0.5,
-        className: styles$6.calendarTopText + " " + styles$6.textAnchorMiddle
+        className: `${styles$6.calendarTopText} ${styles$6.textAnchorMiddle}`
       }, bottomValue));
 
       if (i + 1 !== dates.length && date.getMonth() !== dates[i + 1].getMonth()) {
-        var topValue = shortMonth(date) + " " + date.getFullYear();
+        const topValue = `${shortMonth(date)} ${date.getFullYear()}`;
         topValues.push(React__default.createElement(TopPartOfCalendar, {
           key: topValue + i,
           value: topValue,
@@ -1903,11 +1878,10 @@ var Calendar = function Calendar(_ref) {
       }
 
       if (i + 1 === dates.length) {
-        var _topValue = shortMonth(date) + " " + date.getFullYear();
-
+        const topValue = `${shortMonth(date)} ${date.getFullYear()}`;
         topValues.push(React__default.createElement(TopPartOfCalendar, {
-          key: _topValue + "last",
-          value: _topValue,
+          key: topValue + "last",
+          value: topValue,
           x1Line: columnWidth * (i + 1),
           y1Line: 0,
           y2Line: topDefaultHeight,
@@ -1920,28 +1894,28 @@ var Calendar = function Calendar(_ref) {
     return [topValues, bottomValues, offDayRects, tickLines];
   };
 
-  var getCalendarValuesForPartOfDay = function getCalendarValuesForPartOfDay() {
-    var topValues = [];
-    var bottomValues = [];
-    var ticks = viewMode === exports.ViewMode.HalfDay ? 2 : 4;
-    var topDefaultHeight = headerHeight * 0.5;
-    var dates = dateSetup.dates;
+  const getCalendarValuesForPartOfDay = () => {
+    const topValues = [];
+    const bottomValues = [];
+    const ticks = viewMode === exports.ViewMode.HalfDay ? 2 : 4;
+    const topDefaultHeight = headerHeight * 0.5;
+    const dates = dateSetup.dates;
 
-    for (var i = 0; i < dates.length; i++) {
-      var date = dates[i];
-      var bottomValue = getCachedDateTimeFormat(locale, {
+    for (let i = 0; i < dates.length; i++) {
+      const date = dates[i];
+      const bottomValue = getCachedDateTimeFormat(locale, {
         hour: "numeric"
       }).format(date);
       bottomValues.push(React__default.createElement("text", {
         key: date.getTime(),
         y: headerHeight * 0.8,
         x: columnWidth * (i + +rtl),
-        className: styles$6.calendarTopText + " " + styles$6.textAnchorMiddle,
+        className: `${styles$6.calendarTopText} ${styles$6.textAnchorMiddle}`,
         fontFamily: fontFamily
       }, bottomValue));
 
       if (i === 0 || date.getDate() !== dates[i - 1].getDate()) {
-        var topValue = getLocalDayOfWeek(date, locale, "short") + ", " + date.getDate() + " " + shortMonth(date);
+        const topValue = `${getLocalDayOfWeek(date, locale, "short")}, ${date.getDate()} ${shortMonth(date)}`;
         topValues.push(React__default.createElement(TopPartOfCalendar, {
           key: topValue + date.getFullYear(),
           value: topValue,
@@ -1957,15 +1931,15 @@ var Calendar = function Calendar(_ref) {
     return [topValues, bottomValues];
   };
 
-  var getCalendarValuesForHour = function getCalendarValuesForHour() {
-    var topValues = [];
-    var bottomValues = [];
-    var topDefaultHeight = headerHeight * 0.5;
-    var dates = dateSetup.dates;
+  const getCalendarValuesForHour = () => {
+    const topValues = [];
+    const bottomValues = [];
+    const topDefaultHeight = headerHeight * 0.5;
+    const dates = dateSetup.dates;
 
-    for (var i = 0; i < dates.length; i++) {
-      var date = dates[i];
-      var bottomValue = getCachedDateTimeFormat(locale, {
+    for (let i = 0; i < dates.length; i++) {
+      const date = dates[i];
+      const bottomValue = getCachedDateTimeFormat(locale, {
         hour: "numeric"
       }).format(date);
       bottomValues.push(React__default.createElement("text", {
@@ -1977,9 +1951,9 @@ var Calendar = function Calendar(_ref) {
       }, bottomValue));
 
       if (i !== 0 && date.getDate() !== dates[i - 1].getDate()) {
-        var displayDate = dates[i - 1];
-        var topValue = getLocalDayOfWeek(displayDate, locale, "long") + ", " + displayDate.getDate() + " " + shortMonth(displayDate);
-        var topPosition = (date.getHours() - 24) / 2;
+        const displayDate = dates[i - 1];
+        const topValue = `${getLocalDayOfWeek(displayDate, locale, "long")}, ${displayDate.getDate()} ${shortMonth(displayDate)}`;
+        const topPosition = (date.getHours() - 24) / 2;
         topValues.push(React__default.createElement(TopPartOfCalendar, {
           key: topValue + displayDate.getFullYear(),
           value: topValue,
@@ -1995,22 +1969,19 @@ var Calendar = function Calendar(_ref) {
     return [topValues, bottomValues];
   };
 
-  var topValues = [];
-  var bottomValues = [];
-  var extraValues = [];
-  var tickLines = [];
+  let topValues = [];
+  let bottomValues = [];
+  let extraValues = [];
+  let tickLines = [];
 
   switch (dateSetup.viewMode) {
     case exports.ViewMode.Year:
-      var _getCalendarValuesFor = getCalendarValuesForYear();
-
-      topValues = _getCalendarValuesFor[0];
-      bottomValues = _getCalendarValuesFor[1];
+      [topValues, bottomValues] = getCalendarValuesForYear();
       break;
 
     case exports.ViewMode.Quarter:
       {
-        var r = getCalendarValuesForQuarter();
+        const r = getCalendarValuesForQuarter();
         topValues = r[0];
         bottomValues = r[1];
         extraValues = r[2] || [];
@@ -2019,27 +1990,25 @@ var Calendar = function Calendar(_ref) {
 
     case exports.ViewMode.Month:
       {
-        var _r = getCalendarValuesForMonth();
-
-        topValues = _r[0];
-        bottomValues = _r[1];
-        extraValues = _r[2] || [];
+        const r = getCalendarValuesForMonth();
+        topValues = r[0];
+        bottomValues = r[1];
+        extraValues = r[2] || [];
         break;
       }
 
     case exports.ViewMode.Week:
       {
-        var _r2 = getCalendarValuesForWeek();
-
-        topValues = _r2[0];
-        bottomValues = _r2[1];
-        extraValues = _r2[2] || [];
+        const r = getCalendarValuesForWeek();
+        topValues = r[0];
+        bottomValues = r[1];
+        extraValues = r[2] || [];
         break;
       }
 
     case exports.ViewMode.Day:
       {
-        var result = getCalendarValuesForDay();
+        const result = getCalendarValuesForDay();
         topValues = result[0];
         bottomValues = result[1];
         extraValues = result[2];
@@ -2049,17 +2018,11 @@ var Calendar = function Calendar(_ref) {
 
     case exports.ViewMode.QuarterDay:
     case exports.ViewMode.HalfDay:
-      var _getCalendarValuesFor2 = getCalendarValuesForPartOfDay();
-
-      topValues = _getCalendarValuesFor2[0];
-      bottomValues = _getCalendarValuesFor2[1];
+      [topValues, bottomValues] = getCalendarValuesForPartOfDay();
       break;
 
     case exports.ViewMode.Hour:
-      var _getCalendarValuesFor3 = getCalendarValuesForHour();
-
-      topValues = _getCalendarValuesFor3[0];
-      bottomValues = _getCalendarValuesFor3[1];
+      [topValues, bottomValues] = getCalendarValuesForHour();
   }
 
   return React__default.createElement("g", {
@@ -2095,19 +2058,17 @@ function _catch(body, recover) {
 	return result;
 }
 
-var Arrow = function Arrow(_ref) {
-  var taskFrom = _ref.taskFrom,
-      taskTo = _ref.taskTo,
-      rowHeight = _ref.rowHeight,
-      taskHeight = _ref.taskHeight,
-      arrowIndent = _ref.arrowIndent,
-      arrowColor = _ref.arrowColor,
-      dependencyType = _ref.dependencyType;
-
-  var _drawPathAndTriangle = drawPathAndTriangle(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent, dependencyType),
-      path = _drawPathAndTriangle[0],
-      trianglePoints = _drawPathAndTriangle[1];
-
+const Arrow = _ref => {
+  let {
+    taskFrom,
+    taskTo,
+    rowHeight,
+    taskHeight,
+    arrowIndent,
+    arrowColor,
+    dependencyType
+  } = _ref;
+  let [path, trianglePoints] = drawPathAndTriangle(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent, dependencyType);
   return React__default.createElement("g", {
     className: "arrow"
   }, React__default.createElement("path", {
@@ -2121,40 +2082,40 @@ var Arrow = function Arrow(_ref) {
   }));
 };
 
-var drawPathAndTriangle = function drawPathAndTriangle(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent, dependencyType) {
-  var indexCompare = taskFrom.index > taskTo.index ? -1 : 1;
-  var taskToEndY = taskTo.y + taskHeight / 2;
-  var verticalOffset = indexCompare * (rowHeight / 2);
+const drawPathAndTriangle = (taskFrom, taskTo, rowHeight, taskHeight, arrowIndent, dependencyType) => {
+  const indexCompare = taskFrom.index > taskTo.index ? -1 : 1;
+  const taskToEndY = taskTo.y + taskHeight / 2;
+  const verticalOffset = indexCompare * (rowHeight / 2);
 
-  var minX = function minX(t) {
+  const minX = t => {
     if (t.plannedSegments && t.plannedSegments.length > 0) {
-      var p = t.plannedSegments[0].x1;
+      const p = t.plannedSegments[0].x1;
       if (t.actualSegments && t.actualSegments.length > 0) return Math.min(p, t.actualSegments[0].x1);
       return p;
     }
 
     if (t.actualSegments && t.actualSegments.length > 0) return t.actualSegments[0].x1;
-    var candidates = [];
+    const candidates = [];
     if (t.x2 > t.x1) candidates.push(t.x1);
     if (t.actualx2 > t.actualx1) candidates.push(t.actualx1);
-    return candidates.length > 0 ? Math.min.apply(Math, candidates) : 0;
+    return candidates.length > 0 ? Math.min(...candidates) : 0;
   };
 
-  var maxX = function maxX(t) {
+  const maxX = t => {
     if (t.plannedSegments && t.plannedSegments.length > 0) {
-      var p = t.plannedSegments[t.plannedSegments.length - 1].x2;
+      const p = t.plannedSegments[t.plannedSegments.length - 1].x2;
       if (t.actualSegments && t.actualSegments.length > 0) return Math.max(p, t.actualSegments[t.actualSegments.length - 1].x2);
       return p;
     }
 
     if (t.actualSegments && t.actualSegments.length > 0) return t.actualSegments[t.actualSegments.length - 1].x2;
-    var candidates = [];
+    const candidates = [];
     if (t.x2 > t.x1) candidates.push(t.x2);
     if (t.actualx2 > t.actualx1) candidates.push(t.actualx2);
-    return candidates.length > 0 ? Math.max.apply(Math, candidates) : 0;
+    return candidates.length > 0 ? Math.max(...candidates) : 0;
   };
 
-  var fromPoint, toPoint;
+  let fromPoint, toPoint;
 
   switch (dependencyType) {
     case "SS":
@@ -2178,35 +2139,51 @@ var drawPathAndTriangle = function drawPathAndTriangle(taskFrom, taskTo, rowHeig
       break;
   }
 
-  var arrowPoints = function arrowPoints(x, y, right) {
+  const arrowPoints = function (x, y, right) {
     if (right === void 0) {
       right = true;
     }
 
-    return right ? x + "," + y + " " + (x - 5) + "," + (y - 5) + " " + (x - 5) + "," + (y + 5) : x + "," + y + " " + (x + 5) + "," + (y - 5) + " " + (x + 5) + "," + (y + 5);
+    return right ? `${x},${y} ${x - 5},${y - 5} ${x - 5},${y + 5}` : `${x},${y} ${x + 5},${y - 5} ${x + 5},${y + 5}`;
   };
 
-  var path;
-  var trianglePoints;
+  let path;
+  let trianglePoints;
 
   switch (dependencyType) {
     case "SS":
-      path = "M " + fromPoint + " " + (taskFrom.y + taskHeight / 2) + "\n              H " + (fromPoint + Math.min(toPoint - fromPoint, 0) - 2 * arrowIndent) + "\n              V " + taskToEndY + "\n              H " + (toPoint - 5);
+      path = `M ${fromPoint} ${taskFrom.y + taskHeight / 2}
+              H ${fromPoint + Math.min(toPoint - fromPoint, 0) - 2 * arrowIndent}
+              V ${taskToEndY}
+              H ${toPoint - 5}`;
       trianglePoints = arrowPoints(toPoint, taskToEndY, true);
       break;
 
     case "SF":
-      path = "M " + fromPoint + " " + (taskFrom.y + taskHeight / 2) + "\n              H " + (fromPoint - 2 * arrowIndent) + "\n              V " + (taskFrom.y + taskHeight / 2 + verticalOffset) + "\n                " + (fromPoint - toPoint > 4 * arrowIndent ? "" : "H " + (toPoint + 2 * arrowIndent)) + "\n              V " + taskToEndY + "\n              H " + (toPoint + 5);
+      path = `M ${fromPoint} ${taskFrom.y + taskHeight / 2}
+              H ${fromPoint - 2 * arrowIndent}
+              V ${taskFrom.y + taskHeight / 2 + verticalOffset}
+                ${fromPoint - toPoint > 4 * arrowIndent ? "" : `H ${toPoint + 2 * arrowIndent}`}
+              V ${taskToEndY}
+              H ${toPoint + 5}`;
       trianglePoints = arrowPoints(toPoint, taskToEndY, false);
       break;
 
     case "FS":
-      path = "M " + fromPoint + " " + (taskFrom.y + taskHeight / 2) + "\n              H " + (fromPoint + 2 * arrowIndent) + "\n              V " + (taskFrom.y + taskHeight / 2 + verticalOffset) + "\n                " + (toPoint - fromPoint > 4 * arrowIndent ? "" : "H " + (toPoint - 2 * arrowIndent)) + "\n              V " + taskToEndY + "\n              H " + (toPoint - 5);
+      path = `M ${fromPoint} ${taskFrom.y + taskHeight / 2}
+              H ${fromPoint + 2 * arrowIndent}
+              V ${taskFrom.y + taskHeight / 2 + verticalOffset}
+                ${toPoint - fromPoint > 4 * arrowIndent ? "" : `H ${toPoint - 2 * arrowIndent}`}
+              V ${taskToEndY}
+              H ${toPoint - 5}`;
       trianglePoints = arrowPoints(toPoint, taskToEndY, true);
       break;
 
     case "FF":
-      path = "M " + fromPoint + " " + (taskFrom.y + taskHeight / 2) + "\n              H " + (fromPoint + Math.max(toPoint - fromPoint, 0) + 2 * arrowIndent) + "\n              V " + taskToEndY + "\n              H " + (toPoint + 5);
+      path = `M ${fromPoint} ${taskFrom.y + taskHeight / 2}
+              H ${fromPoint + Math.max(toPoint - fromPoint, 0) + 2 * arrowIndent}
+              V ${taskToEndY}
+              H ${toPoint + 5}`;
       trianglePoints = arrowPoints(toPoint, taskToEndY, false);
       break;
   }
@@ -2709,60 +2686,59 @@ var sortTasks = function sortTasks(taskA, taskB) {
   }
 };
 
-var BarDisplay = function BarDisplay(_ref) {
-  var x = _ref.x,
-      y = _ref.y,
-      type = _ref.type,
-      width = _ref.width,
-      height = _ref.height,
-      isSelected = _ref.isSelected,
-      progressX = _ref.progressX,
-      progressWidth = _ref.progressWidth,
-      barCornerRadius = _ref.barCornerRadius,
-      styles = _ref.styles,
-      segments = _ref.segments,
-      onMouseDown = _ref.onMouseDown;
-
-  var getProcessColor = function getProcessColor() {
+const BarDisplay = _ref => {
+  let {
+    x,
+    y,
+    type,
+    width,
+    height,
+    isSelected,
+    progressX,
+    progressWidth,
+    barCornerRadius,
+    styles,
+    segments,
+    onMouseDown
+  } = _ref;
+
+  const getProcessColor = () => {
     return isSelected ? styles.progressSelectedColor : styles.progressColor;
   };
 
-  var getBarColor = function getBarColor() {
+  const getBarColor = () => {
     return isSelected ? styles.backgroundSelectedColor : styles.backgroundColor;
   };
 
   if (type === "planned") {
     if (segments && segments.length > 0) {
-      var totalWidth = width;
+      const totalWidth = width;
       return React__default.createElement("g", {
         onMouseDown: onMouseDown
-      }, segments.map(function (seg, idx) {
-        return React__default.createElement("rect", {
-          key: "seg-" + idx,
-          x: seg.x1,
-          width: seg.x2 - seg.x1,
-          y: y,
-          height: height,
-          ry: barCornerRadius,
-          rx: barCornerRadius,
-          fill: getBarColor(),
-          strokeWidth: 2,
-          stroke: styles.criticalPathColor
-        });
-      }), progressWidth > 0 && function () {
-        var rects = [];
-        var remaining = progressWidth;
-
-        for (var _iterator = _createForOfIteratorHelperLoose(segments), _step; !(_step = _iterator()).done;) {
-          var seg = _step.value;
+      }, segments.map((seg, idx) => React__default.createElement("rect", {
+        key: `seg-${idx}`,
+        x: seg.x1,
+        width: seg.x2 - seg.x1,
+        y: y,
+        height: height,
+        ry: barCornerRadius,
+        rx: barCornerRadius,
+        fill: getBarColor(),
+        strokeWidth: 2,
+        stroke: styles.criticalPathColor
+      })), progressWidth > 0 && (() => {
+        const rects = [];
+        let remaining = progressWidth;
+
+        for (const seg of segments) {
           if (remaining <= 0) break;
-          var segW = seg.x2 - seg.x1;
-          var ratio = totalWidth > 0 ? segW / totalWidth : 0;
-          var pw = Math.min(remaining, progressWidth * ratio);
+          const segW = seg.x2 - seg.x1;
+          const ratio = totalWidth > 0 ? segW / totalWidth : 0;
+          const pw = Math.min(remaining, progressWidth * ratio);
 
           if (pw > 0) {
             rects.push(React__default.createElement("rect", {
-              key: "prog-" + seg.x1,
+              key: `prog-${seg.x1}`,
               x: seg.x1,
               width: pw,
               y: y,
@@ -2776,7 +2752,7 @@ var BarDisplay = function BarDisplay(_ref) {
         }
 
         return rects;
-      }());
+      })());
     }
 
     return React__default.createElement("g", {
@@ -2804,18 +2780,16 @@ var BarDisplay = function BarDisplay(_ref) {
     if (segments && segments.length > 0) {
       return React__default.createElement("g", {
         onMouseDown: onMouseDown
-      }, segments.map(function (seg, idx) {
-        return React__default.createElement("rect", {
-          key: "aseg-" + idx,
-          x: seg.x1,
-          width: seg.x2 - seg.x1,
-          y: y,
-          height: height,
-          ry: barCornerRadius,
-          rx: barCornerRadius,
-          fill: styles.taskProgressColor
-        });
-      }), React__default.createElement("rect", {
+      }, segments.map((seg, idx) => React__default.createElement("rect", {
+        key: `aseg-${idx}`,
+        x: seg.x1,
+        width: seg.x2 - seg.x1,
+        y: y,
+        height: height,
+        ry: barCornerRadius,
+        rx: barCornerRadius,
+        fill: styles.taskProgressColor
+      })), React__default.createElement("rect", {
         x: progressX,
         width: progressWidth,
         y: y,
@@ -2850,13 +2824,15 @@ var BarDisplay = function BarDisplay(_ref) {
 
 var styles$7 = {"barWrapper":"_KxSXS","barHandle":"_3w_5u","barBackground":"_31ERP"};
 
-var BarDateHandle = function BarDateHandle(_ref) {
-  var x = _ref.x,
-      y = _ref.y,
-      width = _ref.width,
-      height = _ref.height,
-      barCornerRadius = _ref.barCornerRadius,
-      onMouseDown = _ref.onMouseDown;
+const BarDateHandle = _ref => {
+  let {
+    x,
+    y,
+    width,
+    height,
+    barCornerRadius,
+    onMouseDown
+  } = _ref;
   return React__default.createElement("rect", {
     x: x,
     y: y,
@@ -2869,28 +2845,28 @@ var BarDateHandle = function BarDateHandle(_ref) {
   });
 };
 
-var BarProgressHandle = function BarProgressHandle(_ref) {
-  _objectDestructuringEmpty(_ref);
-
+const BarProgressHandle = _ref => {
   return React__default.createElement("div", null);
 };
 
-var Bar = function Bar(_ref) {
-  var task = _ref.task,
-      isProgressChangeable = _ref.isProgressChangeable,
-      isDateChangeable = _ref.isDateChangeable,
-      rtl = _ref.rtl,
-      type = _ref.type,
-      onEventStart = _ref.onEventStart,
-      isSelected = _ref.isSelected;
-  var progressPoint = getProgressPoint(+!rtl * task.progressWidth + task.progressX, task.y, task.height);
-  var handleHeight = task.height / 2 - 1;
-  var plannedSegs = task.plannedSegments;
-  var plannedLeftHandleX = plannedSegs !== null && plannedSegs !== void 0 && plannedSegs.length ? plannedSegs[0].x1 : task.x1;
-  var plannedRightHandleX = plannedSegs !== null && plannedSegs !== void 0 && plannedSegs.length ? plannedSegs[plannedSegs.length - 1].x2 : task.x2;
-  var actualSegs = task.actualSegments;
-  var actualLeftHandleX = actualSegs !== null && actualSegs !== void 0 && actualSegs.length ? actualSegs[0].x1 : task.actualx1;
-  var actualRightHandleX = actualSegs !== null && actualSegs !== void 0 && actualSegs.length ? actualSegs[actualSegs.length - 1].x2 : task.actualx2;
+const Bar = _ref => {
+  let {
+    task,
+    isProgressChangeable,
+    isDateChangeable,
+    rtl,
+    type,
+    onEventStart,
+    isSelected
+  } = _ref;
+  const progressPoint = getProgressPoint(+!rtl * task.progressWidth + task.progressX, task.y, task.height);
+  const handleHeight = task.height / 2 - 1;
+  const plannedSegs = task.plannedSegments;
+  const plannedLeftHandleX = plannedSegs !== null && plannedSegs !== void 0 && plannedSegs.length ? plannedSegs[0].x1 : task.x1;
+  const plannedRightHandleX = plannedSegs !== null && plannedSegs !== void 0 && plannedSegs.length ? plannedSegs[plannedSegs.length - 1].x2 : task.x2;
+  const actualSegs = task.actualSegments;
+  const actualLeftHandleX = actualSegs !== null && actualSegs !== void 0 && actualSegs.length ? actualSegs[0].x1 : task.actualx1;
+  const actualRightHandleX = actualSegs !== null && actualSegs !== void 0 && actualSegs.length ? actualSegs[actualSegs.length - 1].x2 : task.actualx2;
 
   if (type == "planned") {
     if ((task === null || task === void 0 ? void 0 : task.x1) >= 0 && (task === null || task === void 0 ? void 0 : task.x2) >= 0 && task.x2 - task.x1 >= 0) return React__default.createElement("g", {
@@ -2916,7 +2892,7 @@ var Bar = function Bar(_ref) {
       styles: task.styles,
       isSelected: isSelected,
       segments: task.plannedSegments,
-      onMouseDown: function onMouseDown(e) {
+      onMouseDown: e => {
         isDateChangeable && onEventStart("move", task, e, "planned");
       }
     }), React__default.createElement("g", {
@@ -2927,7 +2903,7 @@ var Bar = function Bar(_ref) {
       width: task.handleWidth,
       height: handleHeight,
       barCornerRadius: task.barCornerRadius,
-      onMouseDown: function onMouseDown(e) {
+      onMouseDown: e => {
         onEventStart("start", task, e, "planned");
       }
     }), React__default.createElement(BarDateHandle, {
@@ -2936,12 +2912,12 @@ var Bar = function Bar(_ref) {
       width: task.handleWidth,
       height: handleHeight,
       barCornerRadius: task.barCornerRadius,
-      onMouseDown: function onMouseDown(e) {
+      onMouseDown: e => {
         onEventStart("end", task, e, "planned");
       }
     })), isProgressChangeable && React__default.createElement(BarProgressHandle, {
       progressPoint: progressPoint,
-      onMouseDown: function onMouseDown(e) {
+      onMouseDown: e => {
         onEventStart("progress", task, e, "planned");
       }
     })));else return React__default.createElement("g", {
@@ -2972,7 +2948,7 @@ var Bar = function Bar(_ref) {
       styles: task.styles,
       isSelected: isSelected,
       segments: task.actualSegments,
-      onMouseDown: function onMouseDown(e) {
+      onMouseDown: e => {
         isDateChangeable && onEventStart("move", task, e, "actual");
       }
     }), React__default.createElement("g", {
@@ -2983,7 +2959,7 @@ var Bar = function Bar(_ref) {
       width: task.handleWidth,
       height: handleHeight,
       barCornerRadius: task.barCornerRadius,
-      onMouseDown: function onMouseDown(e) {
+      onMouseDown: e => {
         onEventStart("start", task, e, "actual");
       }
     }), React__default.createElement(BarDateHandle, {
@@ -2992,12 +2968,12 @@ var Bar = function Bar(_ref) {
       width: task.handleWidth,
       height: handleHeight,
       barCornerRadius: task.barCornerRadius,
-      onMouseDown: function onMouseDown(e) {
+      onMouseDown: e => {
         onEventStart("end", task, e, "actual");
       }
     })), isProgressChangeable && React__default.createElement(BarProgressHandle, {
       progressPoint: progressPoint,
-      onMouseDown: function onMouseDown(e) {
+      onMouseDown: e => {
         onEventStart("progress", task, e, "actual");
       }
     })));
@@ -3009,14 +2985,16 @@ var Bar = function Bar(_ref) {
   }
 };
 
-var BarSmall = function BarSmall(_ref) {
-  var task = _ref.task,
-      type = _ref.type,
-      isProgressChangeable = _ref.isProgressChangeable,
-      isDateChangeable = _ref.isDateChangeable,
-      onEventStart = _ref.onEventStart,
-      isSelected = _ref.isSelected;
-  var progressPoint = getProgressPoint(task.progressWidth + task.x1, task.y, task.height);
+const BarSmall = _ref => {
+  let {
+    task,
+    type,
+    isProgressChangeable,
+    isDateChangeable,
+    onEventStart,
+    isSelected
+  } = _ref;
+  const progressPoint = getProgressPoint(task.progressWidth + task.x1, task.y, task.height);
   return React__default.createElement("g", {
     className: styles$7.barWrapper,
     tabIndex: 0
@@ -3033,14 +3011,14 @@ var BarSmall = function BarSmall(_ref) {
     barCornerRadius: task.barCornerRadius,
     styles: task.styles,
     isSelected: isSelected,
-    onMouseDown: function onMouseDown(e) {
+    onMouseDown: e => {
       isDateChangeable && onEventStart("move", task, e);
     }
   }), React__default.createElement("g", {
     className: "handleGroup"
   }, isProgressChangeable && React__default.createElement(BarProgressHandle, {
     progressPoint: progressPoint,
-    onMouseDown: function onMouseDown(e) {
+    onMouseDown: e => {
       onEventStart("progress", task, e);
     }
   })));
@@ -3048,14 +3026,17 @@ var BarSmall = function BarSmall(_ref) {
 
 var styles$8 = {"milestoneWrapper":"_RRr13","milestoneBackground":"_2P2B1"};
 
-var Milestone = function Milestone(_ref) {
-  var task = _ref.task,
-      isDateChangeable = _ref.isDateChangeable,
-      onEventStart = _ref.onEventStart,
-      isSelected = _ref.isSelected;
-  var transform = "rotate(45 " + (task.x1 + task.height * 0.356) + " \n    " + (task.y + task.height * 0.85) + ")";
-
-  var getBarColor = function getBarColor() {
+const Milestone = _ref => {
+  let {
+    task,
+    isDateChangeable,
+    onEventStart,
+    isSelected
+  } = _ref;
+  const transform = `rotate(45 ${task.x1 + task.height * 0.356} 
+    ${task.y + task.height * 0.85})`;
+
+  const getBarColor = () => {
     return isSelected ? task.styles.backgroundSelectedColor : task.styles.backgroundColor;
   };
 
@@ -3072,10 +3053,10 @@ var Milestone = function Milestone(_ref) {
     ry: task.barCornerRadius,
     transform: transform,
     className: styles$8.milestoneBackground,
-    onMouseDown: function onMouseDown(e) {
+    onMouseDown: e => {
       isDateChangeable && onEventStart("move", task, e, "planned");
     },
-    onDoubleClick: function onDoubleClick(e) {
+    onDoubleClick: e => {
       onEventStart("dblclick", task, e);
     }
   }));
@@ -3083,14 +3064,16 @@ var Milestone = function Milestone(_ref) {
 
 var styles$9 = {"projectWrapper":"_1KJ6x","projectBackground":"_2RbVy","projectTop":"_2pZMF"};
 
-var Project = function Project(_ref) {
-  var task = _ref.task,
-      isSelected = _ref.isSelected;
-  var barColor = isSelected ? task.styles.backgroundSelectedColor : task.styles.backgroundColor;
-  var processColor = isSelected ? task.styles.progressSelectedColor : task.styles.progressColor;
-  var projectWith = task.x2 - task.x1;
-  var projectLeftTriangle = [task.x1, task.y + task.height / 2 - 1, task.x1, task.y + task.height, task.x1 + 15, task.y + task.height / 2 - 1].join(",");
-  var projectRightTriangle = [task.x2, task.y + task.height / 2 - 1, task.x2, task.y + task.height, task.x2 - 15, task.y + task.height / 2 - 1].join(",");
+const Project = _ref => {
+  let {
+    task,
+    isSelected
+  } = _ref;
+  const barColor = isSelected ? task.styles.backgroundSelectedColor : task.styles.backgroundColor;
+  const processColor = isSelected ? task.styles.progressSelectedColor : task.styles.progressColor;
+  const projectWith = task.x2 - task.x1;
+  const projectLeftTriangle = [task.x1, task.y + task.height / 2 - 1, task.x1, task.y + task.height, task.x1 + 15, task.y + task.height / 2 - 1].join(",");
+  const projectRightTriangle = [task.x2, task.y + task.height / 2 - 1, task.x2, task.y + task.height, task.x2 - 15, task.y + task.height / 2 - 1].join(",");
   return React__default.createElement("g", {
     tabIndex: 0,
     className: styles$9.projectWrapper
@@ -3131,18 +3114,16 @@ var Project = function Project(_ref) {
   }));
 };
 
-var TaskItem = function TaskItem(props) {
-  var _props = _extends({}, props),
-      task = _props.task,
-      isDelete = _props.isDelete,
-      isSelected = _props.isSelected,
-      onEventStart = _props.onEventStart;
-
-  var _useState = React.useState([React__default.createElement("div", null)]),
-      taskItem = _useState[0],
-      setTaskItem = _useState[1];
-
-  React.useEffect(function () {
+const TaskItem = props => {
+  const {
+    task,
+    isDelete,
+    isSelected,
+    onEventStart
+  } = { ...props
+  };
+  const [taskItem, setTaskItem] = React.useState([React__default.createElement("div", null)]);
+  React.useEffect(() => {
     switch (task.typeInternal) {
       case "milestone":
         if (task.x1 >= 0 && task.actualx1 >= 0) setTaskItem([React__default.createElement(Milestone, Object.assign({}, props))]);else setTaskItem([]);
@@ -3158,27 +3139,27 @@ var TaskItem = function TaskItem(props) {
 
       default:
         {
-          var _taskItem = [];
+          let taskItem = [];
 
           if ((task === null || task === void 0 ? void 0 : task.x1) >= 0 && (task === null || task === void 0 ? void 0 : task.x2) >= 0) {
-            _taskItem.push(React__default.createElement(Bar, Object.assign({}, props, {
+            taskItem.push(React__default.createElement(Bar, Object.assign({}, props, {
               type: "planned"
             })));
           }
 
           if ((task === null || task === void 0 ? void 0 : task.actualx1) >= 0 && (task === null || task === void 0 ? void 0 : task.actualx2) >= 0) {
-            _taskItem.push(React__default.createElement(Bar, Object.assign({}, props, {
+            taskItem.push(React__default.createElement(Bar, Object.assign({}, props, {
               type: "actual"
             })));
           }
 
-          setTaskItem(_taskItem);
+          setTaskItem(taskItem);
         }
         break;
     }
   }, [task, isSelected]);
   return React__default.createElement("g", null, React__default.createElement("g", {
-    onKeyDown: function onKeyDown(e) {
+    onKeyDown: e => {
       switch (e.key) {
         case "Delete":
           {
@@ -3189,20 +3170,20 @@ var TaskItem = function TaskItem(props) {
 
       e.stopPropagation();
     },
-    onMouseEnter: function onMouseEnter(e) {
+    onMouseEnter: e => {
       onEventStart("mouseenter", task, e, "planned");
     },
-    onMouseLeave: function onMouseLeave(e) {
+    onMouseLeave: e => {
       onEventStart("mouseleave", task, e, "planned");
     },
-    onDoubleClick: function onDoubleClick(e) {
+    onDoubleClick: e => {
       onEventStart("dblclick", task, e, "planned");
     },
-    onClick: function onClick(e) {
+    onClick: e => {
       onEventStart("click", task, e, "planned");
     }
   }, taskItem[0]), React__default.createElement("g", {
-    onKeyDown: function onKeyDown(e) {
+    onKeyDown: e => {
       switch (e.key) {
         case "Delete":
           {
@@ -3213,177 +3194,152 @@ var TaskItem = function TaskItem(props) {
 
       e.stopPropagation();
     },
-    onMouseEnter: function onMouseEnter(e) {
+    onMouseEnter: e => {
       onEventStart("mouseenter", task, e, "actual");
     },
-    onMouseLeave: function onMouseLeave(e) {
+    onMouseLeave: e => {
       onEventStart("mouseleave", task, e, "actual");
     },
-    onDoubleClick: function onDoubleClick(e) {
+    onDoubleClick: e => {
       onEventStart("dblclick", task, e, "actual");
     },
-    onClick: function onClick(e) {
+    onClick: e => {
       onEventStart("click", task, e, "actual");
     }
   }, taskItem[1]));
 };
 
-var TaskGanttContent = function TaskGanttContent(_ref) {
+const TaskGanttContent = _ref => {
   var _svg$current;
 
-  var tasks = _ref.tasks,
-      dates = _ref.dates,
-      ganttEvent = _ref.ganttEvent,
-      selectedTask = _ref.selectedTask,
-      rowHeight = _ref.rowHeight,
-      columnWidth = _ref.columnWidth,
-      timeStep = _ref.timeStep,
-      svg = _ref.svg,
-      taskHeight = _ref.taskHeight,
-      arrowIndent = _ref.arrowIndent,
-      fontFamily = _ref.fontFamily,
-      fontSize = _ref.fontSize,
-      rtl = _ref.rtl,
-      _ref$virtualItems = _ref.virtualItems,
-      virtualItems = _ref$virtualItems === void 0 ? [] : _ref$virtualItems,
-      setGanttEvent = _ref.setGanttEvent,
-      setFailedTask = _ref.setFailedTask,
-      setSelectedTask = _ref.setSelectedTask,
-      onBarTasksUpdate = _ref.onBarTasksUpdate,
-      onDateChange = _ref.onDateChange,
-      onProgressChange = _ref.onProgressChange,
-      onDoubleClick = _ref.onDoubleClick,
-      onClick = _ref.onClick,
-      onDelete = _ref.onDelete,
-      onCalendarError = _ref.onCalendarError,
-      projectCalendar = _ref.projectCalendar,
-      visibleStartY = _ref.visibleStartY,
-      visibleEndY = _ref.visibleEndY,
-      sliderTime = _ref.sliderTime;
-  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),
-      xStep = _useState[0],
-      setXStep = _useState[1];
-
-  var _useState2 = React.useState(0),
-      initEventX1Delta = _useState2[0],
-      setInitEventX1Delta = _useState2[1];
-
-  var _useState3 = React.useState(false),
-      isMoving = _useState3[0],
-      setIsMoving = _useState3[1];
-
-  React.useEffect(function () {
+  let {
+    tasks,
+    dates,
+    ganttEvent,
+    selectedTask,
+    rowHeight,
+    columnWidth,
+    timeStep,
+    svg,
+    taskHeight,
+    arrowIndent,
+    fontFamily,
+    fontSize,
+    rtl,
+    virtualItems = [],
+    setGanttEvent,
+    setFailedTask,
+    setSelectedTask,
+    onBarTasksUpdate,
+    onDateChange,
+    onProgressChange,
+    onDoubleClick,
+    onClick,
+    onDelete,
+    onCalendarError,
+    projectCalendar,
+    visibleStartY,
+    visibleEndY,
+    sliderTime
+  } = _ref;
+  const point = svg === null || svg === void 0 ? void 0 : (_svg$current = svg.current) === null || _svg$current === void 0 ? void 0 : _svg$current.createSVGPoint();
+  const [xStep, setXStep] = React.useState(0);
+  const [initEventX1Delta, setInitEventX1Delta] = React.useState(0);
+  const [isMoving, setIsMoving] = React.useState(false);
+  React.useEffect(() => {
     if (dates.length < 2) {
       setXStep(timeStep * columnWidth / 86400000);
       return;
     }
 
-    var dateDelta = dates[1].getTime() - dates[0].getTime() - dates[1].getTimezoneOffset() * 60 * 1000 + dates[0].getTimezoneOffset() * 60 * 1000;
-    var newXStep = timeStep * columnWidth / dateDelta;
+    const dateDelta = dates[1].getTime() - dates[0].getTime() - dates[1].getTimezoneOffset() * 60 * 1000 + dates[0].getTimezoneOffset() * 60 * 1000;
+    const newXStep = timeStep * columnWidth / dateDelta;
     setXStep(newXStep);
   }, [columnWidth, dates, timeStep]);
-  React.useEffect(function () {
-    var handleMouseMove = function handleMouseMove(event) {
+  React.useEffect(() => {
+    const handleMouseMove = function (event) {
       try {
         var _svg$current$getScree;
 
         if (!ganttEvent.changedTask || !point || !(svg !== null && svg !== void 0 && svg.current)) return Promise.resolve();
         event.preventDefault();
         point.x = event.clientX;
-        var cursor = point.matrixTransform(svg === null || svg === void 0 ? void 0 : (_svg$current$getScree = svg.current.getScreenCTM()) === null || _svg$current$getScree === void 0 ? void 0 : _svg$current$getScree.inverse());
-
-        var _handleTaskBySVGMouse = handleTaskBySVGMouseEvent(cursor.x, ganttEvent.action, ganttEvent.changedTask, ganttEvent.type, xStep, timeStep, initEventX1Delta, rtl),
-            isChanged = _handleTaskBySVGMouse.isChanged,
-            changedTask = _handleTaskBySVGMouse.changedTask;
+        const cursor = point.matrixTransform(svg === null || svg === void 0 ? void 0 : (_svg$current$getScree = svg.current.getScreenCTM()) === null || _svg$current$getScree === void 0 ? void 0 : _svg$current$getScree.inverse());
+        const {
+          isChanged,
+          changedTask
+        } = handleTaskBySVGMouseEvent(cursor.x, ganttEvent.action, ganttEvent.changedTask, ganttEvent.type, xStep, timeStep, initEventX1Delta, rtl);
 
         if (isChanged) {
-          var finalTask = _extends({}, changedTask);
-
-          var dragType = ganttEvent.type;
+          let finalTask = { ...changedTask
+          };
+          const dragType = ganttEvent.type;
 
           if (changedTask.calendar && (ganttEvent.action === "end" || ganttEvent.action === "start" || ganttEvent.action === "move")) {
-            var cal = finalTask.calendar;
+            const cal = finalTask.calendar;
 
             if (dragType === "actual") {
               if (ganttEvent.action === "end") {
-                var snapped = snapToWorkingTime(finalTask.actualEnd, cal, "forward");
+                const snapped = snapToWorkingTime(finalTask.actualEnd, cal, "forward");
                 finalTask.actualEnd = snapped;
                 finalTask.actualx2 = taskXCoordinate(snapped, dates, columnWidth);
               } else if (ganttEvent.action === "start") {
-                var _snapped = snapToWorkingTime(finalTask.actualStart, cal, "forward");
-
-                finalTask.actualStart = _snapped;
-                finalTask.actualx1 = taskXCoordinate(_snapped, dates, columnWidth);
+                const snapped = snapToWorkingTime(finalTask.actualStart, cal, "forward");
+                finalTask.actualStart = snapped;
+                finalTask.actualx1 = taskXCoordinate(snapped, dates, columnWidth);
               } else {
-                var _snapped2 = snapToWorkingTime(finalTask.actualStart, cal, "forward");
-
-                var delta = _snapped2.getTime() - finalTask.actualStart.getTime();
-                finalTask.actualStart = _snapped2;
+                const snapped = snapToWorkingTime(finalTask.actualStart, cal, "forward");
+                const delta = snapped.getTime() - finalTask.actualStart.getTime();
+                finalTask.actualStart = snapped;
                 finalTask.actualEnd = new Date(finalTask.actualEnd.getTime() + delta);
                 finalTask.actualx1 = taskXCoordinate(finalTask.actualStart, dates, columnWidth);
                 finalTask.actualx2 = taskXCoordinate(finalTask.actualEnd, dates, columnWidth);
               }
 
-              var actEnd = addToDate(startOfDate(finalTask.actualEnd, "day"), 1, "day");
-              var actIntervals = getWorkingIntervals(finalTask.actualStart, actEnd, cal);
-              var actSegs = actIntervals.map(function (iv) {
-                return {
-                  x1: taskXCoordinate(iv.start, dates, columnWidth),
-                  x2: taskXCoordinate(iv.end, dates, columnWidth)
-                };
-              }).filter(function (s) {
-                return s.x2 > s.x1;
-              });
+              const actEnd = addToDate(startOfDate(finalTask.actualEnd, "day"), 1, "day");
+              const actIntervals = getWorkingIntervals(finalTask.actualStart, actEnd, cal);
+              const actSegs = actIntervals.map(iv => ({
+                x1: taskXCoordinate(iv.start, dates, columnWidth),
+                x2: taskXCoordinate(iv.end, dates, columnWidth)
+              })).filter(s => s.x2 > s.x1);
               finalTask.actualSegments = actSegs.length > 0 ? actSegs : undefined;
-              var actDays = Math.max(1, Math.round((finalTask.actualEnd.getTime() - finalTask.actualStart.getTime()) / (1000 * 60 * 60 * 24)));
+              const actDays = Math.max(1, Math.round((finalTask.actualEnd.getTime() - finalTask.actualStart.getTime()) / (1000 * 60 * 60 * 24)));
               finalTask.actualDuration = actDays;
             } else {
               if (ganttEvent.action === "end") {
-                var _snapped3 = snapToWorkingTime(finalTask.end, cal, "forward");
-
-                finalTask.end = _snapped3;
-                finalTask.x2 = taskXCoordinate(_snapped3, dates, columnWidth);
+                const snapped = snapToWorkingTime(finalTask.end, cal, "forward");
+                finalTask.end = snapped;
+                finalTask.x2 = taskXCoordinate(snapped, dates, columnWidth);
               } else if (ganttEvent.action === "start") {
-                var _snapped4 = snapToWorkingTime(finalTask.start, cal, "forward");
-
-                finalTask.start = _snapped4;
-                finalTask.x1 = taskXCoordinate(_snapped4, dates, columnWidth);
+                const snapped = snapToWorkingTime(finalTask.start, cal, "forward");
+                finalTask.start = snapped;
+                finalTask.x1 = taskXCoordinate(snapped, dates, columnWidth);
               } else {
-                var _snapped5 = snapToWorkingTime(finalTask.start, cal, "forward");
-
-                var _delta = _snapped5.getTime() - finalTask.start.getTime();
-
-                finalTask.start = _snapped5;
-                finalTask.end = new Date(finalTask.end.getTime() + _delta);
+                const snapped = snapToWorkingTime(finalTask.start, cal, "forward");
+                const delta = snapped.getTime() - finalTask.start.getTime();
+                finalTask.start = snapped;
+                finalTask.end = new Date(finalTask.end.getTime() + delta);
                 finalTask.x1 = taskXCoordinate(finalTask.start, dates, columnWidth);
                 finalTask.x2 = taskXCoordinate(finalTask.end, dates, columnWidth);
               }
 
-              var planEnd = addToDate(startOfDate(finalTask.end, "day"), 1, "day");
-              var planIntervals = getWorkingIntervals(finalTask.start, planEnd, cal);
-              var planSegs = planIntervals.map(function (iv) {
-                return {
-                  x1: taskXCoordinate(iv.start, dates, columnWidth),
-                  x2: taskXCoordinate(iv.end, dates, columnWidth)
-                };
-              }).filter(function (s) {
-                return s.x2 > s.x1;
-              });
+              const planEnd = addToDate(startOfDate(finalTask.end, "day"), 1, "day");
+              const planIntervals = getWorkingIntervals(finalTask.start, planEnd, cal);
+              const planSegs = planIntervals.map(iv => ({
+                x1: taskXCoordinate(iv.start, dates, columnWidth),
+                x2: taskXCoordinate(iv.end, dates, columnWidth)
+              })).filter(s => s.x2 > s.x1);
               finalTask.plannedSegments = planSegs.length > 0 ? planSegs : undefined;
-              var planDays = Math.max(1, Math.round((finalTask.end.getTime() - finalTask.start.getTime()) / (1000 * 60 * 60 * 24)));
+              const planDays = Math.max(1, Math.round((finalTask.end.getTime() - finalTask.start.getTime()) / (1000 * 60 * 60 * 24)));
               finalTask.plannedDuration = planDays;
             }
           } else {
             if (dragType === "actual") {
-              var _actDays = Math.max(1, Math.round((finalTask.actualEnd.getTime() - finalTask.actualStart.getTime()) / (1000 * 60 * 60 * 24)));
-
-              finalTask.actualDuration = _actDays;
+              const actDays = Math.max(1, Math.round((finalTask.actualEnd.getTime() - finalTask.actualStart.getTime()) / (1000 * 60 * 60 * 24)));
+              finalTask.actualDuration = actDays;
             } else {
-              var _planDays = Math.max(1, Math.round((finalTask.end.getTime() - finalTask.start.getTime()) / (1000 * 60 * 60 * 24)));
-
-              finalTask.plannedDuration = _planDays;
+              const planDays = Math.max(1, Math.round((finalTask.end.getTime() - finalTask.start.getTime()) / (1000 * 60 * 60 * 24)));
+              finalTask.plannedDuration = planDays;
             }
           }
 
@@ -3400,41 +3356,42 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
       }
     };
 
-    var handleMouseUp = function handleMouseUp(event) {
+    const handleMouseUp = function (event) {
       try {
         var _svg$current$getScree2;
 
-        var _temp6 = function _temp6() {
+        function _temp5() {
           if (!operationSuccess) {
             setFailedTask(originalSelectedTask);
           }
-        };
+        }
 
-        var action = ganttEvent.action,
-            originalSelectedTask = ganttEvent.originalSelectedTask,
-            changedTask = ganttEvent.changedTask,
-            type = ganttEvent.type;
+        const {
+          action,
+          originalSelectedTask,
+          changedTask,
+          type
+        } = ganttEvent;
         if (!changedTask || !point || !(svg !== null && svg !== void 0 && svg.current) || !originalSelectedTask) return Promise.resolve();
         event.preventDefault();
         point.x = event.clientX;
-        var cursor = point.matrixTransform(svg === null || svg === void 0 ? void 0 : (_svg$current$getScree2 = svg.current.getScreenCTM()) === null || _svg$current$getScree2 === void 0 ? void 0 : _svg$current$getScree2.inverse());
-
-        var _handleTaskBySVGMouse2 = handleTaskBySVGMouseEvent(cursor.x, action, changedTask, type, xStep, timeStep, initEventX1Delta, rtl),
-            newChangedTask = _handleTaskBySVGMouse2.changedTask;
-
-        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;
+        const cursor = point.matrixTransform(svg === null || svg === void 0 ? void 0 : (_svg$current$getScree2 = svg.current.getScreenCTM()) === null || _svg$current$getScree2 === void 0 ? void 0 : _svg$current$getScree2.inverse());
+        const {
+          changedTask: newChangedTask
+        } = handleTaskBySVGMouseEvent(cursor.x, action, changedTask, type, xStep, timeStep, initEventX1Delta, rtl);
+        const isNotLikeOriginal = originalSelectedTask.start !== newChangedTask.start || originalSelectedTask.end !== newChangedTask.end || originalSelectedTask.actualStart !== newChangedTask.actualStart || originalSelectedTask.actualEnd !== newChangedTask.actualEnd || originalSelectedTask.progress !== newChangedTask.progress;
+        const dropType = type;
 
         if (newChangedTask.calendar && (action === "move" || action === "end" || action === "start")) {
-          var cal = newChangedTask.calendar;
+          const cal = newChangedTask.calendar;
 
           if (dropType === "actual") {
             if (action === "end") {
-              var snappedEnd = snapToWorkingTime(newChangedTask.actualEnd, cal, "forward");
+              const snappedEnd = snapToWorkingTime(newChangedTask.actualEnd, cal, "forward");
               newChangedTask.actualEnd = snappedEnd;
               newChangedTask.actualx2 = taskXCoordinate(snappedEnd, dates, columnWidth);
             } else if (action === "start") {
-              var snappedStart = snapToWorkingTime(newChangedTask.actualStart, cal, "forward");
+              const snappedStart = snapToWorkingTime(newChangedTask.actualStart, cal, "forward");
 
               if (snappedStart >= newChangedTask.actualEnd) {
                 setFailedTask(originalSelectedTask);
@@ -3451,38 +3408,32 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
               newChangedTask.actualStart = snappedStart;
               newChangedTask.actualx1 = taskXCoordinate(snappedStart, dates, columnWidth);
             } else {
-              var _snappedStart = snapToWorkingTime(newChangedTask.actualStart, cal, "forward");
-
-              var delta = _snappedStart.getTime() - newChangedTask.actualStart.getTime();
-              newChangedTask.actualStart = _snappedStart;
+              const snappedStart = snapToWorkingTime(newChangedTask.actualStart, cal, "forward");
+              const delta = snappedStart.getTime() - newChangedTask.actualStart.getTime();
+              newChangedTask.actualStart = snappedStart;
               newChangedTask.actualEnd = new Date(newChangedTask.actualEnd.getTime() + delta);
-              newChangedTask.actualx1 = taskXCoordinate(_snappedStart, dates, columnWidth);
+              newChangedTask.actualx1 = taskXCoordinate(snappedStart, dates, columnWidth);
               newChangedTask.actualx2 = taskXCoordinate(newChangedTask.actualEnd, dates, columnWidth);
             }
 
-            var actEnd = addToDate(startOfDate(newChangedTask.actualEnd, "day"), 1, "day");
-            var actIntervals = getWorkingIntervals(newChangedTask.actualStart, actEnd, cal);
-            var actSegs = actIntervals.map(function (iv) {
-              return {
-                x1: taskXCoordinate(iv.start, dates, columnWidth),
-                x2: taskXCoordinate(iv.end, dates, columnWidth)
-              };
-            }).filter(function (s) {
-              return s.x2 > s.x1;
-            });
+            const actEnd = addToDate(startOfDate(newChangedTask.actualEnd, "day"), 1, "day");
+            const actIntervals = getWorkingIntervals(newChangedTask.actualStart, actEnd, cal);
+            const actSegs = actIntervals.map(iv => ({
+              x1: taskXCoordinate(iv.start, dates, columnWidth),
+              x2: taskXCoordinate(iv.end, dates, columnWidth)
+            })).filter(s => s.x2 > s.x1);
             newChangedTask.actualSegments = actSegs.length > 0 ? actSegs : undefined;
-            var actDays = Math.max(1, Math.round((newChangedTask.actualEnd.getTime() - newChangedTask.actualStart.getTime()) / (1000 * 60 * 60 * 24)));
+            const actDays = Math.max(1, Math.round((newChangedTask.actualEnd.getTime() - newChangedTask.actualStart.getTime()) / (1000 * 60 * 60 * 24)));
             newChangedTask.actualDuration = actDays;
           } else {
             if (action === "end") {
-              var _snappedEnd = snapToWorkingTime(newChangedTask.end, cal, "forward");
-
-              newChangedTask.end = _snappedEnd;
-              newChangedTask.x2 = taskXCoordinate(_snappedEnd, dates, columnWidth);
+              const snappedEnd = snapToWorkingTime(newChangedTask.end, cal, "forward");
+              newChangedTask.end = snappedEnd;
+              newChangedTask.x2 = taskXCoordinate(snappedEnd, dates, columnWidth);
             } else if (action === "start") {
-              var _snappedStart2 = snapToWorkingTime(newChangedTask.start, cal, "forward");
+              const snappedStart = snapToWorkingTime(newChangedTask.start, cal, "forward");
 
-              if (_snappedStart2 >= newChangedTask.end) {
+              if (snappedStart >= newChangedTask.end) {
                 setFailedTask(originalSelectedTask);
                 onCalendarError === null || onCalendarError === void 0 ? void 0 : onCalendarError(newChangedTask, "No working time in selected range");
                 setGanttEvent({
@@ -3494,42 +3445,34 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
                 return Promise.resolve();
               }
 
-              newChangedTask.start = _snappedStart2;
-              newChangedTask.x1 = taskXCoordinate(_snappedStart2, dates, columnWidth);
+              newChangedTask.start = snappedStart;
+              newChangedTask.x1 = taskXCoordinate(snappedStart, dates, columnWidth);
             } else {
-              var _snappedStart3 = snapToWorkingTime(newChangedTask.start, cal, "forward");
-
-              var _delta2 = _snappedStart3.getTime() - newChangedTask.start.getTime();
-
-              newChangedTask.start = _snappedStart3;
-              newChangedTask.end = new Date(newChangedTask.end.getTime() + _delta2);
-              newChangedTask.x1 = taskXCoordinate(_snappedStart3, dates, columnWidth);
+              const snappedStart = snapToWorkingTime(newChangedTask.start, cal, "forward");
+              const delta = snappedStart.getTime() - newChangedTask.start.getTime();
+              newChangedTask.start = snappedStart;
+              newChangedTask.end = new Date(newChangedTask.end.getTime() + delta);
+              newChangedTask.x1 = taskXCoordinate(snappedStart, dates, columnWidth);
               newChangedTask.x2 = taskXCoordinate(newChangedTask.end, dates, columnWidth);
             }
 
-            var planEnd = addToDate(startOfDate(newChangedTask.end, "day"), 1, "day");
-            var planIntervals = getWorkingIntervals(newChangedTask.start, planEnd, cal);
-            var planSegs = planIntervals.map(function (iv) {
-              return {
-                x1: taskXCoordinate(iv.start, dates, columnWidth),
-                x2: taskXCoordinate(iv.end, dates, columnWidth)
-              };
-            }).filter(function (s) {
-              return s.x2 > s.x1;
-            });
+            const planEnd = addToDate(startOfDate(newChangedTask.end, "day"), 1, "day");
+            const planIntervals = getWorkingIntervals(newChangedTask.start, planEnd, cal);
+            const planSegs = planIntervals.map(iv => ({
+              x1: taskXCoordinate(iv.start, dates, columnWidth),
+              x2: taskXCoordinate(iv.end, dates, columnWidth)
+            })).filter(s => s.x2 > s.x1);
             newChangedTask.plannedSegments = planSegs.length > 0 ? planSegs : undefined;
-            var planDays = Math.max(1, Math.round((newChangedTask.end.getTime() - newChangedTask.start.getTime()) / (1000 * 60 * 60 * 24)));
+            const planDays = Math.max(1, Math.round((newChangedTask.end.getTime() - newChangedTask.start.getTime()) / (1000 * 60 * 60 * 24)));
             newChangedTask.plannedDuration = planDays;
           }
         } else if (action === "move" || action === "end" || action === "start") {
           if (dropType === "actual") {
-            var _actDays2 = Math.max(1, Math.round((newChangedTask.actualEnd.getTime() - newChangedTask.actualStart.getTime()) / (1000 * 60 * 60 * 24)));
-
-            newChangedTask.actualDuration = _actDays2;
+            const actDays = Math.max(1, Math.round((newChangedTask.actualEnd.getTime() - newChangedTask.actualStart.getTime()) / (1000 * 60 * 60 * 24)));
+            newChangedTask.actualDuration = actDays;
           } else {
-            var _planDays2 = Math.max(1, Math.round((newChangedTask.end.getTime() - newChangedTask.start.getTime()) / (1000 * 60 * 60 * 24)));
-
-            newChangedTask.plannedDuration = _planDays2;
+            const planDays = Math.max(1, Math.round((newChangedTask.end.getTime() - newChangedTask.start.getTime()) / (1000 * 60 * 60 * 24)));
+            newChangedTask.plannedDuration = planDays;
           }
         }
 
@@ -3544,11 +3487,11 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
           action: ""
         });
         setIsMoving(false);
-        var operationSuccess = true;
+        let operationSuccess = true;
 
-        var _temp7 = function () {
+        const _temp4 = function () {
           if ((action === "move" || action === "end" || action === "start") && onDateChange && isNotLikeOriginal) {
-            var _temp8 = _catch(function () {
+            const _temp = _catch(function () {
               return Promise.resolve(onDateChange(newChangedTask, newChangedTask.barChildren)).then(function (result) {
                 if (result !== undefined) {
                   operationSuccess = result;
@@ -3558,11 +3501,11 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
               operationSuccess = false;
             });
 
-            if (_temp8 && _temp8.then) return _temp8.then(function () {});
+            if (_temp && _temp.then) return _temp.then(function () {});
           } else {
-            var _temp9 = function () {
+            const _temp3 = function () {
               if (onProgressChange && isNotLikeOriginal) {
-                var _temp10 = _catch(function () {
+                const _temp2 = _catch(function () {
                   return Promise.resolve(onProgressChange(newChangedTask, newChangedTask.barChildren)).then(function (result) {
                     if (result !== undefined) {
                       operationSuccess = result;
@@ -3572,15 +3515,15 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
                   operationSuccess = false;
                 });
 
-                if (_temp10 && _temp10.then) return _temp10.then(function () {});
+                if (_temp2 && _temp2.then) return _temp2.then(function () {});
               }
             }();
 
-            if (_temp9 && _temp9.then) return _temp9.then(function () {});
+            if (_temp3 && _temp3.then) return _temp3.then(function () {});
           }
         }();
 
-        return Promise.resolve(_temp7 && _temp7.then ? _temp7.then(_temp6) : _temp6(_temp7));
+        return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp5) : _temp5(_temp4));
       } catch (e) {
         return Promise.reject(e);
       }
@@ -3593,7 +3536,7 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
     }
   }, [ganttEvent, xStep, initEventX1Delta, onProgressChange, timeStep, onDateChange, onCalendarError, projectCalendar, svg, isMoving, point, rtl, setFailedTask, setGanttEvent, onBarTasksUpdate, dates, columnWidth]);
 
-  var handleBarEventStart = function handleBarEventStart(action, task, event, type) {
+  const handleBarEventStart = function (action, task, event, type) {
     try {
       return Promise.resolve(function () {
         if (!event) {
@@ -3602,15 +3545,15 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
           }
         } else return function () {
           if (isKeyboardEvent(event)) {
-            var _temp14 = function () {
+            const _temp8 = function () {
               if (action === "delete") {
-                var _temp15 = function () {
+                const _temp7 = function () {
                   if (onDelete) {
-                    var _temp16 = _catch(function () {
+                    const _temp6 = _catch(function () {
                       return Promise.resolve(onDelete(task)).then(function (result) {
                         if (result !== undefined && result) {
                           setGanttEvent({
-                            action: action,
+                            action,
                             changedTask: task
                           });
                         }
@@ -3619,19 +3562,19 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
                       console.error("Error on Delete. " + error);
                     });
 
-                    if (_temp16 && _temp16.then) return _temp16.then(function () {});
+                    if (_temp6 && _temp6.then) return _temp6.then(function () {});
                   }
                 }();
 
-                if (_temp15 && _temp15.then) return _temp15.then(function () {});
+                if (_temp7 && _temp7.then) return _temp7.then(function () {});
               }
             }();
 
-            if (_temp14 && _temp14.then) return _temp14.then(function () {});
+            if (_temp8 && _temp8.then) return _temp8.then(function () {});
           } else if (action === "mouseenter") {
             if (!ganttEvent.action) {
               setGanttEvent({
-                action: action,
+                action,
                 changedTask: task,
                 originalSelectedTask: task,
                 type: type
@@ -3652,17 +3595,17 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
 
             if (!(svg !== null && svg !== void 0 && svg.current) || !point) return;
             point.x = event.clientX;
-            var cursor = point.matrixTransform((_svg$current$getScree3 = svg.current.getScreenCTM()) === null || _svg$current$getScree3 === void 0 ? void 0 : _svg$current$getScree3.inverse());
+            const cursor = point.matrixTransform((_svg$current$getScree3 = svg.current.getScreenCTM()) === null || _svg$current$getScree3 === void 0 ? void 0 : _svg$current$getScree3.inverse());
             if (type == "planned") setInitEventX1Delta(cursor.x - task.x1);else if (type == "actual") setInitEventX1Delta(cursor.x - task.actualx1);
             setGanttEvent({
-              action: action,
+              action,
               changedTask: task,
               originalSelectedTask: task,
               type: type
             });
           } else {
             setGanttEvent({
-              action: action,
+              action,
               changedTask: task,
               originalSelectedTask: task,
               type: type
@@ -3675,36 +3618,34 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
     }
   };
 
-  var getArrows = function getArrows(isCritical, criticalPathType) {
-    return tasks.flatMap(function (_task) {
-      var a = ganttEvent.action;
-      var isDraggingThis = (a === "move" || a === "start" || a === "end" || a === "progress") && !!ganttEvent.changedTask && ganttEvent.changedTask.id === _task.id;
+  const getArrows = (isCritical, criticalPathType) => {
+    return tasks.flatMap(_task => {
+      const a = ganttEvent.action;
+      const isDraggingThis = (a === "move" || a === "start" || a === "end" || a === "progress") && !!ganttEvent.changedTask && ganttEvent.changedTask.id === _task.id;
 
-      var _live = isDraggingThis ? _extends({}, ganttEvent.changedTask, {
+      const _live = isDraggingThis ? { ...ganttEvent.changedTask,
         y: _task.y
-      }) : _task;
+      } : _task;
 
-      var task = _live.start.getTime() > 0 && _live.end.getTime() > 0 ? _live : undefined;
+      const task = _live.start.getTime() > 0 && _live.end.getTime() > 0 ? _live : undefined;
 
       if (!task) {
         return [];
       }
 
-      return task.barChildren.map(function (child) {
-        var taskTo = tasks[child.index];
-        var fromDrawable = task.x2 > task.x1 || task.actualx2 > task.actualx1;
-        var toDrawable = !!taskTo && (taskTo.x2 > taskTo.x1 || taskTo.actualx2 > taskTo.actualx1);
+      return task.barChildren.map(child => {
+        const taskTo = tasks[child.index];
+        const fromDrawable = task.x2 > task.x1 || task.actualx2 > task.actualx1;
+        const toDrawable = !!taskTo && (taskTo.x2 > taskTo.x1 || taskTo.actualx2 > taskTo.actualx1);
 
         if (fromDrawable && toDrawable) {
           var _task$criticalPathArr;
 
-          var criticalTask = (_task$criticalPathArr = task.criticalPathArrows) === null || _task$criticalPathArr === void 0 ? void 0 : _task$criticalPathArr.find(function (arrow) {
-            return arrow.taskId === taskTo.id && (!!arrow.criticalPathType ? arrow.criticalPathType === criticalPathType : !criticalPathType);
-          });
-          var yFrom = task.y + taskHeight / 2;
-          var yTo = taskTo.y + taskHeight / 2;
-          var minY = Math.min(yFrom, yTo);
-          var maxY = Math.max(yFrom, yTo);
+          const criticalTask = (_task$criticalPathArr = task.criticalPathArrows) === null || _task$criticalPathArr === void 0 ? void 0 : _task$criticalPathArr.find(arrow => arrow.taskId === taskTo.id && (!!arrow.criticalPathType ? arrow.criticalPathType === criticalPathType : !criticalPathType));
+          const yFrom = task.y + taskHeight / 2;
+          const yTo = taskTo.y + taskHeight / 2;
+          const minY = Math.min(yFrom, yTo);
+          const maxY = Math.max(yFrom, yTo);
 
           if (maxY < visibleStartY || minY > visibleEndY) {
             return null;
@@ -3712,7 +3653,7 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
 
           if (!!criticalTask === isCritical) {
             return React__default.createElement(Arrow, {
-              key: "Arrow from " + task.id + " to " + taskTo.id + (isCritical ? "-critical" : ""),
+              key: `Arrow from ${task.id} to ${taskTo.id}${isCritical ? "-critical" : ""}`,
               taskFrom: task,
               taskTo: taskTo,
               rowHeight: rowHeight,
@@ -3729,8 +3670,8 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
     });
   };
 
-  var lineX = sliderTime !== undefined ? taskXCoordinate(new Date(sliderTime), dates, columnWidth) : null;
-  var totalHeight = tasks.length * rowHeight;
+  const lineX = sliderTime !== undefined ? taskXCoordinate(new Date(sliderTime), dates, columnWidth) : null;
+  const totalHeight = tasks.length * rowHeight;
   return React__default.createElement("g", {
     className: "content"
   }, lineX !== null && lineX > 0 && React__default.createElement("line", {
@@ -3748,18 +3689,18 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
     className: "bar",
     fontFamily: fontFamily,
     fontSize: fontSize
-  }, virtualItems.map(function (vi) {
-    var _task = tasks[vi.index];
-    var task = ganttEvent.changedTask && ganttEvent.changedTask.id === _task.id ? _extends({}, ganttEvent.changedTask, {
+  }, virtualItems.map(vi => {
+    const _task = tasks[vi.index];
+    const task = ganttEvent.changedTask && ganttEvent.changedTask.id === _task.id ? { ...ganttEvent.changedTask,
       y: 0
-    }) : _extends({}, _task, {
+    } : { ..._task,
       y: 0
-    });
+    };
 
     if (!task && _task.typeInternal === "milestone") {
       return React__default.createElement("g", {
         key: _task.id,
-        transform: "translate(0, " + vi.start + ")"
+        transform: `translate(0, ${vi.start})`
       }, React__default.createElement(Milestone, {
         task: task,
         arrowIndent: arrowIndent,
@@ -3776,7 +3717,7 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
     if (!task) {
       return React__default.createElement("g", {
         key: _task.id,
-        transform: "translate(0, " + vi.start + ")",
+        transform: `translate(0, ${vi.start})`,
         style: {
           height: taskHeight
         }
@@ -3785,7 +3726,7 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
 
     return React__default.createElement("g", {
       key: task.id,
-      transform: "translate(0, " + vi.start + ")"
+      transform: `translate(0, ${vi.start})`
     }, React__default.createElement(TaskItem, {
       task: task,
       arrowIndent: arrowIndent,