pixelize-design-library 2.2.175 → 2.2.178
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, customColumns, customizeColumn, onDrag, onDelete, onOpen, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, noItems, enableColumnCollapse, collapsedColumns: defaultCollapsedColumns, onColumnCollapseChange, enableColumnReorder, onColumnReorder, }: KanbanBoardProps) => React.JSX.Element | null;
|
|
3
|
+
declare const KanbanBoard: ({ data, customColumns, customizeColumn, onDrag, onDelete, onOpen, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, noItems, enableColumnCollapse, collapsedColumns: defaultCollapsedColumns, onColumnCollapseChange, enableColumnReorder, onColumnReorder, preferences, }: KanbanBoardProps) => React.JSX.Element | null;
|
|
4
4
|
export default KanbanBoard;
|
|
@@ -62,6 +62,7 @@ var dnd_1 = require("@hello-pangea/dnd");
|
|
|
62
62
|
var lucide_react_1 = require("lucide-react");
|
|
63
63
|
var react_window_1 = require("react-window");
|
|
64
64
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
65
|
+
var usePreferences_1 = require("../../Hooks/usePreferences");
|
|
65
66
|
var AccountCard_1 = __importDefault(require("./AccountCard"));
|
|
66
67
|
var HeaderActions_1 = __importDefault(require("../Header/HeaderActions"));
|
|
67
68
|
var MeasuredItem_1 = __importDefault(require("./MeasuredItem"));
|
|
@@ -77,16 +78,48 @@ function reorderColumnEntries(entries, startIndex, endIndex) {
|
|
|
77
78
|
}
|
|
78
79
|
var KanbanBoard = function (_a) {
|
|
79
80
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
|
80
|
-
var data = _a.data, customColumns = _a.customColumns, customizeColumn = _a.customizeColumn, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _u = _a.isLoading, isLoading = _u === void 0 ? false : _u, kanbanSelect = _a.kanbanSelect, kanbanEdit = _a.kanbanEdit, kanbanCreate = _a.kanbanCreate, virtualization = _a.virtualization, permissions = _a.permissions, noItems = _a.noItems, _v = _a.enableColumnCollapse, enableColumnCollapse = _v === void 0 ? false : _v, defaultCollapsedColumns = _a.collapsedColumns, onColumnCollapseChange = _a.onColumnCollapseChange, _w = _a.enableColumnReorder, enableColumnReorder = _w === void 0 ? false : _w, onColumnReorder = _a.onColumnReorder
|
|
81
|
+
var data = _a.data, customColumns = _a.customColumns, customizeColumn = _a.customizeColumn, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _u = _a.isLoading, isLoading = _u === void 0 ? false : _u, kanbanSelect = _a.kanbanSelect, kanbanEdit = _a.kanbanEdit, kanbanCreate = _a.kanbanCreate, virtualization = _a.virtualization, permissions = _a.permissions, noItems = _a.noItems, _v = _a.enableColumnCollapse, enableColumnCollapse = _v === void 0 ? false : _v, defaultCollapsedColumns = _a.collapsedColumns, onColumnCollapseChange = _a.onColumnCollapseChange, _w = _a.enableColumnReorder, enableColumnReorder = _w === void 0 ? false : _w, onColumnReorder = _a.onColumnReorder, _x = _a.preferences, preferences = _x === void 0 ? {
|
|
82
|
+
baseurl: "",
|
|
83
|
+
token: "",
|
|
84
|
+
key: "",
|
|
85
|
+
name: "",
|
|
86
|
+
page: "",
|
|
87
|
+
orgId: "",
|
|
88
|
+
} : _x;
|
|
81
89
|
var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
|
|
82
90
|
var canDrag = (permissions === null || permissions === void 0 ? void 0 : permissions.isEditable) !== false;
|
|
83
91
|
var canDelete = (permissions === null || permissions === void 0 ? void 0 : permissions.isDeletable) !== false;
|
|
84
92
|
var canCreate = (permissions === null || permissions === void 0 ? void 0 : permissions.isCreatable) !== false;
|
|
85
93
|
var canView = (permissions === null || permissions === void 0 ? void 0 : permissions.isViewable) !== false;
|
|
86
94
|
var mergedColumns = (0, react_1.useMemo)(function () { return (__assign(__assign({}, data), (customColumns !== null && customColumns !== void 0 ? customColumns : {}))); }, [data, customColumns]);
|
|
87
|
-
var
|
|
88
|
-
|
|
89
|
-
|
|
95
|
+
var _y = (0, usePreferences_1.useGetPreferences)({
|
|
96
|
+
baseUrl: preferences.baseurl,
|
|
97
|
+
page: preferences.page,
|
|
98
|
+
key: preferences.key,
|
|
99
|
+
name: preferences.name,
|
|
100
|
+
authToken: preferences.token,
|
|
101
|
+
orgId: preferences.orgId,
|
|
102
|
+
}), kanbanPreferencesData = _y.preferences, preferencesLoading = _y.loading;
|
|
103
|
+
var savePreferences = (0, usePreferences_1.useSavePreferences)({
|
|
104
|
+
baseUrl: preferences.baseurl,
|
|
105
|
+
page: preferences.page,
|
|
106
|
+
key: preferences.key,
|
|
107
|
+
name: preferences.name,
|
|
108
|
+
authToken: preferences.token,
|
|
109
|
+
orgId: preferences.orgId,
|
|
110
|
+
}).savePreferences;
|
|
111
|
+
var kanbanPreferencesJson = (0, react_1.useMemo)(function () {
|
|
112
|
+
if (kanbanPreferencesData === null || kanbanPreferencesData === void 0 ? void 0 : kanbanPreferencesData.length) {
|
|
113
|
+
return kanbanPreferencesData[0].json;
|
|
114
|
+
}
|
|
115
|
+
return {};
|
|
116
|
+
}, [kanbanPreferencesData]);
|
|
117
|
+
var kanbanPreferencesJsonRef = (0, react_1.useRef)(kanbanPreferencesJson);
|
|
118
|
+
kanbanPreferencesJsonRef.current = kanbanPreferencesJson;
|
|
119
|
+
var isBoardLoading = isLoading || (Boolean(preferences.baseurl) && preferencesLoading);
|
|
120
|
+
var _z = (0, react_1.useState)(mergedColumns), columns = _z[0], setColumns = _z[1];
|
|
121
|
+
var _0 = (0, react_1.useState)(600), containerHeight = _0[0], setContainerHeight = _0[1];
|
|
122
|
+
var _1 = (0, react_1.useState)(null), hoveredColumn = _1[0], setHoveredColumn = _1[1];
|
|
90
123
|
(0, react_1.useEffect)(function () {
|
|
91
124
|
setColumns(mergedColumns);
|
|
92
125
|
}, [mergedColumns]);
|
|
@@ -97,9 +130,39 @@ var KanbanBoard = function (_a) {
|
|
|
97
130
|
lg: "19rem",
|
|
98
131
|
});
|
|
99
132
|
// track expanded cards
|
|
100
|
-
var
|
|
133
|
+
var _2 = (0, react_1.useState)({}), expanded = _2[0], setExpanded = _2[1];
|
|
101
134
|
/** When true, column id maps to collapsed (body hidden). */
|
|
102
|
-
var
|
|
135
|
+
var _3 = (0, react_1.useState)(function () { return (__assign({}, defaultCollapsedColumns)); }), collapsedColumns = _3[0], setCollapsedColumns = _3[1];
|
|
136
|
+
(0, react_1.useEffect)(function () {
|
|
137
|
+
if (!enableColumnCollapse || !preferences.baseurl || preferencesLoading) {
|
|
138
|
+
return;
|
|
139
|
+
}
|
|
140
|
+
if (!("collapsedColumns" in kanbanPreferencesJson)) {
|
|
141
|
+
return;
|
|
142
|
+
}
|
|
143
|
+
var saved = kanbanPreferencesJson.collapsedColumns;
|
|
144
|
+
if (saved === null ||
|
|
145
|
+
typeof saved !== "object" ||
|
|
146
|
+
Array.isArray(saved)) {
|
|
147
|
+
return;
|
|
148
|
+
}
|
|
149
|
+
var validIds = new Set(Object.keys(mergedColumns));
|
|
150
|
+
var next = {};
|
|
151
|
+
for (var _i = 0, _a = Object.entries(saved); _i < _a.length; _i++) {
|
|
152
|
+
var _b = _a[_i], k = _b[0], v = _b[1];
|
|
153
|
+
if (validIds.has(k) && typeof v === "boolean") {
|
|
154
|
+
next[k] = v;
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
setCollapsedColumns(__assign(__assign({}, defaultCollapsedColumns), next));
|
|
158
|
+
}, [
|
|
159
|
+
enableColumnCollapse,
|
|
160
|
+
preferences.baseurl,
|
|
161
|
+
preferencesLoading,
|
|
162
|
+
kanbanPreferencesJson,
|
|
163
|
+
mergedColumns,
|
|
164
|
+
defaultCollapsedColumns,
|
|
165
|
+
]);
|
|
103
166
|
var toggleColumnCollapsed = (0, react_1.useCallback)(function (colId) {
|
|
104
167
|
setCollapsedColumns(function (prev) {
|
|
105
168
|
var _a;
|
|
@@ -110,16 +173,24 @@ var KanbanBoard = function (_a) {
|
|
|
110
173
|
collapsed: collapsed,
|
|
111
174
|
collapsedColumns: next,
|
|
112
175
|
});
|
|
176
|
+
if (preferences.baseurl && enableColumnCollapse) {
|
|
177
|
+
savePreferences(__assign(__assign({}, kanbanPreferencesJsonRef.current), { collapsedColumns: next }));
|
|
178
|
+
}
|
|
113
179
|
return next;
|
|
114
180
|
});
|
|
115
|
-
}, [
|
|
181
|
+
}, [
|
|
182
|
+
onColumnCollapseChange,
|
|
183
|
+
preferences.baseurl,
|
|
184
|
+
enableColumnCollapse,
|
|
185
|
+
savePreferences,
|
|
186
|
+
]);
|
|
116
187
|
/** Rotated collapsed summaries paint outside layout; reserve space so they are not clipped under the rail header. */
|
|
117
188
|
var COLLAPSED_CUSTOM_NODE_TOP_RESERVE = "3.5rem";
|
|
118
189
|
// ref for lists
|
|
119
190
|
var listRefs = (0, react_1.useRef)({});
|
|
120
191
|
var containerRef = (0, react_1.useRef)(null);
|
|
121
192
|
// store measured heights
|
|
122
|
-
var
|
|
193
|
+
var _4 = (0, react_1.useState)({}), sizes = _4[0], setSizes = _4[1];
|
|
123
194
|
// update height for an item
|
|
124
195
|
var setSize = (0, react_1.useCallback)(function (index, size, colId) {
|
|
125
196
|
var key = "".concat(colId, "-").concat(index);
|
|
@@ -150,7 +221,7 @@ var KanbanBoard = function (_a) {
|
|
|
150
221
|
return function () {
|
|
151
222
|
window.removeEventListener("resize", calculateDimensions);
|
|
152
223
|
};
|
|
153
|
-
}, [
|
|
224
|
+
}, [isBoardLoading]);
|
|
154
225
|
// toggle expand/collapse
|
|
155
226
|
var toggleExpand = function (id, colId, index) {
|
|
156
227
|
setExpanded(function (prev) {
|
|
@@ -253,7 +324,7 @@ var KanbanBoard = function (_a) {
|
|
|
253
324
|
return toggleExpand(item.id, colId, rubric.source.index);
|
|
254
325
|
}, isDeletable: canDelete }))));
|
|
255
326
|
} }, function (provided, snapshot) {
|
|
256
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
|
|
327
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
|
|
257
328
|
return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.droppableProps, { width: isColCollapsed ? COLLAPSED_KANBAN_COLUMN_WIDTH : columnWidth, borderRadius: "0.5rem", borderWidth: "0.063rem", background: snapshot.isDraggingOver
|
|
258
329
|
? (_a = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _a === void 0 ? void 0 : _a[50]
|
|
259
330
|
: (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver
|
|
@@ -273,19 +344,23 @@ var KanbanBoard = function (_a) {
|
|
|
273
344
|
column.customNode ? (react_1.default.createElement(react_2.Box, { flexShrink: 0, minH: COLLAPSED_CUSTOM_NODE_TOP_RESERVE, w: "100%", bg: (_q = colors === null || colors === void 0 ? void 0 : colors.background) === null || _q === void 0 ? void 0 : _q[100], "aria-hidden": true })) : null,
|
|
274
345
|
column.customNode ? (react_1.default.createElement(react_2.Box, { as: "section", "aria-label": "Column summary", flex: "1", minH: 0, w: "100%", overflow: "visible", py: 2, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", bg: (_r = colors === null || colors === void 0 ? void 0 : colors.background) === null || _r === void 0 ? void 0 : _r[100], position: "relative", zIndex: 2 },
|
|
275
346
|
react_1.default.createElement(react_2.Box, { position: "relative", transform: "rotate(90deg)", transformOrigin: "center center", marginTop: '1rem' },
|
|
276
|
-
react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1, minW: "max-content", fontSize: "xs", color: (_s = colors === null || colors === void 0 ? void 0 : colors.text) === null || _s === void 0 ? void 0 : _s[600] }, column.customNode())))) : (react_1.default.createElement(react_2.Box, { flex: "1", minH: 0 })))) : (react_1.default.createElement(react_2.Flex, { width: "95%", h: "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (
|
|
277
|
-
|
|
278
|
-
react_1.default.createElement(react_2.
|
|
279
|
-
|
|
280
|
-
react_1.default.createElement(
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
347
|
+
react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1, minW: "max-content", fontSize: "xs", color: (_s = colors === null || colors === void 0 ? void 0 : colors.text) === null || _s === void 0 ? void 0 : _s[600] }, column.customNode())))) : (react_1.default.createElement(react_2.Box, { flex: "1", minH: 0 })))) : (react_1.default.createElement(react_2.Flex, { width: "95%", h: !isColCollapsed && !!((_t = column.customNode) === null || _t === void 0 ? void 0 : _t.call(column)) ? "auto" : "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (_u = column.color) !== null && _u !== void 0 ? _u : (_v = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _v === void 0 ? void 0 : _v[500], background: (_w = colors === null || colors === void 0 ? void 0 : colors.background) === null || _w === void 0 ? void 0 : _w[300], align: "center", px: 2, m: 2, flexShrink: 0, justifyContent: "space-between", position: "relative", gap: 2 },
|
|
348
|
+
react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2 },
|
|
349
|
+
enableColumnReorder && columnDragHandleProps ? (react_1.default.createElement(react_2.Flex, __assign({ align: "center", justify: "center", flexShrink: 0, cursor: "grab" }, columnDragHandleProps),
|
|
350
|
+
react_1.default.createElement(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: (_x = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _x === void 0 ? void 0 : _x[400] }))) : null,
|
|
351
|
+
react_1.default.createElement(react_2.Flex, { direction: "column", gap: 1, mt: !isColCollapsed && !!((_y = column.customNode) === null || _y === void 0 ? void 0 : _y.call(column)) ? "1" : "0" },
|
|
352
|
+
react_1.default.createElement(react_2.Text, { as: "span", fontWeight: "600", fontSize: "0.875rem", color: (_z = colors === null || colors === void 0 ? void 0 : colors.text) === null || _z === void 0 ? void 0 : _z[700], noOfLines: 1, flex: "1", minW: 0 },
|
|
353
|
+
react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top" }, column.title)),
|
|
354
|
+
!!((_0 = column.customNode) === null || _0 === void 0 ? void 0 : _0.call(column)) ? (react_1.default.createElement(react_2.Box, { as: "section", "aria-label": "Column summary", width: "95%", flexShrink: 0, fontSize: "xs", mb: 1, color: (_1 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _1 === void 0 ? void 0 : _1[600] }, column.customNode())) : null)),
|
|
355
|
+
react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2 },
|
|
356
|
+
react_1.default.createElement(react_2.Badge, { minW: { base: "20px", sm: "22px", md: "24px" }, h: { base: "20px", sm: "22px", md: "24px" }, borderRadius: "999px", border: "1px solid", backgroundColor: (_2 = colors === null || colors === void 0 ? void 0 : colors.background) === null || _2 === void 0 ? void 0 : _2[100], borderColor: (_3 = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _3 === void 0 ? void 0 : _3[300], display: "flex", alignItems: "center", justifyContent: "center", color: (_4 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _4 === void 0 ? void 0 : _4[900], fontWeight: 600, fontSize: { base: "10px", sm: "11px", md: "12px" } }, (_5 = column === null || column === void 0 ? void 0 : column.items) === null || _5 === void 0 ? void 0 : _5.length),
|
|
357
|
+
enableColumnCollapse && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Collapse column", icon: react_1.default.createElement(lucide_react_1.ChevronLeft, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", flexShrink: 0, onClick: function () { return toggleColumnCollapsed(colId); } })),
|
|
358
|
+
canDelete &&
|
|
359
|
+
hoveredColumn === colId &&
|
|
360
|
+
column.items.length > 0 && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_6 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _6 === void 0 ? void 0 : _6[600], _hover: { color: (_7 = colors === null || colors === void 0 ? void 0 : colors.red) === null || _7 === void 0 ? void 0 : _7[600] }, onClick: function () { return handleColumnDelete(colId); }, transition: "color 0.2s ease", flexShrink: 0 })),
|
|
361
|
+
!(canDelete &&
|
|
362
|
+
hoveredColumn === colId &&
|
|
363
|
+
column.items.length > 0) && react_1.default.createElement(react_2.Box, { width: "16px", height: "16px", flexShrink: 0 })))),
|
|
289
364
|
!isColCollapsed && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
290
365
|
react_1.default.createElement(react_2.Box, { px: 2, flex: "1", overflowY: "auto", width: "100%", sx: {
|
|
291
366
|
overflowY: "auto",
|
|
@@ -360,7 +435,7 @@ var KanbanBoard = function (_a) {
|
|
|
360
435
|
scrollbarWidth: "thin",
|
|
361
436
|
scrollbarColor: "".concat((_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[400], " ").concat((_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[100]),
|
|
362
437
|
};
|
|
363
|
-
var addColumnBox = !
|
|
438
|
+
var addColumnBox = !isBoardLoading && showAddColumn && hasAnyColumns && (react_1.default.createElement(react_2.Box, { width: columnWidth, borderRadius: "0.5rem", border: "0.125rem dashed ".concat((_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[300]), bg: (_j = colors === null || colors === void 0 ? void 0 : colors.background) === null || _j === void 0 ? void 0 : _j[100], flexShrink: 0, height: "".concat(containerHeight - 60, "px"), display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", _hover: { borderColor: (_k = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _k === void 0 ? void 0 : _k[500] }, onClick: function () { var _a; return (_a = customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.onAddColumn) === null || _a === void 0 ? void 0 : _a.call(customizeColumn); } },
|
|
364
439
|
react_1.default.createElement(react_2.Flex, { direction: "column", align: "center", gap: 2 },
|
|
365
440
|
react_1.default.createElement(react_2.Box, { as: lucide_react_1.Plus, size: 20, color: (_l = colors === null || colors === void 0 ? void 0 : colors.text) === null || _l === void 0 ? void 0 : _l[700] }),
|
|
366
441
|
react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_m = colors === null || colors === void 0 ? void 0 : colors.text) === null || _m === void 0 ? void 0 : _m[600] }, (customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.buttonText) || "Add column"))));
|
|
@@ -385,11 +460,11 @@ var KanbanBoard = function (_a) {
|
|
|
385
460
|
react_1.default.createElement(HeaderActions_1.default, { select: kanbanSelect, edit: canDrag ? kanbanEdit : undefined, create: canCreate ? kanbanCreate : undefined }),
|
|
386
461
|
react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: onDragEnd },
|
|
387
462
|
react_1.default.createElement(react_2.Box, { ref: containerRef, bg: (_o = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _o === void 0 ? void 0 : _o[50], minH: "".concat(containerHeight, "px"), position: "relative", overflow: "hidden", mt: 2 },
|
|
388
|
-
showAddColumn && !
|
|
463
|
+
showAddColumn && !isBoardLoading && !hasAnyColumns && (react_1.default.createElement(react_2.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", zIndex: 1 },
|
|
389
464
|
react_1.default.createElement(react_2.Flex, { direction: "column", align: "center", justify: "center", gap: 2, pointerEvents: "auto", cursor: "pointer", px: 6, py: 5, borderRadius: "0.5rem", bg: (_p = colors === null || colors === void 0 ? void 0 : colors.background) === null || _p === void 0 ? void 0 : _p[100], border: "0.125rem dashed ".concat((_q = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _q === void 0 ? void 0 : _q[300]), _hover: { borderColor: (_r = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _r === void 0 ? void 0 : _r[500] }, onClick: function () { var _a; return (_a = customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.onAddColumn) === null || _a === void 0 ? void 0 : _a.call(customizeColumn); } },
|
|
390
465
|
react_1.default.createElement(react_2.Box, { as: lucide_react_1.Plus, size: 20, color: (_s = colors === null || colors === void 0 ? void 0 : colors.text) === null || _s === void 0 ? void 0 : _s[700] }),
|
|
391
466
|
react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_t = colors === null || colors === void 0 ? void 0 : colors.text) === null || _t === void 0 ? void 0 : _t[600] }, (customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.buttonText) || "Add column")))),
|
|
392
|
-
|
|
467
|
+
isBoardLoading ? (react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx }, loadingSkeletonRow)) : enableColumnReorder ? (react_1.default.createElement(dnd_1.Droppable, { droppableId: "COLUMN_REORDER", direction: "horizontal", type: "COLUMN" }, function (colReorderProvided) { return (react_1.default.createElement(react_2.Flex, __assign({ ref: colReorderProvided.innerRef }, colReorderProvided.droppableProps, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx }),
|
|
393
468
|
columnsList,
|
|
394
469
|
colReorderProvided.placeholder,
|
|
395
470
|
addColumnBox)); })) : (react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx },
|
|
@@ -153,7 +153,7 @@ describe("KanbanBoard – permissions", function () {
|
|
|
153
153
|
col1: __assign(__assign({}, sampleData.col1), { customNode: function () { return react_1.default.createElement("span", null, "Column summary line"); } }),
|
|
154
154
|
};
|
|
155
155
|
renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: dataWithCustom, enableColumnCollapse: true }));
|
|
156
|
-
expect(react_2.screen.
|
|
156
|
+
expect(react_2.screen.getByText("Column summary line")).toBeInTheDocument();
|
|
157
157
|
react_2.fireEvent.click(react_2.screen.getByLabelText("Collapse column"));
|
|
158
158
|
expect(react_2.screen.queryByLabelText("Delete")).not.toBeInTheDocument();
|
|
159
159
|
expect(react_2.screen.getByText("Column summary line")).toBeInTheDocument();
|
|
@@ -15,7 +15,9 @@ export type ColumnType = {
|
|
|
15
15
|
title: string;
|
|
16
16
|
color: string;
|
|
17
17
|
items: Account[];
|
|
18
|
-
/**
|
|
18
|
+
/**
|
|
19
|
+
* Column-level slot (e.g. totals). Shown below the title when expanded, and in the collapsed narrow rail (rotated).
|
|
20
|
+
*/
|
|
19
21
|
customNode?: () => ReactNode;
|
|
20
22
|
};
|
|
21
23
|
/** Fired after a column rail is collapsed or expanded via the board UI. */
|
|
@@ -82,7 +84,7 @@ export type KanbanBoardProps = {
|
|
|
82
84
|
enableColumnCollapse?: boolean;
|
|
83
85
|
/**
|
|
84
86
|
* Initial collapsed state keyed by column id (`data` / `customColumns` object keys).
|
|
85
|
-
*
|
|
87
|
+
* Merged on mount; when `preferences.url` is set, server `json.collapsedColumns` overrides these keys after load.
|
|
86
88
|
*/
|
|
87
89
|
collapsedColumns?: Record<string, boolean>;
|
|
88
90
|
/** Called when the user collapses or expands a column (after internal state updates). */
|
|
@@ -91,4 +93,17 @@ export type KanbanBoardProps = {
|
|
|
91
93
|
enableColumnReorder?: boolean;
|
|
92
94
|
/** Called after column order changes (same shape as `data` keys order). */
|
|
93
95
|
onColumnReorder?: (columns: Record<string, ColumnType>) => void;
|
|
96
|
+
/**
|
|
97
|
+
* Optional user-preferences API (same shape as `Table` `preferences`).
|
|
98
|
+
* When `url` is set, column collapse state is loaded from and saved to `json.collapsedColumns`
|
|
99
|
+
* (record of column id → collapsed).
|
|
100
|
+
*/
|
|
101
|
+
preferences?: {
|
|
102
|
+
baseurl: string;
|
|
103
|
+
token: string;
|
|
104
|
+
key?: string;
|
|
105
|
+
name?: string;
|
|
106
|
+
page?: string;
|
|
107
|
+
orgId?: string;
|
|
108
|
+
};
|
|
94
109
|
};
|