gantt-task-react-powern 0.4.68 → 0.4.70

package/dist/index.js

@@ -21,10 +21,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function _objectDestructuringEmpty(obj) {
-  if (obj == null) throw new TypeError("Cannot destructure undefined");
-}
-
 function _unsupportedIterableToArray(o, minLen) {
   if (!o) return;
   if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -285,7 +281,9 @@ var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
   var headerHeight = _ref.headerHeight,
       fontFamily = _ref.fontFamily,
       fontSize = _ref.fontSize,
-      rowWidth = _ref.rowWidth;
+      rowWidth = _ref.rowWidth,
+      allSelected = _ref.allSelected,
+      onSelectAll = _ref.onSelectAll;
   return React__default.createElement("div", {
     className: styles.ganttTable,
     style: {
@@ -297,7 +295,19 @@ var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
     style: {
       height: headerHeight - 2
     }
-  }, React__default.createElement("div", {
+  }, onSelectAll && React__default.createElement("div", null, React__default.createElement("div", {
+    className: styles.ganttTable_HeaderItem,
+    style: {
+      minWidth: parseInt(rowWidth) * 0.3,
+      maxWidth: parseInt(rowWidth) * 0.3
+    }
+  }, React__default.createElement("input", {
+    type: "checkbox",
+    checked: allSelected,
+    onChange: function onChange(e) {
+      return onSelectAll(e.target.checked);
+    }
+  }))), React__default.createElement("div", {
     className: styles.ganttTable_HeaderItem,
     style: {
       minWidth: parseInt(rowWidth) * 0.8,
@@ -309,6 +319,18 @@ var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
       height: headerHeight * 0.5,
       marginTop: headerHeight * 0.2
     }
+  }), React__default.createElement("div", {
+    className: styles.ganttTable_HeaderItem,
+    style: {
+      minWidth: parseInt(rowWidth) * 0.8,
+      maxWidth: parseInt(rowWidth) * 0.8
+    }
+  }, "ID"), React__default.createElement("div", {
+    className: styles.ganttTable_HeaderSeparator,
+    style: {
+      height: headerHeight * 0.5,
+      marginTop: headerHeight * 0.2
+    }
   }), React__default.createElement("div", {
     className: styles.ganttTable_HeaderItem,
     style: {
@@ -342,7 +364,7 @@ var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
   }, "Planned End")));
 };
 
-var styles$1 = {"taskListWrapper":"_3ZbQT","taskListTableRow":"_34SS0","taskListCell":"_3lLk3","taskListNameWrapper":"_nI1Xw","taskListExpander":"_2QjE6","taskListExpanderPlaceholder":"_1fnLB","taskListEmptyExpander":"_2TfEi","taskListText":"_2ZvXU"};
+var styles$1 = {"taskListWrapper":"_3ZbQT","taskListTableRow":"_34SS0","taskListLookAheadRow":"_GzvG4","taskListMilestoneRow":"_3Ykml","taskListCell":"_3lLk3","taskListNameWrapper":"_nI1Xw","taskListExpander":"_2QjE6","taskListExpanderPlaceholder":"_1fnLB","taskListEmptyExpander":"_2TfEi","taskListText":"_2ZvXU"};
 
 var localeDateStringCache = {};
 
@@ -370,11 +392,15 @@ 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$selectedTasks = _ref.selectedTasks,
+      selectedTasks = _ref$selectedTasks === void 0 ? [] : _ref$selectedTasks,
+      onTaskSelect = _ref.onTaskSelect,
       _ref$taskLabelRendere = _ref.taskLabelRenderer,
       taskLabelRenderer = _ref$taskLabelRendere === void 0 ? function (t) {
     return " " + t.name;
@@ -404,13 +430,36 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
       }
     }
 
+    var isSelected = selectedTasks.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"
+    }, onTaskSelect && React__default.createElement("div", {
+      className: styles$1.taskListCell,
+      style: {
+        minWidth: parseInt(rowWidth) * 0.3,
+        maxWidth: parseInt(rowWidth) * 0.3
+      }
     }, React__default.createElement("div", {
+      className: styles$1.taskListText,
+      style: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100%",
+        paddingLeft: "0",
+        paddingRight: "0"
+      }
+    }, React__default.createElement("input", {
+      type: "checkbox",
+      checked: isSelected,
+      onChange: function onChange(e) {
+        return onTaskSelect(t.id, e.target.checked);
+      }
+    }))), React__default.createElement("div", {
       className: styles$1.taskListCell,
       style: {
         minWidth: parseInt(rowWidth) * 0.8,
@@ -438,6 +487,13 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
         fontSize: "16px"
       }
     }, "\u2714") : ""))), React__default.createElement("div", {
+      className: styles$1.taskListCell,
+      style: {
+        minWidth: parseInt(rowWidth) * 0.8,
+        maxWidth: parseInt(rowWidth) * 0.8
+      },
+      title: t.optionalId ? t.optionalId : ""
+    }, t.optionalId), React__default.createElement("div", {
       className: styles$1.taskListCell,
       style: {
         minWidth: parseInt(rowWidth) * 2,
@@ -629,6 +685,7 @@ var TaskList = function TaskList(_ref) {
       rowHeight = _ref.rowHeight,
       scrollY = _ref.scrollY,
       tasks = _ref.tasks,
+      scheduleType = _ref.scheduleType,
       leafTasks = _ref.leafTasks,
       selectedTask = _ref.selectedTask,
       setSelectedTask = _ref.setSelectedTask,
@@ -639,18 +696,61 @@ var TaskList = function TaskList(_ref) {
       horizontalContainerClass = _ref.horizontalContainerClass,
       TaskListHeader = _ref.TaskListHeader,
       TaskListTable = _ref.TaskListTable,
-      taskLabelRenderer = _ref.taskLabelRenderer;
+      taskLabelRenderer = _ref.taskLabelRenderer,
+      onMultiSelect = _ref.onMultiSelect;
   var horizontalContainerRef = React.useRef(null);
+
+  var _useState = React.useState([]),
+      selectedTasks = _useState[0],
+      setSelectedTasks = _useState[1];
+
+  var prevSelectedTasksRef = React.useRef([]);
   React.useEffect(function () {
     if (horizontalContainerRef.current) {
       horizontalContainerRef.current.scrollTop = scrollY;
     }
   }, [scrollY]);
+  React.useEffect(function () {
+    if (onMultiSelect && JSON.stringify(prevSelectedTasksRef.current) !== JSON.stringify(selectedTasks)) {
+      var selectedTaskObjects = tasks.filter(function (task) {
+        return selectedTasks.includes(task.id);
+      });
+      prevSelectedTasksRef.current = [].concat(selectedTasks);
+      onMultiSelect(selectedTaskObjects);
+    }
+  }, [selectedTasks, tasks, onMultiSelect]);
+
+  var handleTaskSelect = function handleTaskSelect(taskId, selected) {
+    if (selected) {
+      setSelectedTasks(function (prev) {
+        return [].concat(prev, [taskId]);
+      });
+    } else {
+      setSelectedTasks(function (prev) {
+        return prev.filter(function (id) {
+          return id !== taskId;
+        });
+      });
+    }
+  };
+
+  var handleSelectAll = function handleSelectAll(selected) {
+    if (selected) {
+      setSelectedTasks(tasks.map(function (task) {
+        return task.id;
+      }));
+    } else {
+      setSelectedTasks([]);
+    }
+  };
+
   var headerProps = {
     headerHeight: headerHeight,
     fontFamily: fontFamily,
     fontSize: fontSize,
-    rowWidth: rowWidth
+    rowWidth: rowWidth,
+    allSelected: tasks.length > 0 && selectedTasks.length === tasks.length,
+    onSelectAll: onMultiSelect ? handleSelectAll : undefined
   };
   var selectedTaskId = selectedTask ? selectedTask.id : "";
   var tableProps = {
@@ -660,10 +760,13 @@ var TaskList = function TaskList(_ref) {
     fontSize: fontSize,
     tasks: tasks,
     leafTasks: leafTasks,
+    scheduleType: scheduleType,
     locale: locale,
     selectedTaskId: selectedTaskId,
     setSelectedTask: setSelectedTask,
     onExpanderClick: onExpanderClick,
+    selectedTasks: onMultiSelect ? selectedTasks : undefined,
+    onTaskSelect: onMultiSelect ? handleTaskSelect : undefined,
     taskLabelRenderer: taskLabelRenderer
   };
   return React__default.createElement("div", {
@@ -677,19 +780,23 @@ var TaskList = function TaskList(_ref) {
   }, React__default.createElement(TaskListTable, Object.assign({}, tableProps))));
 };
 
-var styles$4 = {"gridRow":"_2dZTy","gridRowLine":"_3rUKi","gridTick":"_RuwuK","darkerGridRow":"_2M-tt"};
-
-var GridBody = function GridBody(_ref) {
-  var tasks = _ref.tasks,
-      dates = _ref.dates,
-      rowHeight = _ref.rowHeight,
-      svgWidth = _ref.svgWidth,
-      columnWidth = _ref.columnWidth,
-      todayColor = _ref.todayColor,
-      rtl = _ref.rtl;
-  var y = 0;
-  var gridRows = [];
-  var rowLines = [React__default.createElement("line", {
+var styles$4 = {"gridRow":"_2dZTy","gridRowLookAhead":"_2RRca","gridRowLine":"_3rUKi","gridTick":"_RuwuK","darkerGridRow":"_2M-tt"};
+
+const GridBody = _ref => {
+  let {
+    tasks,
+    scheduleType,
+    dates,
+    rowHeight,
+    svgWidth,
+    columnWidth,
+    todayColor,
+    weekendColor,
+    rtl
+  } = _ref;
+  let y = 0;
+  const gridRows = [];
+  const rowLines = [React__default.createElement("line", {
     key: "RowLineFirst",
     x: "0",
     y1: 0,
@@ -698,16 +805,15 @@ var GridBody = function GridBody(_ref) {
     className: styles$4.gridRowLine
   })];
 
-  for (var _iterator = _createForOfIteratorHelperLoose(tasks), _step; !(_step = _iterator()).done;) {
-    var task = _step.value;
-    var isDarkerRow = task.type === "milestone";
+  for (const task of tasks) {
+    const 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,
@@ -720,13 +826,14 @@ var GridBody = function GridBody(_ref) {
     y += rowHeight;
   }
 
-  var now = new Date();
-  var tickX = 0;
-  var ticks = [];
-  var today = React__default.createElement("rect", null);
+  const now = new Date();
+  let tickX = 0;
+  const ticks = [];
+  let today = React__default.createElement("rect", null);
+  let weekend = [];
 
-  for (var i = 0; i < dates.length; i++) {
-    var date = dates[i];
+  for (let i = 0; i < dates.length; i++) {
+    const date = dates[i];
     ticks.push(React__default.createElement("line", {
       key: date.getTime(),
       x1: tickX,
@@ -746,6 +853,16 @@ var GridBody = function 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,
@@ -767,12 +884,14 @@ var GridBody = function 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));
 };
 
-var Grid = function Grid(props) {
+const Grid = props => {
   return React__default.createElement("g", {
     className: "grid"
   }, React__default.createElement(GridBody, Object.assign({}, props)));
@@ -780,16 +899,17 @@ var Grid = function Grid(props) {
 
 var styles$5 = {"calendarBottomText":"_9w8d5","calendarTopTick":"_1rLuZ","calendarTopText":"_2q1Kt","calendarHeader":"_35nLX","textAnchorStart":"_2Shd-","textAnchorMiddle":"_2XXW4","textAnchorEnd":"_3GdnC"};
 
-var TopPartOfCalendar = function TopPartOfCalendar(_ref) {
-  var value = _ref.value,
-      x1Line = _ref.x1Line,
-      y1Line = _ref.y1Line,
-      y2Line = _ref.y2Line,
-      xText = _ref.xText,
-      yText = _ref.yText,
-      _ref$textAnchor = _ref.textAnchor,
-      textAnchor = _ref$textAnchor === void 0 ? "middle" : _ref$textAnchor;
-  var textAnchorClass = textAnchor === "start" ? styles$5.textAnchorStart : textAnchor === "middle" ? styles$5.textAnchorMiddle : styles$5.textAnchorEnd;
+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;
   return React__default.createElement("g", {
     className: "calendarTop"
   }, React__default.createElement("line", {
@@ -803,28 +923,30 @@ var TopPartOfCalendar = function TopPartOfCalendar(_ref) {
     key: value + "text",
     y: yText,
     x: xText,
-    className: styles$5.calendarTopText + " " + textAnchorClass
+    className: `${styles$5.calendarTopText} ${textAnchorClass}`
   }, value));
 };
 
-var Calendar = function Calendar(_ref) {
-  var dateSetup = _ref.dateSetup,
-      locale = _ref.locale,
-      viewMode = _ref.viewMode,
-      rtl = _ref.rtl,
-      headerHeight = _ref.headerHeight,
-      columnWidth = _ref.columnWidth,
-      fontFamily = _ref.fontFamily,
-      fontSize = _ref.fontSize;
-
-  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();
+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();
       bottomValues.push(React__default.createElement("text", {
         key: date.getFullYear(),
         y: headerHeight * 0.8,
@@ -833,8 +955,8 @@ var Calendar = function Calendar(_ref) {
       }, bottomValue));
 
       if (i === 0 || date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()) {
-        var topValue = date.getFullYear().toString();
-        var xText = void 0;
+        const topValue = date.getFullYear().toString();
+        let xText;
 
         if (rtl) {
           xText = (6 + i + date.getFullYear() + 1) * columnWidth;
@@ -857,25 +979,25 @@ var Calendar = function Calendar(_ref) {
     return [topValues, bottomValues];
   };
 
-  var getCalendarValuesForQuarter = function getCalendarValuesForQuarter() {
-    var topValues = [];
-    var bottomValues = [];
-    var topDefaultHeight = headerHeight * 0.5;
+  const getCalendarValuesForQuarter = () => {
+    const topValues = [];
+    const bottomValues = [];
+    const topDefaultHeight = headerHeight * 0.5;
 
-    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;
+    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}`;
       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()) {
-        var topValue = date.getFullYear().toString();
-        var xText = void 0;
+        const topValue = date.getFullYear().toString();
+        let xText;
 
         if (rtl) {
           xText = (3 + i + quarter) * columnWidth;
@@ -898,26 +1020,26 @@ var Calendar = function Calendar(_ref) {
     return [topValues, bottomValues];
   };
 
-  var getCalendarValuesForMonth = function getCalendarValuesForMonth() {
-    var topValues = [];
-    var bottomValues = [];
-    var topDefaultHeight = headerHeight * 0.5;
+  const getCalendarValuesForMonth = () => {
+    const topValues = [];
+    const bottomValues = [];
+    const topDefaultHeight = headerHeight * 0.5;
 
-    for (var i = 0; i < dateSetup.dates.length; i++) {
-      var date = dateSetup.dates[i];
-      var bottomValue = date.toLocaleString(locale, {
+    for (let i = 0; i < dateSetup.dates.length; i++) {
+      const date = dateSetup.dates[i];
+      const 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()) {
-        var topValue = date.getFullYear().toString();
-        var xText = void 0;
+        const topValue = date.getFullYear().toString();
+        let xText;
 
         if (rtl) {
           xText = (6 + i + date.getMonth() + 1) * columnWidth;
@@ -942,27 +1064,27 @@ var Calendar = function Calendar(_ref) {
     return [topValues, bottomValues];
   };
 
-  var getCalendarValuesForWeek = function getCalendarValuesForWeek() {
-    var topValues = [];
-    var bottomValues = [];
-    var weeksCount = 1;
-    var topDefaultHeight = headerHeight * 0.5;
-    var dates = dateSetup.dates;
+  const getCalendarValuesForWeek = () => {
+    const topValues = [];
+    const bottomValues = [];
+    let weeksCount = 1;
+    const topDefaultHeight = headerHeight * 0.5;
+    const dates = dateSetup.dates;
 
-    for (var i = dates.length - 1; i >= 0; i--) {
-      var date = dates[i];
-      var topValue = "";
+    for (let i = dates.length - 1; i >= 0; i--) {
+      const date = dates[i];
+      let topValue = "";
 
       if (i === 0 || date.getMonth() !== dates[i - 1].getMonth()) {
-        topValue = getLocaleMonth(date, locale) + ", " + date.getFullYear();
+        topValue = `${getLocaleMonth(date, locale)}, ${date.getFullYear()}`;
       }
 
-      var bottomValue = "W" + getWeekNumberISO8601(date);
+      const 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) {
@@ -988,24 +1110,24 @@ var Calendar = function Calendar(_ref) {
     return [topValues, bottomValues];
   };
 
-  var getCalendarValuesForDay = function getCalendarValuesForDay() {
-    var topValues = [];
-    var bottomValues = [];
-    var topDefaultHeight = headerHeight * 0.5;
-    var dates = dateSetup.dates;
+  const getCalendarValuesForDay = () => {
+    const topValues = [];
+    const bottomValues = [];
+    const topDefaultHeight = headerHeight * 0.5;
+    const dates = dateSetup.dates;
 
-    for (var i = 0; i < dates.length; i++) {
-      var date = dates[i];
-      var bottomValue = getLocalDayOfWeek(date, locale, "short") + ", " + date.getDate().toString();
+    for (let i = 0; i < dates.length; i++) {
+      const date = dates[i];
+      const 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()) {
-        var topValue = getLocaleMonth(date, locale) + " " + date.getFullYear();
+        const topValue = `${getLocaleMonth(date, locale)} ${date.getFullYear()}`;
         topValues.push(React__default.createElement(TopPartOfCalendar, {
           key: topValue + date.getFullYear(),
           value: topValue,
@@ -1021,28 +1143,28 @@ var Calendar = function Calendar(_ref) {
     return [topValues, bottomValues];
   };
 
-  var getCalendarValuesForPartOfDay = function getCalendarValuesForPartOfDay() {
-    var topValues = [];
-    var bottomValues = [];
-    var ticks = viewMode === exports.ViewMode.HalfDay ? 2 : 4;
-    var topDefaultHeight = headerHeight * 0.5;
-    var dates = dateSetup.dates;
+  const getCalendarValuesForPartOfDay = () => {
+    const topValues = [];
+    const bottomValues = [];
+    const ticks = viewMode === exports.ViewMode.HalfDay ? 2 : 4;
+    const topDefaultHeight = headerHeight * 0.5;
+    const dates = dateSetup.dates;
 
-    for (var i = 0; i < dates.length; i++) {
-      var date = dates[i];
-      var bottomValue = getCachedDateTimeFormat(locale, {
+    for (let i = 0; i < dates.length; i++) {
+      const date = dates[i];
+      const bottomValue = getCachedDateTimeFormat(locale, {
         hour: "numeric"
       }).format(date);
       bottomValues.push(React__default.createElement("text", {
         key: date.getTime(),
         y: headerHeight * 0.8,
         x: columnWidth * (i + +rtl),
-        className: styles$5.calendarTopText + " " + styles$5.textAnchorMiddle,
+        className: `${styles$5.calendarTopText} ${styles$5.textAnchorMiddle}`,
         fontFamily: fontFamily
       }, bottomValue));
 
       if (i === 0 || date.getDate() !== dates[i - 1].getDate()) {
-        var topValue = getLocalDayOfWeek(date, locale, "short") + ", " + date.getDate() + " " + getLocaleMonth(date, locale);
+        const topValue = `${getLocalDayOfWeek(date, locale, "short")}, ${date.getDate()} ${getLocaleMonth(date, locale)}`;
         topValues.push(React__default.createElement(TopPartOfCalendar, {
           key: topValue + date.getFullYear(),
           value: topValue,
@@ -1058,15 +1180,15 @@ var Calendar = function Calendar(_ref) {
     return [topValues, bottomValues];
   };
 
-  var getCalendarValuesForHour = function getCalendarValuesForHour() {
-    var topValues = [];
-    var bottomValues = [];
-    var topDefaultHeight = headerHeight * 0.5;
-    var dates = dateSetup.dates;
+  const getCalendarValuesForHour = () => {
+    const topValues = [];
+    const bottomValues = [];
+    const topDefaultHeight = headerHeight * 0.5;
+    const dates = dateSetup.dates;
 
-    for (var i = 0; i < dates.length; i++) {
-      var date = dates[i];
-      var bottomValue = getCachedDateTimeFormat(locale, {
+    for (let i = 0; i < dates.length; i++) {
+      const date = dates[i];
+      const bottomValue = getCachedDateTimeFormat(locale, {
         hour: "numeric"
       }).format(date);
       bottomValues.push(React__default.createElement("text", {
@@ -1078,9 +1200,9 @@ var Calendar = function Calendar(_ref) {
       }, bottomValue));
 
       if (i !== 0 && date.getDate() !== dates[i - 1].getDate()) {
-        var displayDate = dates[i - 1];
-        var topValue = getLocalDayOfWeek(displayDate, locale, "long") + ", " + displayDate.getDate() + " " + getLocaleMonth(displayDate, locale);
-        var topPosition = (date.getHours() - 24) / 2;
+        const displayDate = dates[i - 1];
+        const topValue = `${getLocalDayOfWeek(displayDate, locale, "long")}, ${displayDate.getDate()} ${getLocaleMonth(displayDate, locale)}`;
+        const topPosition = (date.getHours() - 24) / 2;
         topValues.push(React__default.createElement(TopPartOfCalendar, {
           key: topValue + displayDate.getFullYear(),
           value: topValue,
@@ -1096,58 +1218,37 @@ var Calendar = function Calendar(_ref) {
     return [topValues, bottomValues];
   };
 
-  var topValues = [];
-  var bottomValues = [];
+  let topValues = [];
+  let bottomValues = [];
 
   switch (dateSetup.viewMode) {
     case exports.ViewMode.Year:
-      var _getCalendarValuesFor = getCalendarValuesForYear();
-
-      topValues = _getCalendarValuesFor[0];
-      bottomValues = _getCalendarValuesFor[1];
+      [topValues, bottomValues] = getCalendarValuesForYear();
       break;
 
     case exports.ViewMode.Quarter:
-      var _getCalendarValuesFor2 = getCalendarValuesForQuarter();
-
-      topValues = _getCalendarValuesFor2[0];
-      bottomValues = _getCalendarValuesFor2[1];
+      [topValues, bottomValues] = getCalendarValuesForQuarter();
       break;
 
     case exports.ViewMode.Month:
-      var _getCalendarValuesFor3 = getCalendarValuesForMonth();
-
-      topValues = _getCalendarValuesFor3[0];
-      bottomValues = _getCalendarValuesFor3[1];
+      [topValues, bottomValues] = getCalendarValuesForMonth();
       break;
 
     case exports.ViewMode.Week:
-      var _getCalendarValuesFor4 = getCalendarValuesForWeek();
-
-      topValues = _getCalendarValuesFor4[0];
-      bottomValues = _getCalendarValuesFor4[1];
+      [topValues, bottomValues] = getCalendarValuesForWeek();
       break;
 
     case exports.ViewMode.Day:
-      var _getCalendarValuesFor5 = getCalendarValuesForDay();
-
-      topValues = _getCalendarValuesFor5[0];
-      bottomValues = _getCalendarValuesFor5[1];
+      [topValues, bottomValues] = getCalendarValuesForDay();
       break;
 
     case exports.ViewMode.QuarterDay:
     case exports.ViewMode.HalfDay:
-      var _getCalendarValuesFor6 = getCalendarValuesForPartOfDay();
-
-      topValues = _getCalendarValuesFor6[0];
-      bottomValues = _getCalendarValuesFor6[1];
+      [topValues, bottomValues] = getCalendarValuesForPartOfDay();
       break;
 
     case exports.ViewMode.Hour:
-      var _getCalendarValuesFor7 = getCalendarValuesForHour();
-
-      topValues = _getCalendarValuesFor7[0];
-      bottomValues = _getCalendarValuesFor7[1];
+      [topValues, bottomValues] = getCalendarValuesForHour();
   }
 
   return React__default.createElement("g", {
@@ -1183,27 +1284,23 @@ function _catch(body, recover) {
 	return result;
 }
 
-var Arrow = function Arrow(_ref) {
-  var taskFrom = _ref.taskFrom,
-      taskTo = _ref.taskTo,
-      rowHeight = _ref.rowHeight,
-      taskHeight = _ref.taskHeight,
-      arrowIndent = _ref.arrowIndent,
-      rtl = _ref.rtl,
-      arrowColor = _ref.arrowColor;
-  var path;
-  var trianglePoints;
+const Arrow = _ref => {
+  let {
+    taskFrom,
+    taskTo,
+    rowHeight,
+    taskHeight,
+    arrowIndent,
+    rtl,
+    arrowColor
+  } = _ref;
+  let path;
+  let trianglePoints;
 
   if (rtl) {
-    var _drownPathAndTriangle = drownPathAndTriangleRTL(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent);
-
-    path = _drownPathAndTriangle[0];
-    trianglePoints = _drownPathAndTriangle[1];
+    [path, trianglePoints] = drownPathAndTriangleRTL(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent);
   } else {
-    var _drownPathAndTriangle2 = drownPathAndTriangle(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent);
-
-    path = _drownPathAndTriangle2[0];
-    trianglePoints = _drownPathAndTriangle2[1];
+    [path, trianglePoints] = drownPathAndTriangle(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent);
   }
 
   return React__default.createElement("g", {
@@ -1219,8 +1316,8 @@ var Arrow = function Arrow(_ref) {
   }));
 };
 
-var drownPathAndTriangle = function drownPathAndTriangle(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent) {
-  var taskToStart, taskFromEnd;
+const drownPathAndTriangle = (taskFrom, taskTo, rowHeight, taskHeight, arrowIndent) => {
+  let taskToStart, taskFromEnd;
 
   if (taskTo.x1 > 0 && taskTo.actualx1 > 0) {
     taskToStart = Math.min(taskTo.x1, taskTo.actualx1);
@@ -1230,24 +1327,38 @@ var drownPathAndTriangle = function drownPathAndTriangle(taskFrom, taskTo, rowHe
     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;
 
-  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);
+  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}`;
   return [path, trianglePoints];
 };
 
-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);
+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}`;
   return [path, trianglePoints];
 };
 
@@ -1697,24 +1808,26 @@ var sortTasks = function sortTasks(taskA, taskB) {
   }
 };
 
-var BarDisplay = function BarDisplay(_ref) {
-  var x = _ref.x,
-      y = _ref.y,
-      type = _ref.type,
-      width = _ref.width,
-      height = _ref.height,
-      isSelected = _ref.isSelected,
-      progressX = _ref.progressX,
-      progressWidth = _ref.progressWidth,
-      barCornerRadius = _ref.barCornerRadius,
-      styles = _ref.styles,
-      onMouseDown = _ref.onMouseDown;
-
-  var getProcessColor = function getProcessColor() {
+const BarDisplay = _ref => {
+  let {
+    x,
+    y,
+    type,
+    width,
+    height,
+    isSelected,
+    progressX,
+    progressWidth,
+    barCornerRadius,
+    styles,
+    onMouseDown
+  } = _ref;
+
+  const getProcessColor = () => {
     return isSelected ? styles.progressSelectedColor : styles.progressColor;
   };
 
-  var getBarColor = function getBarColor() {
+  const getBarColor = () => {
     return isSelected ? styles.backgroundSelectedColor : styles.backgroundColor;
   };
 
@@ -1761,13 +1874,15 @@ var BarDisplay = function BarDisplay(_ref) {
 
 var styles$6 = {"barWrapper":"_KxSXS","barHandle":"_3w_5u","barBackground":"_31ERP"};
 
-var BarDateHandle = function BarDateHandle(_ref) {
-  var x = _ref.x,
-      y = _ref.y,
-      width = _ref.width,
-      height = _ref.height,
-      barCornerRadius = _ref.barCornerRadius,
-      onMouseDown = _ref.onMouseDown;
+const BarDateHandle = _ref => {
+  let {
+    x,
+    y,
+    width,
+    height,
+    barCornerRadius,
+    onMouseDown
+  } = _ref;
   return React__default.createElement("rect", {
     x: x,
     y: y,
@@ -1780,25 +1895,25 @@ var BarDateHandle = function BarDateHandle(_ref) {
   });
 };
 
-var BarProgressHandle = function BarProgressHandle(_ref) {
-  _objectDestructuringEmpty(_ref);
-
+const BarProgressHandle = _ref => {
   return React__default.createElement("div", null);
 };
 
-var Bar = function Bar(_ref) {
-  var task = _ref.task,
-      isProgressChangeable = _ref.isProgressChangeable,
-      isDateChangeable = _ref.isDateChangeable,
-      rtl = _ref.rtl,
-      type = _ref.type,
-      onEventStart = _ref.onEventStart,
-      isSelected = _ref.isSelected;
-  var progressPoint = getProgressPoint(+!rtl * task.progressWidth + task.progressX, task.y, task.height);
-  var handleHeight = task.height / 2 - 1;
+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;
 
   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, {
@@ -1814,7 +1929,7 @@ var Bar = function Bar(_ref) {
       barCornerRadius: task.barCornerRadius,
       styles: task.styles,
       isSelected: isSelected,
-      onMouseDown: function onMouseDown(e) {
+      onMouseDown: e => {
         isDateChangeable && onEventStart("move", task, e, "planned");
       }
     }), React__default.createElement("g", {
@@ -1825,7 +1940,7 @@ var Bar = function Bar(_ref) {
       width: task.handleWidth,
       height: handleHeight,
       barCornerRadius: task.barCornerRadius,
-      onMouseDown: function onMouseDown(e) {
+      onMouseDown: e => {
         onEventStart("start", task, e, "planned");
       }
     }), React__default.createElement(BarDateHandle, {
@@ -1834,19 +1949,19 @@ var Bar = function Bar(_ref) {
       width: task.handleWidth,
       height: handleHeight,
       barCornerRadius: task.barCornerRadius,
-      onMouseDown: function onMouseDown(e) {
+      onMouseDown: e => {
         onEventStart("end", task, e, "planned");
       }
     })), isProgressChangeable && React__default.createElement(BarProgressHandle, {
       progressPoint: progressPoint,
-      onMouseDown: function onMouseDown(e) {
+      onMouseDown: e => {
         onEventStart("progress", task, e, "planned");
       }
     })));else return React__default.createElement("g", {
       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
@@ -1863,7 +1978,7 @@ var Bar = function Bar(_ref) {
       barCornerRadius: task.barCornerRadius,
       styles: task.styles,
       isSelected: isSelected,
-      onMouseDown: function onMouseDown(e) {
+      onMouseDown: e => {
         isDateChangeable && onEventStart("move", task, e, "actual");
       }
     }), React__default.createElement("g", {
@@ -1874,7 +1989,7 @@ var Bar = function Bar(_ref) {
       width: task.handleWidth,
       height: handleHeight,
       barCornerRadius: task.barCornerRadius,
-      onMouseDown: function onMouseDown(e) {
+      onMouseDown: e => {
         onEventStart("start", task, e, "actual");
       }
     }), React__default.createElement(BarDateHandle, {
@@ -1883,12 +1998,12 @@ var Bar = function Bar(_ref) {
       width: task.handleWidth,
       height: handleHeight,
       barCornerRadius: task.barCornerRadius,
-      onMouseDown: function onMouseDown(e) {
+      onMouseDown: e => {
         onEventStart("end", task, e, "actual");
       }
     })), isProgressChangeable && React__default.createElement(BarProgressHandle, {
       progressPoint: progressPoint,
-      onMouseDown: function onMouseDown(e) {
+      onMouseDown: e => {
         onEventStart("progress", task, e, "actual");
       }
     })));
@@ -1900,14 +2015,16 @@ var Bar = function Bar(_ref) {
   }
 };
 
-var BarSmall = function BarSmall(_ref) {
-  var task = _ref.task,
-      type = _ref.type,
-      isProgressChangeable = _ref.isProgressChangeable,
-      isDateChangeable = _ref.isDateChangeable,
-      onEventStart = _ref.onEventStart,
-      isSelected = _ref.isSelected;
-  var progressPoint = getProgressPoint(task.progressWidth + task.x1, task.y, task.height);
+const BarSmall = _ref => {
+  let {
+    task,
+    type,
+    isProgressChangeable,
+    isDateChangeable,
+    onEventStart,
+    isSelected
+  } = _ref;
+  const progressPoint = getProgressPoint(task.progressWidth + task.x1, task.y, task.height);
   return React__default.createElement("g", {
     className: styles$6.barWrapper,
     tabIndex: 0
@@ -1924,14 +2041,14 @@ var BarSmall = function BarSmall(_ref) {
     barCornerRadius: task.barCornerRadius,
     styles: task.styles,
     isSelected: isSelected,
-    onMouseDown: function onMouseDown(e) {
+    onMouseDown: e => {
       isDateChangeable && onEventStart("move", task, e);
     }
   }), React__default.createElement("g", {
     className: "handleGroup"
   }, isProgressChangeable && React__default.createElement(BarProgressHandle, {
     progressPoint: progressPoint,
-    onMouseDown: function onMouseDown(e) {
+    onMouseDown: e => {
       onEventStart("progress", task, e);
     }
   })));
@@ -1939,14 +2056,17 @@ var BarSmall = function BarSmall(_ref) {
 
 var styles$7 = {"milestoneWrapper":"_RRr13","milestoneBackground":"_2P2B1"};
 
-var Milestone = function Milestone(_ref) {
-  var task = _ref.task,
-      isDateChangeable = _ref.isDateChangeable,
-      onEventStart = _ref.onEventStart,
-      isSelected = _ref.isSelected;
-  var transform = "rotate(45 " + (task.x1 + task.height * 0.356) + " \n    " + (task.y + task.height * 0.85) + ")";
-
-  var getBarColor = function getBarColor() {
+const Milestone = _ref => {
+  let {
+    task,
+    isDateChangeable,
+    onEventStart,
+    isSelected
+  } = _ref;
+  const transform = `rotate(45 ${task.x1 + task.height * 0.356} 
+    ${task.y + task.height * 0.85})`;
+
+  const getBarColor = () => {
     return isSelected ? task.styles.backgroundSelectedColor : task.styles.backgroundColor;
   };
 
@@ -1963,7 +2083,7 @@ var Milestone = function Milestone(_ref) {
     ry: task.barCornerRadius,
     transform: transform,
     className: styles$7.milestoneBackground,
-    onMouseDown: function onMouseDown(e) {
+    onMouseDown: e => {
       isDateChangeable && onEventStart("move", task, e);
     }
   }));
@@ -1971,14 +2091,16 @@ var Milestone = function Milestone(_ref) {
 
 var styles$8 = {"projectWrapper":"_1KJ6x","projectBackground":"_2RbVy","projectTop":"_2pZMF"};
 
-var Project = function Project(_ref) {
-  var task = _ref.task,
-      isSelected = _ref.isSelected;
-  var barColor = isSelected ? task.styles.backgroundSelectedColor : task.styles.backgroundColor;
-  var processColor = isSelected ? task.styles.progressSelectedColor : task.styles.progressColor;
-  var projectWith = task.x2 - task.x1;
-  var projectLeftTriangle = [task.x1, task.y + task.height / 2 - 1, task.x1, task.y + task.height, task.x1 + 15, task.y + task.height / 2 - 1].join(",");
-  var projectRightTriangle = [task.x2, task.y + task.height / 2 - 1, task.x2, task.y + task.height, task.x2 - 15, task.y + task.height / 2 - 1].join(",");
+const Project = _ref => {
+  let {
+    task,
+    isSelected
+  } = _ref;
+  const barColor = isSelected ? task.styles.backgroundSelectedColor : task.styles.backgroundColor;
+  const processColor = isSelected ? task.styles.progressSelectedColor : task.styles.progressColor;
+  const projectWith = task.x2 - task.x1;
+  const projectLeftTriangle = [task.x1, task.y + task.height / 2 - 1, task.x1, task.y + task.height, task.x1 + 15, task.y + task.height / 2 - 1].join(",");
+  const projectRightTriangle = [task.x2, task.y + task.height / 2 - 1, task.x2, task.y + task.height, task.x2 - 15, task.y + task.height / 2 - 1].join(",");
   return React__default.createElement("g", {
     tabIndex: 0,
     className: styles$8.projectWrapper
@@ -2019,25 +2141,23 @@ var Project = function Project(_ref) {
   }));
 };
 
-var TaskItem = function TaskItem(props) {
-  var _props = _extends({}, props),
-      task = _props.task,
-      isDelete = _props.isDelete,
-      isSelected = _props.isSelected,
-      onEventStart = _props.onEventStart;
-
-  var _useState = React.useState([React__default.createElement("div", null)]),
-      taskItem = _useState[0],
-      setTaskItem = _useState[1];
-
-  React.useEffect(function () {
+const TaskItem = props => {
+  const {
+    task,
+    isDelete,
+    isSelected,
+    onEventStart
+  } = { ...props
+  };
+  const [taskItem, setTaskItem] = React.useState([React__default.createElement("div", null)]);
+  React.useEffect(() => {
     switch (task.typeInternal) {
       case "milestone":
-        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":
@@ -2046,27 +2166,27 @@ var TaskItem = function TaskItem(props) {
 
       default:
         {
-          var _taskItem = [];
+          let 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: function onKeyDown(e) {
+    onKeyDown: e => {
       switch (e.key) {
         case "Delete":
           {
@@ -2077,20 +2197,20 @@ var TaskItem = function TaskItem(props) {
 
       e.stopPropagation();
     },
-    onMouseEnter: function onMouseEnter(e) {
+    onMouseEnter: e => {
       onEventStart("mouseenter", task, e, "planned");
     },
-    onMouseLeave: function onMouseLeave(e) {
+    onMouseLeave: e => {
       onEventStart("mouseleave", task, e, "planned");
     },
-    onDoubleClick: function onDoubleClick(e) {
+    onDoubleClick: e => {
       onEventStart("dblclick", task, e, "planned");
     },
-    onClick: function onClick(e) {
+    onClick: e => {
       onEventStart("click", task, e, "planned");
     }
   }, taskItem[0]), React__default.createElement("g", {
-    onKeyDown: function onKeyDown(e) {
+    onKeyDown: e => {
       switch (e.key) {
         case "Delete":
           {
@@ -2101,82 +2221,74 @@ var TaskItem = function TaskItem(props) {
 
       e.stopPropagation();
     },
-    onMouseEnter: function onMouseEnter(e) {
+    onMouseEnter: e => {
       onEventStart("mouseenter", task, e, "actual");
     },
-    onMouseLeave: function onMouseLeave(e) {
+    onMouseLeave: e => {
       onEventStart("mouseleave", task, e, "actual");
     },
-    onDoubleClick: function onDoubleClick(e) {
+    onDoubleClick: e => {
       onEventStart("dblclick", task, e, "actual");
     },
-    onClick: function onClick(e) {
+    onClick: e => {
       onEventStart("click", task, e, "actual");
     }
   }, taskItem[1]));
 };
 
-var TaskGanttContent = function TaskGanttContent(_ref) {
+const TaskGanttContent = _ref => {
   var _svg$current;
 
-  var tasks = _ref.tasks,
-      dates = _ref.dates,
-      ganttEvent = _ref.ganttEvent,
-      selectedTask = _ref.selectedTask,
-      rowHeight = _ref.rowHeight,
-      columnWidth = _ref.columnWidth,
-      timeStep = _ref.timeStep,
-      svg = _ref.svg,
-      taskHeight = _ref.taskHeight,
-      arrowIndent = _ref.arrowIndent,
-      fontFamily = _ref.fontFamily,
-      fontSize = _ref.fontSize,
-      rtl = _ref.rtl,
-      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;
+  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;
     setXStep(newXStep);
   }, [columnWidth, dates, timeStep]);
-  React.useEffect(function () {
-    var handleMouseMove = function handleMouseMove(event) {
+  React.useEffect(() => {
+    const handleMouseMove = function (event) {
       try {
         var _svg$current$getScree;
 
         if (!ganttEvent.changedTask || !point || !(svg !== null && svg !== void 0 && svg.current)) return Promise.resolve();
         event.preventDefault();
         point.x = event.clientX;
-        var cursor = point.matrixTransform(svg === null || svg === void 0 ? void 0 : (_svg$current$getScree = svg.current.getScreenCTM()) === null || _svg$current$getScree === void 0 ? void 0 : _svg$current$getScree.inverse());
-
-        var _handleTaskBySVGMouse = handleTaskBySVGMouseEvent(cursor.x, ganttEvent.action, ganttEvent.changedTask, ganttEvent.type, xStep, timeStep, initEventX1Delta, rtl),
-            isChanged = _handleTaskBySVGMouse.isChanged,
-            changedTask = _handleTaskBySVGMouse.changedTask;
+        const cursor = point.matrixTransform(svg === null || svg === void 0 ? void 0 : (_svg$current$getScree = svg.current.getScreenCTM()) === null || _svg$current$getScree === void 0 ? void 0 : _svg$current$getScree.inverse());
+        const {
+          isChanged,
+          changedTask
+        } = handleTaskBySVGMouseEvent(cursor.x, ganttEvent.action, ganttEvent.changedTask, ganttEvent.type, xStep, timeStep, initEventX1Delta, rtl);
 
         if (isChanged) {
           setGanttEvent({
             action: ganttEvent.action,
-            changedTask: changedTask
+            changedTask
           });
         }
 
@@ -2186,40 +2298,41 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
       }
     };
 
-    var handleMouseUp = function handleMouseUp(event) {
+    const handleMouseUp = function (event) {
       try {
         var _svg$current$getScree2;
 
-        var _temp6 = function _temp6() {
+        function _temp5() {
           if (!operationSuccess) {
             setFailedTask(originalSelectedTask);
           }
-        };
+        }
 
-        var action = ganttEvent.action,
-            originalSelectedTask = ganttEvent.originalSelectedTask,
-            changedTask = ganttEvent.changedTask,
-            type = ganttEvent.type;
+        const {
+          action,
+          originalSelectedTask,
+          changedTask,
+          type
+        } = ganttEvent;
         if (!changedTask || !point || !(svg !== null && svg !== void 0 && svg.current) || !originalSelectedTask) return Promise.resolve();
         event.preventDefault();
         point.x = event.clientX;
-        var cursor = point.matrixTransform(svg === null || svg === void 0 ? void 0 : (_svg$current$getScree2 = svg.current.getScreenCTM()) === null || _svg$current$getScree2 === void 0 ? void 0 : _svg$current$getScree2.inverse());
-
-        var _handleTaskBySVGMouse2 = handleTaskBySVGMouseEvent(cursor.x, action, changedTask, type, xStep, timeStep, initEventX1Delta, rtl),
-            newChangedTask = _handleTaskBySVGMouse2.changedTask;
-
-        var isNotLikeOriginal = originalSelectedTask.start !== newChangedTask.start || originalSelectedTask.end !== newChangedTask.end || originalSelectedTask.actualStart !== newChangedTask.actualStart || originalSelectedTask.actualEnd !== newChangedTask.actualEnd || originalSelectedTask.progress !== newChangedTask.progress;
+        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;
         svg.current.removeEventListener("mousemove", handleMouseMove);
         svg.current.removeEventListener("mouseup", handleMouseUp);
         setGanttEvent({
           action: ""
         });
         setIsMoving(false);
-        var operationSuccess = true;
+        let operationSuccess = true;
 
-        var _temp7 = function () {
+        const _temp4 = function () {
           if ((action === "move" || action === "end" || action === "start") && onDateChange && isNotLikeOriginal) {
-            var _temp8 = _catch(function () {
+            const _temp = _catch(function () {
               return Promise.resolve(onDateChange(newChangedTask, newChangedTask.barChildren)).then(function (result) {
                 if (result !== undefined) {
                   operationSuccess = result;
@@ -2229,11 +2342,11 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
               operationSuccess = false;
             });
 
-            if (_temp8 && _temp8.then) return _temp8.then(function () {});
+            if (_temp && _temp.then) return _temp.then(function () {});
           } else {
-            var _temp9 = function () {
+            const _temp3 = function () {
               if (onProgressChange && isNotLikeOriginal) {
-                var _temp10 = _catch(function () {
+                const _temp2 = _catch(function () {
                   return Promise.resolve(onProgressChange(newChangedTask, newChangedTask.barChildren)).then(function (result) {
                     if (result !== undefined) {
                       operationSuccess = result;
@@ -2243,15 +2356,15 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
                   operationSuccess = false;
                 });
 
-                if (_temp10 && _temp10.then) return _temp10.then(function () {});
+                if (_temp2 && _temp2.then) return _temp2.then(function () {});
               }
             }();
 
-            if (_temp9 && _temp9.then) return _temp9.then(function () {});
+            if (_temp3 && _temp3.then) return _temp3.then(function () {});
           }
         }();
 
-        return Promise.resolve(_temp7 && _temp7.then ? _temp7.then(_temp6) : _temp6(_temp7));
+        return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp5) : _temp5(_temp4));
       } catch (e) {
         return Promise.reject(e);
       }
@@ -2264,7 +2377,7 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
     }
   }, [ganttEvent, xStep, initEventX1Delta, onProgressChange, timeStep, onDateChange, svg, isMoving, point, rtl, setFailedTask, setGanttEvent]);
 
-  var handleBarEventStart = function handleBarEventStart(action, task, event, type) {
+  const handleBarEventStart = function (action, task, event, type) {
     try {
       return Promise.resolve(function () {
         if (!event) {
@@ -2273,15 +2386,15 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
           }
         } else return function () {
           if (isKeyboardEvent(event)) {
-            var _temp14 = function () {
+            const _temp8 = function () {
               if (action === "delete") {
-                var _temp15 = function () {
+                const _temp7 = function () {
                   if (onDelete) {
-                    var _temp16 = _catch(function () {
+                    const _temp6 = _catch(function () {
                       return Promise.resolve(onDelete(task)).then(function (result) {
                         if (result !== undefined && result) {
                           setGanttEvent({
-                            action: action,
+                            action,
                             changedTask: task
                           });
                         }
@@ -2290,19 +2403,19 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
                       console.error("Error on Delete. " + error);
                     });
 
-                    if (_temp16 && _temp16.then) return _temp16.then(function () {});
+                    if (_temp6 && _temp6.then) return _temp6.then(function () {});
                   }
                 }();
 
-                if (_temp15 && _temp15.then) return _temp15.then(function () {});
+                if (_temp7 && _temp7.then) return _temp7.then(function () {});
               }
             }();
 
-            if (_temp14 && _temp14.then) return _temp14.then(function () {});
+            if (_temp8 && _temp8.then) return _temp8.then(function () {});
           } else if (action === "mouseenter") {
             if (!ganttEvent.action) {
               setGanttEvent({
-                action: action,
+                action,
                 changedTask: task,
                 originalSelectedTask: task,
                 type: type
@@ -2323,17 +2436,17 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
 
             if (!(svg !== null && svg !== void 0 && svg.current) || !point) return;
             point.x = event.clientX;
-            var cursor = point.matrixTransform((_svg$current$getScree3 = svg.current.getScreenCTM()) === null || _svg$current$getScree3 === void 0 ? void 0 : _svg$current$getScree3.inverse());
+            const cursor = point.matrixTransform((_svg$current$getScree3 = svg.current.getScreenCTM()) === null || _svg$current$getScree3 === void 0 ? void 0 : _svg$current$getScree3.inverse());
             if (type == "planned") setInitEventX1Delta(cursor.x - task.x1);else if (type == "actual") setInitEventX1Delta(cursor.x - task.actualx1);
             setGanttEvent({
-              action: action,
+              action,
               changedTask: task,
               originalSelectedTask: task,
               type: type
             });
           } else {
             setGanttEvent({
-              action: action,
+              action,
               changedTask: task,
               originalSelectedTask: task,
               type: type
@@ -2350,8 +2463,8 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
     className: "content"
   }, React__default.createElement("g", {
     className: "arrows"
-  }, tasks.map(function (_task) {
-    var task = _task.start.getTime() > 0 && _task.end.getTime() > 0 ? _task : undefined;
+  }, tasks.map(_task => {
+    const task = _task.start.getTime() > 0 && _task.end.getTime() > 0 ? _task : undefined;
 
     if (!task) {
       return React__default.createElement("g", {
@@ -2362,28 +2475,31 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
       });
     }
 
-    return task.barChildren.map(function (child) {
+    return task.barChildren.map(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(function (arrow) {
-          return 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(arrow => 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(function (_task) {
-    var task = _task.start.getTime() > 0 && _task.end.getTime() > 0 ? _task : undefined;
+  }, tasks.map(_task => {
+    const task = _task.start.getTime() > 0 && _task.end.getTime() > 0 ? _task : undefined;
 
     if (!task) {
       return React__default.createElement("g", {
@@ -2497,6 +2613,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,
@@ -2553,6 +2675,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,
@@ -2567,18 +2691,26 @@ var Gantt = function Gantt(_ref) {
       onDelete = _ref.onDelete,
       onSelect = _ref.onSelect,
       onExpanderClick = _ref.onExpanderClick,
+      onMultiSelect = _ref.onMultiSelect,
       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],
@@ -2637,6 +2769,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;
 
@@ -2649,10 +2789,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();
@@ -2662,10 +2806,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],
@@ -2892,9 +3038,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 = {
@@ -2938,6 +3086,7 @@ var Gantt = function Gantt(_ref) {
     fontSize: fontSize,
     tasks: barTasks,
     leafTasks: leafTasks,
+    scheduleType: scheduleType,
     locale: locale,
     headerHeight: headerHeight,
     scrollY: scrollY,
@@ -2950,7 +3099,8 @@ var Gantt = function Gantt(_ref) {
     onDoubleClick: onDoubleClick,
     TaskListHeader: TaskListHeader,
     TaskListTable: TaskListTable,
-    taskLabelRenderer: taskLabelRenderer
+    taskLabelRenderer: taskLabelRenderer,
+    onMultiSelect: onMultiSelect
   };
   return React__default.createElement("div", null, React__default.createElement("div", {
     className: styles$9.wrapper,