@progress/kendo-react-gantt/components/BaseView.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 Pe=require("react"),u=require("../context/GanttContext.js"),Ye=require("../context/GanttViewContext.js"),qe=require("./GanttTask.js"),Oe=require("../hooks/useDictionaryStore.js"),Xe=require("./GanttDependency.js"),F=require("../utils/index.js"),O=require("@progress/kendo-react-data-tools"),R=require("../constants/index.js"),We=require("./GanttTreelist.js"),M=require("@progress/kendo-react-common");function Ve(d){const f=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const a in d)if(a!=="default"){const D=Object.getOwnPropertyDescriptor(d,a);Object.defineProperty(f,a,D.get?D:{enumerable:!0,get:()=>d[a]})}}return f.default=d,Object.freeze(f)}const e=Ve(Pe),X=e.forwardRef((d,f)=>{const{slotLevels:a,slotWidth:D,timelineHeaderCell:W}=d,{columns:A,noRecords:V,resizable:v,reorderable:z,sortable:$,sort:j,filter:K,columnMenuFilter:B,columnMenu:U,navigatable:J,row:Q,selectable:Z}=u.useGanttPropsContext(),{onDataStateChange:ee,onSortChange:te,onFilterChange:ne,onColumnMenuFilterChange:re,onExpandChange:oe,onRowClick:se,onRowDoubleClick:le,onRowContextMenu:ce,onColumnResize:k,onColumnReorder:ae,onDependencyCreate:b,onKeyDown:ie,onSelectionChange:ue,onHeaderSelectionChange:de}=u.useGanttEventsContext(),fe=u.useGanttRowHeightContext(),me=u.useGanttToolbarHeightContext(),m=u.useGanttTaskModelFieldsContext(),pe=u.useGanttDependencyModelFieldsContext(),H=u.useGanttTaskDataContext(),Ce=u.useGanttDependencyDataContext(),I=e.useRef(null),N=e.useRef(null),p=e.useRef(null),h=e.useRef(null),_=e.useRef(0),P=e.useRef(M.useId()),ge=e.useRef(M.useId()),c=e.useRef(null),Y=e.useRef(null),Re=e.useCallback(t=>{p.current&&p.current.scrollIntoView(t)},[]);e.useImperativeHandle(Y,()=>({scrollIntoView:Re})),e.useImperativeHandle(f,()=>Y.current);const E=e.useRef(0),y=e.useRef(0),T=e.useRef(0),x=e.useRef(0),C=e.useRef(null),L=e.useRef(null),[g,G]=e.useState(null),De=F.getTimelineHeader(a,I,W),be=F.getTimelineContent(a,N),w=F.getTimelineWidth(a,D),{extendedColumns:he,columnsWidth:Ee,columnsMap:ye}=e.useMemo(()=>{const t=O.readColumns([...A,{title:"",sortable:!1,resizable:!1,reorderable:!1,width:w,headerCell:()=>De,cell:qe.GanttTask,orderIndex:Number.MAX_SAFE_INTEGER,navigatable:!1}],{prevId:0,idPrefix:P.current});let r=0;return t.forEach((n,o,l)=>{const s=o+1===l.length,i=n.children.length===0;s?n.isAccessible=!1:(n.locked=!0,i&&(n.width=n.width||R.DEFAULT_COLUMN_WIDTH)),i&&(r+=parseFloat(String(n.width)))}),{extendedColumns:t,columnsWidth:r,columnsMap:O.mapColumns(t)}},[A,w]),[Te,xe]=Oe.useDictionaryStore(),S=e.useCallback(()=>I.current&&I.current.parentElement,[]),q=()=>{const t=S(),r=N.current,n=p.current&&p.current.tbodyElement;if(!t||!r||!n)return;const o=n.offsetTop,l=t.offsetLeft,s=w;r.style.top=o+"px",r.style.left=l+"px",r.style.width=s+"px",r.style.height=n.offsetHeight+"px"},we=()=>{const t=S();t&&(_.current=t.offsetLeft)};e.useEffect(q),e.useEffect(we);const ke=e.useCallback(t=>{if(!h.current)return;const r=t.columns.slice(0,t.columns.length-1);if(t.end)h.current.style.left="0px";else{const n=S();if(!n)return;h.current.style.left=n.offsetLeft-_.current+"px",q()}k({...t,columns:r})},[k]),He=e.useCallback(t=>{const r=t.columns.slice(0,t.columns.length-1);ae({...t,columns:r})},[k]),Ie=e.useCallback(t=>{const n=(c.current&&c.current.ownerDocument?c.current.ownerDocument:document).elementFromPoint(t.clientX,t.clientY),o=c.current;if(!n||!n.parentElement||!o)return;const l=o.parentElement,s=o.firstElementChild;if(!l||!s)return;const i=n.getAttribute(R.DEPENDENCY_DRAG_HANDLE);if(i){const Se=o.offsetTop,Fe=o.offsetLeft,Me=l.offsetTop,Ae=l.offsetLeft,Ne=s.scrollTop,_e=s.scrollLeft;T.current=Fe+Ae,x.current=Se+Me,E.current=t.clientX-T.current+_e,y.current=t.clientY-x.current+Ne,C.current=n.parentElement.getAttribute(R.TASK_ID_ATT),L.current=i}},[]),Le=e.useCallback(t=>{const r=c.current;if(!r)return;const n=r.firstElementChild;if(!n)return;const o=n.scrollTop,l=n.scrollLeft,s=t.clientX-T.current+l,i=t.clientY-x.current+o;Math.abs(E.current-s)<10&&Math.abs(y.current-i)<10||G({startX:E.current,startY:y.current,endX:s,endY:i})},[]),Ge=e.useCallback(t=>{const n=(c.current&&c.current.ownerDocument?c.current.ownerDocument:document).elementFromPoint(t.clientX,t.clientY);if(!n||!n.parentElement)return;const o=n.parentElement.getAttribute(R.TASK_ID_ATT),l=n.getAttribute(R.DEPENDENCY_DRAG_HANDLE);if(l&&o!==C.current&&b){let s;L.current==="start"?s=l==="start"?3:2:s=l==="start"?1:0,b({fromId:C.current,toId:o,type:s})}E.current=0,y.current=0,T.current=0,x.current=0,C.current=null,L.current=null,G(null)},[b,G]);return e.createElement(Ye.GanttViewContext,{tasksStore:[Te,xe],timelineWidth:w,dependencyDrag:{isEnabled:!!b,draggedId:C.current,onDependencyHandlePress:Ie,onDependencyHandleDrag:Le,onDependencyHandleRelease:Ge}},e.createElement("div",{className:"k-gantt-content",ref:c,style:{height:`calc(100% - ${me}px)`}},e.createElement(We.GanttTreeList,{treelistId:ge.current,ref:p,extendedColumns:he,columnsMap:ye,dataItemKey:m.id,data:H,idPrefix:P.current,navigatable:J,expandField:m.isExpanded,subItemsField:m.children,editField:m.isInEdit,selectedField:m.isSelected,onDataStateChange:ee,onSortChange:te,onFilterChange:ne,onExpandChange:oe,onRowClick:se,onRowDoubleClick:le,onRowContextMenu:ce,onColumnResize:ke,onColumnReorder:He,onColumnMenuFilterChange:re,onKeyDown:ie,onSelectionChange:ue,onHeaderSelectionChange:de,tableProps:{style:{width:Ee},className:"k-table k-table-md k-table-layout-fixed"},noRecords:V,rowHeight:fe,resizable:v,reorderable:z,sortable:$,sort:j,filter:K,columnMenuFilter:B,columnMenu:U,row:Q,selectable:Z,afterContent:e.createElement(e.Fragment,null,e.createElement("svg",{className:"k-gantt-dependencies-svg",ref:h,style:{left:0,top:0}},Ce.map(t=>e.createElement(Xe.GanttDependency,{key:M.getter(pe.id)(t),dependency:t}))),e.createElement("svg",{className:"k-gantt-dependencies-svg",style:{left:0,top:0,zIndex:3}},g&&e.createElement("polyline",{points:`${g.startX},${g.startY} ${g.endX},${g.endY}`})),H&&H.length?be:null)})))});X.displayName="KendoReactGanttBaseView";exports.BaseView=X;