pixelize-design-library 2.2.195 → 2.2.197
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.
|
@@ -70,6 +70,7 @@ var OverflowTooltipText_1 = __importDefault(require("../SideBar/components/Overf
|
|
|
70
70
|
var Button_1 = __importDefault(require("../Button/Button"));
|
|
71
71
|
/** Narrow rail width when a column is horizontally collapsed. */
|
|
72
72
|
var COLLAPSED_KANBAN_COLUMN_WIDTH = "2.75rem";
|
|
73
|
+
var KANBAN_CARD_GAP = 12;
|
|
73
74
|
var KanbanRow = react_1.default.memo(function (_a) {
|
|
74
75
|
var index = _a.index, style = _a.style, data = _a.data;
|
|
75
76
|
var items = data.items, colId = data.colId, canDrag = data.canDrag, expanded = data.expanded, onDelete = data.onDelete, onOpen = data.onOpen, canDelete = data.canDelete, setSize = data.setSize, toggleExpand = data.toggleExpand;
|
|
@@ -79,7 +80,7 @@ var KanbanRow = react_1.default.memo(function (_a) {
|
|
|
79
80
|
}
|
|
80
81
|
return (react_1.default.createElement("div", { style: style },
|
|
81
82
|
react_1.default.createElement(MeasuredItem_1.default, { index: index, setSize: function (i, h) { return setSize(i, h, colId); } },
|
|
82
|
-
react_1.default.createElement("div", { style: {
|
|
83
|
+
react_1.default.createElement("div", { style: { paddingBottom: KANBAN_CARD_GAP } },
|
|
83
84
|
react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) {
|
|
84
85
|
var _a;
|
|
85
86
|
return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }), (account === null || account === void 0 ? void 0 : account.customNode) ? (_a = account === null || account === void 0 ? void 0 : account.customNode) === null || _a === void 0 ? void 0 : _a.call(account) : (react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
|
|
@@ -247,7 +248,8 @@ var KanbanBoard = function (_a) {
|
|
|
247
248
|
return changed ? pruned : prev;
|
|
248
249
|
});
|
|
249
250
|
}, [columns]);
|
|
250
|
-
|
|
251
|
+
// AccountCard floor (80px minHeight) + KANBAN_CARD_GAP — kept tight so unmeasured rows don't reserve excess space.
|
|
252
|
+
var DEFAULT_ITEM_HEIGHT = 80 + KANBAN_CARD_GAP;
|
|
251
253
|
// update height for an item
|
|
252
254
|
var setSize = (0, react_1.useCallback)(function (index, size, colId) {
|
|
253
255
|
var key = "".concat(colId, "-").concat(index);
|
|
@@ -263,7 +265,7 @@ var KanbanBoard = function (_a) {
|
|
|
263
265
|
}, []);
|
|
264
266
|
var getItemSize = (0, react_1.useCallback)(function (index, _items, colId) {
|
|
265
267
|
var key = "".concat(colId, "-").concat(index);
|
|
266
|
-
return
|
|
268
|
+
return sizes[key] || DEFAULT_ITEM_HEIGHT;
|
|
267
269
|
}, [sizes]);
|
|
268
270
|
// Calculate container height
|
|
269
271
|
(0, react_1.useEffect)(function () {
|
|
@@ -360,7 +362,7 @@ var KanbanBoard = function (_a) {
|
|
|
360
362
|
var renderColumnDroppable = function (colId, column, columnDragHandleProps, isColCollapsed) { return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId, key: colId, mode: virtualization ? "virtual" : "standard", renderClone: function (provided, _snapshot, rubric) {
|
|
361
363
|
var _a;
|
|
362
364
|
var item = column.items[rubric.source.index];
|
|
363
|
-
return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: __assign(__assign({}, provided.draggableProps.style), { width: columnWidth,
|
|
365
|
+
return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: __assign(__assign({}, provided.draggableProps.style), { width: columnWidth, paddingBottom: KANBAN_CARD_GAP }) }), (item === null || item === void 0 ? void 0 : item.customNode) ? (_a = item === null || item === void 0 ? void 0 : item.customNode) === null || _a === void 0 ? void 0 : _a.call(item) : (react_1.default.createElement(AccountCard_1.default, { key: item.id, account: item, index: rubric.source.index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[item.id], onToggleExpand: function () {
|
|
364
366
|
return toggleExpand(item.id, colId, rubric.source.index);
|
|
365
367
|
}, isDeletable: canDelete }))));
|
|
366
368
|
} }, function (provided, snapshot) {
|
|
@@ -439,7 +441,7 @@ var KanbanBoard = function (_a) {
|
|
|
439
441
|
(snapshot.isUsingPlaceholder ? 1 : 0), itemSize: function (index) {
|
|
440
442
|
return getItemSize(index, column.items, colId);
|
|
441
443
|
}, width: "100%", itemData: __assign(__assign({}, rowBaseProps), { items: column.items, colId: colId }) }, KanbanRow)) : (react_1.default.createElement(react_2.Box, null,
|
|
442
|
-
column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: {
|
|
444
|
+
column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { paddingBottom: KANBAN_CARD_GAP } },
|
|
443
445
|
react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (dragProvided) {
|
|
444
446
|
var _a;
|
|
445
447
|
return (react_1.default.createElement("div", __assign({ ref: dragProvided.innerRef }, dragProvided.draggableProps, dragProvided.dragHandleProps, { style: dragProvided.draggableProps.style }), (account === null || account === void 0 ? void 0 : account.customNode) ? (_a = account === null || account === void 0 ? void 0 : account.customNode) === null || _a === void 0 ? void 0 : _a.call(account) : (react_1.default.createElement(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
|
|
@@ -42,17 +42,29 @@ var HeaderActions = function (_a) {
|
|
|
42
42
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
43
43
|
var actions = _a.actions, selections = _a.selections;
|
|
44
44
|
var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
45
|
+
var hasSelections = selections.length > 0;
|
|
46
|
+
return (react_2.default.createElement(react_1.Box, { display: "flex", gap: 2, fontSize: "0.875rem", fontWeight: 400, color: (_b = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _b === void 0 ? void 0 : _b[500], alignItems: "center" }, (_c = actions === null || actions === void 0 ? void 0 : actions.items) === null || _c === void 0 ? void 0 :
|
|
47
|
+
_c.map(function (item, index) {
|
|
48
|
+
if ("type" in item)
|
|
49
|
+
return null;
|
|
50
|
+
var actionItem = item;
|
|
51
|
+
if (actionItem.isStatic) {
|
|
52
|
+
return (react_2.default.createElement(ListItem, __assign({ key: "static-".concat(index) }, actionItem, { selections: selections })));
|
|
53
|
+
}
|
|
54
|
+
return null;
|
|
55
|
+
}),
|
|
56
|
+
hasSelections && (react_2.default.createElement(react_2.default.Fragment, null,
|
|
57
|
+
((_d = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _d === void 0 ? void 0 : _d.enabled) && (react_2.default.createElement(ListItem, { icon: react_2.default.createElement(lucide_react_1.Trash2, { className: "w-4 h-4" }), name: "Delete", onClick: (_e = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _e === void 0 ? void 0 : _e.onClick, selections: selections, isHoverEnabled: true, hoverColor: (_f = colors === null || colors === void 0 ? void 0 : colors.red) === null || _f === void 0 ? void 0 : _f[500] })),
|
|
58
|
+
((_g = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _g === void 0 ? void 0 : _g.enabled) && (react_2.default.createElement(ListItem, { icon: react_2.default.createElement(lucide_react_1.SquarePen, { className: "w-4 h-4" }), name: "Mass Update", onClick: (_h = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _h === void 0 ? void 0 : _h.onClick, selections: selections, isHoverEnabled: true, hoverColor: (_j = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _j === void 0 ? void 0 : _j[500] })), (_k = actions === null || actions === void 0 ? void 0 : actions.items) === null || _k === void 0 ? void 0 :
|
|
59
|
+
_k.map(function (item, index) {
|
|
50
60
|
if ("type" in item && item.type === "divider") {
|
|
51
61
|
return react_2.default.createElement(Divider_1.default, { key: index });
|
|
52
62
|
}
|
|
53
63
|
var actionItem = item;
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
64
|
+
if (!actionItem.isStatic) {
|
|
65
|
+
return (react_2.default.createElement(ListItem, __assign({ key: "dynamic-".concat(index) }, actionItem, { selections: selections })));
|
|
66
|
+
}
|
|
67
|
+
return null;
|
|
68
|
+
})))));
|
|
57
69
|
};
|
|
58
70
|
exports.default = HeaderActions;
|