@progress/kendo-react-gantt
Version:
React Gantt enables the display of self-referencing tabular data with many features. KendoReact Gantt package
182 lines (181 loc) • 6.31 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 e from "react";
import { useGanttDateRangeContext as Q, useGanttTaskModelFieldsContext as U, useGanttTaskEventsContext as X } from "../context/GanttContext.mjs";
import { isInRange as Z } from "../utils/index.mjs";
import { getter as c, useDraggable as F, classNames as W, IconWrap as p } from "@progress/kendo-react-common";
import { xIcon as ee } from "@progress/kendo-svg-icons";
import { useGanttViewTimelineWidthContext as te, useGanttViewDependencyDragContext as ne } from "../context/GanttViewContext.mjs";
import { useGanttTask as ae } from "../hooks/useGanttTask.mjs";
import { MILESTONE_OFFSET as le, TASK_ID_ATT as $, DEPENDENCY_DRAG_HANDLE_START_ATT as L, DEPENDENCY_DRAG_HANDLE_FINISH_ATT as V } from "../constants/index.mjs";
const se = e.forwardRef((t, K) => {
const i = Q(), s = U(), O = te(), a = ne(), l = X(), r = e.useRef(null), f = e.useRef(null);
ae(t.dataItem, c(s.id)(t.dataItem), K, r);
const N = e.useRef(null), k = c(s.id)(t.dataItem), o = c(s.start)(t.dataItem), u = c(s.end)(t.dataItem), Y = c(s.title)(t.dataItem), h = c(s.percentComplete)(t.dataItem), b = c(s.children)(t.dataItem), E = c(s.isSelected)(t.dataItem), y = o && o.getTime(), T = u && u.getTime(), d = b && b.length, g = !d && y === T, C = y && T && Z(i.start, i.end, o, u), [j, q] = e.useState(!1), D = e.useRef(null), I = e.useRef(null);
F(D, {
onPress: a.onDependencyHandlePress,
onDrag: a.onDependencyHandleDrag,
onRelease: a.onDependencyHandleRelease
}), F(I, {
onPress: a.onDependencyHandlePress,
onDrag: a.onDependencyHandleDrag,
onRelease: a.onDependencyHandleRelease
});
const x = e.useCallback(
(n) => {
l.onTaskClick && l.onTaskClick({
dataItem: t.dataItem,
level: t.level,
nativeEvent: n && n.nativeEvent,
syntheticEvent: n,
target: null
});
},
[t.dataItem, t.level]
), S = e.useCallback(
(n) => {
l.onTaskDoubleClick && l.onTaskDoubleClick({
dataItem: t.dataItem,
level: t.level,
nativeEvent: n && n.nativeEvent,
syntheticEvent: n,
target: null
});
},
[t.dataItem, t.level]
), H = e.useCallback(
(n) => {
l.onTaskContextMenu && l.onTaskContextMenu({
dataItem: t.dataItem,
level: t.level,
nativeEvent: n && n.nativeEvent,
syntheticEvent: n,
target: null
});
},
[t.dataItem, t.level]
), z = e.useCallback(
(n) => {
l.onTaskRemoveClick && l.onTaskRemoveClick({
dataItem: t.dataItem,
level: t.level,
nativeEvent: n && n.nativeEvent,
syntheticEvent: n,
target: null
});
},
[t.dataItem, t.level]
), M = e.useCallback(() => {
const n = i.start, B = i.end, R = N.current, m = r.current, _ = f.current;
if (!C || R === null || m === null)
return;
const G = R.clientWidth / (B.getTime() - n.getTime()), P = (o.getTime() - n.getTime()) * G, w = (u.getTime() - o.getTime()) * G, J = (R.offsetHeight - m.offsetHeight) / 2;
m.style.left = `${Math.round(g ? P - le : P)}px`, m.style.top = `${Math.round(J)}px`, g || (m.style.width = `${Math.round(w)}px`, _ !== null && (_.style.width = `${Math.round(w * (h || 0))}px`)), q(!0);
}, [
i.start.getTime(),
i.end.getTime(),
y,
T,
C,
h,
O
]);
e.useEffect(M, [M]);
const A = {
visibility: j ? void 0 : "hidden",
display: C ? void 0 : "none"
}, v = {
userSelect: "none",
display: a.draggedId === String(k) ? "block" : void 0
};
return /* @__PURE__ */ e.createElement("td", { ref: N, key: k, role: "presentation" }, g ? /* @__PURE__ */ e.createElement(
"div",
{
"aria-hidden": !0,
className: W({
"k-task": !0,
"k-task-milestone": !0,
"k-selected": E && !Array.isArray(E)
}),
style: A,
ref: r,
[$]: k,
onClick: x,
onDoubleClick: S,
onContextMenu: H
},
/* @__PURE__ */ e.createElement("div", { className: "k-task-milestone-content" }),
a.isEnabled && /* @__PURE__ */ e.createElement(
"div",
{
className: "k-task-dot k-task-start",
ref: D,
style: v,
...L
}
),
a.isEnabled && /* @__PURE__ */ e.createElement(
"div",
{
className: "k-task-dot k-task-end",
ref: I,
style: v,
...V
}
)
) : /* @__PURE__ */ e.createElement(
"div",
{
"aria-hidden": !0,
className: W({
"k-task": !0,
"k-task-summary": d,
"k-task-single": !d,
"k-selected": E && !Array.isArray(E)
}),
ref: r,
style: A,
[$]: k,
onClick: x,
onDoubleClick: S,
onContextMenu: H
},
d ? /* @__PURE__ */ e.createElement("div", { className: "k-task-summary-progress", ref: f }, /* @__PURE__ */ e.createElement("div", { className: "k-task-summary-complete" })) : /* @__PURE__ */ e.createElement("div", { className: "k-task-complete", ref: f }),
!d && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "k-task-content" }, Y), l.onTaskRemoveClick ? /* @__PURE__ */ e.createElement("span", { className: "k-task-actions" }, /* @__PURE__ */ e.createElement(
"span",
{
onClick: z,
className: "k-link k-task-delete",
"aria-label": "Delete"
},
/* @__PURE__ */ e.createElement(p, { name: "x", icon: ee })
)) : null),
a.isEnabled && /* @__PURE__ */ e.createElement(
"div",
{
className: "k-task-dot k-task-start",
ref: D,
style: v,
...L
}
),
a.isEnabled && /* @__PURE__ */ e.createElement(
"div",
{
className: "k-task-dot k-task-end",
ref: I,
style: v,
...V
}
)
));
});
se.displayName = "KendoReactGanttTask";
export {
se as GanttTask
};