pixelize-design-library 2.2.128 → 2.2.130
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { KanbanBoardProps } from "./KanbanBoardProps";
|
|
3
|
-
declare const KanbanBoard: ({ data, onDrag, onDelete, onOpen, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, }: KanbanBoardProps) => React.JSX.Element | null;
|
|
3
|
+
declare const KanbanBoard: ({ data, onDrag, onDelete, onOpen, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, noItems, }: KanbanBoardProps) => React.JSX.Element | null;
|
|
4
4
|
export default KanbanBoard;
|
|
@@ -56,9 +56,10 @@ var AccountCard_1 = __importDefault(require("./AccountCard"));
|
|
|
56
56
|
var HeaderActions_1 = __importDefault(require("../Header/HeaderActions"));
|
|
57
57
|
var MeasuredItem_1 = __importDefault(require("./MeasuredItem"));
|
|
58
58
|
var OverflowTooltipText_1 = __importDefault(require("../SideBar/components/OverflowTooltipText"));
|
|
59
|
+
var Button_1 = __importDefault(require("../Button/Button"));
|
|
59
60
|
var KanbanBoard = function (_a) {
|
|
60
61
|
var _b, _c, _d, _e, _f, _g, _h;
|
|
61
|
-
var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _j = _a.isLoading, isLoading = _j === void 0 ? false : _j, kanbanSelect = _a.kanbanSelect, kanbanEdit = _a.kanbanEdit, kanbanCreate = _a.kanbanCreate, virtualization = _a.virtualization, permissions = _a.permissions;
|
|
62
|
+
var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _j = _a.isLoading, isLoading = _j === void 0 ? false : _j, kanbanSelect = _a.kanbanSelect, kanbanEdit = _a.kanbanEdit, kanbanCreate = _a.kanbanCreate, virtualization = _a.virtualization, permissions = _a.permissions, noItems = _a.noItems;
|
|
62
63
|
var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
|
|
63
64
|
var canDrag = (permissions === null || permissions === void 0 ? void 0 : permissions.isEditable) !== false;
|
|
64
65
|
var canDelete = (permissions === null || permissions === void 0 ? void 0 : permissions.isDeletable) !== false;
|
|
@@ -169,6 +170,14 @@ var KanbanBoard = function (_a) {
|
|
|
169
170
|
react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () { return toggleExpand(account.id, colId, index); }, isDeletable: canDelete }))); }))),
|
|
170
171
|
index === items.length - 1 && placeholder));
|
|
171
172
|
};
|
|
173
|
+
var NoItemsTemplate = function (_a) {
|
|
174
|
+
var _b;
|
|
175
|
+
var column = _a.column;
|
|
176
|
+
return (react_1.default.createElement(react_2.Box, null,
|
|
177
|
+
react_1.default.createElement(react_2.Flex, { flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 2 },
|
|
178
|
+
react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[600], textAlign: "center", mt: 4 }, (noItems === null || noItems === void 0 ? void 0 : noItems.text) || "No items in this column"),
|
|
179
|
+
react_1.default.createElement(Button_1.default, { onClick: function () { var _a; return (_a = noItems === null || noItems === void 0 ? void 0 : noItems.onClick) === null || _a === void 0 ? void 0 : _a.call(noItems, column); }, size: "xs" }, (noItems === null || noItems === void 0 ? void 0 : noItems.buttonText) || "Add Item"))));
|
|
180
|
+
};
|
|
172
181
|
if (!canView)
|
|
173
182
|
return null;
|
|
174
183
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
@@ -260,20 +269,22 @@ var KanbanBoard = function (_a) {
|
|
|
260
269
|
scrollbarGutter: "stable both-edges",
|
|
261
270
|
},
|
|
262
271
|
cursor: canDrag ? "grab" : "not-allowed",
|
|
263
|
-
} },
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
272
|
+
} },
|
|
273
|
+
(noItems === null || noItems === void 0 ? void 0 : noItems.isVisible) && column.items.length === 0 && react_1.default.createElement(NoItemsTemplate, { column: column }),
|
|
274
|
+
virtualization ? (react_1.default.createElement(react_window_1.VariableSizeList, { ref: function (el) {
|
|
275
|
+
if (el)
|
|
276
|
+
listRefs.current[colId] = el;
|
|
277
|
+
}, height: containerHeight - 150, itemCount: column.items.length, itemSize: function (index) { return getItemSize(index, column.items, colId); }, width: "100%", itemData: {
|
|
278
|
+
items: column.items,
|
|
279
|
+
colId: colId,
|
|
280
|
+
placeholder: provided.placeholder,
|
|
281
|
+
} }, Row)) : (react_1.default.createElement(react_2.Box, null,
|
|
282
|
+
column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { marginBottom: 12 } },
|
|
283
|
+
react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) { return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
|
|
284
|
+
react_1.default.createElement(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
|
|
285
|
+
return toggleExpand(account.id, colId, index);
|
|
286
|
+
}, isDeletable: canDelete }))); }))); }),
|
|
287
|
+
provided.placeholder)))));
|
|
277
288
|
}));
|
|
278
289
|
}))))));
|
|
279
290
|
};
|