@progress/kendo-react-taskboard 5.3.0-dev.202205041411

package/dist/npm/TaskBoard.js

@@ -0,0 +1,269 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var PropTypes = require("prop-types");
+var kendo_licensing_1 = require("@progress/kendo-licensing");
+var package_metadata_1 = require("./package-metadata");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
+var TaskBoardColumnBase_1 = require("./TaskBoardColumnBase");
+var TaskBoardCardBase_1 = require("./TaskBoardCardBase");
+var constants_1 = require("./constants");
+var utils_1 = require("./utils");
+var Card_1 = require("./card/Card");
+var Column_1 = require("./column/Column");
+/**
+ * Represents the [KendoReact TaskBoard component]({% slug overview_taskboard %}).
+ *
+ * Accepts properties of type [TaskBoardProps]({% slug api_taskboard_taskboardprops %}).
+ */
+exports.TaskBoard = React.forwardRef(function (props, ref) {
+    kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
+    var columnData = props.columnData, className = props.className, style = props.style, id = props.id, taskData = props.taskData, onChange = props.onChange;
+    var taskboardRef = React.useRef(null);
+    var taskboardElementRef = React.useRef(null);
+    React.useImperativeHandle(taskboardRef, function () {
+        return { props: props };
+    });
+    React.useImperativeHandle(ref, function () { return taskboardRef.current; });
+    var children = React.Children.toArray(props.children);
+    var toolbar = children.filter(function (child) { return child &&
+        child.type.displayName === 'KendoReactTaskBoardToolbar'; });
+    var elementRef = React.useRef(null);
+    var dragTargetRef = React.useRef(null);
+    var pressOffsetRef = React.useRef(null);
+    var _a = React.useState(null), taskDataState = _a[0], setTaskDataState = _a[1];
+    var _b = React.useState(null), columnDataState = _b[0], setColumnDataState = _b[1];
+    var _c = React.useState({ top: 0, left: 0 }), position = _c[0], setPosition = _c[1];
+    var dragCardCueRef = React.useRef(null);
+    var dragColumnCueRef = React.useRef(null);
+    var tasksMap = React.useMemo(function () {
+        var map = {};
+        (taskDataState || taskData).forEach(function (task) {
+            var currentStatus = task.status;
+            if (!map[currentStatus]) {
+                map[currentStatus] = [];
+            }
+            map[currentStatus].push(task);
+        });
+        return map;
+    }, [taskData, taskDataState]);
+    var handlePress = React.useCallback(function (event) {
+        var target = event.originalEvent.target;
+        if (target.closest('button,input,.k-link,.k-taskboard-preview-pane')) {
+            return;
+        }
+        var currentDragTarget = utils_1.closestTaskBoardElement(target);
+        var taskboardEl = taskboardElementRef.current;
+        if (currentDragTarget && taskboardEl) {
+            var isColumn = currentDragTarget.type === constants_1.TASKBOARD_COLUMN;
+            if (isColumn && !target.closest('.k-taskboard-column-header')) {
+                return;
+            }
+            var dragElement = currentDragTarget.element;
+            var rect = dragElement.getBoundingClientRect();
+            var parentRect = taskboardEl.getBoundingClientRect();
+            pressOffsetRef.current = {
+                x: event.clientX - rect.left + parentRect.left,
+                y: event.clientY - rect.top + parentRect.top
+            };
+            var data = isColumn ? columnData : taskData;
+            var stateSetter = isColumn ? setColumnDataState : setTaskDataState;
+            var index = data.findIndex(function (dataItem) { return String(dataItem.id) === currentDragTarget.id; });
+            var item = data[index];
+            if (index === -1 || item.edit) {
+                return;
+            }
+            var newItem = kendo_react_common_1.clone(item);
+            newItem.isPlaceholder = true;
+            var newData = data.slice();
+            newData[index] = newItem;
+            dragTargetRef.current = __assign({}, currentDragTarget, { index: index,
+                item: item, width: rect.width, height: rect.height });
+            setPosition({
+                top: event.clientY - pressOffsetRef.current.y,
+                left: event.clientX - pressOffsetRef.current.x
+            });
+            stateSetter(newData);
+        }
+    }, [columnData, taskData]);
+    var handleDrag = React.useCallback(function (event) {
+        var currentDragTarget = dragTargetRef.current;
+        var dragCueElement = (dragCardCueRef.current && dragCardCueRef.current.element) || dragColumnCueRef.current;
+        if (currentDragTarget && dragCueElement) {
+            setPosition({
+                top: event.clientY - pressOffsetRef.current.y,
+                left: event.clientX - pressOffsetRef.current.x
+            });
+            dragCueElement.style.visibility = 'hidden';
+            var targetElement = document.elementFromPoint(event.clientX, event.clientY);
+            dragCueElement.style.visibility = '';
+            if (targetElement && targetElement.getAttribute(constants_1.TASKBOARD_PLACEHOLDER)) {
+                return;
+            }
+            var dropTarget_1 = targetElement && utils_1.closestTaskBoardElement(targetElement);
+            if (dropTarget_1) {
+                var indexes = void 0;
+                var isSameType = dropTarget_1.type === currentDragTarget.type;
+                var isDragTargetColumn = currentDragTarget.type === constants_1.TASKBOARD_COLUMN;
+                var data = (isDragTargetColumn ? columnDataState : taskDataState) || [];
+                var stateSetter = isDragTargetColumn ? setColumnDataState : setTaskDataState;
+                if (isDragTargetColumn || isSameType) {
+                    indexes = utils_1.findIndexes(currentDragTarget.id, dropTarget_1.id, data);
+                    if (indexes) {
+                        var dragItem = data[indexes.dragIndex];
+                        var dropItem = data[indexes.dropIndex];
+                        var newDragItem = kendo_react_common_1.clone(dragItem);
+                        if (!isDragTargetColumn) {
+                            newDragItem.status = dropItem.status;
+                        }
+                        var newData = data.slice();
+                        newData.splice(indexes.dragIndex, 1);
+                        newData.splice(indexes.dropIndex, 0, newDragItem);
+                        currentDragTarget.index = indexes.dropIndex;
+                        stateSetter(newData);
+                    }
+                }
+                else {
+                    var taskIndex = data.findIndex(function (item) { return String(item.id) === currentDragTarget.id; });
+                    var columnIndex = columnData.findIndex(function (item) { return String(item.id) === dropTarget_1.id; });
+                    if (taskIndex !== -1 && columnIndex !== -1) {
+                        var task = data[taskIndex];
+                        var column = columnData[columnIndex];
+                        var columnStatus = column.status;
+                        if (tasksMap[columnStatus]) {
+                            return;
+                        }
+                        task.status = columnStatus;
+                        var newData = data.slice();
+                        newData.splice(taskIndex, 1);
+                        newData.push(task);
+                        currentDragTarget.index = newData.length - 1;
+                        stateSetter(newData);
+                    }
+                }
+            }
+        }
+    }, [columnDataState, taskDataState, columnData, tasksMap]);
+    var handleRelease = React.useCallback(function () {
+        var currentDragTarget = dragTargetRef.current;
+        if (onChange && currentDragTarget) {
+            var isDragTargetColumn = currentDragTarget.type === constants_1.TASKBOARD_COLUMN;
+            var data = (isDragTargetColumn ? columnDataState : taskDataState) || [];
+            var item = data[currentDragTarget.index];
+            delete item.isPlaceholder;
+            var event_1 = {
+                data: data,
+                type: currentDragTarget.type,
+                previousItem: currentDragTarget.item,
+                item: item
+            };
+            onChange.call(undefined, event_1);
+        }
+        dragTargetRef.current = null;
+        pressOffsetRef.current = null;
+        setTaskDataState(null);
+        setColumnDataState(null);
+        setPosition({ top: 0, left: 0 });
+    }, [columnDataState, taskDataState, onChange]);
+    kendo_react_common_1.useDraggable(elementRef, {
+        onDragStart: handlePress,
+        onDrag: handleDrag,
+        onDragEnd: handleRelease
+    });
+    var dragTarget = dragTargetRef.current;
+    var onTaskCreate = React.useCallback(function (newTask) {
+        var tasks = taskData.concat([newTask]);
+        var event = {
+            data: tasks,
+            type: constants_1.TASKBOARD_TASK,
+            previousItem: null,
+            item: newTask
+        };
+        onChange.call(undefined, event);
+    }, [onChange, taskData]);
+    var onTaskEdit = React.useCallback(function (task, prevTask) {
+        var tasks = taskData.slice();
+        var index = taskData.indexOf(prevTask);
+        if (index !== -1) {
+            tasks.splice(index, 1, task);
+        }
+        var event = {
+            data: tasks,
+            type: constants_1.TASKBOARD_TASK,
+            previousItem: prevTask,
+            item: task
+        };
+        onChange.call(undefined, event);
+    }, [onChange, taskData]);
+    var onTaskDelete = React.useCallback(function (task) {
+        var tasks = taskData.filter(function (t) { return t !== task; });
+        var event = {
+            data: tasks,
+            type: constants_1.TASKBOARD_TASK,
+            previousItem: task,
+            item: null
+        };
+        onChange.call(undefined, event);
+    }, [onChange, taskData]);
+    var onColumnChange = React.useCallback(function (newColumn, prevColumn) {
+        var data = columnData.slice();
+        var index = data.indexOf(prevColumn);
+        if (index !== -1) {
+            if (newColumn) {
+                data.splice(index, 1, newColumn);
+            }
+            else {
+                data.splice(index, 1);
+            }
+        }
+        var event = {
+            data: data,
+            type: constants_1.TASKBOARD_COLUMN,
+            previousItem: prevColumn,
+            item: newColumn
+        };
+        onChange.call(undefined, event);
+    }, [onChange, columnData]);
+    return (React.createElement("div", { id: id, style: style, ref: taskboardElementRef, className: kendo_react_common_1.classNames('k-widget k-taskboard', className) },
+        toolbar,
+        React.createElement("div", { className: 'k-taskboard-content', style: dragTarget ? { userSelect: 'none' } : undefined },
+            React.createElement("div", { className: 'k-taskboard-columns-container', ref: elementRef }, (columnDataState || columnData).map(function (column) { return (React.createElement(TaskBoardColumnBase_1.TaskBoardColumnBase, { key: column.id, tabIndex: props.tabIndex, column: column, tasks: tasksMap[column.status] || [], dragTargetRef: dragTargetRef, onTaskCreate: onTaskCreate, onTaskEdit: onTaskEdit, onTaskDelete: onTaskDelete, onColumnChange: onColumnChange, columnComponent: props.column || Column_1.TaskBoardColumn, cardComponent: props.card || Card_1.TaskBoardCard, priorities: props.priorities })); }))),
+        dragTarget && dragTarget.type === constants_1.TASKBOARD_TASK && (React.createElement(TaskBoardCardBase_1.TaskBoardCardBase, { elementRef: dragCardCueRef, style: {
+                position: 'absolute',
+                width: dragTarget.width,
+                height: dragTarget.height,
+                top: position.top,
+                left: position.left,
+                zIndex: 10,
+                borderLeftColor: dragTarget.item.priority ? dragTarget.item.priority.color : dragTarget.item.color
+            }, task: dragTarget.item, dragTargetRef: dragTargetRef, cardComponent: props.card || Card_1.TaskBoardCard, onDeleteTask: kendo_react_common_1.noop, showEditPane: kendo_react_common_1.noop })),
+        dragTarget && dragTarget.type === constants_1.TASKBOARD_COLUMN && (React.createElement(TaskBoardColumnBase_1.TaskBoardColumnBase, { elementRef: dragColumnCueRef, style: {
+                position: 'absolute',
+                width: dragTarget.width,
+                height: dragTarget.height,
+                top: position.top,
+                left: position.left,
+                zIndex: 10
+            }, cardComponent: props.card || Card_1.TaskBoardCard, columnComponent: props.column || Column_1.TaskBoardColumn, column: dragTarget.item, tasks: tasksMap[dragTarget.item.status], priorities: props.priorities, dragTargetRef: dragTargetRef, onTaskDelete: onTaskDelete, onColumnChange: onColumnChange, onTaskEdit: onTaskEdit, onTaskCreate: onTaskCreate }))));
+});
+var defaultProps = {
+    columnData: [],
+    taskData: []
+};
+exports.TaskBoard.propTypes = {
+    columnData: PropTypes.array.isRequired,
+    taskData: PropTypes.array.isRequired
+};
+exports.TaskBoard.defaultProps = defaultProps;
+exports.TaskBoard.displayName = 'KendoReactTaskBoard';

package/dist/npm/TaskBoardAddCard.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { TaskBoardTaskEditPaneProps } from './TaskBoardTaskEditPane';
+import { TaskBoardPriority, TaskBoardTaskModel } from './TaskBoard';
+/**
+ * Represents the props of the TaskBoardAddCard component
+ */
+export interface TaskBoardAddCardProps {
+    /**
+     * Represent the priorities of the task board card.
+     */
+    priorities: TaskBoardPriority[];
+    /**
+     * Triggered on `onClose` event of the TaskBoardAddCard.
+     */
+    onClose: () => void;
+    /**
+     * Triggered on `onSave` event of the TaskBoardAddCard.
+     */
+    onSave: (task: TaskBoardTaskModel, prevTask: TaskBoardTaskModel | undefined) => void;
+    /**
+     * Specifies the TaskBoardTaskEditPane component.
+     */
+    editPane: React.ComponentType<TaskBoardTaskEditPaneProps>;
+}
+/**
+ * Represents the TaskBoardAddCard component.
+ */
+export declare const TaskBoardAddCard: {
+    (props: TaskBoardAddCardProps): JSX.Element;
+    defaultProps: {};
+    displayName: string;
+};

package/dist/npm/TaskBoardAddCard.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var kendo_react_intl_1 = require("@progress/kendo-react-intl");
+var messages_1 = require("./messages");
+var taskEditing_1 = require("./hooks/taskEditing");
+/**
+ * Represents the TaskBoardAddCard component.
+ */
+exports.TaskBoardAddCard = function (props) {
+    var _a = taskEditing_1.useTaskEditing(props), onTitleChange = _a.onTitleChange, title = _a.title, onDescriptionChange = _a.onDescriptionChange, description = _a.description, onPriorityChange = _a.onPriorityChange, priority = _a.priority, onSave = _a.onSave;
+    var localization = kendo_react_intl_1.useLocalization();
+    return (React.createElement(props.editPane, { header: localization.toLanguageString(messages_1.taskBoardAddCardPaneTitle, messages_1.messages[messages_1.taskBoardAddCardPaneTitle]), titleInputTitle: localization.toLanguageString(messages_1.taskBoardAddCardTitleLabel, messages_1.messages[messages_1.taskBoardAddCardTitleLabel]), descriptionInputTitle: localization.toLanguageString(messages_1.taskBoardAddCardDescriptionLabel, messages_1.messages[messages_1.taskBoardAddCardDescriptionLabel]), priorityDropDownTitle: localization.toLanguageString(messages_1.taskBoardAddCardPriorityLabel, messages_1.messages[messages_1.taskBoardAddCardPriorityLabel]), titleLabel: localization.toLanguageString(messages_1.taskBoardEditPaneTitleLabel, messages_1.messages[messages_1.taskBoardEditPaneTitleLabel]), descriptionLabel: localization.toLanguageString(messages_1.taskBoardEditPaneDescriptionLabel, messages_1.messages[messages_1.taskBoardEditPaneDescriptionLabel]), priorityLabel: localization.toLanguageString(messages_1.taskBoardEditPanePriorityLabel, messages_1.messages[messages_1.taskBoardEditPanePriorityLabel]), saveButton: localization.toLanguageString(messages_1.taskBoardAddCardCreateButton, messages_1.messages[messages_1.taskBoardAddCardCreateButton]), cancelButton: localization.toLanguageString(messages_1.taskBoardEditPaneCancelBtn, messages_1.messages[messages_1.taskBoardEditPaneCancelBtn]), priorities: props.priorities, onSave: onSave, onClose: props.onClose, onTitleChange: onTitleChange, title: title, onDescriptionChange: onDescriptionChange, description: description, onPriorityChange: onPriorityChange, priority: priority }));
+};
+var defaultProps = {};
+exports.TaskBoardAddCard.propTypes = {};
+exports.TaskBoardAddCard.defaultProps = defaultProps;
+exports.TaskBoardAddCard.displayName = 'KendoReactTaskBoardAddCard';

package/dist/npm/TaskBoardCardBase.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { CardHandle } from '@progress/kendo-react-layout';
+import { TaskBoardCardProps } from './card/Card';
+import { TaskBoardTaskModel } from './TaskBoard';
+/**
+ * Represents the props of the TaskBoardCardBase component
+ */
+export interface TaskBoardCardBaseProps {
+    /**
+     * The task of the TaskBoardCardBase.
+     */
+    task: TaskBoardTaskModel;
+    /**
+     * The styles for the TaskBoardCardBase.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Determines the disabled mode.
+     */
+    disabled?: boolean;
+    /**
+     * Specifies the `tabIndex` that will be added to the TaskBoard Column and Card elements.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the CardHandle reference.
+     */
+    elementRef?: React.RefObject<CardHandle>;
+    /**
+     * Specifies the width and height of the drag target reference.
+     */
+    dragTargetRef?: React.RefObject<{
+        width: number;
+        height: number;
+    }>;
+    /**
+     * Fires when a task is deleted.
+     */
+    onDeleteTask: () => void;
+    /**
+     * Represents the `showEditPane` event.
+     */
+    showEditPane: (task: TaskBoardTaskModel) => void;
+    /**
+     * Represents the TaskBoardCard component.
+     */
+    cardComponent: React.ComponentType<TaskBoardCardProps>;
+}
+/**
+ * Represents the TaskBoardCardBase component.
+ */
+export declare const TaskBoardCardBase: {
+    (props: TaskBoardCardBaseProps): JSX.Element;
+    defaultProps: {};
+    displayName: string;
+};

package/dist/npm/TaskBoardCardBase.js

@@ -0,0 +1,89 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var PropTypes = require("prop-types");
+var kendo_react_layout_1 = require("@progress/kendo-react-layout");
+var constants_1 = require("./constants");
+var kendo_react_intl_1 = require("@progress/kendo-react-intl");
+var messages_1 = require("./messages");
+var CardHeader_1 = require("./card/CardHeader");
+var CardBody_1 = require("./card/CardBody");
+var TaskBoardConfirmDialog_1 = require("./TaskBoardConfirmDialog");
+var PreviewDialog_1 = require("./card/PreviewDialog");
+/**
+ * Represents the TaskBoardCardBase component.
+ */
+exports.TaskBoardCardBase = function (props) {
+    var _a;
+    var onDeleteTask = props.onDeleteTask, showEditPane = props.showEditPane, task = props.task, style = props.style, dragTargetRef = props.dragTargetRef, elementRef = props.elementRef;
+    var _b = React.useState(false), optionMenuVisible = _b[0], setOptionMenuVisible = _b[1];
+    var _c = React.useState(false), confirmTaskDeleteVisible = _c[0], setConfirmTaskDeleteVisible = _c[1];
+    var _d = React.useState(false), showTaskPreviewPane = _d[0], setShowTaskPreviewPane = _d[1];
+    var popupRef = React.useRef(null);
+    var localization = kendo_react_intl_1.useLocalization();
+    var optionButtons = [
+        {
+            text: localization.toLanguageString(messages_1.taskBoardEditCardButton, messages_1.messages[messages_1.taskBoardEditCardButton]),
+            icon: 'edit',
+            data: function () {
+                showEditPane(task);
+                setOptionMenuVisible(!optionMenuVisible);
+            }
+        },
+        {
+            text: localization.toLanguageString(messages_1.taskBoardDeleteCardButton, messages_1.messages[messages_1.taskBoardDeleteCardButton]),
+            icon: 'delete',
+            data: function () {
+                setConfirmTaskDeleteVisible(!confirmTaskDeleteVisible);
+                setOptionMenuVisible(!optionMenuVisible);
+            }
+        }
+    ];
+    var handleSelect = function (e) {
+        e.item.data();
+    };
+    var onShowMenu = function () {
+        setOptionMenuVisible(true);
+    };
+    var onHideMenu = function () {
+        setOptionMenuVisible(false);
+    };
+    var onMenuButtonBlur = function (event) {
+        var popup = popupRef.current && popupRef.current.element;
+        if (popup && popup.contains(event.relatedTarget)) {
+            return;
+        }
+        setOptionMenuVisible(false);
+    };
+    var closeConfirmDialog = function () {
+        setConfirmTaskDeleteVisible(!confirmTaskDeleteVisible);
+    };
+    var onShowTaskPreviewPane = function () {
+        setShowTaskPreviewPane(!showTaskPreviewPane);
+    };
+    var onTaskEdit = function () {
+        showEditPane(task);
+        onShowTaskPreviewPane();
+    };
+    if (task.isPlaceholder && dragTargetRef && dragTargetRef.current) {
+        return (React.createElement("div", __assign({ style: { width: dragTargetRef.current.width, height: dragTargetRef.current.height }, className: 'k-taskboard-drag-placeholder' }, (_a = {}, _a[constants_1.TASKBOARD_PLACEHOLDER] = true, _a))));
+    }
+    return (React.createElement(props.cardComponent, { task: task, style: style, tabIndex: props.tabIndex, disabled: props.disabled, elementRef: elementRef, showMenu: optionMenuVisible, showDeleteConfirm: confirmTaskDeleteVisible, showTaskPreviewPane: showTaskPreviewPane, menuItems: optionButtons, popupRef: popupRef, confirmDialogMessage: localization.toLanguageString(messages_1.taskBoardDeleteTaskDialogMessage, messages_1.messages[messages_1.taskBoardDeleteTaskDialogMessage]), confirmDialogTitle: localization.toLanguageString(messages_1.taskBoardDeleteTaskDialogTitle, messages_1.messages[messages_1.taskBoardDeleteTaskDialogTitle]), confirmDialogConfirmButton: localization.toLanguageString(messages_1.taskBoardDeleteTaskConfirmButton, messages_1.messages[messages_1.taskBoardDeleteTaskConfirmButton]), confirmDialogCancelButton: localization.toLanguageString(messages_1.taskBoardDeleteTaskCancelButton, messages_1.messages[messages_1.taskBoardDeleteTaskCancelButton]), previewDialogPriorityLabel: localization.toLanguageString(messages_1.taskBoardPreviewPanePriorityLabel, messages_1.messages[messages_1.taskBoardPreviewPanePriorityLabel]), previewDialogDelete: localization.toLanguageString(messages_1.taskBoardPreviewPaneDeleteBtn, messages_1.messages[messages_1.taskBoardPreviewPaneDeleteBtn]), previewDialogEdit: localization.toLanguageString(messages_1.taskBoardPreviewPaneEditBtn, messages_1.messages[messages_1.taskBoardPreviewPaneEditBtn]), onShowPreviewPane: onShowTaskPreviewPane, onMenuItemSelect: handleSelect, onShowMenu: onShowMenu, onHideMenu: onHideMenu, onMenuButtonBlur: onMenuButtonBlur, onTaskDelete: onDeleteTask, onTaskEdit: onTaskEdit, onCloseConfirmDialog: closeConfirmDialog, card: kendo_react_layout_1.Card, cardHeader: CardHeader_1.TaskBoardCardHeader, cardBody: CardBody_1.TaskBoardCardBody, confirmDialog: TaskBoardConfirmDialog_1.TaskBoardConfirmDialog, previewDialog: PreviewDialog_1.TaskBoardPreviewDialog }));
+};
+var defaultProps = {};
+exports.TaskBoardCardBase.propTypes = {
+    task: PropTypes.object.isRequired
+};
+exports.TaskBoardCardBase.defaultProps = defaultProps;
+exports.TaskBoardCardBase.displayName = 'KendoReactTaskBoardCardBase';

package/dist/npm/TaskBoardColumnBase.d.ts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { TaskBoardCardProps } from './card/Card';
+import { TaskBoardColumnProps } from './column/Column';
+import { TaskBoardColumnModel, TaskBoardPriority, TaskBoardTaskModel } from './TaskBoard';
+/**
+ * Represents the props of the TaskBoardColumnBase component
+ */
+export interface TaskBoardColumnBaseProps {
+    /**
+     * The rendered column.
+     */
+    column: TaskBoardColumnModel;
+    /**
+     * The rendered tasks.
+     */
+    tasks: TaskBoardTaskModel[];
+    /**
+     * The rendered priorities.
+     */
+    priorities: TaskBoardPriority[];
+    /**
+     * The applied styles.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Specifies the `tabIndex` that will be added to the TaskBoard Column and Card elements.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the element reference.
+     */
+    elementRef?: React.RefObject<HTMLDivElement>;
+    /**
+     * Specifies the width and height of the drag target reference.
+     */
+    dragTargetRef?: React.RefObject<{
+        width: number;
+        height: number;
+    }>;
+    /**
+     * Fires when a task is created.
+     */
+    onTaskCreate: (task: TaskBoardTaskModel) => void;
+    /**
+     * Fires when a task is edited.
+     */
+    onTaskEdit: (task: TaskBoardTaskModel, prevTask: TaskBoardTaskModel) => void;
+    /**
+     * Fires when a task is deleted.
+     */
+    onTaskDelete: (task: TaskBoardTaskModel) => void;
+    /**
+     * Fires when a column is changed.
+     */
+    onColumnChange: (column: TaskBoardColumnModel, prevColumn: TaskBoardColumnModel) => void;
+    /**
+     * Determines the TaskBoardCard component.
+     */
+    cardComponent: React.ComponentType<TaskBoardCardProps>;
+    /**
+     * Determines the TaskBoardColumn component.
+     */
+    columnComponent: React.ComponentType<TaskBoardColumnProps>;
+}
+/**
+ * Represents the TaskBoardColumnBase component.
+ */
+export declare const TaskBoardColumnBase: {
+    (props: TaskBoardColumnBaseProps): JSX.Element;
+    defaultProps: {};
+    displayName: string;
+};

package/dist/npm/TaskBoardColumnBase.js

@@ -0,0 +1,92 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var PropTypes = require("prop-types");
+var kendo_react_intl_1 = require("@progress/kendo-react-intl");
+var messages_1 = require("./messages");
+var constants_1 = require("./constants");
+var ColumnHeader_1 = require("./column/ColumnHeader");
+var ColumnBody_1 = require("./column/ColumnBody");
+var TaskBoardConfirmDialog_1 = require("./TaskBoardConfirmDialog");
+var TaskBoardEditCard_1 = require("./TaskBoardEditCard");
+var TaskBoardAddCard_1 = require("./TaskBoardAddCard");
+var TaskBoardCardBase_1 = require("./TaskBoardCardBase");
+/**
+ * Represents the TaskBoardColumnBase component.
+ */
+exports.TaskBoardColumnBase = function (props) {
+    var _a;
+    var _b = React.useState(false), addCard = _b[0], setAddCard = _b[1];
+    var _c = React.useState(false), editCardPane = _c[0], setEditCardPane = _c[1];
+    var _d = React.useState(false), confirmColumnDeleteVisible = _d[0], setConfirmColumnDeleteVisible = _d[1];
+    var _e = React.useState(), taskToEdit = _e[0], setTaskToEdit = _e[1];
+    var dragTargetRef = props.dragTargetRef, column = props.column, onColumnChange = props.onColumnChange, tasks = props.tasks, elementRef = props.elementRef, style = props.style, onTaskCreate = props.onTaskCreate, onTaskEdit = props.onTaskEdit, onTaskDelete = props.onTaskDelete;
+    var localization = kendo_react_intl_1.useLocalization();
+    var onTitleChange = React.useCallback(function (e) {
+        var newColumn = __assign({}, column, { title: e.value });
+        onColumnChange.call(undefined, newColumn, column);
+    }, [column, onColumnChange]);
+    var onColumnEnterEdit = React.useCallback(function () {
+        var newColumn = __assign({}, column, { edit: true });
+        onColumnChange.call(undefined, newColumn, column);
+    }, [column, onColumnChange]);
+    var onColumnExitEdit = React.useCallback(function () {
+        var newColumn = __assign({}, column, { edit: false });
+        onColumnChange.call(undefined, newColumn, column);
+    }, [column, onColumnChange]);
+    var onConfirmColumnDelete = React.useCallback(function () {
+        var newColumn = null;
+        onColumnChange.call(undefined, newColumn, column);
+    }, [column, onColumnChange]);
+    var onColumnDelete = function () {
+        setConfirmColumnDeleteVisible(!confirmColumnDeleteVisible);
+    };
+    var showAddCardDialog = function () {
+        setAddCard(true);
+    };
+    var showEditCardPane = function (task) {
+        setEditCardPane(true);
+        setTaskToEdit(task);
+    };
+    var hideCloseModal = function () {
+        setAddCard(false);
+        setEditCardPane(false);
+    };
+    var onNewTask = React.useCallback(function (task) {
+        setAddCard(false);
+        onTaskCreate.call(undefined, __assign({}, task, { status: column.status }));
+    }, [onTaskCreate, column]);
+    var editTask = React.useCallback(function (edited, prevTask) {
+        setEditCardPane(false);
+        onTaskEdit.call(undefined, edited, prevTask);
+    }, [onTaskEdit]);
+    var deleteTask = React.useCallback(function (task) {
+        onTaskDelete.call(undefined, task);
+    }, [onTaskDelete]);
+    if (column.isPlaceholder && dragTargetRef && dragTargetRef.current) {
+        var width = dragTargetRef.current ? dragTargetRef.current.width : 0;
+        var height = dragTargetRef.current ? dragTargetRef.current.height : 0;
+        return (React.createElement("div", __assign({ style: { width: width, height: height }, className: 'k-taskboard-column k-taskboard-drag-placeholder' }, (_a = {}, _a[constants_1.TASKBOARD_PLACEHOLDER] = true, _a))));
+    }
+    return (React.createElement(props.columnComponent, { column: props.column, tasks: tasks, priorities: props.priorities, style: Boolean(dragTargetRef) ? __assign({ overflow: 'visible' }, style) : style, tabIndex: props.tabIndex, elementRef: elementRef, dragTargetRef: dragTargetRef, onTaskCreate: onNewTask, onTaskEdit: editTask, onTaskDelete: deleteTask, card: props.cardComponent, header: ColumnHeader_1.TaskBoardColumnHeader, body: ColumnBody_1.TaskBoardColumnBody, confirmDialog: TaskBoardConfirmDialog_1.TaskBoardConfirmDialog, editCardDialog: TaskBoardEditCard_1.TaskBoardEditCard, addCardDialog: TaskBoardAddCard_1.TaskBoardAddCard, onTitleChange: onTitleChange, onColumnEnterEdit: onColumnEnterEdit, onColumnExitEdit: onColumnExitEdit, onColumnConfirmDelete: onConfirmColumnDelete, onShowAddCardDialog: showAddCardDialog, onShowEditCardPane: showEditCardPane, onColumnDelete: onColumnDelete, onCloseDialog: hideCloseModal, showAddCard: addCard, showEditCard: editCardPane, showColumnConfirmDelete: confirmColumnDeleteVisible, editedTask: taskToEdit, confirmDialogMessage: localization.toLanguageString(messages_1.taskBoardDelColumnDialogMsg, messages_1.messages[messages_1.taskBoardDelColumnDialogMsg]), confirmDialogTitle: localization.toLanguageString(messages_1.taskBoardDelColumnDialogTitle, messages_1.messages[messages_1.taskBoardDelColumnDialogTitle]), confirmDialogConfirmButton: localization.toLanguageString(messages_1.taskBoardDelColumnConfirmBtn, messages_1.messages[messages_1.taskBoardDelColumnConfirmBtn]), confirmDialogCancelButton: localization.toLanguageString(messages_1.taskBoardDelColumnCancelBtn, messages_1.messages[messages_1.taskBoardDelColumnCancelBtn]), editButtonTitle: localization.toLanguageString(messages_1.taskBoardEditColumnButton, messages_1.messages[messages_1.taskBoardEditColumnButton]), addButtonTitle: localization.toLanguageString(messages_1.taskBoardAddCardButton, messages_1.messages[messages_1.taskBoardAddCardButton]), closeButtonTitle: localization.toLanguageString(messages_1.taskBoardDeleteColumnButton, messages_1.messages[messages_1.taskBoardDeleteColumnButton]) }, tasks && tasks.map(function (task) {
+        return (React.createElement(TaskBoardCardBase_1.TaskBoardCardBase, { key: task.id, tabIndex: props.tabIndex, task: task, disabled: Boolean(props.column.edit), onDeleteTask: function () { return deleteTask(task); }, showEditPane: function () { return showEditCardPane(task); }, dragTargetRef: props.dragTargetRef, style: { borderLeftColor: task.priority.color }, cardComponent: props.cardComponent }));
+    })));
+};
+var defaultProps = {};
+exports.TaskBoardColumnBase.propTypes = {
+    column: PropTypes.object.isRequired,
+    taskMap: PropTypes.object
+};
+exports.TaskBoardColumnBase.defaultProps = defaultProps;
+exports.TaskBoardColumnBase.displayName = 'KendoReactTaskBoardColumn';

package/dist/npm/TaskBoardConfirmDialog.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+/**
+ * Represents the props of the TaskBoardConfirmDialog component
+ */
+export interface TaskBoardConfirmDialogProps {
+    /**
+     * The dialog message.
+     */
+    dialogMessage: React.ReactNode;
+    /**
+     * The dialog title.
+     */
+    dialogTitle: string;
+    /**
+     * The dialog confirm button.
+     */
+    dialogConfirmButton: React.ReactNode;
+    /**
+     * The dialog cancel button.
+     */
+    dialogCancelButton: React.ReactNode;
+    /**
+     * Fires when the dialog is closed.
+     */
+    onClose: () => void;
+    /**
+     * Fires when the dialog is confirmed.
+     */
+    onConfirm: () => void;
+}
+/**
+ * Represents the TaskBoardConfirmDialog component.
+ */
+export declare const TaskBoardConfirmDialog: {
+    (props: TaskBoardConfirmDialogProps): JSX.Element;
+    displayName: string;
+};