@progress/kendo-react-gantt/components/GanttTask.js

React Gantt enables the display of self-referencing tabular data with many features. KendoReact Gantt package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("react"),S=require("../context/GanttContext.js"),Q=require("../utils/index.js"),a=require("@progress/kendo-react-common"),U=require("@progress/kendo-svg-icons"),j=require("../context/GanttViewContext.js"),X=require("../hooks/useGanttTask.js"),i=require("../constants/index.js");function Z(e){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const l=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(d,s,l.get?l:{enumerable:!0,get:()=>e[s]})}}return d.default=e,Object.freeze(d)}const t=Z(J),L=t.forwardRef((e,d)=>{const s=S.useGanttDateRangeContext(),l=S.useGanttTaskModelFieldsContext(),$=j.useGanttViewTimelineWidthContext(),c=j.useGanttViewDependencyDragContext(),o=S.useGanttTaskEventsContext(),u=t.useRef(null),f=t.useRef(null);X.useGanttTask(e.dataItem,a.getter(l.id)(e.dataItem),d,u);const _=t.useRef(null),E=a.getter(l.id)(e.dataItem),r=a.getter(l.start)(e.dataItem),g=a.getter(l.end)(e.dataItem),V=a.getter(l.title)(e.dataItem),h=a.getter(l.percentComplete)(e.dataItem),A=a.getter(l.children)(e.dataItem),T=a.getter(l.isSelected)(e.dataItem),y=r&&r.getTime(),D=g&&g.getTime(),m=A&&A.length,C=!m&&y===D,I=y&&D&&Q.isInRange(s.start,s.end,r,g),[W,Y]=t.useState(!1),N=t.useRef(null),R=t.useRef(null);a.useDraggable(N,{onPress:c.onDependencyHandlePress,onDrag:c.onDependencyHandleDrag,onRelease:c.onDependencyHandleRelease}),a.useDraggable(R,{onPress:c.onDependencyHandlePress,onDrag:c.onDependencyHandleDrag,onRelease:c.onDependencyHandleRelease});const x=t.useCallback(n=>{o.onTaskClick&&o.onTaskClick({dataItem:e.dataItem,level:e.level,nativeEvent:n&&n.nativeEvent,syntheticEvent:n,target:null})},[e.dataItem,e.level]),H=t.useCallback(n=>{o.onTaskDoubleClick&&o.onTaskDoubleClick({dataItem:e.dataItem,level:e.level,nativeEvent:n&&n.nativeEvent,syntheticEvent:n,target:null})},[e.dataItem,e.level]),G=t.useCallback(n=>{o.onTaskContextMenu&&o.onTaskContextMenu({dataItem:e.dataItem,level:e.level,nativeEvent:n&&n.nativeEvent,syntheticEvent:n,target:null})},[e.dataItem,e.level]),K=t.useCallback(n=>{o.onTaskRemoveClick&&o.onTaskRemoveClick({dataItem:e.dataItem,level:e.level,nativeEvent:n&&n.nativeEvent,syntheticEvent:n,target:null})},[e.dataItem,e.level]),M=t.useCallback(()=>{const n=s.start,z=s.end,b=_.current,k=u.current,q=f.current;if(!I||b===null||k===null)return;const w=b.clientWidth/(z.getTime()-n.getTime()),O=(r.getTime()-n.getTime())*w,F=(g.getTime()-r.getTime())*w,B=(b.offsetHeight-k.offsetHeight)/2;k.style.left=`${Math.round(C?O-i.MILESTONE_OFFSET:O)}px`,k.style.top=`${Math.round(B)}px`,C||(k.style.width=`${Math.round(F)}px`,q!==null&&(q.style.width=`${Math.round(F*(h||0))}px`)),Y(!0)},[s.start.getTime(),s.end.getTime(),y,D,I,h,$]);t.useEffect(M,[M]);const P={visibility:W?void 0:"hidden",display:I?void 0:"none"},v={userSelect:"none",display:c.draggedId===String(E)?"block":void 0};return t.createElement("td",{ref:_,key:E,role:"presentation"},C?t.createElement("div",{"aria-hidden":!0,className:a.classNames({"k-task":!0,"k-task-milestone":!0,"k-selected":T&&!Array.isArray(T)}),style:P,ref:u,[i.TASK_ID_ATT]:E,onClick:x,onDoubleClick:H,onContextMenu:G},t.createElement("div",{className:"k-task-milestone-content"}),c.isEnabled&&t.createElement("div",{className:"k-task-dot k-task-start",ref:N,style:v,...i.DEPENDENCY_DRAG_HANDLE_START_ATT}),c.isEnabled&&t.createElement("div",{className:"k-task-dot k-task-end",ref:R,style:v,...i.DEPENDENCY_DRAG_HANDLE_FINISH_ATT})):t.createElement("div",{"aria-hidden":!0,className:a.classNames({"k-task":!0,"k-task-summary":m,"k-task-single":!m,"k-selected":T&&!Array.isArray(T)}),ref:u,style:P,[i.TASK_ID_ATT]:E,onClick:x,onDoubleClick:H,onContextMenu:G},m?t.createElement("div",{className:"k-task-summary-progress",ref:f},t.createElement("div",{className:"k-task-summary-complete"})):t.createElement("div",{className:"k-task-complete",ref:f}),!m&&t.createElement(t.Fragment,null,t.createElement("div",{className:"k-task-content"},V),o.onTaskRemoveClick?t.createElement("span",{className:"k-task-actions"},t.createElement("span",{onClick:K,className:"k-link k-task-delete","aria-label":"Delete"},t.createElement(a.IconWrap,{name:"x",icon:U.xIcon}))):null),c.isEnabled&&t.createElement("div",{className:"k-task-dot k-task-start",ref:N,style:v,...i.DEPENDENCY_DRAG_HANDLE_START_ATT}),c.isEnabled&&t.createElement("div",{className:"k-task-dot k-task-end",ref:R,style:v,...i.DEPENDENCY_DRAG_HANDLE_FINISH_ATT})))});L.displayName="KendoReactGanttTask";exports.GanttTask=L;