@progress/kendo-react-gantt/Gantt.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 Fe=require("react"),n=require("prop-types"),E=require("./utils/index.js"),qe=require("@progress/kendo-react-intl"),Ge=require("./context/GanttContext.js"),y=require("./views/GanttWeekView.js"),A=require("./views/GanttDayView.js"),P=require("./views/GanttMonthView.js"),N=require("./views/GanttYearView.js"),Ie=require("@progress/kendo-react-treelist"),c=require("@progress/kendo-react-common"),He=require("./hooks/useControlledState.js"),ze=require("./components/toolbar/view-selector/ViewSelectorList.js"),Ae=require("./components/toolbar/view-selector/ViewSelector.js"),Pe=require("./components/toolbar/Toolbar.js"),Ne=require("@progress/kendo-react-buttons"),O=require("./constants/index.js"),Oe=require("./package-metadata.js"),We=require("./components/toolbar/AddButton.js");function je(e){const k=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const d in e)if(d!=="default"){const m=Object.getOwnPropertyDescriptor(e,d);Object.defineProperty(k,d,m.get?m:{enumerable:!0,get:()=>e[d]})}}return k.default=e,Object.freeze(k)}const a=je(Fe),V=a.forwardRef((e,k)=>{const d=!c.validatePackage(Oe.packageMetadata,{component:"Gantt"}),{columns:m=h.columns,taskData:x=h.taskData,dependencyData:W=h.dependencyData,style:j,className:K,noRecords:L,timezone:F,rowHeight:_=h.rowHeight,resizable:B,reorderable:Y,sortable:U,sort:$,filter:J,columnMenuFilter:Q,columnMenu:X,navigatable:Z,toolbar:q,row:p,selectable:ee}=e,C=new Map;C.set(A.GanttDayView,A.ganttDayViewDefaultProps),C.set(P.GanttMonthView,P.ganttMonthViewDefaultProps),C.set(y.GanttWeekView,y.ganttWeekViewDefaultProps),C.set(N.GanttYearView,N.ganttYearViewDefaultProps);const ne=qe.useInternationalization(),{fields:o}=a.useMemo(()=>E.getTaskModelFields(e.taskModelFields),[e.taskModelFields]),{fields:te}=a.useMemo(()=>E.getDependencyModelFields(e.dependencyModelFields),[e.dependencyModelFields]),G=a.useCallback(E.expandedChildren(o.isExpanded,o.children),[o.isExpanded,o.children]),S=a.useRef(null),i=a.useRef(null),u=a.useRef(null),w=a.useRef(null),f=a.useRef(null),ae=a.useCallback(t=>{const r=c.getter(o.start)(t),g=c.getter(o.end)(t),T=c.getter(o.isSelected)(t);(!i.current||r<i.current)&&(i.current=r),(!u.current||g>u.current)&&(u.current=g),T&&(w.current=t)},[o.start,o.end]),b=a.useMemo(()=>(i.current=null,u.current=null,w.current=null,Ie.flatData(x,G,ae)),[x,G]);(!i.current||!u.current)&&(i.current=new Date(O.DEFAULT_DATE),u.current=new Date(O.DEFAULT_DATE));const R=a.Children.toArray(e.children||[]).map(t=>{var r;return a.isValidElement(t)?a.cloneElement(t,{...C.get(t.type),...(r=t.props)!=null?r:{}}):t}),le=a.cloneElement(a.createElement(y.GanttWeekView,null),C.get(y.GanttWeekView)),I=R.length?R[0]:le,[H,oe]=He.useControlledState(e.defaultView||I.props.name,e.view,e.onViewChange),s=R.find(t=>t.props.name===H)||I,re=typeof s.props.dateRange=="function"?s.props.dateRange.call(void 0,{intl:ne,tasksStart:i.current,tasksEnd:u.current,timezone:F}):s.props.dateRange,M=a.useRef(null),[ce,ie]=a.useState(0);c.useIsomorphicLayoutEffect(()=>{M.current&&ie(M.current.element.offsetHeight)},[]);const ue=a.useCallback(t=>{S.current&&S.current.scrollIntoView(t)},[]),z=a.useRef(null),l=a.useRef(null);a.useImperativeHandle(l,()=>({props:e,element:z.current,scrollIntoView:ue})),a.useImperativeHandle(k,()=>l.current);const se=a.useCallback(t=>{e.onDataStateChange&&e.onDataStateChange.call(void 0,{...t,target:l.current})},[e.onDataStateChange]),de=a.useCallback(t=>{e.onSortChange&&e.onSortChange.call(void 0,{...t,target:l.current})},[e.onSortChange]),Ce=a.useCallback(t=>{e.onKeyDown&&e.onKeyDown.call(void 0,{...t,target:l.current})},[e.onKeyDown]),ge=a.useCallback(t=>{e.onSelectionChange&&e.onSelectionChange.call(void 0,{...t,target:l.current})},[e.onSelectionChange]),ke=a.useCallback(t=>{e.onHeaderSelectionChange&&e.onHeaderSelectionChange.call(void 0,{...t,target:l.current})},[e.onHeaderSelectionChange]),fe=a.useCallback(t=>{e.onFilterChange&&e.onFilterChange.call(void 0,{...t,target:l.current})},[e.onFilterChange]),he=a.useCallback(t=>{e.onColumnMenuFilterChange&&e.onColumnMenuFilterChange.call(void 0,{...t,target:l.current})},[e.onColumnMenuFilterChange]),me=a.useCallback(t=>{e.onExpandChange&&e.onExpandChange.call(void 0,{...t,target:l.current})},[e.onExpandChange]),we=a.useCallback(t=>{e.onAddClick&&e.onAddClick.call(void 0,{...t,target:l.current,selectedDataItem:w.current,slotStart:f.current&&new Date(f.current.start.getTime()),slotEnd:f.current&&new Date(f.current.end.getTime())})},[e.onAddClick]),be=a.useCallback(t=>{e.onColumnResize&&e.onColumnResize.call(void 0,{...t,target:l.current})},[e.onColumnResize]),Re=a.useCallback(t=>{e.onColumnReorder&&e.onColumnReorder.call(void 0,{...t,target:l.current})},[e.onColumnReorder]),De=a.useCallback(t=>{e.onRowClick&&e.onRowClick.call(void 0,{...t,target:l.current})},[e.onRowClick]),ye=a.useCallback(t=>{e.onRowDoubleClick&&e.onRowDoubleClick.call(void 0,{...t,target:l.current})},[e.onRowClick]),Se=a.useCallback(t=>{e.onRowContextMenu&&e.onRowContextMenu.call(void 0,{...t,target:l.current})},[e.onRowClick]),Me=a.useCallback(t=>{e.onTaskClick&&e.onTaskClick.call(void 0,{...t,target:l.current})},[e.onTaskClick]),Te=a.useCallback(t=>{e.onTaskDoubleClick&&e.onTaskDoubleClick.call(void 0,{...t,target:l.current})},[e.onTaskDoubleClick]),ve=a.useCallback(t=>{e.onTaskContextMenu&&e.onTaskContextMenu.call(void 0,{...t,target:l.current})},[e.onTaskContextMenu]),Ee=a.useCallback(t=>{e.onTaskRemoveClick&&e.onTaskRemoveClick.call(void 0,{...t,target:l.current})},[e.onTaskRemoveClick]),Ve=a.useCallback(t=>{if(e.onDependencyCreate){let r,g;const T=c.getter(o.id);for(let v=0;v<b.length;v++){const xe=b[v],D=T(xe.dataItem);if(String(D)===t.fromId&&(r=D),String(D)===t.toId&&(g=D),r&&g)break}e.onDependencyCreate.call(void 0,{fromId:r,toId:g,target:l.current,type:t.type})}},[e.onDependencyCreate,o,b]);return a.createElement(Ge.GanttContext,{dateRange:re,taskData:b,dependencyData:W,taskModelFields:o,dependencyModelFields:te,views:R,activeView:[H,oe],rowHeight:_,toolbarHeight:ce,props:{columns:m,noRecords:L,timezone:F,resizable:B,reorderable:Y,sortable:U,sort:$,filter:J,columnMenuFilter:Q,columnMenu:X,navigatable:Z,row:p,selectable:ee},events:{onDataStateChange:se,onSortChange:de,onFilterChange:fe,onColumnMenuFilterChange:he,onExpandChange:me,onRowClick:De,onRowDoubleClick:ye,onRowContextMenu:Se,onColumnResize:be,onColumnReorder:Re,onDependencyCreate:e.onDependencyCreate&&Ve,onKeyDown:Ce,onSelectionChange:ge,onHeaderSelectionChange:ke},taskEvents:{onTaskClick:Me,onTaskDoubleClick:Te,onTaskContextMenu:ve,onTaskRemoveClick:e.onTaskRemoveClick&&Ee}},a.createElement("div",{ref:z,role:"application",style:j,className:c.classNames("k-gantt",K)},a.createElement(Pe.Toolbar,{ref:M},q&&q.addTaskButton?a.createElement(We.AddButton,{selectedTask:w.current,onClick:we}):null,a.createElement(Ne.ToolbarSpacer,null),a.createElement(Ae.ViewSelector,null,a.createElement(ze.ViewSelectorList,null))),s&&a.createElement(s.type,{key:s.props.name,ref:S,...s.props,firstSlotRangeRef:f}),d&&a.createElement(c.WatermarkOverlay,null)))}),h={taskData:[],dependencyData:[],columns:[],rowHeight:40};V.propTypes={taskData:n.array,taskModelFields:n.shape({id:n.string,start:n.string,end:n.string,title:n.string,percentComplete:n.string,parentId:n.string,isRollup:n.string,isExpanded:n.string,children:n.string,isInEdit:n.string}),dependencyData:n.array,dependencyModelFields:n.shape({id:n.string,fromId:n.string,toId:n.string,type:n.string}),columns:n.arrayOf(n.shape({width:n.number,cell:n.any,editCell:n.any,headerCell:n.any,filter:n.any,children:n.any,field:n.string,title:n.string,sortable:n.any,expandable:n.bool,headerSelectionValue:n.bool,format:n.string,headerClassName:n.string,className:n.string,resizable:n.bool,reorderable:n.bool,minResizableWidth:n.number,orderIndex:n.number,columnMenu:n.any})),sort:n.array,filter:n.array,columnMenuFilter:n.array,columnMenu:n.any,style:n.object,className:n.string,children:n.any,timezone:n.string,defaultView:n.string,view:n.string,rowHeight:n.number,navigatable:n.bool,onViewChange:n.func,onDataStateChange:n.func,onSortChange:n.func,onFilterChange:n.func,onExpandChange:n.func,onRowClick:n.func,onColumnResize:n.func,onColumnReorder:n.func};V.displayName="KendoReactGantt";exports.Gantt=V;exports.ganttDefaultProps=h;