gantt-task-react-powern 0.4.70 → 0.4.72

package/dist/index.js

@@ -21,6 +21,10 @@ 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);
@@ -271,9 +275,6 @@ var getWeekNumberISO8601 = function getWeekNumberISO8601(date) {
     return weekNumber;
   }
 };
-var getDaysInMonth = function getDaysInMonth(month, year) {
-  return new Date(year, month + 1, 0).getDate();
-};
 
 var styles = {"ganttTable":"_3_ygE","ganttTable_Header":"_1nBOt","ganttTable_HeaderSeparator":"_2eZzQ","ganttTable_HeaderItem":"_WuQ0f"};
 
@@ -282,6 +283,7 @@ var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
       fontFamily = _ref.fontFamily,
       fontSize = _ref.fontSize,
       rowWidth = _ref.rowWidth,
+      scheduleType = _ref.scheduleType,
       allSelected = _ref.allSelected,
       onSelectAll = _ref.onSelectAll;
   return React__default.createElement("div", {
@@ -346,7 +348,7 @@ var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
   }), React__default.createElement("div", {
     className: styles.ganttTable_HeaderItem,
     style: {
-      minWidth: parseInt(rowWidth) * 0.7
+      minWidth: parseInt(rowWidth) * 0.6
     },
     title: "Planned Start"
   }, "Planned Start"), React__default.createElement("div", {
@@ -358,10 +360,28 @@ var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
   }), React__default.createElement("div", {
     className: styles.ganttTable_HeaderItem,
     style: {
-      minWidth: parseInt(rowWidth) * 0.7
+      minWidth: parseInt(rowWidth) * 0.6
+    },
+    title: "Planned End"
+  }, "Planned End"), scheduleType === "lookAhead" && React__default.createElement("div", {
+    className: styles.ganttTable_HeaderItem,
+    style: {
+      minWidth: parseInt(rowWidth) * 0.6
+    },
+    title: "Planned Start"
+  }, "Actual Start"), scheduleType === "lookAhead" && React__default.createElement("div", {
+    className: styles.ganttTable_HeaderSeparator,
+    style: {
+      height: headerHeight * 0.5,
+      marginTop: headerHeight * 0.25
+    }
+  }), scheduleType === "lookAhead" && React__default.createElement("div", {
+    className: styles.ganttTable_HeaderItem,
+    style: {
+      minWidth: parseInt(rowWidth) * 0.6
     },
     title: "Planned End"
-  }, "Planned End")));
+  }, "Actual End")));
 };
 
 var styles$1 = {"taskListWrapper":"_3ZbQT","taskListTableRow":"_34SS0","taskListLookAheadRow":"_GzvG4","taskListMilestoneRow":"_3Ykml","taskListCell":"_3lLk3","taskListNameWrapper":"_nI1Xw","taskListExpander":"_2QjE6","taskListExpanderPlaceholder":"_1fnLB","taskListEmptyExpander":"_2TfEi","taskListText":"_2ZvXU"};
@@ -518,7 +538,23 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
       }
     }, React__default.createElement("div", {
       className: styles$1.taskListText
-    }, "\xA0", toLocaleDateString(t.end, dateTimeOptions))));
+    }, "\xA0", toLocaleDateString(t.end, dateTimeOptions))), scheduleType === "lookAhead" && React__default.createElement("div", {
+      className: styles$1.taskListCell,
+      style: {
+        minWidth: parseInt(rowWidth) * 0.6,
+        maxWidth: parseInt(rowWidth) * 0.6
+      }
+    }, React__default.createElement("div", {
+      className: styles$1.taskListText
+    }, "\xA0", toLocaleDateString(t.actualStart, dateTimeOptions))), scheduleType === "lookAhead" && React__default.createElement("div", {
+      className: styles$1.taskListCell,
+      style: {
+        minWidth: parseInt(rowWidth) * 0.6,
+        maxWidth: parseInt(rowWidth) * 0.6
+      }
+    }, React__default.createElement("div", {
+      className: styles$1.taskListText
+    }, "\xA0", toLocaleDateString(t.actualEnd, dateTimeOptions))));
   }));
 };
 
@@ -749,6 +785,7 @@ var TaskList = function TaskList(_ref) {
     fontFamily: fontFamily,
     fontSize: fontSize,
     rowWidth: rowWidth,
+    scheduleType: scheduleType,
     allSelected: tasks.length > 0 && selectedTasks.length === tasks.length,
     onSelectAll: onMultiSelect ? handleSelectAll : undefined
   };
@@ -782,21 +819,19 @@ var TaskList = function TaskList(_ref) {
 
 var styles$4 = {"gridRow":"_2dZTy","gridRowLookAhead":"_2RRca","gridRowLine":"_3rUKi","gridTick":"_RuwuK","darkerGridRow":"_2M-tt"};
 
-const GridBody = _ref => {
-  let {
-    tasks,
-    scheduleType,
-    dates,
-    rowHeight,
-    svgWidth,
-    columnWidth,
-    todayColor,
-    weekendColor,
-    rtl
-  } = _ref;
-  let y = 0;
-  const gridRows = [];
-  const rowLines = [React__default.createElement("line", {
+var GridBody = function GridBody(_ref) {
+  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;
+  var y = 0;
+  var gridRows = [];
+  var rowLines = [React__default.createElement("line", {
     key: "RowLineFirst",
     x: "0",
     y1: 0,
@@ -805,8 +840,9 @@ const GridBody = _ref => {
     className: styles$4.gridRowLine
   })];
 
-  for (const task of tasks) {
-    const isDarkerRow = task.type === "milestone";
+  for (var _iterator = _createForOfIteratorHelperLoose(tasks), _step; !(_step = _iterator()).done;) {
+    var task = _step.value;
+    var isDarkerRow = task.type === "milestone";
     gridRows.push(React__default.createElement("rect", {
       key: "Row" + task.id,
       x: "0",
@@ -826,14 +862,14 @@ const GridBody = _ref => {
     y += rowHeight;
   }
 
-  const now = new Date();
-  let tickX = 0;
-  const ticks = [];
-  let today = React__default.createElement("rect", null);
-  let weekend = [];
+  var now = new Date();
+  var tickX = 0;
+  var ticks = [];
+  var today = React__default.createElement("rect", null);
+  var weekend = [];
 
-  for (let i = 0; i < dates.length; i++) {
-    const date = dates[i];
+  for (var i = 0; i < dates.length; i++) {
+    var date = dates[i];
     ticks.push(React__default.createElement("line", {
       key: date.getTime(),
       x1: tickX,
@@ -891,7 +927,7 @@ const GridBody = _ref => {
   }, today));
 };
 
-const Grid = props => {
+var Grid = function Grid(props) {
   return React__default.createElement("g", {
     className: "grid"
   }, React__default.createElement(GridBody, Object.assign({}, props)));
@@ -899,17 +935,16 @@ const Grid = props => {
 
 var styles$5 = {"calendarBottomText":"_9w8d5","calendarTopTick":"_1rLuZ","calendarTopText":"_2q1Kt","calendarHeader":"_35nLX","textAnchorStart":"_2Shd-","textAnchorMiddle":"_2XXW4","textAnchorEnd":"_3GdnC"};
 
-const TopPartOfCalendar = _ref => {
-  let {
-    value,
-    x1Line,
-    y1Line,
-    y2Line,
-    xText,
-    yText,
-    textAnchor = "middle"
-  } = _ref;
-  const textAnchorClass = textAnchor === "start" ? styles$5.textAnchorStart : textAnchor === "middle" ? styles$5.textAnchorMiddle : styles$5.textAnchorEnd;
+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$5.textAnchorStart : textAnchor === "middle" ? styles$5.textAnchorMiddle : styles$5.textAnchorEnd;
   return React__default.createElement("g", {
     className: "calendarTop"
   }, React__default.createElement("line", {
@@ -923,30 +958,28 @@ const TopPartOfCalendar = _ref => {
     key: value + "text",
     y: yText,
     x: xText,
-    className: `${styles$5.calendarTopText} ${textAnchorClass}`
+    className: styles$5.calendarTopText + " " + textAnchorClass
   }, value));
 };
 
-const Calendar = _ref => {
-  let {
-    dateSetup,
-    locale,
-    viewMode,
-    rtl,
-    headerHeight,
-    columnWidth,
-    fontFamily,
-    fontSize
-  } = _ref;
-
-  const getCalendarValuesForYear = () => {
-    const topValues = [];
-    const bottomValues = [];
-    const topDefaultHeight = headerHeight * 0.5;
-
-    for (let i = 0; i < dateSetup.dates.length; i++) {
-      const date = dateSetup.dates[i];
-      const bottomValue = date.getFullYear();
+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;
+
+  var getCalendarValuesForYear = function getCalendarValuesForYear() {
+    var topValues = [];
+    var bottomValues = [];
+    var topDefaultHeight = headerHeight * 0.5;
+
+    for (var i = 0; i < dateSetup.dates.length; i++) {
+      var date = dateSetup.dates[i];
+      var bottomValue = date.getFullYear();
       bottomValues.push(React__default.createElement("text", {
         key: date.getFullYear(),
         y: headerHeight * 0.8,
@@ -955,8 +988,8 @@ const Calendar = _ref => {
       }, bottomValue));
 
       if (i === 0 || date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()) {
-        const topValue = date.getFullYear().toString();
-        let xText;
+        var topValue = date.getFullYear().toString();
+        var xText = void 0;
 
         if (rtl) {
           xText = (6 + i + date.getFullYear() + 1) * columnWidth;
@@ -979,25 +1012,25 @@ const Calendar = _ref => {
     return [topValues, bottomValues];
   };
 
-  const getCalendarValuesForQuarter = () => {
-    const topValues = [];
-    const bottomValues = [];
-    const topDefaultHeight = headerHeight * 0.5;
+  var getCalendarValuesForQuarter = function getCalendarValuesForQuarter() {
+    var topValues = [];
+    var bottomValues = [];
+    var topDefaultHeight = headerHeight * 0.5;
 
-    for (let i = 0; i < dateSetup.dates.length; i++) {
-      const date = dateSetup.dates[i];
-      const quarter = Math.floor(date.getMonth() / 3) + 1;
-      const bottomValue = `Q${quarter}`;
+    for (var i = 0; i < dateSetup.dates.length; i++) {
+      var date = dateSetup.dates[i];
+      var quarter = Math.floor(date.getMonth() / 3) + 1;
+      var bottomValue = "Q" + quarter;
       bottomValues.push(React__default.createElement("text", {
-        key: `${bottomValue}-${date.getFullYear()}`,
+        key: bottomValue + "-" + date.getFullYear(),
         y: headerHeight * 0.8,
         x: columnWidth * i + columnWidth * 0.5,
         className: styles$5.calendarBottomText
       }, bottomValue));
 
       if (i === 0 || date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()) {
-        const topValue = date.getFullYear().toString();
-        let xText;
+        var topValue = date.getFullYear().toString();
+        var xText = void 0;
 
         if (rtl) {
           xText = (3 + i + quarter) * columnWidth;
@@ -1020,26 +1053,26 @@ const Calendar = _ref => {
     return [topValues, bottomValues];
   };
 
-  const getCalendarValuesForMonth = () => {
-    const topValues = [];
-    const bottomValues = [];
-    const topDefaultHeight = headerHeight * 0.5;
+  var getCalendarValuesForMonth = function getCalendarValuesForMonth() {
+    var topValues = [];
+    var bottomValues = [];
+    var topDefaultHeight = headerHeight * 0.5;
 
-    for (let i = 0; i < dateSetup.dates.length; i++) {
-      const date = dateSetup.dates[i];
-      const bottomValue = date.toLocaleString(locale, {
+    for (var i = 0; i < dateSetup.dates.length; i++) {
+      var date = dateSetup.dates[i];
+      var bottomValue = date.toLocaleString(locale, {
         month: "short"
       });
       bottomValues.push(React__default.createElement("text", {
         key: bottomValue + date.getFullYear(),
         y: headerHeight * 0.8,
         x: columnWidth * i + columnWidth * 0.5,
-        className: `${styles$5.calendarTopText} ${styles$5.textAnchorEnd}`
+        className: styles$5.calendarTopText + " " + styles$5.textAnchorEnd
       }, bottomValue));
 
       if (i === 0 || date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()) {
-        const topValue = date.getFullYear().toString();
-        let xText;
+        var topValue = date.getFullYear().toString();
+        var xText = void 0;
 
         if (rtl) {
           xText = (6 + i + date.getMonth() + 1) * columnWidth;
@@ -1064,27 +1097,27 @@ const Calendar = _ref => {
     return [topValues, bottomValues];
   };
 
-  const getCalendarValuesForWeek = () => {
-    const topValues = [];
-    const bottomValues = [];
-    let weeksCount = 1;
-    const topDefaultHeight = headerHeight * 0.5;
-    const dates = dateSetup.dates;
+  var getCalendarValuesForWeek = function getCalendarValuesForWeek() {
+    var topValues = [];
+    var bottomValues = [];
+    var weeksCount = 1;
+    var topDefaultHeight = headerHeight * 0.5;
+    var dates = dateSetup.dates;
 
-    for (let i = dates.length - 1; i >= 0; i--) {
-      const date = dates[i];
-      let topValue = "";
+    for (var i = dates.length - 1; i >= 0; i--) {
+      var date = dates[i];
+      var topValue = "";
 
       if (i === 0 || date.getMonth() !== dates[i - 1].getMonth()) {
-        topValue = `${getLocaleMonth(date, locale)}, ${date.getFullYear()}`;
+        topValue = getLocaleMonth(date, locale) + ", " + date.getFullYear();
       }
 
-      const bottomValue = `W${getWeekNumberISO8601(date)}`;
+      var bottomValue = "W" + getWeekNumberISO8601(date);
       bottomValues.push(React__default.createElement("text", {
         key: date.getTime(),
         y: headerHeight * 0.8,
         x: columnWidth * (i + +rtl),
-        className: `${styles$5.calendarTopText} ${styles$5.textAnchorStart}`
+        className: styles$5.calendarTopText + " " + styles$5.textAnchorStart
       }, bottomValue));
 
       if (topValue) {
@@ -1110,31 +1143,45 @@ const Calendar = _ref => {
     return [topValues, bottomValues];
   };
 
-  const getCalendarValuesForDay = () => {
-    const topValues = [];
-    const bottomValues = [];
-    const topDefaultHeight = headerHeight * 0.5;
-    const dates = dateSetup.dates;
+  var getCalendarValuesForDay = function getCalendarValuesForDay() {
+    var topValues = [];
+    var bottomValues = [];
+    var topDefaultHeight = headerHeight * 0.5;
+    var dates = dateSetup.dates;
 
-    for (let i = 0; i < dates.length; i++) {
-      const date = dates[i];
-      const bottomValue = `${getLocalDayOfWeek(date, locale, "short")}, ${date.getDate().toString()}`;
+    for (var i = 0; i < dates.length; i++) {
+      var date = dates[i];
+      var bottomValue = columnWidth > 55 ? getLocalDayOfWeek(date, locale, "short") + ", " + date.getDate().toString() : getLocalDayOfWeek(date, locale, "narrow") + ", " + date.getDate().toString();
       bottomValues.push(React__default.createElement("text", {
         key: date.getTime(),
         y: headerHeight * 0.8,
         x: columnWidth * i + columnWidth * 0.5,
-        className: `${styles$5.calendarTopText} ${styles$5.textAnchorMiddle}`
+        className: styles$5.calendarTopText + " " + styles$5.textAnchorMiddle
       }, bottomValue));
 
       if (i + 1 !== dates.length && date.getMonth() !== dates[i + 1].getMonth()) {
-        const topValue = `${getLocaleMonth(date, locale)} ${date.getFullYear()}`;
+        var topValue = getLocaleMonth(date, locale) + " " + date.getFullYear();
         topValues.push(React__default.createElement(TopPartOfCalendar, {
           key: topValue + date.getFullYear(),
           value: topValue,
           x1Line: columnWidth * (i + 1),
           y1Line: 0,
           y2Line: topDefaultHeight,
-          xText: columnWidth * (i + 1) - getDaysInMonth(date.getMonth(), date.getFullYear()) * columnWidth * 0.5,
+          xText: topValues.length === 0 ? columnWidth * (i + 1) * 0.5 : columnWidth * (i + 1) - date.getDate() * columnWidth * 0.5,
+          yText: topDefaultHeight * 0.9
+        }));
+      }
+
+      if (i + 1 === dates.length) {
+        var _topValue = getLocaleMonth(date, locale) + " " + date.getFullYear();
+
+        topValues.push(React__default.createElement(TopPartOfCalendar, {
+          key: _topValue + date.getFullYear(),
+          value: _topValue,
+          x1Line: columnWidth * (i + 1),
+          y1Line: 0,
+          y2Line: topDefaultHeight,
+          xText: columnWidth * (i + 1) - date.getDate() * columnWidth * 0.5,
           yText: topDefaultHeight * 0.9
         }));
       }
@@ -1143,28 +1190,28 @@ const Calendar = _ref => {
     return [topValues, bottomValues];
   };
 
-  const getCalendarValuesForPartOfDay = () => {
-    const topValues = [];
-    const bottomValues = [];
-    const ticks = viewMode === exports.ViewMode.HalfDay ? 2 : 4;
-    const topDefaultHeight = headerHeight * 0.5;
-    const dates = dateSetup.dates;
+  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;
 
-    for (let i = 0; i < dates.length; i++) {
-      const date = dates[i];
-      const bottomValue = getCachedDateTimeFormat(locale, {
+    for (var i = 0; i < dates.length; i++) {
+      var date = dates[i];
+      var 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$5.calendarTopText} ${styles$5.textAnchorMiddle}`,
+        className: styles$5.calendarTopText + " " + styles$5.textAnchorMiddle,
         fontFamily: fontFamily
       }, bottomValue));
 
       if (i === 0 || date.getDate() !== dates[i - 1].getDate()) {
-        const topValue = `${getLocalDayOfWeek(date, locale, "short")}, ${date.getDate()} ${getLocaleMonth(date, locale)}`;
+        var topValue = getLocalDayOfWeek(date, locale, "short") + ", " + date.getDate() + " " + getLocaleMonth(date, locale);
         topValues.push(React__default.createElement(TopPartOfCalendar, {
           key: topValue + date.getFullYear(),
           value: topValue,
@@ -1180,15 +1227,15 @@ const Calendar = _ref => {
     return [topValues, bottomValues];
   };
 
-  const getCalendarValuesForHour = () => {
-    const topValues = [];
-    const bottomValues = [];
-    const topDefaultHeight = headerHeight * 0.5;
-    const dates = dateSetup.dates;
+  var getCalendarValuesForHour = function getCalendarValuesForHour() {
+    var topValues = [];
+    var bottomValues = [];
+    var topDefaultHeight = headerHeight * 0.5;
+    var dates = dateSetup.dates;
 
-    for (let i = 0; i < dates.length; i++) {
-      const date = dates[i];
-      const bottomValue = getCachedDateTimeFormat(locale, {
+    for (var i = 0; i < dates.length; i++) {
+      var date = dates[i];
+      var bottomValue = getCachedDateTimeFormat(locale, {
         hour: "numeric"
       }).format(date);
       bottomValues.push(React__default.createElement("text", {
@@ -1200,9 +1247,9 @@ const Calendar = _ref => {
       }, bottomValue));
 
       if (i !== 0 && date.getDate() !== dates[i - 1].getDate()) {
-        const displayDate = dates[i - 1];
-        const topValue = `${getLocalDayOfWeek(displayDate, locale, "long")}, ${displayDate.getDate()} ${getLocaleMonth(displayDate, locale)}`;
-        const topPosition = (date.getHours() - 24) / 2;
+        var displayDate = dates[i - 1];
+        var topValue = getLocalDayOfWeek(displayDate, locale, "long") + ", " + displayDate.getDate() + " " + getLocaleMonth(displayDate, locale);
+        var topPosition = (date.getHours() - 24) / 2;
         topValues.push(React__default.createElement(TopPartOfCalendar, {
           key: topValue + displayDate.getFullYear(),
           value: topValue,
@@ -1218,37 +1265,58 @@ const Calendar = _ref => {
     return [topValues, bottomValues];
   };
 
-  let topValues = [];
-  let bottomValues = [];
+  var topValues = [];
+  var bottomValues = [];
 
   switch (dateSetup.viewMode) {
     case exports.ViewMode.Year:
-      [topValues, bottomValues] = getCalendarValuesForYear();
+      var _getCalendarValuesFor = getCalendarValuesForYear();
+
+      topValues = _getCalendarValuesFor[0];
+      bottomValues = _getCalendarValuesFor[1];
       break;
 
     case exports.ViewMode.Quarter:
-      [topValues, bottomValues] = getCalendarValuesForQuarter();
+      var _getCalendarValuesFor2 = getCalendarValuesForQuarter();
+
+      topValues = _getCalendarValuesFor2[0];
+      bottomValues = _getCalendarValuesFor2[1];
       break;
 
     case exports.ViewMode.Month:
-      [topValues, bottomValues] = getCalendarValuesForMonth();
+      var _getCalendarValuesFor3 = getCalendarValuesForMonth();
+
+      topValues = _getCalendarValuesFor3[0];
+      bottomValues = _getCalendarValuesFor3[1];
       break;
 
     case exports.ViewMode.Week:
-      [topValues, bottomValues] = getCalendarValuesForWeek();
+      var _getCalendarValuesFor4 = getCalendarValuesForWeek();
+
+      topValues = _getCalendarValuesFor4[0];
+      bottomValues = _getCalendarValuesFor4[1];
       break;
 
     case exports.ViewMode.Day:
-      [topValues, bottomValues] = getCalendarValuesForDay();
+      var _getCalendarValuesFor5 = getCalendarValuesForDay();
+
+      topValues = _getCalendarValuesFor5[0];
+      bottomValues = _getCalendarValuesFor5[1];
       break;
 
     case exports.ViewMode.QuarterDay:
     case exports.ViewMode.HalfDay:
-      [topValues, bottomValues] = getCalendarValuesForPartOfDay();
+      var _getCalendarValuesFor6 = getCalendarValuesForPartOfDay();
+
+      topValues = _getCalendarValuesFor6[0];
+      bottomValues = _getCalendarValuesFor6[1];
       break;
 
     case exports.ViewMode.Hour:
-      [topValues, bottomValues] = getCalendarValuesForHour();
+      var _getCalendarValuesFor7 = getCalendarValuesForHour();
+
+      topValues = _getCalendarValuesFor7[0];
+      bottomValues = _getCalendarValuesFor7[1];
   }
 
   return React__default.createElement("g", {
@@ -1284,23 +1352,27 @@ function _catch(body, recover) {
 	return result;
 }
 
-const Arrow = _ref => {
-  let {
-    taskFrom,
-    taskTo,
-    rowHeight,
-    taskHeight,
-    arrowIndent,
-    rtl,
-    arrowColor
-  } = _ref;
-  let path;
-  let trianglePoints;
+var Arrow = function Arrow(_ref) {
+  var taskFrom = _ref.taskFrom,
+      taskTo = _ref.taskTo,
+      rowHeight = _ref.rowHeight,
+      taskHeight = _ref.taskHeight,
+      arrowIndent = _ref.arrowIndent,
+      rtl = _ref.rtl,
+      arrowColor = _ref.arrowColor;
+  var path;
+  var trianglePoints;
 
   if (rtl) {
-    [path, trianglePoints] = drownPathAndTriangleRTL(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent);
+    var _drownPathAndTriangle = drownPathAndTriangleRTL(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent);
+
+    path = _drownPathAndTriangle[0];
+    trianglePoints = _drownPathAndTriangle[1];
   } else {
-    [path, trianglePoints] = drownPathAndTriangle(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent);
+    var _drownPathAndTriangle2 = drownPathAndTriangle(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent);
+
+    path = _drownPathAndTriangle2[0];
+    trianglePoints = _drownPathAndTriangle2[1];
   }
 
   return React__default.createElement("g", {
@@ -1316,8 +1388,8 @@ const Arrow = _ref => {
   }));
 };
 
-const drownPathAndTriangle = (taskFrom, taskTo, rowHeight, taskHeight, arrowIndent) => {
-  let taskToStart, taskFromEnd;
+var drownPathAndTriangle = function drownPathAndTriangle(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent) {
+  var taskToStart, taskFromEnd;
 
   if (taskTo.x1 > 0 && taskTo.actualx1 > 0) {
     taskToStart = Math.min(taskTo.x1, taskTo.actualx1);
@@ -1327,38 +1399,24 @@ const drownPathAndTriangle = (taskFrom, taskTo, rowHeight, taskHeight, arrowInde
     taskFromEnd = Math.max(taskFrom.x2, taskFrom.actualx2);
   } else if (taskFrom.x2 > 0) taskFromEnd = taskFrom.x2;else if (taskFrom.actualx2 > 0) taskFromEnd = taskFrom.actualx2;else taskFromEnd = 0;
 
-  const indexCompare = taskFrom.index > taskTo.index ? -1 : 1;
-  const taskToEndPosition = taskTo.y + taskHeight / 2;
-  const taskFromEndPosition = taskFromEnd + arrowIndent * 2;
-  const taskFromHorizontalOffsetValue = taskFromEndPosition < taskToStart ? "" : `H ${taskToStart - arrowIndent}`;
-  const taskToHorizontalOffsetValue = taskFromEndPosition > taskToStart ? arrowIndent : taskToStart - taskFromEnd - arrowIndent;
-  const path = `M ${taskFromEnd} ${taskFrom.y + taskHeight / 2} 
-  h ${arrowIndent} 
-  v ${indexCompare * rowHeight / 2} 
-  ${taskFromHorizontalOffsetValue}
-  V ${taskToEndPosition} 
-  h ${taskToHorizontalOffsetValue}`;
-  const trianglePoints = `${taskToStart},${taskToEndPosition} 
-  ${taskToStart - 5},${taskToEndPosition - 5} 
-  ${taskToStart - 5},${taskToEndPosition + 5}`;
+  var indexCompare = taskFrom.index > taskTo.index ? -1 : 1;
+  var taskToEndPosition = taskTo.y + taskHeight / 2;
+  var taskFromEndPosition = taskFromEnd + arrowIndent * 2;
+  var taskFromHorizontalOffsetValue = taskFromEndPosition < taskToStart ? "" : "H " + (taskToStart - arrowIndent);
+  var taskToHorizontalOffsetValue = taskFromEndPosition > taskToStart ? arrowIndent : taskToStart - taskFromEnd - arrowIndent;
+  var path = "M " + taskFromEnd + " " + (taskFrom.y + taskHeight / 2) + " \n  h " + arrowIndent + " \n  v " + indexCompare * rowHeight / 2 + " \n  " + taskFromHorizontalOffsetValue + "\n  V " + taskToEndPosition + " \n  h " + taskToHorizontalOffsetValue;
+  var trianglePoints = taskToStart + "," + taskToEndPosition + " \n  " + (taskToStart - 5) + "," + (taskToEndPosition - 5) + " \n  " + (taskToStart - 5) + "," + (taskToEndPosition + 5);
   return [path, trianglePoints];
 };
 
-const drownPathAndTriangleRTL = (taskFrom, taskTo, rowHeight, taskHeight, arrowIndent) => {
-  const indexCompare = taskFrom.index > taskTo.index ? -1 : 1;
-  const taskToEndPosition = taskTo.y + taskHeight / 2;
-  const taskFromEndPosition = taskFrom.x1 - arrowIndent * 2;
-  const taskFromHorizontalOffsetValue = taskFromEndPosition > taskTo.x2 ? "" : `H ${taskTo.x2 + arrowIndent}`;
-  const taskToHorizontalOffsetValue = taskFromEndPosition < taskTo.x2 ? -arrowIndent : taskTo.x2 - taskFrom.x1 + arrowIndent;
-  const path = `M ${taskFrom.x1} ${taskFrom.y + taskHeight / 2} 
-  h ${-arrowIndent} 
-  v ${indexCompare * rowHeight / 2} 
-  ${taskFromHorizontalOffsetValue}
-  V ${taskToEndPosition} 
-  h ${taskToHorizontalOffsetValue}`;
-  const trianglePoints = `${taskTo.x2},${taskToEndPosition} 
-  ${taskTo.x2 + 5},${taskToEndPosition + 5} 
-  ${taskTo.x2 + 5},${taskToEndPosition - 5}`;
+var drownPathAndTriangleRTL = function drownPathAndTriangleRTL(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent) {
+  var indexCompare = taskFrom.index > taskTo.index ? -1 : 1;
+  var taskToEndPosition = taskTo.y + taskHeight / 2;
+  var taskFromEndPosition = taskFrom.x1 - arrowIndent * 2;
+  var taskFromHorizontalOffsetValue = taskFromEndPosition > taskTo.x2 ? "" : "H " + (taskTo.x2 + arrowIndent);
+  var taskToHorizontalOffsetValue = taskFromEndPosition < taskTo.x2 ? -arrowIndent : taskTo.x2 - taskFrom.x1 + arrowIndent;
+  var path = "M " + taskFrom.x1 + " " + (taskFrom.y + taskHeight / 2) + " \n  h " + -arrowIndent + " \n  v " + indexCompare * rowHeight / 2 + " \n  " + taskFromHorizontalOffsetValue + "\n  V " + taskToEndPosition + " \n  h " + taskToHorizontalOffsetValue;
+  var trianglePoints = taskTo.x2 + "," + taskToEndPosition + " \n  " + (taskTo.x2 + 5) + "," + (taskToEndPosition + 5) + " \n  " + (taskTo.x2 + 5) + "," + (taskToEndPosition - 5);
   return [path, trianglePoints];
 };
 
@@ -1808,26 +1866,24 @@ var sortTasks = function sortTasks(taskA, taskB) {
   }
 };
 
-const BarDisplay = _ref => {
-  let {
-    x,
-    y,
-    type,
-    width,
-    height,
-    isSelected,
-    progressX,
-    progressWidth,
-    barCornerRadius,
-    styles,
-    onMouseDown
-  } = _ref;
-
-  const getProcessColor = () => {
+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,
+      onMouseDown = _ref.onMouseDown;
+
+  var getProcessColor = function getProcessColor() {
     return isSelected ? styles.progressSelectedColor : styles.progressColor;
   };
 
-  const getBarColor = () => {
+  var getBarColor = function getBarColor() {
     return isSelected ? styles.backgroundSelectedColor : styles.backgroundColor;
   };
 
@@ -1874,15 +1930,13 @@ const BarDisplay = _ref => {
 
 var styles$6 = {"barWrapper":"_KxSXS","barHandle":"_3w_5u","barBackground":"_31ERP"};
 
-const BarDateHandle = _ref => {
-  let {
-    x,
-    y,
-    width,
-    height,
-    barCornerRadius,
-    onMouseDown
-  } = _ref;
+var BarDateHandle = function BarDateHandle(_ref) {
+  var x = _ref.x,
+      y = _ref.y,
+      width = _ref.width,
+      height = _ref.height,
+      barCornerRadius = _ref.barCornerRadius,
+      onMouseDown = _ref.onMouseDown;
   return React__default.createElement("rect", {
     x: x,
     y: y,
@@ -1895,22 +1949,22 @@ const BarDateHandle = _ref => {
   });
 };
 
-const BarProgressHandle = _ref => {
+var BarProgressHandle = function BarProgressHandle(_ref) {
+  _objectDestructuringEmpty(_ref);
+
   return React__default.createElement("div", null);
 };
 
-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;
+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;
 
   if (type == "planned") {
     if ((task === null || task === void 0 ? void 0 : task.x1) >= 0 && (task === null || task === void 0 ? void 0 : task.x2) >= 0) return React__default.createElement("g", {
@@ -1929,7 +1983,7 @@ const Bar = _ref => {
       barCornerRadius: task.barCornerRadius,
       styles: task.styles,
       isSelected: isSelected,
-      onMouseDown: e => {
+      onMouseDown: function onMouseDown(e) {
         isDateChangeable && onEventStart("move", task, e, "planned");
       }
     }), React__default.createElement("g", {
@@ -1940,7 +1994,7 @@ const Bar = _ref => {
       width: task.handleWidth,
       height: handleHeight,
       barCornerRadius: task.barCornerRadius,
-      onMouseDown: e => {
+      onMouseDown: function onMouseDown(e) {
         onEventStart("start", task, e, "planned");
       }
     }), React__default.createElement(BarDateHandle, {
@@ -1949,12 +2003,12 @@ const Bar = _ref => {
       width: task.handleWidth,
       height: handleHeight,
       barCornerRadius: task.barCornerRadius,
-      onMouseDown: e => {
+      onMouseDown: function onMouseDown(e) {
         onEventStart("end", task, e, "planned");
       }
     })), isProgressChangeable && React__default.createElement(BarProgressHandle, {
       progressPoint: progressPoint,
-      onMouseDown: e => {
+      onMouseDown: function onMouseDown(e) {
         onEventStart("progress", task, e, "planned");
       }
     })));else return React__default.createElement("g", {
@@ -1978,7 +2032,7 @@ const Bar = _ref => {
       barCornerRadius: task.barCornerRadius,
       styles: task.styles,
       isSelected: isSelected,
-      onMouseDown: e => {
+      onMouseDown: function onMouseDown(e) {
         isDateChangeable && onEventStart("move", task, e, "actual");
       }
     }), React__default.createElement("g", {
@@ -1989,7 +2043,7 @@ const Bar = _ref => {
       width: task.handleWidth,
       height: handleHeight,
       barCornerRadius: task.barCornerRadius,
-      onMouseDown: e => {
+      onMouseDown: function onMouseDown(e) {
         onEventStart("start", task, e, "actual");
       }
     }), React__default.createElement(BarDateHandle, {
@@ -1998,12 +2052,12 @@ const Bar = _ref => {
       width: task.handleWidth,
       height: handleHeight,
       barCornerRadius: task.barCornerRadius,
-      onMouseDown: e => {
+      onMouseDown: function onMouseDown(e) {
         onEventStart("end", task, e, "actual");
       }
     })), isProgressChangeable && React__default.createElement(BarProgressHandle, {
       progressPoint: progressPoint,
-      onMouseDown: e => {
+      onMouseDown: function onMouseDown(e) {
         onEventStart("progress", task, e, "actual");
       }
     })));
@@ -2015,16 +2069,14 @@ const Bar = _ref => {
   }
 };
 
-const BarSmall = _ref => {
-  let {
-    task,
-    type,
-    isProgressChangeable,
-    isDateChangeable,
-    onEventStart,
-    isSelected
-  } = _ref;
-  const progressPoint = getProgressPoint(task.progressWidth + task.x1, task.y, task.height);
+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);
   return React__default.createElement("g", {
     className: styles$6.barWrapper,
     tabIndex: 0
@@ -2041,14 +2093,14 @@ const BarSmall = _ref => {
     barCornerRadius: task.barCornerRadius,
     styles: task.styles,
     isSelected: isSelected,
-    onMouseDown: e => {
+    onMouseDown: function onMouseDown(e) {
       isDateChangeable && onEventStart("move", task, e);
     }
   }), React__default.createElement("g", {
     className: "handleGroup"
   }, isProgressChangeable && React__default.createElement(BarProgressHandle, {
     progressPoint: progressPoint,
-    onMouseDown: e => {
+    onMouseDown: function onMouseDown(e) {
       onEventStart("progress", task, e);
     }
   })));
@@ -2056,17 +2108,14 @@ const BarSmall = _ref => {
 
 var styles$7 = {"milestoneWrapper":"_RRr13","milestoneBackground":"_2P2B1"};
 
-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 = () => {
+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() {
     return isSelected ? task.styles.backgroundSelectedColor : task.styles.backgroundColor;
   };
 
@@ -2083,7 +2132,7 @@ const Milestone = _ref => {
     ry: task.barCornerRadius,
     transform: transform,
     className: styles$7.milestoneBackground,
-    onMouseDown: e => {
+    onMouseDown: function onMouseDown(e) {
       isDateChangeable && onEventStart("move", task, e);
     }
   }));
@@ -2091,16 +2140,14 @@ const Milestone = _ref => {
 
 var styles$8 = {"projectWrapper":"_1KJ6x","projectBackground":"_2RbVy","projectTop":"_2pZMF"};
 
-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(",");
+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(",");
   return React__default.createElement("g", {
     tabIndex: 0,
     className: styles$8.projectWrapper
@@ -2141,16 +2188,18 @@ const Project = _ref => {
   }));
 };
 
-const TaskItem = props => {
-  const {
-    task,
-    isDelete,
-    isSelected,
-    onEventStart
-  } = { ...props
-  };
-  const [taskItem, setTaskItem] = React.useState([React__default.createElement("div", null)]);
-  React.useEffect(() => {
+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 () {
     switch (task.typeInternal) {
       case "milestone":
         if (task.x1 >= 0 && task.actualx1 >= 0) setTaskItem([React__default.createElement(Milestone, Object.assign({}, props))]);else setTaskItem([]);
@@ -2166,27 +2215,27 @@ const TaskItem = props => {
 
       default:
         {
-          let taskItem = [];
+          var _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: e => {
+    onKeyDown: function onKeyDown(e) {
       switch (e.key) {
         case "Delete":
           {
@@ -2197,20 +2246,20 @@ const TaskItem = props => {
 
       e.stopPropagation();
     },
-    onMouseEnter: e => {
+    onMouseEnter: function onMouseEnter(e) {
       onEventStart("mouseenter", task, e, "planned");
     },
-    onMouseLeave: e => {
+    onMouseLeave: function onMouseLeave(e) {
       onEventStart("mouseleave", task, e, "planned");
     },
-    onDoubleClick: e => {
+    onDoubleClick: function onDoubleClick(e) {
       onEventStart("dblclick", task, e, "planned");
     },
-    onClick: e => {
+    onClick: function onClick(e) {
       onEventStart("click", task, e, "planned");
     }
   }, taskItem[0]), React__default.createElement("g", {
-    onKeyDown: e => {
+    onKeyDown: function onKeyDown(e) {
       switch (e.key) {
         case "Delete":
           {
@@ -2221,74 +2270,82 @@ const TaskItem = props => {
 
       e.stopPropagation();
     },
-    onMouseEnter: e => {
+    onMouseEnter: function onMouseEnter(e) {
       onEventStart("mouseenter", task, e, "actual");
     },
-    onMouseLeave: e => {
+    onMouseLeave: function onMouseLeave(e) {
       onEventStart("mouseleave", task, e, "actual");
     },
-    onDoubleClick: e => {
+    onDoubleClick: function onDoubleClick(e) {
       onEventStart("dblclick", task, e, "actual");
     },
-    onClick: e => {
+    onClick: function onClick(e) {
       onEventStart("click", task, e, "actual");
     }
   }, taskItem[1]));
 };
 
-const TaskGanttContent = _ref => {
+var TaskGanttContent = function TaskGanttContent(_ref) {
   var _svg$current;
 
-  let {
-    tasks,
-    dates,
-    ganttEvent,
-    selectedTask,
-    rowHeight,
-    columnWidth,
-    timeStep,
-    svg,
-    taskHeight,
-    arrowIndent,
-    fontFamily,
-    fontSize,
-    rtl,
-    setGanttEvent,
-    setFailedTask,
-    setSelectedTask,
-    onDateChange,
-    onProgressChange,
-    onDoubleClick,
-    onClick,
-    onDelete
-  } = _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(() => {
-    const dateDelta = dates[1].getTime() - dates[0].getTime() - dates[1].getTimezoneOffset() * 60 * 1000 + dates[0].getTimezoneOffset() * 60 * 1000;
-    const newXStep = timeStep * columnWidth / dateDelta;
+  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,
+      setGanttEvent = _ref.setGanttEvent,
+      setFailedTask = _ref.setFailedTask,
+      setSelectedTask = _ref.setSelectedTask,
+      onDateChange = _ref.onDateChange,
+      onProgressChange = _ref.onProgressChange,
+      onDoubleClick = _ref.onDoubleClick,
+      onClick = _ref.onClick,
+      onDelete = _ref.onDelete;
+  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 () {
+    var dateDelta = dates[1].getTime() - dates[0].getTime() - dates[1].getTimezoneOffset() * 60 * 1000 + dates[0].getTimezoneOffset() * 60 * 1000;
+    var newXStep = timeStep * columnWidth / dateDelta;
     setXStep(newXStep);
   }, [columnWidth, dates, timeStep]);
-  React.useEffect(() => {
-    const handleMouseMove = function (event) {
+  React.useEffect(function () {
+    var handleMouseMove = function handleMouseMove(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;
-        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);
+        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;
 
         if (isChanged) {
           setGanttEvent({
             action: ganttEvent.action,
-            changedTask
+            changedTask: changedTask
           });
         }
 
@@ -2298,41 +2355,40 @@ const TaskGanttContent = _ref => {
       }
     };
 
-    const handleMouseUp = function (event) {
+    var handleMouseUp = function handleMouseUp(event) {
       try {
         var _svg$current$getScree2;
 
-        function _temp5() {
+        var _temp6 = function _temp6() {
           if (!operationSuccess) {
             setFailedTask(originalSelectedTask);
           }
-        }
+        };
 
-        const {
-          action,
-          originalSelectedTask,
-          changedTask,
-          type
-        } = ganttEvent;
+        var action = ganttEvent.action,
+            originalSelectedTask = ganttEvent.originalSelectedTask,
+            changedTask = ganttEvent.changedTask,
+            type = ganttEvent.type;
         if (!changedTask || !point || !(svg !== null && svg !== void 0 && svg.current) || !originalSelectedTask) return Promise.resolve();
         event.preventDefault();
         point.x = event.clientX;
-        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;
+        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;
         svg.current.removeEventListener("mousemove", handleMouseMove);
         svg.current.removeEventListener("mouseup", handleMouseUp);
         setGanttEvent({
           action: ""
         });
         setIsMoving(false);
-        let operationSuccess = true;
+        var operationSuccess = true;
 
-        const _temp4 = function () {
+        var _temp7 = function () {
           if ((action === "move" || action === "end" || action === "start") && onDateChange && isNotLikeOriginal) {
-            const _temp = _catch(function () {
+            var _temp8 = _catch(function () {
               return Promise.resolve(onDateChange(newChangedTask, newChangedTask.barChildren)).then(function (result) {
                 if (result !== undefined) {
                   operationSuccess = result;
@@ -2342,11 +2398,11 @@ const TaskGanttContent = _ref => {
               operationSuccess = false;
             });
 
-            if (_temp && _temp.then) return _temp.then(function () {});
+            if (_temp8 && _temp8.then) return _temp8.then(function () {});
           } else {
-            const _temp3 = function () {
+            var _temp9 = function () {
               if (onProgressChange && isNotLikeOriginal) {
-                const _temp2 = _catch(function () {
+                var _temp10 = _catch(function () {
                   return Promise.resolve(onProgressChange(newChangedTask, newChangedTask.barChildren)).then(function (result) {
                     if (result !== undefined) {
                       operationSuccess = result;
@@ -2356,15 +2412,15 @@ const TaskGanttContent = _ref => {
                   operationSuccess = false;
                 });
 
-                if (_temp2 && _temp2.then) return _temp2.then(function () {});
+                if (_temp10 && _temp10.then) return _temp10.then(function () {});
               }
             }();
 
-            if (_temp3 && _temp3.then) return _temp3.then(function () {});
+            if (_temp9 && _temp9.then) return _temp9.then(function () {});
           }
         }();
 
-        return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp5) : _temp5(_temp4));
+        return Promise.resolve(_temp7 && _temp7.then ? _temp7.then(_temp6) : _temp6(_temp7));
       } catch (e) {
         return Promise.reject(e);
       }
@@ -2377,7 +2433,7 @@ const TaskGanttContent = _ref => {
     }
   }, [ganttEvent, xStep, initEventX1Delta, onProgressChange, timeStep, onDateChange, svg, isMoving, point, rtl, setFailedTask, setGanttEvent]);
 
-  const handleBarEventStart = function (action, task, event, type) {
+  var handleBarEventStart = function handleBarEventStart(action, task, event, type) {
     try {
       return Promise.resolve(function () {
         if (!event) {
@@ -2386,15 +2442,15 @@ const TaskGanttContent = _ref => {
           }
         } else return function () {
           if (isKeyboardEvent(event)) {
-            const _temp8 = function () {
+            var _temp14 = function () {
               if (action === "delete") {
-                const _temp7 = function () {
+                var _temp15 = function () {
                   if (onDelete) {
-                    const _temp6 = _catch(function () {
+                    var _temp16 = _catch(function () {
                       return Promise.resolve(onDelete(task)).then(function (result) {
                         if (result !== undefined && result) {
                           setGanttEvent({
-                            action,
+                            action: action,
                             changedTask: task
                           });
                         }
@@ -2403,19 +2459,19 @@ const TaskGanttContent = _ref => {
                       console.error("Error on Delete. " + error);
                     });
 
-                    if (_temp6 && _temp6.then) return _temp6.then(function () {});
+                    if (_temp16 && _temp16.then) return _temp16.then(function () {});
                   }
                 }();
 
-                if (_temp7 && _temp7.then) return _temp7.then(function () {});
+                if (_temp15 && _temp15.then) return _temp15.then(function () {});
               }
             }();
 
-            if (_temp8 && _temp8.then) return _temp8.then(function () {});
+            if (_temp14 && _temp14.then) return _temp14.then(function () {});
           } else if (action === "mouseenter") {
             if (!ganttEvent.action) {
               setGanttEvent({
-                action,
+                action: action,
                 changedTask: task,
                 originalSelectedTask: task,
                 type: type
@@ -2436,17 +2492,17 @@ const TaskGanttContent = _ref => {
 
             if (!(svg !== null && svg !== void 0 && svg.current) || !point) return;
             point.x = event.clientX;
-            const cursor = point.matrixTransform((_svg$current$getScree3 = svg.current.getScreenCTM()) === null || _svg$current$getScree3 === void 0 ? void 0 : _svg$current$getScree3.inverse());
+            var 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
@@ -2463,8 +2519,8 @@ const TaskGanttContent = _ref => {
     className: "content"
   }, React__default.createElement("g", {
     className: "arrows"
-  }, tasks.map(_task => {
-    const task = _task.start.getTime() > 0 && _task.end.getTime() > 0 ? _task : undefined;
+  }, tasks.map(function (_task) {
+    var task = _task.start.getTime() > 0 && _task.end.getTime() > 0 ? _task : undefined;
 
     if (!task) {
       return React__default.createElement("g", {
@@ -2475,18 +2531,20 @@ const TaskGanttContent = _ref => {
       });
     }
 
-    return task.barChildren.map(child => {
+    return task.barChildren.map(function (child) {
       var _task$criticalPathArr, _task$criticalPathArr2;
 
       if (task.x2 > task.x1 || task.actualx2 > task.actualx1) return React__default.createElement(Arrow, {
-        key: `Arrow from ${task.id} to ${tasks[child.index].id}`,
+        key: "Arrow from " + task.id + " to " + tasks[child.index].id,
         taskFrom: task,
         taskTo: tasks[child.index],
         rowHeight: rowHeight,
         taskHeight: taskHeight,
         arrowIndent: arrowIndent,
         rtl: rtl,
-        arrowColor: ((_task$criticalPathArr = task.criticalPathArrows) === null || _task$criticalPathArr === void 0 ? void 0 : (_task$criticalPathArr2 = _task$criticalPathArr.find(arrow => arrow.taskId == tasks[child.index].id)) === null || _task$criticalPathArr2 === void 0 ? void 0 : _task$criticalPathArr2.arrowColor) || "#808080"
+        arrowColor: ((_task$criticalPathArr = task.criticalPathArrows) === null || _task$criticalPathArr === void 0 ? void 0 : (_task$criticalPathArr2 = _task$criticalPathArr.find(function (arrow) {
+          return arrow.taskId == tasks[child.index].id;
+        })) === null || _task$criticalPathArr2 === void 0 ? void 0 : _task$criticalPathArr2.arrowColor) || "#808080"
       });else return React__default.createElement("g", {
         key: _task.id,
         style: {
@@ -2498,8 +2556,8 @@ const TaskGanttContent = _ref => {
     className: "bar",
     fontFamily: fontFamily,
     fontSize: fontSize
-  }, tasks.map(_task => {
-    const task = _task.start.getTime() > 0 && _task.end.getTime() > 0 ? _task : undefined;
+  }, tasks.map(function (_task) {
+    var task = _task.start.getTime() > 0 && _task.end.getTime() > 0 ? _task : undefined;
 
     if (!task) {
       return React__default.createElement("g", {
@@ -2818,8 +2876,12 @@ var Gantt = function Gantt(_ref) {
         secondaryPath = _getCriticalPaths[1];
 
     uncolorAll(tasks);
-    colorPath(secondaryPath, "#00ff00", tasks);
-    colorPath(primaryPath, "#ff0000", tasks);
+
+    if (scheduleType !== "lookAhead") {
+      colorPath(secondaryPath, "#00ff00", tasks);
+      colorPath(primaryPath, "#ff0000", tasks);
+    }
+
     setBarTasks(convertToBarTasks(filteredTasks, newDates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor));
   }, [tasks, viewMode, preStepsCount, rowHeight, barCornerRadius, columnWidth, taskHeight, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor, rtl, scrollX, onExpanderClick]);
   React.useEffect(function () {