@progress/kendo-react-gantt
Version:
React Gantt enables the display of self-referencing tabular data with many features. KendoReact Gantt package
248 lines (247 loc) • 8.14 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as t from "react";
import { FormElement as A, Field as c } from "@progress/kendo-react-form";
import { flatData as le } from "@progress/kendo-react-treelist";
import { useGanttTaskModelFieldsContext as me } from "../context/GanttContext.mjs";
import { FormInput as W } from "./FormInput.mjs";
import { useLocalization as pe } from "@progress/kendo-react-intl";
import { TabStrip as ue, TabStripTab as T } from "@progress/kendo-react-layout";
import { messages as fe, editorTaskTitle as ye, editorTaskStart as Ie, editorTaskEnd as De, editorTaskComplete as Se, editorTaskParent as Te, editorTabGeneral as ge, editorTabPredecessors as ke, editorTabSuccessors as be, editorValidationRequired as Ee, editorValidationStart as Fe, editorValidationEnd as Me, editorValidationPercentCompleteRange as Ce, editorDependencyTypesFF as H, editorDependencyTypesSS as ve, editorDependencyTypesSF as Pe, editorDependencyTypesFS as we } from "../messages/index.mjs";
import { FormDateTimePicker as I } from "./FormDateTimePicker.mjs";
import { FormNumericTextBox as J } from "./FormNumericTextBox.mjs";
import { FormDropDownList as Ve } from "./FormDropDownList.mjs";
import { guid as g } from "@progress/kendo-react-common";
import { GanttEditorPredecessors as _e } from "./GanttEditorPredecessors.mjs";
import { GanttEditorSuccessors as $e } from "./GanttEditorSuccessors.mjs";
import { DependencyType as s } from "../interfaces/DependencyType.mjs";
import { findByFieldValue as K } from "@progress/kendo-react-dropdowns";
const he = [
{ type: s.FF },
{ type: s.FS },
{ type: s.SF },
{ type: s.SS }
], Xe = (o) => {
const [O, Q] = t.useState(0), [l, D] = t.useState(), [d, p] = t.useState([...o.dependencyData || []]), [k, b] = t.useState([]), n = me(), U = pe(), r = (e) => U.toLanguageString(e, fe[e]), E = r(ye), F = r(Ie), M = r(De), C = r(Se), X = r(Te), Y = r(ge), Z = r(ke), j = r(be), u = r(Ee), v = r(Fe), P = r(Me), w = r(Ce), f = t.useMemo(() => le(
o.taskData || [],
(e) => e.children || [],
(e) => {
const a = {
title: e[n.title],
id: e[n.id],
start: e[n.start],
end: e[n.end],
parentId: null
};
return n.parentId && (a.parentId = e[n.parentId]), a;
}
), [o.taskData, n]), ee = t.useMemo(
() => f.filter((e) => e.id !== o.dataItem.id),
[f, o.dataItem]
), te = t.useMemo(() => d.filter((e) => e.toId === o.dataItem.id), [d, o.dataItem]), ne = t.useMemo(() => d.filter((e) => e.fromId === o.dataItem.id), [d, o.dataItem]), V = t.useMemo(() => d.filter((e) => e.id === null).map((e) => ({ id: e.id, fromId: e.fromId, toId: e.toId, type: e.type })), [d]), _ = t.useMemo(() => d.filter((e) => e.id !== null && e.uid).map((e) => ({ id: e.id, fromId: e.fromId, toId: e.toId, type: e.type })), [d]), $ = () => {
if (l) {
if (l.id) {
const e = d.filter((i) => i.id !== l.id);
p(e);
const a = d.filter((i) => i.id === l.id);
b((i) => [...i, ...a]);
} else {
const e = d.filter((i) => i.uid !== l.uid);
p(e);
const a = d.filter((i) => i.uid === l.uid);
b((i) => [...i, ...a]);
}
D(void 0);
}
}, m = t.useCallback(
(e) => e || e === 0 ? void 0 : u,
[u]
), h = t.useCallback(
(e) => e || e === 0 ? e >= 0 && e <= 1 ? void 0 : w : u,
[u, w]
), x = t.useCallback(
(e, a) => e && a(n.end) && e.getTime() > a(n.end).getTime() ? v : void 0,
[n, v]
), R = t.useCallback(
(e, a) => e && a(n.start) && e.getTime() < a(n.start).getTime() ? P : void 0,
[n, P]
), G = t.useMemo(
() => [m, x],
[m, x]
), N = t.useMemo(
() => [m, R],
[m, R]
), ae = t.useMemo(() => K(d, "fromId", null) || K(d, "toId", null), [d]), de = (e) => {
ae || (Q(e.selected), D(void 0));
}, z = (e) => {
D(e.dataItem);
}, re = () => {
const e = { uid: g(), id: null, fromId: null, toId: o.dataItem.id, type: s.FS };
p([...d, e]);
}, oe = () => {
const e = {
uid: g(),
id: null,
fromId: o.dataItem.id,
toId: null,
type: s.FS
};
p([...d, e]);
}, q = (e, a, i) => {
const S = {
...e,
uid: e.uid || g(),
[a]: i
}, L = d.findIndex(
(y) => y.id && y.id === S.id || y.uid && y.uid === S.uid
);
L > -1 && (d.splice(L, 1, S), p([...d]));
}, B = t.useMemo(() => he.map((e) => {
let a;
switch (e.type) {
case s.FF:
a = r(H);
break;
case s.FS:
a = r(we);
break;
case s.SF:
a = r(Pe);
break;
case s.SS:
a = r(ve);
break;
default:
a = r(H);
break;
}
return {
...e,
name: a
};
}), [r]);
t.useEffect(() => {
o.onDependencyCreate && o.onDependencyCreate.call(void 0, {
createdDependencies: V,
updatedDependencies: _,
deletedDependencies: k
});
}, [V, _, k, o.onDependencyCreate]);
const ie = o.dependencyData && o.taskData, se = /* @__PURE__ */ t.createElement(A, { style: { width: 400 }, horizontal: !0 }, /* @__PURE__ */ t.createElement(
c,
{
id: `${n.title}_gantteditor`,
name: n.title,
label: E,
component: W,
validator: m
}
), /* @__PURE__ */ t.createElement(
c,
{
id: `${n.start}_gantteditor`,
name: n.start,
label: F,
component: I,
validator: G
}
), /* @__PURE__ */ t.createElement(
c,
{
id: `${n.end}_gantteditor`,
name: n.end,
label: M,
component: I,
validator: N
}
), /* @__PURE__ */ t.createElement(
c,
{
id: `${n.percentComplete}_gantteditor`,
name: n.percentComplete,
label: C,
component: J,
validator: h
}
)), ce = /* @__PURE__ */ t.createElement(A, { style: { paddingInline: "4px" } }, /* @__PURE__ */ t.createElement("div", { className: "k-form-fieldset" }, /* @__PURE__ */ t.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-4 k-gap-x-2" }, /* @__PURE__ */ t.createElement(
c,
{
id: `${n.title}_gantteditor`,
name: n.title,
label: E,
component: W,
validator: m
}
), /* @__PURE__ */ t.createElement(
c,
{
id: `${n.start}_gantteditor`,
name: n.start,
label: F,
component: I,
validator: G
}
), /* @__PURE__ */ t.createElement(
c,
{
id: `${n.end}_gantteditor`,
name: n.end,
label: M,
component: I,
validator: N
}
), /* @__PURE__ */ t.createElement(
c,
{
id: `${n.percentComplete}_gantteditor`,
name: n.percentComplete,
label: C,
component: J,
validator: h
}
), n.parentId && /* @__PURE__ */ t.createElement(
c,
{
id: `${n.parentId}_gantteditor`,
name: n.parentId || "",
idField: n.id,
label: X,
component: Ve,
data: ee,
dataItem: o.dataItem
}
))));
return ie ? /* @__PURE__ */ t.createElement(ue, { selected: O, onSelect: de }, /* @__PURE__ */ t.createElement(T, { title: Y }, ce), /* @__PURE__ */ t.createElement(T, { title: Z }, /* @__PURE__ */ t.createElement(
_e,
{
flatTasks: f,
predecessors: te,
dependencyTypes: B,
selectedItem: l,
onSelectRow: z,
addPredecessorsDependency: re,
deleteDependency: $,
updateDependency: q
}
)), /* @__PURE__ */ t.createElement(T, { title: j }, /* @__PURE__ */ t.createElement(
$e,
{
flatTasks: f,
successors: ne,
dependencyTypes: B,
selectedItem: l,
onSelectRow: z,
addSuccessorsDependency: oe,
deleteDependency: $,
updateDependency: q
}
))) : se;
};
export {
Xe as GanttEditor
};