1 | function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
2 |
|
3 | var React = require('react');
|
4 | var React__default = _interopDefault(React);
|
5 |
|
6 | function _extends() {
|
7 | _extends = Object.assign || function (target) {
|
8 | for (var i = 1; i < arguments.length; i++) {
|
9 | var source = arguments[i];
|
10 |
|
11 | for (var key in source) {
|
12 | if (Object.prototype.hasOwnProperty.call(source, key)) {
|
13 | target[key] = source[key];
|
14 | }
|
15 | }
|
16 | }
|
17 |
|
18 | return target;
|
19 | };
|
20 |
|
21 | return _extends.apply(this, arguments);
|
22 | }
|
23 |
|
24 | function _unsupportedIterableToArray(o, minLen) {
|
25 | if (!o) return;
|
26 | if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
27 | var n = Object.prototype.toString.call(o).slice(8, -1);
|
28 | if (n === "Object" && o.constructor) n = o.constructor.name;
|
29 | if (n === "Map" || n === "Set") return Array.from(o);
|
30 | if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
31 | }
|
32 |
|
33 | function _arrayLikeToArray(arr, len) {
|
34 | if (len == null || len > arr.length) len = arr.length;
|
35 |
|
36 | for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
37 |
|
38 | return arr2;
|
39 | }
|
40 |
|
41 | function _createForOfIteratorHelperLoose(o, allowArrayLike) {
|
42 | var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
|
43 | if (it) return (it = it.call(o)).next.bind(it);
|
44 |
|
45 | if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
|
46 | if (it) o = it;
|
47 | var i = 0;
|
48 | return function () {
|
49 | if (i >= o.length) return {
|
50 | done: true
|
51 | };
|
52 | return {
|
53 | done: false,
|
54 | value: o[i++]
|
55 | };
|
56 | };
|
57 | }
|
58 |
|
59 | throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
60 | }
|
61 |
|
62 | (function (ViewMode) {
|
63 | ViewMode["Hour"] = "Hour";
|
64 | ViewMode["QuarterDay"] = "Quarter Day";
|
65 | ViewMode["HalfDay"] = "Half Day";
|
66 | ViewMode["Day"] = "Day";
|
67 | ViewMode["Week"] = "Week";
|
68 | ViewMode["Month"] = "Month";
|
69 | ViewMode["Year"] = "Year";
|
70 | })(exports.ViewMode || (exports.ViewMode = {}));
|
71 |
|
72 | var intlDTCache = {};
|
73 | var getCachedDateTimeFormat = function getCachedDateTimeFormat(locString, opts) {
|
74 | if (opts === void 0) {
|
75 | opts = {};
|
76 | }
|
77 |
|
78 | var key = JSON.stringify([locString, opts]);
|
79 | var dtf = intlDTCache[key];
|
80 |
|
81 | if (!dtf) {
|
82 | dtf = new Intl.DateTimeFormat(locString, opts);
|
83 | intlDTCache[key] = dtf;
|
84 | }
|
85 |
|
86 | return dtf;
|
87 | };
|
88 | var addToDate = function addToDate(date, quantity, scale) {
|
89 | 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));
|
90 | return newDate;
|
91 | };
|
92 | var startOfDate = function startOfDate(date, scale) {
|
93 | var scores = ["millisecond", "second", "minute", "hour", "day", "month", "year"];
|
94 |
|
95 | var shouldReset = function shouldReset(_scale) {
|
96 | var maxScore = scores.indexOf(scale);
|
97 | return scores.indexOf(_scale) <= maxScore;
|
98 | };
|
99 |
|
100 | 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());
|
101 | return newDate;
|
102 | };
|
103 | var ganttDateRange = function ganttDateRange(tasks, viewMode, preStepsCount) {
|
104 | var newStartDate = tasks[0].start;
|
105 | var newEndDate = tasks[0].start;
|
106 |
|
107 | for (var _iterator = _createForOfIteratorHelperLoose(tasks), _step; !(_step = _iterator()).done;) {
|
108 | var task = _step.value;
|
109 |
|
110 | if (task.start < newStartDate) {
|
111 | newStartDate = task.start;
|
112 | }
|
113 |
|
114 | if (task.end > newEndDate) {
|
115 | newEndDate = task.end;
|
116 | }
|
117 | }
|
118 |
|
119 | switch (viewMode) {
|
120 | case exports.ViewMode.Year:
|
121 | newStartDate = addToDate(newStartDate, -1, "year");
|
122 | newStartDate = startOfDate(newStartDate, "year");
|
123 | newEndDate = addToDate(newEndDate, 1, "year");
|
124 | newEndDate = startOfDate(newEndDate, "year");
|
125 | break;
|
126 |
|
127 | case exports.ViewMode.Month:
|
128 | newStartDate = addToDate(newStartDate, -1 * preStepsCount, "month");
|
129 | newStartDate = startOfDate(newStartDate, "month");
|
130 | newEndDate = addToDate(newEndDate, 1, "year");
|
131 | newEndDate = startOfDate(newEndDate, "year");
|
132 | break;
|
133 |
|
134 | case exports.ViewMode.Week:
|
135 | newStartDate = startOfDate(newStartDate, "day");
|
136 | newStartDate = addToDate(getMonday(newStartDate), -7 * preStepsCount, "day");
|
137 | newEndDate = startOfDate(newEndDate, "day");
|
138 | newEndDate = addToDate(newEndDate, 1.5, "month");
|
139 | break;
|
140 |
|
141 | case exports.ViewMode.Day:
|
142 | newStartDate = startOfDate(newStartDate, "day");
|
143 | newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
|
144 | newEndDate = startOfDate(newEndDate, "day");
|
145 | newEndDate = addToDate(newEndDate, 19, "day");
|
146 | break;
|
147 |
|
148 | case exports.ViewMode.QuarterDay:
|
149 | newStartDate = startOfDate(newStartDate, "day");
|
150 | newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
|
151 | newEndDate = startOfDate(newEndDate, "day");
|
152 | newEndDate = addToDate(newEndDate, 66, "hour");
|
153 | break;
|
154 |
|
155 | case exports.ViewMode.HalfDay:
|
156 | newStartDate = startOfDate(newStartDate, "day");
|
157 | newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
|
158 | newEndDate = startOfDate(newEndDate, "day");
|
159 | newEndDate = addToDate(newEndDate, 108, "hour");
|
160 | break;
|
161 |
|
162 | case exports.ViewMode.Hour:
|
163 | newStartDate = startOfDate(newStartDate, "hour");
|
164 | newStartDate = addToDate(newStartDate, -1 * preStepsCount, "hour");
|
165 | newEndDate = startOfDate(newEndDate, "day");
|
166 | newEndDate = addToDate(newEndDate, 1, "day");
|
167 | break;
|
168 | }
|
169 |
|
170 | return [newStartDate, newEndDate];
|
171 | };
|
172 | var seedDates = function seedDates(startDate, endDate, viewMode) {
|
173 | var currentDate = new Date(startDate);
|
174 | var dates = [currentDate];
|
175 |
|
176 | while (currentDate < endDate) {
|
177 | switch (viewMode) {
|
178 | case exports.ViewMode.Year:
|
179 | currentDate = addToDate(currentDate, 1, "year");
|
180 | break;
|
181 |
|
182 | case exports.ViewMode.Month:
|
183 | currentDate = addToDate(currentDate, 1, "month");
|
184 | break;
|
185 |
|
186 | case exports.ViewMode.Week:
|
187 | currentDate = addToDate(currentDate, 7, "day");
|
188 | break;
|
189 |
|
190 | case exports.ViewMode.Day:
|
191 | currentDate = addToDate(currentDate, 1, "day");
|
192 | break;
|
193 |
|
194 | case exports.ViewMode.HalfDay:
|
195 | currentDate = addToDate(currentDate, 12, "hour");
|
196 | break;
|
197 |
|
198 | case exports.ViewMode.QuarterDay:
|
199 | currentDate = addToDate(currentDate, 6, "hour");
|
200 | break;
|
201 |
|
202 | case exports.ViewMode.Hour:
|
203 | currentDate = addToDate(currentDate, 1, "hour");
|
204 | break;
|
205 | }
|
206 |
|
207 | dates.push(currentDate);
|
208 | }
|
209 |
|
210 | return dates;
|
211 | };
|
212 | var getLocaleMonth = function getLocaleMonth(date, locale) {
|
213 | var bottomValue = getCachedDateTimeFormat(locale, {
|
214 | month: "long"
|
215 | }).format(date);
|
216 | bottomValue = bottomValue.replace(bottomValue[0], bottomValue[0].toLocaleUpperCase());
|
217 | return bottomValue;
|
218 | };
|
219 | var getLocalDayOfWeek = function getLocalDayOfWeek(date, locale, format) {
|
220 | var bottomValue = getCachedDateTimeFormat(locale, {
|
221 | weekday: format
|
222 | }).format(date);
|
223 | bottomValue = bottomValue.replace(bottomValue[0], bottomValue[0].toLocaleUpperCase());
|
224 | return bottomValue;
|
225 | };
|
226 |
|
227 | var getMonday = function getMonday(date) {
|
228 | var day = date.getDay();
|
229 | var diff = date.getDate() - day + (day === 0 ? -6 : 1);
|
230 | return new Date(date.setDate(diff));
|
231 | };
|
232 |
|
233 | var getWeekNumberISO8601 = function getWeekNumberISO8601(date) {
|
234 | var tmpDate = new Date(date.valueOf());
|
235 | var dayNumber = (tmpDate.getDay() + 6) % 7;
|
236 | tmpDate.setDate(tmpDate.getDate() - dayNumber + 3);
|
237 | var firstThursday = tmpDate.valueOf();
|
238 | tmpDate.setMonth(0, 1);
|
239 |
|
240 | if (tmpDate.getDay() !== 4) {
|
241 | tmpDate.setMonth(0, 1 + (4 - tmpDate.getDay() + 7) % 7);
|
242 | }
|
243 |
|
244 | var weekNumber = (1 + Math.ceil((firstThursday - tmpDate.valueOf()) / 604800000)).toString();
|
245 |
|
246 | if (weekNumber.length === 1) {
|
247 | return "0" + weekNumber;
|
248 | } else {
|
249 | return weekNumber;
|
250 | }
|
251 | };
|
252 | var getDaysInMonth = function getDaysInMonth(month, year) {
|
253 | return new Date(year, month + 1, 0).getDate();
|
254 | };
|
255 |
|
256 | var styles = {"ganttTable":"_3_ygE","ganttTable_Header":"_1nBOt","ganttTable_HeaderSeparator":"_2eZzQ","ganttTable_HeaderItem":"_WuQ0f"};
|
257 |
|
258 | var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
|
259 | var headerHeight = _ref.headerHeight,
|
260 | fontFamily = _ref.fontFamily,
|
261 | fontSize = _ref.fontSize,
|
262 | rowWidth = _ref.rowWidth;
|
263 | return React__default.createElement("div", {
|
264 | className: styles.ganttTable,
|
265 | style: {
|
266 | fontFamily: fontFamily,
|
267 | fontSize: fontSize
|
268 | }
|
269 | }, React__default.createElement("div", {
|
270 | className: styles.ganttTable_Header,
|
271 | style: {
|
272 | height: headerHeight - 2
|
273 | }
|
274 | }, React__default.createElement("div", {
|
275 | className: styles.ganttTable_HeaderItem,
|
276 | style: {
|
277 | minWidth: rowWidth
|
278 | }
|
279 | }, "\xA0Name"), React__default.createElement("div", {
|
280 | className: styles.ganttTable_HeaderSeparator,
|
281 | style: {
|
282 | height: headerHeight * 0.5,
|
283 | marginTop: headerHeight * 0.2
|
284 | }
|
285 | }), React__default.createElement("div", {
|
286 | className: styles.ganttTable_HeaderItem,
|
287 | style: {
|
288 | minWidth: rowWidth
|
289 | }
|
290 | }, "\xA0From"), React__default.createElement("div", {
|
291 | className: styles.ganttTable_HeaderSeparator,
|
292 | style: {
|
293 | height: headerHeight * 0.5,
|
294 | marginTop: headerHeight * 0.25
|
295 | }
|
296 | }), React__default.createElement("div", {
|
297 | className: styles.ganttTable_HeaderItem,
|
298 | style: {
|
299 | minWidth: rowWidth
|
300 | }
|
301 | }, "\xA0To")));
|
302 | };
|
303 |
|
304 | var styles$1 = {"taskListWrapper":"_3ZbQT","taskListTableRow":"_34SS0","taskListCell":"_3lLk3","taskListNameWrapper":"_nI1Xw","taskListExpander":"_2QjE6","taskListEmptyExpander":"_2TfEi"};
|
305 |
|
306 | var localeDateStringCache = {};
|
307 |
|
308 | var toLocaleDateStringFactory = function toLocaleDateStringFactory(locale) {
|
309 | return function (date, dateTimeOptions) {
|
310 | var key = date.toString();
|
311 | var lds = localeDateStringCache[key];
|
312 |
|
313 | if (!lds) {
|
314 | lds = date.toLocaleDateString(locale, dateTimeOptions);
|
315 | localeDateStringCache[key] = lds;
|
316 | }
|
317 |
|
318 | return lds;
|
319 | };
|
320 | };
|
321 |
|
322 | var dateTimeOptions = {
|
323 | weekday: "short",
|
324 | year: "numeric",
|
325 | month: "long",
|
326 | day: "numeric"
|
327 | };
|
328 | var TaskListTableDefault = function TaskListTableDefault(_ref) {
|
329 | var rowHeight = _ref.rowHeight,
|
330 | rowWidth = _ref.rowWidth,
|
331 | tasks = _ref.tasks,
|
332 | fontFamily = _ref.fontFamily,
|
333 | fontSize = _ref.fontSize,
|
334 | locale = _ref.locale,
|
335 | onExpanderClick = _ref.onExpanderClick;
|
336 | var toLocaleDateString = React.useMemo(function () {
|
337 | return toLocaleDateStringFactory(locale);
|
338 | }, [locale]);
|
339 | return React__default.createElement("div", {
|
340 | className: styles$1.taskListWrapper,
|
341 | style: {
|
342 | fontFamily: fontFamily,
|
343 | fontSize: fontSize
|
344 | }
|
345 | }, tasks.map(function (t) {
|
346 | var expanderSymbol = "";
|
347 |
|
348 | if (t.hideChildren === false) {
|
349 | expanderSymbol = "▼";
|
350 | } else if (t.hideChildren === true) {
|
351 | expanderSymbol = "▶";
|
352 | }
|
353 |
|
354 | return React__default.createElement("div", {
|
355 | className: styles$1.taskListTableRow,
|
356 | style: {
|
357 | height: rowHeight
|
358 | },
|
359 | key: t.id + "row"
|
360 | }, React__default.createElement("div", {
|
361 | className: styles$1.taskListCell,
|
362 | style: {
|
363 | minWidth: rowWidth,
|
364 | maxWidth: rowWidth
|
365 | },
|
366 | title: t.name
|
367 | }, React__default.createElement("div", {
|
368 | className: styles$1.taskListNameWrapper
|
369 | }, React__default.createElement("div", {
|
370 | className: expanderSymbol ? styles$1.taskListExpander : styles$1.taskListEmptyExpander,
|
371 | onClick: function onClick() {
|
372 | return onExpanderClick(t);
|
373 | }
|
374 | }, expanderSymbol), React__default.createElement("div", null, t.name))), React__default.createElement("div", {
|
375 | className: styles$1.taskListCell,
|
376 | style: {
|
377 | minWidth: rowWidth,
|
378 | maxWidth: rowWidth
|
379 | }
|
380 | }, "\xA0", toLocaleDateString(t.start, dateTimeOptions)), React__default.createElement("div", {
|
381 | className: styles$1.taskListCell,
|
382 | style: {
|
383 | minWidth: rowWidth,
|
384 | maxWidth: rowWidth
|
385 | }
|
386 | }, "\xA0", toLocaleDateString(t.end, dateTimeOptions)));
|
387 | }));
|
388 | };
|
389 |
|
390 | var styles$2 = {"tooltipDefaultContainer":"_3T42e","tooltipDefaultContainerParagraph":"_29NTg","tooltipDetailsContainer":"_25P-K","tooltipDetailsContainerHidden":"_3gVAq"};
|
391 |
|
392 | var Tooltip = function Tooltip(_ref) {
|
393 | var task = _ref.task,
|
394 | rowHeight = _ref.rowHeight,
|
395 | rtl = _ref.rtl,
|
396 | svgContainerHeight = _ref.svgContainerHeight,
|
397 | svgContainerWidth = _ref.svgContainerWidth,
|
398 | scrollX = _ref.scrollX,
|
399 | scrollY = _ref.scrollY,
|
400 | arrowIndent = _ref.arrowIndent,
|
401 | fontSize = _ref.fontSize,
|
402 | fontFamily = _ref.fontFamily,
|
403 | headerHeight = _ref.headerHeight,
|
404 | taskListWidth = _ref.taskListWidth,
|
405 | TooltipContent = _ref.TooltipContent;
|
406 | var tooltipRef = React.useRef(null);
|
407 |
|
408 | var _useState = React.useState(0),
|
409 | relatedY = _useState[0],
|
410 | setRelatedY = _useState[1];
|
411 |
|
412 | var _useState2 = React.useState(0),
|
413 | relatedX = _useState2[0],
|
414 | setRelatedX = _useState2[1];
|
415 |
|
416 | React.useEffect(function () {
|
417 | if (tooltipRef.current) {
|
418 | var tooltipHeight = tooltipRef.current.offsetHeight * 1.1;
|
419 | var tooltipWidth = tooltipRef.current.offsetWidth * 1.1;
|
420 | var newRelatedY = task.index * rowHeight - scrollY + headerHeight;
|
421 | var newRelatedX;
|
422 |
|
423 | if (rtl) {
|
424 | newRelatedX = task.x1 - arrowIndent * 1.5 - tooltipWidth - scrollX;
|
425 |
|
426 | if (newRelatedX < 0) {
|
427 | newRelatedX = task.x2 + arrowIndent * 1.5 - scrollX;
|
428 | }
|
429 |
|
430 | var tooltipLeftmostPoint = tooltipWidth + newRelatedX;
|
431 |
|
432 | if (tooltipLeftmostPoint > svgContainerWidth) {
|
433 | newRelatedX = svgContainerWidth - tooltipWidth;
|
434 | newRelatedY += rowHeight;
|
435 | }
|
436 | } else {
|
437 | newRelatedX = task.x2 + arrowIndent * 1.5 + taskListWidth - scrollX;
|
438 |
|
439 | var _tooltipLeftmostPoint = tooltipWidth + newRelatedX;
|
440 |
|
441 | var fullChartWidth = taskListWidth + svgContainerWidth;
|
442 |
|
443 | if (_tooltipLeftmostPoint > fullChartWidth) {
|
444 | newRelatedX = task.x1 + taskListWidth - arrowIndent * 1.5 - scrollX - tooltipWidth;
|
445 | }
|
446 |
|
447 | if (newRelatedX < taskListWidth) {
|
448 | newRelatedX = svgContainerWidth + taskListWidth - tooltipWidth;
|
449 | newRelatedY += rowHeight;
|
450 | }
|
451 | }
|
452 |
|
453 | var tooltipLowerPoint = tooltipHeight + newRelatedY - scrollY;
|
454 |
|
455 | if (tooltipLowerPoint > svgContainerHeight - scrollY) {
|
456 | newRelatedY = svgContainerHeight - tooltipHeight;
|
457 | }
|
458 |
|
459 | setRelatedY(newRelatedY);
|
460 | setRelatedX(newRelatedX);
|
461 | }
|
462 | }, [tooltipRef, task, arrowIndent, scrollX, scrollY, headerHeight, taskListWidth, rowHeight, svgContainerHeight, svgContainerWidth, rtl]);
|
463 | return React__default.createElement("div", {
|
464 | ref: tooltipRef,
|
465 | className: relatedX ? styles$2.tooltipDetailsContainer : styles$2.tooltipDetailsContainerHidden,
|
466 | style: {
|
467 | left: relatedX,
|
468 | top: relatedY
|
469 | }
|
470 | }, React__default.createElement(TooltipContent, {
|
471 | task: task,
|
472 | fontSize: fontSize,
|
473 | fontFamily: fontFamily
|
474 | }));
|
475 | };
|
476 | var StandardTooltipContent = function StandardTooltipContent(_ref2) {
|
477 | var task = _ref2.task,
|
478 | fontSize = _ref2.fontSize,
|
479 | fontFamily = _ref2.fontFamily;
|
480 | var style = {
|
481 | fontSize: fontSize,
|
482 | fontFamily: fontFamily
|
483 | };
|
484 | return React__default.createElement("div", {
|
485 | className: styles$2.tooltipDefaultContainer,
|
486 | style: style
|
487 | }, React__default.createElement("b", {
|
488 | style: {
|
489 | fontSize: fontSize + 6
|
490 | }
|
491 | }, task.name + ": " + task.start.getDate() + "-" + (task.start.getMonth() + 1) + "-" + task.start.getFullYear() + " - " + task.end.getDate() + "-" + (task.end.getMonth() + 1) + "-" + task.end.getFullYear()), task.end.getTime() - task.start.getTime() !== 0 && React__default.createElement("p", {
|
492 | className: styles$2.tooltipDefaultContainerParagraph
|
493 | }, "Duration: " + ~~((task.end.getTime() - task.start.getTime()) / (1000 * 60 * 60 * 24)) + " day(s)"), React__default.createElement("p", {
|
494 | className: styles$2.tooltipDefaultContainerParagraph
|
495 | }, !!task.progress && "Progress: " + task.progress + " %"));
|
496 | };
|
497 |
|
498 | var styles$3 = {"scroll":"_1eT-t"};
|
499 |
|
500 | var VerticalScroll = function VerticalScroll(_ref) {
|
501 | var scroll = _ref.scroll,
|
502 | ganttHeight = _ref.ganttHeight,
|
503 | ganttFullHeight = _ref.ganttFullHeight,
|
504 | headerHeight = _ref.headerHeight,
|
505 | rtl = _ref.rtl,
|
506 | onScroll = _ref.onScroll;
|
507 | var scrollRef = React.useRef(null);
|
508 | React.useEffect(function () {
|
509 | if (scrollRef.current) {
|
510 | scrollRef.current.scrollTop = scroll;
|
511 | }
|
512 | }, [scroll]);
|
513 | return React__default.createElement("div", {
|
514 | style: {
|
515 | height: ganttHeight,
|
516 | marginTop: headerHeight,
|
517 | marginLeft: rtl ? "" : "-1rem"
|
518 | },
|
519 | className: styles$3.scroll,
|
520 | onScroll: onScroll,
|
521 | ref: scrollRef
|
522 | }, React__default.createElement("div", {
|
523 | style: {
|
524 | height: ganttFullHeight,
|
525 | width: 1
|
526 | }
|
527 | }));
|
528 | };
|
529 |
|
530 | var TaskList = function TaskList(_ref) {
|
531 | var headerHeight = _ref.headerHeight,
|
532 | fontFamily = _ref.fontFamily,
|
533 | fontSize = _ref.fontSize,
|
534 | rowWidth = _ref.rowWidth,
|
535 | rowHeight = _ref.rowHeight,
|
536 | scrollY = _ref.scrollY,
|
537 | tasks = _ref.tasks,
|
538 | selectedTask = _ref.selectedTask,
|
539 | setSelectedTask = _ref.setSelectedTask,
|
540 | onExpanderClick = _ref.onExpanderClick,
|
541 | locale = _ref.locale,
|
542 | ganttHeight = _ref.ganttHeight,
|
543 | taskListRef = _ref.taskListRef,
|
544 | horizontalContainerClass = _ref.horizontalContainerClass,
|
545 | TaskListHeader = _ref.TaskListHeader,
|
546 | TaskListTable = _ref.TaskListTable;
|
547 | var horizontalContainerRef = React.useRef(null);
|
548 | React.useEffect(function () {
|
549 | if (horizontalContainerRef.current) {
|
550 | horizontalContainerRef.current.scrollTop = scrollY;
|
551 | }
|
552 | }, [scrollY]);
|
553 | var headerProps = {
|
554 | headerHeight: headerHeight,
|
555 | fontFamily: fontFamily,
|
556 | fontSize: fontSize,
|
557 | rowWidth: rowWidth
|
558 | };
|
559 | var selectedTaskId = selectedTask ? selectedTask.id : "";
|
560 | var tableProps = {
|
561 | rowHeight: rowHeight,
|
562 | rowWidth: rowWidth,
|
563 | fontFamily: fontFamily,
|
564 | fontSize: fontSize,
|
565 | tasks: tasks,
|
566 | locale: locale,
|
567 | selectedTaskId: selectedTaskId,
|
568 | setSelectedTask: setSelectedTask,
|
569 | onExpanderClick: onExpanderClick
|
570 | };
|
571 | return React__default.createElement("div", {
|
572 | ref: taskListRef
|
573 | }, React__default.createElement(TaskListHeader, Object.assign({}, headerProps)), React__default.createElement("div", {
|
574 | ref: horizontalContainerRef,
|
575 | className: horizontalContainerClass,
|
576 | style: ganttHeight ? {
|
577 | height: ganttHeight
|
578 | } : {}
|
579 | }, React__default.createElement(TaskListTable, Object.assign({}, tableProps))));
|
580 | };
|
581 |
|
582 | var styles$4 = {"gridRow":"_2dZTy","gridRowLine":"_3rUKi","gridTick":"_RuwuK"};
|
583 |
|
584 | var GridBody = function GridBody(_ref) {
|
585 | var tasks = _ref.tasks,
|
586 | dates = _ref.dates,
|
587 | rowHeight = _ref.rowHeight,
|
588 | svgWidth = _ref.svgWidth,
|
589 | columnWidth = _ref.columnWidth,
|
590 | todayColor = _ref.todayColor,
|
591 | rtl = _ref.rtl;
|
592 | var y = 0;
|
593 | var gridRows = [];
|
594 | var rowLines = [React__default.createElement("line", {
|
595 | key: "RowLineFirst",
|
596 | x: "0",
|
597 | y1: 0,
|
598 | x2: svgWidth,
|
599 | y2: 0,
|
600 | className: styles$4.gridRowLine
|
601 | })];
|
602 |
|
603 | for (var _iterator = _createForOfIteratorHelperLoose(tasks), _step; !(_step = _iterator()).done;) {
|
604 | var task = _step.value;
|
605 | gridRows.push(React__default.createElement("rect", {
|
606 | key: "Row" + task.id,
|
607 | x: "0",
|
608 | y: y,
|
609 | width: svgWidth,
|
610 | height: rowHeight,
|
611 | className: styles$4.gridRow
|
612 | }));
|
613 | rowLines.push(React__default.createElement("line", {
|
614 | key: "RowLine" + task.id,
|
615 | x: "0",
|
616 | y1: y + rowHeight,
|
617 | x2: svgWidth,
|
618 | y2: y + rowHeight,
|
619 | className: styles$4.gridRowLine
|
620 | }));
|
621 | y += rowHeight;
|
622 | }
|
623 |
|
624 | var now = new Date();
|
625 | var tickX = 0;
|
626 | var ticks = [];
|
627 | var today = React__default.createElement("rect", null);
|
628 |
|
629 | for (var i = 0; i < dates.length; i++) {
|
630 | var date = dates[i];
|
631 | ticks.push(React__default.createElement("line", {
|
632 | key: date.getTime(),
|
633 | x1: tickX,
|
634 | y1: 0,
|
635 | x2: tickX,
|
636 | y2: y,
|
637 | className: styles$4.gridTick
|
638 | }));
|
639 |
|
640 | 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()) {
|
641 | today = React__default.createElement("rect", {
|
642 | x: tickX,
|
643 | y: 0,
|
644 | width: columnWidth,
|
645 | height: y,
|
646 | fill: todayColor
|
647 | });
|
648 | }
|
649 |
|
650 | if (rtl && i + 1 !== dates.length && date.getTime() >= now.getTime() && dates[i + 1].getTime() < now.getTime()) {
|
651 | today = React__default.createElement("rect", {
|
652 | x: tickX + columnWidth,
|
653 | y: 0,
|
654 | width: columnWidth,
|
655 | height: y,
|
656 | fill: todayColor
|
657 | });
|
658 | }
|
659 |
|
660 | tickX += columnWidth;
|
661 | }
|
662 |
|
663 | return React__default.createElement("g", {
|
664 | className: "gridBody"
|
665 | }, React__default.createElement("g", {
|
666 | className: "rows"
|
667 | }, gridRows), React__default.createElement("g", {
|
668 | className: "rowLines"
|
669 | }, rowLines), React__default.createElement("g", {
|
670 | className: "ticks"
|
671 | }, ticks), React__default.createElement("g", {
|
672 | className: "today"
|
673 | }, today));
|
674 | };
|
675 |
|
676 | var Grid = function Grid(props) {
|
677 | return React__default.createElement("g", {
|
678 | className: "grid"
|
679 | }, React__default.createElement(GridBody, Object.assign({}, props)));
|
680 | };
|
681 |
|
682 | var styles$5 = {"calendarBottomText":"_9w8d5","calendarTopTick":"_1rLuZ","calendarTopText":"_2q1Kt","calendarHeader":"_35nLX"};
|
683 |
|
684 | var TopPartOfCalendar = function TopPartOfCalendar(_ref) {
|
685 | var value = _ref.value,
|
686 | x1Line = _ref.x1Line,
|
687 | y1Line = _ref.y1Line,
|
688 | y2Line = _ref.y2Line,
|
689 | xText = _ref.xText,
|
690 | yText = _ref.yText;
|
691 | return React__default.createElement("g", {
|
692 | className: "calendarTop"
|
693 | }, React__default.createElement("line", {
|
694 | x1: x1Line,
|
695 | y1: y1Line,
|
696 | x2: x1Line,
|
697 | y2: y2Line,
|
698 | className: styles$5.calendarTopTick,
|
699 | key: value + "line"
|
700 | }), React__default.createElement("text", {
|
701 | key: value + "text",
|
702 | y: yText,
|
703 | x: xText,
|
704 | className: styles$5.calendarTopText
|
705 | }, value));
|
706 | };
|
707 |
|
708 | var Calendar = function Calendar(_ref) {
|
709 | var dateSetup = _ref.dateSetup,
|
710 | locale = _ref.locale,
|
711 | viewMode = _ref.viewMode,
|
712 | rtl = _ref.rtl,
|
713 | headerHeight = _ref.headerHeight,
|
714 | columnWidth = _ref.columnWidth,
|
715 | fontFamily = _ref.fontFamily,
|
716 | fontSize = _ref.fontSize;
|
717 |
|
718 | var getCalendarValuesForYear = function getCalendarValuesForYear() {
|
719 | var topValues = [];
|
720 | var bottomValues = [];
|
721 | var topDefaultHeight = headerHeight * 0.5;
|
722 |
|
723 | for (var i = 0; i < dateSetup.dates.length; i++) {
|
724 | var date = dateSetup.dates[i];
|
725 | var bottomValue = date.getFullYear();
|
726 | bottomValues.push(React__default.createElement("text", {
|
727 | key: date.getFullYear(),
|
728 | y: headerHeight * 0.8,
|
729 | x: columnWidth * i + columnWidth * 0.5,
|
730 | className: styles$5.calendarBottomText
|
731 | }, bottomValue));
|
732 |
|
733 | if (i === 0 || date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()) {
|
734 | var topValue = date.getFullYear().toString();
|
735 | var xText = void 0;
|
736 |
|
737 | if (rtl) {
|
738 | xText = (6 + i + date.getFullYear() + 1) * columnWidth;
|
739 | } else {
|
740 | xText = (6 + i - date.getFullYear()) * columnWidth;
|
741 | }
|
742 |
|
743 | topValues.push(React__default.createElement(TopPartOfCalendar, {
|
744 | key: topValue,
|
745 | value: topValue,
|
746 | x1Line: columnWidth * i,
|
747 | y1Line: 0,
|
748 | y2Line: headerHeight,
|
749 | xText: xText,
|
750 | yText: topDefaultHeight * 0.9
|
751 | }));
|
752 | }
|
753 | }
|
754 |
|
755 | return [topValues, bottomValues];
|
756 | };
|
757 |
|
758 | var getCalendarValuesForMonth = function getCalendarValuesForMonth() {
|
759 | var topValues = [];
|
760 | var bottomValues = [];
|
761 | var topDefaultHeight = headerHeight * 0.5;
|
762 |
|
763 | for (var i = 0; i < dateSetup.dates.length; i++) {
|
764 | var date = dateSetup.dates[i];
|
765 | var bottomValue = getLocaleMonth(date, locale);
|
766 | bottomValues.push(React__default.createElement("text", {
|
767 | key: bottomValue + date.getFullYear(),
|
768 | y: headerHeight * 0.8,
|
769 | x: columnWidth * i + columnWidth * 0.5,
|
770 | className: styles$5.calendarBottomText
|
771 | }, bottomValue));
|
772 |
|
773 | if (i === 0 || date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()) {
|
774 | var topValue = date.getFullYear().toString();
|
775 | var xText = void 0;
|
776 |
|
777 | if (rtl) {
|
778 | xText = (6 + i + date.getMonth() + 1) * columnWidth;
|
779 | } else {
|
780 | xText = (6 + i - date.getMonth()) * columnWidth;
|
781 | }
|
782 |
|
783 | topValues.push(React__default.createElement(TopPartOfCalendar, {
|
784 | key: topValue,
|
785 | value: topValue,
|
786 | x1Line: columnWidth * i,
|
787 | y1Line: 0,
|
788 | y2Line: topDefaultHeight,
|
789 | xText: xText,
|
790 | yText: topDefaultHeight * 0.9
|
791 | }));
|
792 | }
|
793 | }
|
794 |
|
795 | return [topValues, bottomValues];
|
796 | };
|
797 |
|
798 | var getCalendarValuesForWeek = function getCalendarValuesForWeek() {
|
799 | var topValues = [];
|
800 | var bottomValues = [];
|
801 | var weeksCount = 1;
|
802 | var topDefaultHeight = headerHeight * 0.5;
|
803 | var dates = dateSetup.dates;
|
804 |
|
805 | for (var i = dates.length - 1; i >= 0; i--) {
|
806 | var date = dates[i];
|
807 | var topValue = "";
|
808 |
|
809 | if (i === 0 || date.getMonth() !== dates[i - 1].getMonth()) {
|
810 | topValue = getLocaleMonth(date, locale) + ", " + date.getFullYear();
|
811 | }
|
812 |
|
813 | var bottomValue = "W" + getWeekNumberISO8601(date);
|
814 | bottomValues.push(React__default.createElement("text", {
|
815 | key: date.getTime(),
|
816 | y: headerHeight * 0.8,
|
817 | x: columnWidth * (i + +rtl),
|
818 | className: styles$5.calendarBottomText
|
819 | }, bottomValue));
|
820 |
|
821 | if (topValue) {
|
822 | if (i !== dates.length - 1) {
|
823 | topValues.push(React__default.createElement(TopPartOfCalendar, {
|
824 | key: topValue,
|
825 | value: topValue,
|
826 | x1Line: columnWidth * i + weeksCount * columnWidth,
|
827 | y1Line: 0,
|
828 | y2Line: topDefaultHeight,
|
829 | xText: columnWidth * i + columnWidth * weeksCount * 0.5,
|
830 | yText: topDefaultHeight * 0.9
|
831 | }));
|
832 | }
|
833 |
|
834 | weeksCount = 0;
|
835 | }
|
836 |
|
837 | weeksCount++;
|
838 | }
|
839 |
|
840 | return [topValues, bottomValues];
|
841 | };
|
842 |
|
843 | var getCalendarValuesForDay = function getCalendarValuesForDay() {
|
844 | var topValues = [];
|
845 | var bottomValues = [];
|
846 | var topDefaultHeight = headerHeight * 0.5;
|
847 | var dates = dateSetup.dates;
|
848 |
|
849 | for (var i = 0; i < dates.length; i++) {
|
850 | var date = dates[i];
|
851 | var bottomValue = getLocalDayOfWeek(date, locale, "short") + ", " + date.getDate().toString();
|
852 | bottomValues.push(React__default.createElement("text", {
|
853 | key: date.getTime(),
|
854 | y: headerHeight * 0.8,
|
855 | x: columnWidth * i + columnWidth * 0.5,
|
856 | className: styles$5.calendarBottomText
|
857 | }, bottomValue));
|
858 |
|
859 | if (i + 1 !== dates.length && date.getMonth() !== dates[i + 1].getMonth()) {
|
860 | var topValue = getLocaleMonth(date, locale);
|
861 | topValues.push(React__default.createElement(TopPartOfCalendar, {
|
862 | key: topValue + date.getFullYear(),
|
863 | value: topValue,
|
864 | x1Line: columnWidth * (i + 1),
|
865 | y1Line: 0,
|
866 | y2Line: topDefaultHeight,
|
867 | xText: columnWidth * (i + 1) - getDaysInMonth(date.getMonth(), date.getFullYear()) * columnWidth * 0.5,
|
868 | yText: topDefaultHeight * 0.9
|
869 | }));
|
870 | }
|
871 | }
|
872 |
|
873 | return [topValues, bottomValues];
|
874 | };
|
875 |
|
876 | var getCalendarValuesForPartOfDay = function getCalendarValuesForPartOfDay() {
|
877 | var topValues = [];
|
878 | var bottomValues = [];
|
879 | var ticks = viewMode === exports.ViewMode.HalfDay ? 2 : 4;
|
880 | var topDefaultHeight = headerHeight * 0.5;
|
881 | var dates = dateSetup.dates;
|
882 |
|
883 | for (var i = 0; i < dates.length; i++) {
|
884 | var date = dates[i];
|
885 | var bottomValue = getCachedDateTimeFormat(locale, {
|
886 | hour: "numeric"
|
887 | }).format(date);
|
888 | bottomValues.push(React__default.createElement("text", {
|
889 | key: date.getTime(),
|
890 | y: headerHeight * 0.8,
|
891 | x: columnWidth * (i + +rtl),
|
892 | className: styles$5.calendarBottomText,
|
893 | fontFamily: fontFamily
|
894 | }, bottomValue));
|
895 |
|
896 | if (i === 0 || date.getDate() !== dates[i - 1].getDate()) {
|
897 | var topValue = getLocalDayOfWeek(date, locale, "short") + ", " + date.getDate() + " " + getLocaleMonth(date, locale);
|
898 | topValues.push(React__default.createElement(TopPartOfCalendar, {
|
899 | key: topValue + date.getFullYear(),
|
900 | value: topValue,
|
901 | x1Line: columnWidth * i + ticks * columnWidth,
|
902 | y1Line: 0,
|
903 | y2Line: topDefaultHeight,
|
904 | xText: columnWidth * i + ticks * columnWidth * 0.5,
|
905 | yText: topDefaultHeight * 0.9
|
906 | }));
|
907 | }
|
908 | }
|
909 |
|
910 | return [topValues, bottomValues];
|
911 | };
|
912 |
|
913 | var getCalendarValuesForHour = function getCalendarValuesForHour() {
|
914 | var topValues = [];
|
915 | var bottomValues = [];
|
916 | var topDefaultHeight = headerHeight * 0.5;
|
917 | var dates = dateSetup.dates;
|
918 |
|
919 | for (var i = 0; i < dates.length; i++) {
|
920 | var date = dates[i];
|
921 | var bottomValue = getCachedDateTimeFormat(locale, {
|
922 | hour: "numeric"
|
923 | }).format(date);
|
924 | bottomValues.push(React__default.createElement("text", {
|
925 | key: date.getTime(),
|
926 | y: headerHeight * 0.8,
|
927 | x: columnWidth * (i + +rtl),
|
928 | className: styles$5.calendarBottomText,
|
929 | fontFamily: fontFamily
|
930 | }, bottomValue));
|
931 |
|
932 | if (i !== 0 && date.getDate() !== dates[i - 1].getDate()) {
|
933 | var displayDate = dates[i - 1];
|
934 | var topValue = getLocalDayOfWeek(displayDate, locale, "long") + ", " + displayDate.getDate() + " " + getLocaleMonth(displayDate, locale);
|
935 | var topPosition = (date.getHours() - 24) / 2;
|
936 | topValues.push(React__default.createElement(TopPartOfCalendar, {
|
937 | key: topValue + displayDate.getFullYear(),
|
938 | value: topValue,
|
939 | x1Line: columnWidth * i,
|
940 | y1Line: 0,
|
941 | y2Line: topDefaultHeight,
|
942 | xText: columnWidth * (i + topPosition),
|
943 | yText: topDefaultHeight * 0.9
|
944 | }));
|
945 | }
|
946 | }
|
947 |
|
948 | return [topValues, bottomValues];
|
949 | };
|
950 |
|
951 | var topValues = [];
|
952 | var bottomValues = [];
|
953 |
|
954 | switch (dateSetup.viewMode) {
|
955 | case exports.ViewMode.Year:
|
956 | var _getCalendarValuesFor = getCalendarValuesForYear();
|
957 |
|
958 | topValues = _getCalendarValuesFor[0];
|
959 | bottomValues = _getCalendarValuesFor[1];
|
960 | break;
|
961 |
|
962 | case exports.ViewMode.Month:
|
963 | var _getCalendarValuesFor2 = getCalendarValuesForMonth();
|
964 |
|
965 | topValues = _getCalendarValuesFor2[0];
|
966 | bottomValues = _getCalendarValuesFor2[1];
|
967 | break;
|
968 |
|
969 | case exports.ViewMode.Week:
|
970 | var _getCalendarValuesFor3 = getCalendarValuesForWeek();
|
971 |
|
972 | topValues = _getCalendarValuesFor3[0];
|
973 | bottomValues = _getCalendarValuesFor3[1];
|
974 | break;
|
975 |
|
976 | case exports.ViewMode.Day:
|
977 | var _getCalendarValuesFor4 = getCalendarValuesForDay();
|
978 |
|
979 | topValues = _getCalendarValuesFor4[0];
|
980 | bottomValues = _getCalendarValuesFor4[1];
|
981 | break;
|
982 |
|
983 | case exports.ViewMode.QuarterDay:
|
984 | case exports.ViewMode.HalfDay:
|
985 | var _getCalendarValuesFor5 = getCalendarValuesForPartOfDay();
|
986 |
|
987 | topValues = _getCalendarValuesFor5[0];
|
988 | bottomValues = _getCalendarValuesFor5[1];
|
989 | break;
|
990 |
|
991 | case exports.ViewMode.Hour:
|
992 | var _getCalendarValuesFor6 = getCalendarValuesForHour();
|
993 |
|
994 | topValues = _getCalendarValuesFor6[0];
|
995 | bottomValues = _getCalendarValuesFor6[1];
|
996 | }
|
997 |
|
998 | return React__default.createElement("g", {
|
999 | className: "calendar",
|
1000 | fontSize: fontSize,
|
1001 | fontFamily: fontFamily
|
1002 | }, React__default.createElement("rect", {
|
1003 | x: 0,
|
1004 | y: 0,
|
1005 | width: columnWidth * dateSetup.dates.length,
|
1006 | height: headerHeight,
|
1007 | className: styles$5.calendarHeader
|
1008 | }), bottomValues, " ", topValues);
|
1009 | };
|
1010 |
|
1011 |
|
1012 |
|
1013 | const _iteratorSymbol = typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
|
1014 |
|
1015 | const _asyncIteratorSymbol = typeof Symbol !== "undefined" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator"))) : "@@asyncIterator";
|
1016 |
|
1017 |
|
1018 | function _catch(body, recover) {
|
1019 | try {
|
1020 | var result = body();
|
1021 | } catch(e) {
|
1022 | return recover(e);
|
1023 | }
|
1024 | if (result && result.then) {
|
1025 | return result.then(void 0, recover);
|
1026 | }
|
1027 | return result;
|
1028 | }
|
1029 |
|
1030 | var Arrow = function Arrow(_ref) {
|
1031 | var taskFrom = _ref.taskFrom,
|
1032 | taskTo = _ref.taskTo,
|
1033 | rowHeight = _ref.rowHeight,
|
1034 | taskHeight = _ref.taskHeight,
|
1035 | arrowIndent = _ref.arrowIndent,
|
1036 | rtl = _ref.rtl;
|
1037 | var path;
|
1038 | var trianglePoints;
|
1039 |
|
1040 | if (rtl) {
|
1041 | var _drownPathAndTriangle = drownPathAndTriangleRTL(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent);
|
1042 |
|
1043 | path = _drownPathAndTriangle[0];
|
1044 | trianglePoints = _drownPathAndTriangle[1];
|
1045 | } else {
|
1046 | var _drownPathAndTriangle2 = drownPathAndTriangle(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent);
|
1047 |
|
1048 | path = _drownPathAndTriangle2[0];
|
1049 | trianglePoints = _drownPathAndTriangle2[1];
|
1050 | }
|
1051 |
|
1052 | return React__default.createElement("g", {
|
1053 | className: "arrow"
|
1054 | }, React__default.createElement("path", {
|
1055 | strokeWidth: "1.5",
|
1056 | d: path,
|
1057 | fill: "none"
|
1058 | }), React__default.createElement("polygon", {
|
1059 | points: trianglePoints
|
1060 | }));
|
1061 | };
|
1062 |
|
1063 | var drownPathAndTriangle = function drownPathAndTriangle(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent) {
|
1064 | var indexCompare = taskFrom.index > taskTo.index ? -1 : 1;
|
1065 | var taskToEndPosition = taskTo.y + taskHeight / 2;
|
1066 | var taskFromEndPosition = taskFrom.x2 + arrowIndent * 2;
|
1067 | var taskFromHorizontalOffsetValue = taskFromEndPosition < taskTo.x1 ? "" : "H " + (taskTo.x1 - arrowIndent);
|
1068 | var taskToHorizontalOffsetValue = taskFromEndPosition > taskTo.x1 ? arrowIndent : taskTo.x1 - taskFrom.x2 - arrowIndent;
|
1069 | var path = "M " + taskFrom.x2 + " " + (taskFrom.y + taskHeight / 2) + " \n h " + arrowIndent + " \n v " + indexCompare * rowHeight / 2 + " \n " + taskFromHorizontalOffsetValue + "\n V " + taskToEndPosition + " \n h " + taskToHorizontalOffsetValue;
|
1070 | var trianglePoints = taskTo.x1 + "," + taskToEndPosition + " \n " + (taskTo.x1 - 5) + "," + (taskToEndPosition - 5) + " \n " + (taskTo.x1 - 5) + "," + (taskToEndPosition + 5);
|
1071 | return [path, trianglePoints];
|
1072 | };
|
1073 |
|
1074 | var drownPathAndTriangleRTL = function drownPathAndTriangleRTL(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent) {
|
1075 | var indexCompare = taskFrom.index > taskTo.index ? -1 : 1;
|
1076 | var taskToEndPosition = taskTo.y + taskHeight / 2;
|
1077 | var taskFromEndPosition = taskFrom.x1 - arrowIndent * 2;
|
1078 | var taskFromHorizontalOffsetValue = taskFromEndPosition > taskTo.x2 ? "" : "H " + (taskTo.x2 + arrowIndent);
|
1079 | var taskToHorizontalOffsetValue = taskFromEndPosition < taskTo.x2 ? -arrowIndent : taskTo.x2 - taskFrom.x1 + arrowIndent;
|
1080 | var path = "M " + taskFrom.x1 + " " + (taskFrom.y + taskHeight / 2) + " \n h " + -arrowIndent + " \n v " + indexCompare * rowHeight / 2 + " \n " + taskFromHorizontalOffsetValue + "\n V " + taskToEndPosition + " \n h " + taskToHorizontalOffsetValue;
|
1081 | var trianglePoints = taskTo.x2 + "," + taskToEndPosition + " \n " + (taskTo.x2 + 5) + "," + (taskToEndPosition + 5) + " \n " + (taskTo.x2 + 5) + "," + (taskToEndPosition - 5);
|
1082 | return [path, trianglePoints];
|
1083 | };
|
1084 |
|
1085 | var convertToBarTasks = function convertToBarTasks(tasks, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor) {
|
1086 | var barTasks = tasks.map(function (t, i) {
|
1087 | return convertToBarTask(t, i, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor);
|
1088 | });
|
1089 | barTasks = barTasks.map(function (task) {
|
1090 | var dependencies = task.dependencies || [];
|
1091 |
|
1092 | var _loop = function _loop(j) {
|
1093 | var dependence = barTasks.findIndex(function (value) {
|
1094 | return value.id === dependencies[j];
|
1095 | });
|
1096 | if (dependence !== -1) barTasks[dependence].barChildren.push(task);
|
1097 | };
|
1098 |
|
1099 | for (var j = 0; j < dependencies.length; j++) {
|
1100 | _loop(j);
|
1101 | }
|
1102 |
|
1103 | return task;
|
1104 | });
|
1105 | return barTasks;
|
1106 | };
|
1107 |
|
1108 | var convertToBarTask = function convertToBarTask(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor) {
|
1109 | var barTask;
|
1110 |
|
1111 | switch (task.type) {
|
1112 | case "milestone":
|
1113 | barTask = convertToMilestone(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, milestoneBackgroundColor, milestoneBackgroundSelectedColor);
|
1114 | break;
|
1115 |
|
1116 | case "project":
|
1117 | barTask = convertToBar(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor);
|
1118 | break;
|
1119 |
|
1120 | default:
|
1121 | barTask = convertToBar(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor);
|
1122 | break;
|
1123 | }
|
1124 |
|
1125 | return barTask;
|
1126 | };
|
1127 |
|
1128 | var convertToBar = function convertToBar(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor) {
|
1129 | var x1;
|
1130 | var x2;
|
1131 |
|
1132 | if (rtl) {
|
1133 | x2 = taskXCoordinateRTL(task.start, dates, columnWidth);
|
1134 | x1 = taskXCoordinateRTL(task.end, dates, columnWidth);
|
1135 | } else {
|
1136 | x1 = taskXCoordinate(task.start, dates, columnWidth);
|
1137 | x2 = taskXCoordinate(task.end, dates, columnWidth);
|
1138 | }
|
1139 |
|
1140 | var typeInternal = task.type;
|
1141 |
|
1142 | if (typeInternal === "task" && x2 - x1 < handleWidth * 2) {
|
1143 | typeInternal = "smalltask";
|
1144 | x2 = x1 + handleWidth * 2;
|
1145 | }
|
1146 |
|
1147 | var _progressWithByParams = progressWithByParams(x1, x2, task.progress, rtl),
|
1148 | progressWidth = _progressWithByParams[0],
|
1149 | progressX = _progressWithByParams[1];
|
1150 |
|
1151 | var y = taskYCoordinate(index, rowHeight, taskHeight);
|
1152 | var hideChildren = task.type === "project" ? task.hideChildren : undefined;
|
1153 |
|
1154 | var styles = _extends({
|
1155 | backgroundColor: barBackgroundColor,
|
1156 | backgroundSelectedColor: barBackgroundSelectedColor,
|
1157 | progressColor: barProgressColor,
|
1158 | progressSelectedColor: barProgressSelectedColor
|
1159 | }, task.styles);
|
1160 |
|
1161 | return _extends({}, task, {
|
1162 | typeInternal: typeInternal,
|
1163 | x1: x1,
|
1164 | x2: x2,
|
1165 | y: y,
|
1166 | index: index,
|
1167 | progressX: progressX,
|
1168 | progressWidth: progressWidth,
|
1169 | barCornerRadius: barCornerRadius,
|
1170 | handleWidth: handleWidth,
|
1171 | hideChildren: hideChildren,
|
1172 | height: taskHeight,
|
1173 | barChildren: [],
|
1174 | styles: styles
|
1175 | });
|
1176 | };
|
1177 |
|
1178 | var convertToMilestone = function convertToMilestone(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, milestoneBackgroundColor, milestoneBackgroundSelectedColor) {
|
1179 | var x = taskXCoordinate(task.start, dates, columnWidth);
|
1180 | var y = taskYCoordinate(index, rowHeight, taskHeight);
|
1181 | var x1 = x - taskHeight * 0.5;
|
1182 | var x2 = x + taskHeight * 0.5;
|
1183 | var rotatedHeight = taskHeight / 1.414;
|
1184 |
|
1185 | var styles = _extends({
|
1186 | backgroundColor: milestoneBackgroundColor,
|
1187 | backgroundSelectedColor: milestoneBackgroundSelectedColor,
|
1188 | progressColor: "",
|
1189 | progressSelectedColor: ""
|
1190 | }, task.styles);
|
1191 |
|
1192 | return _extends({}, task, {
|
1193 | end: task.start,
|
1194 | x1: x1,
|
1195 | x2: x2,
|
1196 | y: y,
|
1197 | index: index,
|
1198 | progressX: 0,
|
1199 | progressWidth: 0,
|
1200 | barCornerRadius: barCornerRadius,
|
1201 | handleWidth: handleWidth,
|
1202 | typeInternal: task.type,
|
1203 | progress: 0,
|
1204 | height: rotatedHeight,
|
1205 | hideChildren: undefined,
|
1206 | barChildren: [],
|
1207 | styles: styles
|
1208 | });
|
1209 | };
|
1210 |
|
1211 | var taskXCoordinate = function taskXCoordinate(xDate, dates, columnWidth) {
|
1212 | var index = dates.findIndex(function (d) {
|
1213 | return d.getTime() >= xDate.getTime();
|
1214 | }) - 1;
|
1215 | var remainderMillis = xDate.getTime() - dates[index].getTime();
|
1216 | var percentOfInterval = remainderMillis / (dates[index + 1].getTime() - dates[index].getTime());
|
1217 | var x = index * columnWidth + percentOfInterval * columnWidth;
|
1218 | return x;
|
1219 | };
|
1220 |
|
1221 | var taskXCoordinateRTL = function taskXCoordinateRTL(xDate, dates, columnWidth) {
|
1222 | var x = taskXCoordinate(xDate, dates, columnWidth);
|
1223 | x += columnWidth;
|
1224 | return x;
|
1225 | };
|
1226 |
|
1227 | var taskYCoordinate = function taskYCoordinate(index, rowHeight, taskHeight) {
|
1228 | var y = index * rowHeight + (rowHeight - taskHeight) / 2;
|
1229 | return y;
|
1230 | };
|
1231 |
|
1232 | var progressWithByParams = function progressWithByParams(taskX1, taskX2, progress, rtl) {
|
1233 | var progressWidth = (taskX2 - taskX1) * progress * 0.01;
|
1234 | var progressX;
|
1235 |
|
1236 | if (rtl) {
|
1237 | progressX = taskX2 - progressWidth;
|
1238 | } else {
|
1239 | progressX = taskX1;
|
1240 | }
|
1241 |
|
1242 | return [progressWidth, progressX];
|
1243 | };
|
1244 |
|
1245 | var progressByX = function progressByX(x, task) {
|
1246 | if (x >= task.x2) return 100;else if (x <= task.x1) return 0;else {
|
1247 | var barWidth = task.x2 - task.x1;
|
1248 | var progressPercent = Math.round((x - task.x1) * 100 / barWidth);
|
1249 | return progressPercent;
|
1250 | }
|
1251 | };
|
1252 |
|
1253 | var progressByXRTL = function progressByXRTL(x, task) {
|
1254 | if (x >= task.x2) return 0;else if (x <= task.x1) return 100;else {
|
1255 | var barWidth = task.x2 - task.x1;
|
1256 | var progressPercent = Math.round((task.x2 - x) * 100 / barWidth);
|
1257 | return progressPercent;
|
1258 | }
|
1259 | };
|
1260 |
|
1261 | var getProgressPoint = function getProgressPoint(progressX, taskY, taskHeight) {
|
1262 | var point = [progressX - 5, taskY + taskHeight, progressX + 5, taskY + taskHeight, progressX, taskY + taskHeight - 8.66];
|
1263 | return point.join(",");
|
1264 | };
|
1265 |
|
1266 | var startByX = function startByX(x, xStep, task) {
|
1267 | if (x >= task.x2 - task.handleWidth * 2) {
|
1268 | x = task.x2 - task.handleWidth * 2;
|
1269 | }
|
1270 |
|
1271 | var steps = Math.round((x - task.x1) / xStep);
|
1272 | var additionalXValue = steps * xStep;
|
1273 | var newX = task.x1 + additionalXValue;
|
1274 | return newX;
|
1275 | };
|
1276 |
|
1277 | var endByX = function endByX(x, xStep, task) {
|
1278 | if (x <= task.x1 + task.handleWidth * 2) {
|
1279 | x = task.x1 + task.handleWidth * 2;
|
1280 | }
|
1281 |
|
1282 | var steps = Math.round((x - task.x2) / xStep);
|
1283 | var additionalXValue = steps * xStep;
|
1284 | var newX = task.x2 + additionalXValue;
|
1285 | return newX;
|
1286 | };
|
1287 |
|
1288 | var moveByX = function moveByX(x, xStep, task) {
|
1289 | var steps = Math.round((x - task.x1) / xStep);
|
1290 | var additionalXValue = steps * xStep;
|
1291 | var newX1 = task.x1 + additionalXValue;
|
1292 | var newX2 = newX1 + task.x2 - task.x1;
|
1293 | return [newX1, newX2];
|
1294 | };
|
1295 |
|
1296 | var dateByX = function dateByX(x, taskX, taskDate, xStep, timeStep) {
|
1297 | var newDate = new Date((x - taskX) / xStep * timeStep + taskDate.getTime());
|
1298 | newDate = new Date(newDate.getTime() + (newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 60000);
|
1299 | return newDate;
|
1300 | };
|
1301 |
|
1302 | var handleTaskBySVGMouseEvent = function handleTaskBySVGMouseEvent(svgX, action, selectedTask, xStep, timeStep, initEventX1Delta, rtl) {
|
1303 | var result;
|
1304 |
|
1305 | switch (selectedTask.type) {
|
1306 | case "milestone":
|
1307 | result = handleTaskBySVGMouseEventForMilestone(svgX, action, selectedTask, xStep, timeStep, initEventX1Delta);
|
1308 | break;
|
1309 |
|
1310 | default:
|
1311 | result = handleTaskBySVGMouseEventForBar(svgX, action, selectedTask, xStep, timeStep, initEventX1Delta, rtl);
|
1312 | break;
|
1313 | }
|
1314 |
|
1315 | return result;
|
1316 | };
|
1317 |
|
1318 | var handleTaskBySVGMouseEventForBar = function handleTaskBySVGMouseEventForBar(svgX, action, selectedTask, xStep, timeStep, initEventX1Delta, rtl) {
|
1319 | var changedTask = _extends({}, selectedTask);
|
1320 |
|
1321 | var isChanged = false;
|
1322 |
|
1323 | switch (action) {
|
1324 | case "progress":
|
1325 | if (rtl) {
|
1326 | changedTask.progress = progressByXRTL(svgX, selectedTask);
|
1327 | } else {
|
1328 | changedTask.progress = progressByX(svgX, selectedTask);
|
1329 | }
|
1330 |
|
1331 | isChanged = changedTask.progress !== selectedTask.progress;
|
1332 |
|
1333 | if (isChanged) {
|
1334 | var _progressWithByParams2 = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl),
|
1335 | progressWidth = _progressWithByParams2[0],
|
1336 | progressX = _progressWithByParams2[1];
|
1337 |
|
1338 | changedTask.progressWidth = progressWidth;
|
1339 | changedTask.progressX = progressX;
|
1340 | }
|
1341 |
|
1342 | break;
|
1343 |
|
1344 | case "start":
|
1345 | {
|
1346 | var newX1 = startByX(svgX, xStep, selectedTask);
|
1347 | changedTask.x1 = newX1;
|
1348 | isChanged = changedTask.x1 !== selectedTask.x1;
|
1349 |
|
1350 | if (isChanged) {
|
1351 | if (rtl) {
|
1352 | changedTask.end = dateByX(newX1, selectedTask.x1, selectedTask.end, xStep, timeStep);
|
1353 | } else {
|
1354 | changedTask.start = dateByX(newX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
|
1355 | }
|
1356 |
|
1357 | var _progressWithByParams3 = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl),
|
1358 | _progressWidth = _progressWithByParams3[0],
|
1359 | _progressX = _progressWithByParams3[1];
|
1360 |
|
1361 | changedTask.progressWidth = _progressWidth;
|
1362 | changedTask.progressX = _progressX;
|
1363 | }
|
1364 |
|
1365 | break;
|
1366 | }
|
1367 |
|
1368 | case "end":
|
1369 | {
|
1370 | var newX2 = endByX(svgX, xStep, selectedTask);
|
1371 | changedTask.x2 = newX2;
|
1372 | isChanged = changedTask.x2 !== selectedTask.x2;
|
1373 |
|
1374 | if (isChanged) {
|
1375 | if (rtl) {
|
1376 | changedTask.start = dateByX(newX2, selectedTask.x2, selectedTask.start, xStep, timeStep);
|
1377 | } else {
|
1378 | changedTask.end = dateByX(newX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
|
1379 | }
|
1380 |
|
1381 | var _progressWithByParams4 = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl),
|
1382 | _progressWidth2 = _progressWithByParams4[0],
|
1383 | _progressX2 = _progressWithByParams4[1];
|
1384 |
|
1385 | changedTask.progressWidth = _progressWidth2;
|
1386 | changedTask.progressX = _progressX2;
|
1387 | }
|
1388 |
|
1389 | break;
|
1390 | }
|
1391 |
|
1392 | case "move":
|
1393 | {
|
1394 | var _moveByX = moveByX(svgX - initEventX1Delta, xStep, selectedTask),
|
1395 | newMoveX1 = _moveByX[0],
|
1396 | newMoveX2 = _moveByX[1];
|
1397 |
|
1398 | isChanged = newMoveX1 !== selectedTask.x1;
|
1399 |
|
1400 | if (isChanged) {
|
1401 | changedTask.start = dateByX(newMoveX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
|
1402 | changedTask.end = dateByX(newMoveX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
|
1403 | changedTask.x1 = newMoveX1;
|
1404 | changedTask.x2 = newMoveX2;
|
1405 |
|
1406 | var _progressWithByParams5 = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl),
|
1407 | _progressWidth3 = _progressWithByParams5[0],
|
1408 | _progressX3 = _progressWithByParams5[1];
|
1409 |
|
1410 | changedTask.progressWidth = _progressWidth3;
|
1411 | changedTask.progressX = _progressX3;
|
1412 | }
|
1413 |
|
1414 | break;
|
1415 | }
|
1416 | }
|
1417 |
|
1418 | return {
|
1419 | isChanged: isChanged,
|
1420 | changedTask: changedTask
|
1421 | };
|
1422 | };
|
1423 |
|
1424 | var handleTaskBySVGMouseEventForMilestone = function handleTaskBySVGMouseEventForMilestone(svgX, action, selectedTask, xStep, timeStep, initEventX1Delta) {
|
1425 | var changedTask = _extends({}, selectedTask);
|
1426 |
|
1427 | var isChanged = false;
|
1428 |
|
1429 | switch (action) {
|
1430 | case "move":
|
1431 | {
|
1432 | var _moveByX2 = moveByX(svgX - initEventX1Delta, xStep, selectedTask),
|
1433 | newMoveX1 = _moveByX2[0],
|
1434 | newMoveX2 = _moveByX2[1];
|
1435 |
|
1436 | isChanged = newMoveX1 !== selectedTask.x1;
|
1437 |
|
1438 | if (isChanged) {
|
1439 | changedTask.start = dateByX(newMoveX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
|
1440 | changedTask.end = changedTask.start;
|
1441 | changedTask.x1 = newMoveX1;
|
1442 | changedTask.x2 = newMoveX2;
|
1443 | }
|
1444 |
|
1445 | break;
|
1446 | }
|
1447 | }
|
1448 |
|
1449 | return {
|
1450 | isChanged: isChanged,
|
1451 | changedTask: changedTask
|
1452 | };
|
1453 | };
|
1454 |
|
1455 | function isKeyboardEvent(event) {
|
1456 | return event.key !== undefined;
|
1457 | }
|
1458 | function removeHiddenTasks(tasks) {
|
1459 | var groupedTasks = tasks.filter(function (t) {
|
1460 | return t.hideChildren && t.type === "project";
|
1461 | });
|
1462 |
|
1463 | if (groupedTasks.length > 0) {
|
1464 | var _loop = function _loop(i) {
|
1465 | var groupedTask = groupedTasks[i];
|
1466 | var children = getChildren(tasks, groupedTask);
|
1467 | tasks = tasks.filter(function (t) {
|
1468 | return children.indexOf(t) === -1;
|
1469 | });
|
1470 | };
|
1471 |
|
1472 | for (var i = 0; groupedTasks.length > i; i++) {
|
1473 | _loop(i);
|
1474 | }
|
1475 | }
|
1476 |
|
1477 | return tasks;
|
1478 | }
|
1479 |
|
1480 | function getChildren(taskList, task) {
|
1481 | var tasks = [];
|
1482 |
|
1483 | if (task.type !== "project") {
|
1484 | tasks = taskList.filter(function (t) {
|
1485 | return t.dependencies && t.dependencies.indexOf(task.id) !== -1;
|
1486 | });
|
1487 | } else {
|
1488 | tasks = taskList.filter(function (t) {
|
1489 | return t.project && t.project === task.id;
|
1490 | });
|
1491 | }
|
1492 |
|
1493 | var taskChildren = [];
|
1494 | tasks.forEach(function (t) {
|
1495 | taskChildren.push.apply(taskChildren, getChildren(taskList, t));
|
1496 | });
|
1497 | tasks = tasks.concat(tasks, taskChildren);
|
1498 | return tasks;
|
1499 | }
|
1500 |
|
1501 | var sortTasks = function sortTasks(taskA, taskB) {
|
1502 | var orderA = taskA.displayOrder || Number.MAX_VALUE;
|
1503 | var orderB = taskB.displayOrder || Number.MAX_VALUE;
|
1504 |
|
1505 | if (orderA > orderB) {
|
1506 | return 1;
|
1507 | } else if (orderA < orderB) {
|
1508 | return -1;
|
1509 | } else {
|
1510 | return 0;
|
1511 | }
|
1512 | };
|
1513 |
|
1514 | var styles$6 = {"barWrapper":"_KxSXS","barHandle":"_3w_5u","barBackground":"_31ERP"};
|
1515 |
|
1516 | var BarDisplay = function BarDisplay(_ref) {
|
1517 | var x = _ref.x,
|
1518 | y = _ref.y,
|
1519 | width = _ref.width,
|
1520 | height = _ref.height,
|
1521 | isSelected = _ref.isSelected,
|
1522 | progressX = _ref.progressX,
|
1523 | progressWidth = _ref.progressWidth,
|
1524 | barCornerRadius = _ref.barCornerRadius,
|
1525 | styles = _ref.styles,
|
1526 | onMouseDown = _ref.onMouseDown;
|
1527 |
|
1528 | var getProcessColor = function getProcessColor() {
|
1529 | return isSelected ? styles.progressSelectedColor : styles.progressColor;
|
1530 | };
|
1531 |
|
1532 | var getBarColor = function getBarColor() {
|
1533 | return isSelected ? styles.backgroundSelectedColor : styles.backgroundColor;
|
1534 | };
|
1535 |
|
1536 | return React__default.createElement("g", {
|
1537 | onMouseDown: onMouseDown
|
1538 | }, React__default.createElement("rect", {
|
1539 | x: x,
|
1540 | width: width,
|
1541 | y: y,
|
1542 | height: height,
|
1543 | ry: barCornerRadius,
|
1544 | rx: barCornerRadius,
|
1545 | fill: getBarColor(),
|
1546 | className: styles$6.barBackground
|
1547 | }), React__default.createElement("rect", {
|
1548 | x: progressX,
|
1549 | width: progressWidth,
|
1550 | y: y,
|
1551 | height: height,
|
1552 | ry: barCornerRadius,
|
1553 | rx: barCornerRadius,
|
1554 | fill: getProcessColor()
|
1555 | }));
|
1556 | };
|
1557 |
|
1558 | var BarDateHandle = function BarDateHandle(_ref) {
|
1559 | var x = _ref.x,
|
1560 | y = _ref.y,
|
1561 | width = _ref.width,
|
1562 | height = _ref.height,
|
1563 | barCornerRadius = _ref.barCornerRadius,
|
1564 | onMouseDown = _ref.onMouseDown;
|
1565 | return React__default.createElement("rect", {
|
1566 | x: x,
|
1567 | y: y,
|
1568 | width: width,
|
1569 | height: height,
|
1570 | className: styles$6.barHandle,
|
1571 | ry: barCornerRadius,
|
1572 | rx: barCornerRadius,
|
1573 | onMouseDown: onMouseDown
|
1574 | });
|
1575 | };
|
1576 |
|
1577 | var BarProgressHandle = function BarProgressHandle(_ref) {
|
1578 | var progressPoint = _ref.progressPoint,
|
1579 | onMouseDown = _ref.onMouseDown;
|
1580 | return React__default.createElement("polygon", {
|
1581 | className: styles$6.barHandle,
|
1582 | points: progressPoint,
|
1583 | onMouseDown: onMouseDown
|
1584 | });
|
1585 | };
|
1586 |
|
1587 | var Bar = function Bar(_ref) {
|
1588 | var task = _ref.task,
|
1589 | isProgressChangeable = _ref.isProgressChangeable,
|
1590 | isDateChangeable = _ref.isDateChangeable,
|
1591 | rtl = _ref.rtl,
|
1592 | onEventStart = _ref.onEventStart,
|
1593 | isSelected = _ref.isSelected;
|
1594 | var progressPoint = getProgressPoint(+!rtl * task.progressWidth + task.progressX, task.y, task.height);
|
1595 | var handleHeight = task.height - 2;
|
1596 | return React__default.createElement("g", {
|
1597 | className: styles$6.barWrapper,
|
1598 | tabIndex: 0
|
1599 | }, React__default.createElement(BarDisplay, {
|
1600 | x: task.x1,
|
1601 | y: task.y,
|
1602 | width: task.x2 - task.x1,
|
1603 | height: task.height,
|
1604 | progressX: task.progressX,
|
1605 | progressWidth: task.progressWidth,
|
1606 | barCornerRadius: task.barCornerRadius,
|
1607 | styles: task.styles,
|
1608 | isSelected: isSelected,
|
1609 | onMouseDown: function onMouseDown(e) {
|
1610 | isDateChangeable && onEventStart("move", task, e);
|
1611 | }
|
1612 | }), React__default.createElement("g", {
|
1613 | className: "handleGroup"
|
1614 | }, isDateChangeable && React__default.createElement("g", null, React__default.createElement(BarDateHandle, {
|
1615 | x: task.x1 + 1,
|
1616 | y: task.y + 1,
|
1617 | width: task.handleWidth,
|
1618 | height: handleHeight,
|
1619 | barCornerRadius: task.barCornerRadius,
|
1620 | onMouseDown: function onMouseDown(e) {
|
1621 | onEventStart("start", task, e);
|
1622 | }
|
1623 | }), React__default.createElement(BarDateHandle, {
|
1624 | x: task.x2 - task.handleWidth - 1,
|
1625 | y: task.y + 1,
|
1626 | width: task.handleWidth,
|
1627 | height: handleHeight,
|
1628 | barCornerRadius: task.barCornerRadius,
|
1629 | onMouseDown: function onMouseDown(e) {
|
1630 | onEventStart("end", task, e);
|
1631 | }
|
1632 | })), isProgressChangeable && React__default.createElement(BarProgressHandle, {
|
1633 | progressPoint: progressPoint,
|
1634 | onMouseDown: function onMouseDown(e) {
|
1635 | onEventStart("progress", task, e);
|
1636 | }
|
1637 | })));
|
1638 | };
|
1639 |
|
1640 | var BarSmall = function BarSmall(_ref) {
|
1641 | var task = _ref.task,
|
1642 | isProgressChangeable = _ref.isProgressChangeable,
|
1643 | isDateChangeable = _ref.isDateChangeable,
|
1644 | onEventStart = _ref.onEventStart,
|
1645 | isSelected = _ref.isSelected;
|
1646 | var progressPoint = getProgressPoint(task.progressWidth + task.x1, task.y, task.height);
|
1647 | return React__default.createElement("g", {
|
1648 | className: styles$6.barWrapper,
|
1649 | tabIndex: 0
|
1650 | }, React__default.createElement(BarDisplay, {
|
1651 | x: task.x1,
|
1652 | y: task.y,
|
1653 | width: task.x2 - task.x1,
|
1654 | height: task.height,
|
1655 | progressX: task.progressX,
|
1656 | progressWidth: task.progressWidth,
|
1657 | barCornerRadius: task.barCornerRadius,
|
1658 | styles: task.styles,
|
1659 | isSelected: isSelected,
|
1660 | onMouseDown: function onMouseDown(e) {
|
1661 | isDateChangeable && onEventStart("move", task, e);
|
1662 | }
|
1663 | }), React__default.createElement("g", {
|
1664 | className: "handleGroup"
|
1665 | }, isProgressChangeable && React__default.createElement(BarProgressHandle, {
|
1666 | progressPoint: progressPoint,
|
1667 | onMouseDown: function onMouseDown(e) {
|
1668 | onEventStart("progress", task, e);
|
1669 | }
|
1670 | })));
|
1671 | };
|
1672 |
|
1673 | var styles$7 = {"milestoneWrapper":"_RRr13","milestoneBackground":"_2P2B1"};
|
1674 |
|
1675 | var Milestone = function Milestone(_ref) {
|
1676 | var task = _ref.task,
|
1677 | isDateChangeable = _ref.isDateChangeable,
|
1678 | onEventStart = _ref.onEventStart,
|
1679 | isSelected = _ref.isSelected;
|
1680 | var transform = "rotate(45 " + (task.x1 + task.height * 0.356) + " \n " + (task.y + task.height * 0.85) + ")";
|
1681 |
|
1682 | var getBarColor = function getBarColor() {
|
1683 | return isSelected ? task.styles.backgroundSelectedColor : task.styles.backgroundColor;
|
1684 | };
|
1685 |
|
1686 | return React__default.createElement("g", {
|
1687 | tabIndex: 0,
|
1688 | className: styles$7.milestoneWrapper
|
1689 | }, React__default.createElement("rect", {
|
1690 | fill: getBarColor(),
|
1691 | x: task.x1,
|
1692 | width: task.height,
|
1693 | y: task.y,
|
1694 | height: task.height,
|
1695 | rx: task.barCornerRadius,
|
1696 | ry: task.barCornerRadius,
|
1697 | transform: transform,
|
1698 | className: styles$7.milestoneBackground,
|
1699 | onMouseDown: function onMouseDown(e) {
|
1700 | isDateChangeable && onEventStart("move", task, e);
|
1701 | }
|
1702 | }));
|
1703 | };
|
1704 |
|
1705 | var styles$8 = {"projectWrapper":"_1KJ6x","projectBackground":"_2RbVy","projectTop":"_2pZMF"};
|
1706 |
|
1707 | var Project = function Project(_ref) {
|
1708 | var task = _ref.task,
|
1709 | isSelected = _ref.isSelected;
|
1710 | var barColor = isSelected ? task.styles.backgroundSelectedColor : task.styles.backgroundColor;
|
1711 | var processColor = isSelected ? task.styles.progressSelectedColor : task.styles.progressColor;
|
1712 | var projectWith = task.x2 - task.x1;
|
1713 | 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(",");
|
1714 | 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(",");
|
1715 | return React__default.createElement("g", {
|
1716 | tabIndex: 0,
|
1717 | className: styles$8.projectWrapper
|
1718 | }, React__default.createElement("rect", {
|
1719 | fill: barColor,
|
1720 | x: task.x1,
|
1721 | width: projectWith,
|
1722 | y: task.y,
|
1723 | height: task.height,
|
1724 | rx: task.barCornerRadius,
|
1725 | ry: task.barCornerRadius,
|
1726 | className: styles$8.projectBackground
|
1727 | }), React__default.createElement("rect", {
|
1728 | x: task.progressX,
|
1729 | width: task.progressWidth,
|
1730 | y: task.y,
|
1731 | height: task.height,
|
1732 | ry: task.barCornerRadius,
|
1733 | rx: task.barCornerRadius,
|
1734 | fill: processColor
|
1735 | }), React__default.createElement("rect", {
|
1736 | fill: barColor,
|
1737 | x: task.x1,
|
1738 | width: projectWith,
|
1739 | y: task.y,
|
1740 | height: task.height / 2,
|
1741 | rx: task.barCornerRadius,
|
1742 | ry: task.barCornerRadius,
|
1743 | className: styles$8.projectTop
|
1744 | }), React__default.createElement("polygon", {
|
1745 | className: styles$8.projectTop,
|
1746 | points: projectLeftTriangle,
|
1747 | fill: barColor
|
1748 | }), React__default.createElement("polygon", {
|
1749 | className: styles$8.projectTop,
|
1750 | points: projectRightTriangle,
|
1751 | fill: barColor
|
1752 | }));
|
1753 | };
|
1754 |
|
1755 | var style = {"barLabel":"_3zRJQ","barLabelOutside":"_3KcaM"};
|
1756 |
|
1757 | var TaskItem = function TaskItem(props) {
|
1758 | var _props = _extends({}, props),
|
1759 | task = _props.task,
|
1760 | arrowIndent = _props.arrowIndent,
|
1761 | isDelete = _props.isDelete,
|
1762 | taskHeight = _props.taskHeight,
|
1763 | isSelected = _props.isSelected,
|
1764 | rtl = _props.rtl,
|
1765 | onEventStart = _props.onEventStart;
|
1766 |
|
1767 | var textRef = React.useRef(null);
|
1768 |
|
1769 | var _useState = React.useState(React__default.createElement("div", null)),
|
1770 | taskItem = _useState[0],
|
1771 | setTaskItem = _useState[1];
|
1772 |
|
1773 | var _useState2 = React.useState(true),
|
1774 | isTextInside = _useState2[0],
|
1775 | setIsTextInside = _useState2[1];
|
1776 |
|
1777 | React.useEffect(function () {
|
1778 | switch (task.typeInternal) {
|
1779 | case "milestone":
|
1780 | setTaskItem(React__default.createElement(Milestone, Object.assign({}, props)));
|
1781 | break;
|
1782 |
|
1783 | case "project":
|
1784 | setTaskItem(React__default.createElement(Project, Object.assign({}, props)));
|
1785 | break;
|
1786 |
|
1787 | case "smalltask":
|
1788 | setTaskItem(React__default.createElement(BarSmall, Object.assign({}, props)));
|
1789 | break;
|
1790 |
|
1791 | default:
|
1792 | setTaskItem(React__default.createElement(Bar, Object.assign({}, props)));
|
1793 | break;
|
1794 | }
|
1795 | }, [task, isSelected]);
|
1796 | React.useEffect(function () {
|
1797 | if (textRef.current) {
|
1798 | setIsTextInside(textRef.current.getBBox().width < task.x2 - task.x1);
|
1799 | }
|
1800 | }, [textRef, task]);
|
1801 |
|
1802 | var getX = function getX() {
|
1803 | var width = task.x2 - task.x1;
|
1804 | var hasChild = task.barChildren.length > 0;
|
1805 |
|
1806 | if (isTextInside) {
|
1807 | return task.x1 + width * 0.5;
|
1808 | }
|
1809 |
|
1810 | if (rtl && textRef.current) {
|
1811 | return task.x1 - textRef.current.getBBox().width - arrowIndent * +hasChild - arrowIndent * 0.2;
|
1812 | } else {
|
1813 | return task.x1 + width + arrowIndent * +hasChild + arrowIndent * 0.2;
|
1814 | }
|
1815 | };
|
1816 |
|
1817 | return React__default.createElement("g", {
|
1818 | onKeyDown: function onKeyDown(e) {
|
1819 | switch (e.key) {
|
1820 | case "Delete":
|
1821 | {
|
1822 | if (isDelete) onEventStart("delete", task, e);
|
1823 | break;
|
1824 | }
|
1825 | }
|
1826 |
|
1827 | e.stopPropagation();
|
1828 | },
|
1829 | onMouseEnter: function onMouseEnter(e) {
|
1830 | onEventStart("mouseenter", task, e);
|
1831 | },
|
1832 | onMouseLeave: function onMouseLeave(e) {
|
1833 | onEventStart("mouseleave", task, e);
|
1834 | },
|
1835 | onDoubleClick: function onDoubleClick(e) {
|
1836 | onEventStart("dblclick", task, e);
|
1837 | },
|
1838 | onClick: function onClick(e) {
|
1839 | onEventStart("click", task, e);
|
1840 | },
|
1841 | onFocus: function onFocus() {
|
1842 | onEventStart("select", task);
|
1843 | }
|
1844 | }, taskItem, React__default.createElement("text", {
|
1845 | x: getX(),
|
1846 | y: task.y + taskHeight * 0.5,
|
1847 | className: isTextInside ? style.barLabel : style.barLabelOutside,
|
1848 | ref: textRef
|
1849 | }, task.name));
|
1850 | };
|
1851 |
|
1852 | var TaskGanttContent = function TaskGanttContent(_ref) {
|
1853 | var _svg$current;
|
1854 |
|
1855 | var tasks = _ref.tasks,
|
1856 | dates = _ref.dates,
|
1857 | ganttEvent = _ref.ganttEvent,
|
1858 | selectedTask = _ref.selectedTask,
|
1859 | rowHeight = _ref.rowHeight,
|
1860 | columnWidth = _ref.columnWidth,
|
1861 | timeStep = _ref.timeStep,
|
1862 | svg = _ref.svg,
|
1863 | taskHeight = _ref.taskHeight,
|
1864 | arrowColor = _ref.arrowColor,
|
1865 | arrowIndent = _ref.arrowIndent,
|
1866 | fontFamily = _ref.fontFamily,
|
1867 | fontSize = _ref.fontSize,
|
1868 | rtl = _ref.rtl,
|
1869 | setGanttEvent = _ref.setGanttEvent,
|
1870 | setFailedTask = _ref.setFailedTask,
|
1871 | setSelectedTask = _ref.setSelectedTask,
|
1872 | onDateChange = _ref.onDateChange,
|
1873 | onProgressChange = _ref.onProgressChange,
|
1874 | onDoubleClick = _ref.onDoubleClick,
|
1875 | onClick = _ref.onClick,
|
1876 | onDelete = _ref.onDelete;
|
1877 | var point = svg === null || svg === void 0 ? void 0 : (_svg$current = svg.current) === null || _svg$current === void 0 ? void 0 : _svg$current.createSVGPoint();
|
1878 |
|
1879 | var _useState = React.useState(0),
|
1880 | xStep = _useState[0],
|
1881 | setXStep = _useState[1];
|
1882 |
|
1883 | var _useState2 = React.useState(0),
|
1884 | initEventX1Delta = _useState2[0],
|
1885 | setInitEventX1Delta = _useState2[1];
|
1886 |
|
1887 | var _useState3 = React.useState(false),
|
1888 | isMoving = _useState3[0],
|
1889 | setIsMoving = _useState3[1];
|
1890 |
|
1891 | React.useEffect(function () {
|
1892 | var dateDelta = dates[1].getTime() - dates[0].getTime() - dates[1].getTimezoneOffset() * 60 * 1000 + dates[0].getTimezoneOffset() * 60 * 1000;
|
1893 | var newXStep = timeStep * columnWidth / dateDelta;
|
1894 | setXStep(newXStep);
|
1895 | }, [columnWidth, dates, timeStep]);
|
1896 | React.useEffect(function () {
|
1897 | var handleMouseMove = function handleMouseMove(event) {
|
1898 | try {
|
1899 | var _svg$current$getScree;
|
1900 |
|
1901 | if (!ganttEvent.changedTask || !point || !(svg !== null && svg !== void 0 && svg.current)) return Promise.resolve();
|
1902 | event.preventDefault();
|
1903 | point.x = event.clientX;
|
1904 | 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());
|
1905 |
|
1906 | var _handleTaskBySVGMouse = handleTaskBySVGMouseEvent(cursor.x, ganttEvent.action, ganttEvent.changedTask, xStep, timeStep, initEventX1Delta, rtl),
|
1907 | isChanged = _handleTaskBySVGMouse.isChanged,
|
1908 | changedTask = _handleTaskBySVGMouse.changedTask;
|
1909 |
|
1910 | if (isChanged) {
|
1911 | setGanttEvent({
|
1912 | action: ganttEvent.action,
|
1913 | changedTask: changedTask
|
1914 | });
|
1915 | }
|
1916 |
|
1917 | return Promise.resolve();
|
1918 | } catch (e) {
|
1919 | return Promise.reject(e);
|
1920 | }
|
1921 | };
|
1922 |
|
1923 | var handleMouseUp = function handleMouseUp(event) {
|
1924 | try {
|
1925 | var _svg$current$getScree2;
|
1926 |
|
1927 | var _temp6 = function _temp6() {
|
1928 | if (!operationSuccess) {
|
1929 | setFailedTask(originalSelectedTask);
|
1930 | }
|
1931 | };
|
1932 |
|
1933 | var action = ganttEvent.action,
|
1934 | originalSelectedTask = ganttEvent.originalSelectedTask,
|
1935 | changedTask = ganttEvent.changedTask;
|
1936 | if (!changedTask || !point || !(svg !== null && svg !== void 0 && svg.current) || !originalSelectedTask) return Promise.resolve();
|
1937 | event.preventDefault();
|
1938 | point.x = event.clientX;
|
1939 | 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());
|
1940 |
|
1941 | var _handleTaskBySVGMouse2 = handleTaskBySVGMouseEvent(cursor.x, action, changedTask, xStep, timeStep, initEventX1Delta, rtl),
|
1942 | newChangedTask = _handleTaskBySVGMouse2.changedTask;
|
1943 |
|
1944 | var isNotLikeOriginal = originalSelectedTask.start !== newChangedTask.start || originalSelectedTask.end !== newChangedTask.end || originalSelectedTask.progress !== newChangedTask.progress;
|
1945 | svg.current.removeEventListener("mousemove", handleMouseMove);
|
1946 | svg.current.removeEventListener("mouseup", handleMouseUp);
|
1947 | setGanttEvent({
|
1948 | action: ""
|
1949 | });
|
1950 | setIsMoving(false);
|
1951 | var operationSuccess = true;
|
1952 |
|
1953 | var _temp7 = function () {
|
1954 | if ((action === "move" || action === "end" || action === "start") && onDateChange && isNotLikeOriginal) {
|
1955 | var _temp8 = _catch(function () {
|
1956 | return Promise.resolve(onDateChange(newChangedTask, newChangedTask.barChildren)).then(function (result) {
|
1957 | if (result !== undefined) {
|
1958 | operationSuccess = result;
|
1959 | }
|
1960 | });
|
1961 | }, function () {
|
1962 | operationSuccess = false;
|
1963 | });
|
1964 |
|
1965 | if (_temp8 && _temp8.then) return _temp8.then(function () {});
|
1966 | } else {
|
1967 | var _temp9 = function () {
|
1968 | if (onProgressChange && isNotLikeOriginal) {
|
1969 | var _temp10 = _catch(function () {
|
1970 | return Promise.resolve(onProgressChange(newChangedTask, newChangedTask.barChildren)).then(function (result) {
|
1971 | if (result !== undefined) {
|
1972 | operationSuccess = result;
|
1973 | }
|
1974 | });
|
1975 | }, function () {
|
1976 | operationSuccess = false;
|
1977 | });
|
1978 |
|
1979 | if (_temp10 && _temp10.then) return _temp10.then(function () {});
|
1980 | }
|
1981 | }();
|
1982 |
|
1983 | if (_temp9 && _temp9.then) return _temp9.then(function () {});
|
1984 | }
|
1985 | }();
|
1986 |
|
1987 | return Promise.resolve(_temp7 && _temp7.then ? _temp7.then(_temp6) : _temp6(_temp7));
|
1988 | } catch (e) {
|
1989 | return Promise.reject(e);
|
1990 | }
|
1991 | };
|
1992 |
|
1993 | if (!isMoving && (ganttEvent.action === "move" || ganttEvent.action === "end" || ganttEvent.action === "start" || ganttEvent.action === "progress") && svg !== null && svg !== void 0 && svg.current) {
|
1994 | svg.current.addEventListener("mousemove", handleMouseMove);
|
1995 | svg.current.addEventListener("mouseup", handleMouseUp);
|
1996 | setIsMoving(true);
|
1997 | }
|
1998 | }, [ganttEvent, xStep, initEventX1Delta, onProgressChange, timeStep, onDateChange, svg, isMoving, point, rtl, setFailedTask, setGanttEvent]);
|
1999 |
|
2000 | var handleBarEventStart = function handleBarEventStart(action, task, event) {
|
2001 | try {
|
2002 | return Promise.resolve(function () {
|
2003 | if (!event) {
|
2004 | if (action === "select") {
|
2005 | setSelectedTask(task.id);
|
2006 | }
|
2007 | } else return function () {
|
2008 | if (isKeyboardEvent(event)) {
|
2009 | var _temp14 = function () {
|
2010 | if (action === "delete") {
|
2011 | var _temp15 = function () {
|
2012 | if (onDelete) {
|
2013 | var _temp16 = _catch(function () {
|
2014 | return Promise.resolve(onDelete(task)).then(function (result) {
|
2015 | if (result !== undefined && result) {
|
2016 | setGanttEvent({
|
2017 | action: action,
|
2018 | changedTask: task
|
2019 | });
|
2020 | }
|
2021 | });
|
2022 | }, function (error) {
|
2023 | console.error("Error on Delete. " + error);
|
2024 | });
|
2025 |
|
2026 | if (_temp16 && _temp16.then) return _temp16.then(function () {});
|
2027 | }
|
2028 | }();
|
2029 |
|
2030 | if (_temp15 && _temp15.then) return _temp15.then(function () {});
|
2031 | }
|
2032 | }();
|
2033 |
|
2034 | if (_temp14 && _temp14.then) return _temp14.then(function () {});
|
2035 | } else if (action === "mouseenter") {
|
2036 | if (!ganttEvent.action) {
|
2037 | setGanttEvent({
|
2038 | action: action,
|
2039 | changedTask: task,
|
2040 | originalSelectedTask: task
|
2041 | });
|
2042 | }
|
2043 | } else if (action === "mouseleave") {
|
2044 | if (ganttEvent.action === "mouseenter") {
|
2045 | setGanttEvent({
|
2046 | action: ""
|
2047 | });
|
2048 | }
|
2049 | } else if (action === "dblclick") {
|
2050 | !!onDoubleClick && onDoubleClick(task);
|
2051 | } else if (action === "click") {
|
2052 | !!onClick && onClick(task);
|
2053 | } else if (action === "move") {
|
2054 | var _svg$current$getScree3;
|
2055 |
|
2056 | if (!(svg !== null && svg !== void 0 && svg.current) || !point) return;
|
2057 | point.x = event.clientX;
|
2058 | var cursor = point.matrixTransform((_svg$current$getScree3 = svg.current.getScreenCTM()) === null || _svg$current$getScree3 === void 0 ? void 0 : _svg$current$getScree3.inverse());
|
2059 | setInitEventX1Delta(cursor.x - task.x1);
|
2060 | setGanttEvent({
|
2061 | action: action,
|
2062 | changedTask: task,
|
2063 | originalSelectedTask: task
|
2064 | });
|
2065 | } else {
|
2066 | setGanttEvent({
|
2067 | action: action,
|
2068 | changedTask: task,
|
2069 | originalSelectedTask: task
|
2070 | });
|
2071 | }
|
2072 | }();
|
2073 | }());
|
2074 | } catch (e) {
|
2075 | return Promise.reject(e);
|
2076 | }
|
2077 | };
|
2078 |
|
2079 | return React__default.createElement("g", {
|
2080 | className: "content"
|
2081 | }, React__default.createElement("g", {
|
2082 | className: "arrows",
|
2083 | fill: arrowColor,
|
2084 | stroke: arrowColor
|
2085 | }, tasks.map(function (task) {
|
2086 | return task.barChildren.map(function (child) {
|
2087 | return React__default.createElement(Arrow, {
|
2088 | key: "Arrow from " + task.id + " to " + tasks[child.index].id,
|
2089 | taskFrom: task,
|
2090 | taskTo: tasks[child.index],
|
2091 | rowHeight: rowHeight,
|
2092 | taskHeight: taskHeight,
|
2093 | arrowIndent: arrowIndent,
|
2094 | rtl: rtl
|
2095 | });
|
2096 | });
|
2097 | })), React__default.createElement("g", {
|
2098 | className: "bar",
|
2099 | fontFamily: fontFamily,
|
2100 | fontSize: fontSize
|
2101 | }, tasks.map(function (task) {
|
2102 | return React__default.createElement(TaskItem, {
|
2103 | task: task,
|
2104 | arrowIndent: arrowIndent,
|
2105 | taskHeight: taskHeight,
|
2106 | isProgressChangeable: !!onProgressChange && !task.isDisabled,
|
2107 | isDateChangeable: !!onDateChange && !task.isDisabled,
|
2108 | isDelete: !task.isDisabled,
|
2109 | onEventStart: handleBarEventStart,
|
2110 | key: task.id,
|
2111 | isSelected: !!selectedTask && task.id === selectedTask.id,
|
2112 | rtl: rtl
|
2113 | });
|
2114 | })));
|
2115 | };
|
2116 |
|
2117 | var styles$9 = {"ganttVerticalContainer":"_CZjuD","horizontalContainer":"_2B2zv","wrapper":"_3eULf"};
|
2118 |
|
2119 | var TaskGantt = function TaskGantt(_ref) {
|
2120 | var gridProps = _ref.gridProps,
|
2121 | calendarProps = _ref.calendarProps,
|
2122 | barProps = _ref.barProps,
|
2123 | ganttHeight = _ref.ganttHeight,
|
2124 | scrollY = _ref.scrollY,
|
2125 | scrollX = _ref.scrollX;
|
2126 | var ganttSVGRef = React.useRef(null);
|
2127 | var horizontalContainerRef = React.useRef(null);
|
2128 | var verticalGanttContainerRef = React.useRef(null);
|
2129 |
|
2130 | var newBarProps = _extends({}, barProps, {
|
2131 | svg: ganttSVGRef
|
2132 | });
|
2133 |
|
2134 | React.useEffect(function () {
|
2135 | if (horizontalContainerRef.current) {
|
2136 | horizontalContainerRef.current.scrollTop = scrollY;
|
2137 | }
|
2138 | }, [scrollY]);
|
2139 | React.useEffect(function () {
|
2140 | if (verticalGanttContainerRef.current) {
|
2141 | verticalGanttContainerRef.current.scrollLeft = scrollX;
|
2142 | }
|
2143 | }, [scrollX]);
|
2144 | return React__default.createElement("div", {
|
2145 | className: styles$9.ganttVerticalContainer,
|
2146 | ref: verticalGanttContainerRef,
|
2147 | dir: "ltr"
|
2148 | }, React__default.createElement("svg", {
|
2149 | xmlns: "http://www.w3.org/2000/svg",
|
2150 | width: gridProps.svgWidth,
|
2151 | height: calendarProps.headerHeight,
|
2152 | fontFamily: barProps.fontFamily
|
2153 | }, React__default.createElement(Calendar, Object.assign({}, calendarProps))), React__default.createElement("div", {
|
2154 | ref: horizontalContainerRef,
|
2155 | className: styles$9.horizontalContainer,
|
2156 | style: ganttHeight ? {
|
2157 | height: ganttHeight,
|
2158 | width: gridProps.svgWidth
|
2159 | } : {
|
2160 | width: gridProps.svgWidth
|
2161 | }
|
2162 | }, React__default.createElement("svg", {
|
2163 | xmlns: "http://www.w3.org/2000/svg",
|
2164 | width: gridProps.svgWidth,
|
2165 | height: barProps.rowHeight * barProps.tasks.length,
|
2166 | fontFamily: barProps.fontFamily,
|
2167 | ref: ganttSVGRef
|
2168 | }, React__default.createElement(Grid, Object.assign({}, gridProps)), React__default.createElement(TaskGanttContent, Object.assign({}, newBarProps)))));
|
2169 | };
|
2170 |
|
2171 | var styles$a = {"scrollWrapper":"_2k9Ys","scroll":"_19jgW"};
|
2172 |
|
2173 | var HorizontalScroll = function HorizontalScroll(_ref) {
|
2174 | var scroll = _ref.scroll,
|
2175 | svgWidth = _ref.svgWidth,
|
2176 | taskListWidth = _ref.taskListWidth,
|
2177 | rtl = _ref.rtl,
|
2178 | onScroll = _ref.onScroll;
|
2179 | var scrollRef = React.useRef(null);
|
2180 | React.useEffect(function () {
|
2181 | if (scrollRef.current) {
|
2182 | scrollRef.current.scrollLeft = scroll;
|
2183 | }
|
2184 | }, [scroll]);
|
2185 | return React__default.createElement("div", {
|
2186 | dir: "ltr",
|
2187 | style: {
|
2188 | margin: rtl ? "0px " + taskListWidth + "px 0px 0px" : "0px 0px 0px " + taskListWidth + "px"
|
2189 | },
|
2190 | className: styles$a.scrollWrapper,
|
2191 | onScroll: onScroll,
|
2192 | ref: scrollRef
|
2193 | }, React__default.createElement("div", {
|
2194 | style: {
|
2195 | width: svgWidth
|
2196 | },
|
2197 | className: styles$a.scroll
|
2198 | }));
|
2199 | };
|
2200 |
|
2201 | var Gantt = function Gantt(_ref) {
|
2202 | var tasks = _ref.tasks,
|
2203 | _ref$headerHeight = _ref.headerHeight,
|
2204 | headerHeight = _ref$headerHeight === void 0 ? 50 : _ref$headerHeight,
|
2205 | _ref$columnWidth = _ref.columnWidth,
|
2206 | columnWidth = _ref$columnWidth === void 0 ? 60 : _ref$columnWidth,
|
2207 | _ref$listCellWidth = _ref.listCellWidth,
|
2208 | listCellWidth = _ref$listCellWidth === void 0 ? "155px" : _ref$listCellWidth,
|
2209 | _ref$rowHeight = _ref.rowHeight,
|
2210 | rowHeight = _ref$rowHeight === void 0 ? 50 : _ref$rowHeight,
|
2211 | _ref$ganttHeight = _ref.ganttHeight,
|
2212 | ganttHeight = _ref$ganttHeight === void 0 ? 0 : _ref$ganttHeight,
|
2213 | _ref$viewMode = _ref.viewMode,
|
2214 | viewMode = _ref$viewMode === void 0 ? exports.ViewMode.Day : _ref$viewMode,
|
2215 | _ref$preStepsCount = _ref.preStepsCount,
|
2216 | preStepsCount = _ref$preStepsCount === void 0 ? 1 : _ref$preStepsCount,
|
2217 | _ref$locale = _ref.locale,
|
2218 | locale = _ref$locale === void 0 ? "en-GB" : _ref$locale,
|
2219 | _ref$barFill = _ref.barFill,
|
2220 | barFill = _ref$barFill === void 0 ? 60 : _ref$barFill,
|
2221 | _ref$barCornerRadius = _ref.barCornerRadius,
|
2222 | barCornerRadius = _ref$barCornerRadius === void 0 ? 3 : _ref$barCornerRadius,
|
2223 | _ref$barProgressColor = _ref.barProgressColor,
|
2224 | barProgressColor = _ref$barProgressColor === void 0 ? "#a3a3ff" : _ref$barProgressColor,
|
2225 | _ref$barProgressSelec = _ref.barProgressSelectedColor,
|
2226 | barProgressSelectedColor = _ref$barProgressSelec === void 0 ? "#8282f5" : _ref$barProgressSelec,
|
2227 | _ref$barBackgroundCol = _ref.barBackgroundColor,
|
2228 | barBackgroundColor = _ref$barBackgroundCol === void 0 ? "#b8c2cc" : _ref$barBackgroundCol,
|
2229 | _ref$barBackgroundSel = _ref.barBackgroundSelectedColor,
|
2230 | barBackgroundSelectedColor = _ref$barBackgroundSel === void 0 ? "#aeb8c2" : _ref$barBackgroundSel,
|
2231 | _ref$projectProgressC = _ref.projectProgressColor,
|
2232 | projectProgressColor = _ref$projectProgressC === void 0 ? "#7db59a" : _ref$projectProgressC,
|
2233 | _ref$projectProgressS = _ref.projectProgressSelectedColor,
|
2234 | projectProgressSelectedColor = _ref$projectProgressS === void 0 ? "#59a985" : _ref$projectProgressS,
|
2235 | _ref$projectBackgroun = _ref.projectBackgroundColor,
|
2236 | projectBackgroundColor = _ref$projectBackgroun === void 0 ? "#fac465" : _ref$projectBackgroun,
|
2237 | _ref$projectBackgroun2 = _ref.projectBackgroundSelectedColor,
|
2238 | projectBackgroundSelectedColor = _ref$projectBackgroun2 === void 0 ? "#f7bb53" : _ref$projectBackgroun2,
|
2239 | _ref$milestoneBackgro = _ref.milestoneBackgroundColor,
|
2240 | milestoneBackgroundColor = _ref$milestoneBackgro === void 0 ? "#f1c453" : _ref$milestoneBackgro,
|
2241 | _ref$milestoneBackgro2 = _ref.milestoneBackgroundSelectedColor,
|
2242 | milestoneBackgroundSelectedColor = _ref$milestoneBackgro2 === void 0 ? "#f29e4c" : _ref$milestoneBackgro2,
|
2243 | _ref$rtl = _ref.rtl,
|
2244 | rtl = _ref$rtl === void 0 ? false : _ref$rtl,
|
2245 | _ref$handleWidth = _ref.handleWidth,
|
2246 | handleWidth = _ref$handleWidth === void 0 ? 8 : _ref$handleWidth,
|
2247 | _ref$timeStep = _ref.timeStep,
|
2248 | timeStep = _ref$timeStep === void 0 ? 300000 : _ref$timeStep,
|
2249 | _ref$arrowColor = _ref.arrowColor,
|
2250 | arrowColor = _ref$arrowColor === void 0 ? "grey" : _ref$arrowColor,
|
2251 | _ref$fontFamily = _ref.fontFamily,
|
2252 | fontFamily = _ref$fontFamily === void 0 ? "Arial, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue" : _ref$fontFamily,
|
2253 | _ref$fontSize = _ref.fontSize,
|
2254 | fontSize = _ref$fontSize === void 0 ? "14px" : _ref$fontSize,
|
2255 | _ref$arrowIndent = _ref.arrowIndent,
|
2256 | arrowIndent = _ref$arrowIndent === void 0 ? 20 : _ref$arrowIndent,
|
2257 | _ref$todayColor = _ref.todayColor,
|
2258 | todayColor = _ref$todayColor === void 0 ? "rgba(252, 248, 227, 0.5)" : _ref$todayColor,
|
2259 | viewDate = _ref.viewDate,
|
2260 | _ref$TooltipContent = _ref.TooltipContent,
|
2261 | TooltipContent = _ref$TooltipContent === void 0 ? StandardTooltipContent : _ref$TooltipContent,
|
2262 | _ref$TaskListHeader = _ref.TaskListHeader,
|
2263 | TaskListHeader = _ref$TaskListHeader === void 0 ? TaskListHeaderDefault : _ref$TaskListHeader,
|
2264 | _ref$TaskListTable = _ref.TaskListTable,
|
2265 | TaskListTable = _ref$TaskListTable === void 0 ? TaskListTableDefault : _ref$TaskListTable,
|
2266 | onDateChange = _ref.onDateChange,
|
2267 | onProgressChange = _ref.onProgressChange,
|
2268 | onDoubleClick = _ref.onDoubleClick,
|
2269 | onClick = _ref.onClick,
|
2270 | onDelete = _ref.onDelete,
|
2271 | onSelect = _ref.onSelect,
|
2272 | onExpanderClick = _ref.onExpanderClick;
|
2273 | var wrapperRef = React.useRef(null);
|
2274 | var taskListRef = React.useRef(null);
|
2275 |
|
2276 | var _useState = React.useState(function () {
|
2277 | var _ganttDateRange = ganttDateRange(tasks, viewMode, preStepsCount),
|
2278 | startDate = _ganttDateRange[0],
|
2279 | endDate = _ganttDateRange[1];
|
2280 |
|
2281 | return {
|
2282 | viewMode: viewMode,
|
2283 | dates: seedDates(startDate, endDate, viewMode)
|
2284 | };
|
2285 | }),
|
2286 | dateSetup = _useState[0],
|
2287 | setDateSetup = _useState[1];
|
2288 |
|
2289 | var _useState2 = React.useState(undefined),
|
2290 | currentViewDate = _useState2[0],
|
2291 | setCurrentViewDate = _useState2[1];
|
2292 |
|
2293 | var _useState3 = React.useState(0),
|
2294 | taskListWidth = _useState3[0],
|
2295 | setTaskListWidth = _useState3[1];
|
2296 |
|
2297 | var _useState4 = React.useState(0),
|
2298 | svgContainerWidth = _useState4[0],
|
2299 | setSvgContainerWidth = _useState4[1];
|
2300 |
|
2301 | var _useState5 = React.useState(ganttHeight),
|
2302 | svgContainerHeight = _useState5[0],
|
2303 | setSvgContainerHeight = _useState5[1];
|
2304 |
|
2305 | var _useState6 = React.useState([]),
|
2306 | barTasks = _useState6[0],
|
2307 | setBarTasks = _useState6[1];
|
2308 |
|
2309 | var _useState7 = React.useState({
|
2310 | action: ""
|
2311 | }),
|
2312 | ganttEvent = _useState7[0],
|
2313 | setGanttEvent = _useState7[1];
|
2314 |
|
2315 | var taskHeight = React.useMemo(function () {
|
2316 | return rowHeight * barFill / 100;
|
2317 | }, [rowHeight, barFill]);
|
2318 |
|
2319 | var _useState8 = React.useState(),
|
2320 | selectedTask = _useState8[0],
|
2321 | setSelectedTask = _useState8[1];
|
2322 |
|
2323 | var _useState9 = React.useState(null),
|
2324 | failedTask = _useState9[0],
|
2325 | setFailedTask = _useState9[1];
|
2326 |
|
2327 | var svgWidth = dateSetup.dates.length * columnWidth;
|
2328 | var ganttFullHeight = barTasks.length * rowHeight;
|
2329 |
|
2330 | var _useState10 = React.useState(0),
|
2331 | scrollY = _useState10[0],
|
2332 | setScrollY = _useState10[1];
|
2333 |
|
2334 | var _useState11 = React.useState(-1),
|
2335 | scrollX = _useState11[0],
|
2336 | setScrollX = _useState11[1];
|
2337 |
|
2338 | var _useState12 = React.useState(false),
|
2339 | ignoreScrollEvent = _useState12[0],
|
2340 | setIgnoreScrollEvent = _useState12[1];
|
2341 |
|
2342 | React.useEffect(function () {
|
2343 | var filteredTasks;
|
2344 |
|
2345 | if (onExpanderClick) {
|
2346 | filteredTasks = removeHiddenTasks(tasks);
|
2347 | } else {
|
2348 | filteredTasks = tasks;
|
2349 | }
|
2350 |
|
2351 | filteredTasks = filteredTasks.sort(sortTasks);
|
2352 |
|
2353 | var _ganttDateRange2 = ganttDateRange(filteredTasks, viewMode, preStepsCount),
|
2354 | startDate = _ganttDateRange2[0],
|
2355 | endDate = _ganttDateRange2[1];
|
2356 |
|
2357 | var newDates = seedDates(startDate, endDate, viewMode);
|
2358 |
|
2359 | if (rtl) {
|
2360 | newDates = newDates.reverse();
|
2361 |
|
2362 | if (scrollX === -1) {
|
2363 | setScrollX(newDates.length * columnWidth);
|
2364 | }
|
2365 | }
|
2366 |
|
2367 | setDateSetup({
|
2368 | dates: newDates,
|
2369 | viewMode: viewMode
|
2370 | });
|
2371 | setBarTasks(convertToBarTasks(filteredTasks, newDates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor));
|
2372 | }, [tasks, viewMode, preStepsCount, rowHeight, barCornerRadius, columnWidth, taskHeight, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor, rtl, scrollX, onExpanderClick]);
|
2373 | React.useEffect(function () {
|
2374 | if (viewMode === dateSetup.viewMode && (viewDate && !currentViewDate || viewDate && (currentViewDate === null || currentViewDate === void 0 ? void 0 : currentViewDate.valueOf()) !== viewDate.valueOf())) {
|
2375 | var dates = dateSetup.dates;
|
2376 | var index = dates.findIndex(function (d, i) {
|
2377 | return viewDate.valueOf() >= d.valueOf() && i + 1 !== dates.length && viewDate.valueOf() < dates[i + 1].valueOf();
|
2378 | });
|
2379 |
|
2380 | if (index === -1) {
|
2381 | return;
|
2382 | }
|
2383 |
|
2384 | setCurrentViewDate(viewDate);
|
2385 | setScrollX(columnWidth * index);
|
2386 | }
|
2387 | }, [viewDate, columnWidth, dateSetup.dates, dateSetup.viewMode, viewMode, currentViewDate, setCurrentViewDate]);
|
2388 | React.useEffect(function () {
|
2389 | var changedTask = ganttEvent.changedTask,
|
2390 | action = ganttEvent.action;
|
2391 |
|
2392 | if (changedTask) {
|
2393 | if (action === "delete") {
|
2394 | setGanttEvent({
|
2395 | action: ""
|
2396 | });
|
2397 | setBarTasks(barTasks.filter(function (t) {
|
2398 | return t.id !== changedTask.id;
|
2399 | }));
|
2400 | } else if (action === "move" || action === "end" || action === "start" || action === "progress") {
|
2401 | var prevStateTask = barTasks.find(function (t) {
|
2402 | return t.id === changedTask.id;
|
2403 | });
|
2404 |
|
2405 | if (prevStateTask && (prevStateTask.start.getTime() !== changedTask.start.getTime() || prevStateTask.end.getTime() !== changedTask.end.getTime() || prevStateTask.progress !== changedTask.progress)) {
|
2406 | var newTaskList = barTasks.map(function (t) {
|
2407 | return t.id === changedTask.id ? changedTask : t;
|
2408 | });
|
2409 | setBarTasks(newTaskList);
|
2410 | }
|
2411 | }
|
2412 | }
|
2413 | }, [ganttEvent, barTasks]);
|
2414 | React.useEffect(function () {
|
2415 | if (failedTask) {
|
2416 | setBarTasks(barTasks.map(function (t) {
|
2417 | return t.id !== failedTask.id ? t : failedTask;
|
2418 | }));
|
2419 | setFailedTask(null);
|
2420 | }
|
2421 | }, [failedTask, barTasks]);
|
2422 | React.useEffect(function () {
|
2423 | if (!listCellWidth) {
|
2424 | setTaskListWidth(0);
|
2425 | }
|
2426 |
|
2427 | if (taskListRef.current) {
|
2428 | setTaskListWidth(taskListRef.current.offsetWidth);
|
2429 | }
|
2430 | }, [taskListRef, listCellWidth]);
|
2431 | React.useEffect(function () {
|
2432 | if (wrapperRef.current) {
|
2433 | setSvgContainerWidth(wrapperRef.current.offsetWidth - taskListWidth);
|
2434 | }
|
2435 | }, [wrapperRef, taskListWidth]);
|
2436 | React.useEffect(function () {
|
2437 | if (ganttHeight) {
|
2438 | setSvgContainerHeight(ganttHeight + headerHeight);
|
2439 | } else {
|
2440 | setSvgContainerHeight(tasks.length * rowHeight + headerHeight);
|
2441 | }
|
2442 | }, [ganttHeight, tasks, headerHeight, rowHeight]);
|
2443 | React.useEffect(function () {
|
2444 | var _wrapperRef$current;
|
2445 |
|
2446 | var handleWheel = function handleWheel(event) {
|
2447 | if (event.shiftKey || event.deltaX) {
|
2448 | var scrollMove = event.deltaX ? event.deltaX : event.deltaY;
|
2449 | var newScrollX = scrollX + scrollMove;
|
2450 |
|
2451 | if (newScrollX < 0) {
|
2452 | newScrollX = 0;
|
2453 | } else if (newScrollX > svgWidth) {
|
2454 | newScrollX = svgWidth;
|
2455 | }
|
2456 |
|
2457 | setScrollX(newScrollX);
|
2458 | event.preventDefault();
|
2459 | } else if (ganttHeight) {
|
2460 | var newScrollY = scrollY + event.deltaY;
|
2461 |
|
2462 | if (newScrollY < 0) {
|
2463 | newScrollY = 0;
|
2464 | } else if (newScrollY > ganttFullHeight - ganttHeight) {
|
2465 | newScrollY = ganttFullHeight - ganttHeight;
|
2466 | }
|
2467 |
|
2468 | if (newScrollY !== scrollY) {
|
2469 | setScrollY(newScrollY);
|
2470 | event.preventDefault();
|
2471 | }
|
2472 | }
|
2473 |
|
2474 | setIgnoreScrollEvent(true);
|
2475 | };
|
2476 |
|
2477 | (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.addEventListener("wheel", handleWheel, {
|
2478 | passive: false
|
2479 | });
|
2480 | return function () {
|
2481 | var _wrapperRef$current2;
|
2482 |
|
2483 | (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.removeEventListener("wheel", handleWheel);
|
2484 | };
|
2485 | }, [wrapperRef, scrollY, scrollX, ganttHeight, svgWidth, rtl, ganttFullHeight]);
|
2486 |
|
2487 | var handleScrollY = function handleScrollY(event) {
|
2488 | if (scrollY !== event.currentTarget.scrollTop && !ignoreScrollEvent) {
|
2489 | setScrollY(event.currentTarget.scrollTop);
|
2490 | setIgnoreScrollEvent(true);
|
2491 | } else {
|
2492 | setIgnoreScrollEvent(false);
|
2493 | }
|
2494 | };
|
2495 |
|
2496 | var handleScrollX = function handleScrollX(event) {
|
2497 | if (scrollX !== event.currentTarget.scrollLeft && !ignoreScrollEvent) {
|
2498 | setScrollX(event.currentTarget.scrollLeft);
|
2499 | setIgnoreScrollEvent(true);
|
2500 | } else {
|
2501 | setIgnoreScrollEvent(false);
|
2502 | }
|
2503 | };
|
2504 |
|
2505 | var handleKeyDown = function handleKeyDown(event) {
|
2506 | event.preventDefault();
|
2507 | var newScrollY = scrollY;
|
2508 | var newScrollX = scrollX;
|
2509 | var isX = true;
|
2510 |
|
2511 | switch (event.key) {
|
2512 | case "Down":
|
2513 | case "ArrowDown":
|
2514 | newScrollY += rowHeight;
|
2515 | isX = false;
|
2516 | break;
|
2517 |
|
2518 | case "Up":
|
2519 | case "ArrowUp":
|
2520 | newScrollY -= rowHeight;
|
2521 | isX = false;
|
2522 | break;
|
2523 |
|
2524 | case "Left":
|
2525 | case "ArrowLeft":
|
2526 | newScrollX -= columnWidth;
|
2527 | break;
|
2528 |
|
2529 | case "Right":
|
2530 | case "ArrowRight":
|
2531 | newScrollX += columnWidth;
|
2532 | break;
|
2533 | }
|
2534 |
|
2535 | if (isX) {
|
2536 | if (newScrollX < 0) {
|
2537 | newScrollX = 0;
|
2538 | } else if (newScrollX > svgWidth) {
|
2539 | newScrollX = svgWidth;
|
2540 | }
|
2541 |
|
2542 | setScrollX(newScrollX);
|
2543 | } else {
|
2544 | if (newScrollY < 0) {
|
2545 | newScrollY = 0;
|
2546 | } else if (newScrollY > ganttFullHeight - ganttHeight) {
|
2547 | newScrollY = ganttFullHeight - ganttHeight;
|
2548 | }
|
2549 |
|
2550 | setScrollY(newScrollY);
|
2551 | }
|
2552 |
|
2553 | setIgnoreScrollEvent(true);
|
2554 | };
|
2555 |
|
2556 | var handleSelectedTask = function handleSelectedTask(taskId) {
|
2557 | var newSelectedTask = barTasks.find(function (t) {
|
2558 | return t.id === taskId;
|
2559 | });
|
2560 | var oldSelectedTask = barTasks.find(function (t) {
|
2561 | return !!selectedTask && t.id === selectedTask.id;
|
2562 | });
|
2563 |
|
2564 | if (onSelect) {
|
2565 | if (oldSelectedTask) {
|
2566 | onSelect(oldSelectedTask, false);
|
2567 | }
|
2568 |
|
2569 | if (newSelectedTask) {
|
2570 | onSelect(newSelectedTask, true);
|
2571 | }
|
2572 | }
|
2573 |
|
2574 | setSelectedTask(newSelectedTask);
|
2575 | };
|
2576 |
|
2577 | var handleExpanderClick = function handleExpanderClick(task) {
|
2578 | if (onExpanderClick && task.hideChildren !== undefined) {
|
2579 | onExpanderClick(_extends({}, task, {
|
2580 | hideChildren: !task.hideChildren
|
2581 | }));
|
2582 | }
|
2583 | };
|
2584 |
|
2585 | var gridProps = {
|
2586 | columnWidth: columnWidth,
|
2587 | svgWidth: svgWidth,
|
2588 | tasks: tasks,
|
2589 | rowHeight: rowHeight,
|
2590 | dates: dateSetup.dates,
|
2591 | todayColor: todayColor,
|
2592 | rtl: rtl
|
2593 | };
|
2594 | var calendarProps = {
|
2595 | dateSetup: dateSetup,
|
2596 | locale: locale,
|
2597 | viewMode: viewMode,
|
2598 | headerHeight: headerHeight,
|
2599 | columnWidth: columnWidth,
|
2600 | fontFamily: fontFamily,
|
2601 | fontSize: fontSize,
|
2602 | rtl: rtl
|
2603 | };
|
2604 | var barProps = {
|
2605 | tasks: barTasks,
|
2606 | dates: dateSetup.dates,
|
2607 | ganttEvent: ganttEvent,
|
2608 | selectedTask: selectedTask,
|
2609 | rowHeight: rowHeight,
|
2610 | taskHeight: taskHeight,
|
2611 | columnWidth: columnWidth,
|
2612 | arrowColor: arrowColor,
|
2613 | timeStep: timeStep,
|
2614 | fontFamily: fontFamily,
|
2615 | fontSize: fontSize,
|
2616 | arrowIndent: arrowIndent,
|
2617 | svgWidth: svgWidth,
|
2618 | rtl: rtl,
|
2619 | setGanttEvent: setGanttEvent,
|
2620 | setFailedTask: setFailedTask,
|
2621 | setSelectedTask: handleSelectedTask,
|
2622 | onDateChange: onDateChange,
|
2623 | onProgressChange: onProgressChange,
|
2624 | onDoubleClick: onDoubleClick,
|
2625 | onClick: onClick,
|
2626 | onDelete: onDelete
|
2627 | };
|
2628 | var tableProps = {
|
2629 | rowHeight: rowHeight,
|
2630 | rowWidth: listCellWidth,
|
2631 | fontFamily: fontFamily,
|
2632 | fontSize: fontSize,
|
2633 | tasks: barTasks,
|
2634 | locale: locale,
|
2635 | headerHeight: headerHeight,
|
2636 | scrollY: scrollY,
|
2637 | ganttHeight: ganttHeight,
|
2638 | horizontalContainerClass: styles$9.horizontalContainer,
|
2639 | selectedTask: selectedTask,
|
2640 | taskListRef: taskListRef,
|
2641 | setSelectedTask: handleSelectedTask,
|
2642 | onExpanderClick: handleExpanderClick,
|
2643 | TaskListHeader: TaskListHeader,
|
2644 | TaskListTable: TaskListTable
|
2645 | };
|
2646 | return React__default.createElement("div", null, React__default.createElement("div", {
|
2647 | className: styles$9.wrapper,
|
2648 | onKeyDown: handleKeyDown,
|
2649 | tabIndex: 0,
|
2650 | ref: wrapperRef
|
2651 | }, listCellWidth && React__default.createElement(TaskList, Object.assign({}, tableProps)), React__default.createElement(TaskGantt, {
|
2652 | gridProps: gridProps,
|
2653 | calendarProps: calendarProps,
|
2654 | barProps: barProps,
|
2655 | ganttHeight: ganttHeight,
|
2656 | scrollY: scrollY,
|
2657 | scrollX: scrollX
|
2658 | }), ganttEvent.changedTask && React__default.createElement(Tooltip, {
|
2659 | arrowIndent: arrowIndent,
|
2660 | rowHeight: rowHeight,
|
2661 | svgContainerHeight: svgContainerHeight,
|
2662 | svgContainerWidth: svgContainerWidth,
|
2663 | fontFamily: fontFamily,
|
2664 | fontSize: fontSize,
|
2665 | scrollX: scrollX,
|
2666 | scrollY: scrollY,
|
2667 | task: ganttEvent.changedTask,
|
2668 | headerHeight: headerHeight,
|
2669 | taskListWidth: taskListWidth,
|
2670 | TooltipContent: TooltipContent,
|
2671 | rtl: rtl,
|
2672 | svgWidth: svgWidth
|
2673 | }), React__default.createElement(VerticalScroll, {
|
2674 | ganttFullHeight: ganttFullHeight,
|
2675 | ganttHeight: ganttHeight,
|
2676 | headerHeight: headerHeight,
|
2677 | scroll: scrollY,
|
2678 | onScroll: handleScrollY,
|
2679 | rtl: rtl
|
2680 | })), React__default.createElement(HorizontalScroll, {
|
2681 | svgWidth: svgWidth,
|
2682 | taskListWidth: taskListWidth,
|
2683 | scroll: scrollX,
|
2684 | rtl: rtl,
|
2685 | onScroll: handleScrollX
|
2686 | }));
|
2687 | };
|
2688 |
|
2689 | exports.Gantt = Gantt;
|
2690 |
|