@progress/kendo-react-taskboard/TaskBoard.js

KendoReact TaskBoard 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 ce=require("react"),J=require("prop-types"),Q=require("./package-metadata.js"),g=require("@progress/kendo-react-common"),V=require("./TaskBoardColumnBase.js"),ie=require("./TaskBoardCardBase.js"),f=require("./constants.js"),_=require("./utils.js"),q=require("./card/Card.js"),Z=require("./column/Column.js");function le(o){const B=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const D in o)if(D!=="default"){const I=Object.getOwnPropertyDescriptor(o,D);Object.defineProperty(B,D,I.get?I:{enumerable:!0,get:()=>o[D]})}}return B.default=o,Object.freeze(B)}const t=le(ce),L=t.forwardRef((o,B)=>{const D=!g.validatePackage(Q.packageMetadata,{component:"TaskBoard"}),I=g.getLicenseMessage(Q.packageMetadata),{columnData:p=[],className:$,style:ee,id:te,taskData:l=[],onChange:d}=o,j=t.useRef(null),U=t.useRef(null);t.useImperativeHandle(j,()=>({props:o})),t.useImperativeHandle(B,()=>j.current);const ne=t.Children.toArray(o.children).filter(e=>e&&e.type&&e.type.displayName==="KendoReactTaskBoardToolbar"),X=t.useRef(null),k=t.useRef(null),S=t.useRef(null),[b,M]=t.useState(null),[x,w]=t.useState(null),[A,N]=t.useState({top:0,left:0}),[ae,Y]=t.useState(),P=t.useRef(null),z=t.useRef(null),O=t.useMemo(()=>{const e={};return(b||l).forEach(a=>{const n=a.status;e[n]||(e[n]=[]),e[n].push(a)}),e},[l,b]),se=t.useCallback(e=>{const a=e.originalEvent.target;if(a.closest("button,input,.k-link,.k-taskboard-preview-pane"))return;const n=_.closestTaskBoardElement(a),s=U.current;if(n&&s){const c=n.type===f.TASKBOARD_COLUMN;if(c&&!a.closest(".k-taskboard-column-header"))return;const h=n.element.getBoundingClientRect(),y=s.getBoundingClientRect();S.current={x:e.clientX-h.left+y.left,y:e.clientY-h.top+y.top};const u=c?p:l,v=c?w:M,m=u.findIndex(E=>String(E.id)===n.id),C=u[m];if(m===-1||C.edit)return;const i=g.clone(C);i.isPlaceholder=!0;const R=[...u];R[m]=i,k.current={...n,index:m,item:C,width:h.width,height:h.height},Y(m),N({top:e.clientY-S.current.y,left:e.clientX-S.current.x}),v(R)}},[p,l]),oe=t.useCallback(e=>{const a=k.current,n=P.current&&P.current.element||z.current;if(a&&n){N({top:e.clientY-S.current.y,left:e.clientX-S.current.x}),n.style.visibility="hidden";const s=document.elementFromPoint(e.clientX,e.clientY);if(n.style.visibility="",s&&s.getAttribute(f.TASKBOARD_PLACEHOLDER))return;const c=s&&_.closestTaskBoardElement(s);if(c){let T;const h=c.type===a.type,y=a.type===f.TASKBOARD_COLUMN,u=(y?x:b)||[],v=y?w:M;if(y||h){if(T=_.findIndexes(a.id,c.id,u),T){const m=u[T.dragIndex],C=u[T.dropIndex],i=g.clone(m);y||(i.status=C.status);const R=[...u];R.splice(T.dragIndex,1),R.splice(T.dropIndex,0,i),a.index=T.dropIndex,v(R)}}else{const m=u.findIndex(i=>String(i.id)===a.id),C=p.findIndex(i=>String(i.id)===c.id);if(m!==-1&&C!==-1){const i=u[m],E=p[C].status;if(O[E])return;i.status=E;const K=[...u];K.splice(m,1),K.push(i),a.index=K.length-1,v(K)}}}}},[x,b,p,O]),re=t.useCallback(()=>{const e=k.current;if(d&&e){const n=(e.type===f.TASKBOARD_COLUMN?x:b)||[],s=n[e.index];delete s.isPlaceholder;const c={data:n,type:e.type,previousItem:{...e.item,index:ae},item:{...s,index:e.index}};d.call(void 0,c)}k.current=null,S.current=null,M(null),w(null),N({top:0,left:0}),Y(void 0)},[x,b,d]);g.useDraggable(X,{onDragStart:se,onDrag:oe,onDragEnd:re});const r=k.current,H=t.useCallback(e=>{const n={data:[...l,e],type:f.TASKBOARD_TASK,previousItem:null,item:e};d.call(void 0,n)},[d,l]),W=t.useCallback((e,a)=>{const n=l.slice(),s=l.indexOf(a);s!==-1&&n.splice(s,1,e);const c={data:n,type:f.TASKBOARD_TASK,previousItem:a,item:e};d.call(void 0,c)},[d,l]),F=t.useCallback(e=>{const n={data:l.filter(s=>s!==e),type:f.TASKBOARD_TASK,previousItem:e,item:null};d.call(void 0,n)},[d,l]),G=t.useCallback((e,a)=>{const n=p.slice(),s=n.indexOf(a);s!==-1&&(e?n.splice(s,1,e):n.splice(s,1));const c={data:n,type:f.TASKBOARD_COLUMN,previousItem:a,item:e};d.call(void 0,c)},[d,p]);return t.createElement("div",{id:te,style:ee,ref:U,className:g.classNames("k-taskboard",$)},ne,t.createElement("div",{className:"k-taskboard-content",style:r?{userSelect:"none"}:void 0},t.createElement("div",{className:"k-taskboard-columns-container",ref:X},(x||p).map(e=>t.createElement(V.TaskBoardColumnBase,{key:e.id,tabIndex:o.tabIndex,column:e,tasks:O[e.status]||[],dragTargetRef:k,onTaskCreate:H,onTaskEdit:W,onTaskDelete:F,onColumnChange:G,columnComponent:o.column||Z.TaskBoardColumn,cardComponent:o.card||q.TaskBoardCard,priorities:o.priorities})))),r&&r.type===f.TASKBOARD_TASK&&t.createElement(ie.TaskBoardCardBase,{elementRef:P,style:{position:"absolute",width:r.width,height:r.height,top:A.top,left:A.left,zIndex:10,borderLeftColor:r.item.priority?r.item.priority.color:r.item.color},task:r.item,dragTargetRef:k,cardComponent:o.card||q.TaskBoardCard,onDeleteTask:g.noop,showEditPane:g.noop}),r&&r.type===f.TASKBOARD_COLUMN&&t.createElement(V.TaskBoardColumnBase,{elementRef:z,style:{position:"absolute",width:r.width,height:r.height,top:A.top,left:A.left,zIndex:10},cardComponent:o.card||q.TaskBoardCard,columnComponent:o.column||Z.TaskBoardColumn,column:r.item,tasks:O[r.item.status],priorities:o.priorities,dragTargetRef:k,onTaskDelete:F,onColumnChange:G,onTaskEdit:W,onTaskCreate:H}),D&&t.createElement(g.WatermarkOverlay,{message:I}))});L.propTypes={columnData:J.array.isRequired,taskData:J.array.isRequired};L.displayName="KendoReactTaskBoard";exports.TaskBoard=L;