@progress/kendo-react-taskboard 7.0.0-develop.9 → 7.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/TaskBoardCardBase.d.ts +0 -1
- package/TaskBoardColumnBase.d.ts +0 -1
- package/dist/cdn/js/kendo-react-taskboard.js +1 -1
- package/index.js +1 -1
- package/index.mjs +99 -100
- package/package.json +13 -12
package/TaskBoardCardBase.d.ts
CHANGED
package/TaskBoardColumnBase.d.ts
CHANGED
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
(function(r,G){typeof exports=="object"&&typeof module<"u"?G(exports,require("react"),require("prop-types"),require("@progress/kendo-licensing"),require("@progress/kendo-react-common"),require("@progress/kendo-react-intl"),require("@progress/kendo-react-buttons"),require("@progress/kendo-react-inputs"),require("@progress/kendo-svg-icons"),require("@progress/kendo-react-dialogs"),require("@progress/kendo-react-layout"),require("@progress/kendo-react-popup"),require("@progress/kendo-react-dropdowns"),require("@progress/kendo-react-labels"),require("@progress/kendo-react-form")):typeof define=="function"&&define.amd?define(["exports","react","prop-types","@progress/kendo-licensing","@progress/kendo-react-common","@progress/kendo-react-intl","@progress/kendo-react-buttons","@progress/kendo-react-inputs","@progress/kendo-svg-icons","@progress/kendo-react-dialogs","@progress/kendo-react-layout","@progress/kendo-react-popup","@progress/kendo-react-dropdowns","@progress/kendo-react-labels","@progress/kendo-react-form"],G):(r=typeof globalThis<"u"?globalThis:r||self,G(r.KendoReactTaskboard={},r.React,r.PropTypes,r.KendoLicensing,r.KendoReactCommon,r.KendoReactIntl,r.KendoReactButtons,r.KendoReactInputs,r.KendoSvgIcons,r.KendoReactDialogs,r.KendoReactLayout,r.KendoReactPopup,r.KendoReactDropdowns,r.KendoReactLabels,r.KendoReactForm))})(this,function(r,G,ot,it,M,ue,w,De,A,tt,me,rt,lt,he,ye){"use strict";function at(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const s=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(a,o,s.get?s:{enumerable:!0,get:()=>e[o]})}}return a.default=e,Object.freeze(a)}const t=at(G),P=at(ot),st={name:"@progress/kendo-react-taskboard",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},dt="taskBoard.toolbarAddColumnButton",ct="taskBoard.toolbarSearchField",be="taskBoard.editColumnButton",ve="taskBoard.addCardButton",we="taskBoard.deleteColumnButton",Pe="taskBoard.editCardButton",Se="taskBoard.deleteCardButton",Ie="taskBoard.deleteTaskDialogMessage",Le="taskBoard.deleteTaskDialogTitle",Ne="taskBoard.deleteTaskConfirmButton",Me="taskBoard.deleteTaskCancelButton",Re="taskBoard.addCardTitle",J="taskBoard.addCardTitleLabel",Q="taskBoard.addCardDescriptionLabel",Z="taskBoard.addCardPriorityLabel",xe="taskBoard.addCardCreateButton",Ae="taskBoard.deleteColumnDialogMessage",Ke="taskBoard.deleteColumnDialogTitle",pe="taskBoard.deleteColumnConfirmButton",qe="taskBoard.deleteColumnCancelButton",Oe="taskBoard.editCardPaneTitle",He="taskBoard.editCardPaneSaveButton",ee="taskBoard.editPaneTitleLabel",te="taskBoard.editPaneDescriptionLabel",ae="taskBoard.editPanePriorityLabel",ne="taskBoard.editPaneCancelButton",_e="taskBoard.previewPanePriorityLabel",je="taskBoard.previewPaneDeleteButton",ze="taskBoard.previewPaneEditButton",i={[dt]:"Add column",[ct]:"Search",[be]:"Edit column",[ve]:"Add card",[we]:"Delete column",[Pe]:"Edit card",[Se]:"Delete card",[Ie]:"Are you sure you want to delete this card?",[Le]:"Delete Card",[Ne]:"Delete",[Me]:"Cancel",[Ae]:"Are you sure you want to delete this column?",[Ke]:"Delete column?",[pe]:"Delete",[qe]:"Cancel",[Re]:"Create new card",[xe]:"Create",[ne]:"Cancel",[Oe]:"Edit",[He]:"Save changes",[ee]:"Title:",[te]:"Description:",[ae]:"Priority:",[J]:"Title",[Q]:"Description",[Z]:"Priority",[_e]:"Priority:",[je]:"Delete",[ze]:"Edit"},Fe="data-taskboard-type",Ve="data-taskboard-id",Ye="data-taskboard-placeholder",X="column",oe="task",Ue=e=>{const{edit:a,title:o}=e.column;return t.createElement("div",{className:"k-taskboard-column-header"},t.createElement("div",{className:"k-taskboard-column-header-text k-text-ellipsis"},a?t.createElement(De.Input,{value:o,onChange:e.onTitleChange,onBlur:e.onColumnExitEdit,autoFocus:!0}):o),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:M.classNames("k-taskboard-column-header-actions",{"k-disabled":a})},t.createElement(w.Button,{fillMode:"flat",icon:"pencil",svgIcon:A.pencilIcon,title:e.editButtonTitle,onClick:e.onColumnEnterEdit}),t.createElement(w.Button,{fillMode:"flat",icon:"plus",svgIcon:A.plusIcon,title:e.addButtonTitle,onClick:e.onShowAddCardDialog}),t.createElement(w.Button,{fillMode:"flat",icon:"x",svgIcon:A.xIcon,title:e.closeButtonTitle,onClick:e.onColumnDelete})))};Ue.displayName="KendoReactTaskBoardColumnHeader";const Xe=e=>t.createElement("div",{className:"k-taskboard-column-cards-container"},t.createElement("div",{className:"k-taskboard-column-cards"},e.children));Xe.displayName="KendoReactTaskBoardColumnBody";const ie=e=>{const{onClose:a,onConfirm:o,dialogMessage:s,dialogTitle:T,dialogConfirmButton:u,dialogCancelButton:c}=e;return t.createElement(tt.Dialog,{title:T,closeIcon:!1},s,t.createElement(tt.DialogActionsBar,{layout:"end"},t.createElement(w.Button,{themeColor:"primary",onClick:o},u),t.createElement(w.Button,{onClick:a},c)))};ie.propTypes={onClose:P.func.isRequired,onConfirm:P.func.isRequired,dialogMessage:P.string.isRequired,dialogTitle:P.string.isRequired,dialogConfirmButton:P.string.isRequired,dialogCancelButton:P.string.isRequired},ie.displayName="KendoReactTaskBoardConfirmDialog";const We=({onSave:e,task:a,priorities:o})=>{const[s,T]=t.useState(a?a.title:""),[u,c]=t.useState(a?a.description:""),[m,l]=t.useState(a?a.priority:o[0]),h=t.useCallback(C=>{T(C.value)},[]),B=t.useCallback(C=>{c(C.value)},[]),y=t.useCallback(C=>{l(C.target.value)},[]),I=t.useCallback(C=>{const f={id:void 0,status:"",...a||{},title:s,description:u,priority:m};e.call(void 0,f,a)},[e,a,s,u,m]);return{onTitleChange:h,title:s,onDescriptionChange:B,description:u,onPriorityChange:y,priority:m,onSave:I}},ge=e=>{const{onTitleChange:a,title:o,onDescriptionChange:s,description:T,onPriorityChange:u,priority:c,onSave:m}=We(e),l=ue.useLocalization();return t.createElement(e.editPane,{header:l.toLanguageString(Oe,i[Oe])+e.task.title,titleInputTitle:l.toLanguageString(J,i[J]),descriptionInputTitle:l.toLanguageString(Q,i[Q]),priorityDropDownTitle:l.toLanguageString(Z,i[Z]),task:e.task,saveButton:l.toLanguageString(He,i[He]),cancelButton:l.toLanguageString(ne,i[ne]),priorities:e.priorities,titleLabel:l.toLanguageString(ee,i[ee]),descriptionLabel:l.toLanguageString(te,i[te]),priorityLabel:l.toLanguageString(ae,i[ae]),onSave:m,onClose:e.onClose,onTitleChange:a,title:o,onDescriptionChange:s,description:T,onPriorityChange:u,priority:c})};ge.propTypes={},ge.displayName="KendoReactTaskBoardEditCard";const ke=e=>{const{onTitleChange:a,title:o,onDescriptionChange:s,description:T,onPriorityChange:u,priority:c,onSave:m}=We(e),l=ue.useLocalization();return t.createElement(e.editPane,{header:l.toLanguageString(Re,i[Re]),titleInputTitle:l.toLanguageString(J,i[J]),descriptionInputTitle:l.toLanguageString(Q,i[Q]),priorityDropDownTitle:l.toLanguageString(Z,i[Z]),titleLabel:l.toLanguageString(ee,i[ee]),descriptionLabel:l.toLanguageString(te,i[te]),priorityLabel:l.toLanguageString(ae,i[ae]),saveButton:l.toLanguageString(xe,i[xe]),cancelButton:l.toLanguageString(ne,i[ne]),priorities:e.priorities,onSave:m,onClose:e.onClose,onTitleChange:a,title:o,onDescriptionChange:s,description:T,onPriorityChange:u,priority:c})};ke.propTypes={},ke.displayName="KendoReactTaskBoardAddCard";const $e=e=>{const a=t.useRef();return t.createElement(me.CardHeader,{className:"k-hbox"},t.createElement("span",{className:"k-card-title k-link",onClick:e.onShowPreviewPane},e.title),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:"k-card-header-actions"},t.createElement(w.Button,{fillMode:"flat",icon:"more-vertical",svgIcon:A.moreVerticalIcon,ref:a,onClick:e.showMenu?e.onHideMenu:e.onShowMenu,onBlur:e.onMenuButtonBlur}),t.createElement(rt.Popup,{anchor:a.current&&a.current.element,show:e.showMenu,ref:e.popupRef},t.createElement(me.Menu,{vertical:!0,onSelect:e.onMenuItemSelect,items:e.menuItems,className:"k-context-menu"}))))};$e.displayName="KendoReactTaskBoardCardHeader";const Ge=e=>t.createElement(me.CardBody,null,e.children);Ge.displayName="KendoReactTaskBoardCardBody";const Je=e=>t.createElement("div",{className:"k-taskboard-pane k-taskboard-preview-pane"},t.createElement("div",{className:"k-taskboard-pane-header"},t.createElement("div",{className:"k-taskboard-pane-header-text"},e.title),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:"k-taskboard-pane-header-actions"},t.createElement(w.Button,{icon:"x",svgIcon:A.xIcon,fillMode:"flat",onClick:e.onClosePreviewPane}))),t.createElement("div",{className:"k-taskboard-pane-content"},t.createElement("p",null,e.description),t.createElement("p",null,e.priorityLabel," ",t.createElement("span",{style:{backgroundColor:e.priority.color}}," ")," ",e.priority.priority)),t.createElement("div",{className:"k-taskboard-pane-actions k-actions k-hstack k-justify-content-end"},t.createElement(w.Button,{onClick:e.onTaskDelete},e.delete),t.createElement(w.Button,{themeColor:"primary",onClick:e.onTaskEdit},e.edit)));Je.displayName="KendoReactTaskBoardPreviewDialog";const re=e=>{const{onDeleteTask:a,showEditPane:o,task:s,style:T,dragTargetRef:u,elementRef:c}=e,[m,l]=t.useState(!1),[h,B]=t.useState(!1),[y,I]=t.useState(!1),C=t.useRef(null),f=ue.useLocalization(),L=[{text:f.toLanguageString(Pe,i[Pe]),icon:"pencil",svgIcon:A.pencilIcon,data:()=>{o(s),l(!m)}},{text:f.toLanguageString(Se,i[Se]),icon:"trash",svgIcon:A.trashIcon,data:()=>{B(!h),l(!m)}}],K=F=>{F.item.data()},R=()=>{l(!0)},v=()=>{l(!1)},p=F=>{const V=C.current&&C.current.element;V&&V.contains(F.relatedTarget)||l(!1)},z=()=>{B(!h)},q=()=>{I(!0)},W=()=>{I(!1)},O=()=>{o(s),q()};return s.isPlaceholder&&u&&u.current?t.createElement("div",{style:{width:u.current.width,height:u.current.height},className:"k-taskboard-drag-placeholder",[Ye]:!0}):t.createElement(e.cardComponent,{task:s,style:T,tabIndex:e.tabIndex,disabled:e.disabled,elementRef:c,showMenu:m,showDeleteConfirm:h,showTaskPreviewPane:y,menuItems:L,popupRef:C,confirmDialogMessage:f.toLanguageString(Ie,i[Ie]),confirmDialogTitle:f.toLanguageString(Le,i[Le]),confirmDialogConfirmButton:f.toLanguageString(Ne,i[Ne]),confirmDialogCancelButton:f.toLanguageString(Me,i[Me]),previewDialogPriorityLabel:f.toLanguageString(_e,i[_e]),previewDialogDelete:f.toLanguageString(je,i[je]),previewDialogEdit:f.toLanguageString(ze,i[ze]),onShowPreviewPane:q,onClosePreviewPane:W,onMenuItemSelect:K,onShowMenu:R,onHideMenu:v,onMenuButtonBlur:p,onTaskDelete:a,onTaskEdit:O,onCloseConfirmDialog:z,card:me.Card,cardHeader:$e,cardBody:Ge,confirmDialog:ie,previewDialog:Je})},ut={};re.propTypes={task:P.object.isRequired},re.defaultProps=ut,re.displayName="KendoReactTaskBoardCardBase";const le=e=>{const[a,o]=t.useState(!1),[s,T]=t.useState(!1),[u,c]=t.useState(!1),[m,l]=t.useState(),{dragTargetRef:h,column:B,onColumnChange:y,tasks:I,elementRef:C,style:f,onTaskCreate:L,onTaskEdit:K,onTaskDelete:R}=e,v=ue.useLocalization(),p=t.useCallback(g=>{const H={...B,title:g.value};y.call(void 0,H,B)},[B,y]),z=t.useCallback(()=>{const g={...B,edit:!0};y.call(void 0,g,B)},[B,y]),q=t.useCallback(()=>{const g={...B,edit:!1};y.call(void 0,g,B)},[B,y]),W=t.useCallback(()=>{y.call(void 0,null,B)},[B,y]),O=()=>{c(!u)},F=()=>{o(!0)},V=g=>{T(!0),l(g)},et=()=>{o(!1),T(!1)},D=t.useCallback(g=>{o(!1),L.call(void 0,{...g,status:B.status})},[L,B]),fe=t.useCallback((g,H)=>{T(!1),K.call(void 0,g,H)},[K]),ce=t.useCallback(g=>{R.call(void 0,g)},[R]);if(B.isPlaceholder&&h&&h.current){const g=h.current?h.current.width:0,H=h.current?h.current.height:0;return t.createElement("div",{style:{width:g,height:H},className:"k-taskboard-column k-taskboard-drag-placeholder",[Ye]:!0})}return t.createElement(e.columnComponent,{column:e.column,tasks:I,priorities:e.priorities,style:h?{overflow:"visible",...f}:f,tabIndex:e.tabIndex,elementRef:C,onTaskCreate:D,onTaskEdit:fe,onTaskDelete:ce,card:e.cardComponent,header:Ue,body:Xe,confirmDialog:ie,editCardDialog:ge,addCardDialog:ke,onTitleChange:p,onColumnEnterEdit:z,onColumnExitEdit:q,onColumnConfirmDelete:W,onShowAddCardDialog:F,onShowEditCardPane:V,onColumnDelete:O,onCloseDialog:et,showAddCard:a,showEditCard:s,showColumnConfirmDelete:u,editedTask:m,confirmDialogMessage:v.toLanguageString(Ae,i[Ae]),confirmDialogTitle:v.toLanguageString(Ke,i[Ke]),confirmDialogConfirmButton:v.toLanguageString(pe,i[pe]),confirmDialogCancelButton:v.toLanguageString(qe,i[qe]),editButtonTitle:v.toLanguageString(be,i[be]),addButtonTitle:v.toLanguageString(ve,i[ve]),closeButtonTitle:v.toLanguageString(we,i[we])},I&&I.map(g=>t.createElement(re,{key:g.id,tabIndex:e.tabIndex,task:g,disabled:!!e.column.edit,onDeleteTask:()=>ce(g),showEditPane:()=>V(g),dragTargetRef:e.dragTargetRef,style:{borderLeftColor:g.priority.color},cardComponent:e.cardComponent})))},mt={};le.propTypes={column:P.object.isRequired,taskMap:P.object},le.defaultProps=mt,le.displayName="KendoReactTaskBoardColumn";const gt=(e,a,o)=>{let s=-1,T=-1;for(let u=0;u<o.length;u++){const c=String(o[u].id);if(c===e&&(T=u),c===a&&(s=u),s!==-1&&T!==-1)return{dragIndex:T,dropIndex:s}}return null},nt=e=>{for(;e;){if(!e.getAttribute)return null;const a=e.getAttribute(Ve);if(a)return{id:a,type:e.getAttribute(Fe)||"",element:e};e=e.parentNode}return null},kt=(e,a)=>{const o=a.dataItem.color,s=t.createElement(t.Fragment,null,t.createElement("span",{style:{backgroundColor:o}}," "),e.props.children);return t.cloneElement(e,e.props,s)},Ct=(e,a)=>{if(!a)return e;const o=t.createElement(t.Fragment,null,t.createElement("span",{style:{backgroundColor:a.color}}," "),t.createElement("span",null," ",e.props.children));return t.cloneElement(e,{...e.props},o)},se=e=>t.createElement(t.Fragment,null,t.createElement(e.card,{key:String(e.task.id),ref:e.elementRef,style:e.style,className:M.classNames("k-taskboard-card k-cursor-move k-taskboard-card-category",{"k-disabled":e.disabled}),[Fe]:oe,[Ve]:e.task.id,tabIndex:e.tabIndex},t.createElement(e.cardHeader,{showMenu:e.showMenu,menuItems:e.menuItems,popupRef:e.popupRef,title:e.task.title,task:e.task,onShowPreviewPane:e.onShowPreviewPane,onShowMenu:e.onShowMenu,onHideMenu:e.onHideMenu,onMenuButtonBlur:e.onMenuButtonBlur,onMenuItemSelect:e.onMenuItemSelect}),t.createElement(e.cardBody,{task:e.task},e.task.description)),e.showDeleteConfirm&&t.createElement(e.confirmDialog,{onConfirm:e.onTaskDelete,onClose:e.onCloseConfirmDialog,dialogMessage:e.confirmDialogMessage,dialogTitle:e.confirmDialogTitle,dialogConfirmButton:e.confirmDialogConfirmButton,dialogCancelButton:e.confirmDialogCancelButton}),e.showTaskPreviewPane&&t.createElement(e.previewDialog,{title:e.task.title,description:e.task.description,priorityLabel:e.previewDialogPriorityLabel,delete:e.previewDialogDelete,edit:e.previewDialogEdit,onClosePreviewPane:e.onClosePreviewPane,onTaskDelete:e.onTaskDelete,onTaskEdit:e.onTaskEdit,priority:e.task.priority}));se.displayName="KendoReactTaskBoardCard";const de=e=>t.createElement("div",{className:"k-taskboard-pane k-taskboard-edit-pane"},t.createElement("div",{className:"k-taskboard-pane-header"},t.createElement("div",{className:"k-taskboard-pane-header-text"},e.header),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:"k-taskboard-pane-header-actions"},t.createElement(w.Button,{icon:"x",svgIcon:A.xIcon,fillMode:"flat",onClick:e.onClose}))),t.createElement("div",{className:"k-taskboard-pane-content"},t.createElement("div",{role:"form","data-role":"form",className:"k-form"},t.createElement(ye.FieldWrapper,null,t.createElement(he.Label,{editorId:"title"},e.titleLabel),t.createElement(De.Input,{id:"title",onChange:e.onTitleChange,value:e.title,title:e.titleInputTitle})),t.createElement(ye.FieldWrapper,null,t.createElement(he.Label,{editorId:"description"},e.descriptionLabel),t.createElement(De.Input,{id:"description",onChange:e.onDescriptionChange,value:e.description,title:e.descriptionInputTitle})),t.createElement(ye.FieldWrapper,null,t.createElement(he.Label,{editorId:"priority"},e.priorityLabel),t.createElement(lt.DropDownList,{id:"priority",data:e.priorities,value:e.priority,onChange:e.onPriorityChange,itemRender:kt,valueRender:Ct,textField:"priority",dataItemKey:"priority",title:e.priorityDropDownTitle})))),t.createElement("div",{className:"k-taskboard-pane-actions k-actions k-hstack k-justify-content-end"},t.createElement(w.Button,{onClick:e.onClose},e.cancelButton),t.createElement(w.Button,{themeColor:"primary",onClick:e.onSave,disabled:!e.title||!e.description},e.saveButton)));de.propTypes={},de.displayName="KendoReactTaskBoardEditPane";const Ce=e=>t.createElement(t.Fragment,null,t.createElement("div",{ref:e.elementRef,style:e.style,className:M.classNames("k-taskboard-column",{"k-taskboard-column-edit":e.column.edit}),tabIndex:e.tabIndex,[Fe]:X,[Ve]:e.column.id},t.createElement(e.header,{column:e.column,tasks:e.tasks,onTitleChange:e.onTitleChange,onColumnExitEdit:e.onColumnExitEdit,editButtonTitle:e.editButtonTitle,onColumnEnterEdit:e.onColumnEnterEdit,addButtonTitle:e.addButtonTitle,onShowAddCardDialog:e.onShowAddCardDialog,closeButtonTitle:e.closeButtonTitle,onColumnDelete:e.onColumnDelete}),t.createElement(e.body,null,e.children)),e.showAddCard&&t.createElement(e.addCardDialog,{onClose:e.onCloseDialog,onSave:e.onTaskCreate,priorities:e.priorities,editPane:de}),e.showEditCard&&e.editedTask&&t.createElement(e.editCardDialog,{onClose:e.onCloseDialog,onSave:e.onTaskEdit,task:e.editedTask,priorities:e.priorities,editPane:de}),e.showColumnConfirmDelete&&t.createElement(e.confirmDialog,{onClose:e.onColumnDelete,onConfirm:e.onColumnConfirmDelete,dialogMessage:e.confirmDialogMessage,dialogTitle:e.confirmDialogTitle,dialogConfirmButton:e.confirmDialogConfirmButton,dialogCancelButton:e.confirmDialogCancelButton}));Ce.displayName="KendoReactTaskBoardColumn";const Qe=t.forwardRef((e,a)=>{it.validatePackage(st);const{columnData:o=[],className:s,style:T,id:u,taskData:c=[],onChange:m}=e,l=t.useRef(null),h=t.useRef(null);t.useImperativeHandle(l,()=>({props:e})),t.useImperativeHandle(a,()=>l.current);const y=t.Children.toArray(e.children).filter(n=>n&&n.type&&n.type.displayName==="KendoReactTaskBoardToolbar"),I=t.useRef(null),C=t.useRef(null),f=t.useRef(null),[L,K]=t.useState(null),[R,v]=t.useState(null),[p,z]=t.useState({top:0,left:0}),q=t.useRef(null),W=t.useRef(null),O=t.useMemo(()=>{const n={};return(L||c).forEach(k=>{const d=k.status;n[d]||(n[d]=[]),n[d].push(k)}),n},[c,L]),F=t.useCallback(n=>{const k=n.originalEvent.target;if(k.closest("button,input,.k-link,.k-taskboard-preview-pane"))return;const d=nt(k),E=h.current;if(d&&E){const b=d.type===X;if(b&&!k.closest(".k-taskboard-column-header"))return;const $=d.element.getBoundingClientRect(),Y=E.getBoundingClientRect();f.current={x:n.clientX-$.left+Y.left,y:n.clientY-$.top+Y.top};const N=b?o:c,Be=b?v:K,x=N.findIndex(Te=>String(Te.id)===d.id),j=N[x];if(x===-1||j.edit)return;const S=M.clone(j);S.isPlaceholder=!0;const U=[...N];U[x]=S,C.current={...d,index:x,item:j,width:$.width,height:$.height},z({top:n.clientY-f.current.y,left:n.clientX-f.current.x}),Be(U)}},[o,c]),V=t.useCallback(n=>{const k=C.current,d=q.current&&q.current.element||W.current;if(k&&d){z({top:n.clientY-f.current.y,left:n.clientX-f.current.x}),d.style.visibility="hidden";const E=document.elementFromPoint(n.clientX,n.clientY);if(d.style.visibility="",E&&E.getAttribute(Ye))return;const b=E&&nt(E);if(b){let _;const $=b.type===k.type,Y=k.type===X,N=(Y?R:L)||[],Be=Y?v:K;if(Y||$){if(_=gt(k.id,b.id,N),_){const x=N[_.dragIndex],j=N[_.dropIndex],S=M.clone(x);Y||(S.status=j.status);const U=[...N];U.splice(_.dragIndex,1),U.splice(_.dropIndex,0,S),k.index=_.dropIndex,Be(U)}}else{const x=N.findIndex(S=>String(S.id)===k.id),j=o.findIndex(S=>String(S.id)===b.id);if(x!==-1&&j!==-1){const S=N[x],Te=o[j].status;if(O[Te])return;S.status=Te;const Ee=[...N];Ee.splice(x,1),Ee.push(S),k.index=Ee.length-1,Be(Ee)}}}}},[R,L,o,O]),et=t.useCallback(()=>{const n=C.current;if(m&&n){const d=(n.type===X?R:L)||[],E=d[n.index];delete E.isPlaceholder;const b={data:d,type:n.type,previousItem:n.item,item:E};m.call(void 0,b)}C.current=null,f.current=null,K(null),v(null),z({top:0,left:0})},[R,L,m]);M.useDraggable(I,{onDragStart:F,onDrag:V,onDragEnd:et});const D=C.current,fe=t.useCallback(n=>{const d={data:[...c,n],type:oe,previousItem:null,item:n};m.call(void 0,d)},[m,c]),ce=t.useCallback((n,k)=>{const d=c.slice(),E=c.indexOf(k);E!==-1&&d.splice(E,1,n);const b={data:d,type:oe,previousItem:k,item:n};m.call(void 0,b)},[m,c]),g=t.useCallback(n=>{const d={data:c.filter(E=>E!==n),type:oe,previousItem:n,item:null};m.call(void 0,d)},[m,c]),H=t.useCallback((n,k)=>{const d=o.slice(),E=d.indexOf(k);E!==-1&&(n?d.splice(E,1,n):d.splice(E,1));const b={data:d,type:X,previousItem:k,item:n};m.call(void 0,b)},[m,o]);return t.createElement("div",{id:u,style:T,ref:h,className:M.classNames("k-widget k-taskboard",s)},y,t.createElement("div",{className:"k-taskboard-content",style:D?{userSelect:"none"}:void 0},t.createElement("div",{className:"k-taskboard-columns-container",ref:I},(R||o).map(n=>t.createElement(le,{key:n.id,tabIndex:e.tabIndex,column:n,tasks:O[n.status]||[],dragTargetRef:C,onTaskCreate:fe,onTaskEdit:ce,onTaskDelete:g,onColumnChange:H,columnComponent:e.column||Ce,cardComponent:e.card||se,priorities:e.priorities})))),D&&D.type===oe&&t.createElement(re,{elementRef:q,style:{position:"absolute",width:D.width,height:D.height,top:p.top,left:p.left,zIndex:10,borderLeftColor:D.item.priority?D.item.priority.color:D.item.color},task:D.item,dragTargetRef:C,cardComponent:e.card||se,onDeleteTask:M.noop,showEditPane:M.noop}),D&&D.type===X&&t.createElement(le,{elementRef:W,style:{position:"absolute",width:D.width,height:D.height,top:p.top,left:p.left,zIndex:10},cardComponent:e.card||se,columnComponent:e.column||Ce,column:D.item,tasks:O[D.item.status],priorities:e.priorities,dragTargetRef:C,onTaskDelete:g,onColumnChange:H,onTaskEdit:ce,onTaskCreate:fe}))});Qe.propTypes={columnData:P.array.isRequired,taskData:P.array.isRequired},Qe.displayName="KendoReactTaskBoard";const Ze=e=>{const{className:a,style:o,children:s}=e;return t.createElement("div",{style:o,className:M.classNames("k-taskboard-header",a)},t.createElement("div",{className:"k-taskboard-toolbar k-toolbar"},s))};Ze.propTypes={children:P.node},Ze.displayName="KendoReactTaskBoardToolbar",r.TaskBoard=Qe,r.TaskBoardAddCard=ke,r.TaskBoardCard=se,r.TaskBoardCardBody=Ge,r.TaskBoardCardHeader=$e,r.TaskBoardColumn=Ce,r.TaskBoardColumnBody=Xe,r.TaskBoardColumnHeader=Ue,r.TaskBoardConfirmDialog=ie,r.TaskBoardEditCard=ge,r.TaskBoardPreviewDialog=Je,r.TaskBoardTaskEditPane=de,r.TaskBoardToolbar=Ze,r.useTaskEditing=We,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
|
|
5
|
+
(function(r,J){typeof exports=="object"&&typeof module<"u"?J(exports,require("react"),require("prop-types"),require("@progress/kendo-licensing"),require("@progress/kendo-react-common"),require("@progress/kendo-react-intl"),require("@progress/kendo-react-buttons"),require("@progress/kendo-react-inputs"),require("@progress/kendo-svg-icons"),require("@progress/kendo-react-dialogs"),require("@progress/kendo-react-layout"),require("@progress/kendo-react-popup"),require("@progress/kendo-react-dropdowns"),require("@progress/kendo-react-labels"),require("@progress/kendo-react-form")):typeof define=="function"&&define.amd?define(["exports","react","prop-types","@progress/kendo-licensing","@progress/kendo-react-common","@progress/kendo-react-intl","@progress/kendo-react-buttons","@progress/kendo-react-inputs","@progress/kendo-svg-icons","@progress/kendo-react-dialogs","@progress/kendo-react-layout","@progress/kendo-react-popup","@progress/kendo-react-dropdowns","@progress/kendo-react-labels","@progress/kendo-react-form"],J):(r=typeof globalThis<"u"?globalThis:r||self,J(r.KendoReactTaskboard={},r.React,r.PropTypes,r.KendoLicensing,r.KendoReactCommon,r.KendoReactIntl,r.KendoReactButtons,r.KendoReactInputs,r.KendoSvgIcons,r.KendoReactDialogs,r.KendoReactLayout,r.KendoReactPopup,r.KendoReactDropdowns,r.KendoReactLabels,r.KendoReactForm))})(this,function(r,J,ot,it,M,de,w,De,A,tt,ce,rt,lt,he,ye){"use strict";"use client";function at(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const s=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(a,o,s.get?s:{enumerable:!0,get:()=>e[o]})}}return a.default=e,Object.freeze(a)}const t=at(J),S=at(ot),st={name:"@progress/kendo-react-taskboard",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},dt="taskBoard.toolbarAddColumnButton",ct="taskBoard.toolbarSearchField",be="taskBoard.editColumnButton",ve="taskBoard.addCardButton",we="taskBoard.deleteColumnButton",Se="taskBoard.editCardButton",Pe="taskBoard.deleteCardButton",Ie="taskBoard.deleteTaskDialogMessage",Le="taskBoard.deleteTaskDialogTitle",Ne="taskBoard.deleteTaskConfirmButton",Me="taskBoard.deleteTaskCancelButton",Re="taskBoard.addCardTitle",Q="taskBoard.addCardTitleLabel",Z="taskBoard.addCardDescriptionLabel",$="taskBoard.addCardPriorityLabel",xe="taskBoard.addCardCreateButton",Ae="taskBoard.deleteColumnDialogMessage",Ke="taskBoard.deleteColumnDialogTitle",pe="taskBoard.deleteColumnConfirmButton",qe="taskBoard.deleteColumnCancelButton",Oe="taskBoard.editCardPaneTitle",He="taskBoard.editCardPaneSaveButton",ee="taskBoard.editPaneTitleLabel",te="taskBoard.editPaneDescriptionLabel",ae="taskBoard.editPanePriorityLabel",ne="taskBoard.editPaneCancelButton",_e="taskBoard.previewPanePriorityLabel",je="taskBoard.previewPaneDeleteButton",ze="taskBoard.previewPaneEditButton",i={[dt]:"Add column",[ct]:"Search",[be]:"Edit column",[ve]:"Add card",[we]:"Delete column",[Se]:"Edit card",[Pe]:"Delete card",[Ie]:"Are you sure you want to delete this card?",[Le]:"Delete Card",[Ne]:"Delete",[Me]:"Cancel",[Ae]:"Are you sure you want to delete this column?",[Ke]:"Delete column?",[pe]:"Delete",[qe]:"Cancel",[Re]:"Create new card",[xe]:"Create",[ne]:"Cancel",[Oe]:"Edit",[He]:"Save changes",[ee]:"Title:",[te]:"Description:",[ae]:"Priority:",[Q]:"Title",[Z]:"Description",[$]:"Priority",[_e]:"Priority:",[je]:"Delete",[ze]:"Edit"},Fe="data-taskboard-type",Ve="data-taskboard-id",Ye="data-taskboard-placeholder",X="column",oe="task",Ue=e=>{const{edit:a,title:o}=e.column;return t.createElement("div",{className:"k-taskboard-column-header"},t.createElement("div",{className:"k-taskboard-column-header-text k-text-ellipsis"},a?t.createElement(De.Input,{value:o,onChange:e.onTitleChange,onBlur:e.onColumnExitEdit,autoFocus:!0}):o),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:M.classNames("k-taskboard-column-header-actions",{"k-disabled":a})},t.createElement(w.Button,{fillMode:"flat",icon:"pencil",svgIcon:A.pencilIcon,title:e.editButtonTitle,onClick:e.onColumnEnterEdit}),t.createElement(w.Button,{fillMode:"flat",icon:"plus",svgIcon:A.plusIcon,title:e.addButtonTitle,onClick:e.onShowAddCardDialog}),t.createElement(w.Button,{fillMode:"flat",icon:"x",svgIcon:A.xIcon,title:e.closeButtonTitle,onClick:e.onColumnDelete})))};Ue.displayName="KendoReactTaskBoardColumnHeader";const Xe=e=>t.createElement("div",{className:"k-taskboard-column-cards-container"},t.createElement("div",{className:"k-taskboard-column-cards"},e.children));Xe.displayName="KendoReactTaskBoardColumnBody";const ie=e=>{const{onClose:a,onConfirm:o,dialogMessage:s,dialogTitle:T,dialogConfirmButton:u,dialogCancelButton:c}=e;return t.createElement(tt.Dialog,{title:T,closeIcon:!1},s,t.createElement(tt.DialogActionsBar,{layout:"end"},t.createElement(w.Button,{themeColor:"primary",onClick:o},u),t.createElement(w.Button,{onClick:a},c)))};ie.propTypes={onClose:S.func.isRequired,onConfirm:S.func.isRequired,dialogMessage:S.string.isRequired,dialogTitle:S.string.isRequired,dialogConfirmButton:S.string.isRequired,dialogCancelButton:S.string.isRequired},ie.displayName="KendoReactTaskBoardConfirmDialog";const We=({onSave:e,task:a,priorities:o})=>{const[s,T]=t.useState(a?a.title:""),[u,c]=t.useState(a?a.description:""),[m,l]=t.useState(a?a.priority:o[0]),h=t.useCallback(C=>{T(C.value)},[]),f=t.useCallback(C=>{c(C.value)},[]),y=t.useCallback(C=>{l(C.target.value)},[]),I=t.useCallback(C=>{const B={id:void 0,status:"",...a||{},title:s,description:u,priority:m};e.call(void 0,B,a)},[e,a,s,u,m]);return{onTitleChange:h,title:s,onDescriptionChange:f,description:u,onPriorityChange:y,priority:m,onSave:I}},ue=e=>{const{onTitleChange:a,title:o,onDescriptionChange:s,description:T,onPriorityChange:u,priority:c,onSave:m}=We(e),l=de.useLocalization();return t.createElement(e.editPane,{header:l.toLanguageString(Oe,i[Oe])+e.task.title,titleInputTitle:l.toLanguageString(Q,i[Q]),descriptionInputTitle:l.toLanguageString(Z,i[Z]),priorityDropDownTitle:l.toLanguageString($,i[$]),task:e.task,saveButton:l.toLanguageString(He,i[He]),cancelButton:l.toLanguageString(ne,i[ne]),priorities:e.priorities,titleLabel:l.toLanguageString(ee,i[ee]),descriptionLabel:l.toLanguageString(te,i[te]),priorityLabel:l.toLanguageString(ae,i[ae]),onSave:m,onClose:e.onClose,onTitleChange:a,title:o,onDescriptionChange:s,description:T,onPriorityChange:u,priority:c})};ue.propTypes={},ue.displayName="KendoReactTaskBoardEditCard";const me=e=>{const{onTitleChange:a,title:o,onDescriptionChange:s,description:T,onPriorityChange:u,priority:c,onSave:m}=We(e),l=de.useLocalization();return t.createElement(e.editPane,{header:l.toLanguageString(Re,i[Re]),titleInputTitle:l.toLanguageString(Q,i[Q]),descriptionInputTitle:l.toLanguageString(Z,i[Z]),priorityDropDownTitle:l.toLanguageString($,i[$]),titleLabel:l.toLanguageString(ee,i[ee]),descriptionLabel:l.toLanguageString(te,i[te]),priorityLabel:l.toLanguageString(ae,i[ae]),saveButton:l.toLanguageString(xe,i[xe]),cancelButton:l.toLanguageString(ne,i[ne]),priorities:e.priorities,onSave:m,onClose:e.onClose,onTitleChange:a,title:o,onDescriptionChange:s,description:T,onPriorityChange:u,priority:c})};me.propTypes={},me.displayName="KendoReactTaskBoardAddCard";const Ge=e=>{const a=t.useRef();return t.createElement(ce.CardHeader,{className:"k-hbox"},t.createElement("span",{className:"k-card-title k-link",onClick:e.onShowPreviewPane},e.title),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:"k-card-header-actions"},t.createElement(w.Button,{fillMode:"flat",icon:"more-vertical",svgIcon:A.moreVerticalIcon,ref:a,onClick:e.showMenu?e.onHideMenu:e.onShowMenu,onBlur:e.onMenuButtonBlur}),t.createElement(rt.Popup,{anchor:a.current&&a.current.element,show:e.showMenu,ref:e.popupRef},t.createElement(ce.Menu,{vertical:!0,onSelect:e.onMenuItemSelect,items:e.menuItems,className:"k-context-menu"}))))};Ge.displayName="KendoReactTaskBoardCardHeader";const Je=e=>t.createElement(ce.CardBody,null,e.children);Je.displayName="KendoReactTaskBoardCardBody";const Qe=e=>t.createElement("div",{className:"k-taskboard-pane k-taskboard-preview-pane"},t.createElement("div",{className:"k-taskboard-pane-header"},t.createElement("div",{className:"k-taskboard-pane-header-text"},e.title),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:"k-taskboard-pane-header-actions"},t.createElement(w.Button,{icon:"x",svgIcon:A.xIcon,fillMode:"flat",onClick:e.onClosePreviewPane}))),t.createElement("div",{className:"k-taskboard-pane-content"},t.createElement("p",null,e.description),t.createElement("p",null,e.priorityLabel," ",t.createElement("span",{style:{backgroundColor:e.priority.color}}," ")," ",e.priority.priority)),t.createElement("div",{className:"k-taskboard-pane-actions k-actions k-hstack k-justify-content-end"},t.createElement(w.Button,{onClick:e.onTaskDelete},e.delete),t.createElement(w.Button,{themeColor:"primary",onClick:e.onTaskEdit},e.edit)));Qe.displayName="KendoReactTaskBoardPreviewDialog";const ge=e=>{const{onDeleteTask:a,showEditPane:o,task:s,style:T,dragTargetRef:u,elementRef:c}=e,[m,l]=t.useState(!1),[h,f]=t.useState(!1),[y,I]=t.useState(!1),C=t.useRef(null),B=de.useLocalization(),L=[{text:B.toLanguageString(Se,i[Se]),icon:"pencil",svgIcon:A.pencilIcon,data:()=>{o(s),l(!m)}},{text:B.toLanguageString(Pe,i[Pe]),icon:"trash",svgIcon:A.trashIcon,data:()=>{f(!h),l(!m)}}],K=F=>{F.item.data()},R=()=>{l(!0)},v=()=>{l(!1)},p=F=>{const V=C.current&&C.current.element;V&&V.contains(F.relatedTarget)||l(!1)},z=()=>{f(!h)},q=()=>{I(!0)},W=()=>{I(!1)},O=()=>{o(s),q()};return s.isPlaceholder&&u&&u.current?t.createElement("div",{style:{width:u.current.width,height:u.current.height},className:"k-taskboard-drag-placeholder",[Ye]:!0}):t.createElement(e.cardComponent,{task:s,style:T,tabIndex:e.tabIndex,disabled:e.disabled,elementRef:c,showMenu:m,showDeleteConfirm:h,showTaskPreviewPane:y,menuItems:L,popupRef:C,confirmDialogMessage:B.toLanguageString(Ie,i[Ie]),confirmDialogTitle:B.toLanguageString(Le,i[Le]),confirmDialogConfirmButton:B.toLanguageString(Ne,i[Ne]),confirmDialogCancelButton:B.toLanguageString(Me,i[Me]),previewDialogPriorityLabel:B.toLanguageString(_e,i[_e]),previewDialogDelete:B.toLanguageString(je,i[je]),previewDialogEdit:B.toLanguageString(ze,i[ze]),onShowPreviewPane:q,onClosePreviewPane:W,onMenuItemSelect:K,onShowMenu:R,onHideMenu:v,onMenuButtonBlur:p,onTaskDelete:a,onTaskEdit:O,onCloseConfirmDialog:z,card:ce.Card,cardHeader:Ge,cardBody:Je,confirmDialog:ie,previewDialog:Qe})};ge.propTypes={task:S.object.isRequired},ge.displayName="KendoReactTaskBoardCardBase";const ke=e=>{const[a,o]=t.useState(!1),[s,T]=t.useState(!1),[u,c]=t.useState(!1),[m,l]=t.useState(),{dragTargetRef:h,column:f,onColumnChange:y,tasks:I,elementRef:C,style:B,onTaskCreate:L,onTaskEdit:K,onTaskDelete:R}=e,v=de.useLocalization(),p=t.useCallback(g=>{const H={...f,title:g.value};y.call(void 0,H,f)},[f,y]),z=t.useCallback(()=>{const g={...f,edit:!0};y.call(void 0,g,f)},[f,y]),q=t.useCallback(()=>{const g={...f,edit:!1};y.call(void 0,g,f)},[f,y]),W=t.useCallback(()=>{y.call(void 0,null,f)},[f,y]),O=()=>{c(!u)},F=()=>{o(!0)},V=g=>{T(!0),l(g)},et=()=>{o(!1),T(!1)},D=t.useCallback(g=>{o(!1),L.call(void 0,{...g,status:f.status})},[L,f]),Be=t.useCallback((g,H)=>{T(!1),K.call(void 0,g,H)},[K]),se=t.useCallback(g=>{R.call(void 0,g)},[R]);if(f.isPlaceholder&&h&&h.current){const g=h.current?h.current.width:0,H=h.current?h.current.height:0;return t.createElement("div",{style:{width:g,height:H},className:"k-taskboard-column k-taskboard-drag-placeholder",[Ye]:!0})}return t.createElement(e.columnComponent,{column:e.column,tasks:I,priorities:e.priorities,style:h?{overflow:"visible",...B}:B,tabIndex:e.tabIndex,elementRef:C,onTaskCreate:D,onTaskEdit:Be,onTaskDelete:se,card:e.cardComponent,header:Ue,body:Xe,confirmDialog:ie,editCardDialog:ue,addCardDialog:me,onTitleChange:p,onColumnEnterEdit:z,onColumnExitEdit:q,onColumnConfirmDelete:W,onShowAddCardDialog:F,onShowEditCardPane:V,onColumnDelete:O,onCloseDialog:et,showAddCard:a,showEditCard:s,showColumnConfirmDelete:u,editedTask:m,confirmDialogMessage:v.toLanguageString(Ae,i[Ae]),confirmDialogTitle:v.toLanguageString(Ke,i[Ke]),confirmDialogConfirmButton:v.toLanguageString(pe,i[pe]),confirmDialogCancelButton:v.toLanguageString(qe,i[qe]),editButtonTitle:v.toLanguageString(be,i[be]),addButtonTitle:v.toLanguageString(ve,i[ve]),closeButtonTitle:v.toLanguageString(we,i[we])},I&&I.map(g=>t.createElement(ge,{key:g.id,tabIndex:e.tabIndex,task:g,disabled:!!e.column.edit,onDeleteTask:()=>se(g),showEditPane:()=>V(g),dragTargetRef:e.dragTargetRef,style:{borderLeftColor:g.priority.color},cardComponent:e.cardComponent})))};ke.propTypes={column:S.object.isRequired,taskMap:S.object},ke.displayName="KendoReactTaskBoardColumn";const ut=(e,a,o)=>{let s=-1,T=-1;for(let u=0;u<o.length;u++){const c=String(o[u].id);if(c===e&&(T=u),c===a&&(s=u),s!==-1&&T!==-1)return{dragIndex:T,dropIndex:s}}return null},nt=e=>{for(;e;){if(!e.getAttribute)return null;const a=e.getAttribute(Ve);if(a)return{id:a,type:e.getAttribute(Fe)||"",element:e};e=e.parentNode}return null},mt=(e,a)=>{const o=a.dataItem.color,s=t.createElement(t.Fragment,null,t.createElement("span",{style:{backgroundColor:o}}," "),e.props.children);return t.cloneElement(e,e.props,s)},gt=(e,a)=>{if(!a)return e;const o=t.createElement(t.Fragment,null,t.createElement("span",{style:{backgroundColor:a.color}}," "),t.createElement("span",null," ",e.props.children));return t.cloneElement(e,{...e.props},o)},re=e=>t.createElement(t.Fragment,null,t.createElement(e.card,{key:String(e.task.id),ref:e.elementRef,style:e.style,className:M.classNames("k-taskboard-card k-cursor-move k-taskboard-card-category",{"k-disabled":e.disabled}),[Fe]:oe,[Ve]:e.task.id,tabIndex:e.tabIndex},t.createElement(e.cardHeader,{showMenu:e.showMenu,menuItems:e.menuItems,popupRef:e.popupRef,title:e.task.title,task:e.task,onShowPreviewPane:e.onShowPreviewPane,onShowMenu:e.onShowMenu,onHideMenu:e.onHideMenu,onMenuButtonBlur:e.onMenuButtonBlur,onMenuItemSelect:e.onMenuItemSelect}),t.createElement(e.cardBody,{task:e.task},e.task.description)),e.showDeleteConfirm&&t.createElement(e.confirmDialog,{onConfirm:e.onTaskDelete,onClose:e.onCloseConfirmDialog,dialogMessage:e.confirmDialogMessage,dialogTitle:e.confirmDialogTitle,dialogConfirmButton:e.confirmDialogConfirmButton,dialogCancelButton:e.confirmDialogCancelButton}),e.showTaskPreviewPane&&t.createElement(e.previewDialog,{title:e.task.title,description:e.task.description,priorityLabel:e.previewDialogPriorityLabel,delete:e.previewDialogDelete,edit:e.previewDialogEdit,onClosePreviewPane:e.onClosePreviewPane,onTaskDelete:e.onTaskDelete,onTaskEdit:e.onTaskEdit,priority:e.task.priority}));re.displayName="KendoReactTaskBoardCard";const le=e=>t.createElement("div",{className:"k-taskboard-pane k-taskboard-edit-pane"},t.createElement("div",{className:"k-taskboard-pane-header"},t.createElement("div",{className:"k-taskboard-pane-header-text"},e.header),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:"k-taskboard-pane-header-actions"},t.createElement(w.Button,{icon:"x",svgIcon:A.xIcon,fillMode:"flat",onClick:e.onClose}))),t.createElement("div",{className:"k-taskboard-pane-content"},t.createElement("div",{role:"form","data-role":"form",className:"k-form"},t.createElement(ye.FieldWrapper,null,t.createElement(he.Label,{editorId:"title"},e.titleLabel),t.createElement(De.Input,{id:"title",onChange:e.onTitleChange,value:e.title,title:e.titleInputTitle})),t.createElement(ye.FieldWrapper,null,t.createElement(he.Label,{editorId:"description"},e.descriptionLabel),t.createElement(De.Input,{id:"description",onChange:e.onDescriptionChange,value:e.description,title:e.descriptionInputTitle})),t.createElement(ye.FieldWrapper,null,t.createElement(he.Label,{editorId:"priority"},e.priorityLabel),t.createElement(lt.DropDownList,{id:"priority",data:e.priorities,value:e.priority,onChange:e.onPriorityChange,itemRender:mt,valueRender:gt,textField:"priority",dataItemKey:"priority",title:e.priorityDropDownTitle})))),t.createElement("div",{className:"k-taskboard-pane-actions k-actions k-hstack k-justify-content-end"},t.createElement(w.Button,{onClick:e.onClose},e.cancelButton),t.createElement(w.Button,{themeColor:"primary",onClick:e.onSave,disabled:!e.title||!e.description},e.saveButton)));le.propTypes={},le.displayName="KendoReactTaskBoardEditPane";const Ce=e=>t.createElement(t.Fragment,null,t.createElement("div",{ref:e.elementRef,style:e.style,className:M.classNames("k-taskboard-column",{"k-taskboard-column-edit":e.column.edit}),tabIndex:e.tabIndex,[Fe]:X,[Ve]:e.column.id},t.createElement(e.header,{column:e.column,tasks:e.tasks,onTitleChange:e.onTitleChange,onColumnExitEdit:e.onColumnExitEdit,editButtonTitle:e.editButtonTitle,onColumnEnterEdit:e.onColumnEnterEdit,addButtonTitle:e.addButtonTitle,onShowAddCardDialog:e.onShowAddCardDialog,closeButtonTitle:e.closeButtonTitle,onColumnDelete:e.onColumnDelete}),t.createElement(e.body,null,e.children)),e.showAddCard&&t.createElement(e.addCardDialog,{onClose:e.onCloseDialog,onSave:e.onTaskCreate,priorities:e.priorities,editPane:le}),e.showEditCard&&e.editedTask&&t.createElement(e.editCardDialog,{onClose:e.onCloseDialog,onSave:e.onTaskEdit,task:e.editedTask,priorities:e.priorities,editPane:le}),e.showColumnConfirmDelete&&t.createElement(e.confirmDialog,{onClose:e.onColumnDelete,onConfirm:e.onColumnConfirmDelete,dialogMessage:e.confirmDialogMessage,dialogTitle:e.confirmDialogTitle,dialogConfirmButton:e.confirmDialogConfirmButton,dialogCancelButton:e.confirmDialogCancelButton}));Ce.displayName="KendoReactTaskBoardColumn";const Ze=t.forwardRef((e,a)=>{it.validatePackage(st);const{columnData:o=[],className:s,style:T,id:u,taskData:c=[],onChange:m}=e,l=t.useRef(null),h=t.useRef(null);t.useImperativeHandle(l,()=>({props:e})),t.useImperativeHandle(a,()=>l.current);const y=t.Children.toArray(e.children).filter(n=>n&&n.type&&n.type.displayName==="KendoReactTaskBoardToolbar"),I=t.useRef(null),C=t.useRef(null),B=t.useRef(null),[L,K]=t.useState(null),[R,v]=t.useState(null),[p,z]=t.useState({top:0,left:0}),q=t.useRef(null),W=t.useRef(null),O=t.useMemo(()=>{const n={};return(L||c).forEach(k=>{const d=k.status;n[d]||(n[d]=[]),n[d].push(k)}),n},[c,L]),F=t.useCallback(n=>{const k=n.originalEvent.target;if(k.closest("button,input,.k-link,.k-taskboard-preview-pane"))return;const d=nt(k),E=h.current;if(d&&E){const b=d.type===X;if(b&&!k.closest(".k-taskboard-column-header"))return;const G=d.element.getBoundingClientRect(),Y=E.getBoundingClientRect();B.current={x:n.clientX-G.left+Y.left,y:n.clientY-G.top+Y.top};const N=b?o:c,fe=b?v:K,x=N.findIndex(Te=>String(Te.id)===d.id),j=N[x];if(x===-1||j.edit)return;const P=M.clone(j);P.isPlaceholder=!0;const U=[...N];U[x]=P,C.current={...d,index:x,item:j,width:G.width,height:G.height},z({top:n.clientY-B.current.y,left:n.clientX-B.current.x}),fe(U)}},[o,c]),V=t.useCallback(n=>{const k=C.current,d=q.current&&q.current.element||W.current;if(k&&d){z({top:n.clientY-B.current.y,left:n.clientX-B.current.x}),d.style.visibility="hidden";const E=document.elementFromPoint(n.clientX,n.clientY);if(d.style.visibility="",E&&E.getAttribute(Ye))return;const b=E&&nt(E);if(b){let _;const G=b.type===k.type,Y=k.type===X,N=(Y?R:L)||[],fe=Y?v:K;if(Y||G){if(_=ut(k.id,b.id,N),_){const x=N[_.dragIndex],j=N[_.dropIndex],P=M.clone(x);Y||(P.status=j.status);const U=[...N];U.splice(_.dragIndex,1),U.splice(_.dropIndex,0,P),k.index=_.dropIndex,fe(U)}}else{const x=N.findIndex(P=>String(P.id)===k.id),j=o.findIndex(P=>String(P.id)===b.id);if(x!==-1&&j!==-1){const P=N[x],Te=o[j].status;if(O[Te])return;P.status=Te;const Ee=[...N];Ee.splice(x,1),Ee.push(P),k.index=Ee.length-1,fe(Ee)}}}}},[R,L,o,O]),et=t.useCallback(()=>{const n=C.current;if(m&&n){const d=(n.type===X?R:L)||[],E=d[n.index];delete E.isPlaceholder;const b={data:d,type:n.type,previousItem:n.item,item:E};m.call(void 0,b)}C.current=null,B.current=null,K(null),v(null),z({top:0,left:0})},[R,L,m]);M.useDraggable(I,{onDragStart:F,onDrag:V,onDragEnd:et});const D=C.current,Be=t.useCallback(n=>{const d={data:[...c,n],type:oe,previousItem:null,item:n};m.call(void 0,d)},[m,c]),se=t.useCallback((n,k)=>{const d=c.slice(),E=c.indexOf(k);E!==-1&&d.splice(E,1,n);const b={data:d,type:oe,previousItem:k,item:n};m.call(void 0,b)},[m,c]),g=t.useCallback(n=>{const d={data:c.filter(E=>E!==n),type:oe,previousItem:n,item:null};m.call(void 0,d)},[m,c]),H=t.useCallback((n,k)=>{const d=o.slice(),E=d.indexOf(k);E!==-1&&(n?d.splice(E,1,n):d.splice(E,1));const b={data:d,type:X,previousItem:k,item:n};m.call(void 0,b)},[m,o]);return t.createElement("div",{id:u,style:T,ref:h,className:M.classNames("k-widget k-taskboard",s)},y,t.createElement("div",{className:"k-taskboard-content",style:D?{userSelect:"none"}:void 0},t.createElement("div",{className:"k-taskboard-columns-container",ref:I},(R||o).map(n=>t.createElement(ke,{key:n.id,tabIndex:e.tabIndex,column:n,tasks:O[n.status]||[],dragTargetRef:C,onTaskCreate:Be,onTaskEdit:se,onTaskDelete:g,onColumnChange:H,columnComponent:e.column||Ce,cardComponent:e.card||re,priorities:e.priorities})))),D&&D.type===oe&&t.createElement(ge,{elementRef:q,style:{position:"absolute",width:D.width,height:D.height,top:p.top,left:p.left,zIndex:10,borderLeftColor:D.item.priority?D.item.priority.color:D.item.color},task:D.item,dragTargetRef:C,cardComponent:e.card||re,onDeleteTask:M.noop,showEditPane:M.noop}),D&&D.type===X&&t.createElement(ke,{elementRef:W,style:{position:"absolute",width:D.width,height:D.height,top:p.top,left:p.left,zIndex:10},cardComponent:e.card||re,columnComponent:e.column||Ce,column:D.item,tasks:O[D.item.status],priorities:e.priorities,dragTargetRef:C,onTaskDelete:g,onColumnChange:H,onTaskEdit:se,onTaskCreate:Be}))});Ze.propTypes={columnData:S.array.isRequired,taskData:S.array.isRequired},Ze.displayName="KendoReactTaskBoard";const $e=e=>{const{className:a,style:o,children:s}=e;return t.createElement("div",{style:o,className:M.classNames("k-taskboard-header",a)},t.createElement("div",{className:"k-taskboard-toolbar k-toolbar"},s))};$e.propTypes={children:S.node},$e.displayName="KendoReactTaskBoardToolbar",r.TaskBoard=Ze,r.TaskBoardAddCard=me,r.TaskBoardCard=re,r.TaskBoardCardBody=Je,r.TaskBoardCardHeader=Ge,r.TaskBoardColumn=Ce,r.TaskBoardColumnBody=Xe,r.TaskBoardColumnHeader=Ue,r.TaskBoardConfirmDialog=ie,r.TaskBoardEditCard=ue,r.TaskBoardPreviewDialog=Qe,r.TaskBoardTaskEditPane=le,r.TaskBoardToolbar=$e,r.useTaskEditing=We,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
|
package/index.js
CHANGED
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const at=require("react"),nt=require("prop-types"),ot=require("@progress/kendo-licensing"),x=require("@progress/kendo-react-common"),Ce=require("@progress/kendo-react-intl"),w=require("@progress/kendo-react-buttons"),be=require("@progress/kendo-react-inputs"),_=require("@progress/kendo-svg-icons"),Ze=require("@progress/kendo-react-dialogs"),ke=require("@progress/kendo-react-layout"),it=require("@progress/kendo-react-popup"),lt=require("@progress/kendo-react-dropdowns"),Ee=require("@progress/kendo-react-labels"),De=require("@progress/kendo-react-form");function tt(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const r=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(a,o,r.get?r:{enumerable:!0,get:()=>e[o]})}}return a.default=e,Object.freeze(a)}const t=tt(at),S=tt(nt),rt={name:"@progress/kendo-react-taskboard",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},st="taskBoard.toolbarAddColumnButton",dt="taskBoard.toolbarSearchField",he="taskBoard.editColumnButton",ye="taskBoard.addCardButton",ve="taskBoard.deleteColumnButton",Se="taskBoard.editCardButton",we="taskBoard.deleteCardButton",Pe="taskBoard.deleteTaskDialogMessage",Ie="taskBoard.deleteTaskDialogTitle",Re="taskBoard.deleteTaskConfirmButton",Le="taskBoard.deleteTaskCancelButton",Ne="taskBoard.addCardTitle",Q="taskBoard.addCardTitleLabel",Z="taskBoard.addCardDescriptionLabel",ee="taskBoard.addCardPriorityLabel",xe="taskBoard.addCardCreateButton",Me="taskBoard.deleteColumnDialogMessage",Ae="taskBoard.deleteColumnDialogTitle",Ke="taskBoard.deleteColumnConfirmButton",qe="taskBoard.deleteColumnCancelButton",Oe="taskBoard.editCardPaneTitle",He="taskBoard.editCardPaneSaveButton",te="taskBoard.editPaneTitleLabel",ae="taskBoard.editPaneDescriptionLabel",ne="taskBoard.editPanePriorityLabel",oe="taskBoard.editPaneCancelButton",Fe="taskBoard.previewPanePriorityLabel",_e="taskBoard.previewPaneDeleteButton",ze="taskBoard.previewPaneEditButton",i={[st]:"Add column",[dt]:"Search",[he]:"Edit column",[ye]:"Add card",[ve]:"Delete column",[Se]:"Edit card",[we]:"Delete card",[Pe]:"Are you sure you want to delete this card?",[Ie]:"Delete Card",[Re]:"Delete",[Le]:"Cancel",[Me]:"Are you sure you want to delete this column?",[Ae]:"Delete column?",[Ke]:"Delete",[qe]:"Cancel",[Ne]:"Create new card",[xe]:"Create",[oe]:"Cancel",[Oe]:"Edit",[He]:"Save changes",[te]:"Title:",[ae]:"Description:",[ne]:"Priority:",[Q]:"Title",[Z]:"Description",[ee]:"Priority",[Fe]:"Priority:",[_e]:"Delete",[ze]:"Edit"},je="data-taskboard-type",Ve="data-taskboard-id",pe="data-taskboard-placeholder",W="column",G="task",Ye=e=>{const{edit:a,title:o}=e.column;return t.createElement("div",{className:"k-taskboard-column-header"},t.createElement("div",{className:"k-taskboard-column-header-text k-text-ellipsis"},a?t.createElement(be.Input,{value:o,onChange:e.onTitleChange,onBlur:e.onColumnExitEdit,autoFocus:!0}):o),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:x.classNames("k-taskboard-column-header-actions",{"k-disabled":a})},t.createElement(w.Button,{fillMode:"flat",icon:"pencil",svgIcon:_.pencilIcon,title:e.editButtonTitle,onClick:e.onColumnEnterEdit}),t.createElement(w.Button,{fillMode:"flat",icon:"plus",svgIcon:_.plusIcon,title:e.addButtonTitle,onClick:e.onShowAddCardDialog}),t.createElement(w.Button,{fillMode:"flat",icon:"x",svgIcon:_.xIcon,title:e.closeButtonTitle,onClick:e.onColumnDelete})))};Ye.displayName="KendoReactTaskBoardColumnHeader";const Ue=e=>t.createElement("div",{className:"k-taskboard-column-cards-container"},t.createElement("div",{className:"k-taskboard-column-cards"},e.children));Ue.displayName="KendoReactTaskBoardColumnBody";const re=e=>{const{onClose:a,onConfirm:o,dialogMessage:r,dialogTitle:f,dialogConfirmButton:c,dialogCancelButton:d}=e;return t.createElement(Ze.Dialog,{title:f,closeIcon:!1},r,t.createElement(Ze.DialogActionsBar,{layout:"end"},t.createElement(w.Button,{themeColor:"primary",onClick:o},c),t.createElement(w.Button,{onClick:a},d)))};re.propTypes={onClose:S.func.isRequired,onConfirm:S.func.isRequired,dialogMessage:S.string.isRequired,dialogTitle:S.string.isRequired,dialogConfirmButton:S.string.isRequired,dialogCancelButton:S.string.isRequired};re.displayName="KendoReactTaskBoardConfirmDialog";const Xe=({onSave:e,task:a,priorities:o})=>{const[r,f]=t.useState(a?a.title:""),[c,d]=t.useState(a?a.description:""),[u,l]=t.useState(a?a.priority:o[0]),D=t.useCallback(g=>{f(g.value)},[]),B=t.useCallback(g=>{d(g.value)},[]),b=t.useCallback(g=>{l(g.target.value)},[]),P=t.useCallback(g=>{const C={id:void 0,status:"",...a||{},title:r,description:c,priority:u};e.call(void 0,C,a)},[e,a,r,c,u]);return{onTitleChange:D,title:r,onDescriptionChange:B,description:c,onPriorityChange:b,priority:u,onSave:P}},Be=e=>{const{onTitleChange:a,title:o,onDescriptionChange:r,description:f,onPriorityChange:c,priority:d,onSave:u}=Xe(e),l=Ce.useLocalization();return t.createElement(e.editPane,{header:l.toLanguageString(Oe,i[Oe])+e.task.title,titleInputTitle:l.toLanguageString(Q,i[Q]),descriptionInputTitle:l.toLanguageString(Z,i[Z]),priorityDropDownTitle:l.toLanguageString(ee,i[ee]),task:e.task,saveButton:l.toLanguageString(He,i[He]),cancelButton:l.toLanguageString(oe,i[oe]),priorities:e.priorities,titleLabel:l.toLanguageString(te,i[te]),descriptionLabel:l.toLanguageString(ae,i[ae]),priorityLabel:l.toLanguageString(ne,i[ne]),onSave:u,onClose:e.onClose,onTitleChange:a,title:o,onDescriptionChange:r,description:f,onPriorityChange:c,priority:d})};Be.propTypes={};Be.displayName="KendoReactTaskBoardEditCard";const fe=e=>{const{onTitleChange:a,title:o,onDescriptionChange:r,description:f,onPriorityChange:c,priority:d,onSave:u}=Xe(e),l=Ce.useLocalization();return t.createElement(e.editPane,{header:l.toLanguageString(Ne,i[Ne]),titleInputTitle:l.toLanguageString(Q,i[Q]),descriptionInputTitle:l.toLanguageString(Z,i[Z]),priorityDropDownTitle:l.toLanguageString(ee,i[ee]),titleLabel:l.toLanguageString(te,i[te]),descriptionLabel:l.toLanguageString(ae,i[ae]),priorityLabel:l.toLanguageString(ne,i[ne]),saveButton:l.toLanguageString(xe,i[xe]),cancelButton:l.toLanguageString(oe,i[oe]),priorities:e.priorities,onSave:u,onClose:e.onClose,onTitleChange:a,title:o,onDescriptionChange:r,description:f,onPriorityChange:c,priority:d})};fe.propTypes={};fe.displayName="KendoReactTaskBoardAddCard";const We=e=>{const a=t.useRef();return t.createElement(ke.CardHeader,{className:"k-hbox"},t.createElement("span",{className:"k-card-title k-link",onClick:e.onShowPreviewPane},e.title),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:"k-card-header-actions"},t.createElement(w.Button,{fillMode:"flat",icon:"more-vertical",svgIcon:_.moreVerticalIcon,ref:a,onClick:e.showMenu?e.onHideMenu:e.onShowMenu,onBlur:e.onMenuButtonBlur}),t.createElement(it.Popup,{anchor:a.current&&a.current.element,show:e.showMenu,ref:e.popupRef},t.createElement(ke.Menu,{vertical:!0,onSelect:e.onMenuItemSelect,items:e.menuItems,className:"k-context-menu"}))))};We.displayName="KendoReactTaskBoardCardHeader";const $e=e=>t.createElement(ke.CardBody,null,e.children);$e.displayName="KendoReactTaskBoardCardBody";const Ge=e=>t.createElement("div",{className:"k-taskboard-pane k-taskboard-preview-pane"},t.createElement("div",{className:"k-taskboard-pane-header"},t.createElement("div",{className:"k-taskboard-pane-header-text"},e.title),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:"k-taskboard-pane-header-actions"},t.createElement(w.Button,{icon:"x",svgIcon:_.xIcon,fillMode:"flat",onClick:e.onClosePreviewPane}))),t.createElement("div",{className:"k-taskboard-pane-content"},t.createElement("p",null,e.description),t.createElement("p",null,e.priorityLabel," ",t.createElement("span",{style:{backgroundColor:e.priority.color}}," ")," ",e.priority.priority)),t.createElement("div",{className:"k-taskboard-pane-actions k-actions k-hstack k-justify-content-end"},t.createElement(w.Button,{onClick:e.onTaskDelete},e.delete),t.createElement(w.Button,{themeColor:"primary",onClick:e.onTaskEdit},e.edit)));Ge.displayName="KendoReactTaskBoardPreviewDialog";const se=e=>{const{onDeleteTask:a,showEditPane:o,task:r,style:f,dragTargetRef:c,elementRef:d}=e,[u,l]=t.useState(!1),[D,B]=t.useState(!1),[b,P]=t.useState(!1),g=t.useRef(null),C=Ce.useLocalization(),I=[{text:C.toLanguageString(Se,i[Se]),icon:"pencil",svgIcon:_.pencilIcon,data:()=>{o(r),l(!u)}},{text:C.toLanguageString(we,i[we]),icon:"trash",svgIcon:_.trashIcon,data:()=>{B(!D),l(!u)}}],M=j=>{j.item.data()},L=()=>{l(!0)},y=()=>{l(!1)},A=j=>{const V=g.current&&g.current.element;V&&V.contains(j.relatedTarget)||l(!1)},z=()=>{B(!D)},K=()=>{P(!0)},U=()=>{P(!1)},q=()=>{o(r),K()};return r.isPlaceholder&&c&&c.current?t.createElement("div",{style:{width:c.current.width,height:c.current.height},className:"k-taskboard-drag-placeholder",[pe]:!0}):t.createElement(e.cardComponent,{task:r,style:f,tabIndex:e.tabIndex,disabled:e.disabled,elementRef:d,showMenu:u,showDeleteConfirm:D,showTaskPreviewPane:b,menuItems:I,popupRef:g,confirmDialogMessage:C.toLanguageString(Pe,i[Pe]),confirmDialogTitle:C.toLanguageString(Ie,i[Ie]),confirmDialogConfirmButton:C.toLanguageString(Re,i[Re]),confirmDialogCancelButton:C.toLanguageString(Le,i[Le]),previewDialogPriorityLabel:C.toLanguageString(Fe,i[Fe]),previewDialogDelete:C.toLanguageString(_e,i[_e]),previewDialogEdit:C.toLanguageString(ze,i[ze]),onShowPreviewPane:K,onClosePreviewPane:U,onMenuItemSelect:M,onShowMenu:L,onHideMenu:y,onMenuButtonBlur:A,onTaskDelete:a,onTaskEdit:q,onCloseConfirmDialog:z,card:ke.Card,cardHeader:We,cardBody:$e,confirmDialog:re,previewDialog:Ge})},ct={};se.propTypes={task:S.object.isRequired};se.defaultProps=ct;se.displayName="KendoReactTaskBoardCardBase";const ie=e=>{const[a,o]=t.useState(!1),[r,f]=t.useState(!1),[c,d]=t.useState(!1),[u,l]=t.useState(),{dragTargetRef:D,column:B,onColumnChange:b,tasks:P,elementRef:g,style:C,onTaskCreate:I,onTaskEdit:M,onTaskDelete:L}=e,y=Ce.useLocalization(),A=t.useCallback(m=>{const O={...B,title:m.value};b.call(void 0,O,B)},[B,b]),z=t.useCallback(()=>{const m={...B,edit:!0};b.call(void 0,m,B)},[B,b]),K=t.useCallback(()=>{const m={...B,edit:!1};b.call(void 0,m,B)},[B,b]),U=t.useCallback(()=>{b.call(void 0,null,B)},[B,b]),q=()=>{d(!c)},j=()=>{o(!0)},V=m=>{f(!0),l(m)},Te=()=>{o(!1),f(!1)},E=t.useCallback(m=>{o(!1),I.call(void 0,{...m,status:B.status})},[I,B]),de=t.useCallback((m,O)=>{f(!1),M.call(void 0,m,O)},[M]),$=t.useCallback(m=>{L.call(void 0,m)},[L]);if(B.isPlaceholder&&D&&D.current){const m=D.current?D.current.width:0,O=D.current?D.current.height:0;return t.createElement("div",{style:{width:m,height:O},className:"k-taskboard-column k-taskboard-drag-placeholder",[pe]:!0})}return t.createElement(e.columnComponent,{column:e.column,tasks:P,priorities:e.priorities,style:D?{overflow:"visible",...C}:C,tabIndex:e.tabIndex,elementRef:g,onTaskCreate:E,onTaskEdit:de,onTaskDelete:$,card:e.cardComponent,header:Ye,body:Ue,confirmDialog:re,editCardDialog:Be,addCardDialog:fe,onTitleChange:A,onColumnEnterEdit:z,onColumnExitEdit:K,onColumnConfirmDelete:U,onShowAddCardDialog:j,onShowEditCardPane:V,onColumnDelete:q,onCloseDialog:Te,showAddCard:a,showEditCard:r,showColumnConfirmDelete:c,editedTask:u,confirmDialogMessage:y.toLanguageString(Me,i[Me]),confirmDialogTitle:y.toLanguageString(Ae,i[Ae]),confirmDialogConfirmButton:y.toLanguageString(Ke,i[Ke]),confirmDialogCancelButton:y.toLanguageString(qe,i[qe]),editButtonTitle:y.toLanguageString(he,i[he]),addButtonTitle:y.toLanguageString(ye,i[ye]),closeButtonTitle:y.toLanguageString(ve,i[ve])},P&&P.map(m=>t.createElement(se,{key:m.id,tabIndex:e.tabIndex,task:m,disabled:!!e.column.edit,onDeleteTask:()=>$(m),showEditPane:()=>V(m),dragTargetRef:e.dragTargetRef,style:{borderLeftColor:m.priority.color},cardComponent:e.cardComponent})))},ut={};ie.propTypes={column:S.object.isRequired,taskMap:S.object};ie.defaultProps=ut;ie.displayName="KendoReactTaskBoardColumn";const mt=(e,a,o)=>{let r=-1,f=-1;for(let c=0;c<o.length;c++){const d=String(o[c].id);if(d===e&&(f=c),d===a&&(r=c),r!==-1&&f!==-1)return{dragIndex:f,dropIndex:r}}return null},et=e=>{for(;e;){if(!e.getAttribute)return null;const a=e.getAttribute(Ve);if(a)return{id:a,type:e.getAttribute(je)||"",element:e};e=e.parentNode}return null},kt=(e,a)=>{const o=a.dataItem.color,r=t.createElement(t.Fragment,null,t.createElement("span",{style:{backgroundColor:o}}," "),e.props.children);return t.cloneElement(e,e.props,r)},gt=(e,a)=>{if(!a)return e;const o=t.createElement(t.Fragment,null,t.createElement("span",{style:{backgroundColor:a.color}}," "),t.createElement("span",null," ",e.props.children));return t.cloneElement(e,{...e.props},o)},J=e=>t.createElement(t.Fragment,null,t.createElement(e.card,{key:String(e.task.id),ref:e.elementRef,style:e.style,className:x.classNames("k-taskboard-card k-cursor-move k-taskboard-card-category",{"k-disabled":e.disabled}),[je]:G,[Ve]:e.task.id,tabIndex:e.tabIndex},t.createElement(e.cardHeader,{showMenu:e.showMenu,menuItems:e.menuItems,popupRef:e.popupRef,title:e.task.title,task:e.task,onShowPreviewPane:e.onShowPreviewPane,onShowMenu:e.onShowMenu,onHideMenu:e.onHideMenu,onMenuButtonBlur:e.onMenuButtonBlur,onMenuItemSelect:e.onMenuItemSelect}),t.createElement(e.cardBody,{task:e.task},e.task.description)),e.showDeleteConfirm&&t.createElement(e.confirmDialog,{onConfirm:e.onTaskDelete,onClose:e.onCloseConfirmDialog,dialogMessage:e.confirmDialogMessage,dialogTitle:e.confirmDialogTitle,dialogConfirmButton:e.confirmDialogConfirmButton,dialogCancelButton:e.confirmDialogCancelButton}),e.showTaskPreviewPane&&t.createElement(e.previewDialog,{title:e.task.title,description:e.task.description,priorityLabel:e.previewDialogPriorityLabel,delete:e.previewDialogDelete,edit:e.previewDialogEdit,onClosePreviewPane:e.onClosePreviewPane,onTaskDelete:e.onTaskDelete,onTaskEdit:e.onTaskEdit,priority:e.task.priority}));J.displayName="KendoReactTaskBoardCard";const le=e=>t.createElement("div",{className:"k-taskboard-pane k-taskboard-edit-pane"},t.createElement("div",{className:"k-taskboard-pane-header"},t.createElement("div",{className:"k-taskboard-pane-header-text"},e.header),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:"k-taskboard-pane-header-actions"},t.createElement(w.Button,{icon:"x",svgIcon:_.xIcon,fillMode:"flat",onClick:e.onClose}))),t.createElement("div",{className:"k-taskboard-pane-content"},t.createElement("div",{role:"form","data-role":"form",className:"k-form"},t.createElement(De.FieldWrapper,null,t.createElement(Ee.Label,{editorId:"title"},e.titleLabel),t.createElement(be.Input,{id:"title",onChange:e.onTitleChange,value:e.title,title:e.titleInputTitle})),t.createElement(De.FieldWrapper,null,t.createElement(Ee.Label,{editorId:"description"},e.descriptionLabel),t.createElement(be.Input,{id:"description",onChange:e.onDescriptionChange,value:e.description,title:e.descriptionInputTitle})),t.createElement(De.FieldWrapper,null,t.createElement(Ee.Label,{editorId:"priority"},e.priorityLabel),t.createElement(lt.DropDownList,{id:"priority",data:e.priorities,value:e.priority,onChange:e.onPriorityChange,itemRender:kt,valueRender:gt,textField:"priority",dataItemKey:"priority",title:e.priorityDropDownTitle})))),t.createElement("div",{className:"k-taskboard-pane-actions k-actions k-hstack k-justify-content-end"},t.createElement(w.Button,{onClick:e.onClose},e.cancelButton),t.createElement(w.Button,{themeColor:"primary",onClick:e.onSave,disabled:!e.title||!e.description},e.saveButton)));le.propTypes={};le.displayName="KendoReactTaskBoardEditPane";const ge=e=>t.createElement(t.Fragment,null,t.createElement("div",{ref:e.elementRef,style:e.style,className:x.classNames("k-taskboard-column",{"k-taskboard-column-edit":e.column.edit}),tabIndex:e.tabIndex,[je]:W,[Ve]:e.column.id},t.createElement(e.header,{column:e.column,tasks:e.tasks,onTitleChange:e.onTitleChange,onColumnExitEdit:e.onColumnExitEdit,editButtonTitle:e.editButtonTitle,onColumnEnterEdit:e.onColumnEnterEdit,addButtonTitle:e.addButtonTitle,onShowAddCardDialog:e.onShowAddCardDialog,closeButtonTitle:e.closeButtonTitle,onColumnDelete:e.onColumnDelete}),t.createElement(e.body,null,e.children)),e.showAddCard&&t.createElement(e.addCardDialog,{onClose:e.onCloseDialog,onSave:e.onTaskCreate,priorities:e.priorities,editPane:le}),e.showEditCard&&e.editedTask&&t.createElement(e.editCardDialog,{onClose:e.onCloseDialog,onSave:e.onTaskEdit,task:e.editedTask,priorities:e.priorities,editPane:le}),e.showColumnConfirmDelete&&t.createElement(e.confirmDialog,{onClose:e.onColumnDelete,onConfirm:e.onColumnConfirmDelete,dialogMessage:e.confirmDialogMessage,dialogTitle:e.confirmDialogTitle,dialogConfirmButton:e.confirmDialogConfirmButton,dialogCancelButton:e.confirmDialogCancelButton}));ge.displayName="KendoReactTaskBoardColumn";const Je=t.forwardRef((e,a)=>{ot.validatePackage(rt);const{columnData:o=[],className:r,style:f,id:c,taskData:d=[],onChange:u}=e,l=t.useRef(null),D=t.useRef(null);t.useImperativeHandle(l,()=>({props:e})),t.useImperativeHandle(a,()=>l.current);const b=t.Children.toArray(e.children).filter(n=>n&&n.type&&n.type.displayName==="KendoReactTaskBoardToolbar"),P=t.useRef(null),g=t.useRef(null),C=t.useRef(null),[I,M]=t.useState(null),[L,y]=t.useState(null),[A,z]=t.useState({top:0,left:0}),K=t.useRef(null),U=t.useRef(null),q=t.useMemo(()=>{const n={};return(I||d).forEach(k=>{const s=k.status;n[s]||(n[s]=[]),n[s].push(k)}),n},[d,I]),j=t.useCallback(n=>{const k=n.originalEvent.target;if(k.closest("button,input,.k-link,.k-taskboard-preview-pane"))return;const s=et(k),T=D.current;if(s&&T){const h=s.type===W;if(h&&!k.closest(".k-taskboard-column-header"))return;const X=s.element.getBoundingClientRect(),p=T.getBoundingClientRect();C.current={x:n.clientX-X.left+p.left,y:n.clientY-X.top+p.top};const R=h?o:d,ce=h?y:M,N=R.findIndex(ue=>String(ue.id)===s.id),F=R[N];if(N===-1||F.edit)return;const v=x.clone(F);v.isPlaceholder=!0;const Y=[...R];Y[N]=v,g.current={...s,index:N,item:F,width:X.width,height:X.height},z({top:n.clientY-C.current.y,left:n.clientX-C.current.x}),ce(Y)}},[o,d]),V=t.useCallback(n=>{const k=g.current,s=K.current&&K.current.element||U.current;if(k&&s){z({top:n.clientY-C.current.y,left:n.clientX-C.current.x}),s.style.visibility="hidden";const T=document.elementFromPoint(n.clientX,n.clientY);if(s.style.visibility="",T&&T.getAttribute(pe))return;const h=T&&et(T);if(h){let H;const X=h.type===k.type,p=k.type===W,R=(p?L:I)||[],ce=p?y:M;if(p||X){if(H=mt(k.id,h.id,R),H){const N=R[H.dragIndex],F=R[H.dropIndex],v=x.clone(N);p||(v.status=F.status);const Y=[...R];Y.splice(H.dragIndex,1),Y.splice(H.dropIndex,0,v),k.index=H.dropIndex,ce(Y)}}else{const N=R.findIndex(v=>String(v.id)===k.id),F=o.findIndex(v=>String(v.id)===h.id);if(N!==-1&&F!==-1){const v=R[N],ue=o[F].status;if(q[ue])return;v.status=ue;const me=[...R];me.splice(N,1),me.push(v),k.index=me.length-1,ce(me)}}}}},[L,I,o,q]),Te=t.useCallback(()=>{const n=g.current;if(u&&n){const s=(n.type===W?L:I)||[],T=s[n.index];delete T.isPlaceholder;const h={data:s,type:n.type,previousItem:n.item,item:T};u.call(void 0,h)}g.current=null,C.current=null,M(null),y(null),z({top:0,left:0})},[L,I,u]);x.useDraggable(P,{onDragStart:j,onDrag:V,onDragEnd:Te});const E=g.current,de=t.useCallback(n=>{const s={data:[...d,n],type:G,previousItem:null,item:n};u.call(void 0,s)},[u,d]),$=t.useCallback((n,k)=>{const s=d.slice(),T=d.indexOf(k);T!==-1&&s.splice(T,1,n);const h={data:s,type:G,previousItem:k,item:n};u.call(void 0,h)},[u,d]),m=t.useCallback(n=>{const s={data:d.filter(T=>T!==n),type:G,previousItem:n,item:null};u.call(void 0,s)},[u,d]),O=t.useCallback((n,k)=>{const s=o.slice(),T=s.indexOf(k);T!==-1&&(n?s.splice(T,1,n):s.splice(T,1));const h={data:s,type:W,previousItem:k,item:n};u.call(void 0,h)},[u,o]);return t.createElement("div",{id:c,style:f,ref:D,className:x.classNames("k-widget k-taskboard",r)},b,t.createElement("div",{className:"k-taskboard-content",style:E?{userSelect:"none"}:void 0},t.createElement("div",{className:"k-taskboard-columns-container",ref:P},(L||o).map(n=>t.createElement(ie,{key:n.id,tabIndex:e.tabIndex,column:n,tasks:q[n.status]||[],dragTargetRef:g,onTaskCreate:de,onTaskEdit:$,onTaskDelete:m,onColumnChange:O,columnComponent:e.column||ge,cardComponent:e.card||J,priorities:e.priorities})))),E&&E.type===G&&t.createElement(se,{elementRef:K,style:{position:"absolute",width:E.width,height:E.height,top:A.top,left:A.left,zIndex:10,borderLeftColor:E.item.priority?E.item.priority.color:E.item.color},task:E.item,dragTargetRef:g,cardComponent:e.card||J,onDeleteTask:x.noop,showEditPane:x.noop}),E&&E.type===W&&t.createElement(ie,{elementRef:U,style:{position:"absolute",width:E.width,height:E.height,top:A.top,left:A.left,zIndex:10},cardComponent:e.card||J,columnComponent:e.column||ge,column:E.item,tasks:q[E.item.status],priorities:e.priorities,dragTargetRef:g,onTaskDelete:m,onColumnChange:O,onTaskEdit:$,onTaskCreate:de}))});Je.propTypes={columnData:S.array.isRequired,taskData:S.array.isRequired};Je.displayName="KendoReactTaskBoard";const Qe=e=>{const{className:a,style:o,children:r}=e;return t.createElement("div",{style:o,className:x.classNames("k-taskboard-header",a)},t.createElement("div",{className:"k-taskboard-toolbar k-toolbar"},r))};Qe.propTypes={children:S.node};Qe.displayName="KendoReactTaskBoardToolbar";exports.TaskBoard=Je;exports.TaskBoardAddCard=fe;exports.TaskBoardCard=J;exports.TaskBoardCardBody=$e;exports.TaskBoardCardHeader=We;exports.TaskBoardColumn=ge;exports.TaskBoardColumnBody=Ue;exports.TaskBoardColumnHeader=Ye;exports.TaskBoardConfirmDialog=re;exports.TaskBoardEditCard=Be;exports.TaskBoardPreviewDialog=Ge;exports.TaskBoardTaskEditPane=le;exports.TaskBoardToolbar=Qe;exports.useTaskEditing=Xe;
|
|
5
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const at=require("react"),nt=require("prop-types"),ot=require("@progress/kendo-licensing"),x=require("@progress/kendo-react-common"),ge=require("@progress/kendo-react-intl"),w=require("@progress/kendo-react-buttons"),be=require("@progress/kendo-react-inputs"),_=require("@progress/kendo-svg-icons"),$e=require("@progress/kendo-react-dialogs"),ue=require("@progress/kendo-react-layout"),it=require("@progress/kendo-react-popup"),lt=require("@progress/kendo-react-dropdowns"),Ee=require("@progress/kendo-react-labels"),De=require("@progress/kendo-react-form");function tt(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const r=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(a,o,r.get?r:{enumerable:!0,get:()=>e[o]})}}return a.default=e,Object.freeze(a)}const t=tt(at),S=tt(nt),rt={name:"@progress/kendo-react-taskboard",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},st="taskBoard.toolbarAddColumnButton",dt="taskBoard.toolbarSearchField",he="taskBoard.editColumnButton",ye="taskBoard.addCardButton",ve="taskBoard.deleteColumnButton",Se="taskBoard.editCardButton",we="taskBoard.deleteCardButton",Pe="taskBoard.deleteTaskDialogMessage",Ie="taskBoard.deleteTaskDialogTitle",Re="taskBoard.deleteTaskConfirmButton",Le="taskBoard.deleteTaskCancelButton",Ne="taskBoard.addCardTitle",Z="taskBoard.addCardTitleLabel",$="taskBoard.addCardDescriptionLabel",ee="taskBoard.addCardPriorityLabel",xe="taskBoard.addCardCreateButton",Me="taskBoard.deleteColumnDialogMessage",Ae="taskBoard.deleteColumnDialogTitle",Ke="taskBoard.deleteColumnConfirmButton",qe="taskBoard.deleteColumnCancelButton",Oe="taskBoard.editCardPaneTitle",He="taskBoard.editCardPaneSaveButton",te="taskBoard.editPaneTitleLabel",ae="taskBoard.editPaneDescriptionLabel",ne="taskBoard.editPanePriorityLabel",oe="taskBoard.editPaneCancelButton",Fe="taskBoard.previewPanePriorityLabel",_e="taskBoard.previewPaneDeleteButton",ze="taskBoard.previewPaneEditButton",i={[st]:"Add column",[dt]:"Search",[he]:"Edit column",[ye]:"Add card",[ve]:"Delete column",[Se]:"Edit card",[we]:"Delete card",[Pe]:"Are you sure you want to delete this card?",[Ie]:"Delete Card",[Re]:"Delete",[Le]:"Cancel",[Me]:"Are you sure you want to delete this column?",[Ae]:"Delete column?",[Ke]:"Delete",[qe]:"Cancel",[Ne]:"Create new card",[xe]:"Create",[oe]:"Cancel",[Oe]:"Edit",[He]:"Save changes",[te]:"Title:",[ae]:"Description:",[ne]:"Priority:",[Z]:"Title",[$]:"Description",[ee]:"Priority",[Fe]:"Priority:",[_e]:"Delete",[ze]:"Edit"},je="data-taskboard-type",Ve="data-taskboard-id",Ye="data-taskboard-placeholder",p="column",J="task",Ue=e=>{const{edit:a,title:o}=e.column;return t.createElement("div",{className:"k-taskboard-column-header"},t.createElement("div",{className:"k-taskboard-column-header-text k-text-ellipsis"},a?t.createElement(be.Input,{value:o,onChange:e.onTitleChange,onBlur:e.onColumnExitEdit,autoFocus:!0}):o),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:x.classNames("k-taskboard-column-header-actions",{"k-disabled":a})},t.createElement(w.Button,{fillMode:"flat",icon:"pencil",svgIcon:_.pencilIcon,title:e.editButtonTitle,onClick:e.onColumnEnterEdit}),t.createElement(w.Button,{fillMode:"flat",icon:"plus",svgIcon:_.plusIcon,title:e.addButtonTitle,onClick:e.onShowAddCardDialog}),t.createElement(w.Button,{fillMode:"flat",icon:"x",svgIcon:_.xIcon,title:e.closeButtonTitle,onClick:e.onColumnDelete})))};Ue.displayName="KendoReactTaskBoardColumnHeader";const Xe=e=>t.createElement("div",{className:"k-taskboard-column-cards-container"},t.createElement("div",{className:"k-taskboard-column-cards"},e.children));Xe.displayName="KendoReactTaskBoardColumnBody";const le=e=>{const{onClose:a,onConfirm:o,dialogMessage:r,dialogTitle:T,dialogConfirmButton:c,dialogCancelButton:d}=e;return t.createElement($e.Dialog,{title:T,closeIcon:!1},r,t.createElement($e.DialogActionsBar,{layout:"end"},t.createElement(w.Button,{themeColor:"primary",onClick:o},c),t.createElement(w.Button,{onClick:a},d)))};le.propTypes={onClose:S.func.isRequired,onConfirm:S.func.isRequired,dialogMessage:S.string.isRequired,dialogTitle:S.string.isRequired,dialogConfirmButton:S.string.isRequired,dialogCancelButton:S.string.isRequired};le.displayName="KendoReactTaskBoardConfirmDialog";const We=({onSave:e,task:a,priorities:o})=>{const[r,T]=t.useState(a?a.title:""),[c,d]=t.useState(a?a.description:""),[u,l]=t.useState(a?a.priority:o[0]),D=t.useCallback(g=>{T(g.value)},[]),B=t.useCallback(g=>{d(g.value)},[]),b=t.useCallback(g=>{l(g.target.value)},[]),P=t.useCallback(g=>{const C={id:void 0,status:"",...a||{},title:r,description:c,priority:u};e.call(void 0,C,a)},[e,a,r,c,u]);return{onTitleChange:D,title:r,onDescriptionChange:B,description:c,onPriorityChange:b,priority:u,onSave:P}},Ce=e=>{const{onTitleChange:a,title:o,onDescriptionChange:r,description:T,onPriorityChange:c,priority:d,onSave:u}=We(e),l=ge.useLocalization();return t.createElement(e.editPane,{header:l.toLanguageString(Oe,i[Oe])+e.task.title,titleInputTitle:l.toLanguageString(Z,i[Z]),descriptionInputTitle:l.toLanguageString($,i[$]),priorityDropDownTitle:l.toLanguageString(ee,i[ee]),task:e.task,saveButton:l.toLanguageString(He,i[He]),cancelButton:l.toLanguageString(oe,i[oe]),priorities:e.priorities,titleLabel:l.toLanguageString(te,i[te]),descriptionLabel:l.toLanguageString(ae,i[ae]),priorityLabel:l.toLanguageString(ne,i[ne]),onSave:u,onClose:e.onClose,onTitleChange:a,title:o,onDescriptionChange:r,description:T,onPriorityChange:c,priority:d})};Ce.propTypes={};Ce.displayName="KendoReactTaskBoardEditCard";const Be=e=>{const{onTitleChange:a,title:o,onDescriptionChange:r,description:T,onPriorityChange:c,priority:d,onSave:u}=We(e),l=ge.useLocalization();return t.createElement(e.editPane,{header:l.toLanguageString(Ne,i[Ne]),titleInputTitle:l.toLanguageString(Z,i[Z]),descriptionInputTitle:l.toLanguageString($,i[$]),priorityDropDownTitle:l.toLanguageString(ee,i[ee]),titleLabel:l.toLanguageString(te,i[te]),descriptionLabel:l.toLanguageString(ae,i[ae]),priorityLabel:l.toLanguageString(ne,i[ne]),saveButton:l.toLanguageString(xe,i[xe]),cancelButton:l.toLanguageString(oe,i[oe]),priorities:e.priorities,onSave:u,onClose:e.onClose,onTitleChange:a,title:o,onDescriptionChange:r,description:T,onPriorityChange:c,priority:d})};Be.propTypes={};Be.displayName="KendoReactTaskBoardAddCard";const pe=e=>{const a=t.useRef();return t.createElement(ue.CardHeader,{className:"k-hbox"},t.createElement("span",{className:"k-card-title k-link",onClick:e.onShowPreviewPane},e.title),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:"k-card-header-actions"},t.createElement(w.Button,{fillMode:"flat",icon:"more-vertical",svgIcon:_.moreVerticalIcon,ref:a,onClick:e.showMenu?e.onHideMenu:e.onShowMenu,onBlur:e.onMenuButtonBlur}),t.createElement(it.Popup,{anchor:a.current&&a.current.element,show:e.showMenu,ref:e.popupRef},t.createElement(ue.Menu,{vertical:!0,onSelect:e.onMenuItemSelect,items:e.menuItems,className:"k-context-menu"}))))};pe.displayName="KendoReactTaskBoardCardHeader";const Ge=e=>t.createElement(ue.CardBody,null,e.children);Ge.displayName="KendoReactTaskBoardCardBody";const Je=e=>t.createElement("div",{className:"k-taskboard-pane k-taskboard-preview-pane"},t.createElement("div",{className:"k-taskboard-pane-header"},t.createElement("div",{className:"k-taskboard-pane-header-text"},e.title),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:"k-taskboard-pane-header-actions"},t.createElement(w.Button,{icon:"x",svgIcon:_.xIcon,fillMode:"flat",onClick:e.onClosePreviewPane}))),t.createElement("div",{className:"k-taskboard-pane-content"},t.createElement("p",null,e.description),t.createElement("p",null,e.priorityLabel," ",t.createElement("span",{style:{backgroundColor:e.priority.color}}," ")," ",e.priority.priority)),t.createElement("div",{className:"k-taskboard-pane-actions k-actions k-hstack k-justify-content-end"},t.createElement(w.Button,{onClick:e.onTaskDelete},e.delete),t.createElement(w.Button,{themeColor:"primary",onClick:e.onTaskEdit},e.edit)));Je.displayName="KendoReactTaskBoardPreviewDialog";const Te=e=>{const{onDeleteTask:a,showEditPane:o,task:r,style:T,dragTargetRef:c,elementRef:d}=e,[u,l]=t.useState(!1),[D,B]=t.useState(!1),[b,P]=t.useState(!1),g=t.useRef(null),C=ge.useLocalization(),I=[{text:C.toLanguageString(Se,i[Se]),icon:"pencil",svgIcon:_.pencilIcon,data:()=>{o(r),l(!u)}},{text:C.toLanguageString(we,i[we]),icon:"trash",svgIcon:_.trashIcon,data:()=>{B(!D),l(!u)}}],M=j=>{j.item.data()},L=()=>{l(!0)},y=()=>{l(!1)},A=j=>{const V=g.current&&g.current.element;V&&V.contains(j.relatedTarget)||l(!1)},z=()=>{B(!D)},K=()=>{P(!0)},X=()=>{P(!1)},q=()=>{o(r),K()};return r.isPlaceholder&&c&&c.current?t.createElement("div",{style:{width:c.current.width,height:c.current.height},className:"k-taskboard-drag-placeholder",[Ye]:!0}):t.createElement(e.cardComponent,{task:r,style:T,tabIndex:e.tabIndex,disabled:e.disabled,elementRef:d,showMenu:u,showDeleteConfirm:D,showTaskPreviewPane:b,menuItems:I,popupRef:g,confirmDialogMessage:C.toLanguageString(Pe,i[Pe]),confirmDialogTitle:C.toLanguageString(Ie,i[Ie]),confirmDialogConfirmButton:C.toLanguageString(Re,i[Re]),confirmDialogCancelButton:C.toLanguageString(Le,i[Le]),previewDialogPriorityLabel:C.toLanguageString(Fe,i[Fe]),previewDialogDelete:C.toLanguageString(_e,i[_e]),previewDialogEdit:C.toLanguageString(ze,i[ze]),onShowPreviewPane:K,onClosePreviewPane:X,onMenuItemSelect:M,onShowMenu:L,onHideMenu:y,onMenuButtonBlur:A,onTaskDelete:a,onTaskEdit:q,onCloseConfirmDialog:z,card:ue.Card,cardHeader:pe,cardBody:Ge,confirmDialog:le,previewDialog:Je})};Te.propTypes={task:S.object.isRequired};Te.displayName="KendoReactTaskBoardCardBase";const me=e=>{const[a,o]=t.useState(!1),[r,T]=t.useState(!1),[c,d]=t.useState(!1),[u,l]=t.useState(),{dragTargetRef:D,column:B,onColumnChange:b,tasks:P,elementRef:g,style:C,onTaskCreate:I,onTaskEdit:M,onTaskDelete:L}=e,y=ge.useLocalization(),A=t.useCallback(m=>{const O={...B,title:m.value};b.call(void 0,O,B)},[B,b]),z=t.useCallback(()=>{const m={...B,edit:!0};b.call(void 0,m,B)},[B,b]),K=t.useCallback(()=>{const m={...B,edit:!1};b.call(void 0,m,B)},[B,b]),X=t.useCallback(()=>{b.call(void 0,null,B)},[B,b]),q=()=>{d(!c)},j=()=>{o(!0)},V=m=>{T(!0),l(m)},fe=()=>{o(!1),T(!1)},E=t.useCallback(m=>{o(!1),I.call(void 0,{...m,status:B.status})},[I,B]),re=t.useCallback((m,O)=>{T(!1),M.call(void 0,m,O)},[M]),G=t.useCallback(m=>{L.call(void 0,m)},[L]);if(B.isPlaceholder&&D&&D.current){const m=D.current?D.current.width:0,O=D.current?D.current.height:0;return t.createElement("div",{style:{width:m,height:O},className:"k-taskboard-column k-taskboard-drag-placeholder",[Ye]:!0})}return t.createElement(e.columnComponent,{column:e.column,tasks:P,priorities:e.priorities,style:D?{overflow:"visible",...C}:C,tabIndex:e.tabIndex,elementRef:g,onTaskCreate:E,onTaskEdit:re,onTaskDelete:G,card:e.cardComponent,header:Ue,body:Xe,confirmDialog:le,editCardDialog:Ce,addCardDialog:Be,onTitleChange:A,onColumnEnterEdit:z,onColumnExitEdit:K,onColumnConfirmDelete:X,onShowAddCardDialog:j,onShowEditCardPane:V,onColumnDelete:q,onCloseDialog:fe,showAddCard:a,showEditCard:r,showColumnConfirmDelete:c,editedTask:u,confirmDialogMessage:y.toLanguageString(Me,i[Me]),confirmDialogTitle:y.toLanguageString(Ae,i[Ae]),confirmDialogConfirmButton:y.toLanguageString(Ke,i[Ke]),confirmDialogCancelButton:y.toLanguageString(qe,i[qe]),editButtonTitle:y.toLanguageString(he,i[he]),addButtonTitle:y.toLanguageString(ye,i[ye]),closeButtonTitle:y.toLanguageString(ve,i[ve])},P&&P.map(m=>t.createElement(Te,{key:m.id,tabIndex:e.tabIndex,task:m,disabled:!!e.column.edit,onDeleteTask:()=>G(m),showEditPane:()=>V(m),dragTargetRef:e.dragTargetRef,style:{borderLeftColor:m.priority.color},cardComponent:e.cardComponent})))};me.propTypes={column:S.object.isRequired,taskMap:S.object};me.displayName="KendoReactTaskBoardColumn";const ct=(e,a,o)=>{let r=-1,T=-1;for(let c=0;c<o.length;c++){const d=String(o[c].id);if(d===e&&(T=c),d===a&&(r=c),r!==-1&&T!==-1)return{dragIndex:T,dropIndex:r}}return null},et=e=>{for(;e;){if(!e.getAttribute)return null;const a=e.getAttribute(Ve);if(a)return{id:a,type:e.getAttribute(je)||"",element:e};e=e.parentNode}return null},ut=(e,a)=>{const o=a.dataItem.color,r=t.createElement(t.Fragment,null,t.createElement("span",{style:{backgroundColor:o}}," "),e.props.children);return t.cloneElement(e,e.props,r)},mt=(e,a)=>{if(!a)return e;const o=t.createElement(t.Fragment,null,t.createElement("span",{style:{backgroundColor:a.color}}," "),t.createElement("span",null," ",e.props.children));return t.cloneElement(e,{...e.props},o)},Q=e=>t.createElement(t.Fragment,null,t.createElement(e.card,{key:String(e.task.id),ref:e.elementRef,style:e.style,className:x.classNames("k-taskboard-card k-cursor-move k-taskboard-card-category",{"k-disabled":e.disabled}),[je]:J,[Ve]:e.task.id,tabIndex:e.tabIndex},t.createElement(e.cardHeader,{showMenu:e.showMenu,menuItems:e.menuItems,popupRef:e.popupRef,title:e.task.title,task:e.task,onShowPreviewPane:e.onShowPreviewPane,onShowMenu:e.onShowMenu,onHideMenu:e.onHideMenu,onMenuButtonBlur:e.onMenuButtonBlur,onMenuItemSelect:e.onMenuItemSelect}),t.createElement(e.cardBody,{task:e.task},e.task.description)),e.showDeleteConfirm&&t.createElement(e.confirmDialog,{onConfirm:e.onTaskDelete,onClose:e.onCloseConfirmDialog,dialogMessage:e.confirmDialogMessage,dialogTitle:e.confirmDialogTitle,dialogConfirmButton:e.confirmDialogConfirmButton,dialogCancelButton:e.confirmDialogCancelButton}),e.showTaskPreviewPane&&t.createElement(e.previewDialog,{title:e.task.title,description:e.task.description,priorityLabel:e.previewDialogPriorityLabel,delete:e.previewDialogDelete,edit:e.previewDialogEdit,onClosePreviewPane:e.onClosePreviewPane,onTaskDelete:e.onTaskDelete,onTaskEdit:e.onTaskEdit,priority:e.task.priority}));Q.displayName="KendoReactTaskBoardCard";const ie=e=>t.createElement("div",{className:"k-taskboard-pane k-taskboard-edit-pane"},t.createElement("div",{className:"k-taskboard-pane-header"},t.createElement("div",{className:"k-taskboard-pane-header-text"},e.header),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:"k-taskboard-pane-header-actions"},t.createElement(w.Button,{icon:"x",svgIcon:_.xIcon,fillMode:"flat",onClick:e.onClose}))),t.createElement("div",{className:"k-taskboard-pane-content"},t.createElement("div",{role:"form","data-role":"form",className:"k-form"},t.createElement(De.FieldWrapper,null,t.createElement(Ee.Label,{editorId:"title"},e.titleLabel),t.createElement(be.Input,{id:"title",onChange:e.onTitleChange,value:e.title,title:e.titleInputTitle})),t.createElement(De.FieldWrapper,null,t.createElement(Ee.Label,{editorId:"description"},e.descriptionLabel),t.createElement(be.Input,{id:"description",onChange:e.onDescriptionChange,value:e.description,title:e.descriptionInputTitle})),t.createElement(De.FieldWrapper,null,t.createElement(Ee.Label,{editorId:"priority"},e.priorityLabel),t.createElement(lt.DropDownList,{id:"priority",data:e.priorities,value:e.priority,onChange:e.onPriorityChange,itemRender:ut,valueRender:mt,textField:"priority",dataItemKey:"priority",title:e.priorityDropDownTitle})))),t.createElement("div",{className:"k-taskboard-pane-actions k-actions k-hstack k-justify-content-end"},t.createElement(w.Button,{onClick:e.onClose},e.cancelButton),t.createElement(w.Button,{themeColor:"primary",onClick:e.onSave,disabled:!e.title||!e.description},e.saveButton)));ie.propTypes={};ie.displayName="KendoReactTaskBoardEditPane";const ke=e=>t.createElement(t.Fragment,null,t.createElement("div",{ref:e.elementRef,style:e.style,className:x.classNames("k-taskboard-column",{"k-taskboard-column-edit":e.column.edit}),tabIndex:e.tabIndex,[je]:p,[Ve]:e.column.id},t.createElement(e.header,{column:e.column,tasks:e.tasks,onTitleChange:e.onTitleChange,onColumnExitEdit:e.onColumnExitEdit,editButtonTitle:e.editButtonTitle,onColumnEnterEdit:e.onColumnEnterEdit,addButtonTitle:e.addButtonTitle,onShowAddCardDialog:e.onShowAddCardDialog,closeButtonTitle:e.closeButtonTitle,onColumnDelete:e.onColumnDelete}),t.createElement(e.body,null,e.children)),e.showAddCard&&t.createElement(e.addCardDialog,{onClose:e.onCloseDialog,onSave:e.onTaskCreate,priorities:e.priorities,editPane:ie}),e.showEditCard&&e.editedTask&&t.createElement(e.editCardDialog,{onClose:e.onCloseDialog,onSave:e.onTaskEdit,task:e.editedTask,priorities:e.priorities,editPane:ie}),e.showColumnConfirmDelete&&t.createElement(e.confirmDialog,{onClose:e.onColumnDelete,onConfirm:e.onColumnConfirmDelete,dialogMessage:e.confirmDialogMessage,dialogTitle:e.confirmDialogTitle,dialogConfirmButton:e.confirmDialogConfirmButton,dialogCancelButton:e.confirmDialogCancelButton}));ke.displayName="KendoReactTaskBoardColumn";const Qe=t.forwardRef((e,a)=>{ot.validatePackage(rt);const{columnData:o=[],className:r,style:T,id:c,taskData:d=[],onChange:u}=e,l=t.useRef(null),D=t.useRef(null);t.useImperativeHandle(l,()=>({props:e})),t.useImperativeHandle(a,()=>l.current);const b=t.Children.toArray(e.children).filter(n=>n&&n.type&&n.type.displayName==="KendoReactTaskBoardToolbar"),P=t.useRef(null),g=t.useRef(null),C=t.useRef(null),[I,M]=t.useState(null),[L,y]=t.useState(null),[A,z]=t.useState({top:0,left:0}),K=t.useRef(null),X=t.useRef(null),q=t.useMemo(()=>{const n={};return(I||d).forEach(k=>{const s=k.status;n[s]||(n[s]=[]),n[s].push(k)}),n},[d,I]),j=t.useCallback(n=>{const k=n.originalEvent.target;if(k.closest("button,input,.k-link,.k-taskboard-preview-pane"))return;const s=et(k),f=D.current;if(s&&f){const h=s.type===p;if(h&&!k.closest(".k-taskboard-column-header"))return;const W=s.element.getBoundingClientRect(),Y=f.getBoundingClientRect();C.current={x:n.clientX-W.left+Y.left,y:n.clientY-W.top+Y.top};const R=h?o:d,se=h?y:M,N=R.findIndex(de=>String(de.id)===s.id),F=R[N];if(N===-1||F.edit)return;const v=x.clone(F);v.isPlaceholder=!0;const U=[...R];U[N]=v,g.current={...s,index:N,item:F,width:W.width,height:W.height},z({top:n.clientY-C.current.y,left:n.clientX-C.current.x}),se(U)}},[o,d]),V=t.useCallback(n=>{const k=g.current,s=K.current&&K.current.element||X.current;if(k&&s){z({top:n.clientY-C.current.y,left:n.clientX-C.current.x}),s.style.visibility="hidden";const f=document.elementFromPoint(n.clientX,n.clientY);if(s.style.visibility="",f&&f.getAttribute(Ye))return;const h=f&&et(f);if(h){let H;const W=h.type===k.type,Y=k.type===p,R=(Y?L:I)||[],se=Y?y:M;if(Y||W){if(H=ct(k.id,h.id,R),H){const N=R[H.dragIndex],F=R[H.dropIndex],v=x.clone(N);Y||(v.status=F.status);const U=[...R];U.splice(H.dragIndex,1),U.splice(H.dropIndex,0,v),k.index=H.dropIndex,se(U)}}else{const N=R.findIndex(v=>String(v.id)===k.id),F=o.findIndex(v=>String(v.id)===h.id);if(N!==-1&&F!==-1){const v=R[N],de=o[F].status;if(q[de])return;v.status=de;const ce=[...R];ce.splice(N,1),ce.push(v),k.index=ce.length-1,se(ce)}}}}},[L,I,o,q]),fe=t.useCallback(()=>{const n=g.current;if(u&&n){const s=(n.type===p?L:I)||[],f=s[n.index];delete f.isPlaceholder;const h={data:s,type:n.type,previousItem:n.item,item:f};u.call(void 0,h)}g.current=null,C.current=null,M(null),y(null),z({top:0,left:0})},[L,I,u]);x.useDraggable(P,{onDragStart:j,onDrag:V,onDragEnd:fe});const E=g.current,re=t.useCallback(n=>{const s={data:[...d,n],type:J,previousItem:null,item:n};u.call(void 0,s)},[u,d]),G=t.useCallback((n,k)=>{const s=d.slice(),f=d.indexOf(k);f!==-1&&s.splice(f,1,n);const h={data:s,type:J,previousItem:k,item:n};u.call(void 0,h)},[u,d]),m=t.useCallback(n=>{const s={data:d.filter(f=>f!==n),type:J,previousItem:n,item:null};u.call(void 0,s)},[u,d]),O=t.useCallback((n,k)=>{const s=o.slice(),f=s.indexOf(k);f!==-1&&(n?s.splice(f,1,n):s.splice(f,1));const h={data:s,type:p,previousItem:k,item:n};u.call(void 0,h)},[u,o]);return t.createElement("div",{id:c,style:T,ref:D,className:x.classNames("k-widget k-taskboard",r)},b,t.createElement("div",{className:"k-taskboard-content",style:E?{userSelect:"none"}:void 0},t.createElement("div",{className:"k-taskboard-columns-container",ref:P},(L||o).map(n=>t.createElement(me,{key:n.id,tabIndex:e.tabIndex,column:n,tasks:q[n.status]||[],dragTargetRef:g,onTaskCreate:re,onTaskEdit:G,onTaskDelete:m,onColumnChange:O,columnComponent:e.column||ke,cardComponent:e.card||Q,priorities:e.priorities})))),E&&E.type===J&&t.createElement(Te,{elementRef:K,style:{position:"absolute",width:E.width,height:E.height,top:A.top,left:A.left,zIndex:10,borderLeftColor:E.item.priority?E.item.priority.color:E.item.color},task:E.item,dragTargetRef:g,cardComponent:e.card||Q,onDeleteTask:x.noop,showEditPane:x.noop}),E&&E.type===p&&t.createElement(me,{elementRef:X,style:{position:"absolute",width:E.width,height:E.height,top:A.top,left:A.left,zIndex:10},cardComponent:e.card||Q,columnComponent:e.column||ke,column:E.item,tasks:q[E.item.status],priorities:e.priorities,dragTargetRef:g,onTaskDelete:m,onColumnChange:O,onTaskEdit:G,onTaskCreate:re}))});Qe.propTypes={columnData:S.array.isRequired,taskData:S.array.isRequired};Qe.displayName="KendoReactTaskBoard";const Ze=e=>{const{className:a,style:o,children:r}=e;return t.createElement("div",{style:o,className:x.classNames("k-taskboard-header",a)},t.createElement("div",{className:"k-taskboard-toolbar k-toolbar"},r))};Ze.propTypes={children:S.node};Ze.displayName="KendoReactTaskBoardToolbar";exports.TaskBoard=Qe;exports.TaskBoardAddCard=Be;exports.TaskBoardCard=Q;exports.TaskBoardCardBody=Ge;exports.TaskBoardCardHeader=pe;exports.TaskBoardColumn=ke;exports.TaskBoardColumnBody=Xe;exports.TaskBoardColumnHeader=Ue;exports.TaskBoardConfirmDialog=le;exports.TaskBoardEditCard=Ce;exports.TaskBoardPreviewDialog=Je;exports.TaskBoardTaskEditPane=ie;exports.TaskBoardToolbar=Ze;exports.useTaskEditing=We;
|
package/index.mjs
CHANGED
|
@@ -2,11 +2,12 @@
|
|
|
2
2
|
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
"use client";
|
|
5
6
|
import * as t from "react";
|
|
6
7
|
import * as S from "prop-types";
|
|
7
8
|
import { validatePackage as at } from "@progress/kendo-licensing";
|
|
8
|
-
import { classNames as
|
|
9
|
-
import { useLocalization as
|
|
9
|
+
import { classNames as ae, clone as Ye, useDraggable as nt, noop as Ue } from "@progress/kendo-react-common";
|
|
10
|
+
import { useLocalization as ce } from "@progress/kendo-react-intl";
|
|
10
11
|
import { Button as w } from "@progress/kendo-react-buttons";
|
|
11
12
|
import { Input as fe } from "@progress/kendo-react-inputs";
|
|
12
13
|
import { pencilIcon as We, plusIcon as ot, xIcon as qe, moreVerticalIcon as it, trashIcon as lt } from "@progress/kendo-svg-icons";
|
|
@@ -20,10 +21,10 @@ const Ct = {
|
|
|
20
21
|
name: "@progress/kendo-react-taskboard",
|
|
21
22
|
productName: "KendoReact",
|
|
22
23
|
productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
|
|
23
|
-
publishDate:
|
|
24
|
+
publishDate: 1702305177,
|
|
24
25
|
version: "",
|
|
25
26
|
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
26
|
-
}, ft = "taskBoard.toolbarAddColumnButton", Bt = "taskBoard.toolbarSearchField", Be = "taskBoard.editColumnButton", Te = "taskBoard.addCardButton", Ee = "taskBoard.deleteColumnButton", De = "taskBoard.editCardButton", he = "taskBoard.deleteCardButton", be = "taskBoard.deleteTaskDialogMessage", ye = "taskBoard.deleteTaskDialogTitle", ve = "taskBoard.deleteTaskConfirmButton", Se = "taskBoard.deleteTaskCancelButton", we = "taskBoard.addCardTitle",
|
|
27
|
+
}, ft = "taskBoard.toolbarAddColumnButton", Bt = "taskBoard.toolbarSearchField", Be = "taskBoard.editColumnButton", Te = "taskBoard.addCardButton", Ee = "taskBoard.deleteColumnButton", De = "taskBoard.editCardButton", he = "taskBoard.deleteCardButton", be = "taskBoard.deleteTaskDialogMessage", ye = "taskBoard.deleteTaskDialogTitle", ve = "taskBoard.deleteTaskConfirmButton", Se = "taskBoard.deleteTaskCancelButton", we = "taskBoard.addCardTitle", J = "taskBoard.addCardTitleLabel", Q = "taskBoard.addCardDescriptionLabel", Z = "taskBoard.addCardPriorityLabel", Pe = "taskBoard.addCardCreateButton", Ie = "taskBoard.deleteColumnDialogMessage", Re = "taskBoard.deleteColumnDialogTitle", Le = "taskBoard.deleteColumnConfirmButton", Ne = "taskBoard.deleteColumnCancelButton", xe = "taskBoard.editCardPaneTitle", Me = "taskBoard.editCardPaneSaveButton", $ = "taskBoard.editPaneTitleLabel", p = "taskBoard.editPaneDescriptionLabel", ee = "taskBoard.editPanePriorityLabel", te = "taskBoard.editPaneCancelButton", Ae = "taskBoard.previewPanePriorityLabel", Ke = "taskBoard.previewPaneDeleteButton", He = "taskBoard.previewPaneEditButton", i = {
|
|
27
28
|
[ft]: "Add column",
|
|
28
29
|
[Bt]: "Search",
|
|
29
30
|
[Be]: "Edit column",
|
|
@@ -44,16 +45,16 @@ const Ct = {
|
|
|
44
45
|
[te]: "Cancel",
|
|
45
46
|
[xe]: "Edit",
|
|
46
47
|
[Me]: "Save changes",
|
|
47
|
-
[
|
|
48
|
+
[$]: "Title:",
|
|
48
49
|
[p]: "Description:",
|
|
49
50
|
[ee]: "Priority:",
|
|
50
|
-
[
|
|
51
|
-
[
|
|
52
|
-
[
|
|
51
|
+
[J]: "Title",
|
|
52
|
+
[Q]: "Description",
|
|
53
|
+
[Z]: "Priority",
|
|
53
54
|
[Ae]: "Priority:",
|
|
54
55
|
[Ke]: "Delete",
|
|
55
56
|
[He]: "Edit"
|
|
56
|
-
}, Fe = "data-taskboard-type", _e = "data-taskboard-id", ze = "data-taskboard-placeholder", X = "column",
|
|
57
|
+
}, Fe = "data-taskboard-type", _e = "data-taskboard-id", ze = "data-taskboard-placeholder", X = "column", G = "task", Ge = (e) => {
|
|
57
58
|
const { edit: n, title: o } = e.column;
|
|
58
59
|
return /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-column-header" }, /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-column-header-text k-text-ellipsis" }, n ? /* @__PURE__ */ t.createElement(
|
|
59
60
|
fe,
|
|
@@ -63,7 +64,7 @@ const Ct = {
|
|
|
63
64
|
onBlur: e.onColumnExitEdit,
|
|
64
65
|
autoFocus: !0
|
|
65
66
|
}
|
|
66
|
-
) : o), /* @__PURE__ */ t.createElement("span", { className: "k-spacer" }), /* @__PURE__ */ t.createElement("div", { className:
|
|
67
|
+
) : o), /* @__PURE__ */ t.createElement("span", { className: "k-spacer" }), /* @__PURE__ */ t.createElement("div", { className: ae("k-taskboard-column-header-actions", { "k-disabled": n }) }, /* @__PURE__ */ t.createElement(
|
|
67
68
|
w,
|
|
68
69
|
{
|
|
69
70
|
fillMode: "flat",
|
|
@@ -92,14 +93,14 @@ const Ct = {
|
|
|
92
93
|
}
|
|
93
94
|
)));
|
|
94
95
|
};
|
|
95
|
-
|
|
96
|
-
const
|
|
97
|
-
|
|
98
|
-
const
|
|
96
|
+
Ge.displayName = "KendoReactTaskBoardColumnHeader";
|
|
97
|
+
const Je = (e) => /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-column-cards-container" }, /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-column-cards" }, e.children));
|
|
98
|
+
Je.displayName = "KendoReactTaskBoardColumnBody";
|
|
99
|
+
const ue = (e) => {
|
|
99
100
|
const { onClose: n, onConfirm: o, dialogMessage: s, dialogTitle: B, dialogConfirmButton: c, dialogCancelButton: d } = e;
|
|
100
101
|
return /* @__PURE__ */ t.createElement(rt, { title: B, closeIcon: !1 }, s, /* @__PURE__ */ t.createElement(st, { layout: "end" }, /* @__PURE__ */ t.createElement(w, { themeColor: "primary", onClick: o }, c), /* @__PURE__ */ t.createElement(w, { onClick: n }, d)));
|
|
101
102
|
};
|
|
102
|
-
|
|
103
|
+
ue.propTypes = {
|
|
103
104
|
onClose: S.func.isRequired,
|
|
104
105
|
onConfirm: S.func.isRequired,
|
|
105
106
|
dialogMessage: S.string.isRequired,
|
|
@@ -107,8 +108,8 @@ me.propTypes = {
|
|
|
107
108
|
dialogConfirmButton: S.string.isRequired,
|
|
108
109
|
dialogCancelButton: S.string.isRequired
|
|
109
110
|
};
|
|
110
|
-
|
|
111
|
-
const
|
|
111
|
+
ue.displayName = "KendoReactTaskBoardConfirmDialog";
|
|
112
|
+
const Qe = ({ onSave: e, task: n, priorities: o }) => {
|
|
112
113
|
const [s, B] = t.useState(n ? n.title : ""), [c, d] = t.useState(n ? n.description : ""), [u, l] = t.useState(n ? n.priority : o[0]), D = t.useCallback((k) => {
|
|
113
114
|
B(k.value);
|
|
114
115
|
}, []), f = t.useCallback((k) => {
|
|
@@ -121,19 +122,19 @@ const Je = ({ onSave: e, task: n, priorities: o }) => {
|
|
|
121
122
|
}, [e, n, s, c, u]);
|
|
122
123
|
return { onTitleChange: D, title: s, onDescriptionChange: f, description: c, onPriorityChange: h, priority: u, onSave: P };
|
|
123
124
|
}, Ve = (e) => {
|
|
124
|
-
const { onTitleChange: n, title: o, onDescriptionChange: s, description: B, onPriorityChange: c, priority: d, onSave: u } =
|
|
125
|
+
const { onTitleChange: n, title: o, onDescriptionChange: s, description: B, onPriorityChange: c, priority: d, onSave: u } = Qe(e), l = ce();
|
|
125
126
|
return /* @__PURE__ */ t.createElement(
|
|
126
127
|
e.editPane,
|
|
127
128
|
{
|
|
128
129
|
header: l.toLanguageString(xe, i[xe]) + e.task.title,
|
|
129
|
-
titleInputTitle: l.toLanguageString(
|
|
130
|
-
descriptionInputTitle: l.toLanguageString(
|
|
131
|
-
priorityDropDownTitle: l.toLanguageString(
|
|
130
|
+
titleInputTitle: l.toLanguageString(J, i[J]),
|
|
131
|
+
descriptionInputTitle: l.toLanguageString(Q, i[Q]),
|
|
132
|
+
priorityDropDownTitle: l.toLanguageString(Z, i[Z]),
|
|
132
133
|
task: e.task,
|
|
133
134
|
saveButton: l.toLanguageString(Me, i[Me]),
|
|
134
135
|
cancelButton: l.toLanguageString(te, i[te]),
|
|
135
136
|
priorities: e.priorities,
|
|
136
|
-
titleLabel: l.toLanguageString(
|
|
137
|
+
titleLabel: l.toLanguageString($, i[$]),
|
|
137
138
|
descriptionLabel: l.toLanguageString(p, i[p]),
|
|
138
139
|
priorityLabel: l.toLanguageString(ee, i[ee]),
|
|
139
140
|
onSave: u,
|
|
@@ -150,15 +151,15 @@ const Je = ({ onSave: e, task: n, priorities: o }) => {
|
|
|
150
151
|
Ve.propTypes = {};
|
|
151
152
|
Ve.displayName = "KendoReactTaskBoardEditCard";
|
|
152
153
|
const je = (e) => {
|
|
153
|
-
const { onTitleChange: n, title: o, onDescriptionChange: s, description: B, onPriorityChange: c, priority: d, onSave: u } =
|
|
154
|
+
const { onTitleChange: n, title: o, onDescriptionChange: s, description: B, onPriorityChange: c, priority: d, onSave: u } = Qe(e), l = ce();
|
|
154
155
|
return /* @__PURE__ */ t.createElement(
|
|
155
156
|
e.editPane,
|
|
156
157
|
{
|
|
157
158
|
header: l.toLanguageString(we, i[we]),
|
|
158
|
-
titleInputTitle: l.toLanguageString(
|
|
159
|
-
descriptionInputTitle: l.toLanguageString(
|
|
160
|
-
priorityDropDownTitle: l.toLanguageString(
|
|
161
|
-
titleLabel: l.toLanguageString(
|
|
159
|
+
titleInputTitle: l.toLanguageString(J, i[J]),
|
|
160
|
+
descriptionInputTitle: l.toLanguageString(Q, i[Q]),
|
|
161
|
+
priorityDropDownTitle: l.toLanguageString(Z, i[Z]),
|
|
162
|
+
titleLabel: l.toLanguageString($, i[$]),
|
|
162
163
|
descriptionLabel: l.toLanguageString(p, i[p]),
|
|
163
164
|
priorityLabel: l.toLanguageString(ee, i[ee]),
|
|
164
165
|
saveButton: l.toLanguageString(Pe, i[Pe]),
|
|
@@ -177,7 +178,7 @@ const je = (e) => {
|
|
|
177
178
|
};
|
|
178
179
|
je.propTypes = {};
|
|
179
180
|
je.displayName = "KendoReactTaskBoardAddCard";
|
|
180
|
-
const
|
|
181
|
+
const Ze = (e) => {
|
|
181
182
|
const n = t.useRef();
|
|
182
183
|
return /* @__PURE__ */ t.createElement(dt, { className: "k-hbox" }, /* @__PURE__ */ t.createElement(
|
|
183
184
|
"span",
|
|
@@ -198,13 +199,13 @@ const Qe = (e) => {
|
|
|
198
199
|
}
|
|
199
200
|
), /* @__PURE__ */ t.createElement(gt, { anchor: n.current && n.current.element, show: e.showMenu, ref: e.popupRef }, /* @__PURE__ */ t.createElement(ct, { vertical: !0, onSelect: e.onMenuItemSelect, items: e.menuItems, className: "k-context-menu" }))));
|
|
200
201
|
};
|
|
201
|
-
|
|
202
|
-
const
|
|
203
|
-
|
|
202
|
+
Ze.displayName = "KendoReactTaskBoardCardHeader";
|
|
203
|
+
const $e = (e) => /* @__PURE__ */ t.createElement(ut, null, e.children);
|
|
204
|
+
$e.displayName = "KendoReactTaskBoardCardBody";
|
|
204
205
|
const pe = (e) => /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane k-taskboard-preview-pane" }, /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-header" }, /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-header-text" }, e.title), /* @__PURE__ */ t.createElement("span", { className: "k-spacer" }), /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-header-actions" }, /* @__PURE__ */ t.createElement(w, { icon: "x", svgIcon: qe, fillMode: "flat", onClick: e.onClosePreviewPane }))), /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-content" }, /* @__PURE__ */ t.createElement("p", null, e.description), /* @__PURE__ */ t.createElement("p", null, e.priorityLabel, " ", /* @__PURE__ */ t.createElement("span", { style: { backgroundColor: e.priority.color } }, " "), " ", e.priority.priority)), /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-actions k-actions k-hstack k-justify-content-end" }, /* @__PURE__ */ t.createElement(w, { onClick: e.onTaskDelete }, e.delete), /* @__PURE__ */ t.createElement(w, { themeColor: "primary", onClick: e.onTaskEdit }, e.edit)));
|
|
205
206
|
pe.displayName = "KendoReactTaskBoardPreviewDialog";
|
|
206
|
-
const
|
|
207
|
-
const { onDeleteTask: n, showEditPane: o, task: s, style: B, dragTargetRef: c, elementRef: d } = e, [u, l] = t.useState(!1), [D, f] = t.useState(!1), [h, P] = t.useState(!1), k = t.useRef(null), C =
|
|
207
|
+
const me = (e) => {
|
|
208
|
+
const { onDeleteTask: n, showEditPane: o, task: s, style: B, dragTargetRef: c, elementRef: d } = e, [u, l] = t.useState(!1), [D, f] = t.useState(!1), [h, P] = t.useState(!1), k = t.useRef(null), C = ce(), I = [
|
|
208
209
|
{
|
|
209
210
|
text: C.toLanguageString(De, i[De]),
|
|
210
211
|
icon: "pencil",
|
|
@@ -276,19 +277,18 @@ const oe = (e) => {
|
|
|
276
277
|
onTaskEdit: K,
|
|
277
278
|
onCloseConfirmDialog: F,
|
|
278
279
|
card: mt,
|
|
279
|
-
cardHeader:
|
|
280
|
-
cardBody:
|
|
281
|
-
confirmDialog:
|
|
280
|
+
cardHeader: Ze,
|
|
281
|
+
cardBody: $e,
|
|
282
|
+
confirmDialog: ue,
|
|
282
283
|
previewDialog: pe
|
|
283
284
|
}
|
|
284
285
|
);
|
|
285
|
-
}
|
|
286
|
-
|
|
286
|
+
};
|
|
287
|
+
me.propTypes = {
|
|
287
288
|
task: S.object.isRequired
|
|
288
289
|
};
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
const ae = (e) => {
|
|
290
|
+
me.displayName = "KendoReactTaskBoardCardBase";
|
|
291
|
+
const se = (e) => {
|
|
292
292
|
const [n, o] = t.useState(!1), [s, B] = t.useState(!1), [c, d] = t.useState(!1), [u, l] = t.useState(), {
|
|
293
293
|
dragTargetRef: D,
|
|
294
294
|
column: f,
|
|
@@ -299,7 +299,7 @@ const ae = (e) => {
|
|
|
299
299
|
onTaskCreate: I,
|
|
300
300
|
onTaskEdit: x,
|
|
301
301
|
onTaskDelete: L
|
|
302
|
-
} = e, y =
|
|
302
|
+
} = e, y = ce(), M = t.useCallback((m) => {
|
|
303
303
|
const H = { ...f, title: m.value };
|
|
304
304
|
h.call(void 0, H, f);
|
|
305
305
|
}, [f, h]), F = t.useCallback(() => {
|
|
@@ -320,7 +320,7 @@ const ae = (e) => {
|
|
|
320
320
|
o(!1), B(!1);
|
|
321
321
|
}, E = t.useCallback((m) => {
|
|
322
322
|
o(!1), I.call(void 0, { ...m, status: f.status });
|
|
323
|
-
}, [I, f]),
|
|
323
|
+
}, [I, f]), ne = t.useCallback((m, H) => {
|
|
324
324
|
B(!1), x.call(void 0, m, H);
|
|
325
325
|
}, [x]), W = t.useCallback((m) => {
|
|
326
326
|
L.call(void 0, m);
|
|
@@ -346,12 +346,12 @@ const ae = (e) => {
|
|
|
346
346
|
tabIndex: e.tabIndex,
|
|
347
347
|
elementRef: k,
|
|
348
348
|
onTaskCreate: E,
|
|
349
|
-
onTaskEdit:
|
|
349
|
+
onTaskEdit: ne,
|
|
350
350
|
onTaskDelete: W,
|
|
351
351
|
card: e.cardComponent,
|
|
352
|
-
header:
|
|
353
|
-
body:
|
|
354
|
-
confirmDialog:
|
|
352
|
+
header: Ge,
|
|
353
|
+
body: Je,
|
|
354
|
+
confirmDialog: ue,
|
|
355
355
|
editCardDialog: Ve,
|
|
356
356
|
addCardDialog: je,
|
|
357
357
|
onTitleChange: M,
|
|
@@ -375,7 +375,7 @@ const ae = (e) => {
|
|
|
375
375
|
closeButtonTitle: y.toLanguageString(Ee, i[Ee])
|
|
376
376
|
},
|
|
377
377
|
P && P.map((m) => /* @__PURE__ */ t.createElement(
|
|
378
|
-
|
|
378
|
+
me,
|
|
379
379
|
{
|
|
380
380
|
key: m.id,
|
|
381
381
|
tabIndex: e.tabIndex,
|
|
@@ -389,14 +389,13 @@ const ae = (e) => {
|
|
|
389
389
|
}
|
|
390
390
|
))
|
|
391
391
|
);
|
|
392
|
-
}
|
|
393
|
-
|
|
392
|
+
};
|
|
393
|
+
se.propTypes = {
|
|
394
394
|
column: S.object.isRequired,
|
|
395
395
|
taskMap: S.object
|
|
396
396
|
};
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
const Dt = (e, n, o) => {
|
|
397
|
+
se.displayName = "KendoReactTaskBoardColumn";
|
|
398
|
+
const Tt = (e, n, o) => {
|
|
400
399
|
let s = -1, B = -1;
|
|
401
400
|
for (let c = 0; c < o.length; c++) {
|
|
402
401
|
const d = String(o[c].id);
|
|
@@ -421,24 +420,24 @@ const Dt = (e, n, o) => {
|
|
|
421
420
|
e = e.parentNode;
|
|
422
421
|
}
|
|
423
422
|
return null;
|
|
424
|
-
},
|
|
423
|
+
}, Et = (e, n) => {
|
|
425
424
|
const o = n.dataItem.color, s = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("span", { style: { backgroundColor: o } }, " "), e.props.children);
|
|
426
425
|
return t.cloneElement(e, e.props, s);
|
|
427
|
-
},
|
|
426
|
+
}, Dt = (e, n) => {
|
|
428
427
|
if (!n)
|
|
429
428
|
return e;
|
|
430
429
|
const o = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("span", { style: { backgroundColor: n.color } }, " "), /* @__PURE__ */ t.createElement("span", null, " ", e.props.children));
|
|
431
430
|
return t.cloneElement(e, { ...e.props }, o);
|
|
432
|
-
},
|
|
431
|
+
}, re = (e) => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
|
|
433
432
|
e.card,
|
|
434
433
|
{
|
|
435
434
|
key: String(e.task.id),
|
|
436
435
|
ref: e.elementRef,
|
|
437
436
|
style: e.style,
|
|
438
|
-
className:
|
|
437
|
+
className: ae("k-taskboard-card k-cursor-move k-taskboard-card-category", {
|
|
439
438
|
"k-disabled": e.disabled
|
|
440
439
|
}),
|
|
441
|
-
[Fe]:
|
|
440
|
+
[Fe]: G,
|
|
442
441
|
[_e]: e.task.id,
|
|
443
442
|
tabIndex: e.tabIndex
|
|
444
443
|
},
|
|
@@ -482,8 +481,8 @@ const Dt = (e, n, o) => {
|
|
|
482
481
|
priority: e.task.priority
|
|
483
482
|
}
|
|
484
483
|
));
|
|
485
|
-
|
|
486
|
-
const
|
|
484
|
+
re.displayName = "KendoReactTaskBoardCard";
|
|
485
|
+
const de = (e) => /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane k-taskboard-edit-pane" }, /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-header" }, /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-header-text" }, e.header), /* @__PURE__ */ t.createElement("span", { className: "k-spacer" }), /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-header-actions" }, /* @__PURE__ */ t.createElement(w, { icon: "x", svgIcon: qe, fillMode: "flat", onClick: e.onClose }))), /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-content" }, /* @__PURE__ */ t.createElement(
|
|
487
486
|
"div",
|
|
488
487
|
{
|
|
489
488
|
role: "form",
|
|
@@ -515,8 +514,8 @@ const ce = (e) => /* @__PURE__ */ t.createElement("div", { className: "k-taskboa
|
|
|
515
514
|
data: e.priorities,
|
|
516
515
|
value: e.priority,
|
|
517
516
|
onChange: e.onPriorityChange,
|
|
518
|
-
itemRender:
|
|
519
|
-
valueRender:
|
|
517
|
+
itemRender: Et,
|
|
518
|
+
valueRender: Dt,
|
|
520
519
|
textField: "priority",
|
|
521
520
|
dataItemKey: "priority",
|
|
522
521
|
title: e.priorityDropDownTitle
|
|
@@ -531,14 +530,14 @@ const ce = (e) => /* @__PURE__ */ t.createElement("div", { className: "k-taskboa
|
|
|
531
530
|
},
|
|
532
531
|
e.saveButton
|
|
533
532
|
)));
|
|
534
|
-
|
|
535
|
-
|
|
533
|
+
de.propTypes = {};
|
|
534
|
+
de.displayName = "KendoReactTaskBoardEditPane";
|
|
536
535
|
const Oe = (e) => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
|
|
537
536
|
"div",
|
|
538
537
|
{
|
|
539
538
|
ref: e.elementRef,
|
|
540
539
|
style: e.style,
|
|
541
|
-
className:
|
|
540
|
+
className: ae("k-taskboard-column", {
|
|
542
541
|
"k-taskboard-column-edit": e.column.edit
|
|
543
542
|
}),
|
|
544
543
|
tabIndex: e.tabIndex,
|
|
@@ -567,7 +566,7 @@ const Oe = (e) => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__
|
|
|
567
566
|
onClose: e.onCloseDialog,
|
|
568
567
|
onSave: e.onTaskCreate,
|
|
569
568
|
priorities: e.priorities,
|
|
570
|
-
editPane:
|
|
569
|
+
editPane: de
|
|
571
570
|
}
|
|
572
571
|
), e.showEditCard && e.editedTask && /* @__PURE__ */ t.createElement(
|
|
573
572
|
e.editCardDialog,
|
|
@@ -576,7 +575,7 @@ const Oe = (e) => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__
|
|
|
576
575
|
onSave: e.onTaskEdit,
|
|
577
576
|
task: e.editedTask,
|
|
578
577
|
priorities: e.priorities,
|
|
579
|
-
editPane:
|
|
578
|
+
editPane: de
|
|
580
579
|
}
|
|
581
580
|
), e.showColumnConfirmDelete && /* @__PURE__ */ t.createElement(
|
|
582
581
|
e.confirmDialog,
|
|
@@ -615,7 +614,7 @@ const et = t.forwardRef((e, n) => {
|
|
|
615
614
|
x: a.clientX - U.left + V.left,
|
|
616
615
|
y: a.clientY - U.top + V.top
|
|
617
616
|
};
|
|
618
|
-
const R = b ? o : d,
|
|
617
|
+
const R = b ? o : d, oe = b ? y : x, N = R.findIndex((ie) => String(ie.id) === r.id), q = R[N];
|
|
619
618
|
if (N === -1 || q.edit)
|
|
620
619
|
return;
|
|
621
620
|
const v = Ye(q);
|
|
@@ -630,7 +629,7 @@ const et = t.forwardRef((e, n) => {
|
|
|
630
629
|
}, F({
|
|
631
630
|
top: a.clientY - C.current.y,
|
|
632
631
|
left: a.clientX - C.current.x
|
|
633
|
-
}),
|
|
632
|
+
}), oe(j);
|
|
634
633
|
}
|
|
635
634
|
},
|
|
636
635
|
[o, d]
|
|
@@ -648,23 +647,23 @@ const et = t.forwardRef((e, n) => {
|
|
|
648
647
|
const b = T && Xe(T);
|
|
649
648
|
if (b) {
|
|
650
649
|
let O;
|
|
651
|
-
const U = b.type === g.type, V = g.type === X, R = (V ? L : I) || [],
|
|
650
|
+
const U = b.type === g.type, V = g.type === X, R = (V ? L : I) || [], oe = V ? y : x;
|
|
652
651
|
if (V || U) {
|
|
653
|
-
if (O =
|
|
652
|
+
if (O = Tt(g.id, b.id, R), O) {
|
|
654
653
|
const N = R[O.dragIndex], q = R[O.dropIndex], v = Ye(N);
|
|
655
654
|
V || (v.status = q.status);
|
|
656
655
|
const j = [...R];
|
|
657
|
-
j.splice(O.dragIndex, 1), j.splice(O.dropIndex, 0, v), g.index = O.dropIndex,
|
|
656
|
+
j.splice(O.dragIndex, 1), j.splice(O.dropIndex, 0, v), g.index = O.dropIndex, oe(j);
|
|
658
657
|
}
|
|
659
658
|
} else {
|
|
660
659
|
const N = R.findIndex((v) => String(v.id) === g.id), q = o.findIndex((v) => String(v.id) === b.id);
|
|
661
660
|
if (N !== -1 && q !== -1) {
|
|
662
|
-
const v = R[N],
|
|
663
|
-
if (K[
|
|
661
|
+
const v = R[N], ie = o[q].status;
|
|
662
|
+
if (K[ie])
|
|
664
663
|
return;
|
|
665
|
-
v.status =
|
|
666
|
-
const
|
|
667
|
-
|
|
664
|
+
v.status = ie;
|
|
665
|
+
const le = [...R];
|
|
666
|
+
le.splice(N, 1), le.push(v), g.index = le.length - 1, oe(le);
|
|
668
667
|
}
|
|
669
668
|
}
|
|
670
669
|
}
|
|
@@ -694,10 +693,10 @@ const et = t.forwardRef((e, n) => {
|
|
|
694
693
|
onDrag: z,
|
|
695
694
|
onDragEnd: ge
|
|
696
695
|
});
|
|
697
|
-
const E = k.current,
|
|
696
|
+
const E = k.current, ne = t.useCallback((a) => {
|
|
698
697
|
const r = {
|
|
699
698
|
data: [...d, a],
|
|
700
|
-
type:
|
|
699
|
+
type: G,
|
|
701
700
|
previousItem: null,
|
|
702
701
|
item: a
|
|
703
702
|
};
|
|
@@ -707,7 +706,7 @@ const et = t.forwardRef((e, n) => {
|
|
|
707
706
|
T !== -1 && r.splice(T, 1, a);
|
|
708
707
|
const b = {
|
|
709
708
|
data: r,
|
|
710
|
-
type:
|
|
709
|
+
type: G,
|
|
711
710
|
previousItem: g,
|
|
712
711
|
item: a
|
|
713
712
|
};
|
|
@@ -715,7 +714,7 @@ const et = t.forwardRef((e, n) => {
|
|
|
715
714
|
}, [u, d]), m = t.useCallback((a) => {
|
|
716
715
|
const r = {
|
|
717
716
|
data: d.filter((T) => T !== a),
|
|
718
|
-
type:
|
|
717
|
+
type: G,
|
|
719
718
|
previousItem: a,
|
|
720
719
|
item: null
|
|
721
720
|
};
|
|
@@ -737,28 +736,28 @@ const et = t.forwardRef((e, n) => {
|
|
|
737
736
|
id: c,
|
|
738
737
|
style: B,
|
|
739
738
|
ref: D,
|
|
740
|
-
className:
|
|
739
|
+
className: ae("k-widget k-taskboard", s)
|
|
741
740
|
},
|
|
742
741
|
h,
|
|
743
742
|
/* @__PURE__ */ t.createElement("div", { className: "k-taskboard-content", style: E ? { userSelect: "none" } : void 0 }, /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-columns-container", ref: P }, (L || o).map((a) => /* @__PURE__ */ t.createElement(
|
|
744
|
-
|
|
743
|
+
se,
|
|
745
744
|
{
|
|
746
745
|
key: a.id,
|
|
747
746
|
tabIndex: e.tabIndex,
|
|
748
747
|
column: a,
|
|
749
748
|
tasks: K[a.status] || [],
|
|
750
749
|
dragTargetRef: k,
|
|
751
|
-
onTaskCreate:
|
|
750
|
+
onTaskCreate: ne,
|
|
752
751
|
onTaskEdit: W,
|
|
753
752
|
onTaskDelete: m,
|
|
754
753
|
onColumnChange: H,
|
|
755
754
|
columnComponent: e.column || Oe,
|
|
756
|
-
cardComponent: e.card ||
|
|
755
|
+
cardComponent: e.card || re,
|
|
757
756
|
priorities: e.priorities
|
|
758
757
|
}
|
|
759
758
|
)))),
|
|
760
|
-
E && E.type ===
|
|
761
|
-
|
|
759
|
+
E && E.type === G && /* @__PURE__ */ t.createElement(
|
|
760
|
+
me,
|
|
762
761
|
{
|
|
763
762
|
elementRef: A,
|
|
764
763
|
style: {
|
|
@@ -772,13 +771,13 @@ const et = t.forwardRef((e, n) => {
|
|
|
772
771
|
},
|
|
773
772
|
task: E.item,
|
|
774
773
|
dragTargetRef: k,
|
|
775
|
-
cardComponent: e.card ||
|
|
774
|
+
cardComponent: e.card || re,
|
|
776
775
|
onDeleteTask: Ue,
|
|
777
776
|
showEditPane: Ue
|
|
778
777
|
}
|
|
779
778
|
),
|
|
780
779
|
E && E.type === X && /* @__PURE__ */ t.createElement(
|
|
781
|
-
|
|
780
|
+
se,
|
|
782
781
|
{
|
|
783
782
|
elementRef: Y,
|
|
784
783
|
style: {
|
|
@@ -789,7 +788,7 @@ const et = t.forwardRef((e, n) => {
|
|
|
789
788
|
left: M.left,
|
|
790
789
|
zIndex: 10
|
|
791
790
|
},
|
|
792
|
-
cardComponent: e.card ||
|
|
791
|
+
cardComponent: e.card || re,
|
|
793
792
|
columnComponent: e.column || Oe,
|
|
794
793
|
column: E.item,
|
|
795
794
|
tasks: K[E.item.status],
|
|
@@ -798,7 +797,7 @@ const et = t.forwardRef((e, n) => {
|
|
|
798
797
|
onTaskDelete: m,
|
|
799
798
|
onColumnChange: H,
|
|
800
799
|
onTaskEdit: W,
|
|
801
|
-
onTaskCreate:
|
|
800
|
+
onTaskCreate: ne
|
|
802
801
|
}
|
|
803
802
|
)
|
|
804
803
|
);
|
|
@@ -810,7 +809,7 @@ et.propTypes = {
|
|
|
810
809
|
et.displayName = "KendoReactTaskBoard";
|
|
811
810
|
const tt = (e) => {
|
|
812
811
|
const { className: n, style: o, children: s } = e;
|
|
813
|
-
return /* @__PURE__ */ t.createElement("div", { style: o, className:
|
|
812
|
+
return /* @__PURE__ */ t.createElement("div", { style: o, className: ae("k-taskboard-header", n) }, /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-toolbar k-toolbar" }, s));
|
|
814
813
|
};
|
|
815
814
|
tt.propTypes = {
|
|
816
815
|
children: S.node
|
|
@@ -819,16 +818,16 @@ tt.displayName = "KendoReactTaskBoardToolbar";
|
|
|
819
818
|
export {
|
|
820
819
|
et as TaskBoard,
|
|
821
820
|
je as TaskBoardAddCard,
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
821
|
+
re as TaskBoardCard,
|
|
822
|
+
$e as TaskBoardCardBody,
|
|
823
|
+
Ze as TaskBoardCardHeader,
|
|
825
824
|
Oe as TaskBoardColumn,
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
825
|
+
Je as TaskBoardColumnBody,
|
|
826
|
+
Ge as TaskBoardColumnHeader,
|
|
827
|
+
ue as TaskBoardConfirmDialog,
|
|
829
828
|
Ve as TaskBoardEditCard,
|
|
830
829
|
pe as TaskBoardPreviewDialog,
|
|
831
|
-
|
|
830
|
+
de as TaskBoardTaskEditPane,
|
|
832
831
|
tt as TaskBoardToolbar,
|
|
833
|
-
|
|
832
|
+
Qe as useTaskEditing
|
|
834
833
|
};
|
package/package.json
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-taskboard",
|
|
3
|
-
"version": "7.0.0
|
|
3
|
+
"version": "7.0.0",
|
|
4
4
|
"description": "KendoReact TaskBoard package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
7
7
|
"homepage": "https://www.telerik.com/kendo-react-ui",
|
|
8
8
|
"main": "./index.js",
|
|
9
|
+
"module": "./index.mjs",
|
|
9
10
|
"types": "./index.d.ts",
|
|
10
11
|
"exports": {
|
|
11
12
|
".": {
|
|
@@ -17,17 +18,17 @@
|
|
|
17
18
|
"peerDependencies": {
|
|
18
19
|
"@progress/kendo-data-query": "^1.0.0",
|
|
19
20
|
"@progress/kendo-licensing": "^1.3.0",
|
|
20
|
-
"@progress/kendo-react-buttons": "7.0.0
|
|
21
|
-
"@progress/kendo-react-common": "7.0.0
|
|
22
|
-
"@progress/kendo-react-dialogs": "7.0.0
|
|
23
|
-
"@progress/kendo-react-dropdowns": "7.0.0
|
|
24
|
-
"@progress/kendo-react-form": "7.0.0
|
|
25
|
-
"@progress/kendo-react-indicators": "7.0.0
|
|
26
|
-
"@progress/kendo-react-inputs": "7.0.0
|
|
27
|
-
"@progress/kendo-react-intl": "7.0.0
|
|
28
|
-
"@progress/kendo-react-labels": "7.0.0
|
|
29
|
-
"@progress/kendo-react-layout": "7.0.0
|
|
30
|
-
"@progress/kendo-react-popup": "7.0.0
|
|
21
|
+
"@progress/kendo-react-buttons": "7.0.0",
|
|
22
|
+
"@progress/kendo-react-common": "7.0.0",
|
|
23
|
+
"@progress/kendo-react-dialogs": "7.0.0",
|
|
24
|
+
"@progress/kendo-react-dropdowns": "7.0.0",
|
|
25
|
+
"@progress/kendo-react-form": "7.0.0",
|
|
26
|
+
"@progress/kendo-react-indicators": "7.0.0",
|
|
27
|
+
"@progress/kendo-react-inputs": "7.0.0",
|
|
28
|
+
"@progress/kendo-react-intl": "7.0.0",
|
|
29
|
+
"@progress/kendo-react-labels": "7.0.0",
|
|
30
|
+
"@progress/kendo-react-layout": "7.0.0",
|
|
31
|
+
"@progress/kendo-react-popup": "7.0.0",
|
|
31
32
|
"@progress/kendo-svg-icons": "^2.0.0",
|
|
32
33
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0",
|
|
33
34
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
|