gantt-task-react-powern
Version:
Interactive Gantt Chart for React with TypeScript.
1,433 lines (1,260 loc) • 113 kB
JavaScript
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(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 _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.");
}
(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";
})(exports.ViewMode || (exports.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 exports.ViewMode.Year:
newStartDate = addToDate(newStartDate, -1, "year");
newStartDate = startOfDate(newStartDate, "year");
newEndDate = addToDate(newEndDate, 1, "year");
newEndDate = startOfDate(newEndDate, "year");
break;
case exports.ViewMode.Quarter:
newStartDate = addToDate(newStartDate, -1 * preStepsCount, "year");
newStartDate = startOfDate(newStartDate, "year");
newEndDate = addToDate(newEndDate, 1, "year");
newEndDate = startOfDate(newEndDate, "quarter");
break;
case exports.ViewMode.Month:
newStartDate = addToDate(newStartDate, -1 * preStepsCount, "month");
newStartDate = startOfDate(newStartDate, "month");
newEndDate = addToDate(newEndDate, 1, "year");
newEndDate = startOfDate(newEndDate, "year");
break;
case exports.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 exports.ViewMode.Day:
newStartDate = startOfDate(newStartDate, "day");
newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
newEndDate = startOfDate(newEndDate, "day");
newEndDate = addToDate(newEndDate, 19, "day");
break;
case exports.ViewMode.QuarterDay:
newStartDate = startOfDate(newStartDate, "day");
newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
newEndDate = startOfDate(newEndDate, "day");
newEndDate = addToDate(newEndDate, 66, "hour");
break;
case exports.ViewMode.HalfDay:
newStartDate = startOfDate(newStartDate, "day");
newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
newEndDate = startOfDate(newEndDate, "day");
newEndDate = addToDate(newEndDate, 108, "hour");
break;
case exports.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 exports.ViewMode.Year:
currentDate = addToDate(currentDate, 1, "year");
break;
case exports.ViewMode.Quarter:
currentDate = addToDate(currentDate, 3, "month");
break;
case exports.ViewMode.Month:
currentDate = addToDate(currentDate, 1, "month");
break;
case exports.ViewMode.Week:
currentDate = addToDate(currentDate, 7, "day");
break;
case exports.ViewMode.Day:
currentDate = addToDate(currentDate, 1, "day");
break;
case exports.ViewMode.HalfDay:
currentDate = addToDate(currentDate, 12, "hour");
break;
case exports.ViewMode.QuarterDay:
currentDate = addToDate(currentDate, 6, "hour");
break;
case exports.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 getDaysInMonth = function getDaysInMonth(month, year) {
return new Date(year, month + 1, 0).getDate();
};
var styles = {"ganttTable":"_3_ygE","ganttTable_Header":"_1nBOt","ganttTable_HeaderSeparator":"_2eZzQ","ganttTable_HeaderItem":"_WuQ0f"};
var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
var headerHeight = _ref.headerHeight,
fontFamily = _ref.fontFamily,
fontSize = _ref.fontSize,
rowWidth = _ref.rowWidth,
allSelected = _ref.allSelected,
onSelectAll = _ref.onSelectAll;
return React__default.createElement("div", {
className: styles.ganttTable,
style: {
fontFamily: fontFamily,
fontSize: fontSize
}
}, React__default.createElement("div", {
className: styles.ganttTable_Header,
style: {
height: headerHeight - 2
}
}, onSelectAll && React__default.createElement("div", null, React__default.createElement("div", {
className: styles.ganttTable_HeaderItem,
style: {
minWidth: parseInt(rowWidth) * 0.3,
maxWidth: parseInt(rowWidth) * 0.3
}
}, React__default.createElement("input", {
type: "checkbox",
checked: allSelected,
onChange: function onChange(e) {
return onSelectAll(e.target.checked);
}
}))), React__default.createElement("div", {
className: styles.ganttTable_HeaderItem,
style: {
minWidth: parseInt(rowWidth) * 0.8,
maxWidth: parseInt(rowWidth) * 0.8
}
}, "WBS"), React__default.createElement("div", {
className: styles.ganttTable_HeaderSeparator,
style: {
height: headerHeight * 0.5,
marginTop: headerHeight * 0.2
}
}), React__default.createElement("div", {
className: styles.ganttTable_HeaderItem,
style: {
minWidth: parseInt(rowWidth) * 1.8,
maxWidth: parseInt(rowWidth) * 1.8
}
}, "Task"), React__default.createElement("div", {
className: styles.ganttTable_HeaderSeparator,
style: {
height: headerHeight * 0.5,
marginTop: headerHeight * 0.2
}
}), React__default.createElement("div", {
className: styles.ganttTable_HeaderItem,
style: {
minWidth: parseInt(rowWidth) * 0.7
},
title: "Planned Start"
}, "Planned Start"), React__default.createElement("div", {
className: styles.ganttTable_HeaderSeparator,
style: {
height: headerHeight * 0.5,
marginTop: headerHeight * 0.25
}
}), React__default.createElement("div", {
className: styles.ganttTable_HeaderItem,
style: {
minWidth: parseInt(rowWidth) * 0.7
},
title: "Planned End"
}, "Planned 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 = React.useMemo(function () {
return toLocaleDateStringFactory(locale);
}, [locale]);
var leafTaskIds = React.useMemo(function () {
return new Set(leafTasks.map(function (t) {
return t.id;
}));
}, [leafTasks]);
return React__default.createElement("div", {
className: styles$1.taskListWrapper,
style: {
fontFamily: fontFamily,
fontSize: fontSize
}
}, tasks.map(function (t) {
var expanderSymbol = "";
if (!leafTaskIds.has(t.id)) {
if (t.hideChildren === false) {
expanderSymbol = "▼";
} else if (t.hideChildren === true) {
expanderSymbol = "►";
}
}
var isSelected = selectedTasks.includes(t.id);
return React__default.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__default.createElement("div", {
className: styles$1.taskListCell,
style: {
minWidth: parseInt(rowWidth) * 0.3,
maxWidth: parseInt(rowWidth) * 0.3
}
}, React__default.createElement("div", {
className: styles$1.taskListText,
style: {
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
paddingLeft: "0",
paddingRight: "0"
}
}, React__default.createElement("input", {
type: "checkbox",
checked: isSelected,
onChange: function onChange(e) {
return onTaskSelect(t.id, e.target.checked);
}
}))), React__default.createElement("div", {
className: styles$1.taskListCell,
style: {
minWidth: parseInt(rowWidth) * 0.8,
maxWidth: parseInt(rowWidth) * 0.8
},
title: t.id
}, React__default.createElement("div", {
className: styles$1.taskListNameWrapper,
style: {
paddingLeft: t.depth * 4 + "px"
}
}, !leafTaskIds.has(t.id) ? React__default.createElement("div", {
className: styles$1.taskListExpander,
onClick: function onClick() {
return onExpanderClick(t);
}
}, expanderSymbol) : React__default.createElement("div", {
className: styles$1.taskListExpanderPlaceholder
}), React__default.createElement("div", {
className: styles$1.taskListText
}, t.id, " ", t.actualEnd.getTime() > 0 && t.actualEnd.getTime() < Date.now() ? React__default.createElement("span", {
title: "Task Complete",
style: {
color: "limegreen",
fontSize: "16px"
}
}, "\u2714") : ""))), React__default.createElement("div", {
className: styles$1.taskListCell,
style: {
minWidth: parseInt(rowWidth) * 2,
maxWidth: parseInt(rowWidth) * 2
},
title: t.name
}, React__default.createElement("div", {
className: styles$1.taskListText
}, taskLabelRenderer(t))), React__default.createElement("div", {
className: styles$1.taskListCell,
style: {
minWidth: parseInt(rowWidth) * 0.6,
maxWidth: parseInt(rowWidth) * 0.6
}
}, React__default.createElement("div", {
className: styles$1.taskListText
}, "\xA0", toLocaleDateString(t.start, dateTimeOptions))), React__default.createElement("div", {
className: styles$1.taskListCell,
style: {
minWidth: parseInt(rowWidth) * 0.6,
maxWidth: parseInt(rowWidth) * 0.6
}
}, React__default.createElement("div", {
className: styles$1.taskListText
}, "\xA0", toLocaleDateString(t.end, dateTimeOptions))));
}));
};
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 = React.useRef(null);
var _useState = React.useState(0),
relatedY = _useState[0],
setRelatedY = _useState[1];
var _useState2 = React.useState(0),
relatedX = _useState2[0],
setRelatedX = _useState2[1];
React.useEffect(function () {
if (tooltipRef.current) {
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__default.createElement("div", {
ref: tooltipRef,
className: relatedX ? styles$2.tooltipDetailsContainer : styles$2.tooltipDetailsContainerHidden,
style: {
left: relatedX,
top: relatedY
}
}, React__default.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__default.createElement("div", {
className: styles$2.tooltipDefaultContainer,
style: style
}, React__default.createElement("b", {
style: {
fontSize: fontSize + 6
}
}, task.name + ": Planned dates: "), React__default.createElement("b", null, task.start.getMonth() + 1 + "/" + task.start.getDate() + "/" + task.start.getFullYear() + " - " + (task.end.getMonth() + 1) + "/" + task.end.getDate() + "/" + task.end.getFullYear()), task.end.getTime() - task.start.getTime() !== 0 && React__default.createElement("p", {
className: styles$2.tooltipDefaultContainerParagraph
}, "Duration: " + ~~((task.end.getTime() - task.start.getTime()) / (1000 * 60 * 60 * 24)) + " day(s)"), React__default.createElement("p", {
className: styles$2.tooltipDefaultContainerParagraph
}, !!task.progress && "Progress: " + task.progress + " %"));else return React__default.createElement("div", {
className: styles$2.tooltipDefaultContainer,
style: style
}, React__default.createElement("b", {
style: {
fontSize: fontSize + 6
}
}, task.name + ": Actual dates: "), React__default.createElement("b", null, task.actualStart.getMonth() + 1 + "/" + task.actualStart.getDate() + "/" + task.actualStart.getFullYear() + " - " + (task.actualEnd.getMonth() + 1) + "/" + task.actualEnd.getDate() + "/" + task.actualEnd.getFullYear()), task.actualEnd.getTime() - task.actualStart.getTime() !== 0 && React__default.createElement("p", {
className: styles$2.tooltipDefaultContainerParagraph
}, "Duration: " + ~~((task.actualEnd.getTime() - task.actualStart.getTime()) / (1000 * 60 * 60 * 24)) + " day(s)"), React__default.createElement("p", {
className: styles$2.tooltipDefaultContainerParagraph
}, !!task.progress && "Progress: " + task.progress + " %"));
};
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 = React.useRef(null);
React.useEffect(function () {
if (scrollRef.current) {
scrollRef.current.scrollTop = scroll;
}
}, [scroll]);
return React__default.createElement("div", {
style: {
height: ganttHeight,
marginTop: headerHeight,
marginLeft: rtl ? "" : "-1rem",
marginRight: "1rem"
},
className: styles$3.scroll,
onScroll: onScroll,
ref: scrollRef
}, React__default.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 = React.useRef(null);
var _useState = React.useState([]),
selectedTasks = _useState[0],
setSelectedTasks = _useState[1];
var prevSelectedTasksRef = React.useRef([]);
React.useEffect(function () {
if (horizontalContainerRef.current) {
horizontalContainerRef.current.scrollTop = scrollY;
}
}, [scrollY]);
React.useEffect(function () {
if (onMultiSelect && JSON.stringify(prevSelectedTasksRef.current) !== JSON.stringify(selectedTasks)) {
var selectedTaskObjects = tasks.filter(function (task) {
return selectedTasks.includes(task.id);
});
prevSelectedTasksRef.current = [].concat(selectedTasks);
onMultiSelect(selectedTaskObjects);
}
}, [selectedTasks, tasks, onMultiSelect]);
var handleTaskSelect = function handleTaskSelect(taskId, selected) {
if (selected) {
setSelectedTasks(function (prev) {
return [].concat(prev, [taskId]);
});
} else {
setSelectedTasks(function (prev) {
return prev.filter(function (id) {
return id !== taskId;
});
});
}
};
var handleSelectAll = function handleSelectAll(selected) {
if (selected) {
setSelectedTasks(tasks.map(function (task) {
return task.id;
}));
} else {
setSelectedTasks([]);
}
};
var headerProps = {
headerHeight: headerHeight,
fontFamily: fontFamily,
fontSize: fontSize,
rowWidth: rowWidth,
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__default.createElement("div", {
ref: taskListRef
}, React__default.createElement(TaskListHeader, Object.assign({}, headerProps)), React__default.createElement("div", {
ref: horizontalContainerRef,
className: horizontalContainerClass,
style: ganttHeight ? {
height: ganttHeight
} : {}
}, React__default.createElement(TaskListTable, Object.assign({}, tableProps))));
};
var styles$4 = {"gridRow":"_2dZTy","gridRowLookAhead":"_2RRca","gridRowLine":"_3rUKi","gridTick":"_RuwuK","darkerGridRow":"_2M-tt"};
const GridBody = _ref => {
let {
tasks,
scheduleType,
dates,
rowHeight,
svgWidth,
columnWidth,
todayColor,
weekendColor,
rtl
} = _ref;
let y = 0;
const gridRows = [];
const rowLines = [React__default.createElement("line", {
key: "RowLineFirst",
x: "0",
y1: 0,
x2: svgWidth,
y2: 0,
className: styles$4.gridRowLine
})];
for (const task of tasks) {
const isDarkerRow = task.type === "milestone";
gridRows.push(React__default.createElement("rect", {
key: "Row" + task.id,
x: "0",
y: y,
width: svgWidth,
height: rowHeight,
className: isDarkerRow ? styles$4.darkerGridRow : scheduleType === "lookAhead" ? styles$4.gridRowLookAhead : styles$4.gridRow
}));
rowLines.push(React__default.createElement("line", {
key: "RowLine" + task.id,
x: "0",
y1: y + rowHeight,
x2: svgWidth,
y2: y + rowHeight,
className: styles$4.gridRowLine
}));
y += rowHeight;
}
const now = new Date();
let tickX = 0;
const ticks = [];
let today = React__default.createElement("rect", null);
let weekend = [];
for (let i = 0; i < dates.length; i++) {
const date = dates[i];
ticks.push(React__default.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__default.createElement("rect", {
x: tickX,
y: 0,
width: columnWidth,
height: y,
fill: todayColor
});
}
if (date.getDay() === 6 || date.getDay() === 0) {
weekend.push(React__default.createElement("rect", {
x: tickX,
y: 0,
width: columnWidth,
height: y,
fill: weekendColor
}));
}
if (rtl && i + 1 !== dates.length && date.getTime() >= now.getTime() && dates[i + 1].getTime() < now.getTime()) {
today = React__default.createElement("rect", {
x: tickX + columnWidth,
y: 0,
width: columnWidth,
height: y,
fill: todayColor
});
}
tickX += columnWidth;
}
return React__default.createElement("g", {
className: "gridBody"
}, React__default.createElement("g", {
className: "rows"
}, gridRows), React__default.createElement("g", {
className: "rowLines"
}, rowLines), React__default.createElement("g", {
className: "ticks"
}, ticks), scheduleType === "lookAhead" && React__default.createElement("g", {
className: "weekend"
}, weekend), React__default.createElement("g", {
className: "today"
}, today));
};
const Grid = props => {
return React__default.createElement("g", {
className: "grid"
}, React__default.createElement(GridBody, Object.assign({}, props)));
};
var styles$5 = {"calendarBottomText":"_9w8d5","calendarTopTick":"_1rLuZ","calendarTopText":"_2q1Kt","calendarHeader":"_35nLX","textAnchorStart":"_2Shd-","textAnchorMiddle":"_2XXW4","textAnchorEnd":"_3GdnC"};
const TopPartOfCalendar = _ref => {
let {
value,
x1Line,
y1Line,
y2Line,
xText,
yText,
textAnchor = "middle"
} = _ref;
const textAnchorClass = textAnchor === "start" ? styles$5.textAnchorStart : textAnchor === "middle" ? styles$5.textAnchorMiddle : styles$5.textAnchorEnd;
return React__default.createElement("g", {
className: "calendarTop"
}, React__default.createElement("line", {
x1: x1Line,
y1: y1Line,
x2: x1Line,
y2: y2Line,
className: styles$5.calendarTopTick,
key: value + "line"
}), React__default.createElement("text", {
key: value + "text",
y: yText,
x: xText,
className: `${styles$5.calendarTopText} ${textAnchorClass}`
}, value));
};
const Calendar = _ref => {
let {
dateSetup,
locale,
viewMode,
rtl,
headerHeight,
columnWidth,
fontFamily,
fontSize
} = _ref;
const getCalendarValuesForYear = () => {
const topValues = [];
const bottomValues = [];
const topDefaultHeight = headerHeight * 0.5;
for (let i = 0; i < dateSetup.dates.length; i++) {
const date = dateSetup.dates[i];
const bottomValue = date.getFullYear();
bottomValues.push(React__default.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()) {
const topValue = date.getFullYear().toString();
let xText;
if (rtl) {
xText = (6 + i + date.getFullYear() + 1) * columnWidth;
} else {
xText = (6 + i - date.getFullYear()) * columnWidth;
}
topValues.push(React__default.createElement(TopPartOfCalendar, {
key: topValue,
value: topValue,
x1Line: columnWidth * i,
y1Line: 0,
y2Line: headerHeight,
xText: xText,
yText: topDefaultHeight * 0.9
}));
}
}
return [topValues, bottomValues];
};
const getCalendarValuesForQuarter = () => {
const topValues = [];
const bottomValues = [];
const topDefaultHeight = headerHeight * 0.5;
for (let i = 0; i < dateSetup.dates.length; i++) {
const date = dateSetup.dates[i];
const quarter = Math.floor(date.getMonth() / 3) + 1;
const bottomValue = `Q${quarter}`;
bottomValues.push(React__default.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()) {
const topValue = date.getFullYear().toString();
let xText;
if (rtl) {
xText = (3 + i + quarter) * columnWidth;
} else {
xText = (3 + i - quarter) * columnWidth;
}
topValues.push(React__default.createElement(TopPartOfCalendar, {
key: topValue,
value: topValue,
x1Line: columnWidth * i,
y1Line: 0,
y2Line: headerHeight,
xText: xText,
yText: topDefaultHeight * 0.9
}));
}
}
return [topValues, bottomValues];
};
const getCalendarValuesForMonth = () => {
const topValues = [];
const bottomValues = [];
const topDefaultHeight = headerHeight * 0.5;
for (let i = 0; i < dateSetup.dates.length; i++) {
const date = dateSetup.dates[i];
const bottomValue = date.toLocaleString(locale, {
month: "short"
});
bottomValues.push(React__default.createElement("text", {
key: bottomValue + date.getFullYear(),
y: headerHeight * 0.8,
x: columnWidth * i + columnWidth * 0.5,
className: `${styles$5.calendarTopText} ${styles$5.textAnchorEnd}`
}, bottomValue));
if (i === 0 || date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()) {
const topValue = date.getFullYear().toString();
let xText;
if (rtl) {
xText = (6 + i + date.getMonth() + 1) * columnWidth;
} else {
xText = (6 + i - date.getMonth()) * columnWidth;
}
console.log(xText);
topValues.push(React__default.createElement(TopPartOfCalendar, {
key: topValue,
value: topValue,
x1Line: columnWidth * i,
y1Line: 0,
y2Line: topDefaultHeight,
xText: xText,
yText: topDefaultHeight * 0.9,
textAnchor: "end"
}));
}
}
return [topValues, bottomValues];
};
const getCalendarValuesForWeek = () => {
const topValues = [];
const bottomValues = [];
let weeksCount = 1;
const topDefaultHeight = headerHeight * 0.5;
const dates = dateSetup.dates;
for (let i = dates.length - 1; i >= 0; i--) {
const date = dates[i];
let topValue = "";
if (i === 0 || date.getMonth() !== dates[i - 1].getMonth()) {
topValue = `${getLocaleMonth(date, locale)}, ${date.getFullYear()}`;
}
const bottomValue = `W${getWeekNumberISO8601(date)}`;
bottomValues.push(React__default.createElement("text", {
key: date.getTime(),
y: headerHeight * 0.8,
x: columnWidth * (i + +rtl),
className: `${styles$5.calendarTopText} ${styles$5.textAnchorStart}`
}, bottomValue));
if (topValue) {
if (i !== dates.length - 1) {
topValues.push(React__default.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];
};
const getCalendarValuesForDay = () => {
const topValues = [];
const bottomValues = [];
const topDefaultHeight = headerHeight * 0.5;
const dates = dateSetup.dates;
for (let i = 0; i < dates.length; i++) {
const date = dates[i];
const bottomValue = `${getLocalDayOfWeek(date, locale, "short")}, ${date.getDate().toString()}`;
bottomValues.push(React__default.createElement("text", {
key: date.getTime(),
y: headerHeight * 0.8,
x: columnWidth * i + columnWidth * 0.5,
className: `${styles$5.calendarTopText} ${styles$5.textAnchorMiddle}`
}, bottomValue));
if (i + 1 !== dates.length && date.getMonth() !== dates[i + 1].getMonth()) {
const topValue = `${getLocaleMonth(date, locale)} ${date.getFullYear()}`;
topValues.push(React__default.createElement(TopPartOfCalendar, {
key: topValue + date.getFullYear(),
value: topValue,
x1Line: columnWidth * (i + 1),
y1Line: 0,
y2Line: topDefaultHeight,
xText: columnWidth * (i + 1) - getDaysInMonth(date.getMonth(), date.getFullYear()) * columnWidth * 0.5,
yText: topDefaultHeight * 0.9
}));
}
}
return [topValues, bottomValues];
};
const getCalendarValuesForPartOfDay = () => {
const topValues = [];
const bottomValues = [];
const ticks = viewMode === exports.ViewMode.HalfDay ? 2 : 4;
const topDefaultHeight = headerHeight * 0.5;
const dates = dateSetup.dates;
for (let i = 0; i < dates.length; i++) {
const date = dates[i];
const bottomValue = getCachedDateTimeFormat(locale, {
hour: "numeric"
}).format(date);
bottomValues.push(React__default.createElement("text", {
key: date.getTime(),
y: headerHeight * 0.8,
x: columnWidth * (i + +rtl),
className: `${styles$5.calendarTopText} ${styles$5.textAnchorMiddle}`,
fontFamily: fontFamily
}, bottomValue));
if (i === 0 || date.getDate() !== dates[i - 1].getDate()) {
const topValue = `${getLocalDayOfWeek(date, locale, "short")}, ${date.getDate()} ${getLocaleMonth(date, locale)}`;
topValues.push(React__default.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];
};
const getCalendarValuesForHour = () => {
const topValues = [];
const bottomValues = [];
const topDefaultHeight = headerHeight * 0.5;
const dates = dateSetup.dates;
for (let i = 0; i < dates.length; i++) {
const date = dates[i];
const bottomValue = getCachedDateTimeFormat(locale, {
hour: "numeric"
}).format(date);
bottomValues.push(React__default.createElement("text", {
key: date.getTime(),
y: headerHeight * 0.8,
x: columnWidth * (i + +rtl),
className: styles$5.calendarBottomText,
fontFamily: fontFamily
}, bottomValue));
if (i !== 0 && date.getDate() !== dates[i - 1].getDate()) {
const displayDate = dates[i - 1];
const topValue = `${getLocalDayOfWeek(displayDate, locale, "long")}, ${displayDate.getDate()} ${getLocaleMonth(displayDate, locale)}`;
const topPosition = (date.getHours() - 24) / 2;
topValues.push(React__default.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];
};
let topValues = [];
let bottomValues = [];
switch (dateSetup.viewMode) {
case exports.ViewMode.Year:
[topValues, bottomValues] = getCalendarValuesForYear();
break;
case exports.ViewMode.Quarter:
[topValues, bottomValues] = getCalendarValuesForQuarter();
break;
case exports.ViewMode.Month:
[topValues, bottomValues] = getCalendarValuesForMonth();
break;
case exports.ViewMode.Week:
[topValues, bottomValues] = getCalendarValuesForWeek();
break;
case exports.ViewMode.Day:
[topValues, bottomValues] = getCalendarValuesForDay();
break;
case exports.ViewMode.QuarterDay:
case exports.ViewMode.HalfDay:
[topValues, bottomValues] = getCalendarValuesForPartOfDay();
break;
case exports.ViewMode.Hour:
[topValues, bottomValues] = getCalendarValuesForHour();
}
return React__default.createElement("g", {
className: "calendar",
fontSize: fontSize,
fontFamily: fontFamily,
width: columnWidth * dateSetup.dates.length
}, React__default.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;
}
const Arrow = _ref => {
let {
taskFrom,
taskTo,
rowHeight,
taskHeight,
arrowIndent,
rtl,
arrowColor
} = _ref;
let path;
let trianglePoints;
if (rtl) {
[path, trianglePoints] = drownPathAndTriangleRTL(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent);
} else {
[path, trianglePoints] = drownPathAndTriangle(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent);
}
return React__default.createElement("g", {
className: "arrow"
}, React__default.createElement("path", {
strokeWidth: "1.5",
d: path,
fill: "none",
stroke: arrowColor
}), React__default.createElement("polygon", {
points: trianglePoints,
fill: arrowColor
}));
};
const drownPathAndTriangle = (taskFrom, taskTo, rowHeight, taskHeight, arrowIndent) => {
let taskToStart, taskFromEnd;
if (taskTo.x1 > 0 && taskTo.actualx1 > 0) {
taskToStart = Math.min(taskTo.x1, taskTo.actualx1);
} else if (taskTo.x1 > 0) taskToStart = taskTo.x1;else if (taskTo.actualx1 > 0) taskToStart = taskTo.actualx1;else taskToStart = 0;
if (taskFrom.x2 > 0 && taskFrom.actualx2 > 0) {
taskFromEnd = Math.max(taskFrom.x2, taskFrom.actualx2);
} else if (taskFrom.x2 > 0) taskFromEnd = taskFrom.x2;else if (taskFrom.actualx2 > 0) taskFromEnd = taskFrom.actualx2;else taskFromEnd = 0;
const indexCompare = taskFrom.index > taskTo.index ? -1 : 1;
const taskToEndPosition = taskTo.y + taskHeight / 2;
const taskFromEndPosition = taskFromEnd + arrowIndent * 2;
const taskFromHorizontalOffsetValue = taskFromEndPosition < taskToStart ? "" : `H ${taskToStart - arrowIndent}`;
const taskToHorizontalOffsetValue = taskFromEndPosition > taskToStart ? arrowIndent : taskToStart - taskFromEnd - arrowIndent;
const path = `M ${taskFromEnd} ${taskFrom.y + taskHeight / 2}
h ${arrowIndent}
v ${indexCompare * rowHeight / 2}
${taskFromHorizontalOffsetValue}
V ${taskToEndPosition}
h ${taskToHorizontalOffsetValue}`;
const trianglePoints = `${taskToStart},${taskToEndPosition}
${taskToStart - 5},${taskToEndPosition - 5}
${taskToStart - 5},${taskToEndPosition + 5}`;
return [path, trianglePoints];
};
const drownPathAndTriangleRTL = (taskFrom, taskTo, rowHeight, taskHeight, arrowIndent) => {
const indexCompare = taskFrom.index > taskTo.index ? -1 : 1;
const taskToEndPosition = taskTo.y + taskHeight / 2;
const taskFromEndPosition = taskFrom.x1 - arrowIndent * 2;
const taskFromHorizontalOffsetValue = taskFromEndPosition > taskTo.x2 ? "" : `H ${taskTo.x2 + arrowIndent}`;
const taskToHorizontalOffsetValue = taskFromEndPosition < taskTo.x2 ? -arrowIndent : taskTo.x2 - taskFrom.x1 + arrowIndent;
const path = `M ${taskFrom.x1} ${taskFrom.y + taskHeight / 2}
h ${-arrowIndent}
v ${indexCompare * rowHeight / 2}
${taskFromHorizontalOffsetValue}
V ${taskToEndPosition}
h ${taskToHorizontalOffsetValue}`;
const trianglePoints = `${taskTo.x2},${taskToEndPosition}
${taskTo.x2 + 5},${taskToEndPosition + 5}
${taskTo.x2 + 5},${taskToEndPosition - 5}`;
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];
});
if (dependence !== -1 && task.start.getTime() > 0 && task.end.getTime() > 0) barTasks[dependence].barChildren.push(task);
};
for (var j = 0; j < dependencies.length; j++) {
_loop(j);
}
return task;
});
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,