@progress/kendo-react-taskboard 14.5.0-develop.8 → 15.0.0-develop.1
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/README.md +4 -4
- package/TaskBoard.d.ts +7 -1
- package/TaskBoard.js +1 -1
- package/TaskBoard.mjs +119 -105
- package/TaskBoardToolbar.js +1 -1
- package/TaskBoardToolbar.mjs +8 -8
- package/card/Card.js +1 -1
- package/card/Card.mjs +3 -2
- package/card/CardHeader.js +1 -1
- package/card/CardHeader.mjs +3 -1
- package/column/Column.js +1 -1
- package/column/Column.mjs +63 -59
- package/column/ColumnBody.d.ts +4 -0
- package/column/ColumnBody.js +1 -1
- package/column/ColumnBody.mjs +2 -2
- package/column/ColumnHeader.d.ts +4 -0
- package/column/ColumnHeader.js +1 -1
- package/column/ColumnHeader.mjs +10 -7
- package/dist/cdn/js/kendo-react-taskboard.js +1 -1
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +19 -14
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
[](https://www.telerik.com/kendo-react-ui/components/free?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-taskboard&utm_content=banner)
|
|
1
|
+
[](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-taskboard&utm_content=banner)
|
|
2
2
|
|
|
3
3
|
# KendoReact TaskBoard Library for React
|
|
4
4
|
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
>
|
|
13
13
|
> [Start using KendoReact](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-taskboard) and speed up your development process!
|
|
14
14
|
>
|
|
15
|
-
> If you're looking for free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/
|
|
15
|
+
> If you're looking for free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started).
|
|
16
16
|
|
|
17
17
|
The [React TaskBoard library](https://www.telerik.com/kendo-react-ui/taskboard), part of KendoReact, represents popups with information that is related to a UI element. They get displayed when the user clicks or hovers over this UI element.
|
|
18
18
|
|
|
@@ -24,7 +24,7 @@ Among the features which the KendoReact TaskBoard component delivers are:
|
|
|
24
24
|
|
|
25
25
|
The following table outlines the key resources available with KendoReact and KendoReact Free.
|
|
26
26
|
|
|
27
|
-
| | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free)
|
|
27
|
+
| | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium) | [KendoReact](https://www.telerik.com/kendo-react-ui) |
|
|
28
28
|
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
29
29
|
| React components | 50+ | 120+ |
|
|
30
30
|
| Four professional themes | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> |
|
|
@@ -47,7 +47,7 @@ For any issues you might encounter while working with the KendoReact TaskBoard,
|
|
|
47
47
|
## Resources
|
|
48
48
|
|
|
49
49
|
- [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-taskboard)
|
|
50
|
-
- [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/
|
|
50
|
+
- [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started)
|
|
51
51
|
- [Get Started with the KendoReact TaskBoard](https://www.telerik.com/kendo-react-ui/components/taskboard/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-taskboard)
|
|
52
52
|
- [API Reference of the KendoReact TaskBoard](https://www.telerik.com/kendo-react-ui/components/taskboard/api/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-taskboard)
|
|
53
53
|
- [KendoReact Roadmap](https://www.telerik.com/support/whats-new/kendo-react-ui/roadmap?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-taskboard)
|
package/TaskBoard.d.ts
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
+
import { WebMcpProps } from '@progress/kendo-react-common';
|
|
8
9
|
import { TaskBoardCardProps } from './card/Card.js';
|
|
9
10
|
import { TaskBoardColumnProps } from './column/Column.js';
|
|
10
11
|
import * as React from 'react';
|
|
@@ -88,7 +89,7 @@ export interface TaskBoardChangeEvent {
|
|
|
88
89
|
/**
|
|
89
90
|
* Determines the returned data.
|
|
90
91
|
*/
|
|
91
|
-
data:
|
|
92
|
+
data: object[] | TaskBoardTaskModel[];
|
|
92
93
|
/**
|
|
93
94
|
* Determines the returned type.
|
|
94
95
|
*/
|
|
@@ -205,6 +206,11 @@ export interface TaskBoardProps {
|
|
|
205
206
|
* ```
|
|
206
207
|
*/
|
|
207
208
|
column?: React.ComponentType<TaskBoardColumnProps>;
|
|
209
|
+
/**
|
|
210
|
+
* Enables Web MCP tool registration for this component.
|
|
211
|
+
* Requires a parent `WebMcpProvider` from `@progress/kendo-react-webmcp`.
|
|
212
|
+
*/
|
|
213
|
+
webMcp?: boolean | WebMcpProps;
|
|
208
214
|
}
|
|
209
215
|
/**
|
|
210
216
|
* Represents the [KendoReact TaskBoard component](https://www.telerik.com/kendo-react-ui/components/taskboard).
|
package/TaskBoard.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ce=require("react"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ce=require("react"),Q=require("prop-types"),V=require("./package-metadata.js"),f=require("@progress/kendo-react-common"),Z=require("./TaskBoardColumnBase.js"),ie=require("./TaskBoardCardBase.js"),g=require("./constants.js"),q=require("./utils.js"),L=require("./card/Card.js"),$=require("./column/Column.js");function le(s){const B=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const b in s)if(b!=="default"){const I=Object.getOwnPropertyDescriptor(s,b);Object.defineProperty(B,b,I.get?I:{enumerable:!0,get:()=>s[b]})}}return B.default=s,Object.freeze(B)}const t=le(ce),j=t.forwardRef((s,B)=>{const b=!f.validatePackage(V.packageMetadata,{component:"TaskBoard"}),I=f.getLicenseMessage(V.packageMetadata),{columnData:p=[],className:ee,style:te,id:ne,taskData:l=[],onChange:d}=s,M=t.useRef(null),U=t.useRef(null);t.useImperativeHandle(M,()=>({props:s})),t.useImperativeHandle(B,()=>M.current),f.useWebMcpRegister("taskboard",M,s,s.webMcp);const ae=t.Children.toArray(s.children).filter(e=>e&&e.type&&e.type.displayName==="KendoReactTaskBoardToolbar"),X=t.useRef(null),k=t.useRef(null),D=t.useRef(null),[S,w]=t.useState(null),[x,N]=t.useState(null),[A,P]=t.useState({top:0,left:0}),[Y,z]=t.useState(),_=t.useRef(null),H=t.useRef(null),O=t.useMemo(()=>{const e={};return(S||l).forEach(a=>{const n=a.status;e[n]||(e[n]=[]),e[n].push(a)}),e},[l,S]),se=t.useCallback(e=>{const a=e.originalEvent.target;if(a.closest("button,input,.k-link,.k-taskboard-preview-pane"))return;const n=q.closestTaskBoardElement(a),o=U.current;if(n&&o){const c=n.type===g.TASKBOARD_COLUMN;if(c&&!a.closest(".k-taskboard-column-header"))return;const h=n.element.getBoundingClientRect(),y=o.getBoundingClientRect();D.current={x:e.clientX-h.left+y.left,y:e.clientY-h.top+y.top};const u=c?p:l,v=c?N:w,m=u.findIndex(E=>String(E.id)===n.id),C=u[m];if(m===-1||C.edit)return;const i=f.clone(C);i.isPlaceholder=!0;const R=[...u];R[m]=i,k.current={...n,index:m,item:C,width:h.width,height:h.height},z(m),P({top:e.clientY-D.current.y,left:e.clientX-D.current.x}),v(R)}},[p,l]),oe=t.useCallback(e=>{const a=k.current,n=_.current&&_.current.element||H.current;if(a&&n){P({top:e.clientY-D.current.y,left:e.clientX-D.current.x}),n.style.visibility="hidden";const o=document.elementFromPoint(e.clientX,e.clientY);if(n.style.visibility="",o&&o.getAttribute(g.TASKBOARD_PLACEHOLDER))return;const c=o&&q.closestTaskBoardElement(o);if(c){let T;const h=c.type===a.type,y=a.type===g.TASKBOARD_COLUMN,u=(y?x:S)||[],v=y?N:w;if(y||h){if(T=q.findIndexes(a.id,c.id,u),T){const m=u[T.dragIndex],C=u[T.dropIndex],i=f.clone(m);y||(i.status=C.status);const R=[...u];R.splice(T.dragIndex,1),R.splice(T.dropIndex,0,i),a.index=T.dropIndex,v(R)}}else{const m=u.findIndex(i=>String(i.id)===a.id),C=p.findIndex(i=>String(i.id)===c.id);if(m!==-1&&C!==-1){const i=u[m],E=p[C].status;if(O[E])return;i.status=E;const K=[...u];K.splice(m,1),K.push(i),a.index=K.length-1,v(K)}}}}},[x,S,p,O]),re=t.useCallback(()=>{const e=k.current;if(d&&e){const n=(e.type===g.TASKBOARD_COLUMN?x:S)||[],o=n[e.index];delete o.isPlaceholder;const c={data:n,type:e.type,previousItem:{...e.item,index:Y},item:{...o,index:e.index}};d.call(void 0,c)}k.current=null,D.current=null,w(null),N(null),P({top:0,left:0}),z(void 0)},[x,S,d,Y]);f.useDraggable(X,{onDragStart:se,onDrag:oe,onDragEnd:re});const r=k.current,W=t.useCallback(e=>{const n={data:[...l,e],type:g.TASKBOARD_TASK,previousItem:null,item:e};d.call(void 0,n)},[d,l]),F=t.useCallback((e,a)=>{const n=l.slice(),o=l.indexOf(a);o!==-1&&n.splice(o,1,e);const c={data:n,type:g.TASKBOARD_TASK,previousItem:a,item:e};d.call(void 0,c)},[d,l]),G=t.useCallback(e=>{const n={data:l.filter(o=>o!==e),type:g.TASKBOARD_TASK,previousItem:e,item:null};d.call(void 0,n)},[d,l]),J=t.useCallback((e,a)=>{const n=p.slice(),o=n.indexOf(a);o!==-1&&(e?n.splice(o,1,e):n.splice(o,1));const c={data:n,type:g.TASKBOARD_COLUMN,previousItem:a,item:e};d.call(void 0,c)},[d,p]);return t.createElement("div",{id:ne,style:te,ref:U,className:f.classNames("k-taskboard",ee),role:"application"},ae,t.createElement("div",{className:"k-taskboard-content",style:r?{userSelect:"none"}:void 0},t.createElement("div",{className:"k-taskboard-columns-container",ref:X},(x||p).map(e=>t.createElement(Z.TaskBoardColumnBase,{key:e.id,tabIndex:s.tabIndex,column:e,tasks:O[e.status]||[],dragTargetRef:k,onTaskCreate:W,onTaskEdit:F,onTaskDelete:G,onColumnChange:J,columnComponent:s.column||$.TaskBoardColumn,cardComponent:s.card||L.TaskBoardCard,priorities:s.priorities})))),r&&r.type===g.TASKBOARD_TASK&&t.createElement(ie.TaskBoardCardBase,{elementRef:_,style:{position:"absolute",width:r.width,height:r.height,top:A.top,left:A.left,zIndex:10,borderLeftColor:r.item.priority?r.item.priority.color:r.item.color},task:r.item,dragTargetRef:k,cardComponent:s.card||L.TaskBoardCard,onDeleteTask:f.noop,showEditPane:f.noop}),r&&r.type===g.TASKBOARD_COLUMN&&t.createElement(Z.TaskBoardColumnBase,{elementRef:H,style:{position:"absolute",width:r.width,height:r.height,top:A.top,left:A.left,zIndex:10},cardComponent:s.card||L.TaskBoardCard,columnComponent:s.column||$.TaskBoardColumn,column:r.item,tasks:O[r.item.status],priorities:s.priorities,dragTargetRef:k,onTaskDelete:G,onColumnChange:J,onTaskEdit:F,onTaskCreate:W}),b&&t.createElement(f.WatermarkOverlay,{message:I}))});j.propTypes={columnData:Q.array.isRequired,taskData:Q.array.isRequired};j.displayName="KendoReactTaskBoard";exports.TaskBoard=j;
|
package/TaskBoard.mjs
CHANGED
|
@@ -6,21 +6,21 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
import * as t from "react";
|
|
9
|
-
import
|
|
10
|
-
import { packageMetadata as
|
|
11
|
-
import { validatePackage as le, getLicenseMessage as de, clone as
|
|
12
|
-
import { TaskBoardColumnBase as
|
|
13
|
-
import { TaskBoardCardBase as
|
|
14
|
-
import { TASKBOARD_COLUMN as
|
|
15
|
-
import { closestTaskBoardElement as
|
|
9
|
+
import F from "prop-types";
|
|
10
|
+
import { packageMetadata as U } from "./package-metadata.mjs";
|
|
11
|
+
import { validatePackage as le, getLicenseMessage as de, useWebMcpRegister as ue, clone as j, useDraggable as me, classNames as fe, noop as G, WatermarkOverlay as pe } from "@progress/kendo-react-common";
|
|
12
|
+
import { TaskBoardColumnBase as J } from "./TaskBoardColumnBase.mjs";
|
|
13
|
+
import { TaskBoardCardBase as ge } from "./TaskBoardCardBase.mjs";
|
|
14
|
+
import { TASKBOARD_COLUMN as D, TASKBOARD_PLACEHOLDER as ke, TASKBOARD_TASK as B } from "./constants.mjs";
|
|
15
|
+
import { closestTaskBoardElement as Q, findIndexes as ye } from "./utils.mjs";
|
|
16
16
|
import { TaskBoardCard as N } from "./card/Card.mjs";
|
|
17
|
-
import { TaskBoardColumn as
|
|
18
|
-
const
|
|
19
|
-
const
|
|
20
|
-
t.useImperativeHandle(
|
|
21
|
-
const
|
|
17
|
+
import { TaskBoardColumn as V } from "./column/Column.mjs";
|
|
18
|
+
const Z = t.forwardRef((i, $) => {
|
|
19
|
+
const ee = !le(U, { component: "TaskBoard" }), te = de(U), { columnData: f = [], className: ne, style: ae, id: se, taskData: l = [], onChange: d } = i, w = t.useRef(null), K = t.useRef(null);
|
|
20
|
+
t.useImperativeHandle(w, () => ({ props: i })), t.useImperativeHandle($, () => w.current), ue("taskboard", w, i, i.webMcp);
|
|
21
|
+
const oe = t.Children.toArray(i.children).filter(
|
|
22
22
|
(e) => e && e.type && e.type.displayName === "KendoReactTaskBoardToolbar"
|
|
23
|
-
),
|
|
23
|
+
), L = t.useRef(null), p = t.useRef(null), x = t.useRef(null), [C, A] = t.useState(null), [b, P] = t.useState(null), [T, O] = t.useState({ top: 0, left: 0 }), [X, Y] = t.useState(), M = t.useRef(null), H = t.useRef(null), I = t.useMemo(() => {
|
|
24
24
|
const e = {};
|
|
25
25
|
return (C || l).forEach((a) => {
|
|
26
26
|
const n = a.status;
|
|
@@ -31,9 +31,9 @@ const V = t.forwardRef((c, Z) => {
|
|
|
31
31
|
const a = e.originalEvent.target;
|
|
32
32
|
if (a.closest("button,input,.k-link,.k-taskboard-preview-pane"))
|
|
33
33
|
return;
|
|
34
|
-
const n =
|
|
34
|
+
const n = Q(a), s = K.current;
|
|
35
35
|
if (n && s) {
|
|
36
|
-
const r = n.type ===
|
|
36
|
+
const r = n.type === D;
|
|
37
37
|
if (r && !a.closest(".k-taskboard-column-header"))
|
|
38
38
|
return;
|
|
39
39
|
const R = n.element.getBoundingClientRect(), y = s.getBoundingClientRect();
|
|
@@ -41,19 +41,19 @@ const V = t.forwardRef((c, Z) => {
|
|
|
41
41
|
x: e.clientX - R.left + y.left,
|
|
42
42
|
y: e.clientY - R.top + y.top
|
|
43
43
|
};
|
|
44
|
-
const u = r ? f : l, S = r ?
|
|
44
|
+
const u = r ? f : l, S = r ? P : A, m = u.findIndex((v) => String(v.id) === n.id), k = u[m];
|
|
45
45
|
if (m === -1 || k.edit)
|
|
46
46
|
return;
|
|
47
|
-
const
|
|
48
|
-
|
|
47
|
+
const c = j(k);
|
|
48
|
+
c.isPlaceholder = !0;
|
|
49
49
|
const h = [...u];
|
|
50
|
-
h[m] =
|
|
50
|
+
h[m] = c, p.current = {
|
|
51
51
|
...n,
|
|
52
52
|
index: m,
|
|
53
53
|
item: k,
|
|
54
54
|
width: R.width,
|
|
55
55
|
height: R.height
|
|
56
|
-
},
|
|
56
|
+
}, Y(m), O({
|
|
57
57
|
top: e.clientY - x.current.y,
|
|
58
58
|
left: e.clientX - x.current.x
|
|
59
59
|
}), S(h);
|
|
@@ -62,62 +62,62 @@ const V = t.forwardRef((c, Z) => {
|
|
|
62
62
|
[f, l]
|
|
63
63
|
), ie = t.useCallback(
|
|
64
64
|
(e) => {
|
|
65
|
-
const a = p.current, n =
|
|
65
|
+
const a = p.current, n = M.current && M.current.element || H.current;
|
|
66
66
|
if (a && n) {
|
|
67
|
-
|
|
67
|
+
O({
|
|
68
68
|
top: e.clientY - x.current.y,
|
|
69
69
|
left: e.clientX - x.current.x
|
|
70
70
|
}), n.style.visibility = "hidden";
|
|
71
71
|
const s = document.elementFromPoint(e.clientX, e.clientY);
|
|
72
|
-
if (n.style.visibility = "", s && s.getAttribute(
|
|
72
|
+
if (n.style.visibility = "", s && s.getAttribute(ke))
|
|
73
73
|
return;
|
|
74
|
-
const r = s &&
|
|
74
|
+
const r = s && Q(s);
|
|
75
75
|
if (r) {
|
|
76
76
|
let g;
|
|
77
|
-
const R = r.type === a.type, y = a.type ===
|
|
77
|
+
const R = r.type === a.type, y = a.type === D, u = (y ? b : C) || [], S = y ? P : A;
|
|
78
78
|
if (y || R) {
|
|
79
|
-
if (g =
|
|
80
|
-
const m = u[g.dragIndex], k = u[g.dropIndex],
|
|
81
|
-
y || (
|
|
79
|
+
if (g = ye(a.id, r.id, u), g) {
|
|
80
|
+
const m = u[g.dragIndex], k = u[g.dropIndex], c = j(m);
|
|
81
|
+
y || (c.status = k.status);
|
|
82
82
|
const h = [...u];
|
|
83
|
-
h.splice(g.dragIndex, 1), h.splice(g.dropIndex, 0,
|
|
83
|
+
h.splice(g.dragIndex, 1), h.splice(g.dropIndex, 0, c), a.index = g.dropIndex, S(h);
|
|
84
84
|
}
|
|
85
85
|
} else {
|
|
86
|
-
const m = u.findIndex((
|
|
86
|
+
const m = u.findIndex((c) => String(c.id) === a.id), k = f.findIndex((c) => String(c.id) === r.id);
|
|
87
87
|
if (m !== -1 && k !== -1) {
|
|
88
|
-
const
|
|
89
|
-
if (
|
|
88
|
+
const c = u[m], v = f[k].status;
|
|
89
|
+
if (I[v])
|
|
90
90
|
return;
|
|
91
|
-
|
|
91
|
+
c.status = v;
|
|
92
92
|
const E = [...u];
|
|
93
|
-
E.splice(m, 1), E.push(
|
|
93
|
+
E.splice(m, 1), E.push(c), a.index = E.length - 1, S(E);
|
|
94
94
|
}
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
}
|
|
98
98
|
},
|
|
99
|
-
[
|
|
99
|
+
[b, C, f, I]
|
|
100
100
|
), ce = t.useCallback(() => {
|
|
101
101
|
const e = p.current;
|
|
102
102
|
if (d && e) {
|
|
103
|
-
const n = (e.type ===
|
|
103
|
+
const n = (e.type === D ? b : C) || [], s = n[e.index];
|
|
104
104
|
delete s.isPlaceholder;
|
|
105
105
|
const r = {
|
|
106
106
|
data: n,
|
|
107
107
|
type: e.type,
|
|
108
|
-
previousItem: { ...e.item, index:
|
|
108
|
+
previousItem: { ...e.item, index: X },
|
|
109
109
|
item: { ...s, index: e.index }
|
|
110
110
|
};
|
|
111
111
|
d.call(void 0, r);
|
|
112
112
|
}
|
|
113
|
-
p.current = null, x.current = null,
|
|
114
|
-
}, [
|
|
115
|
-
|
|
113
|
+
p.current = null, x.current = null, A(null), P(null), O({ top: 0, left: 0 }), Y(void 0);
|
|
114
|
+
}, [b, C, d, X]);
|
|
115
|
+
me(L, {
|
|
116
116
|
onDragStart: re,
|
|
117
117
|
onDrag: ie,
|
|
118
118
|
onDragEnd: ce
|
|
119
119
|
});
|
|
120
|
-
const o = p.current,
|
|
120
|
+
const o = p.current, W = t.useCallback(
|
|
121
121
|
(e) => {
|
|
122
122
|
const n = {
|
|
123
123
|
data: [...l, e],
|
|
@@ -158,7 +158,7 @@ const V = t.forwardRef((c, Z) => {
|
|
|
158
158
|
s !== -1 && (e ? n.splice(s, 1, e) : n.splice(s, 1));
|
|
159
159
|
const r = {
|
|
160
160
|
data: n,
|
|
161
|
-
type:
|
|
161
|
+
type: D,
|
|
162
162
|
previousItem: a,
|
|
163
163
|
item: e
|
|
164
164
|
};
|
|
@@ -166,71 +166,85 @@ const V = t.forwardRef((c, Z) => {
|
|
|
166
166
|
},
|
|
167
167
|
[d, f]
|
|
168
168
|
);
|
|
169
|
-
return /* @__PURE__ */ t.createElement(
|
|
170
|
-
|
|
169
|
+
return /* @__PURE__ */ t.createElement(
|
|
170
|
+
"div",
|
|
171
171
|
{
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
172
|
+
id: se,
|
|
173
|
+
style: ae,
|
|
174
|
+
ref: K,
|
|
175
|
+
className: fe("k-taskboard", ne),
|
|
176
|
+
role: "application"
|
|
177
|
+
},
|
|
178
|
+
oe,
|
|
179
|
+
/* @__PURE__ */ t.createElement("div", { className: "k-taskboard-content", style: o ? { userSelect: "none" } : void 0 }, /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-columns-container", ref: L }, (b || f).map((e) => /* @__PURE__ */ t.createElement(
|
|
180
|
+
J,
|
|
181
|
+
{
|
|
182
|
+
key: e.id,
|
|
183
|
+
tabIndex: i.tabIndex,
|
|
184
|
+
column: e,
|
|
185
|
+
tasks: I[e.status] || [],
|
|
186
|
+
dragTargetRef: p,
|
|
187
|
+
onTaskCreate: W,
|
|
188
|
+
onTaskEdit: _,
|
|
189
|
+
onTaskDelete: q,
|
|
190
|
+
onColumnChange: z,
|
|
191
|
+
columnComponent: i.column || V,
|
|
192
|
+
cardComponent: i.card || N,
|
|
193
|
+
priorities: i.priorities
|
|
194
|
+
}
|
|
195
|
+
)))),
|
|
196
|
+
o && o.type === B && /* @__PURE__ */ t.createElement(
|
|
197
|
+
ge,
|
|
198
|
+
{
|
|
199
|
+
elementRef: M,
|
|
200
|
+
style: {
|
|
201
|
+
position: "absolute",
|
|
202
|
+
width: o.width,
|
|
203
|
+
height: o.height,
|
|
204
|
+
top: T.top,
|
|
205
|
+
left: T.left,
|
|
206
|
+
zIndex: 10,
|
|
207
|
+
borderLeftColor: o.item.priority ? o.item.priority.color : o.item.color
|
|
208
|
+
},
|
|
209
|
+
task: o.item,
|
|
210
|
+
dragTargetRef: p,
|
|
211
|
+
cardComponent: i.card || N,
|
|
212
|
+
onDeleteTask: G,
|
|
213
|
+
showEditPane: G
|
|
214
|
+
}
|
|
215
|
+
),
|
|
216
|
+
o && o.type === D && /* @__PURE__ */ t.createElement(
|
|
217
|
+
J,
|
|
218
|
+
{
|
|
219
|
+
elementRef: H,
|
|
220
|
+
style: {
|
|
221
|
+
position: "absolute",
|
|
222
|
+
width: o.width,
|
|
223
|
+
height: o.height,
|
|
224
|
+
top: T.top,
|
|
225
|
+
left: T.left,
|
|
226
|
+
zIndex: 10
|
|
227
|
+
},
|
|
228
|
+
cardComponent: i.card || N,
|
|
229
|
+
columnComponent: i.column || V,
|
|
230
|
+
column: o.item,
|
|
231
|
+
tasks: I[o.item.status],
|
|
232
|
+
priorities: i.priorities,
|
|
233
|
+
dragTargetRef: p,
|
|
234
|
+
onTaskDelete: q,
|
|
235
|
+
onColumnChange: z,
|
|
236
|
+
onTaskEdit: _,
|
|
237
|
+
onTaskCreate: W
|
|
238
|
+
}
|
|
239
|
+
),
|
|
240
|
+
ee && /* @__PURE__ */ t.createElement(pe, { message: te })
|
|
241
|
+
);
|
|
228
242
|
});
|
|
229
|
-
|
|
230
|
-
columnData:
|
|
231
|
-
taskData:
|
|
243
|
+
Z.propTypes = {
|
|
244
|
+
columnData: F.array.isRequired,
|
|
245
|
+
taskData: F.array.isRequired
|
|
232
246
|
};
|
|
233
|
-
|
|
247
|
+
Z.displayName = "KendoReactTaskBoard";
|
|
234
248
|
export {
|
|
235
|
-
|
|
249
|
+
Z as TaskBoard
|
|
236
250
|
};
|
package/TaskBoardToolbar.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),n=require("prop-types"),s=require("@progress/kendo-react-common");function d(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const o=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,o.get?o:{enumerable:!0,get:()=>e[a]})}}return t.default=e,Object.freeze(t)}const c=d(l),r=e=>{const{className:t,style:a,children:o}=e;return c.createElement("div",{style:a,className:s.classNames("k-taskboard-header",t)},c.createElement("div",{className:"k-taskboard-toolbar k-toolbar",role:"toolbar","aria-label":"Toolbar"},o))};r.propTypes={children:n.node};r.displayName="KendoReactTaskBoardToolbar";exports.TaskBoardToolbar=r;
|
package/TaskBoardToolbar.mjs
CHANGED
|
@@ -6,16 +6,16 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
import * as a from "react";
|
|
9
|
-
import
|
|
9
|
+
import t from "prop-types";
|
|
10
10
|
import { classNames as m } from "@progress/kendo-react-common";
|
|
11
|
-
const
|
|
12
|
-
const { className: r, style: s, children:
|
|
13
|
-
return /* @__PURE__ */ a.createElement("div", { style: s, className: m("k-taskboard-header", r) }, /* @__PURE__ */ a.createElement("div", { className: "k-taskboard-toolbar k-toolbar" },
|
|
11
|
+
const o = (e) => {
|
|
12
|
+
const { className: r, style: s, children: l } = e;
|
|
13
|
+
return /* @__PURE__ */ a.createElement("div", { style: s, className: m("k-taskboard-header", r) }, /* @__PURE__ */ a.createElement("div", { className: "k-taskboard-toolbar k-toolbar", role: "toolbar", "aria-label": "Toolbar" }, l));
|
|
14
14
|
};
|
|
15
|
-
|
|
16
|
-
children:
|
|
15
|
+
o.propTypes = {
|
|
16
|
+
children: t.node
|
|
17
17
|
};
|
|
18
|
-
|
|
18
|
+
o.displayName = "KendoReactTaskBoardToolbar";
|
|
19
19
|
export {
|
|
20
|
-
|
|
20
|
+
o as TaskBoardToolbar
|
|
21
21
|
};
|
package/card/Card.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),d=require("@progress/kendo-react-common"),i=require("../constants.js");function r(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),d=require("@progress/kendo-react-common"),i=require("../constants.js");function r(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const l=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(a,n,l.get?l:{enumerable:!0,get:()=>e[n]})}}return a.default=e,Object.freeze(a)}const t=r(c),o=e=>t.createElement(t.Fragment,null,t.createElement(e.card,{key:String(e.task.id),ref:e.elementRef,style:e.style,className:d.classNames("k-taskboard-card",{"k-disabled":e.disabled}),[i.TASKBOARD_ITEM_TYPE]:i.TASKBOARD_TASK,[i.TASKBOARD_ITEM_ID]:e.task.id,tabIndex:e.tabIndex,role:"listitem"},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}));o.displayName="KendoReactTaskBoardCard";exports.TaskBoardCard=o;
|
package/card/Card.mjs
CHANGED
|
@@ -14,12 +14,13 @@ const o = (e) => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__
|
|
|
14
14
|
key: String(e.task.id),
|
|
15
15
|
ref: e.elementRef,
|
|
16
16
|
style: e.style,
|
|
17
|
-
className: a("k-taskboard-card
|
|
17
|
+
className: a("k-taskboard-card", {
|
|
18
18
|
"k-disabled": e.disabled
|
|
19
19
|
}),
|
|
20
20
|
[l]: n,
|
|
21
21
|
[i]: e.task.id,
|
|
22
|
-
tabIndex: e.tabIndex
|
|
22
|
+
tabIndex: e.tabIndex,
|
|
23
|
+
role: "listitem"
|
|
23
24
|
},
|
|
24
25
|
/* @__PURE__ */ t.createElement(
|
|
25
26
|
e.cardHeader,
|
package/card/CardHeader.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),l=require("@progress/kendo-react-buttons"),c=require("@progress/kendo-react-layout"),s=require("@progress/kendo-react-popup"),d=require("@progress/kendo-svg-icons");function i(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const r=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(n,a,r.get?r:{enumerable:!0,get:()=>e[a]})}}return n.default=e,Object.freeze(n)}const t=i(u),o=e=>{const n=t.useRef(void 0);return t.createElement(c.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(l.Button,{fillMode:"flat",className:"k-taskboard-card-menu-button",icon:"more-vertical",svgIcon:d.moreVerticalIcon,ref:n,"aria-label":"Card menu",title:"Card menu",onClick:e.showMenu?e.onHideMenu:e.onShowMenu,onBlur:e.onMenuButtonBlur}),t.createElement(s.Popup,{anchor:n.current&&n.current.element,show:e.showMenu,ref:e.popupRef},t.createElement(c.Menu,{vertical:!0,onSelect:e.onMenuItemSelect,items:e.menuItems,className:"k-context-menu"}))))};o.displayName="KendoReactTaskBoardCardHeader";exports.TaskBoardCardHeader=o;
|
package/card/CardHeader.mjs
CHANGED
|
@@ -16,10 +16,12 @@ const l = (e) => {
|
|
|
16
16
|
n,
|
|
17
17
|
{
|
|
18
18
|
fillMode: "flat",
|
|
19
|
-
className: "k-card-
|
|
19
|
+
className: "k-taskboard-card-menu-button",
|
|
20
20
|
icon: "more-vertical",
|
|
21
21
|
svgIcon: m,
|
|
22
22
|
ref: a,
|
|
23
|
+
"aria-label": "Card menu",
|
|
24
|
+
title: "Card menu",
|
|
23
25
|
onClick: e.showMenu ? e.onHideMenu : e.onShowMenu,
|
|
24
26
|
onBlur: e.onMenuButtonBlur
|
|
25
27
|
}
|
package/column/Column.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),u=require("@progress/kendo-react-common"),o=require("../constants.js"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),u=require("@progress/kendo-react-common"),o=require("../constants.js"),l=require("../TaskBoardTaskEditPane.js");function m(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const i=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(n,a,i.get?i:{enumerable:!0,get:()=>e[a]})}}return n.default=e,Object.freeze(n)}const t=m(c),d=e=>{const n=t.useId();return t.createElement(t.Fragment,null,t.createElement("div",{ref:e.elementRef,style:e.style,className:u.classNames("k-taskboard-column",{"k-taskboard-column-edit":e.column.edit}),tabIndex:e.tabIndex,[o.TASKBOARD_ITEM_TYPE]:o.TASKBOARD_COLUMN,[o.TASKBOARD_ITEM_ID]:e.column.id},t.createElement(e.header,{column:e.column,tasks:e.tasks,columnHeaderId:n,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,{columnHeaderId:n},e.children)),e.showAddCard&&t.createElement(e.addCardDialog,{onClose:e.onCloseDialog,onSave:e.onTaskCreate,priorities:e.priorities,editPane:l.TaskBoardTaskEditPane}),e.showEditCard&&e.editedTask&&t.createElement(e.editCardDialog,{onClose:e.onCloseDialog,onSave:e.onTaskEdit,task:e.editedTask,priorities:e.priorities,editPane:l.TaskBoardTaskEditPane}),e.showColumnConfirmDelete&&t.createElement(e.confirmDialog,{onClose:e.onColumnDelete,onConfirm:e.onColumnConfirmDelete,dialogMessage:e.confirmDialogMessage,dialogTitle:e.confirmDialogTitle,dialogConfirmButton:e.confirmDialogConfirmButton,dialogCancelButton:e.confirmDialogCancelButton}))};d.displayName="KendoReactTaskBoardColumn";exports.TaskBoardColumn=d;
|
package/column/Column.mjs
CHANGED
|
@@ -6,66 +6,70 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
import * as t from "react";
|
|
9
|
-
import { classNames as
|
|
10
|
-
import { TASKBOARD_COLUMN as l, TASKBOARD_ITEM_ID as
|
|
11
|
-
import { TaskBoardTaskEditPane as
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
style: e.style,
|
|
17
|
-
className: a("k-taskboard-column", {
|
|
18
|
-
"k-taskboard-column-edit": e.column.edit
|
|
19
|
-
}),
|
|
20
|
-
tabIndex: e.tabIndex,
|
|
21
|
-
[o]: l,
|
|
22
|
-
[i]: e.column.id
|
|
23
|
-
},
|
|
24
|
-
/* @__PURE__ */ t.createElement(
|
|
25
|
-
e.header,
|
|
9
|
+
import { classNames as i } from "@progress/kendo-react-common";
|
|
10
|
+
import { TASKBOARD_COLUMN as l, TASKBOARD_ITEM_ID as o, TASKBOARD_ITEM_TYPE as d } from "../constants.mjs";
|
|
11
|
+
import { TaskBoardTaskEditPane as a } from "../TaskBoardTaskEditPane.mjs";
|
|
12
|
+
const m = (e) => {
|
|
13
|
+
const n = t.useId();
|
|
14
|
+
return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
|
|
15
|
+
"div",
|
|
26
16
|
{
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
17
|
+
ref: e.elementRef,
|
|
18
|
+
style: e.style,
|
|
19
|
+
className: i("k-taskboard-column", {
|
|
20
|
+
"k-taskboard-column-edit": e.column.edit
|
|
21
|
+
}),
|
|
22
|
+
tabIndex: e.tabIndex,
|
|
23
|
+
[d]: l,
|
|
24
|
+
[o]: e.column.id
|
|
25
|
+
},
|
|
26
|
+
/* @__PURE__ */ t.createElement(
|
|
27
|
+
e.header,
|
|
28
|
+
{
|
|
29
|
+
column: e.column,
|
|
30
|
+
tasks: e.tasks,
|
|
31
|
+
columnHeaderId: n,
|
|
32
|
+
onTitleChange: e.onTitleChange,
|
|
33
|
+
onColumnExitEdit: e.onColumnExitEdit,
|
|
34
|
+
editButtonTitle: e.editButtonTitle,
|
|
35
|
+
onColumnEnterEdit: e.onColumnEnterEdit,
|
|
36
|
+
addButtonTitle: e.addButtonTitle,
|
|
37
|
+
onShowAddCardDialog: e.onShowAddCardDialog,
|
|
38
|
+
closeButtonTitle: e.closeButtonTitle,
|
|
39
|
+
onColumnDelete: e.onColumnDelete
|
|
40
|
+
}
|
|
41
|
+
),
|
|
42
|
+
/* @__PURE__ */ t.createElement(e.body, { columnHeaderId: n }, e.children)
|
|
43
|
+
), e.showAddCard && /* @__PURE__ */ t.createElement(
|
|
44
|
+
e.addCardDialog,
|
|
45
|
+
{
|
|
46
|
+
onClose: e.onCloseDialog,
|
|
47
|
+
onSave: e.onTaskCreate,
|
|
48
|
+
priorities: e.priorities,
|
|
49
|
+
editPane: a
|
|
50
|
+
}
|
|
51
|
+
), e.showEditCard && e.editedTask && /* @__PURE__ */ t.createElement(
|
|
52
|
+
e.editCardDialog,
|
|
53
|
+
{
|
|
54
|
+
onClose: e.onCloseDialog,
|
|
55
|
+
onSave: e.onTaskEdit,
|
|
56
|
+
task: e.editedTask,
|
|
57
|
+
priorities: e.priorities,
|
|
58
|
+
editPane: a
|
|
37
59
|
}
|
|
38
|
-
),
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
)
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
onClose: e.onCloseDialog,
|
|
52
|
-
onSave: e.onTaskEdit,
|
|
53
|
-
task: e.editedTask,
|
|
54
|
-
priorities: e.priorities,
|
|
55
|
-
editPane: n
|
|
56
|
-
}
|
|
57
|
-
), e.showColumnConfirmDelete && /* @__PURE__ */ t.createElement(
|
|
58
|
-
e.confirmDialog,
|
|
59
|
-
{
|
|
60
|
-
onClose: e.onColumnDelete,
|
|
61
|
-
onConfirm: e.onColumnConfirmDelete,
|
|
62
|
-
dialogMessage: e.confirmDialogMessage,
|
|
63
|
-
dialogTitle: e.confirmDialogTitle,
|
|
64
|
-
dialogConfirmButton: e.confirmDialogConfirmButton,
|
|
65
|
-
dialogCancelButton: e.confirmDialogCancelButton
|
|
66
|
-
}
|
|
67
|
-
));
|
|
68
|
-
d.displayName = "KendoReactTaskBoardColumn";
|
|
60
|
+
), e.showColumnConfirmDelete && /* @__PURE__ */ t.createElement(
|
|
61
|
+
e.confirmDialog,
|
|
62
|
+
{
|
|
63
|
+
onClose: e.onColumnDelete,
|
|
64
|
+
onConfirm: e.onColumnConfirmDelete,
|
|
65
|
+
dialogMessage: e.confirmDialogMessage,
|
|
66
|
+
dialogTitle: e.confirmDialogTitle,
|
|
67
|
+
dialogConfirmButton: e.confirmDialogConfirmButton,
|
|
68
|
+
dialogCancelButton: e.confirmDialogCancelButton
|
|
69
|
+
}
|
|
70
|
+
));
|
|
71
|
+
};
|
|
72
|
+
m.displayName = "KendoReactTaskBoardColumn";
|
|
69
73
|
export {
|
|
70
|
-
|
|
74
|
+
m as TaskBoardColumn
|
|
71
75
|
};
|
package/column/ColumnBody.d.ts
CHANGED
|
@@ -14,6 +14,10 @@ export interface TaskBoardColumnBodyProps {
|
|
|
14
14
|
* Determines the children nodes.
|
|
15
15
|
*/
|
|
16
16
|
children: React.ReactNode;
|
|
17
|
+
/**
|
|
18
|
+
* Specifies the ID of the column header element for aria-labelledby.
|
|
19
|
+
*/
|
|
20
|
+
columnHeaderId?: string;
|
|
17
21
|
}
|
|
18
22
|
/**
|
|
19
23
|
* Represents the TaskBoardColumnBody component.
|
package/column/ColumnBody.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react");function l(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react");function l(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const o=l(c),n=e=>o.createElement("div",{className:"k-taskboard-column-cards-container",role:"list","aria-labelledby":e.columnHeaderId},o.createElement("div",{className:"k-taskboard-column-cards",role:"presentation"},e.children));n.displayName="KendoReactTaskBoardColumnBody";exports.TaskBoardColumnBody=n;
|
package/column/ColumnBody.mjs
CHANGED
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import * as
|
|
9
|
-
const o = (
|
|
8
|
+
import * as e from "react";
|
|
9
|
+
const o = (a) => /* @__PURE__ */ e.createElement("div", { className: "k-taskboard-column-cards-container", role: "list", "aria-labelledby": a.columnHeaderId }, /* @__PURE__ */ e.createElement("div", { className: "k-taskboard-column-cards", role: "presentation" }, a.children));
|
|
10
10
|
o.displayName = "KendoReactTaskBoardColumnBody";
|
|
11
11
|
export {
|
|
12
12
|
o as TaskBoardColumnBody
|
package/column/ColumnHeader.d.ts
CHANGED
|
@@ -20,6 +20,10 @@ export interface TaskBoardColumnHeaderProps {
|
|
|
20
20
|
* The rendered tasks.
|
|
21
21
|
*/
|
|
22
22
|
tasks: TaskBoardTaskModel[];
|
|
23
|
+
/**
|
|
24
|
+
* The ID for the column header text element, used for aria-labelledby.
|
|
25
|
+
*/
|
|
26
|
+
columnHeaderId?: string;
|
|
23
27
|
/**
|
|
24
28
|
* The title of the editButton.
|
|
25
29
|
*/
|
package/column/ColumnHeader.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),l=require("@progress/kendo-react-buttons"),d=require("@progress/kendo-react-inputs"),r=require("@progress/kendo-react-common"),o=require("@progress/kendo-svg-icons");function s(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const c=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(a,n,c.get?c:{enumerable:!0,get:()=>e[n]})}}return a.default=e,Object.freeze(a)}const t=s(u),i=e=>{const{edit:a,title:n}=e.column;return t.createElement("div",{className:"k-taskboard-column-header"},t.createElement("div",{className:"k-taskboard-column-header-text k-text-ellipsis",id:e.columnHeaderId},a?t.createElement(d.Input,{value:n,onChange:e.onTitleChange,onBlur:e.onColumnExitEdit,autoFocus:!0}):n),t.createElement("span",{className:"k-spacer"}),t.createElement("div",{className:r.classNames("k-taskboard-column-header-actions",{"k-disabled":a})},t.createElement(l.Button,{fillMode:"flat",icon:"pencil",svgIcon:o.pencilIcon,"aria-label":e.editButtonTitle,title:e.editButtonTitle,onClick:e.onColumnEnterEdit}),t.createElement(l.Button,{fillMode:"flat",icon:"plus",svgIcon:o.plusIcon,"aria-label":e.addButtonTitle,title:e.addButtonTitle,onClick:e.onShowAddCardDialog}),t.createElement(l.Button,{fillMode:"flat",icon:"x",svgIcon:o.xIcon,"aria-label":e.closeButtonTitle,title:e.closeButtonTitle,onClick:e.onColumnDelete})))};i.displayName="KendoReactTaskBoardColumnHeader";exports.TaskBoardColumnHeader=i;
|
package/column/ColumnHeader.mjs
CHANGED
|
@@ -8,11 +8,11 @@
|
|
|
8
8
|
import * as t from "react";
|
|
9
9
|
import { Button as l } from "@progress/kendo-react-buttons";
|
|
10
10
|
import { Input as o } from "@progress/kendo-react-inputs";
|
|
11
|
-
import { classNames as
|
|
12
|
-
import { pencilIcon as
|
|
11
|
+
import { classNames as i } from "@progress/kendo-react-common";
|
|
12
|
+
import { pencilIcon as c, plusIcon as d, xIcon as m } from "@progress/kendo-svg-icons";
|
|
13
13
|
const r = (e) => {
|
|
14
14
|
const { edit: a, title: n } = e.column;
|
|
15
|
-
return /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-column-header" }, /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-column-header-text k-text-ellipsis" }, a ? /* @__PURE__ */ t.createElement(
|
|
15
|
+
return /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-column-header" }, /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-column-header-text k-text-ellipsis", id: e.columnHeaderId }, a ? /* @__PURE__ */ t.createElement(
|
|
16
16
|
o,
|
|
17
17
|
{
|
|
18
18
|
value: n,
|
|
@@ -20,12 +20,13 @@ const r = (e) => {
|
|
|
20
20
|
onBlur: e.onColumnExitEdit,
|
|
21
21
|
autoFocus: !0
|
|
22
22
|
}
|
|
23
|
-
) : n), /* @__PURE__ */ t.createElement("span", { className: "k-spacer" }), /* @__PURE__ */ t.createElement("div", { className:
|
|
23
|
+
) : n), /* @__PURE__ */ t.createElement("span", { className: "k-spacer" }), /* @__PURE__ */ t.createElement("div", { className: i("k-taskboard-column-header-actions", { "k-disabled": a }) }, /* @__PURE__ */ t.createElement(
|
|
24
24
|
l,
|
|
25
25
|
{
|
|
26
26
|
fillMode: "flat",
|
|
27
27
|
icon: "pencil",
|
|
28
|
-
svgIcon:
|
|
28
|
+
svgIcon: c,
|
|
29
|
+
"aria-label": e.editButtonTitle,
|
|
29
30
|
title: e.editButtonTitle,
|
|
30
31
|
onClick: e.onColumnEnterEdit
|
|
31
32
|
}
|
|
@@ -34,7 +35,8 @@ const r = (e) => {
|
|
|
34
35
|
{
|
|
35
36
|
fillMode: "flat",
|
|
36
37
|
icon: "plus",
|
|
37
|
-
svgIcon:
|
|
38
|
+
svgIcon: d,
|
|
39
|
+
"aria-label": e.addButtonTitle,
|
|
38
40
|
title: e.addButtonTitle,
|
|
39
41
|
onClick: e.onShowAddCardDialog
|
|
40
42
|
}
|
|
@@ -43,7 +45,8 @@ const r = (e) => {
|
|
|
43
45
|
{
|
|
44
46
|
fillMode: "flat",
|
|
45
47
|
icon: "x",
|
|
46
|
-
svgIcon:
|
|
48
|
+
svgIcon: m,
|
|
49
|
+
"aria-label": e.closeButtonTitle,
|
|
47
50
|
title: e.closeButtonTitle,
|
|
48
51
|
onClick: e.onColumnDelete
|
|
49
52
|
}
|
|
@@ -12,4 +12,4 @@
|
|
|
12
12
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
13
13
|
*-------------------------------------------------------------------------------------------
|
|
14
14
|
*/
|
|
15
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),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")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@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"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactTaskboard={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoReactIntl,e.KendoReactButtons,e.KendoReactInputs,e.KendoSvgIcons,e.KendoReactDialogs,e.KendoReactLayout,e.KendoReactPopup,e.KendoReactDropdowns,e.KendoReactLabels,e.KendoReactForm)}(this,function(e,t,a,o,n,r,i,l,s,d,c,u,m,p){"use strict";function g(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(a){if("default"!==a){var o=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,o.get?o:{enumerable:!0,get:function(){return e[a]}})}}),t.default=e,Object.freeze(t)}var k=g(t);const C=Object.freeze({name:"@progress/kendo-react-taskboard",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"14.5.0-develop.8",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"}),f="taskBoard.toolbarAddColumnButton",y="taskBoard.toolbarSearchField",h="taskBoard.editColumnButton",b="taskBoard.addCardButton",E="taskBoard.deleteColumnButton",B="taskBoard.editCardButton",T="taskBoard.deleteCardButton",v="taskBoard.deleteTaskDialogMessage",D="taskBoard.deleteTaskDialogTitle",S="taskBoard.deleteTaskConfirmButton",w="taskBoard.deleteTaskCancelButton",I="taskBoard.addCardTitle",R="taskBoard.addCardTitleLabel",L="taskBoard.addCardDescriptionLabel",P="taskBoard.addCardPriorityLabel",N="taskBoard.addCardCreateButton",x="taskBoard.deleteColumnDialogMessage",M="taskBoard.deleteColumnDialogTitle",K="taskBoard.deleteColumnConfirmButton",q="taskBoard.deleteColumnCancelButton",A="taskBoard.editCardPaneTitle",H="taskBoard.editCardPaneSaveButton",O="taskBoard.editPaneTitleLabel",j="taskBoard.editPaneDescriptionLabel",F="taskBoard.editPanePriorityLabel",z="taskBoard.editPaneCancelButton",W="taskBoard.previewPanePriorityLabel",X="taskBoard.previewPaneDeleteButton",Y="taskBoard.previewPaneEditButton",U={[f]:"Add column",[y]:"Search",[h]:"Edit column",[b]:"Add card",[E]:"Delete column",[B]:"Edit card",[T]:"Delete card",[v]:"Are you sure you want to delete this card?",[D]:"Delete Card",[S]:"Delete",[w]:"Cancel",[x]:"Are you sure you want to delete this column?",[M]:"Delete column?",[K]:"Delete",[q]:"Cancel",[I]:"Create new card",[N]:"Create",[z]:"Cancel",[A]:"Edit",[H]:"Save changes",[O]:"Title:",[j]:"Description:",[F]:"Priority:",[R]:"Title",[L]:"Description",[P]:"Priority",[W]:"Priority:",[X]:"Delete",[Y]:"Edit"},V="data-taskboard-type",$="data-taskboard-id",G="data-taskboard-placeholder",J="column",Q="task",Z=e=>{const{edit:t,title:a}=e.column;return k.createElement("div",{className:"k-taskboard-column-header"},k.createElement("div",{className:"k-taskboard-column-header-text k-text-ellipsis"},t?k.createElement(i.Input,{value:a,onChange:e.onTitleChange,onBlur:e.onColumnExitEdit,autoFocus:!0}):a),k.createElement("span",{className:"k-spacer"}),k.createElement("div",{className:o.classNames("k-taskboard-column-header-actions",{"k-disabled":t})},k.createElement(r.Button,{fillMode:"flat",icon:"pencil",svgIcon:l.pencilIcon,title:e.editButtonTitle,onClick:e.onColumnEnterEdit}),k.createElement(r.Button,{fillMode:"flat",icon:"plus",svgIcon:l.plusIcon,title:e.addButtonTitle,onClick:e.onShowAddCardDialog}),k.createElement(r.Button,{fillMode:"flat",icon:"x",svgIcon:l.xIcon,title:e.closeButtonTitle,onClick:e.onColumnDelete})))};Z.displayName="KendoReactTaskBoardColumnHeader";const _=e=>k.createElement("div",{className:"k-taskboard-column-cards-container"},k.createElement("div",{className:"k-taskboard-column-cards"},e.children));_.displayName="KendoReactTaskBoardColumnBody";const ee=e=>{const{onClose:t,onConfirm:a,dialogMessage:o,dialogTitle:n,dialogConfirmButton:i,dialogCancelButton:l}=e;return k.createElement(s.Dialog,{title:n,closeIcon:!1},o,k.createElement(s.DialogActionsBar,{layout:"end"},k.createElement(r.Button,{onClick:a},i),k.createElement(r.Button,{onClick:t},l)))};ee.propTypes={onClose:a.func.isRequired,onConfirm:a.func.isRequired,dialogMessage:a.string.isRequired,dialogTitle:a.string.isRequired,dialogConfirmButton:a.string.isRequired,dialogCancelButton:a.string.isRequired},ee.displayName="KendoReactTaskBoardConfirmDialog";const te=({onSave:e,task:t,priorities:a})=>{const[o,n]=k.useState(t?t.title:""),[r,i]=k.useState(t?t.description:""),[l,s]=k.useState(t?t.priority:a[0]),d=k.useCallback(e=>{n(e.value)},[]),c=k.useCallback(e=>{i(e.value)},[]),u=k.useCallback(e=>{s(e.target.value)},[]),m=k.useCallback(a=>{const n={id:void 0,status:"",...t||{},title:o,description:r,priority:l};e.call(void 0,n,t)},[e,t,o,r,l]);return{onTitleChange:d,title:o,onDescriptionChange:c,description:r,onPriorityChange:u,priority:l,onSave:m}},ae=e=>{const{onTitleChange:t,title:a,onDescriptionChange:o,description:r,onPriorityChange:i,priority:l,onSave:s}=te(e),d=n.useLocalization();return k.createElement(e.editPane,{header:d.toLanguageString(A,U[A])+e.task.title,titleInputTitle:d.toLanguageString(R,U[R]),descriptionInputTitle:d.toLanguageString(L,U[L]),priorityDropDownTitle:d.toLanguageString(P,U[P]),task:e.task,saveButton:d.toLanguageString(H,U[H]),cancelButton:d.toLanguageString(z,U[z]),priorities:e.priorities,titleLabel:d.toLanguageString(O,U[O]),descriptionLabel:d.toLanguageString(j,U[j]),priorityLabel:d.toLanguageString(F,U[F]),onSave:s,onClose:e.onClose,onTitleChange:t,title:a,onDescriptionChange:o,description:r,onPriorityChange:i,priority:l})};ae.propTypes={},ae.displayName="KendoReactTaskBoardEditCard";const oe=e=>{const{onTitleChange:t,title:a,onDescriptionChange:o,description:r,onPriorityChange:i,priority:l,onSave:s}=te(e),d=n.useLocalization();return k.createElement(e.editPane,{header:d.toLanguageString(I,U[I]),titleInputTitle:d.toLanguageString(R,U[R]),descriptionInputTitle:d.toLanguageString(L,U[L]),priorityDropDownTitle:d.toLanguageString(P,U[P]),titleLabel:d.toLanguageString(O,U[O]),descriptionLabel:d.toLanguageString(j,U[j]),priorityLabel:d.toLanguageString(F,U[F]),saveButton:d.toLanguageString(N,U[N]),cancelButton:d.toLanguageString(z,U[z]),priorities:e.priorities,onSave:s,onClose:e.onClose,onTitleChange:t,title:a,onDescriptionChange:o,description:r,onPriorityChange:i,priority:l})};oe.propTypes={},oe.displayName="KendoReactTaskBoardAddCard";const ne=e=>{const t=k.useRef(void 0);return k.createElement(d.CardHeader,{className:"k-hbox"},k.createElement("span",{className:"k-card-title k-link",onClick:e.onShowPreviewPane},e.title),k.createElement("span",{className:"k-spacer"}),k.createElement("div",{className:"k-card-header-actions"},k.createElement(r.Button,{fillMode:"flat",className:"k-card-details",icon:"more-vertical",svgIcon:l.moreVerticalIcon,ref:t,onClick:e.showMenu?e.onHideMenu:e.onShowMenu,onBlur:e.onMenuButtonBlur}),k.createElement(c.Popup,{anchor:t.current&&t.current.element,show:e.showMenu,ref:e.popupRef},k.createElement(d.Menu,{vertical:!0,onSelect:e.onMenuItemSelect,items:e.menuItems,className:"k-context-menu"}))))};ne.displayName="KendoReactTaskBoardCardHeader";const re=e=>k.createElement(d.CardBody,null,e.children);re.displayName="KendoReactTaskBoardCardBody";const ie=e=>k.createElement("div",{className:"k-taskboard-pane k-taskboard-preview-pane"},k.createElement("div",{className:"k-taskboard-pane-header"},k.createElement("div",{className:"k-taskboard-pane-header-text"},e.title),k.createElement("span",{className:"k-spacer"}),k.createElement("div",{className:"k-taskboard-pane-header-actions"},k.createElement(r.Button,{icon:"x",svgIcon:l.xIcon,onClick:e.onClosePreviewPane}))),k.createElement("div",{className:"k-taskboard-pane-content"},k.createElement("p",null,e.description),k.createElement("p",null,e.priorityLabel," ",k.createElement("span",{style:{backgroundColor:e.priority.color}}," ")," ",e.priority.priority)),k.createElement("div",{className:"k-taskboard-pane-actions k-actions k-hstack k-justify-content-end"},k.createElement(r.Button,{onClick:e.onTaskDelete},e.delete),k.createElement(r.Button,{onClick:e.onTaskEdit},e.edit)));ie.displayName="KendoReactTaskBoardPreviewDialog";const le=e=>{const{onDeleteTask:t,showEditPane:a,task:o,style:r,dragTargetRef:i,elementRef:s}=e,[c,u]=k.useState(!1),[m,p]=k.useState(!1),[g,C]=k.useState(!1),f=k.useRef(null),y=n.useLocalization(),h=[{text:y.toLanguageString(B,U[B]),icon:"pencil",svgIcon:l.pencilIcon,data:()=>{a(o),u(!c)}},{text:y.toLanguageString(T,U[T]),icon:"trash",svgIcon:l.trashIcon,data:()=>{p(!m),u(!c)}}],b=()=>{C(!0)};return o.isPlaceholder&&i&&i.current?k.createElement("div",{style:{width:i.current.width,height:i.current.height},className:"k-taskboard-drag-placeholder",[G]:!0}):k.createElement(e.cardComponent,{task:o,style:r,tabIndex:e.tabIndex,disabled:e.disabled,elementRef:s,showMenu:c,showDeleteConfirm:m,showTaskPreviewPane:g,menuItems:h,popupRef:f,confirmDialogMessage:y.toLanguageString(v,U[v]),confirmDialogTitle:y.toLanguageString(D,U[D]),confirmDialogConfirmButton:y.toLanguageString(S,U[S]),confirmDialogCancelButton:y.toLanguageString(w,U[w]),previewDialogPriorityLabel:y.toLanguageString(W,U[W]),previewDialogDelete:y.toLanguageString(X,U[X]),previewDialogEdit:y.toLanguageString(Y,U[Y]),onShowPreviewPane:b,onClosePreviewPane:()=>{C(!1)},onMenuItemSelect:e=>{e.item.data()},onShowMenu:()=>{u(!0)},onHideMenu:()=>{u(!1)},onMenuButtonBlur:e=>{const t=f.current&&f.current.element;t&&t.contains(e.relatedTarget)||u(!1)},onTaskDelete:t,onTaskEdit:()=>{a(o),b()},onCloseConfirmDialog:()=>{p(!m)},card:d.Card,cardHeader:ne,cardBody:re,confirmDialog:ee,previewDialog:ie})};le.propTypes={task:a.object.isRequired},le.displayName="KendoReactTaskBoardCardBase";const se=e=>{const[t,a]=k.useState(!1),[o,r]=k.useState(!1),[i,l]=k.useState(!1),[s,d]=k.useState(),{dragTargetRef:c,column:u,onColumnChange:m,tasks:p,elementRef:g,style:C,onTaskCreate:f,onTaskEdit:y,onTaskDelete:B}=e,T=n.useLocalization(),v=k.useCallback(e=>{const t={...u,title:e.value};m.call(void 0,t,u)},[u,m]),D=k.useCallback(()=>{const e={...u,edit:!0};m.call(void 0,e,u)},[u,m]),S=k.useCallback(()=>{const e={...u,edit:!1};m.call(void 0,e,u)},[u,m]),w=k.useCallback(()=>{m.call(void 0,null,u)},[u,m]),I=e=>{r(!0),d(e)},R=k.useCallback(e=>{a(!1),f.call(void 0,{...e,status:u.status})},[f,u]),L=k.useCallback((e,t)=>{r(!1),y.call(void 0,e,t)},[y]),P=k.useCallback(e=>{B.call(void 0,e)},[B]);if(u.isPlaceholder&&c&&c.current){const e=c.current?c.current.width:0,t=c.current?c.current.height:0;return k.createElement("div",{style:{width:e,height:t},className:"k-taskboard-column k-taskboard-drag-placeholder",[G]:!0})}return k.createElement(e.columnComponent,{column:e.column,tasks:p,priorities:e.priorities,style:c?{overflow:"visible",...C}:C,tabIndex:e.tabIndex,elementRef:g,onTaskCreate:R,onTaskEdit:L,onTaskDelete:P,card:e.cardComponent,header:Z,body:_,confirmDialog:ee,editCardDialog:ae,addCardDialog:oe,onTitleChange:v,onColumnEnterEdit:D,onColumnExitEdit:S,onColumnConfirmDelete:w,onShowAddCardDialog:()=>{a(!0)},onShowEditCardPane:I,onColumnDelete:()=>{l(!i)},onCloseDialog:()=>{a(!1),r(!1)},showAddCard:t,showEditCard:o,showColumnConfirmDelete:i,editedTask:s,confirmDialogMessage:T.toLanguageString(x,U[x]),confirmDialogTitle:T.toLanguageString(M,U[M]),confirmDialogConfirmButton:T.toLanguageString(K,U[K]),confirmDialogCancelButton:T.toLanguageString(q,U[q]),editButtonTitle:T.toLanguageString(h,U[h]),addButtonTitle:T.toLanguageString(b,U[b]),closeButtonTitle:T.toLanguageString(E,U[E])},p&&p.map(t=>k.createElement(le,{key:t.id,tabIndex:e.tabIndex,task:t,disabled:!!e.column.edit,onDeleteTask:()=>P(t),showEditPane:()=>I(t),dragTargetRef:e.dragTargetRef,style:{borderLeftColor:t.priority.color},cardComponent:e.cardComponent})))};se.propTypes={column:a.object.isRequired,taskMap:a.object},se.displayName="KendoReactTaskBoardColumn";const de=e=>{for(;e;){if(!e.getAttribute)return null;const t=e.getAttribute($);if(t)return{id:t,type:e.getAttribute(V)||"",element:e};e=e.parentNode}return null},ce=(e,t)=>{const a=t.dataItem.color,o=k.createElement(k.Fragment,null,k.createElement("span",{style:{backgroundColor:a}}," "),e.props.children);return k.cloneElement(e,e.props,o)},ue=(e,t)=>{if(!t)return e;const a=k.createElement(k.Fragment,null,k.createElement("span",{style:{backgroundColor:t.color}}," "),k.createElement("span",null," ",e.props.children));return k.cloneElement(e,{...e.props},a)},me=e=>k.createElement(k.Fragment,null,k.createElement(e.card,{key:String(e.task.id),ref:e.elementRef,style:e.style,className:o.classNames("k-taskboard-card k-cursor-move k-taskboard-card-category",{"k-disabled":e.disabled}),[V]:Q,[$]:e.task.id,tabIndex:e.tabIndex},k.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}),k.createElement(e.cardBody,{task:e.task},e.task.description)),e.showDeleteConfirm&&k.createElement(e.confirmDialog,{onConfirm:e.onTaskDelete,onClose:e.onCloseConfirmDialog,dialogMessage:e.confirmDialogMessage,dialogTitle:e.confirmDialogTitle,dialogConfirmButton:e.confirmDialogConfirmButton,dialogCancelButton:e.confirmDialogCancelButton}),e.showTaskPreviewPane&&k.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}));me.displayName="KendoReactTaskBoardCard";const pe=e=>k.createElement("div",{className:"k-taskboard-pane k-taskboard-edit-pane"},k.createElement("div",{className:"k-taskboard-pane-header"},k.createElement("div",{className:"k-taskboard-pane-header-text"},e.header),k.createElement("span",{className:"k-spacer"}),k.createElement("div",{className:"k-taskboard-pane-header-actions"},k.createElement(r.Button,{icon:"x",svgIcon:l.xIcon,onClick:e.onClose}))),k.createElement("div",{className:"k-taskboard-pane-content"},k.createElement("div",{role:"form","data-role":"form",className:"k-form"},k.createElement(p.FieldWrapper,null,k.createElement(m.Label,{editorId:"title"},e.titleLabel),k.createElement(i.Input,{id:"title",onChange:e.onTitleChange,value:e.title,title:e.titleInputTitle})),k.createElement(p.FieldWrapper,null,k.createElement(m.Label,{editorId:"description"},e.descriptionLabel),k.createElement(i.Input,{id:"description",onChange:e.onDescriptionChange,value:e.description,title:e.descriptionInputTitle})),k.createElement(p.FieldWrapper,null,k.createElement(m.Label,{editorId:"priority"},e.priorityLabel),k.createElement(u.DropDownList,{id:"priority",data:e.priorities,value:e.priority,onChange:e.onPriorityChange,itemRender:ce,valueRender:ue,textField:"priority",dataItemKey:"priority",title:e.priorityDropDownTitle})))),k.createElement("div",{className:"k-taskboard-pane-actions k-actions k-hstack k-justify-content-end"},k.createElement(r.Button,{onClick:e.onClose},e.cancelButton),k.createElement(r.Button,{onClick:e.onSave,disabled:!e.title||!e.description},e.saveButton)));pe.propTypes={},pe.displayName="KendoReactTaskBoardEditPane";const ge=e=>k.createElement(k.Fragment,null,k.createElement("div",{ref:e.elementRef,style:e.style,className:o.classNames("k-taskboard-column",{"k-taskboard-column-edit":e.column.edit}),tabIndex:e.tabIndex,[V]:J,[$]:e.column.id},k.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}),k.createElement(e.body,null,e.children)),e.showAddCard&&k.createElement(e.addCardDialog,{onClose:e.onCloseDialog,onSave:e.onTaskCreate,priorities:e.priorities,editPane:pe}),e.showEditCard&&e.editedTask&&k.createElement(e.editCardDialog,{onClose:e.onCloseDialog,onSave:e.onTaskEdit,task:e.editedTask,priorities:e.priorities,editPane:pe}),e.showColumnConfirmDelete&&k.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 ke=k.forwardRef((e,t)=>{const a=!o.validatePackage(C,{component:"TaskBoard"}),n=o.getLicenseMessage(C),{columnData:r=[],className:i,style:l,id:s,taskData:d=[],onChange:c}=e,u=k.useRef(null),m=k.useRef(null);k.useImperativeHandle(u,()=>({props:e})),k.useImperativeHandle(t,()=>u.current);const p=k.Children.toArray(e.children).filter(e=>e&&e.type&&"KendoReactTaskBoardToolbar"===e.type.displayName),g=k.useRef(null),f=k.useRef(null),y=k.useRef(null),[h,b]=k.useState(null),[E,B]=k.useState(null),[T,v]=k.useState({top:0,left:0}),[D,S]=k.useState(),w=k.useRef(null),I=k.useRef(null),R=k.useMemo(()=>{const e={};return(h||d).forEach(t=>{const a=t.status;e[a]||(e[a]=[]),e[a].push(t)}),e},[d,h]),L=k.useCallback(e=>{const t=e.originalEvent.target;if(t.closest("button,input,.k-link,.k-taskboard-preview-pane"))return;const a=de(t),n=m.current;if(a&&n){const i=a.type===J;if(i&&!t.closest(".k-taskboard-column-header"))return;const l=a.element.getBoundingClientRect(),s=n.getBoundingClientRect();y.current={x:e.clientX-l.left+s.left,y:e.clientY-l.top+s.top};const c=i?r:d,u=i?B:b,m=c.findIndex(e=>String(e.id)===a.id),p=c[m];if(-1===m||p.edit)return;const g=o.clone(p);g.isPlaceholder=!0;const k=[...c];k[m]=g,f.current={...a,index:m,item:p,width:l.width,height:l.height},S(m),v({top:e.clientY-y.current.y,left:e.clientX-y.current.x}),u(k)}},[r,d]),P=k.useCallback(e=>{const t=f.current,a=w.current&&w.current.element||I.current;if(t&&a){v({top:e.clientY-y.current.y,left:e.clientX-y.current.x}),a.style.visibility="hidden";const n=document.elementFromPoint(e.clientX,e.clientY);if(a.style.visibility="",n&&n.getAttribute(G))return;const i=n&&de(n);if(i){let e;const a=i.type===t.type,n=t.type===J,l=(n?E:h)||[],s=n?B:b;if(n||a){if(e=((e,t,a)=>{let o=-1,n=-1;for(let r=0;r<a.length;r++){const i=String(a[r].id);if(i===e&&(n=r),i===t&&(o=r),-1!==o&&-1!==n)return{dragIndex:n,dropIndex:o}}return null})(t.id,i.id,l),e){const a=l[e.dragIndex],r=l[e.dropIndex],i=o.clone(a);n||(i.status=r.status);const d=[...l];d.splice(e.dragIndex,1),d.splice(e.dropIndex,0,i),t.index=e.dropIndex,s(d)}}else{const e=l.findIndex(e=>String(e.id)===t.id),a=r.findIndex(e=>String(e.id)===i.id);if(-1!==e&&-1!==a){const o=l[e],n=r[a].status;if(R[n])return;o.status=n;const i=[...l];i.splice(e,1),i.push(o),t.index=i.length-1,s(i)}}}}},[E,h,r,R]),N=k.useCallback(()=>{const e=f.current;if(c&&e){const t=(e.type===J?E:h)||[],a=t[e.index];delete a.isPlaceholder;const o={data:t,type:e.type,previousItem:{...e.item,index:D},item:{...a,index:e.index}};c.call(void 0,o)}f.current=null,y.current=null,b(null),B(null),v({top:0,left:0}),S(void 0)},[E,h,c]);o.useDraggable(g,{onDragStart:L,onDrag:P,onDragEnd:N});const x=f.current,M=k.useCallback(e=>{const t={data:[...d,e],type:Q,previousItem:null,item:e};c.call(void 0,t)},[c,d]),K=k.useCallback((e,t)=>{const a=d.slice(),o=d.indexOf(t);-1!==o&&a.splice(o,1,e);const n={data:a,type:Q,previousItem:t,item:e};c.call(void 0,n)},[c,d]),q=k.useCallback(e=>{const t={data:d.filter(t=>t!==e),type:Q,previousItem:e,item:null};c.call(void 0,t)},[c,d]),A=k.useCallback((e,t)=>{const a=r.slice(),o=a.indexOf(t);-1!==o&&(e?a.splice(o,1,e):a.splice(o,1));const n={data:a,type:J,previousItem:t,item:e};c.call(void 0,n)},[c,r]);return k.createElement("div",{id:s,style:l,ref:m,className:o.classNames("k-taskboard",i)},p,k.createElement("div",{className:"k-taskboard-content",style:x?{userSelect:"none"}:void 0},k.createElement("div",{className:"k-taskboard-columns-container",ref:g},(E||r).map(t=>k.createElement(se,{key:t.id,tabIndex:e.tabIndex,column:t,tasks:R[t.status]||[],dragTargetRef:f,onTaskCreate:M,onTaskEdit:K,onTaskDelete:q,onColumnChange:A,columnComponent:e.column||ge,cardComponent:e.card||me,priorities:e.priorities})))),x&&x.type===Q&&k.createElement(le,{elementRef:w,style:{position:"absolute",width:x.width,height:x.height,top:T.top,left:T.left,zIndex:10,borderLeftColor:x.item.priority?x.item.priority.color:x.item.color},task:x.item,dragTargetRef:f,cardComponent:e.card||me,onDeleteTask:o.noop,showEditPane:o.noop}),x&&x.type===J&&k.createElement(se,{elementRef:I,style:{position:"absolute",width:x.width,height:x.height,top:T.top,left:T.left,zIndex:10},cardComponent:e.card||me,columnComponent:e.column||ge,column:x.item,tasks:R[x.item.status],priorities:e.priorities,dragTargetRef:f,onTaskDelete:q,onColumnChange:A,onTaskEdit:K,onTaskCreate:M}),a&&k.createElement(o.WatermarkOverlay,{message:n}))});ke.propTypes={columnData:a.array.isRequired,taskData:a.array.isRequired},ke.displayName="KendoReactTaskBoard";const Ce=e=>{const{className:t,style:a,children:n}=e;return k.createElement("div",{style:a,className:o.classNames("k-taskboard-header",t)},k.createElement("div",{className:"k-taskboard-toolbar k-toolbar"},n))};Ce.propTypes={children:a.node},Ce.displayName="KendoReactTaskBoardToolbar",e.TaskBoard=ke,e.TaskBoardAddCard=oe,e.TaskBoardCard=me,e.TaskBoardCardBody=re,e.TaskBoardCardHeader=ne,e.TaskBoardColumn=ge,e.TaskBoardColumnBody=_,e.TaskBoardColumnHeader=Z,e.TaskBoardConfirmDialog=ee,e.TaskBoardEditCard=ae,e.TaskBoardPreviewDialog=ie,e.TaskBoardTaskEditPane=pe,e.TaskBoardToolbar=Ce,e.useTaskEditing=te});
|
|
15
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),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")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@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"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactTaskboard={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoReactIntl,e.KendoReactButtons,e.KendoReactInputs,e.KendoSvgIcons,e.KendoReactDialogs,e.KendoReactLayout,e.KendoReactPopup,e.KendoReactDropdowns,e.KendoReactLabels,e.KendoReactForm)}(this,function(e,t,a,o,n,r,i,l,s,d,c,u,m,p){"use strict";function g(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(a){if("default"!==a){var o=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,o.get?o:{enumerable:!0,get:function(){return e[a]}})}}),t.default=e,Object.freeze(t)}var k=g(t);const C=Object.freeze({name:"@progress/kendo-react-taskboard",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"15.0.0-develop.1",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"}),f="taskBoard.toolbarAddColumnButton",b="taskBoard.toolbarSearchField",y="taskBoard.editColumnButton",h="taskBoard.addCardButton",B="taskBoard.deleteColumnButton",E="taskBoard.editCardButton",T="taskBoard.deleteCardButton",v="taskBoard.deleteTaskDialogMessage",D="taskBoard.deleteTaskDialogTitle",S="taskBoard.deleteTaskConfirmButton",w="taskBoard.deleteTaskCancelButton",I="taskBoard.addCardTitle",R="taskBoard.addCardTitleLabel",L="taskBoard.addCardDescriptionLabel",P="taskBoard.addCardPriorityLabel",N="taskBoard.addCardCreateButton",x="taskBoard.deleteColumnDialogMessage",M="taskBoard.deleteColumnDialogTitle",K="taskBoard.deleteColumnConfirmButton",q="taskBoard.deleteColumnCancelButton",A="taskBoard.editCardPaneTitle",H="taskBoard.editCardPaneSaveButton",O="taskBoard.editPaneTitleLabel",j="taskBoard.editPaneDescriptionLabel",F="taskBoard.editPanePriorityLabel",z="taskBoard.editPaneCancelButton",W="taskBoard.previewPanePriorityLabel",X="taskBoard.previewPaneDeleteButton",Y="taskBoard.previewPaneEditButton",U={[f]:"Add column",[b]:"Search",[y]:"Edit column",[h]:"Add card",[B]:"Delete column",[E]:"Edit card",[T]:"Delete card",[v]:"Are you sure you want to delete this card?",[D]:"Delete Card",[S]:"Delete",[w]:"Cancel",[x]:"Are you sure you want to delete this column?",[M]:"Delete column?",[K]:"Delete",[q]:"Cancel",[I]:"Create new card",[N]:"Create",[z]:"Cancel",[A]:"Edit",[H]:"Save changes",[O]:"Title:",[j]:"Description:",[F]:"Priority:",[R]:"Title",[L]:"Description",[P]:"Priority",[W]:"Priority:",[X]:"Delete",[Y]:"Edit"},V="data-taskboard-type",$="data-taskboard-id",G="data-taskboard-placeholder",J="column",Q="task",Z=e=>{const{edit:t,title:a}=e.column;return k.createElement("div",{className:"k-taskboard-column-header"},k.createElement("div",{className:"k-taskboard-column-header-text k-text-ellipsis",id:e.columnHeaderId},t?k.createElement(i.Input,{value:a,onChange:e.onTitleChange,onBlur:e.onColumnExitEdit,autoFocus:!0}):a),k.createElement("span",{className:"k-spacer"}),k.createElement("div",{className:o.classNames("k-taskboard-column-header-actions",{"k-disabled":t})},k.createElement(r.Button,{fillMode:"flat",icon:"pencil",svgIcon:l.pencilIcon,"aria-label":e.editButtonTitle,title:e.editButtonTitle,onClick:e.onColumnEnterEdit}),k.createElement(r.Button,{fillMode:"flat",icon:"plus",svgIcon:l.plusIcon,"aria-label":e.addButtonTitle,title:e.addButtonTitle,onClick:e.onShowAddCardDialog}),k.createElement(r.Button,{fillMode:"flat",icon:"x",svgIcon:l.xIcon,"aria-label":e.closeButtonTitle,title:e.closeButtonTitle,onClick:e.onColumnDelete})))};Z.displayName="KendoReactTaskBoardColumnHeader";const _=e=>k.createElement("div",{className:"k-taskboard-column-cards-container",role:"list","aria-labelledby":e.columnHeaderId},k.createElement("div",{className:"k-taskboard-column-cards",role:"presentation"},e.children));_.displayName="KendoReactTaskBoardColumnBody";const ee=e=>{const{onClose:t,onConfirm:a,dialogMessage:o,dialogTitle:n,dialogConfirmButton:i,dialogCancelButton:l}=e;return k.createElement(s.Dialog,{title:n,closeIcon:!1},o,k.createElement(s.DialogActionsBar,{layout:"end"},k.createElement(r.Button,{onClick:a},i),k.createElement(r.Button,{onClick:t},l)))};ee.propTypes={onClose:a.func.isRequired,onConfirm:a.func.isRequired,dialogMessage:a.string.isRequired,dialogTitle:a.string.isRequired,dialogConfirmButton:a.string.isRequired,dialogCancelButton:a.string.isRequired},ee.displayName="KendoReactTaskBoardConfirmDialog";const te=({onSave:e,task:t,priorities:a})=>{const[o,n]=k.useState(t?t.title:""),[r,i]=k.useState(t?t.description:""),[l,s]=k.useState(t?t.priority:a[0]),d=k.useCallback(e=>{n(e.value)},[]),c=k.useCallback(e=>{i(e.value)},[]),u=k.useCallback(e=>{s(e.target.value)},[]),m=k.useCallback(a=>{const n={id:void 0,status:"",...t||{},title:o,description:r,priority:l};e.call(void 0,n,t)},[e,t,o,r,l]);return{onTitleChange:d,title:o,onDescriptionChange:c,description:r,onPriorityChange:u,priority:l,onSave:m}},ae=e=>{const{onTitleChange:t,title:a,onDescriptionChange:o,description:r,onPriorityChange:i,priority:l,onSave:s}=te(e),d=n.useLocalization();return k.createElement(e.editPane,{header:d.toLanguageString(A,U[A])+e.task.title,titleInputTitle:d.toLanguageString(R,U[R]),descriptionInputTitle:d.toLanguageString(L,U[L]),priorityDropDownTitle:d.toLanguageString(P,U[P]),task:e.task,saveButton:d.toLanguageString(H,U[H]),cancelButton:d.toLanguageString(z,U[z]),priorities:e.priorities,titleLabel:d.toLanguageString(O,U[O]),descriptionLabel:d.toLanguageString(j,U[j]),priorityLabel:d.toLanguageString(F,U[F]),onSave:s,onClose:e.onClose,onTitleChange:t,title:a,onDescriptionChange:o,description:r,onPriorityChange:i,priority:l})};ae.propTypes={},ae.displayName="KendoReactTaskBoardEditCard";const oe=e=>{const{onTitleChange:t,title:a,onDescriptionChange:o,description:r,onPriorityChange:i,priority:l,onSave:s}=te(e),d=n.useLocalization();return k.createElement(e.editPane,{header:d.toLanguageString(I,U[I]),titleInputTitle:d.toLanguageString(R,U[R]),descriptionInputTitle:d.toLanguageString(L,U[L]),priorityDropDownTitle:d.toLanguageString(P,U[P]),titleLabel:d.toLanguageString(O,U[O]),descriptionLabel:d.toLanguageString(j,U[j]),priorityLabel:d.toLanguageString(F,U[F]),saveButton:d.toLanguageString(N,U[N]),cancelButton:d.toLanguageString(z,U[z]),priorities:e.priorities,onSave:s,onClose:e.onClose,onTitleChange:t,title:a,onDescriptionChange:o,description:r,onPriorityChange:i,priority:l})};oe.propTypes={},oe.displayName="KendoReactTaskBoardAddCard";const ne=e=>{const t=k.useRef(void 0);return k.createElement(d.CardHeader,{className:"k-hbox"},k.createElement("span",{className:"k-card-title k-link",onClick:e.onShowPreviewPane},e.title),k.createElement("span",{className:"k-spacer"}),k.createElement("div",{className:"k-card-header-actions"},k.createElement(r.Button,{fillMode:"flat",className:"k-taskboard-card-menu-button",icon:"more-vertical",svgIcon:l.moreVerticalIcon,ref:t,"aria-label":"Card menu",title:"Card menu",onClick:e.showMenu?e.onHideMenu:e.onShowMenu,onBlur:e.onMenuButtonBlur}),k.createElement(c.Popup,{anchor:t.current&&t.current.element,show:e.showMenu,ref:e.popupRef},k.createElement(d.Menu,{vertical:!0,onSelect:e.onMenuItemSelect,items:e.menuItems,className:"k-context-menu"}))))};ne.displayName="KendoReactTaskBoardCardHeader";const re=e=>k.createElement(d.CardBody,null,e.children);re.displayName="KendoReactTaskBoardCardBody";const ie=e=>k.createElement("div",{className:"k-taskboard-pane k-taskboard-preview-pane"},k.createElement("div",{className:"k-taskboard-pane-header"},k.createElement("div",{className:"k-taskboard-pane-header-text"},e.title),k.createElement("span",{className:"k-spacer"}),k.createElement("div",{className:"k-taskboard-pane-header-actions"},k.createElement(r.Button,{icon:"x",svgIcon:l.xIcon,onClick:e.onClosePreviewPane}))),k.createElement("div",{className:"k-taskboard-pane-content"},k.createElement("p",null,e.description),k.createElement("p",null,e.priorityLabel," ",k.createElement("span",{style:{backgroundColor:e.priority.color}}," ")," ",e.priority.priority)),k.createElement("div",{className:"k-taskboard-pane-actions k-actions k-hstack k-justify-content-end"},k.createElement(r.Button,{onClick:e.onTaskDelete},e.delete),k.createElement(r.Button,{onClick:e.onTaskEdit},e.edit)));ie.displayName="KendoReactTaskBoardPreviewDialog";const le=e=>{const{onDeleteTask:t,showEditPane:a,task:o,style:r,dragTargetRef:i,elementRef:s}=e,[c,u]=k.useState(!1),[m,p]=k.useState(!1),[g,C]=k.useState(!1),f=k.useRef(null),b=n.useLocalization(),y=[{text:b.toLanguageString(E,U[E]),icon:"pencil",svgIcon:l.pencilIcon,data:()=>{a(o),u(!c)}},{text:b.toLanguageString(T,U[T]),icon:"trash",svgIcon:l.trashIcon,data:()=>{p(!m),u(!c)}}],h=()=>{C(!0)};return o.isPlaceholder&&i&&i.current?k.createElement("div",{style:{width:i.current.width,height:i.current.height},className:"k-taskboard-drag-placeholder",[G]:!0}):k.createElement(e.cardComponent,{task:o,style:r,tabIndex:e.tabIndex,disabled:e.disabled,elementRef:s,showMenu:c,showDeleteConfirm:m,showTaskPreviewPane:g,menuItems:y,popupRef:f,confirmDialogMessage:b.toLanguageString(v,U[v]),confirmDialogTitle:b.toLanguageString(D,U[D]),confirmDialogConfirmButton:b.toLanguageString(S,U[S]),confirmDialogCancelButton:b.toLanguageString(w,U[w]),previewDialogPriorityLabel:b.toLanguageString(W,U[W]),previewDialogDelete:b.toLanguageString(X,U[X]),previewDialogEdit:b.toLanguageString(Y,U[Y]),onShowPreviewPane:h,onClosePreviewPane:()=>{C(!1)},onMenuItemSelect:e=>{e.item.data()},onShowMenu:()=>{u(!0)},onHideMenu:()=>{u(!1)},onMenuButtonBlur:e=>{const t=f.current&&f.current.element;t&&t.contains(e.relatedTarget)||u(!1)},onTaskDelete:t,onTaskEdit:()=>{a(o),h()},onCloseConfirmDialog:()=>{p(!m)},card:d.Card,cardHeader:ne,cardBody:re,confirmDialog:ee,previewDialog:ie})};le.propTypes={task:a.object.isRequired},le.displayName="KendoReactTaskBoardCardBase";const se=e=>{const[t,a]=k.useState(!1),[o,r]=k.useState(!1),[i,l]=k.useState(!1),[s,d]=k.useState(),{dragTargetRef:c,column:u,onColumnChange:m,tasks:p,elementRef:g,style:C,onTaskCreate:f,onTaskEdit:b,onTaskDelete:E}=e,T=n.useLocalization(),v=k.useCallback(e=>{const t={...u,title:e.value};m.call(void 0,t,u)},[u,m]),D=k.useCallback(()=>{const e={...u,edit:!0};m.call(void 0,e,u)},[u,m]),S=k.useCallback(()=>{const e={...u,edit:!1};m.call(void 0,e,u)},[u,m]),w=k.useCallback(()=>{m.call(void 0,null,u)},[u,m]),I=e=>{r(!0),d(e)},R=k.useCallback(e=>{a(!1),f.call(void 0,{...e,status:u.status})},[f,u]),L=k.useCallback((e,t)=>{r(!1),b.call(void 0,e,t)},[b]),P=k.useCallback(e=>{E.call(void 0,e)},[E]);if(u.isPlaceholder&&c&&c.current){const e=c.current?c.current.width:0,t=c.current?c.current.height:0;return k.createElement("div",{style:{width:e,height:t},className:"k-taskboard-column k-taskboard-drag-placeholder",[G]:!0})}return k.createElement(e.columnComponent,{column:e.column,tasks:p,priorities:e.priorities,style:c?{overflow:"visible",...C}:C,tabIndex:e.tabIndex,elementRef:g,onTaskCreate:R,onTaskEdit:L,onTaskDelete:P,card:e.cardComponent,header:Z,body:_,confirmDialog:ee,editCardDialog:ae,addCardDialog:oe,onTitleChange:v,onColumnEnterEdit:D,onColumnExitEdit:S,onColumnConfirmDelete:w,onShowAddCardDialog:()=>{a(!0)},onShowEditCardPane:I,onColumnDelete:()=>{l(!i)},onCloseDialog:()=>{a(!1),r(!1)},showAddCard:t,showEditCard:o,showColumnConfirmDelete:i,editedTask:s,confirmDialogMessage:T.toLanguageString(x,U[x]),confirmDialogTitle:T.toLanguageString(M,U[M]),confirmDialogConfirmButton:T.toLanguageString(K,U[K]),confirmDialogCancelButton:T.toLanguageString(q,U[q]),editButtonTitle:T.toLanguageString(y,U[y]),addButtonTitle:T.toLanguageString(h,U[h]),closeButtonTitle:T.toLanguageString(B,U[B])},p&&p.map(t=>k.createElement(le,{key:t.id,tabIndex:e.tabIndex,task:t,disabled:!!e.column.edit,onDeleteTask:()=>P(t),showEditPane:()=>I(t),dragTargetRef:e.dragTargetRef,style:{borderLeftColor:t.priority.color},cardComponent:e.cardComponent})))};se.propTypes={column:a.object.isRequired,taskMap:a.object},se.displayName="KendoReactTaskBoardColumn";const de=e=>{for(;e;){if(!e.getAttribute)return null;const t=e.getAttribute($);if(t)return{id:t,type:e.getAttribute(V)||"",element:e};e=e.parentNode}return null},ce=(e,t)=>{const a=t.dataItem.color,o=k.createElement(k.Fragment,null,k.createElement("span",{style:{backgroundColor:a}}," "),e.props.children);return k.cloneElement(e,e.props,o)},ue=(e,t)=>{if(!t)return e;const a=k.createElement(k.Fragment,null,k.createElement("span",{style:{backgroundColor:t.color}}," "),k.createElement("span",null," ",e.props.children));return k.cloneElement(e,{...e.props},a)},me=e=>k.createElement(k.Fragment,null,k.createElement(e.card,{key:String(e.task.id),ref:e.elementRef,style:e.style,className:o.classNames("k-taskboard-card",{"k-disabled":e.disabled}),[V]:Q,[$]:e.task.id,tabIndex:e.tabIndex,role:"listitem"},k.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}),k.createElement(e.cardBody,{task:e.task},e.task.description)),e.showDeleteConfirm&&k.createElement(e.confirmDialog,{onConfirm:e.onTaskDelete,onClose:e.onCloseConfirmDialog,dialogMessage:e.confirmDialogMessage,dialogTitle:e.confirmDialogTitle,dialogConfirmButton:e.confirmDialogConfirmButton,dialogCancelButton:e.confirmDialogCancelButton}),e.showTaskPreviewPane&&k.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}));me.displayName="KendoReactTaskBoardCard";const pe=e=>k.createElement("div",{className:"k-taskboard-pane k-taskboard-edit-pane"},k.createElement("div",{className:"k-taskboard-pane-header"},k.createElement("div",{className:"k-taskboard-pane-header-text"},e.header),k.createElement("span",{className:"k-spacer"}),k.createElement("div",{className:"k-taskboard-pane-header-actions"},k.createElement(r.Button,{icon:"x",svgIcon:l.xIcon,onClick:e.onClose}))),k.createElement("div",{className:"k-taskboard-pane-content"},k.createElement("div",{role:"form","data-role":"form",className:"k-form"},k.createElement(p.FieldWrapper,null,k.createElement(m.Label,{editorId:"title"},e.titleLabel),k.createElement(i.Input,{id:"title",onChange:e.onTitleChange,value:e.title,title:e.titleInputTitle})),k.createElement(p.FieldWrapper,null,k.createElement(m.Label,{editorId:"description"},e.descriptionLabel),k.createElement(i.Input,{id:"description",onChange:e.onDescriptionChange,value:e.description,title:e.descriptionInputTitle})),k.createElement(p.FieldWrapper,null,k.createElement(m.Label,{editorId:"priority"},e.priorityLabel),k.createElement(u.DropDownList,{id:"priority",data:e.priorities,value:e.priority,onChange:e.onPriorityChange,itemRender:ce,valueRender:ue,textField:"priority",dataItemKey:"priority",title:e.priorityDropDownTitle})))),k.createElement("div",{className:"k-taskboard-pane-actions k-actions k-hstack k-justify-content-end"},k.createElement(r.Button,{onClick:e.onClose},e.cancelButton),k.createElement(r.Button,{onClick:e.onSave,disabled:!e.title||!e.description},e.saveButton)));pe.propTypes={},pe.displayName="KendoReactTaskBoardEditPane";const ge=e=>{const t=k.useId();return k.createElement(k.Fragment,null,k.createElement("div",{ref:e.elementRef,style:e.style,className:o.classNames("k-taskboard-column",{"k-taskboard-column-edit":e.column.edit}),tabIndex:e.tabIndex,[V]:J,[$]:e.column.id},k.createElement(e.header,{column:e.column,tasks:e.tasks,columnHeaderId:t,onTitleChange:e.onTitleChange,onColumnExitEdit:e.onColumnExitEdit,editButtonTitle:e.editButtonTitle,onColumnEnterEdit:e.onColumnEnterEdit,addButtonTitle:e.addButtonTitle,onShowAddCardDialog:e.onShowAddCardDialog,closeButtonTitle:e.closeButtonTitle,onColumnDelete:e.onColumnDelete}),k.createElement(e.body,{columnHeaderId:t},e.children)),e.showAddCard&&k.createElement(e.addCardDialog,{onClose:e.onCloseDialog,onSave:e.onTaskCreate,priorities:e.priorities,editPane:pe}),e.showEditCard&&e.editedTask&&k.createElement(e.editCardDialog,{onClose:e.onCloseDialog,onSave:e.onTaskEdit,task:e.editedTask,priorities:e.priorities,editPane:pe}),e.showColumnConfirmDelete&&k.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 ke=k.forwardRef((e,t)=>{const a=!o.validatePackage(C,{component:"TaskBoard"}),n=o.getLicenseMessage(C),{columnData:r=[],className:i,style:l,id:s,taskData:d=[],onChange:c}=e,u=k.useRef(null),m=k.useRef(null);k.useImperativeHandle(u,()=>({props:e})),k.useImperativeHandle(t,()=>u.current),o.useWebMcpRegister("taskboard",u,e,e.webMcp);const p=k.Children.toArray(e.children).filter(e=>e&&e.type&&"KendoReactTaskBoardToolbar"===e.type.displayName),g=k.useRef(null),f=k.useRef(null),b=k.useRef(null),[y,h]=k.useState(null),[B,E]=k.useState(null),[T,v]=k.useState({top:0,left:0}),[D,S]=k.useState(),w=k.useRef(null),I=k.useRef(null),R=k.useMemo(()=>{const e={};return(y||d).forEach(t=>{const a=t.status;e[a]||(e[a]=[]),e[a].push(t)}),e},[d,y]),L=k.useCallback(e=>{const t=e.originalEvent.target;if(t.closest("button,input,.k-link,.k-taskboard-preview-pane"))return;const a=de(t),n=m.current;if(a&&n){const i=a.type===J;if(i&&!t.closest(".k-taskboard-column-header"))return;const l=a.element.getBoundingClientRect(),s=n.getBoundingClientRect();b.current={x:e.clientX-l.left+s.left,y:e.clientY-l.top+s.top};const c=i?r:d,u=i?E:h,m=c.findIndex(e=>String(e.id)===a.id),p=c[m];if(-1===m||p.edit)return;const g=o.clone(p);g.isPlaceholder=!0;const k=[...c];k[m]=g,f.current={...a,index:m,item:p,width:l.width,height:l.height},S(m),v({top:e.clientY-b.current.y,left:e.clientX-b.current.x}),u(k)}},[r,d]),P=k.useCallback(e=>{const t=f.current,a=w.current&&w.current.element||I.current;if(t&&a){v({top:e.clientY-b.current.y,left:e.clientX-b.current.x}),a.style.visibility="hidden";const n=document.elementFromPoint(e.clientX,e.clientY);if(a.style.visibility="",n&&n.getAttribute(G))return;const i=n&&de(n);if(i){let e;const a=i.type===t.type,n=t.type===J,l=(n?B:y)||[],s=n?E:h;if(n||a){if(e=((e,t,a)=>{let o=-1,n=-1;for(let r=0;r<a.length;r++){const i=String(a[r].id);if(i===e&&(n=r),i===t&&(o=r),-1!==o&&-1!==n)return{dragIndex:n,dropIndex:o}}return null})(t.id,i.id,l),e){const a=l[e.dragIndex],r=l[e.dropIndex],i=o.clone(a);n||(i.status=r.status);const d=[...l];d.splice(e.dragIndex,1),d.splice(e.dropIndex,0,i),t.index=e.dropIndex,s(d)}}else{const e=l.findIndex(e=>String(e.id)===t.id),a=r.findIndex(e=>String(e.id)===i.id);if(-1!==e&&-1!==a){const o=l[e],n=r[a].status;if(R[n])return;o.status=n;const i=[...l];i.splice(e,1),i.push(o),t.index=i.length-1,s(i)}}}}},[B,y,r,R]),N=k.useCallback(()=>{const e=f.current;if(c&&e){const t=(e.type===J?B:y)||[],a=t[e.index];delete a.isPlaceholder;const o={data:t,type:e.type,previousItem:{...e.item,index:D},item:{...a,index:e.index}};c.call(void 0,o)}f.current=null,b.current=null,h(null),E(null),v({top:0,left:0}),S(void 0)},[B,y,c,D]);o.useDraggable(g,{onDragStart:L,onDrag:P,onDragEnd:N});const x=f.current,M=k.useCallback(e=>{const t={data:[...d,e],type:Q,previousItem:null,item:e};c.call(void 0,t)},[c,d]),K=k.useCallback((e,t)=>{const a=d.slice(),o=d.indexOf(t);-1!==o&&a.splice(o,1,e);const n={data:a,type:Q,previousItem:t,item:e};c.call(void 0,n)},[c,d]),q=k.useCallback(e=>{const t={data:d.filter(t=>t!==e),type:Q,previousItem:e,item:null};c.call(void 0,t)},[c,d]),A=k.useCallback((e,t)=>{const a=r.slice(),o=a.indexOf(t);-1!==o&&(e?a.splice(o,1,e):a.splice(o,1));const n={data:a,type:J,previousItem:t,item:e};c.call(void 0,n)},[c,r]);return k.createElement("div",{id:s,style:l,ref:m,className:o.classNames("k-taskboard",i),role:"application"},p,k.createElement("div",{className:"k-taskboard-content",style:x?{userSelect:"none"}:void 0},k.createElement("div",{className:"k-taskboard-columns-container",ref:g},(B||r).map(t=>k.createElement(se,{key:t.id,tabIndex:e.tabIndex,column:t,tasks:R[t.status]||[],dragTargetRef:f,onTaskCreate:M,onTaskEdit:K,onTaskDelete:q,onColumnChange:A,columnComponent:e.column||ge,cardComponent:e.card||me,priorities:e.priorities})))),x&&x.type===Q&&k.createElement(le,{elementRef:w,style:{position:"absolute",width:x.width,height:x.height,top:T.top,left:T.left,zIndex:10,borderLeftColor:x.item.priority?x.item.priority.color:x.item.color},task:x.item,dragTargetRef:f,cardComponent:e.card||me,onDeleteTask:o.noop,showEditPane:o.noop}),x&&x.type===J&&k.createElement(se,{elementRef:I,style:{position:"absolute",width:x.width,height:x.height,top:T.top,left:T.left,zIndex:10},cardComponent:e.card||me,columnComponent:e.column||ge,column:x.item,tasks:R[x.item.status],priorities:e.priorities,dragTargetRef:f,onTaskDelete:q,onColumnChange:A,onTaskEdit:K,onTaskCreate:M}),a&&k.createElement(o.WatermarkOverlay,{message:n}))});ke.propTypes={columnData:a.array.isRequired,taskData:a.array.isRequired},ke.displayName="KendoReactTaskBoard";const Ce=e=>{const{className:t,style:a,children:n}=e;return k.createElement("div",{style:a,className:o.classNames("k-taskboard-header",t)},k.createElement("div",{className:"k-taskboard-toolbar k-toolbar",role:"toolbar","aria-label":"Toolbar"},n))};Ce.propTypes={children:a.node},Ce.displayName="KendoReactTaskBoardToolbar",e.TaskBoard=ke,e.TaskBoardAddCard=oe,e.TaskBoardCard=me,e.TaskBoardCardBody=re,e.TaskBoardCardHeader=ne,e.TaskBoardColumn=ge,e.TaskBoardColumnBody=_,e.TaskBoardColumnHeader=Z,e.TaskBoardConfirmDialog=ee,e.TaskBoardEditCard=ae,e.TaskBoardPreviewDialog=ie,e.TaskBoardTaskEditPane=pe,e.TaskBoardToolbar=Ce,e.useTaskEditing=te});
|
package/package-metadata.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-taskboard",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-taskboard",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1779200040,version:"15.0.0-develop.1",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"});exports.packageMetadata=e;
|
package/package-metadata.mjs
CHANGED
|
@@ -7,7 +7,7 @@ export const packageMetadata = Object.freeze({
|
|
|
7
7
|
productName: 'KendoReact',
|
|
8
8
|
productCode: 'KENDOUIREACT',
|
|
9
9
|
productCodes: ['KENDOUIREACT'],
|
|
10
|
-
publishDate:
|
|
11
|
-
version: '
|
|
10
|
+
publishDate: 1779200040,
|
|
11
|
+
version: '15.0.0-develop.1',
|
|
12
12
|
licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/components/my-license/'
|
|
13
13
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-taskboard",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "15.0.0-develop.1",
|
|
4
4
|
"description": "KendoReact TaskBoard package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -27,18 +27,18 @@
|
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@progress/kendo-data-query": "^1.7.2",
|
|
29
29
|
"@progress/kendo-licensing": "^1.7.2",
|
|
30
|
-
"@progress/kendo-react-buttons": "
|
|
31
|
-
"@progress/kendo-react-common": "
|
|
32
|
-
"@progress/kendo-react-dialogs": "
|
|
33
|
-
"@progress/kendo-react-dropdowns": "
|
|
34
|
-
"@progress/kendo-react-form": "
|
|
35
|
-
"@progress/kendo-react-indicators": "
|
|
36
|
-
"@progress/kendo-react-inputs": "
|
|
37
|
-
"@progress/kendo-react-intl": "
|
|
38
|
-
"@progress/kendo-react-labels": "
|
|
39
|
-
"@progress/kendo-react-layout": "
|
|
40
|
-
"@progress/kendo-react-popup": "
|
|
41
|
-
"@progress/kendo-svg-icons": "^4.0.0",
|
|
30
|
+
"@progress/kendo-react-buttons": "15.0.0-develop.1",
|
|
31
|
+
"@progress/kendo-react-common": "15.0.0-develop.1",
|
|
32
|
+
"@progress/kendo-react-dialogs": "15.0.0-develop.1",
|
|
33
|
+
"@progress/kendo-react-dropdowns": "15.0.0-develop.1",
|
|
34
|
+
"@progress/kendo-react-form": "15.0.0-develop.1",
|
|
35
|
+
"@progress/kendo-react-indicators": "15.0.0-develop.1",
|
|
36
|
+
"@progress/kendo-react-inputs": "15.0.0-develop.1",
|
|
37
|
+
"@progress/kendo-react-intl": "15.0.0-develop.1",
|
|
38
|
+
"@progress/kendo-react-labels": "15.0.0-develop.1",
|
|
39
|
+
"@progress/kendo-react-layout": "15.0.0-develop.1",
|
|
40
|
+
"@progress/kendo-react-popup": "15.0.0-develop.1",
|
|
41
|
+
"@progress/kendo-svg-icons": "^4.9.0 || ^5.0.0",
|
|
42
42
|
"react": "^18.0.0 || ^19.0.0",
|
|
43
43
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
44
44
|
},
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"package": {
|
|
64
64
|
"productName": "KendoReact",
|
|
65
65
|
"productCode": "KENDOUIREACT",
|
|
66
|
-
"publishDate":
|
|
66
|
+
"publishDate": 1779200040,
|
|
67
67
|
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
68
68
|
}
|
|
69
69
|
},
|
|
@@ -73,5 +73,10 @@
|
|
|
73
73
|
},
|
|
74
74
|
"publishConfig": {
|
|
75
75
|
"access": "public"
|
|
76
|
+
},
|
|
77
|
+
"peerDependenciesMeta": {
|
|
78
|
+
"@progress/kendo-svg-icons": {
|
|
79
|
+
"optional": true
|
|
80
|
+
}
|
|
76
81
|
}
|
|
77
82
|
}
|