pixelize-design-library 2.1.49 → 2.1.50
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, }: KanbanBoardProps) => React.JSX.Element;
|
|
3
|
+
declare const KanbanBoard: ({ data, onDrag, onDelete, onOpen, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate }: KanbanBoardProps) => React.JSX.Element;
|
|
4
4
|
export default KanbanBoard;
|
|
@@ -52,9 +52,10 @@ var dnd_1 = require("@hello-pangea/dnd");
|
|
|
52
52
|
var lucide_react_1 = require("lucide-react");
|
|
53
53
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
54
54
|
var AccountCard_1 = __importDefault(require("./AccountCard"));
|
|
55
|
+
var HeaderActions_1 = __importDefault(require("../Header/HeaderActions"));
|
|
55
56
|
var KanbanBoard = function (_a) {
|
|
56
57
|
var _b, _c, _d;
|
|
57
|
-
var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e;
|
|
58
|
+
var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e, kanbanSelect = _a.kanbanSelect, kanbanEdit = _a.kanbanEdit, kanbanCreate = _a.kanbanCreate;
|
|
58
59
|
var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
|
|
59
60
|
var _f = (0, react_1.useState)(data), columns = _f[0], setColumns = _f[1];
|
|
60
61
|
var onDragEnd = function (result) {
|
|
@@ -93,28 +94,30 @@ var KanbanBoard = function (_a) {
|
|
|
93
94
|
var columnIds = ((_b = (_a = columns[colId]) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.map(function (item) { return item.id; })) || [];
|
|
94
95
|
onColumnDelete === null || onColumnDelete === void 0 ? void 0 : onColumnDelete(columnIds);
|
|
95
96
|
};
|
|
96
|
-
return (react_1.default.createElement(
|
|
97
|
-
react_1.default.createElement(
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
react_1.default.createElement(react_2.
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
var
|
|
106
|
-
return (react_1.default.createElement(
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
react_1.default.createElement(react_2.
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
97
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
98
|
+
react_1.default.createElement(HeaderActions_1.default, { select: kanbanSelect, edit: kanbanEdit, create: kanbanCreate }),
|
|
99
|
+
react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: onDragEnd },
|
|
100
|
+
react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, bg: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200], minH: "100vh", overflowX: "auto", maxWidth: "100vw" }, isLoading ? ((_c = Array.from({ length: 5 })) === null || _c === void 0 ? void 0 : _c.map(function (_, idx) {
|
|
101
|
+
var _a, _b;
|
|
102
|
+
return (react_1.default.createElement(react_2.Box, { key: idx, width: "17.5rem", p: 4, borderRadius: "0.5rem", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[100], border: "0.125rem solid ".concat((_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200]), flexShrink: 0 },
|
|
103
|
+
react_1.default.createElement(react_2.Skeleton, { height: "2.75rem", mb: 4, borderRadius: "0.25rem" }),
|
|
104
|
+
react_1.default.createElement(react_2.SkeletonText, { mt: "4", noOfLines: 5, spacing: "4" })));
|
|
105
|
+
})) : ((_d = Object.entries(columns)) === null || _d === void 0 ? void 0 : _d.map(function (_a) {
|
|
106
|
+
var colId = _a[0], column = _a[1];
|
|
107
|
+
return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId.toString(), key: colId }, function (provided, snapshot) {
|
|
108
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
109
|
+
return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.droppableProps, { width: "17.5rem", opacity: 1, borderRadius: "0.5rem", borderWidth: "0.063rem", background: snapshot.isDraggingOver
|
|
110
|
+
? (_a = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _a === void 0 ? void 0 : _a[50]
|
|
111
|
+
: (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver
|
|
112
|
+
? "0.5px dashed" + ((_c = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _c === void 0 ? void 0 : _c[500])
|
|
113
|
+
: "0.125rem solid" + ((_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200])), display: "flex", flexDirection: "column", flexShrink: 0 }),
|
|
114
|
+
react_1.default.createElement(react_2.Flex, { width: "16.5rem", height: "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (_e = column.color) !== null && _e !== void 0 ? _e : (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[500], background: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[100], align: "center", px: 2, mb: 3, flexShrink: 0, m: 2, justifyContent: "space-between" },
|
|
115
|
+
react_1.default.createElement(react_2.Text, { fontWeight: "600", fontSize: "1rem", color: (_h = colors === null || colors === void 0 ? void 0 : colors.text) === null || _h === void 0 ? void 0 : _h[700] }, column.title),
|
|
116
|
+
react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_j = colors === null || colors === void 0 ? void 0 : colors.text) === null || _j === void 0 ? void 0 : _j[600], _hover: { color: (_k = colors === null || colors === void 0 ? void 0 : colors.red) === null || _k === void 0 ? void 0 : _k[600] }, onClick: function () { return handleColumnDelete(colId); } })),
|
|
117
|
+
react_1.default.createElement(react_2.Box, { px: 2, pb: 2, overflowY: "auto", maxHeight: "calc(100vh - 7rem)", overflowX: "hidden" }, (_l = column.items) === null || _l === void 0 ? void 0 :
|
|
118
|
+
_l.map(function (account, index) { return (react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen })); }),
|
|
119
|
+
provided.placeholder)));
|
|
120
|
+
}));
|
|
121
|
+
}))))));
|
|
119
122
|
};
|
|
120
123
|
exports.default = KanbanBoard;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { OptionProp } from "../Select/SelectProps";
|
|
1
2
|
export type Account = {
|
|
2
3
|
id: string;
|
|
3
4
|
[key: string]: string | number | null | undefined;
|
|
@@ -19,4 +20,22 @@ export type KanbanBoardProps = {
|
|
|
19
20
|
item: Account;
|
|
20
21
|
}) => void;
|
|
21
22
|
isLoading?: boolean;
|
|
23
|
+
kanbanSelect?: {
|
|
24
|
+
isSelect?: boolean;
|
|
25
|
+
options?: OptionProp[];
|
|
26
|
+
onSelectChange?: (option?: OptionProp) => void;
|
|
27
|
+
selectPlaceholderText?: string;
|
|
28
|
+
width?: string;
|
|
29
|
+
value?: string;
|
|
30
|
+
};
|
|
31
|
+
kanbanEdit?: {
|
|
32
|
+
isEditable?: boolean;
|
|
33
|
+
onEdit?: () => void;
|
|
34
|
+
label?: string;
|
|
35
|
+
};
|
|
36
|
+
kanbanCreate?: {
|
|
37
|
+
isCreatable?: boolean;
|
|
38
|
+
onCreate?: () => void;
|
|
39
|
+
label?: string;
|
|
40
|
+
};
|
|
22
41
|
};
|