@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 © 2026 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, editorValidationRequired as ye, editorValidationPercentCompleteRange as Ie, editorValidationStart as De, editorValidationEnd as Se, editorTaskTitle as Te, editorTaskStart as ge, editorTaskEnd as ke, editorTaskComplete as be, editorTaskParent as Ee, editorTabGeneral as Fe, editorTabPredecessors as Me, editorDependencyTypesFF as H, editorDependencyTypesSS as Ce, editorDependencyTypesSF as ve, editorDependencyTypesFS as Pe, editorTabSuccessors 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(Te), F = r(ge), M = r(ke), C = r(be), X = r(Ee), Y = r(Fe), Z = r(Me), j = r(we), u = r(ye), v = r(De), P = r(Se), w = r(Ie), 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(Pe);
break;
case s.SF:
a = r(ve);
break;
case s.SS:
a = r(Ce);
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
};