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

package/dist/es/card/PreviewDialog.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { TaskBoardPriority } from '../TaskBoard';
+/**
+ * Represents the props of the TaskBoardPreviewDialog component.
+ */
+export interface TaskBoardPreviewDialogProps {
+    /**
+     * The rendered title.
+     */
+    title: React.ReactNode;
+    /**
+     * The rendered description.
+     */
+    description: React.ReactNode;
+    /**
+     * Represents the priority label of the TaskBoardPreviewDialog.
+     */
+    priorityLabel: React.ReactNode;
+    /**
+     * Determines the delete node.
+     */
+    delete: React.ReactNode;
+    /**
+     * Determines the edit node.
+     */
+    edit: React.ReactNode;
+    /**
+     * Represents the priority of the task board.
+     */
+    priority: TaskBoardPriority;
+    /**
+     * Fires when task preview pane is shown.
+     */
+    onShowTaskPreviewPane: () => void;
+    /**
+     * Fires when task is deleted.
+     */
+    onDeleteTask: () => void;
+    /**
+     * Fires when task is edited.
+     */
+    onTaskEdit: () => void;
+}
+/**
+ * Represents the TaskBoardPreviewDialog component.
+ */
+export declare const TaskBoardPreviewDialog: {
+    (props: TaskBoardPreviewDialogProps): JSX.Element;
+    displayName: string;
+};

package/dist/es/card/PreviewDialog.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Button } from '@progress/kendo-react-buttons';
+/**
+ * Represents the TaskBoardPreviewDialog component.
+ */
+export var TaskBoardPreviewDialog = function (props) {
+    return (React.createElement("div", { className: "k-taskboard-pane k-taskboard-preview-pane" },
+        React.createElement("div", { className: 'k-taskboard-pane-header' },
+            React.createElement("div", { className: 'k-taskboard-pane-header-text' }, props.title),
+            React.createElement("span", { className: "k-spacer" }),
+            React.createElement("div", { className: "k-taskboard-pane-header-actions" },
+                React.createElement(Button, { icon: 'close', fillMode: "flat", onClick: props.onShowTaskPreviewPane }))),
+        React.createElement("div", { className: "k-taskboard-pane-content" },
+            React.createElement("p", null, props.description),
+            React.createElement("p", null,
+                props.priorityLabel,
+                "\u00A0",
+                React.createElement("span", { style: { backgroundColor: props.priority.color } }, "\u00A0"),
+                "\u00A0",
+                props.priority.priority)),
+        React.createElement("div", { className: "k-taskboard-pane-actions k-actions k-hstack k-justify-content-end" },
+            React.createElement(Button, { onClick: props.onDeleteTask }, props.delete),
+            React.createElement(Button, { themeColor: 'primary', onClick: props.onTaskEdit }, props.edit))));
+};
+TaskBoardPreviewDialog.displayName = 'KendoReactTaskBoardPreviewDialog';

package/dist/es/column/Column.d.ts

@@ -0,0 +1,168 @@
+import * as React from 'react';
+import { InputChangeEvent } from '@progress/kendo-react-inputs';
+import { TaskBoardAddCardProps } from './../TaskBoardAddCard';
+import { TaskBoardEditCardProps } from './../TaskBoardEditCard';
+import { TaskBoardConfirmDialogProps } from './../TaskBoardConfirmDialog';
+import { TaskBoardCardProps } from './../card/Card';
+import { TaskBoardColumnHeaderProps } from './ColumnHeader';
+import { TaskBoardColumnBodyProps } from './ColumnBody';
+import { TaskBoardColumnModel, TaskBoardPriority, TaskBoardTaskModel } from '../TaskBoard';
+/**
+ * Represents the props of the TaskBoardColumn component
+ */
+export interface TaskBoardColumnProps {
+    /**
+     * The column of the TaskBoard.
+     */
+    column: TaskBoardColumnModel;
+    /**
+     * The tasks of the TaskBoard.
+     */
+    tasks: TaskBoardTaskModel[];
+    /**
+     * The priorities that are set in the TaskBoard.
+     */
+    priorities: TaskBoardPriority[];
+    /**
+     * The styles for the TaskBoard.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Specifies the `tabIndex` that will be added to the TaskBoard Column element.
+     */
+    tabIndex?: number;
+    /**
+     * Represents the reference of the element.
+     */
+    elementRef?: React.RefObject<HTMLDivElement>;
+    /**
+     * Represents the reference of the drag target.
+     */
+    dragTargetRef?: React.RefObject<{
+        width: number;
+        height: number;
+    }>;
+    /**
+     * Determines the visibility of the add card.
+     */
+    showAddCard: boolean;
+    /**
+     * Determines the visibility of the edit card.
+     */
+    showEditCard: boolean;
+    /**
+     * Determines the visibility of the column confirm/delete.
+     */
+    showColumnConfirmDelete: boolean;
+    /**
+     * Specifies the edited task.
+     */
+    editedTask?: TaskBoardTaskModel;
+    /**
+     * Specifies the confirm dialog message
+     */
+    confirmDialogMessage: React.ReactNode;
+    /**
+     * Specifies the confirm dialog confirm button node.
+     */
+    confirmDialogConfirmButton: React.ReactNode;
+    /**
+     * Specifies the cancel dialog confirm button node.
+     */
+    confirmDialogCancelButton: React.ReactNode;
+    /**
+     * Specifies the confirm dialog title.
+     */
+    confirmDialogTitle: string;
+    /**
+     * Specifies the edit button title.
+     */
+    editButtonTitle: string;
+    /**
+     * Specifies the add button title.
+     */
+    addButtonTitle: string;
+    /**
+     * Specifies the close button title.
+     */
+    closeButtonTitle: string;
+    /**
+     * Determines the children nodes.
+     */
+    children: React.ReactNode;
+    /**
+     * Fire on task creation.
+     */
+    onTaskCreate: (task: TaskBoardTaskModel) => void;
+    /**
+     * Fires when task is edited.
+     */
+    onTaskEdit: (task: TaskBoardTaskModel, prevTask: TaskBoardTaskModel) => void;
+    /**
+     * Fires when task is deleted.
+     */
+    onTaskDelete: (task: TaskBoardTaskModel) => void;
+    /**
+     * Fires when title is changed.
+     */
+    onTitleChange?: (event: InputChangeEvent) => void;
+    /**
+     * Fires when column enters edit.
+     */
+    onColumnEnterEdit: () => void;
+    /**
+     * Fires when column exits edit.
+     */
+    onColumnExitEdit: () => void;
+    /**
+     * Fires on confirmation of column deletion.
+     */
+    onColumnConfirmDelete: () => void;
+    /**
+     * Fires when the add card dialog is shown.
+     */
+    onShowAddCardDialog: () => void;
+    /**
+     * Fires when the edit card pane is shown.
+     */
+    onShowEditCardPane: (task: TaskBoardTaskModel) => void;
+    /**
+     * Fires on column deletion.
+     */
+    onColumnDelete: () => void;
+    /**
+     * Fires when the dialog is closed.
+     */
+    onCloseDialog: () => void;
+    /**
+     * Represents the TaskBoardCard component.
+     */
+    card: React.ComponentType<TaskBoardCardProps>;
+    /**
+     * Represents the TaskBoardColumnHeader component.
+     */
+    header: React.ComponentType<TaskBoardColumnHeaderProps>;
+    /**
+     * Represents the TaskBoardColumnBody component.
+     */
+    body: React.ComponentType<TaskBoardColumnBodyProps>;
+    /**
+     * Represents the TaskBoardConfirmDialog component.
+     */
+    confirmDialog: React.ComponentType<TaskBoardConfirmDialogProps>;
+    /**
+     * Represents the TaskBoardEditCard component.
+     */
+    editCardDialog: React.ComponentType<TaskBoardEditCardProps>;
+    /**
+     * Represents the TaskBoardAddCard component.
+     */
+    addCardDialog: React.ComponentType<TaskBoardAddCardProps>;
+}
+/**
+ * Represents the TaskBoardColumn component.
+ */
+export declare const TaskBoardColumn: {
+    (props: TaskBoardColumnProps): JSX.Element;
+    displayName: string;
+};

package/dist/es/column/Column.js

@@ -0,0 +1,34 @@
+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);
+};
+import * as React from 'react';
+import { classNames } from '@progress/kendo-react-common';
+import { TASKBOARD_COLUMN, TASKBOARD_ITEM_ID, TASKBOARD_ITEM_TYPE } from './../constants';
+import { TaskBoardTaskEditPane } from '../TaskBoardTaskEditPane';
+/**
+ * Represents the TaskBoardColumn component.
+ */
+export var TaskBoardColumn = function (props) {
+    var _a;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", __assign({ ref: props.elementRef, style: props.style, className: classNames('k-taskboard-column', {
+                'k-taskboard-column-edit': props.column.edit
+            }), tabIndex: props.tabIndex }, (_a = {},
+            _a[TASKBOARD_ITEM_TYPE] = TASKBOARD_COLUMN,
+            _a[TASKBOARD_ITEM_ID] = props.column.id,
+            _a)),
+            React.createElement(props.header, { column: props.column, tasks: props.tasks, onTitleChange: props.onTitleChange, onColumnExitEdit: props.onColumnExitEdit, editButtonTitle: props.editButtonTitle, onColumnEnterEdit: props.onColumnEnterEdit, addButtonTitle: props.addButtonTitle, onShowAddCardDialog: props.onShowAddCardDialog, closeButtonTitle: props.closeButtonTitle, onColumnDelete: props.onColumnDelete }),
+            React.createElement(props.body, { column: props.column, tasks: props.tasks, card: props.card, onTaskDelete: props.onTaskDelete, onShowEditCardPane: props.onShowEditCardPane, dragTargetRef: props.dragTargetRef }, props.children)),
+        props.showAddCard && (React.createElement(props.addCardDialog, { onClose: props.onCloseDialog, onSave: props.onTaskCreate, priorities: props.priorities, editPane: TaskBoardTaskEditPane })),
+        props.showEditCard && props.editedTask && (React.createElement(props.editCardDialog, { onClose: props.onCloseDialog, onSave: props.onTaskEdit, task: props.editedTask, priorities: props.priorities, editPane: TaskBoardTaskEditPane })),
+        props.showColumnConfirmDelete && (React.createElement(props.confirmDialog, { onClose: props.onColumnDelete, onConfirm: props.onColumnConfirmDelete, dialogMessage: props.confirmDialogMessage, dialogTitle: props.confirmDialogTitle, dialogConfirmButton: props.confirmDialogConfirmButton, dialogCancelButton: props.confirmDialogCancelButton }))));
+};
+TaskBoardColumn.displayName = 'KendoReactTaskBoardColumn';

package/dist/es/column/ColumnBody.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { TaskBoardCardProps } from '../card/Card';
+import { TaskBoardColumnModel, TaskBoardTaskModel } from '../TaskBoard';
+/**
+ * Represents the props of the TaskBoardColumnBody component
+ */
+export interface TaskBoardColumnBodyProps {
+    /**
+     * The rendered column.
+     */
+    column: TaskBoardColumnModel;
+    /**
+     * The rendered tasks.
+     */
+    tasks: TaskBoardTaskModel[];
+    /**
+     * Determines the children nodes.
+     */
+    children: React.ReactNode;
+    /**
+     * Represents the drag target reference.
+     */
+    dragTargetRef?: React.RefObject<{
+        width: number;
+        height: number;
+    }>;
+    /**
+     * The event that is fired when a task is deleted.
+     */
+    onTaskDelete: (task: TaskBoardTaskModel) => void;
+    /**
+     * The event that is fired when a task is edited.
+     */
+    onShowEditCardPane: (task: TaskBoardTaskModel) => void;
+    /**
+     * Represents the TaskBoardCard component.
+     */
+    card: React.ComponentType<TaskBoardCardProps>;
+}
+/**
+ * Represents the TaskBoardColumnBody component.
+ */
+export declare const TaskBoardColumnBody: {
+    (props: TaskBoardColumnBodyProps): JSX.Element;
+    displayName: string;
+};

package/dist/es/column/ColumnBody.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+/**
+ * Represents the TaskBoardColumnBody component.
+ */
+export var TaskBoardColumnBody = function (props) {
+    return (React.createElement("div", { className: 'k-taskboard-column-cards-container' },
+        React.createElement("div", { className: 'k-taskboard-column-cards' }, props.children)));
+};
+TaskBoardColumnBody.displayName = 'KendoReactTaskBoardColumnBody';

package/dist/es/column/ColumnHeader.d.ts

@@ -0,0 +1,55 @@
+/// <reference types="react" />
+import { InputChangeEvent } from '@progress/kendo-react-inputs';
+import { TaskBoardColumnModel, TaskBoardTaskModel } from '../TaskBoard';
+/**
+ * Represents the props of the TaskBoardColumnHeader component.
+ */
+export interface TaskBoardColumnHeaderProps {
+    /**
+     * The rendered column.
+     */
+    column: TaskBoardColumnModel;
+    /**
+     * The rendered tasks.
+     */
+    tasks: TaskBoardTaskModel[];
+    /**
+     * The title of the editButton.
+     */
+    editButtonTitle: string;
+    /**
+     * The title of the addButton.
+     */
+    addButtonTitle: string;
+    /**
+     * The title of the closeButton.
+     */
+    closeButtonTitle: string;
+    /**
+     * The event that is fired when the title is changed.
+     */
+    onTitleChange?: (event: InputChangeEvent) => void;
+    /**
+     * The event that is fired when a column enters edit mode.
+     */
+    onColumnEnterEdit: () => void;
+    /**
+     * The event that is fired when a column exits edit mode.
+     */
+    onColumnExitEdit: () => void;
+    /**
+     * The event that is fired when a add card dialog is shown.
+     */
+    onShowAddCardDialog: () => void;
+    /**
+     * The event that is fired when a column is deleted.
+     */
+    onColumnDelete: () => void;
+}
+/**
+ * Represents the TaskBoardColumnHeader component.
+ */
+export declare const TaskBoardColumnHeader: {
+    (props: TaskBoardColumnHeaderProps): JSX.Element;
+    displayName: string;
+};

package/dist/es/column/ColumnHeader.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Button } from '@progress/kendo-react-buttons';
+import { Input } from '@progress/kendo-react-inputs';
+import { classNames } from '@progress/kendo-react-common';
+/**
+ * Represents the TaskBoardColumnHeader component.
+ */
+export var TaskBoardColumnHeader = function (props) {
+    var _a = props.column, edit = _a.edit, title = _a.title;
+    return (React.createElement("div", { className: 'k-taskboard-column-header' },
+        React.createElement("div", { className: 'k-taskboard-column-header-text k-text-ellipsis' }, edit ? (React.createElement(Input, { value: title, onChange: props.onTitleChange, onBlur: props.onColumnExitEdit, autoFocus: true })) : title),
+        React.createElement("span", { className: 'k-spacer' }),
+        React.createElement("div", { className: classNames('k-taskboard-column-header-actions', { 'k-disabled': edit }) },
+            React.createElement(Button, { fillMode: "flat", icon: "edit", title: props.editButtonTitle, onClick: props.onColumnEnterEdit }),
+            React.createElement(Button, { fillMode: "flat", icon: "add", title: props.addButtonTitle, onClick: props.onShowAddCardDialog }),
+            React.createElement(Button, { fillMode: "flat", icon: "close", title: props.closeButtonTitle, onClick: props.onColumnDelete }))));
+};
+TaskBoardColumnHeader.displayName = 'KendoReactTaskBoardColumnHeader';

package/dist/es/constants.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @hidden
+ */
+export declare const TASKBOARD_ITEM_TYPE = "data-taskboard-type";
+/**
+ * @hidden
+ */
+export declare const TASKBOARD_ITEM_ID = "data-taskboard-id";
+/**
+ * @hidden
+ */
+export declare const TASKBOARD_PLACEHOLDER = "data-taskboard-placeholder";
+/**
+ * @hidden
+ */
+export declare const TASKBOARD_COLUMN = "column";
+/**
+ * @hidden
+ */
+export declare const TASKBOARD_TASK = "task";

package/dist/es/constants.js

@@ -0,0 +1,20 @@
+/**
+ * @hidden
+ */
+export var TASKBOARD_ITEM_TYPE = 'data-taskboard-type';
+/**
+ * @hidden
+ */
+export var TASKBOARD_ITEM_ID = 'data-taskboard-id';
+/**
+ * @hidden
+ */
+export var TASKBOARD_PLACEHOLDER = 'data-taskboard-placeholder';
+/**
+ * @hidden
+ */
+export var TASKBOARD_COLUMN = 'column';
+/**
+ * @hidden
+ */
+export var TASKBOARD_TASK = 'task';

package/dist/es/hooks/taskEditing.d.ts

@@ -0,0 +1,18 @@
+import { DropDownListChangeEvent } from '@progress/kendo-react-dropdowns';
+import { InputChangeEvent } from '@progress/kendo-react-inputs';
+import { TaskBoardPriority, TaskBoardTaskModel } from '../TaskBoard';
+export interface TaskEditingResult {
+    onTitleChange: (event: InputChangeEvent) => void;
+    title: string;
+    onDescriptionChange: (event: InputChangeEvent) => void;
+    description: string;
+    onPriorityChange: (event: DropDownListChangeEvent) => void;
+    priority: TaskBoardPriority;
+    onSave: () => void;
+}
+export interface TaskEditingProps {
+    task?: TaskBoardTaskModel;
+    priorities: TaskBoardPriority[];
+    onSave: (task: TaskBoardTaskModel, prevTask: TaskBoardTaskModel | undefined) => void;
+}
+export declare const useTaskEditing: ({ onSave, task, priorities }: TaskEditingProps) => TaskEditingResult;

package/dist/es/hooks/taskEditing.js

@@ -0,0 +1,32 @@
+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);
+};
+import * as React from 'react';
+export var useTaskEditing = function (_a) {
+    var onSave = _a.onSave, task = _a.task, priorities = _a.priorities;
+    var _b = React.useState(task ? task.title : ''), title = _b[0], setTitle = _b[1];
+    var _c = React.useState(task ? task.description : ''), description = _c[0], setDescription = _c[1];
+    var _d = React.useState(task ? task.priority : priorities[0]), priority = _d[0], setPriority = _d[1];
+    var onTitleChange = React.useCallback(function (event) {
+        setTitle(event.value);
+    }, []);
+    var onDescriptionChange = React.useCallback(function (event) {
+        setDescription(event.value);
+    }, []);
+    var onPriorityChange = React.useCallback(function (event) {
+        setPriority(event.target.value);
+    }, []);
+    var onSaveIn = React.useCallback(function () {
+        var nextTask = __assign({ id: undefined, status: '' }, (task || {}), { title: title, description: description, priority: priority });
+        onSave.call(undefined, nextTask, task);
+    }, [onSave, task, title, description, priority]);
+    return { onTitleChange: onTitleChange, title: title, onDescriptionChange: onDescriptionChange, description: description, onPriorityChange: onPriorityChange, priority: priority, onSave: onSaveIn };
+};

package/dist/es/main.d.ts

@@ -0,0 +1,14 @@
+export { TaskBoard, TaskBoardProps, TaskBoardHandle, TaskBoardChangeEvent, TaskBoardColumnModel, TaskBoardTaskModel, TaskBoardPriority } from './TaskBoard';
+export { TaskBoardToolbar, TaskBoardToolbarProps } from './TaskBoardToolbar';
+export { TaskBoardCard, TaskBoardCardProps } from './card/Card';
+export { TaskBoardCardHeader, TaskBoardCardHeaderProps } from './card/CardHeader';
+export { TaskBoardCardBody, TaskBoardCardBodyProps } from './card/CardBody';
+export { TaskBoardColumn, TaskBoardColumnProps } from './column/Column';
+export { TaskBoardColumnHeader, TaskBoardColumnHeaderProps } from './column/ColumnHeader';
+export { TaskBoardColumnBody, TaskBoardColumnBodyProps } from './column/ColumnBody';
+export { TaskBoardConfirmDialog, TaskBoardConfirmDialogProps } from './TaskBoardConfirmDialog';
+export { TaskBoardPreviewDialog, TaskBoardPreviewDialogProps } from './card/PreviewDialog';
+export { TaskBoardAddCard, TaskBoardAddCardProps } from './TaskBoardAddCard';
+export { TaskBoardEditCard, TaskBoardEditCardProps } from './TaskBoardEditCard';
+export { TaskBoardTaskEditPane, TaskBoardTaskEditPaneProps } from './TaskBoardTaskEditPane';
+export { useTaskEditing, TaskEditingProps, TaskEditingResult } from './hooks/taskEditing';

package/dist/es/main.js

@@ -0,0 +1,14 @@
+export { TaskBoard } from './TaskBoard';
+export { TaskBoardToolbar } from './TaskBoardToolbar';
+export { TaskBoardCard } from './card/Card';
+export { TaskBoardCardHeader } from './card/CardHeader';
+export { TaskBoardCardBody } from './card/CardBody';
+export { TaskBoardColumn } from './column/Column';
+export { TaskBoardColumnHeader } from './column/ColumnHeader';
+export { TaskBoardColumnBody } from './column/ColumnBody';
+export { TaskBoardConfirmDialog } from './TaskBoardConfirmDialog';
+export { TaskBoardPreviewDialog } from './card/PreviewDialog';
+export { TaskBoardAddCard } from './TaskBoardAddCard';
+export { TaskBoardEditCard } from './TaskBoardEditCard';
+export { TaskBoardTaskEditPane } from './TaskBoardTaskEditPane';
+export { useTaskEditing } from './hooks/taskEditing';