UNPKG

@progress/kendo-react-gantt

Version:

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

www.telerik.com/kendo-react-ui

telerik/kendo-react

9 lines (8 loc) • 15.6 kB
1
2
3
4
5
6
7
8
9
/** * @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"),o=require("prop-types"),S=require("@progress/kendo-react-common"),c=require("@progress/kendo-react-data-tools"),D=require("@progress/kendo-react-treelist"),K=require("../utils/index.js");function Q(E){const p=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(E){for(const e in E)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(E,e);Object.defineProperty(p,e,t.get?t:{enumerable:!0,get:()=>E[e]})}}return p.default=E,Object.freeze(p)}const l=Q(J),N=class N extends l.Component{constructor(p){super(p),this.state={activeId:void 0,level:0},this.tableElement=null,this.tbodyElement=null,this.wrapperScrollLeft=0,this.wrapperScrollTop=0,this.updateOnScroll=!1,this.tbodyOffsetTop=0,this.prevData=[],this.flattedData=[],this.element=null,this.contextStateRef={current:void 0},this.navigationStateRef={current:void 0},this.scrollIntoView=e=>{if(!this.element)return;const{rowIndex:t=0}=e,{rowHeight:n=0}=this.props;this.element.scroll(0,(t-1)*n)},this.getColumns=e=>{const t=e.filter(a=>a.declarationIndex>=0&&a.parentIndex===-1),n=a=>(a.sort((i,r)=>i.declarationIndex-r.declarationIndex),a.map(i=>{const{declarationIndex:r,parentIndex:g,depth:u,colSpan:d,rowSpan:I,index:P,kFirst:b,groupable:O,children:R,...k}=i;return R.length?{children:n(R),...k}:k}));return n(t)},this.onKeyDown=e=>{if(c.tableKeyboardNavigation.onKeyDown(e,{navigatable:!1,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef}),this.props.onKeyDown){const{mode:t,cell:n}=c.getSelectionOptions(this.props.selectable),a={dataItems:this.getLeafDataItems(),mode:t,cell:n,componentId:this.props.treelistId,selectedField:this.props.selectedField,...this.getEventArguments(e)};this.props.onKeyDown.call(void 0,a)}},this.onFocus=e=>{c.tableKeyboardNavigation.onFocus(e,{contextStateRef:this.contextStateRef})},this.onRowDrag=e=>{if(this.props.onRowDrag){const t={...e,target:this};this.props.onRowDrag.call(void 0,t)}},this.onRowDrop=e=>{if(this.props.onRowDrop){const t={...e,target:this};this.props.onRowDrop.call(void 0,t)}},this.onColumnReorder=(e,t,n)=>{const{extendedColumns:a}=this.props,i=a[e].depth,r=d=>{do d++;while(d<a.length&&a[d].depth>i);return d},g=[...a],u=g.splice(e,r(e)-e);if(g.splice(e<t?r(t-u.length):t,0,...u),g.filter(d=>d.declarationIndex>=0).forEach((d,I)=>d.orderIndex=I),this.props.onColumnReorder){const d={target:this,columns:this.getColumns(g),nativeEvent:n};this.props.onColumnReorder.call(void 0,d)}},this.onColumnResize=(e,t,n,a,i)=>{if(this.props.onColumnResize){const r=this.props.extendedColumns.filter(u=>u.children.length===0).reduce((u,d)=>u+=parseFloat(String(d.width)),0);this.tableElement&&(this.tableElement.style.width=r+"px");const g={columns:this.getColumns(this.props.extendedColumns),totalWidth:r,index:e,nativeEvent:a,newWidth:t,oldWidth:n,end:i,target:this};this.props.onColumnResize.call(void 0,g)}},this.onScroll=e=>{const t=e.currentTarget.scrollLeft,n=e.currentTarget.scrollTop,{columnVirtualization:a,scrollable:i,rowHeight:r=0}=this.props,g=r,u=0;let d=!1;a&&Math.abs(this.wrapperScrollLeft-t)>u&&(this.wrapperScrollLeft=t,d=!0),i==="virtual"&&Math.abs(this.wrapperScrollTop-n)>g&&(this.wrapperScrollTop=n,d=!0),d&&(this.updateOnScroll=!0,this.forceUpdate())},this.calculateSizes=e=>{if(!e||this.props.scrollable==="none")return;const t=Array.from(e.childNodes),n=t.find(r=>r.nodeName==="TABLE"),a=this.props.toolbar&&t.find(r=>r.nodeType===1&&r.classList.contains("k-grid-toolbar"));let i=0;if(a){const r=a.style.boxSizing;a.style.boxSizing="border-box",i=parseFloat(String(window.getComputedStyle(a).height))||a.offsetHeight,a.style.boxSizing=r,a.getAttribute("style")||a.removeAttribute("style")}this.tbodyOffsetTop=n.tBodies[0].offsetTop,D.setHeaderRowsTop(n,i)},this.onItemChange=e=>{if(e.field===this.props.expandField){const t=this.props.onExpandChange;if(t){const n={...this.getEventArguments(e.syntheticEvent),dataItem:e.dataItem,level:e.level,value:e.value};t.call(void 0,n)}return}if(this.props.onItemChange){const t={...this.getEventArguments(e.syntheticEvent),dataItem:e.dataItem,level:e.level,field:e.field,value:e.value};this.props.onItemChange.call(void 0,t)}},this.onHeaderSelectionChange=e=>{if(this.props.onHeaderSelectionChange){const t={field:e.field,nativeEvent:e.syntheticEvent&&e.syntheticEvent.nativeEvent,syntheticEvent:e.syntheticEvent,target:this,dataItems:this.getLeafDataItems()};this.props.onHeaderSelectionChange.call(void 0,t)}},this.selectionRelease=e=>{if(this.props.onSelectionChange){const t={syntheticEvent:void 0,target:this,selectedField:this.props.selectedField||"",componentId:this.props.treelistId,dataItems:this.getLeafDataItems(),dataItem:null,level:[],...e};this.props.onSelectionChange.call(void 0,t)}},this.onSortChange=(e,t,n)=>{this.onDataStateChange(this.props.onSortChange,{sort:t,field:n},e)},this.onFilterChange=e=>{const{filter:t,field:n}=e;this.onDataStateChange(this.props.onFilterChange,{filter:t,field:n},e.syntheticEvent)},this.onColumnMenuFilterChange=(e,t,n)=>{if(!n)return;const{onColumnMenuFilterChange:a}=this.props;if(!a)return;const i={syntheticEvent:e,filter:t,field:n,target:this,nativeEvent:e.nativeEvent};a.call(void 0,i)},this.onExpandChange=(e,t,n)=>{const{expandField:a,onExpandChange:i}=this.props;if(a&&i){const r={...this.getEventArguments(e),dataItem:t,level:n,value:K.isExpanded(t,this.props.expandField)};i.call(void 0,r)}},this.onRowClick=(e,t)=>{if(this.props.onRowClick&&e.target.nodeName==="TD"){const n={dataItem:t.dataItem,level:t.level,...this.getEventArguments(e)};this.props.onRowClick.call(void 0,n)}},this.rowDoubleClick=(e,t)=>{if(this.props.onRowDoubleClick&&e.target.nodeName==="TD"){const n={dataItem:t.dataItem,level:t.level,...this.getEventArguments(e)};this.props.onRowDoubleClick.call(void 0,n)}},this.rowContextMenu=(e,t)=>{if(this.props.onRowContextMenu&&e.target.nodeName==="TD"){const n={dataItem:t.dataItem,level:t.level,...this.getEventArguments(e)};this.props.onRowContextMenu.call(void 0,n)}},this.onPageChange=e=>{if(this.props.onPageChange){const t={...this.getEventArguments(e.syntheticEvent),skip:e.skip,take:e.take};this.props.onPageChange.call(void 0,t)}},this.onDataStateChange=(e,t,n)=>{if(e&&e.call(void 0,{...this.getEventArguments(n),...t}),this.props.onDataStateChange){const a={...this.getEventArguments(n),dataState:{...this.getDataState(),...t}};this.props.onDataStateChange.call(void 0,a)}},this.getDataState=()=>({filter:this.props.filter,sort:this.props.sort}),this.getEventArguments=e=>({nativeEvent:e&&e.nativeEvent,syntheticEvent:e,target:this}),this.getLeafDataItems=()=>this.flatData.map(e=>e.dataItem),this.dragLogic=new c.CommonDragLogic(this.onColumnReorder,S.noop,S.noop),this.columnResize=new c.ColumnResize(this.onColumnResize),c.tableKeyboardNavigation.onConstructor({navigatable:!!p.navigatable,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef,idPrefix:p.idPrefix})}get document(){if(S.canUseDOM)return this.element&&this.element.ownerDocument||document}componentDidMount(){this.calculateSizes(this.element),c.tableKeyboardNavigation.onComponentDidMount({scope:this.element||void 0,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef})}getSnapshotBeforeUpdate(){return c.tableKeyboardNavigation.onGetSnapshotBeforeUpdate({document:this.document,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef}),null}componentDidUpdate(p){p.columns!==this.props.columns&&this.calculateSizes(this.element),c.tableKeyboardNavigation.onComponentDidUpdate({scope:this.element||void 0,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef})}componentWillUnmount(){this.columnResize.columns=[],this.dragLogic.columns=[],this.prevData=[],this.flattedData=[],this.updateOnScroll=!1}render(){const{filterRow:p,scrollable:e="scrollable",resizable:t=!1,reorderable:n=!1,skip:a,take:i,afterContent:r,extendedColumns:g=[],columnsMap:u}=this.props,d=g.some(s=>!!s.filter)||p!==void 0,I=p||c.FilterRow,P=c.tableKeyboardNavigationTools.getIdPrefix(this.navigationStateRef);this.columnResize.columns=g,this.columnResize.resizable=t,this.dragLogic.columns=g,this.dragLogic.reorderable=n,this.dragLogic.groupable=!1;const b=g.filter(s=>s.children.length===0),O=l.createElement(c.Header,{headerRow:l.createElement(c.HeaderRow,{sort:this.props.sort,sortable:this.props.sortable,sortChange:this.onSortChange,selectionChange:this.onHeaderSelectionChange,columns:g,columnsMap:u,cellRender:this.props.headerCellRender,columnResize:this.columnResize,columnMenu:this.props.columnMenu,columnMenuFilter:this.props.columnMenuFilter,columnMenuFilterChange:this.onColumnMenuFilterChange,pressHandler:this.dragLogic.pressHandler,dragHandler:this.dragLogic.dragHandler,releaseHandler:this.dragLogic.releaseHandler}),filterRow:d&&l.createElement(I,{columns:b,filter:this.props.filter,filterChange:this.onFilterChange,sort:this.props.sort,ariaRowIndex:u.length+1})||void 0,columnResize:this.columnResize}),R=this.props.style||{},{colSpans:k,hiddenColumns:A}=c.tableColumnsVirtualization({enabled:this.props.columnVirtualization,columns:b,scrollLeft:this.wrapperScrollLeft,tableViewPortWidth:parseFloat((R.width||"").toString())}),j=(s,m,F,z,T,x)=>b.map((h,f)=>{if(A[f])return null;const y=h.id?h.id:f,L=`k-table-td ${h.className?h.className+" ":""}${h.locked?"k-grid-content-sticky":""}`,w={id:c.tableKeyboardNavigationTools.generateNavigatableId(`${F}-${String(f)}`,P),colSpan:k[f],dataItem:s.dataItem,field:h.field,format:h.format,className:L||void 0,render:this.props.cellRender,onChange:this.onItemChange,selectionChange:this.props.onSelectionChange?C=>{this.onSelectionChange({event:C,item:s,columnIndex:f,dataIndex:T})}:void 0,level:s.level,expandable:h.expandable,expanded:z,hasChildren:K.hasChildren(s.dataItem,this.props.subItemsField),colIndex:f,ariaColumnIndex:h.ariaColumnIndex,onExpandChange:this.onExpandChange,style:h.left!==void 0&&{left:h.left,right:h.right,borderRightWidth:h.rightBorder?"1px":""}||{},isSelected:Array.isArray(x)&&x.indexOf(f)>-1};return m&&h.editCell?l.createElement(h.editCell,{...w,onChange:this.onItemChange,key:y}):h.cell?l.createElement(h.cell,{key:y,...w}):l.createElement(D.TreeListCell,{key:y,...w})});let v=this.flatData;const H=v.length;a!==void 0&&i!==void 0&&(v=v.slice(a,a+i)),e==="virtual"&&(v=D.tableRowsVirtualization({rows:v,tableViewPortHeight:parseFloat((R.height||R.maxHeight||"").toString()),scrollTop:this.wrapperScrollTop}),this.updateOnScroll=!1);const U=v.map(s=>s.level),V=u.length+(d?1:0)+1,B=v.length>0&&v.map((s,m)=>{const F=S.getter(this.props.editField||"")(s.dataItem),z=S.getter(this.props.dataItemKey)(s.dataItem),T=String(z||s.level.join(".")),x=K.isExpanded(s.dataItem,this.props.expandField),h=this.props.selectedField?S.getter(this.props.selectedField)(s.dataItem):void 0,f={key:T,level:s.level,levels:U,dataItem:s.dataItem,selectedField:this.props.selectedField,rowHeight:s.height,render:this.props.rowRender,onDrop:this.onRowDrop,onDrag:this.onRowDrag,onClick:C=>this.onRowClick(C,s),onDoubleClick:C=>this.rowDoubleClick(C,s),onContextMenu:C=>this.rowContextMenu(C,s),isAltRow:m%2!==0,expanded:x,rowIndex:m,ariaRowIndex:V+m,ariaSetSize:s.levelCount,ariaPosInSet:s.level[s.level.length-1]+1,isSelected:typeof h=="boolean"&&h},y=this.props.editRow,L=this.props.row||D.TreeListRow,w=j(s,F,T,x,m,h);return F&&y?l.createElement(y,{...f,key:f.key},w):l.createElement(L,{...f,key:f.key},w)})||l.createElement("tr",{className:"k-table-row k-grid-norecords"},l.createElement("td",{className:"k-table-td",colSpan:b.length},this.props.noRecords||l.createElement(D.TreeListNoRecords,null))),q=s=>this.props.sort&&this.props.sort.some(m=>m.field===s),W=l.createElement("colgroup",{ref:s=>{this.columnResize.colGroupMain=s}},b.map((s,m)=>l.createElement("col",{key:m.toString(),className:q(s.field)?"k-sorted":void 0,style:s.width!==void 0?{width:s.width}:void 0}))),$=this.props.columnVirtualization||this.props.scrollable==="virtual",G=this.props.selectable&&this.props.selectable.drag?"none":void 0,_=this.props.tableProps||{};return l.createElement(c.TableKeyboardNavigationContext.Provider,{value:this.contextStateRef.current},l.createElement("div",{id:this.props.treelistId,style:this.props.style,className:S.classNames("k-grid k-grid-md",this.props.className,{"k-treelist-scrollable":e!=="none"}),ref:s=>{this.element=s},onScroll:$?this.onScroll:void 0,onKeyDown:this.onKeyDown,onFocus:this.onFocus,"aria-rowcount":H,"aria-colcount":b.length,role:"treegrid",...c.tableKeyboardNavigationScopeAttributes},this.props.toolbar,l.createElement(c.TableSelection,{selectable:this.props.selectable,onRelease:this.selectionRelease,childRef:s=>{this.tableElement=s}},l.createElement("table",{className:"k-table k-table-md",...this.props.tableProps||{},style:{..._.style||{},userSelect:G},role:"presentation"},W,O,l.createElement("tbody",{className:"k-table-tbody",...c.tableKeyboardNavigationBodyAttributes,ref:s=>{this.tbodyElement=s},role:"presentation"},B))),this.props.pager&&l.createElement(this.props.pager,{className:"k-grid-pager",total:H,skip:a,take:i,onPageChange:this.onPageChange}),n&&l.createElement(l.Fragment,null,l.createElement(c.DropClue,{ref:this.dragLogic.refDropElementClue}),l.createElement(c.DragClue,{ref:this.dragLogic.refDragElementClue})),r))}get flatData(){const{data:p=[],rowHeight:e=0}=this.props;let t=0;const n=()=>{const i={height:e,offsetTop:t};return t+=i.height,i},a=this.updateOnScroll&&this.prevData===p&&this.tbodyOffsetTop>0&&this.flattedData.length?this.flattedData:p.map(i=>({...i,...n()}));return this.prevData=p,this.flattedData=a,a}onSelectionChange(p){if(this.props.onSelectionChange){const{event:e,item:t,dataIndex:n,columnIndex:a}=p,{mode:i,cell:r}=c.getSelectionOptions(this.props.selectable),g={...this.getEventArguments(e.syntheticEvent),dataItem:t.dataItem,level:t.level,startColIndex:a,endColIndex:a,startRowIndex:n,endRowIndex:n,dataItems:this.getLeafDataItems(),altKey:!1,ctrlKey:!1,shiftKey:!1,metaKey:!1,mode:i,cell:r,isDrag:!1,componentId:this.props.treelistId,selectedField:this.props.selectedField||""};this.props.onSelectionChange.call(void 0,g)}}};N.propTypes={data:o.array,resizable:o.bool,reorderable:o.bool,sortable:o.oneOfType([o.bool,o.shape({mode:o.oneOf(["single","multiple"]),allowUnsort:o.bool})]),onSortChange:o.func,sort:o.array,columns:o.arrayOf(o.object),columnVirtualization:o.bool,filter:o.array,onFilterChange:o.func,filterRow:o.any,toolbar:o.any,noRecords:o.any,onExpandChange:o.func,expandField:o.string,subItemsField:o.string,selectedField:o.string,onSelectionChange:o.func,onHeaderSelectionChange:o.func,onRowClick:o.func,onItemChange:o.func,editField:o.string,scrollable:o.oneOf(["none","scrollable","virtual"]),rowHeight:o.number,style:o.object,tableProps:o.object,pager:o.any,skip:o.number,take:o.number,onPageChange:o.func,onDataStateChange:o.func,onColumnResize:o.func,onColumnReorder:o.func,extendedColumns:o.arrayOf(o.object),columnsMap:o.arrayOf(o.array),dataItemKey:o.string.isRequired,afterContent:o.any,navigatable:o.bool,idPrefix:o.string,treelistId:o.string},N.contextType=c.TableKeyboardNavigationContext;let M=N;exports.GanttTreeList=M;