pixelize-design-library 2.2.22 → 2.2.24
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.
|
@@ -56,11 +56,16 @@ 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 KanbanBoard = function (_a) {
|
|
59
|
-
var _b;
|
|
60
|
-
var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete,
|
|
59
|
+
var _b, _c, _d, _e;
|
|
60
|
+
var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, kanbanSelect = _a.kanbanSelect, kanbanEdit = _a.kanbanEdit, kanbanCreate = _a.kanbanCreate, virtualization = _a.virtualization;
|
|
61
61
|
var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
|
|
62
|
-
var
|
|
63
|
-
var
|
|
62
|
+
var _g = (0, react_1.useState)(data), columns = _g[0], setColumns = _g[1];
|
|
63
|
+
var _h = (0, react_1.useState)(600), containerHeight = _h[0], setContainerHeight = _h[1];
|
|
64
|
+
var _j = (0, react_1.useState)(0), scrollPosition = _j[0], setScrollPosition = _j[1];
|
|
65
|
+
var _k = (0, react_1.useState)(0), maxScroll = _k[0], setMaxScroll = _k[1];
|
|
66
|
+
var _l = (0, react_1.useState)(0), containerWidth = _l[0], setContainerWidth = _l[1];
|
|
67
|
+
var _m = (0, react_1.useState)(0), contentWidth = _m[0], setContentWidth = _m[1];
|
|
68
|
+
var _o = (0, react_1.useState)(null), hoveredColumn = _o[0], setHoveredColumn = _o[1];
|
|
64
69
|
// Responsive column width
|
|
65
70
|
var columnWidth = (0, react_2.useBreakpointValue)({
|
|
66
71
|
base: "16rem",
|
|
@@ -68,12 +73,13 @@ var KanbanBoard = function (_a) {
|
|
|
68
73
|
lg: "19rem",
|
|
69
74
|
});
|
|
70
75
|
// track expanded cards
|
|
71
|
-
var
|
|
76
|
+
var _p = (0, react_1.useState)({}), expanded = _p[0], setExpanded = _p[1];
|
|
72
77
|
// ref for lists
|
|
73
78
|
var listRefs = (0, react_1.useRef)({});
|
|
74
79
|
var containerRef = (0, react_1.useRef)(null);
|
|
80
|
+
var scrollContainerRef = (0, react_1.useRef)(null);
|
|
75
81
|
// store measured heights
|
|
76
|
-
var
|
|
82
|
+
var _q = (0, react_1.useState)({}), sizes = _q[0], setSizes = _q[1];
|
|
77
83
|
// update height for an item
|
|
78
84
|
var setSize = (0, react_1.useCallback)(function (index, size, colId) {
|
|
79
85
|
var key = "".concat(colId, "-").concat(index);
|
|
@@ -89,22 +95,69 @@ var KanbanBoard = function (_a) {
|
|
|
89
95
|
}, []);
|
|
90
96
|
var getItemSize = function (index, _items, colId) {
|
|
91
97
|
var key = "".concat(colId, "-").concat(index);
|
|
92
|
-
return sizes[key] || 180; //
|
|
98
|
+
return (sizes[key] || 180) + 12; // Add margin to the measured height
|
|
93
99
|
};
|
|
94
|
-
// Calculate container
|
|
100
|
+
// Calculate container dimensions and scroll
|
|
95
101
|
(0, react_1.useEffect)(function () {
|
|
96
|
-
var
|
|
102
|
+
var calculateDimensions = function () {
|
|
97
103
|
var _a;
|
|
104
|
+
var scrollContainer = scrollContainerRef.current;
|
|
105
|
+
if (scrollContainer) {
|
|
106
|
+
var containerWidth_1 = scrollContainer.clientWidth;
|
|
107
|
+
var contentWidth_1 = scrollContainer.scrollWidth;
|
|
108
|
+
var newMaxScroll = Math.max(0, contentWidth_1 - containerWidth_1);
|
|
109
|
+
setContainerWidth(containerWidth_1);
|
|
110
|
+
setContentWidth(contentWidth_1);
|
|
111
|
+
setMaxScroll(newMaxScroll);
|
|
112
|
+
// Update scroll position based on current scroll
|
|
113
|
+
setScrollPosition(scrollContainer.scrollLeft);
|
|
114
|
+
}
|
|
98
115
|
if (containerRef.current) {
|
|
99
116
|
var headerHeight = ((_a = document.querySelector("header")) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;
|
|
100
117
|
var availableHeight = window.innerHeight - headerHeight - 100;
|
|
101
118
|
setContainerHeight(Math.max(500, availableHeight));
|
|
102
119
|
}
|
|
103
120
|
};
|
|
104
|
-
|
|
105
|
-
window.addEventListener("resize",
|
|
106
|
-
|
|
121
|
+
calculateDimensions();
|
|
122
|
+
window.addEventListener("resize", calculateDimensions);
|
|
123
|
+
// Recalculate when columns change
|
|
124
|
+
var timeoutId = setTimeout(calculateDimensions, 100);
|
|
125
|
+
return function () {
|
|
126
|
+
window.removeEventListener("resize", calculateDimensions);
|
|
127
|
+
clearTimeout(timeoutId);
|
|
128
|
+
};
|
|
129
|
+
}, [columns, isLoading]);
|
|
130
|
+
// Handle scroll events
|
|
131
|
+
(0, react_1.useEffect)(function () {
|
|
132
|
+
var scrollContainer = scrollContainerRef.current;
|
|
133
|
+
if (!scrollContainer)
|
|
134
|
+
return;
|
|
135
|
+
var handleScroll = function () {
|
|
136
|
+
setScrollPosition(scrollContainer.scrollLeft);
|
|
137
|
+
};
|
|
138
|
+
scrollContainer.addEventListener("scroll", handleScroll);
|
|
139
|
+
return function () { return scrollContainer.removeEventListener("scroll", handleScroll); };
|
|
107
140
|
}, []);
|
|
141
|
+
var handleCustomScroll = function (e) {
|
|
142
|
+
var scrollContainer = scrollContainerRef.current;
|
|
143
|
+
if (!scrollContainer || maxScroll <= 0)
|
|
144
|
+
return;
|
|
145
|
+
var rect = e.currentTarget.getBoundingClientRect();
|
|
146
|
+
var clickX = e.clientX - rect.left;
|
|
147
|
+
var scrollbarWidth = rect.width;
|
|
148
|
+
// Calculate the scroll position directly
|
|
149
|
+
var scrollPercentage = clickX / scrollbarWidth;
|
|
150
|
+
var newScroll = scrollPercentage * maxScroll;
|
|
151
|
+
// Use scrollLeft for instant scrolling
|
|
152
|
+
scrollContainer.scrollLeft = newScroll;
|
|
153
|
+
};
|
|
154
|
+
// Calculate scrollbar thumb width and position
|
|
155
|
+
var scrollbarThumbWidth = maxScroll > 0 && containerWidth > 0
|
|
156
|
+
? Math.max(30, (containerWidth / contentWidth) * 100)
|
|
157
|
+
: 100;
|
|
158
|
+
var scrollbarThumbPosition = maxScroll > 0
|
|
159
|
+
? (scrollPosition / maxScroll) * (100 - Math.max(30, scrollbarThumbWidth))
|
|
160
|
+
: 0;
|
|
108
161
|
// toggle expand/collapse
|
|
109
162
|
var toggleExpand = function (id, colId, index) {
|
|
110
163
|
setExpanded(function (prev) {
|
|
@@ -156,56 +209,70 @@ var KanbanBoard = function (_a) {
|
|
|
156
209
|
var index = _a.index, style = _a.style, data = _a.data;
|
|
157
210
|
var items = data.items, colId = data.colId, placeholder = data.placeholder;
|
|
158
211
|
var account = items[index];
|
|
159
|
-
return (react_1.default.createElement("div", { style:
|
|
212
|
+
return (react_1.default.createElement("div", { style: style },
|
|
160
213
|
react_1.default.createElement(MeasuredItem_1.default, { index: index, setSize: function (i, h) { return setSize(i, h, colId); } },
|
|
161
|
-
react_1.default.createElement(
|
|
162
|
-
react_1.default.createElement(
|
|
214
|
+
react_1.default.createElement("div", { style: { marginBottom: 12 } },
|
|
215
|
+
react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id }, function (provided) { return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
|
|
216
|
+
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); } }))); }))),
|
|
163
217
|
index === items.length - 1 && placeholder));
|
|
164
218
|
};
|
|
165
219
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
166
220
|
react_1.default.createElement(HeaderActions_1.default, { select: kanbanSelect, edit: kanbanEdit, create: kanbanCreate }),
|
|
167
221
|
react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: onDragEnd },
|
|
168
|
-
react_1.default.createElement(react_2.
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
react_1.default.createElement(
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
react_1.default.createElement(
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
222
|
+
react_1.default.createElement(react_2.Box, { ref: containerRef, bg: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200], minH: "".concat(containerHeight, "px"), position: "relative" },
|
|
223
|
+
react_1.default.createElement(react_2.Box, { position: "relative", top: "0", zIndex: 1000, bg: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200], height: "8px", borderRadius: "6px", cursor: maxScroll > 0 ? "pointer" : "default", onClick: maxScroll > 0 ? handleCustomScroll : undefined, overflow: "hidden", _hover: {
|
|
224
|
+
"& .scrollbar-thumb": {
|
|
225
|
+
bg: (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[600],
|
|
226
|
+
},
|
|
227
|
+
} },
|
|
228
|
+
react_1.default.createElement(react_2.Box, { className: "scrollbar-thumb", height: "100%", borderRadius: "6px", bg: maxScroll > 0 ? (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[400] : "transparent", width: "".concat(scrollbarThumbWidth, "%"), transform: "translateX(".concat(scrollbarThumbPosition, "%)"), transition: "transform 0.05s ease, background 0.2s ease", position: "absolute", left: "0", minWidth: "10px" })),
|
|
229
|
+
react_1.default.createElement(react_2.Flex, { ref: scrollContainerRef, gap: 4, p: 4, overflowX: "auto", css: {
|
|
230
|
+
"&::-webkit-scrollbar": {
|
|
231
|
+
display: "none",
|
|
232
|
+
},
|
|
233
|
+
scrollbarWidth: "none",
|
|
234
|
+
"-ms-overflow-style": "none",
|
|
235
|
+
} }, isLoading
|
|
236
|
+
? Array.from({ length: 5 }).map(function (_, idx) {
|
|
237
|
+
var _a, _b;
|
|
238
|
+
return (react_1.default.createElement(react_2.Box, { key: idx, width: columnWidth, 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 },
|
|
239
|
+
react_1.default.createElement(react_2.Skeleton, { height: "2.75rem", mb: 4, borderRadius: "0.25rem" }),
|
|
240
|
+
react_1.default.createElement(react_2.SkeletonText, { mt: "4", noOfLines: 5, spacing: "4" })));
|
|
241
|
+
})
|
|
242
|
+
: Object.entries(columns).map(function (_a) {
|
|
243
|
+
var colId = _a[0], column = _a[1];
|
|
244
|
+
return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId, key: colId, mode: virtualization ? "virtual" : "standard", renderClone: function (provided, _snapshot, rubric) {
|
|
245
|
+
var item = column.items[rubric.source.index];
|
|
246
|
+
return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: __assign(__assign({}, provided.draggableProps.style), { width: columnWidth, marginBottom: 12 }) }),
|
|
247
|
+
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 () {
|
|
248
|
+
return toggleExpand(item.id, colId, rubric.source.index);
|
|
249
|
+
} })));
|
|
250
|
+
} }, function (provided, snapshot) {
|
|
251
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
252
|
+
return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.droppableProps, { width: columnWidth, borderRadius: "0.5rem", borderWidth: "0.063rem", background: snapshot.isDraggingOver
|
|
253
|
+
? (_a = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _a === void 0 ? void 0 : _a[50]
|
|
254
|
+
: (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver
|
|
255
|
+
? "0.5px dashed " + ((_c = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _c === void 0 ? void 0 : _c[500])
|
|
256
|
+
: "0.125rem solid " + ((_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200])), display: "flex", flexDirection: "column", flexShrink: 0, overflow: "hidden", height: "".concat(containerHeight - 32, "px"), onMouseEnter: function () { return setHoveredColumn(colId); }, onMouseLeave: function () { return setHoveredColumn(null); } }),
|
|
257
|
+
react_1.default.createElement(react_2.Flex, { width: "95%", 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, m: 2, flexShrink: 0, justifyContent: "space-between", position: "relative" },
|
|
258
|
+
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),
|
|
259
|
+
hoveredColumn === colId && column.items.length > 0 && (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); }, transition: "color 0.2s ease" })),
|
|
260
|
+
!(hoveredColumn === colId && column.items.length > 0) && (react_1.default.createElement(react_2.Box, { width: "16px", height: "16px" }))),
|
|
261
|
+
react_1.default.createElement(react_2.Box, { px: 2, pb: 2, flex: "1", overflow: "auto", width: "100%" }, virtualization ? (react_1.default.createElement(react_window_1.VariableSizeList, { ref: function (el) {
|
|
262
|
+
if (el)
|
|
263
|
+
listRefs.current[colId] = el;
|
|
264
|
+
}, height: containerHeight - 140, itemCount: column.items.length, itemSize: function (index) { return getItemSize(index, column.items, colId); }, width: "100%", itemData: {
|
|
265
|
+
items: column.items,
|
|
266
|
+
colId: colId,
|
|
267
|
+
placeholder: provided.placeholder,
|
|
268
|
+
} }, Row)) : (react_1.default.createElement(react_2.Box, { height: "100%", overflow: "auto" },
|
|
269
|
+
column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { marginBottom: 12 } },
|
|
270
|
+
react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id }, function (provided) { return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
|
|
271
|
+
react_1.default.createElement(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
|
|
272
|
+
return toggleExpand(account.id, colId, index);
|
|
273
|
+
} }))); }))); }),
|
|
274
|
+
provided.placeholder)))));
|
|
275
|
+
}));
|
|
276
|
+
}))))));
|
|
210
277
|
};
|
|
211
278
|
exports.default = KanbanBoard;
|
|
@@ -122,8 +122,12 @@ function NoteTextArea(_a) {
|
|
|
122
122
|
setFileError("");
|
|
123
123
|
};
|
|
124
124
|
var handleNoteChange = function (e) {
|
|
125
|
-
|
|
126
|
-
|
|
125
|
+
var value = e.target.value;
|
|
126
|
+
// Allow typing, but prevent updating state with only spaces
|
|
127
|
+
if (value.trim() === "" && value !== "")
|
|
128
|
+
return;
|
|
129
|
+
setNoteValue(value);
|
|
130
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(value);
|
|
127
131
|
adjustHeight();
|
|
128
132
|
};
|
|
129
133
|
var formatBytes = function (bytes, decimals) {
|