gantt-task-react-powern 0.4.63 → 0.4.65

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);
@@ -277,13 +281,12 @@ var getDaysInMonth = function getDaysInMonth(month, year) {
 
 var styles = {"ganttTable":"_3_ygE","ganttTable_Header":"_1nBOt","ganttTable_HeaderSeparator":"_2eZzQ","ganttTable_HeaderItem":"_WuQ0f"};
 
-const TaskListHeaderDefault = _ref => {
-  let {
-    headerHeight,
-    fontFamily,
-    fontSize,
-    rowWidth
-  } = _ref;
+var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
+  var headerHeight = _ref.headerHeight,
+      fontFamily = _ref.fontFamily,
+      fontSize = _ref.fontSize,
+      rowWidth = _ref.rowWidth,
+      scheduleType = _ref.scheduleType;
   return React__default.createElement("div", {
     className: styles.ganttTable,
     style: {
@@ -310,8 +313,8 @@ const TaskListHeaderDefault = _ref => {
   }), React__default.createElement("div", {
     className: styles.ganttTable_HeaderItem,
     style: {
-      minWidth: parseInt(rowWidth) * 1.8,
-      maxWidth: parseInt(rowWidth) * 1.8
+      minWidth: parseInt(rowWidth) * 2,
+      maxWidth: parseInt(rowWidth) * 2
     }
   }, "Task"), React__default.createElement("div", {
     className: styles.ganttTable_HeaderSeparator,
@@ -322,7 +325,7 @@ const 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", {
@@ -334,65 +337,84 @@ const 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","taskListCell":"_3lLk3","taskListNameWrapper":"_nI1Xw","taskListExpander":"_2QjE6","taskListExpanderPlaceholder":"_1fnLB","taskListEmptyExpander":"_2TfEi","taskListText":"_2ZvXU","taskListCheckbox":"_1KIaF"};
+var styles$1 = {"taskListWrapper":"_3ZbQT","taskListTableRow":"_34SS0","taskListLookAheadRow":"_GzvG4","taskListMilestoneRow":"_3Ykml","taskListCell":"_3lLk3","taskListNameWrapper":"_nI1Xw","taskListExpander":"_2QjE6","taskListExpanderPlaceholder":"_1fnLB","taskListEmptyExpander":"_2TfEi","taskListText":"_2ZvXU"};
 
-const localeDateStringCache = {};
+var localeDateStringCache = {};
 
-const toLocaleDateStringFactory = locale => (date, dateTimeOptions) => {
-  if (!date || date.getTime() === 0) return "";
-  const key = date.toString();
-  let lds = localeDateStringCache[key];
+var toLocaleDateStringFactory = function toLocaleDateStringFactory(locale) {
+  return function (date, dateTimeOptions) {
+    if (!date || date.getTime() === 0) return "";
+    var key = date.toString();
+    var lds = localeDateStringCache[key];
 
-  if (!lds) {
-    lds = date.toLocaleDateString(locale, dateTimeOptions);
-    localeDateStringCache[key] = lds;
-  }
+    if (!lds) {
+      lds = date.toLocaleDateString(locale, dateTimeOptions);
+      localeDateStringCache[key] = lds;
+    }
 
-  return lds;
+    return lds;
+  };
 };
 
-const dateTimeOptions = {
+var dateTimeOptions = {
   year: "numeric",
   month: "numeric",
   day: "numeric"
 };
-const TaskListTableDefault = _ref => {
-  let {
-    rowHeight,
-    rowWidth,
-    tasks,
-    leafTasks,
-    fontFamily,
-    fontSize,
-    locale,
-    onExpanderClick,
-    taskLabelRenderer = t => " " + t.name,
-    selectedTaskIds = [],
-    onTaskSelectionChange
-  } = _ref;
-  const toLocaleDateString = React.useMemo(() => toLocaleDateStringFactory(locale), [locale]);
-
-  const handleCheckboxChange = (taskId, isChecked) => {
-    if (!onTaskSelectionChange) return;
-    const newSelectedIds = isChecked ? [...selectedTaskIds, taskId] : selectedTaskIds.filter(id => id !== taskId);
-    onTaskSelectionChange(newSelectedIds);
-  };
-
-  const leafTaskIds = React.useMemo(() => new Set(leafTasks.map(t => t.id)), [leafTasks]);
+var TaskListTableDefault = function TaskListTableDefault(_ref) {
+  var rowHeight = _ref.rowHeight,
+      rowWidth = _ref.rowWidth,
+      tasks = _ref.tasks,
+      scheduleType = _ref.scheduleType,
+      leafTasks = _ref.leafTasks,
+      fontFamily = _ref.fontFamily,
+      fontSize = _ref.fontSize,
+      locale = _ref.locale,
+      onExpanderClick = _ref.onExpanderClick,
+      _ref$taskLabelRendere = _ref.taskLabelRenderer,
+      taskLabelRenderer = _ref$taskLabelRendere === void 0 ? function (t) {
+    return " " + t.name;
+  } : _ref$taskLabelRendere;
+  var toLocaleDateString = React.useMemo(function () {
+    return toLocaleDateStringFactory(locale);
+  }, [locale]);
+  var leafTaskIds = React.useMemo(function () {
+    return new Set(leafTasks.map(function (t) {
+      return t.id;
+    }));
+  }, [leafTasks]);
   return React__default.createElement("div", {
     className: styles$1.taskListWrapper,
     style: {
       fontFamily: fontFamily,
       fontSize: fontSize
     }
-  }, tasks.map(t => {
-    let expanderSymbol = "";
+  }, tasks.map(function (t) {
+    var expanderSymbol = "";
 
     if (!leafTaskIds.has(t.id)) {
       if (t.hideChildren === false) {
@@ -402,27 +424,13 @@ const TaskListTableDefault = _ref => {
       }
     }
 
-    const isChecked = selectedTaskIds.includes(t.id);
     return React__default.createElement("div", {
-      className: styles$1.taskListTableRow,
+      className: t.type === "milestone" ? styles$1.taskListMilestoneRow : scheduleType === "lookAhead" ? styles$1.taskListLookAheadRow : styles$1.taskListTableRow,
       style: {
         height: rowHeight
       },
-      key: `${t.id}row`
-    }, React__default.createElement("div", {
-      className: styles$1.taskListCell,
-      style: {
-        minWidth: "40px",
-        maxWidth: "40px"
-      }
+      key: t.id + "row"
     }, React__default.createElement("div", {
-      className: styles$1.taskListCheckbox
-    }, React__default.createElement("input", {
-      type: "checkbox",
-      checked: isChecked,
-      onChange: e => handleCheckboxChange(t.id, e.target.checked),
-      onClick: e => e.stopPropagation()
-    }))), React__default.createElement("div", {
       className: styles$1.taskListCell,
       style: {
         minWidth: parseInt(rowWidth) * 0.8,
@@ -432,11 +440,13 @@ const TaskListTableDefault = _ref => {
     }, React__default.createElement("div", {
       className: styles$1.taskListNameWrapper,
       style: {
-        paddingLeft: `${t.depth * 4}px`
+        paddingLeft: t.depth * 4 + "px"
       }
     }, !leafTaskIds.has(t.id) ? React__default.createElement("div", {
       className: styles$1.taskListExpander,
-      onClick: () => onExpanderClick(t)
+      onClick: function onClick() {
+        return onExpanderClick(t);
+      }
     }, expanderSymbol) : React__default.createElement("div", {
       className: styles$1.taskListExpanderPlaceholder
     }), React__default.createElement("div", {
@@ -464,7 +474,23 @@ const TaskListTableDefault = _ref => {
       }
     }, React__default.createElement("div", {
       className: styles$1.taskListText
-    }, "\u00A0", toLocaleDateString(t.start, dateTimeOptions))), React__default.createElement("div", {
+    }, "\xA0", toLocaleDateString(t.start, dateTimeOptions))), 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.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,
@@ -472,38 +498,43 @@ const TaskListTableDefault = _ref => {
       }
     }, React__default.createElement("div", {
       className: styles$1.taskListText
-    }, "\u00A0", toLocaleDateString(t.end, dateTimeOptions))));
+    }, "\xA0", toLocaleDateString(t.actualEnd, dateTimeOptions))));
   }));
 };
 
 var styles$2 = {"tooltipDefaultContainer":"_3T42e","tooltipDefaultContainerParagraph":"_29NTg","tooltipDetailsContainer":"_25P-K","tooltipDetailsContainerHidden":"_3gVAq"};
 
-const Tooltip = _ref => {
-  let {
-    task,
-    type,
-    rowHeight,
-    rtl,
-    svgContainerHeight,
-    svgContainerWidth,
-    scrollX,
-    scrollY,
-    arrowIndent,
-    fontSize,
-    fontFamily,
-    headerHeight,
-    taskListWidth,
-    TooltipContent
-  } = _ref;
-  const tooltipRef = React.useRef(null);
-  const [relatedY, setRelatedY] = React.useState(0);
-  const [relatedX, setRelatedX] = React.useState(0);
-  React.useEffect(() => {
+var Tooltip = function Tooltip(_ref) {
+  var task = _ref.task,
+      type = _ref.type,
+      rowHeight = _ref.rowHeight,
+      rtl = _ref.rtl,
+      svgContainerHeight = _ref.svgContainerHeight,
+      svgContainerWidth = _ref.svgContainerWidth,
+      scrollX = _ref.scrollX,
+      scrollY = _ref.scrollY,
+      arrowIndent = _ref.arrowIndent,
+      fontSize = _ref.fontSize,
+      fontFamily = _ref.fontFamily,
+      headerHeight = _ref.headerHeight,
+      taskListWidth = _ref.taskListWidth,
+      TooltipContent = _ref.TooltipContent;
+  var tooltipRef = React.useRef(null);
+
+  var _useState = React.useState(0),
+      relatedY = _useState[0],
+      setRelatedY = _useState[1];
+
+  var _useState2 = React.useState(0),
+      relatedX = _useState2[0],
+      setRelatedX = _useState2[1];
+
+  React.useEffect(function () {
     if (tooltipRef.current) {
-      const tooltipHeight = tooltipRef.current.offsetHeight * 1.1;
-      const tooltipWidth = tooltipRef.current.offsetWidth * 1.1;
-      let newRelatedY = task.index * rowHeight - scrollY + headerHeight;
-      let newRelatedX;
+      var tooltipHeight = tooltipRef.current.offsetHeight * 1.1;
+      var tooltipWidth = tooltipRef.current.offsetWidth * 1.1;
+      var newRelatedY = task.index * rowHeight - scrollY + headerHeight;
+      var newRelatedX;
 
       if (rtl) {
         newRelatedX = task.x1 - arrowIndent * 1.5 - tooltipWidth - scrollX;
@@ -512,7 +543,7 @@ const Tooltip = _ref => {
           newRelatedX = task.x2 + arrowIndent * 1.5 - scrollX;
         }
 
-        const tooltipLeftmostPoint = tooltipWidth + newRelatedX;
+        var tooltipLeftmostPoint = tooltipWidth + newRelatedX;
 
         if (tooltipLeftmostPoint > svgContainerWidth) {
           newRelatedX = svgContainerWidth - tooltipWidth;
@@ -520,10 +551,12 @@ const Tooltip = _ref => {
         }
       } else {
         newRelatedX = type == "planned" ? task.x2 + arrowIndent * 1.5 + taskListWidth - scrollX : task.actualx2 + arrowIndent * 1.5 + taskListWidth - scrollX;
-        const tooltipLeftmostPoint = tooltipWidth + newRelatedX;
-        const fullChartWidth = taskListWidth + svgContainerWidth;
 
-        if (tooltipLeftmostPoint > fullChartWidth) {
+        var _tooltipLeftmostPoint = tooltipWidth + newRelatedX;
+
+        var fullChartWidth = taskListWidth + svgContainerWidth;
+
+        if (_tooltipLeftmostPoint > fullChartWidth) {
           newRelatedX = type == "planned" ? task.x1 + taskListWidth - arrowIndent * 1.5 - scrollX - tooltipWidth : task.actualx1 + taskListWidth - arrowIndent * 1.5 - scrollX - tooltipWidth;
         }
 
@@ -533,7 +566,7 @@ const Tooltip = _ref => {
         }
       }
 
-      const tooltipLowerPoint = tooltipHeight + newRelatedY - scrollY;
+      var tooltipLowerPoint = tooltipHeight + newRelatedY - scrollY;
 
       if (tooltipLowerPoint > svgContainerHeight - scrollY) {
         newRelatedY = svgContainerHeight - tooltipHeight;
@@ -557,16 +590,14 @@ const Tooltip = _ref => {
     type: type
   }));
 };
-const StandardTooltipContent = _ref2 => {
-  let {
-    task,
-    fontSize,
-    fontFamily,
-    type
-  } = _ref2;
-  const style = {
-    fontSize,
-    fontFamily
+var StandardTooltipContent = function StandardTooltipContent(_ref2) {
+  var task = _ref2.task,
+      fontSize = _ref2.fontSize,
+      fontFamily = _ref2.fontFamily,
+      type = _ref2.type;
+  var style = {
+    fontSize: fontSize,
+    fontFamily: fontFamily
   };
   if (type == "planned") return React__default.createElement("div", {
     className: styles$2.tooltipDefaultContainer,
@@ -575,37 +606,35 @@ const StandardTooltipContent = _ref2 => {
     style: {
       fontSize: fontSize + 6
     }
-  }, `${task.name}: Planned dates: `), React__default.createElement("b", null, `${task.start.getMonth() + 1}/${task.start.getDate()}/${task.start.getFullYear()} - ${task.end.getMonth() + 1}/${task.end.getDate()}/${task.end.getFullYear()}`), task.end.getTime() - task.start.getTime() !== 0 && React__default.createElement("p", {
+  }, task.name + ": Planned dates: "), React__default.createElement("b", null, task.start.getMonth() + 1 + "/" + task.start.getDate() + "/" + task.start.getFullYear() + " - " + (task.end.getMonth() + 1) + "/" + task.end.getDate() + "/" + task.end.getFullYear()), task.end.getTime() - task.start.getTime() !== 0 && React__default.createElement("p", {
     className: styles$2.tooltipDefaultContainerParagraph
-  }, `Duration: ${~~((task.end.getTime() - task.start.getTime()) / (1000 * 60 * 60 * 24))} day(s)`), React__default.createElement("p", {
+  }, "Duration: " + ~~((task.end.getTime() - task.start.getTime()) / (1000 * 60 * 60 * 24)) + " day(s)"), React__default.createElement("p", {
     className: styles$2.tooltipDefaultContainerParagraph
-  }, !!task.progress && `Progress: ${task.progress} %`));else return React__default.createElement("div", {
+  }, !!task.progress && "Progress: " + task.progress + " %"));else return React__default.createElement("div", {
     className: styles$2.tooltipDefaultContainer,
     style: style
   }, React__default.createElement("b", {
     style: {
       fontSize: fontSize + 6
     }
-  }, `${task.name}: Actual dates: `), React__default.createElement("b", null, `${task.actualStart.getMonth() + 1}/${task.actualStart.getDate()}/${task.actualStart.getFullYear()} - ${task.actualEnd.getMonth() + 1}/${task.actualEnd.getDate()}/${task.actualEnd.getFullYear()}`), task.actualEnd.getTime() - task.actualStart.getTime() !== 0 && React__default.createElement("p", {
+  }, task.name + ": Actual dates: "), React__default.createElement("b", null, task.actualStart.getMonth() + 1 + "/" + task.actualStart.getDate() + "/" + task.actualStart.getFullYear() + " - " + (task.actualEnd.getMonth() + 1) + "/" + task.actualEnd.getDate() + "/" + task.actualEnd.getFullYear()), task.actualEnd.getTime() - task.actualStart.getTime() !== 0 && React__default.createElement("p", {
     className: styles$2.tooltipDefaultContainerParagraph
-  }, `Duration: ${~~((task.actualEnd.getTime() - task.actualStart.getTime()) / (1000 * 60 * 60 * 24))} day(s)`), React__default.createElement("p", {
+  }, "Duration: " + ~~((task.actualEnd.getTime() - task.actualStart.getTime()) / (1000 * 60 * 60 * 24)) + " day(s)"), React__default.createElement("p", {
     className: styles$2.tooltipDefaultContainerParagraph
-  }, !!task.progress && `Progress: ${task.progress} %`));
+  }, !!task.progress && "Progress: " + task.progress + " %"));
 };
 
 var styles$3 = {"scroll":"_1eT-t"};
 
-const VerticalScroll = _ref => {
-  let {
-    scroll,
-    ganttHeight,
-    ganttFullHeight,
-    headerHeight,
-    rtl,
-    onScroll
-  } = _ref;
-  const scrollRef = React.useRef(null);
-  React.useEffect(() => {
+var VerticalScroll = function VerticalScroll(_ref) {
+  var scroll = _ref.scroll,
+      ganttHeight = _ref.ganttHeight,
+      ganttFullHeight = _ref.ganttFullHeight,
+      headerHeight = _ref.headerHeight,
+      rtl = _ref.rtl,
+      onScroll = _ref.onScroll;
+  var scrollRef = React.useRef(null);
+  React.useEffect(function () {
     if (scrollRef.current) {
       scrollRef.current.scrollTop = scroll;
     }
@@ -628,56 +657,53 @@ const VerticalScroll = _ref => {
   }));
 };
 
-const TaskList = _ref => {
-  let {
-    headerHeight,
-    fontFamily,
-    fontSize,
-    rowWidth,
-    rowHeight,
-    scrollY,
-    tasks,
-    leafTasks,
-    selectedTask,
-    setSelectedTask,
-    onExpanderClick,
-    locale,
-    ganttHeight,
-    taskListRef,
-    horizontalContainerClass,
-    TaskListHeader,
-    TaskListTable,
-    taskLabelRenderer,
-    selectedTaskIds,
-    onTaskSelectionChange
-  } = _ref;
-  const horizontalContainerRef = React.useRef(null);
-  React.useEffect(() => {
+var TaskList = function TaskList(_ref) {
+  var headerHeight = _ref.headerHeight,
+      fontFamily = _ref.fontFamily,
+      fontSize = _ref.fontSize,
+      rowWidth = _ref.rowWidth,
+      rowHeight = _ref.rowHeight,
+      scrollY = _ref.scrollY,
+      tasks = _ref.tasks,
+      scheduleType = _ref.scheduleType,
+      leafTasks = _ref.leafTasks,
+      selectedTask = _ref.selectedTask,
+      setSelectedTask = _ref.setSelectedTask,
+      onExpanderClick = _ref.onExpanderClick,
+      locale = _ref.locale,
+      ganttHeight = _ref.ganttHeight,
+      taskListRef = _ref.taskListRef,
+      horizontalContainerClass = _ref.horizontalContainerClass,
+      TaskListHeader = _ref.TaskListHeader,
+      TaskListTable = _ref.TaskListTable,
+      taskLabelRenderer = _ref.taskLabelRenderer;
+  var horizontalContainerRef = React.useRef(null);
+  React.useEffect(function () {
     if (horizontalContainerRef.current) {
       horizontalContainerRef.current.scrollTop = scrollY;
     }
   }, [scrollY]);
-  const headerProps = {
-    headerHeight,
-    fontFamily,
-    fontSize,
-    rowWidth
+  var headerProps = {
+    headerHeight: headerHeight,
+    fontFamily: fontFamily,
+    fontSize: fontSize,
+    rowWidth: rowWidth,
+    scheduleType: scheduleType
   };
-  const selectedTaskId = selectedTask ? selectedTask.id : "";
-  const tableProps = {
-    rowHeight,
-    rowWidth,
-    fontFamily,
-    fontSize,
-    tasks,
-    leafTasks,
-    locale,
+  var selectedTaskId = selectedTask ? selectedTask.id : "";
+  var tableProps = {
+    rowHeight: rowHeight,
+    rowWidth: rowWidth,
+    fontFamily: fontFamily,
+    fontSize: fontSize,
+    tasks: tasks,
+    leafTasks: leafTasks,
+    scheduleType: scheduleType,
+    locale: locale,
     selectedTaskId: selectedTaskId,
-    setSelectedTask,
-    onExpanderClick,
-    taskLabelRenderer,
-    selectedTaskIds,
-    onTaskSelectionChange
+    setSelectedTask: setSelectedTask,
+    onExpanderClick: onExpanderClick,
+    taskLabelRenderer: taskLabelRenderer
   };
   return React__default.createElement("div", {
     ref: taskListRef
@@ -690,21 +716,21 @@ const TaskList = _ref => {
   }, React__default.createElement(TaskListTable, Object.assign({}, tableProps))));
 };
 
-var styles$4 = {"gridRow":"_2dZTy","gridRowLine":"_3rUKi","gridTick":"_RuwuK","darkerGridRow":"_2M-tt"};
-
-const GridBody = _ref => {
-  let {
-    tasks,
-    dates,
-    rowHeight,
-    svgWidth,
-    columnWidth,
-    todayColor,
-    rtl
-  } = _ref;
-  let y = 0;
-  const gridRows = [];
-  const rowLines = [React__default.createElement("line", {
+var styles$4 = {"gridRow":"_2dZTy","gridRowLookAhead":"_2RRca","gridRowLine":"_3rUKi","gridTick":"_RuwuK","darkerGridRow":"_2M-tt"};
+
+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,
@@ -713,15 +739,16 @@ 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",
       y: y,
       width: svgWidth,
       height: rowHeight,
-      className: isDarkerRow ? styles$4.darkerGridRow : styles$4.gridRow
+      className: isDarkerRow ? styles$4.darkerGridRow : scheduleType === "lookAhead" ? styles$4.gridRowLookAhead : styles$4.gridRow
     }));
     rowLines.push(React__default.createElement("line", {
       key: "RowLine" + task.id,
@@ -734,13 +761,14 @@ const GridBody = _ref => {
     y += rowHeight;
   }
 
-  const now = new Date();
-  let tickX = 0;
-  const ticks = [];
-  let today = React__default.createElement("rect", null);
+  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,
@@ -760,6 +788,16 @@ const GridBody = _ref => {
       });
     }
 
+    if (date.getDay() === 6 || date.getDay() === 0) {
+      weekend.push(React__default.createElement("rect", {
+        x: tickX,
+        y: 0,
+        width: columnWidth,
+        height: y,
+        fill: weekendColor
+      }));
+    }
+
     if (rtl && i + 1 !== dates.length && date.getTime() >= now.getTime() && dates[i + 1].getTime() < now.getTime()) {
       today = React__default.createElement("rect", {
         x: tickX + columnWidth,
@@ -781,12 +819,14 @@ const GridBody = _ref => {
     className: "rowLines"
   }, rowLines), React__default.createElement("g", {
     className: "ticks"
-  }, ticks), React__default.createElement("g", {
+  }, ticks), scheduleType === "lookAhead" && React__default.createElement("g", {
+    className: "weekend"
+  }, weekend), React__default.createElement("g", {
     className: "today"
   }, today));
 };
 
-const Grid = props => {
+var Grid = function Grid(props) {
   return React__default.createElement("g", {
     className: "grid"
   }, React__default.createElement(GridBody, Object.assign({}, props)));
@@ -794,17 +834,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", {
@@ -818,30 +857,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,
@@ -850,8 +887,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;
@@ -874,25 +911,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;
@@ -915,26 +952,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;
@@ -959,27 +996,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) {
@@ -1005,24 +1042,24 @@ 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 = getLocalDayOfWeek(date, locale, "short") + ", " + 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,
@@ -1038,28 +1075,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,
@@ -1075,15 +1112,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", {
@@ -1095,9 +1132,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,
@@ -1113,37 +1150,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", {
@@ -1179,23 +1237,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", {
@@ -1211,8 +1273,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);
@@ -1222,51 +1284,43 @@ 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];
 };
 
-const convertToBarTasks = (tasks, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor) => {
-  let barTasks = tasks.map((t, i) => {
+var convertToBarTasks = function convertToBarTasks(tasks, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor) {
+  var barTasks = tasks.map(function (t, i) {
     return convertToBarTask(t, i, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor);
   });
-  barTasks = barTasks.map(task => {
-    const dependencies = task.dependencies || [];
+  barTasks = barTasks.map(function (task) {
+    var dependencies = task.dependencies || [];
 
-    for (let j = 0; j < dependencies.length; j++) {
-      const dependence = barTasks.findIndex(value => value.id === dependencies[j]);
+    var _loop = function _loop(j) {
+      var dependence = barTasks.findIndex(function (value) {
+        return value.id === dependencies[j];
+      });
       if (dependence !== -1 && task.start.getTime() > 0 && task.end.getTime() > 0) barTasks[dependence].barChildren.push(task);
+    };
+
+    for (var j = 0; j < dependencies.length; j++) {
+      _loop(j);
     }
 
     return task;
@@ -1274,8 +1328,8 @@ const convertToBarTasks = (tasks, dates, columnWidth, rowHeight, taskHeight, bar
   return barTasks;
 };
 
-const convertToBarTask = (task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor) => {
-  let barTask;
+var convertToBarTask = function convertToBarTask(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor) {
+  var barTask;
 
   switch (task.type) {
     case "milestone":
@@ -1294,13 +1348,13 @@ const convertToBarTask = (task, index, dates, columnWidth, rowHeight, taskHeight
   return barTask;
 };
 
-const convertToBar = (task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor) => {
-  let x1;
-  let x2;
-  let actualx1;
-  let actualx2;
-  let progressStartWidth;
-  let progressEndWidth;
+var convertToBar = function convertToBar(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor) {
+  var x1;
+  var x2;
+  var actualx1;
+  var actualx2;
+  var progressStartWidth;
+  var progressEndWidth;
 
   if (rtl) {
     x2 = task.start ? taskXCoordinateRTL(task.start, dates, columnWidth) : -1;
@@ -1316,100 +1370,108 @@ const convertToBar = (task, index, dates, columnWidth, rowHeight, taskHeight, ba
 
   progressStartWidth = actualx1 && x1 ? Math.abs(actualx1 - x1) : -1;
   progressEndWidth = actualx2 && x2 ? Math.abs(actualx2 - x2) : -1;
-  let typeInternal = task.type;
-  const [progressWidth, progressX] = progressWithByParams(actualx1, actualx2, task.progress, rtl);
-  const y = taskYCoordinate(index, rowHeight, taskHeight);
-  const hideChildren = task.hideChildren || false;
-  const styles = {
+  var typeInternal = task.type;
+
+  var _progressWithByParams = progressWithByParams(actualx1, actualx2, task.progress, rtl),
+      progressWidth = _progressWithByParams[0],
+      progressX = _progressWithByParams[1];
+
+  var y = taskYCoordinate(index, rowHeight, taskHeight);
+  var hideChildren = task.hideChildren || false;
+
+  var styles = _extends({
     backgroundColor: barBackgroundColor,
     backgroundSelectedColor: barBackgroundSelectedColor,
     progressColor: barProgressColor,
-    progressSelectedColor: barProgressSelectedColor,
-    ...task.styles
-  };
-  return { ...task,
-    typeInternal,
-    x1,
-    x2,
-    actualx1,
-    actualx2,
-    progressStartWidth,
-    progressEndWidth,
-    y,
-    index,
-    progressX,
-    progressWidth,
-    barCornerRadius,
-    handleWidth,
-    hideChildren,
+    progressSelectedColor: barProgressSelectedColor
+  }, task.styles);
+
+  return _extends({}, task, {
+    typeInternal: typeInternal,
+    x1: x1,
+    x2: x2,
+    actualx1: actualx1,
+    actualx2: actualx2,
+    progressStartWidth: progressStartWidth,
+    progressEndWidth: progressEndWidth,
+    y: y,
+    index: index,
+    progressX: progressX,
+    progressWidth: progressWidth,
+    barCornerRadius: barCornerRadius,
+    handleWidth: handleWidth,
+    hideChildren: hideChildren,
     height: taskHeight,
     barChildren: [],
-    styles
-  };
+    styles: styles
+  });
 };
 
-const convertToMilestone = (task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, milestoneBackgroundColor, milestoneBackgroundSelectedColor) => {
-  const x = task.start && task.end ? taskXCoordinate(task.start, dates, columnWidth) : 0;
-  const y = taskYCoordinate(index, rowHeight, taskHeight);
-  const x1 = task.start && task.end ? x - taskHeight * 0.5 : 0;
-  const x2 = task.start && task.end ? x + taskHeight * 0.5 : 0;
-  const rotatedHeight = taskHeight / 1.414;
-  const styles = {
+var convertToMilestone = function convertToMilestone(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, milestoneBackgroundColor, milestoneBackgroundSelectedColor) {
+  var x = task.start && task.end ? taskXCoordinate(task.start, dates, columnWidth) : 0;
+  var y = taskYCoordinate(index, rowHeight, taskHeight);
+  var x1 = task.start && task.end ? x - taskHeight * 0.5 : 0;
+  var x2 = task.start && task.end ? x + taskHeight * 0.5 : 0;
+  var rotatedHeight = taskHeight / 1.414;
+
+  var styles = _extends({
     backgroundColor: milestoneBackgroundColor,
     backgroundSelectedColor: milestoneBackgroundSelectedColor,
     progressColor: "",
-    progressSelectedColor: "",
-    ...task.styles
-  };
-  return { ...task,
-    x1,
-    x2,
+    progressSelectedColor: ""
+  }, task.styles);
+
+  return _extends({}, task, {
+    x1: x1,
+    x2: x2,
     actualx1: x1,
     actualx2: x2,
     progressStartWidth: 0,
     progressEndWidth: 0,
-    y,
-    index,
+    y: y,
+    index: index,
     progressX: 0,
     progressWidth: 0,
-    barCornerRadius,
-    handleWidth,
+    barCornerRadius: barCornerRadius,
+    handleWidth: handleWidth,
     typeInternal: task.type,
     progress: 0,
     height: rotatedHeight,
     hideChildren: undefined,
     barChildren: [],
-    styles
-  };
+    styles: styles
+  });
 };
 
-const taskXCoordinate = (xDate, dates, columnWidth) => {
-  const index = dates.findIndex(d => d.getTime() >= xDate.getTime()) - 1;
+var taskXCoordinate = function taskXCoordinate(xDate, dates, columnWidth) {
+  var index = dates.findIndex(function (d) {
+    return d.getTime() >= xDate.getTime();
+  }) - 1;
 
   if (index < 0) {
     return 0;
   }
 
-  const remainderMillis = xDate.getTime() - dates[index].getTime();
-  const percentOfInterval = remainderMillis / (dates[index + 1].getTime() - dates[index].getTime());
-  const x = index * columnWidth + percentOfInterval * columnWidth;
+  var remainderMillis = xDate.getTime() - dates[index].getTime();
+  var percentOfInterval = remainderMillis / (dates[index + 1].getTime() - dates[index].getTime());
+  var x = index * columnWidth + percentOfInterval * columnWidth;
   return x;
 };
 
-const taskXCoordinateRTL = (xDate, dates, columnWidth) => {
-  let x = taskXCoordinate(xDate, dates, columnWidth);
+var taskXCoordinateRTL = function taskXCoordinateRTL(xDate, dates, columnWidth) {
+  var x = taskXCoordinate(xDate, dates, columnWidth);
   x += columnWidth;
   return x;
 };
 
-const taskYCoordinate = (index, rowHeight, taskHeight) => {
-  const y = index * rowHeight + (rowHeight - taskHeight) / 2;
+var taskYCoordinate = function taskYCoordinate(index, rowHeight, taskHeight) {
+  var y = index * rowHeight + (rowHeight - taskHeight) / 2;
   return y;
 };
 
-const progressWithByParams = (taskX1, taskX2, progress, rtl) => {
-  const progressWidth = taskX2 > 0 && taskX1 > 0 ? (taskX2 - taskX1) * progress * 0.01 : 0;
-  let progressX;
+var progressWithByParams = function progressWithByParams(taskX1, taskX2, progress, rtl) {
+  var progressWidth = taskX2 > 0 && taskX1 > 0 ? (taskX2 - taskX1) * progress * 0.01 : 0;
+  var progressX;
 
   if (rtl) {
     progressX = taskX2 > 0 ? taskX2 - progressWidth : 0;
@@ -1419,79 +1481,79 @@ const progressWithByParams = (taskX1, taskX2, progress, rtl) => {
 
   return [progressWidth, progressX];
 };
-const getProgressPoint = (progressX, taskY, taskHeight) => {
-  const point = [progressX - 5, taskY + taskHeight, progressX + 5, taskY + taskHeight, progressX, taskY + taskHeight - 8.66];
+var getProgressPoint = function getProgressPoint(progressX, taskY, taskHeight) {
+  var point = [progressX - 5, taskY + taskHeight, progressX + 5, taskY + taskHeight, progressX, taskY + taskHeight - 8.66];
   return point.join(",");
 };
 
-const startByX = (x, xStep, task) => {
+var startByX = function startByX(x, xStep, task) {
   if (x >= task.x2 - task.handleWidth * 2) {
     x = task.x2 - task.handleWidth * 2;
   }
 
-  const steps = Math.round((x - task.x1) / xStep);
-  const additionalXValue = steps * xStep;
-  const newX = task.x1 + additionalXValue;
+  var steps = Math.round((x - task.x1) / xStep);
+  var additionalXValue = steps * xStep;
+  var newX = task.x1 + additionalXValue;
   return newX;
 };
 
-const startByActualX = (x, xStep, task) => {
+var startByActualX = function startByActualX(x, xStep, task) {
   if (x >= task.actualx2 - task.handleWidth * 2) {
     x = task.actualx2 - task.handleWidth * 2;
   }
 
-  const steps = Math.round((x - task.actualx1) / xStep);
-  const additionalXValue = steps * xStep;
-  const newX = task.actualx1 + additionalXValue;
+  var steps = Math.round((x - task.actualx1) / xStep);
+  var additionalXValue = steps * xStep;
+  var newX = task.actualx1 + additionalXValue;
   return newX;
 };
 
-const endByX = (x, xStep, task) => {
+var endByX = function endByX(x, xStep, task) {
   if (x <= task.x1 + task.handleWidth * 2) {
     x = task.x1 + task.handleWidth * 2;
   }
 
-  const steps = Math.round((x - task.x2) / xStep);
-  const additionalXValue = steps * xStep;
-  const newX = task.x2 + additionalXValue;
+  var steps = Math.round((x - task.x2) / xStep);
+  var additionalXValue = steps * xStep;
+  var newX = task.x2 + additionalXValue;
   return newX;
 };
 
-const endByActualX = (x, xStep, task) => {
+var endByActualX = function endByActualX(x, xStep, task) {
   if (x <= task.actualx1 + task.handleWidth * 2) {
     x = task.actualx1 + task.handleWidth * 2;
   }
 
-  const steps = Math.round((x - task.actualx2) / xStep);
-  const additionalXValue = steps * xStep;
-  const newX = task.actualx2 + additionalXValue;
+  var steps = Math.round((x - task.actualx2) / xStep);
+  var additionalXValue = steps * xStep;
+  var newX = task.actualx2 + additionalXValue;
   return newX;
 };
 
-const moveByX = (x, xStep, task) => {
-  const steps = Math.round((x - task.x1) / xStep);
-  const additionalXValue = steps * xStep;
-  const newX1 = task.x1 + additionalXValue;
-  const newX2 = newX1 + task.x2 - task.x1;
+var moveByX = function moveByX(x, xStep, task) {
+  var steps = Math.round((x - task.x1) / xStep);
+  var additionalXValue = steps * xStep;
+  var newX1 = task.x1 + additionalXValue;
+  var newX2 = newX1 + task.x2 - task.x1;
   return [newX1, newX2];
 };
 
-const moveByActualX = (x, xStep, task) => {
-  const steps = Math.round((x - task.actualx1) / xStep);
-  const additionalXValue = steps * xStep;
-  const newX1 = task.actualx1 + additionalXValue;
-  const newX2 = newX1 + task.actualx2 - task.actualx1;
+var moveByActualX = function moveByActualX(x, xStep, task) {
+  var steps = Math.round((x - task.actualx1) / xStep);
+  var additionalXValue = steps * xStep;
+  var newX1 = task.actualx1 + additionalXValue;
+  var newX2 = newX1 + task.actualx2 - task.actualx1;
   return [newX1, newX2];
 };
 
-const dateByX = (x, taskX, taskDate, xStep, timeStep) => {
-  let newDate = new Date((x - taskX) / xStep * timeStep + taskDate.getTime());
+var dateByX = function dateByX(x, taskX, taskDate, xStep, timeStep) {
+  var newDate = new Date((x - taskX) / xStep * timeStep + taskDate.getTime());
   newDate = new Date(newDate.getTime() + (newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 60000);
   return newDate;
 };
 
-const handleTaskBySVGMouseEvent = (svgX, action, selectedTask, type, xStep, timeStep, initEventX1Delta, rtl) => {
-  let result;
+var handleTaskBySVGMouseEvent = function handleTaskBySVGMouseEvent(svgX, action, selectedTask, type, xStep, timeStep, initEventX1Delta, rtl) {
+  var result;
 
   switch (selectedTask.type) {
     case "milestone":
@@ -1506,15 +1568,15 @@ const handleTaskBySVGMouseEvent = (svgX, action, selectedTask, type, xStep, time
   return result;
 };
 
-const handleTaskBySVGMouseEventForBar = (svgX, action, selectedTask, type, xStep, timeStep, initEventX1Delta, rtl) => {
-  const changedTask = { ...selectedTask
-  };
-  let isChanged = false;
+var handleTaskBySVGMouseEventForBar = function handleTaskBySVGMouseEventForBar(svgX, action, selectedTask, type, xStep, timeStep, initEventX1Delta, rtl) {
+  var changedTask = _extends({}, selectedTask);
+
+  var isChanged = false;
 
   switch (action) {
     case "start":
       {
-        const newX1 = type == "planned" ? startByX(svgX, xStep, selectedTask) : startByActualX(svgX, xStep, selectedTask);
+        var newX1 = type == "planned" ? startByX(svgX, xStep, selectedTask) : startByActualX(svgX, xStep, selectedTask);
         if (type == "planned") changedTask.x1 = newX1;else if (type == "actual") changedTask.actualx1 = newX1;
         isChanged = changedTask.x1 !== selectedTask.x1 || changedTask.actualx1 !== selectedTask.actualx1;
 
@@ -1527,7 +1589,10 @@ const handleTaskBySVGMouseEventForBar = (svgX, action, selectedTask, type, xStep
             if (type == "actual") changedTask.actualStart = dateByX(newX1, selectedTask.actualx1, selectedTask.actualStart, xStep, timeStep);
           }
 
-          const [progressWidth, progressX] = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl);
+          var _progressWithByParams2 = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl),
+              progressWidth = _progressWithByParams2[0],
+              progressX = _progressWithByParams2[1];
+
           changedTask.progressWidth = progressWidth;
           changedTask.progressX = progressX;
         }
@@ -1537,7 +1602,7 @@ const handleTaskBySVGMouseEventForBar = (svgX, action, selectedTask, type, xStep
 
     case "end":
       {
-        const newX2 = type == "planned" ? endByX(svgX, xStep, selectedTask) : endByActualX(svgX, xStep, selectedTask);
+        var newX2 = type == "planned" ? endByX(svgX, xStep, selectedTask) : endByActualX(svgX, xStep, selectedTask);
         if (type == "planned") changedTask.x2 = newX2;else if (type == "actual") changedTask.actualx2 = newX2;
         isChanged = changedTask.x2 !== selectedTask.x2 || changedTask.actualx2 !== selectedTask.actualx2;
 
@@ -1550,9 +1615,12 @@ const handleTaskBySVGMouseEventForBar = (svgX, action, selectedTask, type, xStep
             if (type == "actual") changedTask.actualEnd = dateByX(newX2, selectedTask.actualx2, selectedTask.actualEnd, xStep, timeStep);
           }
 
-          const [progressWidth, progressX] = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl);
-          changedTask.progressWidth = progressWidth;
-          changedTask.progressX = progressX;
+          var _progressWithByParams3 = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl),
+              _progressWidth = _progressWithByParams3[0],
+              _progressX = _progressWithByParams3[1];
+
+          changedTask.progressWidth = _progressWidth;
+          changedTask.progressX = _progressX;
         }
 
         break;
@@ -1560,7 +1628,10 @@ const handleTaskBySVGMouseEventForBar = (svgX, action, selectedTask, type, xStep
 
     case "move":
       {
-        const [newMoveX1, newMoveX2] = type == "planned" ? moveByX(svgX - initEventX1Delta, xStep, selectedTask) : moveByActualX(svgX - initEventX1Delta, xStep, selectedTask);
+        var _ref = type == "planned" ? moveByX(svgX - initEventX1Delta, xStep, selectedTask) : moveByActualX(svgX - initEventX1Delta, xStep, selectedTask),
+            newMoveX1 = _ref[0],
+            newMoveX2 = _ref[1];
+
         if (type == "planned") isChanged = newMoveX1 !== selectedTask.x1;
         if (type == "actual") isChanged = newMoveX1 !== selectedTask.actualx1;
 
@@ -1585,20 +1656,23 @@ const handleTaskBySVGMouseEventForBar = (svgX, action, selectedTask, type, xStep
   }
 
   return {
-    isChanged,
-    changedTask
+    isChanged: isChanged,
+    changedTask: changedTask
   };
 };
 
-const handleTaskBySVGMouseEventForMilestone = (svgX, action, selectedTask, xStep, timeStep, initEventX1Delta) => {
-  const changedTask = { ...selectedTask
-  };
-  let isChanged = false;
+var handleTaskBySVGMouseEventForMilestone = function handleTaskBySVGMouseEventForMilestone(svgX, action, selectedTask, xStep, timeStep, initEventX1Delta) {
+  var changedTask = _extends({}, selectedTask);
+
+  var isChanged = false;
 
   switch (action) {
     case "move":
       {
-        const [newMoveX1, newMoveX2] = moveByX(svgX - initEventX1Delta, xStep, selectedTask);
+        var _moveByX = moveByX(svgX - initEventX1Delta, xStep, selectedTask),
+            newMoveX1 = _moveByX[0],
+            newMoveX2 = _moveByX[1];
+
         isChanged = newMoveX1 !== selectedTask.x1;
 
         if (isChanged) {
@@ -1613,8 +1687,8 @@ const handleTaskBySVGMouseEventForMilestone = (svgX, action, selectedTask, xStep
   }
 
   return {
-    isChanged,
-    changedTask
+    isChanged: isChanged,
+    changedTask: changedTask
   };
 };
 
@@ -1622,13 +1696,21 @@ function isKeyboardEvent(event) {
   return event.key !== undefined;
 }
 function removeHiddenTasks(tasks) {
-  const groupedTasks = tasks.filter(t => t.hideChildren && t.type === "project");
+  var groupedTasks = tasks.filter(function (t) {
+    return t.hideChildren && t.type === "project";
+  });
 
   if (groupedTasks.length > 0) {
-    for (let i = 0; groupedTasks.length > i; i++) {
-      const groupedTask = groupedTasks[i];
-      const children = getChildren(tasks, groupedTask);
-      tasks = tasks.filter(t => children.indexOf(t) === -1);
+    var _loop = function _loop(i) {
+      var groupedTask = groupedTasks[i];
+      var children = getChildren(tasks, groupedTask);
+      tasks = tasks.filter(function (t) {
+        return children.indexOf(t) === -1;
+      });
+    };
+
+    for (var i = 0; groupedTasks.length > i; i++) {
+      _loop(i);
     }
   }
 
@@ -1636,25 +1718,29 @@ function removeHiddenTasks(tasks) {
 }
 
 function getChildren(taskList, task) {
-  let tasks = [];
+  var tasks = [];
 
   if (task.type !== "project") {
-    tasks = taskList.filter(t => t.dependencies && t.dependencies.indexOf(task.id) !== -1);
+    tasks = taskList.filter(function (t) {
+      return t.dependencies && t.dependencies.indexOf(task.id) !== -1;
+    });
   } else {
-    tasks = taskList.filter(t => t.project && t.project === task.id);
+    tasks = taskList.filter(function (t) {
+      return t.project && t.project === task.id;
+    });
   }
 
   var taskChildren = [];
-  tasks.forEach(t => {
-    taskChildren.push(...getChildren(taskList, t));
+  tasks.forEach(function (t) {
+    taskChildren.push.apply(taskChildren, getChildren(taskList, t));
   });
   tasks = tasks.concat(tasks, taskChildren);
   return tasks;
 }
 
-const sortTasks = (taskA, taskB) => {
-  const orderA = taskA.displayOrder || Number.MAX_VALUE;
-  const orderB = taskB.displayOrder || Number.MAX_VALUE;
+var sortTasks = function sortTasks(taskA, taskB) {
+  var orderA = taskA.displayOrder || Number.MAX_VALUE;
+  var orderB = taskB.displayOrder || Number.MAX_VALUE;
 
   if (orderA > orderB) {
     return 1;
@@ -1665,26 +1751,24 @@ const 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;
   };
 
@@ -1731,15 +1815,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,
@@ -1752,25 +1834,25 @@ 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.x1 && task.x2) return React__default.createElement("g", {
+    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", {
       className: styles$6.barWrapper,
       tabIndex: 0
     }, React__default.createElement(BarDisplay, {
@@ -1786,7 +1868,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", {
@@ -1797,7 +1879,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, {
@@ -1806,19 +1888,19 @@ 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", {
       className: styles$6.barWrapper,
       tabIndex: 0
     });
-  } else if (task.actualx1 && task.actualx2) {
+  } else if ((task === null || task === void 0 ? void 0 : task.actualx1) >= 0 && (task === null || task === void 0 ? void 0 : task.actualx2) >= 0) {
     return React__default.createElement("g", {
       className: styles$6.barWrapper,
       tabIndex: 0
@@ -1835,7 +1917,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", {
@@ -1846,7 +1928,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, {
@@ -1855,12 +1937,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");
       }
     })));
@@ -1872,16 +1954,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
@@ -1898,14 +1978,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);
     }
   })));
@@ -1913,17 +1993,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;
   };
 
@@ -1940,7 +2017,7 @@ const Milestone = _ref => {
     ry: task.barCornerRadius,
     transform: transform,
     className: styles$7.milestoneBackground,
-    onMouseDown: e => {
+    onMouseDown: function onMouseDown(e) {
       isDateChangeable && onEventStart("move", task, e);
     }
   }));
@@ -1948,16 +2025,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
@@ -1998,23 +2073,25 @@ 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":
-        setTaskItem([React__default.createElement(Milestone, Object.assign({}, props))]);
+        if (task.x1 >= 0 && task.actualx1 >= 0) setTaskItem([React__default.createElement(Milestone, Object.assign({}, props))]);else setTaskItem([]);
         break;
 
       case "project":
-        setTaskItem([React__default.createElement(Project, Object.assign({}, props))]);
+        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 && (task === null || task === void 0 ? void 0 : task.actualx1) >= 0 && (task === null || task === void 0 ? void 0 : task.actualx2) >= 0 && task.actualx2 > task.actualx1) setTaskItem([React__default.createElement(Project, Object.assign({}, props))]);else setTaskItem([]);
         break;
 
       case "smalltask":
@@ -2023,27 +2100,27 @@ const TaskItem = props => {
 
       default:
         {
-          let taskItem = [];
+          var _taskItem = [];
 
-          if (task.x1 && task.x2) {
-            taskItem.push(React__default.createElement(Bar, Object.assign({}, props, {
+          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, {
               type: "planned"
             })));
           }
 
-          if (task.actualx1 && task.actualx2) {
-            taskItem.push(React__default.createElement(Bar, Object.assign({}, props, {
+          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, {
               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":
           {
@@ -2054,20 +2131,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":
           {
@@ -2078,74 +2155,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
           });
         }
 
@@ -2155,41 +2240,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;
@@ -2199,11 +2283,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;
@@ -2213,15 +2297,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);
       }
@@ -2234,7 +2318,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) {
@@ -2243,15 +2327,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
                           });
                         }
@@ -2260,19 +2344,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
@@ -2293,17 +2377,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
@@ -2320,8 +2404,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", {
@@ -2332,26 +2416,33 @@ const TaskGanttContent = _ref => {
       });
     }
 
-    return task.barChildren.map(child => {
+    return task.barChildren.map(function (child) {
       var _task$criticalPathArr, _task$criticalPathArr2;
 
-      return React__default.createElement(Arrow, {
-        key: `Arrow from ${task.id} to ${tasks[child.index].id}`,
+      if (task.x2 > task.x1 || task.actualx2 > task.actualx1) return React__default.createElement(Arrow, {
+        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: {
+          height: taskHeight
+        }
       });
     });
   })), React__default.createElement("g", {
     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", {
@@ -2379,27 +2470,27 @@ const TaskGanttContent = _ref => {
 
 var styles$9 = {"ganttVerticalContainer":"_CZjuD","horizontalContainer":"_2B2zv","wrapper":"_3eULf"};
 
-const TaskGantt = _ref => {
-  let {
-    gridProps,
-    calendarProps,
-    barProps,
-    ganttHeight,
-    scrollY,
-    scrollX
-  } = _ref;
-  const ganttSVGRef = React.useRef(null);
-  const horizontalContainerRef = React.useRef(null);
-  const verticalGanttContainerRef = React.useRef(null);
-  const newBarProps = { ...barProps,
+var TaskGantt = function TaskGantt(_ref) {
+  var gridProps = _ref.gridProps,
+      calendarProps = _ref.calendarProps,
+      barProps = _ref.barProps,
+      ganttHeight = _ref.ganttHeight,
+      scrollY = _ref.scrollY,
+      scrollX = _ref.scrollX;
+  var ganttSVGRef = React.useRef(null);
+  var horizontalContainerRef = React.useRef(null);
+  var verticalGanttContainerRef = React.useRef(null);
+
+  var newBarProps = _extends({}, barProps, {
     svg: ganttSVGRef
-  };
-  React.useEffect(() => {
+  });
+
+  React.useEffect(function () {
     if (horizontalContainerRef.current) {
       horizontalContainerRef.current.scrollTop = scrollY;
     }
   }, [scrollY]);
-  React.useEffect(() => {
+  React.useEffect(function () {
     if (verticalGanttContainerRef.current) {
       verticalGanttContainerRef.current.scrollLeft = scrollX;
     }
@@ -2433,16 +2524,14 @@ const TaskGantt = _ref => {
 
 var styles$a = {"scrollWrapper":"_2k9Ys","scroll":"_19jgW"};
 
-const HorizontalScroll = _ref => {
-  let {
-    scroll,
-    svgWidth,
-    taskListWidth,
-    rtl,
-    onScroll
-  } = _ref;
-  const scrollRef = React.useRef(null);
-  React.useEffect(() => {
+var HorizontalScroll = function HorizontalScroll(_ref) {
+  var scroll = _ref.scroll,
+      svgWidth = _ref.svgWidth,
+      taskListWidth = _ref.taskListWidth,
+      rtl = _ref.rtl,
+      onScroll = _ref.onScroll;
+  var scrollRef = React.useRef(null);
+  React.useEffect(function () {
     if (scrollRef.current) {
       scrollRef.current.scrollLeft = scroll;
     }
@@ -2450,7 +2539,7 @@ const HorizontalScroll = _ref => {
   return React__default.createElement("div", {
     dir: "ltr",
     style: {
-      margin: rtl ? `0px ${taskListWidth}px 0px 0px` : `0px 0px 0px ${taskListWidth}px`
+      margin: rtl ? "0px " + taskListWidth + "px 0px 0px" : "0px 0px 0px " + taskListWidth + "px"
     },
     className: styles$a.scrollWrapper,
     onScroll: onScroll,
@@ -2467,6 +2556,12 @@ var Gantt = function Gantt(_ref) {
   var tasks = _ref.tasks,
       _ref$leafTasks = _ref.leafTasks,
       leafTasks = _ref$leafTasks === void 0 ? [] : _ref$leafTasks,
+      _ref$scheduleType = _ref.scheduleType,
+      scheduleType = _ref$scheduleType === void 0 ? "main" : _ref$scheduleType,
+      _ref$startDate = _ref.startDate,
+      startDate = _ref$startDate === void 0 ? new Date() : _ref$startDate,
+      _ref$endDate = _ref.endDate,
+      endDate = _ref$endDate === void 0 ? new Date() : _ref$endDate,
       _ref$headerHeight = _ref.headerHeight,
       headerHeight = _ref$headerHeight === void 0 ? 50 : _ref$headerHeight,
       _ref$columnWidth = _ref.columnWidth,
@@ -2523,6 +2618,8 @@ var Gantt = function Gantt(_ref) {
       arrowIndent = _ref$arrowIndent === void 0 ? 20 : _ref$arrowIndent,
       _ref$todayColor = _ref.todayColor,
       todayColor = _ref$todayColor === void 0 ? "rgba(252, 248, 227, 0.5)" : _ref$todayColor,
+      _ref$weekendColor = _ref.weekendColor,
+      weekendColor = _ref$weekendColor === void 0 ? "#f5f5f5" : _ref$weekendColor,
       viewDate = _ref.viewDate,
       _ref$TooltipContent = _ref.TooltipContent,
       TooltipContent = _ref$TooltipContent === void 0 ? StandardTooltipContent : _ref$TooltipContent,
@@ -2537,20 +2634,25 @@ var Gantt = function Gantt(_ref) {
       onDelete = _ref.onDelete,
       onSelect = _ref.onSelect,
       onExpanderClick = _ref.onExpanderClick,
-      taskLabelRenderer = _ref.taskLabelRenderer,
-      selectedTaskIds = _ref.selectedTaskIds,
-      onTaskSelectionChange = _ref.onTaskSelectionChange;
+      taskLabelRenderer = _ref.taskLabelRenderer;
   var wrapperRef = React.useRef(null);
   var taskListRef = React.useRef(null);
 
   var _useState = React.useState(function () {
     var _ganttDateRange = ganttDateRange(tasks, viewMode, preStepsCount),
-        startDate = _ganttDateRange[0],
-        endDate = _ganttDateRange[1];
+        startDateRange = _ganttDateRange[0],
+        endDateRange = _ganttDateRange[1];
+
+    if (scheduleType === "lookAhead") {
+      return {
+        viewMode: viewMode,
+        dates: seedDates(startDate, endDate, viewMode)
+      };
+    }
 
     return {
       viewMode: viewMode,
-      dates: seedDates(startDate, endDate, viewMode)
+      dates: seedDates(startDateRange, endDateRange, viewMode)
     };
   }),
       dateSetup = _useState[0],
@@ -2609,6 +2711,14 @@ var Gantt = function Gantt(_ref) {
       ignoreScrollEvent = _useState12[0],
       setIgnoreScrollEvent = _useState12[1];
 
+  React.useEffect(function () {
+    if (scheduleType === "lookAhead" && startDate && endDate) {
+      setDateSetup({
+        viewMode: viewMode,
+        dates: seedDates(startDate, endDate, viewMode)
+      });
+    }
+  }, [startDate, endDate]);
   React.useEffect(function () {
     var filteredTasks;
 
@@ -2621,10 +2731,14 @@ var Gantt = function Gantt(_ref) {
     filteredTasks = filteredTasks.sort(sortTasks);
 
     var _ganttDateRange2 = ganttDateRange(filteredTasks, viewMode, preStepsCount),
-        startDate = _ganttDateRange2[0],
-        endDate = _ganttDateRange2[1];
+        startDateRange = _ganttDateRange2[0],
+        endDateRange = _ganttDateRange2[1];
 
-    var newDates = seedDates(startDate, endDate, viewMode);
+    var newDates = seedDates(startDateRange, endDateRange, viewMode);
+
+    if (scheduleType === "lookAhead") {
+      newDates = seedDates(startDate, endDate, viewMode);
+    }
 
     if (rtl) {
       newDates = newDates.reverse();
@@ -2634,10 +2748,12 @@ var Gantt = function Gantt(_ref) {
       }
     }
 
-    setDateSetup({
-      dates: newDates,
-      viewMode: viewMode
-    });
+    if (scheduleType !== "lookAhead") {
+      setDateSetup({
+        dates: seedDates(startDateRange, endDateRange, viewMode),
+        viewMode: viewMode
+      });
+    }
 
     var _getCriticalPaths = getCriticalPaths(leafTasks),
         primaryPath = _getCriticalPaths[0],
@@ -2864,9 +2980,11 @@ var Gantt = function Gantt(_ref) {
     columnWidth: columnWidth,
     svgWidth: svgWidth,
     tasks: tasks,
+    scheduleType: scheduleType,
     rowHeight: rowHeight,
     dates: dateSetup.dates,
     todayColor: todayColor,
+    weekendColor: weekendColor,
     rtl: rtl
   };
   var calendarProps = {
@@ -2910,6 +3028,7 @@ var Gantt = function Gantt(_ref) {
     fontSize: fontSize,
     tasks: barTasks,
     leafTasks: leafTasks,
+    scheduleType: scheduleType,
     locale: locale,
     headerHeight: headerHeight,
     scrollY: scrollY,
@@ -2922,9 +3041,7 @@ var Gantt = function Gantt(_ref) {
     onDoubleClick: onDoubleClick,
     TaskListHeader: TaskListHeader,
     TaskListTable: TaskListTable,
-    taskLabelRenderer: taskLabelRenderer,
-    selectedTaskIds: selectedTaskIds,
-    onTaskSelectionChange: onTaskSelectionChange
+    taskLabelRenderer: taskLabelRenderer
   };
   return React__default.createElement("div", null, React__default.createElement("div", {
     className: styles$9.wrapper,