gantt-task-react-powern
Version:
Interactive Gantt Chart for React with TypeScript.
3,544 lines • 122 kB
JavaScript
import React, { useMemo, useRef, useState, useEffect } from 'react';
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
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);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _createForOfIteratorHelperLoose(o, allowArrayLike) {
var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
if (it) return (it = it.call(o)).next.bind(it);
if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
if (it) o = it;
var i = 0;
return function () {
if (i >= o.length) return {
done: true
};
return {
done: false,
value: o[i++]
};
};
}
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
var ViewMode;
(function (ViewMode) {
ViewMode["Hour"] = "Hour";
ViewMode["QuarterDay"] = "Quarter Day";
ViewMode["HalfDay"] = "Half Day";
ViewMode["Day"] = "Day";
ViewMode["Week"] = "Week";
ViewMode["Month"] = "Month";
ViewMode["Quarter"] = "Quarter";
ViewMode["Year"] = "Year";
})(ViewMode || (ViewMode = {}));
var intlDTCache = {};
var getCachedDateTimeFormat = function getCachedDateTimeFormat(locString, opts) {
if (opts === void 0) {
opts = {};
}
var key = JSON.stringify([locString, opts]);
var dtf = intlDTCache[key];
if (!dtf) {
dtf = new Intl.DateTimeFormat(locString, opts);
intlDTCache[key] = dtf;
}
return dtf;
};
var addToDate = function addToDate(date, quantity, scale) {
var newDate = new Date(date.getFullYear() + (scale === "year" ? quantity : 0), date.getMonth() + (scale === "month" ? quantity : 0), date.getDate() + (scale === "day" ? quantity : 0), date.getHours() + (scale === "hour" ? quantity : 0), date.getMinutes() + (scale === "minute" ? quantity : 0), date.getSeconds() + (scale === "second" ? quantity : 0), date.getMilliseconds() + (scale === "millisecond" ? quantity : 0));
return newDate;
};
var startOfDate = function startOfDate(date, scale) {
var scores = ["millisecond", "second", "minute", "hour", "day", "month", "quarter", "year"];
var shouldReset = function shouldReset(_scale) {
var maxScore = scores.indexOf(scale);
return scores.indexOf(_scale) <= maxScore;
};
var newDate = new Date(date.getFullYear(), shouldReset("year") ? 0 : date.getMonth(), shouldReset("month") ? 1 : date.getDate(), shouldReset("day") ? 0 : date.getHours(), shouldReset("hour") ? 0 : date.getMinutes(), shouldReset("minute") ? 0 : date.getSeconds(), shouldReset("second") ? 0 : date.getMilliseconds());
return newDate;
};
var ganttDateRange = function ganttDateRange(tasks, viewMode, preStepsCount) {
var _tasks$, _tasks$2, _tasks$3, _tasks$4;
var newStartDate = ((_tasks$ = tasks[0]) === null || _tasks$ === void 0 ? void 0 : _tasks$.start.getTime()) !== 0 ? ((_tasks$2 = tasks[0]) === null || _tasks$2 === void 0 ? void 0 : _tasks$2.start) || new Date() : new Date();
var newEndDate = ((_tasks$3 = tasks[0]) === null || _tasks$3 === void 0 ? void 0 : _tasks$3.end.getTime()) !== 0 ? ((_tasks$4 = tasks[0]) === null || _tasks$4 === void 0 ? void 0 : _tasks$4.end) || new Date() : new Date();
for (var _iterator = _createForOfIteratorHelperLoose(tasks), _step; !(_step = _iterator()).done;) {
var task = _step.value;
if (task.start && task.start.getTime() !== 0 && task.start < newStartDate) {
newStartDate = task.start;
}
if (task.end && task.end.getTime() !== 0 && task.end > newEndDate) {
newEndDate = task.end;
}
if (task.actualStart && task.actualStart.getTime() !== 0 && task.actualStart < newStartDate) {
newStartDate = task.actualStart;
}
if (task.actualEnd && task.actualEnd.getTime() !== 0 && task.actualEnd > newEndDate) {
newEndDate = task.actualEnd;
}
}
switch (viewMode) {
case ViewMode.Year:
newStartDate = addToDate(newStartDate, -1, "year");
newStartDate = startOfDate(newStartDate, "year");
newEndDate = addToDate(newEndDate, 1, "year");
newEndDate = startOfDate(newEndDate, "year");
break;
case ViewMode.Quarter:
newStartDate = addToDate(newStartDate, -1 * preStepsCount, "year");
newStartDate = startOfDate(newStartDate, "year");
newEndDate = addToDate(newEndDate, 1, "year");
newEndDate = startOfDate(newEndDate, "quarter");
break;
case ViewMode.Month:
newStartDate = addToDate(newStartDate, -1 * preStepsCount, "month");
newStartDate = startOfDate(newStartDate, "month");
newEndDate = addToDate(newEndDate, 1, "year");
newEndDate = startOfDate(newEndDate, "year");
break;
case ViewMode.Week:
newStartDate = startOfDate(newStartDate, "day");
newStartDate = addToDate(getMonday(newStartDate), -7 * preStepsCount, "day");
newEndDate = startOfDate(newEndDate, "day");
newEndDate = addToDate(newEndDate, 1.5, "month");
break;
case ViewMode.Day:
newStartDate = startOfDate(newStartDate, "day");
newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
newEndDate = startOfDate(newEndDate, "day");
newEndDate = addToDate(newEndDate, 19, "day");
break;
case ViewMode.QuarterDay:
newStartDate = startOfDate(newStartDate, "day");
newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
newEndDate = startOfDate(newEndDate, "day");
newEndDate = addToDate(newEndDate, 66, "hour");
break;
case ViewMode.HalfDay:
newStartDate = startOfDate(newStartDate, "day");
newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
newEndDate = startOfDate(newEndDate, "day");
newEndDate = addToDate(newEndDate, 108, "hour");
break;
case ViewMode.Hour:
newStartDate = startOfDate(newStartDate, "hour");
newStartDate = addToDate(newStartDate, -1 * preStepsCount, "hour");
newEndDate = startOfDate(newEndDate, "day");
newEndDate = addToDate(newEndDate, 1, "day");
break;
}
return [newStartDate, newEndDate];
};
var seedDates = function seedDates(startDate, endDate, viewMode) {
var currentDate = new Date(startDate);
var dates = [currentDate];
while (currentDate < endDate) {
switch (viewMode) {
case ViewMode.Year:
currentDate = addToDate(currentDate, 1, "year");
break;
case ViewMode.Quarter:
currentDate = addToDate(currentDate, 3, "month");
break;
case ViewMode.Month:
currentDate = addToDate(currentDate, 1, "month");
break;
case ViewMode.Week:
currentDate = addToDate(currentDate, 7, "day");
break;
case ViewMode.Day:
currentDate = addToDate(currentDate, 1, "day");
break;
case ViewMode.HalfDay:
currentDate = addToDate(currentDate, 12, "hour");
break;
case ViewMode.QuarterDay:
currentDate = addToDate(currentDate, 6, "hour");
break;
case ViewMode.Hour:
currentDate = addToDate(currentDate, 1, "hour");
break;
}
dates.push(currentDate);
}
return dates;
};
var getLocaleMonth = function getLocaleMonth(date, locale) {
var bottomValue = getCachedDateTimeFormat(locale, {
month: "long"
}).format(date);
bottomValue = bottomValue.replace(bottomValue[0], bottomValue[0].toLocaleUpperCase());
return bottomValue;
};
var getLocalDayOfWeek = function getLocalDayOfWeek(date, locale, format) {
var bottomValue = getCachedDateTimeFormat(locale, {
weekday: format
}).format(date);
bottomValue = bottomValue.replace(bottomValue[0], bottomValue[0].toLocaleUpperCase());
return bottomValue;
};
var getMonday = function getMonday(date) {
var day = date.getDay();
var diff = date.getDate() - day + (day === 0 ? -6 : 1);
return new Date(date.setDate(diff));
};
var getWeekNumberISO8601 = function getWeekNumberISO8601(date) {
var tmpDate = new Date(date.valueOf());
var dayNumber = (tmpDate.getDay() + 6) % 7;
tmpDate.setDate(tmpDate.getDate() - dayNumber + 3);
var firstThursday = tmpDate.valueOf();
tmpDate.setMonth(0, 1);
if (tmpDate.getDay() !== 4) {
tmpDate.setMonth(0, 1 + (4 - tmpDate.getDay() + 7) % 7);
}
var weekNumber = (1 + Math.ceil((firstThursday - tmpDate.valueOf()) / 604800000)).toString();
if (weekNumber.length === 1) {
return "0" + weekNumber;
} else {
return weekNumber;
}
};
var styles = {"ganttTable":"_3_ygE","ganttTable_Header":"_1nBOt","ganttTable_HeaderSeparator":"_2eZzQ","ganttTable_HeaderItem":"_WuQ0f"};
var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
var headerHeight = _ref.headerHeight,
fontFamily = _ref.fontFamily,
fontSize = _ref.fontSize,
rowWidth = _ref.rowWidth,
scheduleType = _ref.scheduleType,
allSelected = _ref.allSelected,
onSelectAll = _ref.onSelectAll;
return React.createElement("div", {
className: styles.ganttTable,
style: {
fontFamily: fontFamily,
fontSize: fontSize
}
}, React.createElement("div", {
className: styles.ganttTable_Header,
style: {
height: headerHeight - 2
}
}, onSelectAll && React.createElement("div", null, React.createElement("div", {
className: styles.ganttTable_HeaderItem,
style: {
minWidth: parseInt(rowWidth) * 0.3,
maxWidth: parseInt(rowWidth) * 0.3
}
}, React.createElement("input", {
type: "checkbox",
checked: allSelected,
onChange: function onChange(e) {
return onSelectAll(e.target.checked);
}
}))), React.createElement("div", {
className: styles.ganttTable_HeaderItem,
style: {
minWidth: parseInt(rowWidth) * 0.8,
maxWidth: parseInt(rowWidth) * 0.8
}
}, "WBS"), React.createElement("div", {
className: styles.ganttTable_HeaderSeparator,
style: {
height: headerHeight * 0.5,
marginTop: headerHeight * 0.2
}
}), React.createElement("div", {
className: styles.ganttTable_HeaderItem,
style: {
minWidth: parseInt(rowWidth) * 0.8,
maxWidth: parseInt(rowWidth) * 0.8
}
}, "ID"), React.createElement("div", {
className: styles.ganttTable_HeaderSeparator,
style: {
height: headerHeight * 0.5,
marginTop: headerHeight * 0.2
}
}), React.createElement("div", {
className: styles.ganttTable_HeaderItem,
style: {
minWidth: parseInt(rowWidth) * 1.8,
maxWidth: parseInt(rowWidth) * 1.8
}
}, "Task"), React.createElement("div", {
className: styles.ganttTable_HeaderSeparator,
style: {
height: headerHeight * 0.5,
marginTop: headerHeight * 0.2
}
}), React.createElement("div", {
className: styles.ganttTable_HeaderItem,
style: {
minWidth: parseInt(rowWidth) * 0.6
},
title: "Planned Start"
}, "Planned Start"), React.createElement("div", {
className: styles.ganttTable_HeaderSeparator,
style: {
height: headerHeight * 0.5,
marginTop: headerHeight * 0.25
}
}), React.createElement("div", {
className: styles.ganttTable_HeaderItem,
style: {
minWidth: parseInt(rowWidth) * 0.6
},
title: "Planned End"
}, "Planned End"), scheduleType === "lookAhead" && React.createElement("div", {
className: styles.ganttTable_HeaderItem,
style: {
minWidth: parseInt(rowWidth) * 0.6
},
title: "Planned Start"
}, "Actual Start"), scheduleType === "lookAhead" && React.createElement("div", {
className: styles.ganttTable_HeaderSeparator,
style: {
height: headerHeight * 0.5,
marginTop: headerHeight * 0.25
}
}), scheduleType === "lookAhead" && React.createElement("div", {
className: styles.ganttTable_HeaderItem,
style: {
minWidth: parseInt(rowWidth) * 0.6
},
title: "Planned End"
}, "Actual End")));
};
var styles$1 = {"taskListWrapper":"_3ZbQT","taskListTableRow":"_34SS0","taskListLookAheadRow":"_GzvG4","taskListMilestoneRow":"_3Ykml","taskListCell":"_3lLk3","taskListNameWrapper":"_nI1Xw","taskListExpander":"_2QjE6","taskListExpanderPlaceholder":"_1fnLB","taskListEmptyExpander":"_2TfEi","taskListText":"_2ZvXU"};
var localeDateStringCache = {};
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;
}
return lds;
};
};
var dateTimeOptions = {
year: "numeric",
month: "numeric",
day: "numeric"
};
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;
} : _ref$taskLabelRendere;
var toLocaleDateString = useMemo(function () {
return toLocaleDateStringFactory(locale);
}, [locale]);
var leafTaskIds = useMemo(function () {
return new Set(leafTasks.map(function (t) {
return t.id;
}));
}, [leafTasks]);
return React.createElement("div", {
className: styles$1.taskListWrapper,
style: {
fontFamily: fontFamily,
fontSize: fontSize
}
}, tasks.map(function (t) {
var expanderSymbol = "";
if (!(leafTaskIds.has(t.id) || t.type === "milestone")) {
if (t.hideChildren === false) {
expanderSymbol = "▼";
} else if (t.hideChildren === true) {
expanderSymbol = "►";
}
}
var isSelected = selectedTasks.includes(t.id);
return React.createElement("div", {
className: t.type === "milestone" ? styles$1.taskListMilestoneRow : scheduleType === "lookAhead" ? styles$1.taskListLookAheadRow : styles$1.taskListTableRow,
style: {
height: rowHeight
},
key: t.id + "row"
}, onTaskSelect && React.createElement("div", {
className: styles$1.taskListCell,
style: {
minWidth: parseInt(rowWidth) * 0.3,
maxWidth: parseInt(rowWidth) * 0.3
}
}, React.createElement("div", {
className: styles$1.taskListText,
style: {
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
paddingLeft: "0",
paddingRight: "0"
}
}, React.createElement("input", {
type: "checkbox",
checked: isSelected,
onChange: function onChange(e) {
return onTaskSelect(t.id, e.target.checked);
}
}))), React.createElement("div", {
className: styles$1.taskListCell,
style: {
minWidth: parseInt(rowWidth) * 0.8,
maxWidth: parseInt(rowWidth) * 0.8
},
title: t.id
}, React.createElement("div", {
className: styles$1.taskListNameWrapper,
style: {
paddingLeft: t.depth * 4 + "px"
}
}, !(leafTaskIds.has(t.id) || t.type === "milestone") ? React.createElement("div", {
className: styles$1.taskListExpander,
onClick: function onClick() {
return onExpanderClick(t);
}
}, expanderSymbol) : React.createElement("div", {
className: styles$1.taskListExpanderPlaceholder
}), React.createElement("div", {
className: styles$1.taskListText
}, t.id, " ", t.actualEnd.getTime() > 0 && t.actualEnd.getTime() < Date.now() ? React.createElement("span", {
title: "Task Complete",
style: {
color: "limegreen",
fontSize: "16px"
}
}, "\u2714") : ""))), React.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.createElement("div", {
className: styles$1.taskListCell,
style: {
minWidth: parseInt(rowWidth) * 1.8,
maxWidth: parseInt(rowWidth) * 1.8
},
title: t.name
}, React.createElement("div", {
className: styles$1.taskListText
}, taskLabelRenderer(t))), React.createElement("div", {
className: styles$1.taskListCell,
style: {
minWidth: parseInt(rowWidth) * 0.6,
maxWidth: parseInt(rowWidth) * 0.6
}
}, React.createElement("div", {
className: styles$1.taskListText
}, "\xA0", toLocaleDateString(t.start, dateTimeOptions))), React.createElement("div", {
className: styles$1.taskListCell,
style: {
minWidth: parseInt(rowWidth) * 0.6,
maxWidth: parseInt(rowWidth) * 0.6
}
}, React.createElement("div", {
className: styles$1.taskListText
}, "\xA0", toLocaleDateString(t.end, dateTimeOptions))), scheduleType === "lookAhead" && React.createElement("div", {
className: styles$1.taskListCell,
style: {
minWidth: parseInt(rowWidth) * 0.6,
maxWidth: parseInt(rowWidth) * 0.6
}
}, React.createElement("div", {
className: styles$1.taskListText
}, "\xA0", toLocaleDateString(t.actualStart, dateTimeOptions))), scheduleType === "lookAhead" && React.createElement("div", {
className: styles$1.taskListCell,
style: {
minWidth: parseInt(rowWidth) * 0.6,
maxWidth: parseInt(rowWidth) * 0.6
}
}, React.createElement("div", {
className: styles$1.taskListText
}, "\xA0", toLocaleDateString(t.actualEnd, dateTimeOptions))));
}));
};
var styles$2 = {"tooltipDefaultContainer":"_3T42e","tooltipDefaultContainerParagraph":"_29NTg","tooltipDetailsContainer":"_25P-K","tooltipDetailsContainerHidden":"_3gVAq"};
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 = useRef(null);
var _useState = useState(0),
relatedY = _useState[0],
setRelatedY = _useState[1];
var _useState2 = useState(0),
relatedX = _useState2[0],
setRelatedX = _useState2[1];
useEffect(function () {
if (tooltipRef.current) {
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;
if (newRelatedX < 0) {
newRelatedX = task.x2 + arrowIndent * 1.5 - scrollX;
}
var tooltipLeftmostPoint = tooltipWidth + newRelatedX;
if (tooltipLeftmostPoint > svgContainerWidth) {
newRelatedX = svgContainerWidth - tooltipWidth;
newRelatedY += rowHeight;
}
} else {
newRelatedX = type == "planned" ? task.x2 + arrowIndent * 1.5 + taskListWidth - scrollX : task.actualx2 + arrowIndent * 1.5 + taskListWidth - scrollX;
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;
}
if (newRelatedX < taskListWidth) {
newRelatedX = svgContainerWidth + taskListWidth - tooltipWidth;
newRelatedY += rowHeight;
}
}
var tooltipLowerPoint = tooltipHeight + newRelatedY - scrollY;
if (tooltipLowerPoint > svgContainerHeight - scrollY) {
newRelatedY = svgContainerHeight - tooltipHeight;
}
setRelatedY(newRelatedY);
setRelatedX(newRelatedX);
}
}, [tooltipRef, task, arrowIndent, scrollX, scrollY, headerHeight, taskListWidth, rowHeight, svgContainerHeight, svgContainerWidth, rtl]);
return React.createElement("div", {
ref: tooltipRef,
className: relatedX ? styles$2.tooltipDetailsContainer : styles$2.tooltipDetailsContainerHidden,
style: {
left: relatedX,
top: relatedY
}
}, React.createElement(TooltipContent, {
task: task,
fontSize: fontSize,
fontFamily: fontFamily,
type: type
}));
};
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.createElement("div", {
className: styles$2.tooltipDefaultContainer,
style: style
}, React.createElement("b", {
style: {
fontSize: fontSize + 6
}
}, task.name + ": Planned dates: "), React.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.createElement("p", {
className: styles$2.tooltipDefaultContainerParagraph
}, "Duration: " + ~~((task.end.getTime() - task.start.getTime()) / (1000 * 60 * 60 * 24)) + " day(s)"), React.createElement("p", {
className: styles$2.tooltipDefaultContainerParagraph
}, !!task.progress && "Progress: " + task.progress + " %"));else return React.createElement("div", {
className: styles$2.tooltipDefaultContainer,
style: style
}, React.createElement("b", {
style: {
fontSize: fontSize + 6
}
}, task.name + ": Actual dates: "), React.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.createElement("p", {
className: styles$2.tooltipDefaultContainerParagraph
}, "Duration: " + ~~((task.actualEnd.getTime() - task.actualStart.getTime()) / (1000 * 60 * 60 * 24)) + " day(s)"), React.createElement("p", {
className: styles$2.tooltipDefaultContainerParagraph
}, !!task.progress && "Progress: " + task.progress + " %"));
};
var styles$3 = {"scroll":"_1eT-t"};
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 = useRef(null);
useEffect(function () {
if (scrollRef.current) {
scrollRef.current.scrollTop = scroll;
}
}, [scroll]);
return React.createElement("div", {
style: {
height: ganttHeight,
marginTop: headerHeight,
marginLeft: rtl ? "" : "-1rem",
marginRight: "1rem"
},
className: styles$3.scroll,
onScroll: onScroll,
ref: scrollRef
}, React.createElement("div", {
style: {
height: ganttFullHeight,
width: 1
}
}));
};
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,
onMultiSelect = _ref.onMultiSelect;
var horizontalContainerRef = useRef(null);
var _useState = useState([]),
selectedTasks = _useState[0],
setSelectedTasks = _useState[1];
var prevSelectedTasksRef = useRef([]);
useEffect(function () {
if (horizontalContainerRef.current) {
horizontalContainerRef.current.scrollTop = scrollY;
}
}, [scrollY]);
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,
scheduleType: scheduleType,
allSelected: tasks.length > 0 && selectedTasks.length === tasks.length,
onSelectAll: onMultiSelect ? handleSelectAll : undefined
};
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: setSelectedTask,
onExpanderClick: onExpanderClick,
selectedTasks: onMultiSelect ? selectedTasks : undefined,
onTaskSelect: onMultiSelect ? handleTaskSelect : undefined,
taskLabelRenderer: taskLabelRenderer
};
return React.createElement("div", {
ref: taskListRef
}, React.createElement(TaskListHeader, Object.assign({}, headerProps)), React.createElement("div", {
ref: horizontalContainerRef,
className: horizontalContainerClass,
style: ganttHeight ? {
height: ganttHeight
} : {}
}, React.createElement(TaskListTable, Object.assign({}, tableProps))));
};
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.createElement("line", {
key: "RowLineFirst",
x: "0",
y1: 0,
x2: svgWidth,
y2: 0,
className: styles$4.gridRowLine
})];
for (var _iterator = _createForOfIteratorHelperLoose(tasks), _step; !(_step = _iterator()).done;) {
var task = _step.value;
var isDarkerRow = task.type === "milestone";
gridRows.push(React.createElement("rect", {
key: "Row" + task.id,
x: "0",
y: y,
width: svgWidth,
height: rowHeight,
className: isDarkerRow ? styles$4.darkerGridRow : scheduleType === "lookAhead" ? styles$4.gridRowLookAhead : styles$4.gridRow
}));
rowLines.push(React.createElement("line", {
key: "RowLine" + task.id,
x: "0",
y1: y + rowHeight,
x2: svgWidth,
y2: y + rowHeight,
className: styles$4.gridRowLine
}));
y += rowHeight;
}
var now = new Date();
var tickX = 0;
var ticks = [];
var today = React.createElement("rect", null);
var weekend = [];
for (var i = 0; i < dates.length; i++) {
var date = dates[i];
ticks.push(React.createElement("line", {
key: date.getTime(),
x1: tickX,
y1: 0,
x2: tickX,
y2: y,
className: styles$4.gridTick
}));
if (i + 1 !== dates.length && date.getTime() < now.getTime() && dates[i + 1].getTime() >= now.getTime() || i !== 0 && i + 1 === dates.length && date.getTime() < now.getTime() && addToDate(date, date.getTime() - dates[i - 1].getTime(), "millisecond").getTime() >= now.getTime()) {
today = React.createElement("rect", {
x: tickX,
y: 0,
width: columnWidth,
height: y,
fill: todayColor
});
}
if (date.getDay() === 6 || date.getDay() === 0) {
weekend.push(React.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.createElement("rect", {
x: tickX + columnWidth,
y: 0,
width: columnWidth,
height: y,
fill: todayColor
});
}
tickX += columnWidth;
}
return React.createElement("g", {
className: "gridBody"
}, React.createElement("g", {
className: "rows"
}, gridRows), React.createElement("g", {
className: "rowLines"
}, rowLines), React.createElement("g", {
className: "ticks"
}, ticks), scheduleType === "lookAhead" && React.createElement("g", {
className: "weekend"
}, weekend), React.createElement("g", {
className: "today"
}, today));
};
var Grid = function Grid(props) {
return React.createElement("g", {
className: "grid"
}, React.createElement(GridBody, Object.assign({}, 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;
return React.createElement("g", {
className: "calendarTop"
}, React.createElement("line", {
x1: x1Line,
y1: y1Line,
x2: x1Line,
y2: y2Line,
className: styles$5.calendarTopTick,
key: value + "line"
}), React.createElement("text", {
key: value + "text",
y: yText,
x: xText,
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();
bottomValues.push(React.createElement("text", {
key: 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;
if (rtl) {
xText = (6 + i + date.getFullYear() + 1) * columnWidth;
} else {
xText = (6 + i - date.getFullYear()) * columnWidth;
}
topValues.push(React.createElement(TopPartOfCalendar, {
key: topValue,
value: topValue,
x1Line: columnWidth * i,
y1Line: 0,
y2Line: headerHeight,
xText: xText,
yText: topDefaultHeight * 0.9
}));
}
}
return [topValues, bottomValues];
};
var getCalendarValuesForQuarter = function getCalendarValuesForQuarter() {
var topValues = [];
var bottomValues = [];
var 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;
bottomValues.push(React.createElement("text", {
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;
if (rtl) {
xText = (3 + i + quarter) * columnWidth;
} else {
xText = (3 + i - quarter) * columnWidth;
}
topValues.push(React.createElement(TopPartOfCalendar, {
key: topValue,
value: topValue,
x1Line: columnWidth * i,
y1Line: 0,
y2Line: headerHeight,
xText: xText,
yText: topDefaultHeight * 0.9
}));
}
}
return [topValues, bottomValues];
};
var getCalendarValuesForMonth = function getCalendarValuesForMonth() {
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.toLocaleString(locale, {
month: "short"
});
bottomValues.push(React.createElement("text", {
key: bottomValue + date.getFullYear(),
y: headerHeight * 0.8,
x: columnWidth * i + columnWidth * 0.5,
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;
if (rtl) {
xText = (6 + i + date.getMonth() + 1) * columnWidth;
} else {
xText = (6 + i - date.getMonth()) * columnWidth;
}
console.log(xText);
topValues.push(React.createElement(TopPartOfCalendar, {
key: topValue,
value: topValue,
x1Line: columnWidth * i,
y1Line: 0,
y2Line: topDefaultHeight,
xText: xText,
yText: topDefaultHeight * 0.9,
textAnchor: "end"
}));
}
}
return [topValues, bottomValues];
};
var getCalendarValuesForWeek = function getCalendarValuesForWeek() {
var topValues = [];
var bottomValues = [];
var weeksCount = 1;
var topDefaultHeight = headerHeight * 0.5;
var dates = dateSetup.dates;
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();
}
var bottomValue = "W" + getWeekNumberISO8601(date);
bottomValues.push(React.createElement("text", {
key: date.getTime(),
y: headerHeight * 0.8,
x: columnWidth * (i + +rtl),
className: styles$5.calendarTopText + " " + styles$5.textAnchorStart
}, bottomValue));
if (topValue) {
if (i !== dates.length - 1) {
topValues.push(React.createElement(TopPartOfCalendar, {
key: topValue,
value: topValue,
x1Line: columnWidth * i + weeksCount * columnWidth,
y1Line: 0,
y2Line: topDefaultHeight,
xText: columnWidth * i + columnWidth * weeksCount * 0.5,
yText: topDefaultHeight * 0.9,
textAnchor: "start"
}));
}
weeksCount = 0;
}
weeksCount++;
}
return [topValues, bottomValues];
};
var getCalendarValuesForDay = function getCalendarValuesForDay() {
var topValues = [];
var bottomValues = [];
var topDefaultHeight = headerHeight * 0.5;
var dates = dateSetup.dates;
for (var i = 0; i < dates.length; i++) {
var date = dates[i];
var bottomValue = columnWidth > 55 ? getLocalDayOfWeek(date, locale, "short") + ", " + date.getDate().toString() : getLocalDayOfWeek(date, locale, "narrow") + "," + date.getDate().toString();
bottomValues.push(React.createElement("text", {
key: date.getTime(),
y: headerHeight * 0.8,
x: columnWidth * i + columnWidth * 0.5,
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();
topValues.push(React.createElement(TopPartOfCalendar, {
key: topValue + date.getFullYear(),
value: topValue,
x1Line: columnWidth * (i + 1),
y1Line: 0,
y2Line: topDefaultHeight,
xText: topValues.length === 0 ? columnWidth * (i + 1) * 0.5 : columnWidth * (i + 1) - date.getDate() * columnWidth * 0.5,
yText: topDefaultHeight * 0.9
}));
}
if (i + 1 === dates.length) {
var _topValue = getLocaleMonth(date, locale) + " " + date.getFullYear();
topValues.push(React.createElement(TopPartOfCalendar, {
key: _topValue + date.getFullYear(),
value: _topValue,
x1Line: columnWidth * (i + 1),
y1Line: 0,
y2Line: topDefaultHeight,
xText: columnWidth * (i + 1) - date.getDate() * columnWidth * 0.5,
yText: topDefaultHeight * 0.9
}));
}
}
return [topValues, bottomValues];
};
var getCalendarValuesForPartOfDay = function getCalendarValuesForPartOfDay() {
var topValues = [];
var bottomValues = [];
var ticks = viewMode === ViewMode.HalfDay ? 2 : 4;
var topDefaultHeight = headerHeight * 0.5;
var dates = dateSetup.dates;
for (var i = 0; i < dates.length; i++) {
var date = dates[i];
var bottomValue = getCachedDateTimeFormat(locale, {
hour: "numeric"
}).format(date);
bottomValues.push(React.createElement("text", {
key: date.getTime(),
y: headerHeight * 0.8,
x: columnWidth * (i + +rtl),
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);
topValues.push(React.createElement(TopPartOfCalendar, {
key: topValue + date.getFullYear(),
value: topValue,
x1Line: columnWidth * i + ticks * columnWidth,
y1Line: 0,
y2Line: topDefaultHeight,
xText: columnWidth * i + ticks * columnWidth * 0.5,
yText: topDefaultHeight * 0.9
}));
}
}
return [topValues, bottomValues];
};
var getCalendarValuesForHour = function getCalendarValuesForHour() {
var topValues = [];
var bottomValues = [];
var topDefaultHeight = headerHeight * 0.5;
var dates = dateSetup.dates;
for (var i = 0; i < dates.length; i++) {
var date = dates[i];
var bottomValue = getCachedDateTimeFormat(locale, {
hour: "numeric"
}).format(date);
bottomValues.push(React.createElement("text", {
key: date.getTime(),
y: headerHeight * 0.8,
x: columnWidth * (i + +rtl),
className: styles$5.calendarBottomText,
fontFamily: fontFamily
}, 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;
topValues.push(React.createElement(TopPartOfCalendar, {
key: topValue + displayDate.getFullYear(),
value: topValue,
x1Line: columnWidth * i,
y1Line: 0,
y2Line: topDefaultHeight,
xText: columnWidth * (i + topPosition),
yText: topDefaultHeight * 0.9
}));
}
}
return [topValues, bottomValues];
};
var topValues = [];
var bottomValues = [];
switch (dateSetup.viewMode) {
case ViewMode.Year:
var _getCalendarValuesFor = getCalendarValuesForYear();
topValues = _getCalendarValuesFor[0];
bottomValues = _getCalendarValuesFor[1];
break;
case ViewMode.Quarter:
var _getCalendarValuesFor2 = getCalendarValuesForQuarter();
topValues = _getCalendarValuesFor2[0];
bottomValues = _getCalendarValuesFor2[1];
break;
case ViewMode.Month:
var _getCalendarValuesFor3 = getCalendarValuesForMonth();
topValues = _getCalendarValuesFor3[0];
bottomValues = _getCalendarValuesFor3[1];
break;
case ViewMode.Week:
var _getCalendarValuesFor4 = getCalendarValuesForWeek();
topValues = _getCalendarValuesFor4[0];
bottomValues = _getCalendarValuesFor4[1];
break;
case ViewMode.Day:
var _getCalendarValuesFor5 = getCalendarValuesForDay();
topValues = _getCalendarValuesFor5[0];
bottomValues = _getCalendarValuesFor5[1];
break;
case ViewMode.QuarterDay:
case ViewMode.HalfDay:
var _getCalendarValuesFor6 = getCalendarValuesForPartOfDay();
topValues = _getCalendarValuesFor6[0];
bottomValues = _getCalendarValuesFor6[1];
break;
case ViewMode.Hour:
var _getCalendarValuesFor7 = getCalendarValuesForHour();
topValues = _getCalendarValuesFor7[0];
bottomValues = _getCalendarValuesFor7[1];
}
return React.createElement("g", {
className: "calendar",
fontSize: fontSize,
fontFamily: fontFamily,
width: columnWidth * dateSetup.dates.length
}, React.createElement("rect", {
x: 0,
y: 0,
width: columnWidth * dateSetup.dates.length,
height: headerHeight,
className: styles$5.calendarHeader
}), bottomValues, " ", topValues);
};
// A type of promise-like that resolves synchronously and supports only one observer
const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
const _asyncIteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator"))) : "@@asyncIterator";
// Asynchronously call a function and send errors to recovery continuation
function _catch(body, recover) {
try {
var result = body();
} catch(e) {
return recover(e);
}
if (result && result.then) {
return result.then(void 0, recover);
}
return result;
}
var Arrow = function Arrow(_ref) {
var taskFrom = _ref.taskFrom,
taskTo = _ref.taskTo,
rowHeight = _ref.rowHeight,
taskHeight = _ref.taskHeight,
arrowIndent = _ref.arrowIndent,
arrowColor = _ref.arrowColor,
dependencyType = _ref.dependencyType;
var _drawPathAndTriangle = drawPathAndTriangle(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent, dependencyType),
path = _drawPathAndTriangle[0],
trianglePoints = _drawPathAndTriangle[1];
return React.createElement("g", {
className: "arrow"
}, React.createElement("path", {
strokeWidth: "1.5",
d: path,
fill: "none",
stroke: arrowColor
}), React.createElement("polygon", {
points: trianglePoints,
fill: arrowColor
}));
};
var drawPathAndTriangle = function drawPathAndTriangle(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent, dependencyType) {
var indexCompare = taskFrom.index > taskTo.index ? -1 : 1;
var taskToEndY = taskTo.y + taskHeight / 2;
var verticalOffset = indexCompare * (rowHeight / 2);
var minX = function minX(t) {
if (t.x1 && t.actualx1) {
return Math.min(t.x1, t.actualx1);
} else if (t.x1) {
return t.x1;
} else if (t.actualx1) {
return t.actualx1;
} else {
return 0;
}
};
var maxX = function maxX(t) {
return Math.max(t.x2 || 0, t.actualx2 || 0);
};
var fromPoint, toPoint;
switch (dependencyType) {
case "SS":
fromPoint = minX(taskFrom);
toPoint = minX(taskTo);
break;
case "SF":
fromPoint = minX(taskFrom);
toPoint = maxX(taskTo);
break;
case "FS":
fromPoint = maxX(taskFrom);
toPoint = minX(taskTo);
break;
case "FF":
fromPoint = maxX(taskFrom);
toPoint = maxX(taskTo);
break;
}
var arrowPoints = function arrowPoints(x, y, right) {
if (right === void 0) {
right = true;
}
return right ? x + "," + y + " " + (x - 5) + "," + (y - 5) + " " + (x - 5) + "," + (y + 5) : x + "," + y + " " + (x + 5) + "," + (y - 5) + " " + (x + 5) + "," + (y + 5);
};
var path;
var trianglePoints;
switch (dependencyType) {
case "SS":
path = "M " + fromPoint + " " + (taskFrom.y + taskHeight / 2) + "\n H " + (fromPoint + Math.min(toPoint - fromPoint, 0) - 2 * arrowIndent) + "\n V " + taskToEndY + "\n H " + (toPoint - 5);
trianglePoints = arrowPoints(toPoint, taskToEndY, true);
break;
case "SF":
path = "M " + fromPoint + " " + (taskFrom.y + taskHeight / 2) + "\n H " + (fromPoint - 2 * arrowIndent) + "\n V " + (taskFrom.y + taskHeight / 2 + verticalOffset) + "\n " + (fromPoint - toPoint > 4 * arrowIndent ? "" : "H " + (toPoint + 2 * arrowIndent)) + "\n V " + taskToEndY + "\n H " + (toPoint + 5);
trianglePoints = arrowPoints(toPoint, taskToEndY, false);
break;
case "FS":
path = "M " + fromPoint + " " + (taskFrom.y + taskHeight / 2) + "\n H " + (fromPoint + 2 * arrowIndent) + "\n V " + (taskFrom.y + taskHeight / 2 + verticalOffset) + "\n " + (toPoint - fromPoint > 4 * arrowIndent ? "" : "H " + (toPoint - 2 * arrowIndent)) + "\n V " + taskToEndY + "\n H " + (toPoint - 5);
trianglePoints = arrowPoints(toPoint, taskToEndY, true);
break;
case "FF":
path = "M " + fromPoint + " " + (taskFrom.y + taskHeight / 2) + "\n H " + (fromPoint + Math.max(toPoint - fromPoint, 0) + 2 * arrowIndent) + "\n V " + taskToEndY + "\n H " + (toPoint + 5);
trianglePoints = arrowPoints(toPoint, taskToEndY, false);
break;
}
return [path, trianglePoints];
};
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(function (task) {
var dependencies = task.dependencies || [];
var _loop = function _loop(j) {
var dependence = barTasks.findIndex(function (value) {
return value.id === dependencies[j].id;
});
if (dependence !== -1 && task.start.getTime() > 0 && task.end.getTime() > 0) {
var barchild = _extends({}, task, {
dependencyType: dependencies[j].type
});
barTasks[dependence].barChildren.push(barchild);
}
};
for (var j = 0; j < dependencies.length; j++) {
_loop(j);
}
return task;
});
return barTasks;
};
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":
barTask = convertToMilestone(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, milestoneBackgroundColor, milestoneBackgroundSelectedColor);
break;
case "project":
barTask = convertToBar(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor);
break;
default:
barTask = convertToBar(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor);
break;
}
return barTask;
};
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;
x1 = task.end ? taskXCoordinateRTL(task.end, dates, columnWidth) : -1;
actualx1 = task.actualStart ? taskXCoordinateRTL(task.actualStart, dates, columnWidth) : -1;
actualx2 = task.actualEnd ? taskXCoordinateRTL(task.actualEnd, dates, columnWidth) : -1;
} else {
x1 = task.start ? taskXCoordinate(task.start, dates, columnWidth) : -1;
x2 = task.end ? taskXCoordinate(task.end, dates, columnWidth) : -1;
actualx1 = task.actualStart ? taskXCoordinate(task.actualStart, dates, columnWidth) : -1;
actualx2 = task.actualEnd ? taskXCoordinate(task.actualEnd, dates, columnWidth) : -1;
}
progressStartWidth = actualx1 && x1 ? Math.abs(actualx1 - x1) : -1;
progressEndWidth = actualx2 && x2 ? Math.abs(actualx2 - x2) : -1;
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 _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
});
};
var convertToMilestone = function convertToMilestone(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, milestoneBackgroundColor, milestoneBackgroundSelectedColor) {
var x = task.start && task.end ? taskXCoordinate(task.end, 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 _extends({}, task, {
x1: x1,
x2: x2,
actualx1: x1,
actualx2: x2,
progressStartWidth: 0,
progressEndWidth: 0,
y: y,
index: index,
progressX: 0,
progressWidth: 0,
barCornerRadius: barCornerRadius,
handleWidth: handleWidth,
typeInternal: task.type,
progress: 0,
height: rotatedHeight,
hideChildren: undefined,
barChildren: [],
styles: styles
});
};
var taskXCoordinate = function taskXCoordinate(xDate, dates, columnWidth) {
var index = dates.findIndex(function (d) {
return d.getTime() >= xDate.getTime();
}) - 1;
if (index < 0) {
if (dates[dates.length - 1].getTime() <= xDate.getTime()) {
return dates.length * columnWidth;
} else {
return 0;
}
}
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;
};
var taskXCoordinateRTL = function taskXCoordinateRTL(xDate, dates, columnWidth) {
var x = taskXCoordinate(xDate, dates, columnWidth);
x += columnWidth;
return x;
};
var taskYCoordinate = function taskYCoordinate(index, rowHeight, taskHeight) {
var y = index * rowHeight + (rowHeight - taskHeight) / 2;
return y;
};
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;
} else {
progressX = taskX1 > 0 ? taskX1 : 0;
}
return [progressWidth, progressX];
};
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(",");
};
var startByX = function startByX(x, xStep, task) {
if (x >= task.x2 - task.handleWidth * 2) {
x = task.x2 - task.handleWidth * 2;
}
var steps = Math.round((x - task.x1) / xStep);
var additionalXValue = steps * xStep;
var newX = task.x1 + additionalXValue;
return newX;
};
var startByActualX = function startByActualX(x, xStep, task) {
if (x >= task.actualx2 - task.handleWidth * 2) {
x = task.actualx2 - task.handleWidth * 2;
}
var steps = Math.round((x - task.actualx1) / xStep);
var additionalXValue = steps * xStep;
var newX = task.actualx1 + additionalXValue;
return newX;
};
var endByX = function endByX(x, xStep, task) {
if (x <= task.x1 + task.handleWidth * 2) {
x = task.x1 + task.handleWidth * 2;
}
var steps = Math.round((x - task.x2) / xStep);
var additionalXValue = steps * xStep;
var newX = task.x2 + additionalXValue;
return newX;
};
var endByActualX = function endByActualX(x, xStep, task) {
if (x <= task.actualx1 + task.handleWidth * 2) {
x = task.actualx1 + task.handleWidth * 2;
}
var steps = Math.round((x - task.actualx2) / xStep);
var additionalXValue = steps * xStep;
var newX = task.actualx2 + additionalXValue;
return newX;
};
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];
};
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];
};
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;
};
var handleTaskBySVGMouseEvent = function handleTaskBySVGMouseEvent(svgX, action, selectedTask, type, xStep, timeStep, initEventX1Delta, rtl) {
var result;
switch (selectedTask.type) {
case "milestone":
result = handleTaskBySVGMouseEventForMilestone(svgX, action, selectedTask, xStep, timeStep, initEventX1Delta);
break;
default:
result = handleTaskBySVGMouseEventForBar(svgX, action, selectedTask, type, xStep, timeStep, initEventX1Delta, rtl);
break;
}
return result;
};
var handleTaskBySVGMouseEventForBar = function handleTaskBySVGMouseEventForBar(svgX, action, selectedTask, type, xStep, timeStep, initEventX1Delta, rtl) {
var changedTask = _extends({}, selectedTask);
var isChanged = false;
switch (action) {
case "start":
{
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;
if (isChanged) {
if (rtl) {
if (type == "planned") changedTask.end = dateByX(newX1, selectedTask.x1, selectedTask.end, xStep, timeStep);
if (type == "actual") changedTask.actualEnd = dateByX(newX1, selectedTask.actualx1, selectedTask.actualEnd, xStep, timeStep);
} else {
if (type == "planned") changedTask.start = dateByX(newX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
if (type == "actual") changedTask.actualStart = dateByX(newX1, selectedTask.actualx1, selectedTask.actualStart, xStep, timeStep);
}
var _progressWithByParams2 = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl),
progressWidth = _progressWithByParams2[0],
progressX = _progressWithByParams2[1];
changedTask.progressWidth = progressWidth;
changedTask.progressX = progressX;
}
break;
}
case "end":
{
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;
if (isChanged) {
if (rtl) {
if (type == "planned") changedTask.start = dateByX(newX2, selectedTask.x2, selectedTask.start, xStep, timeStep);
if (type == "actual") changedTask.actualStart = dateByX(newX2, selectedTask.actualx2, selectedTask.actualStart, xStep, timeStep);
} else {
if (type == "planned") changedTask.end = dateByX(newX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
if (type == "actual") changedTask.actualEnd = dateByX(newX2, selectedTask.actualx2, selectedTask.actualEnd, xStep, timeStep);
}
var _progressWithByParams3 = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl),
_progressWidth = _progressWithByParams3[0],
_progressX = _progressWithByParams3[1];
changedTask.progressWidth = _progressWidth;
changedTask.progressX = _progressX;
}
break;
}
case "move":
{
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;
if (isChanged) {
if (type == "planned") {
changedTask.start = dateByX(newMoveX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
changedTask.end = dateByX(newMoveX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
changedTask.x1 = newMoveX1;
changedTask.x2 = newMoveX2;
}
if (type == "actual") {
changedTask.actualStart = dateByX(newMoveX1, selectedTask.actualx1, selectedTask.actualStart, xStep, timeStep);
changedTask.actualEnd = dateByX(newMoveX2, selectedTask.actualx2, selectedTask.actualEnd, xStep, timeStep);
changedTask.actualx1 = newMoveX1;
changedTask.actualx2 = newMoveX2;
}
}
break;
}
}
return {
isChanged: isChanged,
changedTask: changedTask
};
};
var handleTaskBySVGMouseEventForMilestone = function handleTaskBySVGMouseEventForMilestone(svgX, action, selectedTask, xStep, timeStep, initEventX1Delta) {
var changedTask = _extends({}, selectedTask);
var isChanged = false;
switch (action) {
case "move":
{
var _moveByX = moveByX(svgX - initEventX1Delta, xStep, selectedTask),
newMoveX1 = _moveByX[0],
newMoveX2 = _moveByX[1];
isChanged = newMoveX1 !== selectedTask.x1;
if (isChanged) {
changedTask.start = dateByX(newMoveX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
changedTask.end = changedTask.start;
changedTask.x1 = newMoveX1;
changedTask.x2 = newMoveX2;
}
break;
}
}
return {
isChanged: isChanged,
changedTask: changedTask
};
};
function isKeyboardEvent(event) {
return event.key !== undefined;
}
function removeHiddenTasks(tasks) {
var groupedTasks = tasks.filter(function (t) {
return t.hideChildren && t.type === "project";
});
if (groupedTasks.length > 0) {
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);
}
}
return tasks;
}
function getChildren(taskList, task) {
var tasks = [];
if (task.type !== "project") {
tasks = taskList.filter(function (t) {
return t.dependencies && t.dependencies.map(function (_ref) {
var id = _ref.id;
return id;
}).indexOf(task.id) !== -1;
});
} else {
tasks = taskList.filter(function (t) {
return t.project && t.project === task.id;
});
}
var taskChildren = [];
tasks.forEach(function (t) {
taskChildren.push.apply(taskChildren, getChildren(taskList, t));
});
tasks = tasks.concat(tasks, taskChildren);
return tasks;
}
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;
} else if (orderA < orderB) {
return -1;
} else {
return 0;
}
};
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;
};
var getBarColor = function getBarColor() {
return isSelected ? styles.backgroundSelectedColor : styles.backgroundColor;
};
if (type == "planned") return React.createElement("g", {
onMouseDown: onMouseDown
}, React.createElement("rect", {
x: x,
width: width,
y: y,
height: height,
ry: barCornerRadius,
rx: barCornerRadius,
fill: getBarColor(),
strokeWidth: 2,
stroke: styles.criticalPathColor
}), React.createElement("rect", {
x: progressX,
width: progressWidth,
y: y,
height: height,
ry: barCornerRadius,
rx: barCornerRadius,
fill: getProcessColor()
}));else return React.createElement("g", {
onMouseDown: onMouseDown
}, React.createElement("rect", {
x: x,
width: width,
y: y,
height: height,
ry: barCornerRadius,
rx: barCornerRadius,
fill: styles.taskProgressColor
}), React.createElement("rect", {
x: progressX,
width: progressWidth,
y: y,
height: height,
ry: barCornerRadius,
rx: barCornerRadius,
fill: getProcessColor()
}));
};
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;
return React.createElement("rect", {
x: x,
y: y,
width: width,
height: height,
className: styles$6.barHandle,
ry: barCornerRadius,
rx: barCornerRadius,
onMouseDown: onMouseDown
});
};
var BarProgressHandle = function BarProgressHandle(_ref) {
_objectDestructuringEmpty(_ref);
return React.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;
if (type == "planned") {
if ((task === null || task === void 0 ? void 0 : task.x1) >= 0 && (task === null || task === void 0 ? void 0 : task.x2) > 0) return React.createElement("g", {
className: styles$6.barWrapper,
tabIndex: 0
}, React.createElement(BarDisplay, {
x: task.x1,
y: task.y,
type: type,
startProgressWidth: task.progressStartWidth,
endProgressWidth: task.progressEndWidth,
width: task.x2 - task.x1,
height: task.height / 2,
progressX: task.progressX,
progressWidth: task.progressWidth,
barCornerRadius: task.barCornerRadius,
styles: task.styles,
isSelected: isSelected,
onMouseDown: function onMouseDown(e) {
isDateChangeable && onEventStart("move", task, e, "planned");
}
}), React.createElement("g", {
className: "handleGroup"
}, isDateChangeable && React.createElement("g", null, React.createElement(BarDateHandle, {
x: task.x1 + 1,
y: task.y + 1,
width: task.handleWidth,
height: handleHeight,
barCornerRadius: task.barCornerRadius,
onMouseDown: function onMouseDown(e) {
onEventStart("start", task, e, "planned");
}
}), React.createElement(BarDateHandle, {
x: task.x2 - task.handleWidth - 1,
y: task.y + 1,
width: task.handleWidth,
height: handleHeight,
barCornerRadius: task.barCornerRadius,
onMouseDown: function onMouseDown(e) {
onEventStart("end", task, e, "planned");
}
})), isProgressChangeable && React.createElement(BarProgressHandle, {
progressPoint: progressPoint,
onMouseDown: function onMouseDown(e) {
onEventStart("progress", task, e, "planned");
}
})));else return React.createElement("g", {
className: styles$6.barWrapper,
tabIndex: 0
});
} else if ((task === null || task === void 0 ? void 0 : task.actualx1) >= 0 && (task === null || task === void 0 ? void 0 : task.actualx2) > 0) {
return React.createElement("g", {
className: styles$6.barWrapper,
tabIndex: 0
}, React.createElement(BarDisplay, {
x: task.actualx1,
y: task.y + task.height / 2,
type: type,
startProgressWidth: task.progressStartWidth,
endProgressWidth: task.progressEndWidth,
width: task.actualx2 - task.actualx1,
height: task.height / 2,
progressX: task.progressX,
progressWidth: task.progressWidth,
barCornerRadius: task.barCornerRadius,
styles: task.styles,
isSelected: isSelected,
onMouseDown: function onMouseDown(e) {
isDateChangeable && onEventStart("move", task, e, "actual");
}
}), React.createElement("g", {
className: "handleGroup"
}, isDateChangeable && React.createElement("g", null, React.createElement(BarDateHandle, {
x: task.actualx1 + 1,
y: task.y + task.height / 2 + 1,
width: task.handleWidth,
height: handleHeight,
barCornerRadius: task.barCornerRadius,
onMouseDown: function onMouseDown(e) {
onEventStart("start", task, e, "actual");
}
}), React.createElement(BarDateHandle, {
x: task.actualx2 - task.handleWidth - 1,
y: task.y + task.height / 2 + 1,
width: task.handleWidth,
height: handleHeight,
barCornerRadius: task.barCornerRadius,
onMouseDown: function onMouseDown(e) {
onEventStart("end", task, e, "actual");
}
})), isProgressChangeable && React.createElement(BarProgressHandle, {
progressPoint: progressPoint,
onMouseDown: function onMouseDown(e) {
onEventStart("progress", task, e, "actual");
}
})));
} else {
return React.createElement("g", {
className: styles$6.barWrapper,
tabIndex: 0
});
}
};
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.createElement("g", {
className: styles$6.barWrapper,
tabIndex: 0
}, React.createElement(BarDisplay, {
x: task.x1,
y: task.y,
type: type,
startProgressWidth: task.progressStartWidth,
endProgressWidth: task.progressEndWidth,
width: task.x2 - task.x1,
height: task.height,
progressX: task.progressX,
progressWidth: task.progressWidth,
barCornerRadius: task.barCornerRadius,
styles: task.styles,
isSelected: isSelected,
onMouseDown: function onMouseDown(e) {
isDateChangeable && onEventStart("move", task, e);
}
}), React.createElement("g", {
className: "handleGroup"
}, isProgressChangeable && React.createElement(BarProgressHandle, {
progressPoint: progressPoint,
onMouseDown: function onMouseDown(e) {
onEventStart("progress", task, e);
}
})));
};
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() {
return isSelected ? task.styles.backgroundSelectedColor : task.styles.backgroundColor;
};
return React.createElement("g", {
tabIndex: 0,
className: styles$7.milestoneWrapper
}, React.createElement("rect", {
fill: getBarColor(),
x: task.x1,
width: task.height,
y: task.y,
height: task.height,
rx: task.barCornerRadius,
ry: task.barCornerRadius,
transform: transform,
className: styles$7.milestoneBackground,
onMouseDown: function onMouseDown(e) {
isDateChangeable && onEventStart("move", task, e, "planned");
},
onDoubleClick: function onDoubleClick(e) {
onEventStart("dblclick", task, e);
}
}));
};
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(",");
return React.createElement("g", {
tabIndex: 0,
className: styles$8.projectWrapper
}, React.createElement("rect", {
fill: barColor,
x: task.x1,
width: projectWith,
y: task.y,
height: task.height,
rx: task.barCornerRadius,
ry: task.barCornerRadius,
className: styles$8.projectBackground
}), React.createElement("rect", {
x: task.progressX,
width: task.progressWidth,
y: task.y,
height: task.height,
ry: task.barCornerRadius,
rx: task.barCornerRadius,
fill: processColor
}), React.createElement("rect", {
fill: barColor,
x: task.x1,
width: projectWith,
y: task.y,
height: task.height / 2,
rx: task.barCornerRadius,
ry: task.barCornerRadius,
className: styles$8.projectTop
}), React.createElement("polygon", {
className: styles$8.projectTop,
points: projectLeftTriangle,
fill: barColor
}), React.createElement("polygon", {
className: styles$8.projectTop,
points: projectRightTriangle,
fill: barColor
}));
};
var TaskItem = function TaskItem(props) {
var _props = _extends({}, props),
task = _props.task,
isDelete = _props.isDelete,
isSelected = _props.isSelected,
onEventStart = _props.onEventStart;
var _useState = useState([React.createElement("div", null)]),
taskItem = _useState[0],
setTaskItem = _useState[1];
useEffect(function () {
switch (task.typeInternal) {
case "milestone":
if (task.x1 >= 0 && task.actualx1 >= 0) setTaskItem([React.createElement(Milestone, Object.assign({}, props))]);else setTaskItem([]);
break;
case "project":
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.createElement(Project, Object.assign({}, props))]);else setTaskItem([]);
break;
case "smalltask":
setTaskItem([React.createElement(BarSmall, Object.assign({}, props))]);
break;
default:
{
var _taskItem = [];
if ((task === null || task === void 0 ? void 0 : task.x1) >= 0 && (task === null || task === void 0 ? void 0 : task.x2) >= 0) {
_taskItem.push(React.createElement(Bar, Object.assign({}, props, {
type: "planned"
})));
}
if ((task === null || task === void 0 ? void 0 : task.actualx1) >= 0 && (task === null || task === void 0 ? void 0 : task.actualx2) >= 0) {
_taskItem.push(React.createElement(Bar, Object.assign({}, props, {
type: "actual"
})));
}
setTaskItem(_taskItem);
}
break;
}
}, [task, isSelected]);
return React.createElement("g", null, React.createElement("g", {
onKeyDown: function onKeyDown(e) {
switch (e.key) {
case "Delete":
{
if (isDelete) onEventStart("delete", task, e, "planned");
break;
}
}
e.stopPropagation();
},
onMouseEnter: function onMouseEnter(e) {
onEventStart("mouseenter", task, e, "planned");
},
onMouseLeave: function onMouseLeave(e) {
onEventStart("mouseleave", task, e, "planned");
},
onDoubleClick: function onDoubleClick(e) {
onEventStart("dblclick", task, e, "planned");
},
onClick: function onClick(e) {
onEventStart("click", task, e, "planned");
}
}, taskItem[0]), React.createElement("g", {
onKeyDown: function onKeyDown(e) {
switch (e.key) {
case "Delete":
{
if (isDelete) onEventStart("delete", task, e, "actual");
break;
}
}
e.stopPropagation();
},
onMouseEnter: function onMouseEnter(e) {
onEventStart("mouseenter", task, e, "actual");
},
onMouseLeave: function onMouseLeave(e) {
onEventStart("mouseleave", task, e, "actual");
},
onDoubleClick: function onDoubleClick(e) {
onEventStart("dblclick", task, e, "actual");
},
onClick: function onClick(e) {
onEventStart("click", task, e, "actual");
}
}, taskItem[1]));
};
var TaskGanttContent = function 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 = useState(0),
xStep = _useState[0],
setXStep = _useState[1];
var _useState2 = useState(0),
initEventX1Delta = _useState2[0],
setInitEventX1Delta = _useState2[1];
var _useState3 = useState(false),
isMoving = _useState3[0],
setIsMoving = _useState3[1];
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]);
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;
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
});
}
return Promise.resolve();
} catch (e) {
return Promise.reject(e);
}
};
var handleMouseUp = function handleMouseUp(event) {
try {
var _svg$current$getScree2;
var _temp6 = function _temp6() {
if (!operationSuccess) {
setFailedTask(originalSelectedTask);
}
};
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;
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);
var operationSuccess = true;
var _temp7 = function () {
if ((action === "move" || action === "end" || action === "start") && onDateChange && isNotLikeOriginal) {
var _temp8 = _catch(function () {
return Promise.resolve(onDateChange(newChangedTask, newChangedTask.barChildren)).then(function (result) {
if (result !== undefined) {
operationSuccess = result;
}
});
}, function () {
operationSuccess = false;
});
if (_temp8 && _temp8.then) return _temp8.then(function () {});
} else {
var _temp9 = function () {
if (onProgressChange && isNotLikeOriginal) {
var _temp10 = _catch(function () {
return Promise.resolve(onProgressChange(newChangedTask, newChangedTask.barChildren)).then(function (result) {
if (result !== undefined) {
operationSuccess = result;
}
});
}, function () {
operationSuccess = false;
});
if (_temp10 && _temp10.then) return _temp10.then(function () {});
}
}();
if (_temp9 && _temp9.then) return _temp9.then(function () {});
}
}();
return Promise.resolve(_temp7 && _temp7.then ? _temp7.then(_temp6) : _temp6(_temp7));
} catch (e) {
return Promise.reject(e);
}
};
if (!isMoving && (ganttEvent.action === "move" || ganttEvent.action === "end" || ganttEvent.action === "start" || ganttEvent.action === "progress") && svg !== null && svg !== void 0 && svg.current) {
svg.current.addEventListener("mousemove", handleMouseMove);
svg.current.addEventListener("mouseup", handleMouseUp);
setIsMoving(true);
}
}, [ganttEvent, xStep, initEventX1Delta, onProgressChange, timeStep, onDateChange, svg, isMoving, point, rtl, setFailedTask, setGanttEvent]);
var handleBarEventStart = function handleBarEventStart(action, task, event, type) {
try {
return Promise.resolve(function () {
if (!event) {
if (action === "select") {
setSelectedTask(task.id);
}
} else return function () {
if (isKeyboardEvent(event)) {
var _temp14 = function () {
if (action === "delete") {
var _temp15 = function () {
if (onDelete) {
var _temp16 = _catch(function () {
return Promise.resolve(onDelete(task)).then(function (result) {
if (result !== undefined && result) {
setGanttEvent({
action: action,
changedTask: task
});
}
});
}, function (error) {
console.error("Error on Delete. " + error);
});
if (_temp16 && _temp16.then) return _temp16.then(function () {});
}
}();
if (_temp15 && _temp15.then) return _temp15.then(function () {});
}
}();
if (_temp14 && _temp14.then) return _temp14.then(function () {});
} else if (action === "mouseenter") {
if (!ganttEvent.action) {
setGanttEvent({
action: action,
changedTask: task,
originalSelectedTask: task,
type: type
});
}
} else if (action === "mouseleave") {
if (ganttEvent.action === "mouseenter") {
setGanttEvent({
action: ""
});
}
} else if (action === "dblclick") {
!!onDoubleClick && onDoubleClick(task);
} else if (action === "click") {
!!onClick && onClick(task);
} else if (action === "move") {
var _svg$current$getScree3;
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());
if (type == "planned") setInitEventX1Delta(cursor.x - task.x1);else if (type == "actual") setInitEventX1Delta(cursor.x - task.actualx1);
setGanttEvent({
action: action,
changedTask: task,
originalSelectedTask: task,
type: type
});
} else {
setGanttEvent({
action: action,
changedTask: task,
originalSelectedTask: task,
type: type
});
}
}();
}());
} catch (e) {
return Promise.reject(e);
}
};
var getArrows = function getArrows(isCritical, criticalPathType) {
return tasks.flatMap(function (_task) {
var task = _task.start.getTime() > 0 && _task.end.getTime() > 0 ? _task : undefined;
if (!task) {
return [React.createElement("g", {
key: _task.id + (isCritical ? "-critical" : "-normal"),
style: {
height: taskHeight
}
})];
}
return task.barChildren.map(function (child) {
if (task.x2 > task.x1 || task.actualx2 > task.actualx1) {
var _task$criticalPathArr;
var criticalTask = (_task$criticalPathArr = task.criticalPathArrows) === null || _task$criticalPathArr === void 0 ? void 0 : _task$criticalPathArr.find(function (arrow) {
return arrow.taskId === tasks[child.index].id && (!!arrow.criticalPathType ? arrow.criticalPathType === criticalPathType : !criticalPathType);
});
if (!!criticalTask === isCritical) {
return React.createElement(Arrow, {
key: "Arrow from " + task.id + " to " + tasks[child.index].id + (isCritical ? "-critical" : ""),
taskFrom: task,
taskTo: tasks[child.index],
rowHeight: rowHeight,
dependencyType: child.dependencyType,
taskHeight: taskHeight,
arrowIndent: arrowIndent,
arrowColor: (criticalTask === null || criticalTask === void 0 ? void 0 : criticalTask.arrowColor) || "#808080"
});
}
}
return null;
}).filter(Boolean);
});
};
return React.createElement("g", {
className: "content"
}, React.createElement("g", {
className: "arrows"
}, getArrows(false), getArrows(true, "secondary"), getArrows(true, "primary")), React.createElement("g", {
className: "bar",
fontFamily: fontFamily,
fontSize: fontSize
}, tasks.map(function (_task) {
var task = _task.start.getTime() > 0 && _task.end.getTime() > 0 || _task.actualStart.getTime() > 0 && _task.actualEnd.getTime() > 0 ? _task : undefined;
if (!task && _task.typeInternal === "milestone") {
return React.createElement(Milestone, {
task: _task,
arrowIndent: arrowIndent,
taskHeight: taskHeight,
isProgressChangeable: false,
isDateChangeable: false,
isDelete: !_task.isDisabled,
onEventStart: handleBarEventStart,
key: _task.id,
isSelected: !!selectedTask && _task.id === selectedTask.id,
rtl: rtl
});
}
if (!task) {
return React.createElement("g", {
key: _task.id,
style: {
height: taskHeight
}
});
}
return React.createElement(TaskItem, {
task: task,
arrowIndent: arrowIndent,
taskHeight: taskHeight,
isProgressChangeable: !!onProgressChange && !task.isDisabled,
isDateChangeable: !!onDateChange && !task.isDisabled,
isDelete: !task.isDisabled,
onEventStart: handleBarEventStart,
key: task.id,
isSelected: !!selectedTask && task.id === selectedTask.id,
rtl: rtl
});
})));
};
var styles$9 = {"ganttVerticalContainer":"_CZjuD","horizontalContainer":"_2B2zv","wrapper":"_3eULf","alertContainer":"_2AxB2","success":"_1a-EU","warning":"_1TP0x","error":"_2TeAI","alertDismissCheckbox":"_3cBUj","alertCloseButton":"_5jQM6"};
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 = useRef(null);
var horizontalContainerRef = useRef(null);
var verticalGanttContainerRef = useRef(null);
var newBarProps = _extends({}, barProps, {
svg: ganttSVGRef
});
useEffect(function () {
if (horizontalContainerRef.current) {
horizontalContainerRef.current.scrollTop = scrollY;
}
}, [scrollY]);
useEffect(function () {
if (verticalGanttContainerRef.current) {
verticalGanttContainerRef.current.scrollLeft = scrollX;
}
}, [scrollX]);
return React.createElement("div", {
className: styles$9.ganttVerticalContainer,
ref: verticalGanttContainerRef,
dir: "ltr"
}, React.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: gridProps.svgWidth,
height: calendarProps.headerHeight,
fontFamily: barProps.fontFamily
}, React.createElement(Calendar, Object.assign({}, calendarProps))), React.createElement("div", {
ref: horizontalContainerRef,
className: styles$9.horizontalContainer,
style: ganttHeight ? {
height: ganttHeight,
width: gridProps.svgWidth
} : {
width: gridProps.svgWidth
}
}, React.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: gridProps.svgWidth,
height: barProps.rowHeight * barProps.tasks.length,
fontFamily: barProps.fontFamily,
ref: ganttSVGRef
}, React.createElement(Grid, Object.assign({}, gridProps)), React.createElement(TaskGanttContent, Object.assign({}, newBarProps)))));
};
var styles$a = {"scrollWrapper":"_2k9Ys","scroll":"_19jgW"};
var HorizontalScroll = function HorizontalScroll(_ref) {
var scroll = _ref.scroll,
svgWidth = _ref.svgWidth,
taskListWidth = _ref.taskListWidth,
rtl = _ref.rtl,
onScroll = _ref.onScroll;
var scrollRef = useRef(null);
useEffect(function () {
if (scrollRef.current) {
scrollRef.current.scrollLeft = scroll;
}
}, [scroll]);
return React.createElement("div", {
dir: "ltr",
style: {
margin: rtl ? "0px " + taskListWidth + "px 0px 0px" : "0px 0px 0px " + taskListWidth + "px"
},
className: styles$a.scrollWrapper,
onScroll: onScroll,
ref: scrollRef
}, React.createElement("div", {
style: {
width: svgWidth
},
className: styles$a.scroll
}));
};
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,
columnWidth = _ref$columnWidth === void 0 ? 60 : _ref$columnWidth,
_ref$listCellWidth = _ref.listCellWidth,
listCellWidth = _ref$listCellWidth === void 0 ? "155px" : _ref$listCellWidth,
_ref$rowHeight = _ref.rowHeight,
rowHeight = _ref$rowHeight === void 0 ? 50 : _ref$rowHeight,
_ref$ganttHeight = _ref.ganttHeight,
ganttHeight = _ref$ganttHeight === void 0 ? 0 : _ref$ganttHeight,
_ref$viewMode = _ref.viewMode,
viewMode = _ref$viewMode === void 0 ? ViewMode.Day : _ref$viewMode,
_ref$preStepsCount = _ref.preStepsCount,
preStepsCount = _ref$preStepsCount === void 0 ? 1 : _ref$preStepsCount,
_ref$locale = _ref.locale,
locale = _ref$locale === void 0 ? "en-US" : _ref$locale,
_ref$barFill = _ref.barFill,
barFill = _ref$barFill === void 0 ? 60 : _ref$barFill,
_ref$barCornerRadius = _ref.barCornerRadius,
barCornerRadius = _ref$barCornerRadius === void 0 ? 3 : _ref$barCornerRadius,
_ref$barProgressColor = _ref.barProgressColor,
barProgressColor = _ref$barProgressColor === void 0 ? "#a3a3ff" : _ref$barProgressColor,
_ref$barProgressSelec = _ref.barProgressSelectedColor,
barProgressSelectedColor = _ref$barProgressSelec === void 0 ? "#8282f5" : _ref$barProgressSelec,
_ref$barBackgroundCol = _ref.barBackgroundColor,
barBackgroundColor = _ref$barBackgroundCol === void 0 ? "#b8c2cc" : _ref$barBackgroundCol,
_ref$barBackgroundSel = _ref.barBackgroundSelectedColor,
barBackgroundSelectedColor = _ref$barBackgroundSel === void 0 ? "#aeb8c2" : _ref$barBackgroundSel,
_ref$projectProgressC = _ref.projectProgressColor,
projectProgressColor = _ref$projectProgressC === void 0 ? "#7db59a" : _ref$projectProgressC,
_ref$projectProgressS = _ref.projectProgressSelectedColor,
projectProgressSelectedColor = _ref$projectProgressS === void 0 ? "#59a985" : _ref$projectProgressS,
_ref$projectBackgroun = _ref.projectBackgroundColor,
projectBackgroundColor = _ref$projectBackgroun === void 0 ? "#fac465" : _ref$projectBackgroun,
_ref$projectBackgroun2 = _ref.projectBackgroundSelectedColor,
projectBackgroundSelectedColor = _ref$projectBackgroun2 === void 0 ? "#f7bb53" : _ref$projectBackgroun2,
_ref$milestoneBackgro = _ref.milestoneBackgroundColor,
milestoneBackgroundColor = _ref$milestoneBackgro === void 0 ? "#f1c453" : _ref$milestoneBackgro,
_ref$milestoneBackgro2 = _ref.milestoneBackgroundSelectedColor,
milestoneBackgroundSelectedColor = _ref$milestoneBackgro2 === void 0 ? "#f29e4c" : _ref$milestoneBackgro2,
_ref$rtl = _ref.rtl,
rtl = _ref$rtl === void 0 ? false : _ref$rtl,
_ref$handleWidth = _ref.handleWidth,
handleWidth = _ref$handleWidth === void 0 ? 8 : _ref$handleWidth,
_ref$timeStep = _ref.timeStep,
timeStep = _ref$timeStep === void 0 ? 300000 : _ref$timeStep,
_ref$arrowColor = _ref.arrowColor,
arrowColor = _ref$arrowColor === void 0 ? "grey" : _ref$arrowColor,
_ref$fontFamily = _ref.fontFamily,
fontFamily = _ref$fontFamily === void 0 ? "Arial, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue" : _ref$fontFamily,
_ref$fontSize = _ref.fontSize,
fontSize = _ref$fontSize === void 0 ? "14px" : _ref$fontSize,
_ref$arrowIndent = _ref.arrowIndent,
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,
_ref$TaskListHeader = _ref.TaskListHeader,
TaskListHeader = _ref$TaskListHeader === void 0 ? TaskListHeaderDefault : _ref$TaskListHeader,
_ref$TaskListTable = _ref.TaskListTable,
TaskListTable = _ref$TaskListTable === void 0 ? TaskListTableDefault : _ref$TaskListTable,
onDateChange = _ref.onDateChange,
onProgressChange = _ref.onProgressChange,
onDoubleClick = _ref.onDoubleClick,
onClick = _ref.onClick,
onDelete = _ref.onDelete,
onSelect = _ref.onSelect,
onExpanderClick = _ref.onExpanderClick,
onMultiSelect = _ref.onMultiSelect,
taskLabelRenderer = _ref.taskLabelRenderer;
var wrapperRef = useRef(null);
var taskListRef = useRef(null);
var _useState = useState(function () {
var _ganttDateRange = ganttDateRange(tasks, viewMode, preStepsCount),
startDateRange = _ganttDateRange[0],
endDateRange = _ganttDateRange[1];
if (scheduleType === "lookAhead") {
return {
viewMode: viewMode,
dates: seedDates(startDate, endDate, viewMode)
};
}
return {
viewMode: viewMode,
dates: seedDates(startDateRange, endDateRange, viewMode)
};
}),
dateSetup = _useState[0],
setDateSetup = _useState[1];
var _useState2 = useState(undefined),
currentViewDate = _useState2[0],
setCurrentViewDate = _useState2[1];
var _useState3 = useState(0),
taskListWidth = _useState3[0],
setTaskListWidth = _useState3[1];
var _useState4 = useState(0),
svgContainerWidth = _useState4[0],
setSvgContainerWidth = _useState4[1];
var _useState5 = useState(ganttHeight),
svgContainerHeight = _useState5[0],
setSvgContainerHeight = _useState5[1];
var _useState6 = useState([]),
barTasks = _useState6[0],
setBarTasks = _useState6[1];
var _useState7 = useState({
action: ""
}),
ganttEvent = _useState7[0],
setGanttEvent = _useState7[1];
var taskHeight = useMemo(function () {
return rowHeight * barFill / 100;
}, [rowHeight, barFill]);
var _useState8 = useState(),
selectedTask = _useState8[0],
setSelectedTask = _useState8[1];
var _useState9 = useState(null),
failedTask = _useState9[0],
setFailedTask = _useState9[1];
var svgWidth = columnWidth < 55 ? (dateSetup.dates.length + 0.5) * columnWidth : dateSetup.dates.length * columnWidth;
var ganttFullHeight = barTasks.length * rowHeight;
var _useState10 = useState(0),
scrollY = _useState10[0],
setScrollY = _useState10[1];
var _useState11 = useState(-1),
scrollX = _useState11[0],
setScrollX = _useState11[1];
var _useState12 = useState(false),
ignoreScrollEvent = _useState12[0],
setIgnoreScrollEvent = _useState12[1];
var _useState13 = useState(false),
hasCircularDeps = _useState13[0],
setHasCircularDeps = _useState13[1];
useEffect(function () {
if (scheduleType === "lookAhead" && startDate && endDate) {
setDateSetup({
viewMode: viewMode,
dates: seedDates(startDate, endDate, viewMode)
});
}
}, [startDate, endDate]);
useEffect(function () {
var filteredTasks;
if (onExpanderClick) {
filteredTasks = removeHiddenTasks(tasks);
} else {
filteredTasks = tasks;
}
filteredTasks = filteredTasks.sort(sortTasks);
var _ganttDateRange2 = ganttDateRange(filteredTasks, viewMode, preStepsCount),
startDateRange = _ganttDateRange2[0],
endDateRange = _ganttDateRange2[1];
var newDates = seedDates(startDateRange, endDateRange, viewMode);
if (scheduleType === "lookAhead") {
newDates = seedDates(startDate, endDate, viewMode);
}
if (rtl) {
newDates = newDates.reverse();
if (scrollX === -1) {
setScrollX(newDates.length * columnWidth);
}
}
if (scheduleType !== "lookAhead") {
setDateSetup({
dates: seedDates(startDateRange, endDateRange, viewMode),
viewMode: viewMode
});
}
var _getCriticalPaths = getCriticalPaths(leafTasks),
primaryPath = _getCriticalPaths[0],
secondaryPath = _getCriticalPaths[1];
if (leafTasks.length > 0 && primaryPath.length === 0 && secondaryPath.length === 0) {
setHasCircularDeps(true);
} else {
if (hasCircularDeps && localStorage.getItem('hideCircularDepsAlert') === 'true') {
localStorage.removeItem('hideCircularDepsAlert');
}
setHasCircularDeps(false);
}
uncolorAll(tasks);
if (scheduleType !== "lookAhead") {
colorPath(secondaryPath, "#00ff00", tasks, "secondary");
colorPath(primaryPath, "#ff0000", tasks, "primary");
}
setBarTasks(convertToBarTasks(filteredTasks, newDates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor));
}, [tasks, viewMode, preStepsCount, rowHeight, barCornerRadius, columnWidth, taskHeight, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor, rtl, scrollX, onExpanderClick]);
useEffect(function () {
if (viewMode === dateSetup.viewMode && (viewDate && !currentViewDate || viewDate && (currentViewDate === null || currentViewDate === void 0 ? void 0 : currentViewDate.valueOf()) !== viewDate.valueOf())) {
var dates = dateSetup.dates;
var index = dates.findIndex(function (d, i) {
return viewDate.valueOf() >= d.valueOf() && i + 1 !== dates.length && viewDate.valueOf() < dates[i + 1].valueOf();
});
if (index === -1) {
return;
}
setCurrentViewDate(viewDate);
setScrollX(columnWidth * index);
}
}, [viewDate, columnWidth, dateSetup.dates, dateSetup.viewMode, viewMode, currentViewDate, setCurrentViewDate]);
useEffect(function () {
var changedTask = ganttEvent.changedTask,
action = ganttEvent.action;
if (changedTask) {
if (action === "delete") {
setGanttEvent({
action: ""
});
setBarTasks(barTasks.filter(function (t) {
return t.id !== changedTask.id;
}));
} else if (action === "move" || action === "end" || action === "start" || action === "progress") {
var prevStateTask = barTasks.find(function (t) {
return t.id === changedTask.id;
});
if (prevStateTask && (prevStateTask.start.getTime() >= 0 && prevStateTask.start.getTime() !== changedTask.start.getTime() || prevStateTask.end.getTime() >= 0 && prevStateTask.end.getTime() !== changedTask.end.getTime() || (prevStateTask.actualStart.getTime() >= 0 && prevStateTask.actualStart.getTime()) !== changedTask.actualStart.getTime() || prevStateTask.actualEnd.getTime() >= 0 && prevStateTask.actualEnd.getTime() !== changedTask.actualEnd.getTime() || prevStateTask.progress !== changedTask.progress)) {
var newTaskList = barTasks.map(function (t) {
return t.id === changedTask.id ? changedTask : t;
});
setBarTasks(newTaskList);
}
}
}
}, [ganttEvent, barTasks]);
useEffect(function () {
if (failedTask) {
setBarTasks(barTasks.map(function (t) {
return t.id !== failedTask.id ? t : failedTask;
}));
setFailedTask(null);
}
}, [failedTask, barTasks]);
useEffect(function () {
if (!listCellWidth) {
setTaskListWidth(0);
}
if (taskListRef.current) {
setTaskListWidth(taskListRef.current.offsetWidth);
}
}, [taskListRef, listCellWidth]);
useEffect(function () {
if (wrapperRef.current) {
setSvgContainerWidth(wrapperRef.current.offsetWidth - taskListWidth);
}
}, [wrapperRef, taskListWidth]);
useEffect(function () {
if (ganttHeight) {
setSvgContainerHeight(ganttHeight + headerHeight);
} else {
setSvgContainerHeight(tasks.length * rowHeight + headerHeight);
}
}, [ganttHeight, tasks, headerHeight, rowHeight]);
useEffect(function () {
var _wrapperRef$current;
var handleWheel = function handleWheel(event) {
if (event.shiftKey || event.deltaX) {
var scrollMove = event.deltaX ? event.deltaX : event.deltaY;
var newScrollX = scrollX + scrollMove;
if (newScrollX < 0) {
newScrollX = 0;
} else if (newScrollX > svgWidth) {
newScrollX = svgWidth;
}
setScrollX(newScrollX);
event.preventDefault();
} else if (ganttHeight) {
var newScrollY = scrollY + event.deltaY;
if (newScrollY < 0) {
newScrollY = 0;
} else if (newScrollY > ganttFullHeight - ganttHeight) {
newScrollY = ganttFullHeight - ganttHeight;
}
if (newScrollY !== scrollY) {
setScrollY(newScrollY);
event.preventDefault();
}
}
setIgnoreScrollEvent(true);
};
(_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.addEventListener("wheel", handleWheel, {
passive: false
});
return function () {
var _wrapperRef$current2;
(_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.removeEventListener("wheel", handleWheel);
};
}, [wrapperRef, scrollY, scrollX, ganttHeight, svgWidth, rtl, ganttFullHeight]);
var handleScrollY = function handleScrollY(event) {
if (scrollY !== event.currentTarget.scrollTop && !ignoreScrollEvent) {
setScrollY(event.currentTarget.scrollTop);
setIgnoreScrollEvent(true);
} else {
setIgnoreScrollEvent(false);
}
};
var handleScrollX = function handleScrollX(event) {
if (scrollX !== event.currentTarget.scrollLeft) {
setScrollX(event.currentTarget.scrollLeft);
setIgnoreScrollEvent(true);
} else {
setIgnoreScrollEvent(false);
}
};
var hideAlert = function hideAlert() {
var checkbox = document.getElementById("alert-dismiss");
var alert = document.getElementById("alert-container");
if (checkbox.checked) {
localStorage.setItem('hideCircularDepsAlert', 'true');
alert.style.display = "None";
}
};
var handleKeyDown = function handleKeyDown(event) {
event.preventDefault();
var newScrollY = scrollY;
var newScrollX = scrollX;
var isX = true;
switch (event.key) {
case "Down":
case "ArrowDown":
newScrollY += rowHeight;
isX = false;
break;
case "Up":
case "ArrowUp":
newScrollY -= rowHeight;
isX = false;
break;
case "Left":
case "ArrowLeft":
newScrollX -= columnWidth;
break;
case "Right":
case "ArrowRight":
newScrollX += columnWidth;
break;
}
if (isX) {
if (newScrollX < 0) {
newScrollX = 0;
} else if (newScrollX > svgWidth) {
newScrollX = svgWidth;
}
setScrollX(newScrollX);
} else {
if (newScrollY < 0) {
newScrollY = 0;
} else if (newScrollY > ganttFullHeight - ganttHeight) {
newScrollY = ganttFullHeight - ganttHeight;
}
setScrollY(newScrollY);
}
setIgnoreScrollEvent(true);
};
var handleSelectedTask = function handleSelectedTask(taskId) {
var newSelectedTask = barTasks.find(function (t) {
return t.id === taskId;
});
var oldSelectedTask = barTasks.find(function (t) {
return !!selectedTask && t.id === selectedTask.id;
});
if (onSelect) {
if (oldSelectedTask) {
onSelect(oldSelectedTask, false);
}
if (newSelectedTask) {
onSelect(newSelectedTask, true);
}
}
setSelectedTask(newSelectedTask);
};
var handleExpanderClick = function handleExpanderClick(task) {
if (onExpanderClick && task.hideChildren !== undefined) {
onExpanderClick(_extends({}, task, {
hideChildren: !task.hideChildren
}));
}
};
var gridProps = {
columnWidth: columnWidth,
svgWidth: svgWidth,
tasks: tasks,
scheduleType: scheduleType,
rowHeight: rowHeight,
dates: dateSetup.dates,
todayColor: todayColor,
weekendColor: weekendColor,
rtl: rtl
};
var calendarProps = {
dateSetup: dateSetup,
locale: locale,
viewMode: viewMode,
headerHeight: headerHeight,
columnWidth: columnWidth,
fontFamily: fontFamily,
fontSize: fontSize,
rtl: rtl
};
var barProps = {
tasks: barTasks,
dates: dateSetup.dates,
ganttEvent: ganttEvent,
selectedTask: selectedTask,
rowHeight: rowHeight,
taskHeight: taskHeight,
columnWidth: columnWidth,
arrowColor: arrowColor,
timeStep: timeStep,
fontFamily: fontFamily,
fontSize: fontSize,
arrowIndent: arrowIndent,
svgWidth: svgWidth,
rtl: rtl,
setGanttEvent: setGanttEvent,
setFailedTask: setFailedTask,
setSelectedTask: handleSelectedTask,
onDateChange: onDateChange,
onProgressChange: onProgressChange,
onDoubleClick: onDoubleClick,
onClick: onClick,
onDelete: onDelete
};
var tableProps = {
rowHeight: rowHeight,
rowWidth: listCellWidth,
fontFamily: fontFamily,
fontSize: fontSize,
tasks: barTasks,
leafTasks: leafTasks,
scheduleType: scheduleType,
locale: locale,
headerHeight: headerHeight,
scrollY: scrollY,
ganttHeight: ganttHeight,
horizontalContainerClass: styles$9.horizontalContainer,
selectedTask: selectedTask,
taskListRef: taskListRef,
setSelectedTask: handleSelectedTask,
onExpanderClick: handleExpanderClick,
onDoubleClick: onDoubleClick,
TaskListHeader: TaskListHeader,
TaskListTable: TaskListTable,
taskLabelRenderer: taskLabelRenderer,
onMultiSelect: onMultiSelect
};
return React.createElement("div", null, hasCircularDeps && localStorage.getItem('hideCircularDepsAlert') !== 'true' && React.createElement("div", {
id: "alert-container",
className: styles$9.alertContainer + " " + styles$9.warning
}, React.createElement("input", {
type: "checkbox",
id: "alert-dismiss",
className: styles$9.alertDismissCheckbox,
onChange: hideAlert
}), React.createElement("label", {
htmlFor: "alert-dismiss",
className: styles$9.alertCloseButton
}, "\xD7"), React.createElement("div", {
className: styles$9.alertContent
}, React.createElement("p", null, "Critical path could not be displayed due to circular dependencies"))), React.createElement("div", {
className: styles$9.wrapper,
onKeyDown: handleKeyDown,
tabIndex: 0,
ref: wrapperRef
}, listCellWidth && React.createElement(TaskList, Object.assign({}, tableProps)), React.createElement(TaskGantt, {
gridProps: gridProps,
calendarProps: calendarProps,
barProps: barProps,
ganttHeight: ganttHeight,
scrollY: scrollY,
scrollX: scrollX
}), ganttEvent.changedTask && React.createElement(Tooltip, {
arrowIndent: arrowIndent,
rowHeight: rowHeight,
svgContainerHeight: svgContainerHeight,
svgContainerWidth: svgContainerWidth,
fontFamily: fontFamily,
fontSize: fontSize,
scrollX: scrollX,
scrollY: scrollY,
task: ganttEvent.changedTask,
type: ganttEvent.type,
headerHeight: headerHeight,
taskListWidth: taskListWidth,
TooltipContent: TooltipContent,
rtl: rtl,
svgWidth: svgWidth
}), React.createElement(VerticalScroll, {
ganttFullHeight: ganttFullHeight,
ganttHeight: ganttHeight,
headerHeight: headerHeight,
scroll: scrollY,
onScroll: handleScrollY,
rtl: rtl
})), React.createElement(HorizontalScroll, {
svgWidth: svgWidth,
taskListWidth: taskListWidth,
scroll: scrollX,
rtl: rtl,
onScroll: handleScrollX
}));
};
function topologicalOrderingHelper(taskID, taskMap, sortedTaskList) {
if (!taskMap[taskID]) return true;
if (taskMap[taskID].finished) return true;
if (taskMap[taskID].started) {
console.log("Cycle involving " + taskID);
return false;
}
taskMap[taskID].started = true;
var task = taskMap[taskID].task;
if (task.dependencies) for (var i = 0; i < task.dependencies.length; i++) {
var successVal = topologicalOrderingHelper(task.dependencies[i].id, taskMap, sortedTaskList);
if (!successVal) return false;
}
taskMap[taskID].finished = true;
sortedTaskList.push(taskID);
return true;
}
function getCriticalPaths(leafTasks) {
var taskMap = {};
for (var i = 0; i < leafTasks.length; i++) {
taskMap[leafTasks[i].id] = {
task: leafTasks[i]
};
}
var sortedTaskList = [];
for (var _i = 0; _i < leafTasks.length; _i++) {
var successVal = topologicalOrderingHelper(leafTasks[_i].id, taskMap, sortedTaskList);
if (!successVal) return [[], []];
}
for (var _i2 = 0; _i2 < leafTasks.length; _i2++) {
taskMap[leafTasks[_i2].id].dependents = [];
}
for (var _i3 = 0; _i3 < leafTasks.length; _i3++) {
var task = leafTasks[_i3];
if (task.dependencies) for (var j = 0; j < task.dependencies.length; j++) {
var _taskMap$task$depende;
(_taskMap$task$depende = taskMap[task.dependencies[j].id]) === null || _taskMap$task$depende === void 0 ? void 0 : _taskMap$task$depende.dependents.push(task.id);
}
}
for (var _i4 = sortedTaskList.length - 1; _i4 >= 0; _i4--) {
computeCriticalPath(sortedTaskList[_i4], taskMap);
}
var primaryLeaf;
var primaryDuration = 0;
for (var _i5 = 0; _i5 < sortedTaskList.length; _i5++) {
var newDuration = taskMap[sortedTaskList[_i5]].end - taskMap[sortedTaskList[_i5]].task.start.getTime();
if (primaryDuration < newDuration) {
primaryLeaf = sortedTaskList[_i5];
primaryDuration = newDuration;
}
}
var primaryPath = [];
while (primaryLeaf !== undefined) {
taskMap[primaryLeaf].excluded = true;
primaryPath.push(taskMap[primaryLeaf].task);
primaryLeaf = taskMap[primaryLeaf].next;
}
console.debug(taskMap);
var secondaryLeaf;
var secondaryDuration = 0;
for (var _i6 = 0; _i6 < sortedTaskList.length; _i6++) {
if (taskMap[sortedTaskList[_i6]].excluded) continue;
var _newDuration = taskMap[sortedTaskList[_i6]].end - taskMap[sortedTaskList[_i6]].task.start.getTime();
if (secondaryDuration < _newDuration) {
secondaryLeaf = sortedTaskList[_i6];
secondaryDuration = _newDuration;
}
}
var secondaryPath = [];
while (secondaryLeaf !== undefined) {
secondaryPath.push(taskMap[secondaryLeaf].task);
secondaryLeaf = taskMap[secondaryLeaf].next;
}
return [primaryPath, secondaryPath];
}
function computeCriticalPath(taskID, taskMap) {
var task = taskMap[taskID].task;
var dependents = taskMap[taskID].dependents;
taskMap[taskID].start = task.start.getTime();
taskMap[taskID].end = task.end.getTime();
var start = taskMap[taskID].start;
for (var _iterator = _createForOfIteratorHelperLoose(dependents), _step; !(_step = _iterator()).done;) {
var _dependentTask$depend;
var depID = _step.value;
var dependentTask = taskMap[depID].task;
var dependency = (_dependentTask$depend = dependentTask.dependencies) === null || _dependentTask$depend === void 0 ? void 0 : _dependentTask$depend.find(function (d) {
return d.id === taskID;
});
console.debug(dependency);
if (!dependency) continue;
switch (dependency.type) {
case "FS":
if (taskMap[depID].end > taskMap[taskID].end) {
taskMap[taskID].next = depID;
taskMap[taskID].end = taskMap[depID].end;
}
break;
case "SS":
if (taskMap[depID].start > start) {
taskMap[taskID].next = depID;
start = taskMap[depID].start;
taskMap[taskID].end = taskMap[depID].end;
}
break;
case "FF":
if (taskMap[depID].end > taskMap[taskID].end) {
taskMap[taskID].next = depID;
taskMap[taskID].end = taskMap[depID].end;
}
break;
case "SF":
if (taskMap[depID].start > taskMap[taskID].end) {
taskMap[taskID].next = depID;
taskMap[taskID].end = taskMap[depID].start;
}
break;
}
}
}
function uncolorAll(tasks) {
tasks.forEach(function (task) {
if (task.styles) delete task.styles.criticalPathColor;
delete task.criticalPathArrows;
});
}
function colorPath(path, color, tasks, criticalPathType) {
for (var i = 0; i < path.length; i++) {
var longestIDLength = 0;
var longestTask = void 0;
for (var j = 0; j < tasks.length; j++) {
if (path[i].id === tasks[j].id) {
longestTask = tasks[j];
break;
}
if (path[i].id.startsWith(tasks[j].id + ".") && tasks[j].id.length > longestIDLength) {
longestIDLength = tasks[j].id.length;
longestTask = tasks[j];
}
}
if (longestTask) {
var _longestTask$styles;
var _styles = (_longestTask$styles = longestTask.styles) != null ? _longestTask$styles : {};
_styles.criticalPathColor = color;
longestTask.styles = _styles;
}
}
var _loop = function _loop(_i7) {
var taskFromTasks = void 0;
for (var _j = 0; _j < tasks.length; _j++) {
if (path[_i7].id === tasks[_j].id) {
taskFromTasks = tasks[_j];
break;
}
}
if (taskFromTasks) {
var arrows = taskFromTasks.criticalPathArrows;
if (!arrows) arrows = [];
var arrow = arrows.find(function (arrow) {
return arrow.taskId === path[_i7 + 1].id;
});
if (arrow) {
arrow.arrowColor = color;
arrow.criticalPathType = criticalPathType;
} else arrows.push({
taskId: path[_i7 + 1].id,
arrowColor: color,
criticalPathType: criticalPathType
});
taskFromTasks.criticalPathArrows = arrows;
}
};
for (var _i7 = 0; _i7 + 1 < path.length; _i7++) {
_loop(_i7);
}
}
export { Gantt, ViewMode, getCriticalPaths };
//# sourceMappingURL=index.modern.js.map