@progress/kendo-react-taskboard
Version:
KendoReact TaskBoard package
149 lines (148 loc) • 4.53 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as t from "react";
import D from "prop-types";
import { useLocalization as _ } from "@progress/kendo-react-intl";
import { taskBoardDelColumnDialogMsg as b, messages as d, taskBoardDelColumnDialogTitle as h, taskBoardDelColumnConfirmBtn as E, taskBoardDelColumnCancelBtn as w, taskBoardEditColumnButton as S, taskBoardAddCardButton as v, taskBoardDeleteColumnButton as y } from "./messages/index.mjs";
import { TASKBOARD_PLACEHOLDER as F } from "./constants.mjs";
import { TaskBoardColumnHeader as G } from "./column/ColumnHeader.mjs";
import { TaskBoardColumnBody as J } from "./column/ColumnBody.mjs";
import { TaskBoardConfirmDialog as Q } from "./TaskBoardConfirmDialog.mjs";
import { TaskBoardEditCard as U } from "./TaskBoardEditCard.mjs";
import { TaskBoardAddCard as W } from "./TaskBoardAddCard.mjs";
import { TaskBoardCardBase as X } from "./TaskBoardCardBase.mjs";
const L = (a) => {
const [p, s] = t.useState(!1), [A, m] = t.useState(!1), [u, R] = t.useState(!1), [P, x] = t.useState(), { dragTargetRef: l, column: e, onColumnChange: n, tasks: c, elementRef: I, style: C, onTaskCreate: g, onTaskEdit: f, onTaskDelete: k } = a, r = _(), M = t.useCallback(
(o) => {
const i = { ...e, title: o.value };
n.call(void 0, i, e);
},
[e, n]
), N = t.useCallback(() => {
const o = { ...e, edit: !0 };
n.call(void 0, o, e);
}, [e, n]), j = t.useCallback(() => {
const o = { ...e, edit: !1 };
n.call(void 0, o, e);
}, [e, n]), z = t.useCallback(() => {
n.call(void 0, null, e);
}, [e, n]), H = () => {
R(!u);
}, K = () => {
s(!0);
}, T = (o) => {
m(!0), x(o);
}, O = () => {
s(!1), m(!1);
}, V = t.useCallback(
(o) => {
s(!1), g.call(void 0, { ...o, status: e.status });
},
[g, e]
), q = t.useCallback(
(o, i) => {
m(!1), f.call(void 0, o, i);
},
[f]
), B = t.useCallback(
(o) => {
k.call(void 0, o);
},
[k]
);
if (e.isPlaceholder && l && l.current) {
const o = l.current ? l.current.width : 0, i = l.current ? l.current.height : 0;
return /* @__PURE__ */ t.createElement(
"div",
{
style: { width: o, height: i },
className: "k-taskboard-column k-taskboard-drag-placeholder",
[F]: !0
}
);
}
return /* @__PURE__ */ t.createElement(
a.columnComponent,
{
column: a.column,
tasks: c,
priorities: a.priorities,
style: l ? { overflow: "visible", ...C } : C,
tabIndex: a.tabIndex,
elementRef: I,
onTaskCreate: V,
onTaskEdit: q,
onTaskDelete: B,
card: a.cardComponent,
header: G,
body: J,
confirmDialog: Q,
editCardDialog: U,
addCardDialog: W,
onTitleChange: M,
onColumnEnterEdit: N,
onColumnExitEdit: j,
onColumnConfirmDelete: z,
onShowAddCardDialog: K,
onShowEditCardPane: T,
onColumnDelete: H,
onCloseDialog: O,
showAddCard: p,
showEditCard: A,
showColumnConfirmDelete: u,
editedTask: P,
confirmDialogMessage: r.toLanguageString(
b,
d[b]
),
confirmDialogTitle: r.toLanguageString(
h,
d[h]
),
confirmDialogConfirmButton: r.toLanguageString(
E,
d[E]
),
confirmDialogCancelButton: r.toLanguageString(
w,
d[w]
),
editButtonTitle: r.toLanguageString(
S,
d[S]
),
addButtonTitle: r.toLanguageString(v, d[v]),
closeButtonTitle: r.toLanguageString(
y,
d[y]
)
},
c && c.map((o) => /* @__PURE__ */ t.createElement(
X,
{
key: o.id,
tabIndex: a.tabIndex,
task: o,
disabled: !!a.column.edit,
onDeleteTask: () => B(o),
showEditPane: () => T(o),
dragTargetRef: a.dragTargetRef,
style: { borderLeftColor: o.priority.color },
cardComponent: a.cardComponent
}
))
);
};
L.propTypes = {
column: D.object.isRequired,
taskMap: D.object
};
L.displayName = "KendoReactTaskBoardColumn";
export {
L as TaskBoardColumnBase
};