pixelize-design-library 2.3.1-beta.10 → 2.3.1-beta.11
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.
- package/dist/Components/Table/Table.js +32 -12
- package/dist/Components/Table/components/Pagination.js +1 -1
- package/dist/Components/Table/components/TableBody.js +15 -12
- package/dist/Components/Table/hooks/useTable.d.ts +1 -0
- package/dist/Components/Table/hooks/useTable.js +16 -3
- package/package.json +1 -1
|
@@ -133,7 +133,7 @@ function Table(_a) {
|
|
|
133
133
|
isServerPagination: isServerPagination,
|
|
134
134
|
onNoOfRowsPerPageChange: onNoOfRowsPerPageChange,
|
|
135
135
|
defaultVisibleColumns: defaultVisibleColumns,
|
|
136
|
-
}), tableData = _33.tableData, isContent = _33.isContent, isLink = _33.isLink, headerRefs = _33.headerRefs, columnWidths = _33.columnWidths, handleSort = _33.handleSort, handleCheckbox = _33.handleCheckbox, filteredData = _33.filteredData, startRow = _33.startRow, endRow = _33.endRow, selection = _33.selection, columnsSort = _33.columnsSort, currentPage = _33.currentPage, pages = _33.pages, rowsPerPage = _33.rowsPerPage, handlePageSizeChange = _33.handlePageSizeChange, setCurrentPage = _33.setCurrentPage, columnsList = _33.columnsList, handleColumnPreferences = _33.handleColumnPreferences, isSelecting = _33.isSelecting;
|
|
136
|
+
}), tableData = _33.tableData, isContent = _33.isContent, isLink = _33.isLink, headerRefs = _33.headerRefs, columnWidths = _33.columnWidths, handleSort = _33.handleSort, handleCheckbox = _33.handleCheckbox, filteredData = _33.filteredData, startRow = _33.startRow, endRow = _33.endRow, selection = _33.selection, columnsSort = _33.columnsSort, currentPage = _33.currentPage, pages = _33.pages, rowsPerPage = _33.rowsPerPage, handlePageSizeChange = _33.handlePageSizeChange, setCurrentPage = _33.setCurrentPage, columnsList = _33.columnsList, handleColumnPreferences = _33.handleColumnPreferences, isSelecting = _33.isSelecting, selectAllRowsRef = _33.selectAllRowsRef;
|
|
137
137
|
// Density + grouping are managed here so the Table Settings tabs can change +
|
|
138
138
|
// persist them (seeded from the prop / saved preferences when they load).
|
|
139
139
|
var _34 = (0, react_1.useState)(density), densityState = _34[0], setDensityState = _34[1];
|
|
@@ -230,7 +230,10 @@ function Table(_a) {
|
|
|
230
230
|
: isServerPagination
|
|
231
231
|
? loadMoreBase.length < totalRecords
|
|
232
232
|
: false;
|
|
233
|
-
var
|
|
233
|
+
var groupLoadMoreActive = isGrouped && groupLoadMore;
|
|
234
|
+
// Keep the button while a load is in flight (so a transient empty `data` during
|
|
235
|
+
// fetching doesn't make it flicker); hide it once loading settles with no more.
|
|
236
|
+
var canGroupLoadMore = groupLoadMoreActive && (hasMoreEffective || isLoadingMore);
|
|
234
237
|
var groupPalette = (0, react_1.useMemo)(function () { return (0, table_1.buildTablePalette)(theme); }, [theme]);
|
|
235
238
|
var groupedSource = (0, react_1.useMemo)(function () {
|
|
236
239
|
if (!isGrouped)
|
|
@@ -243,6 +246,18 @@ function Table(_a) {
|
|
|
243
246
|
return undefined;
|
|
244
247
|
return (0, table_1.groupRows)(groupedSource, groupByState).map(function (g) { return (__assign(__assign({}, g), { color: (0, table_1.pickTableColor)(g.value, groupPalette, groupColors === null || groupColors === void 0 ? void 0 : groupColors[g.value]) })); });
|
|
245
248
|
}, [isGrouped, groupedSource, groupByState, groupPalette, groupColors]);
|
|
249
|
+
// "Select all" + header checkbox operate on the rows actually rendered: the
|
|
250
|
+
// accumulated grouped source when grouped, otherwise the table data.
|
|
251
|
+
var selectAllRows = isGrouped ? groupedSource : tableData;
|
|
252
|
+
selectAllRowsRef.current = isGrouped ? groupedSource : null;
|
|
253
|
+
var headerChecked = (0, react_1.useMemo)(function () {
|
|
254
|
+
if (selection.length === 0)
|
|
255
|
+
return false;
|
|
256
|
+
if (selectAllRows.length === 0)
|
|
257
|
+
return false;
|
|
258
|
+
var sel = new Set(selection);
|
|
259
|
+
return selectAllRows.every(function (r) { return sel.has(r.id); }) ? true : "indeterminate";
|
|
260
|
+
}, [selection, selectAllRows]);
|
|
246
261
|
var onPaginationRef = (0, react_1.useRef)(onPagination);
|
|
247
262
|
onPaginationRef.current = onPagination;
|
|
248
263
|
var prevPageRef = (0, react_1.useRef)(currentPage);
|
|
@@ -288,7 +303,16 @@ function Table(_a) {
|
|
|
288
303
|
pendingLoadMoreRef.current = true;
|
|
289
304
|
(_a = onPaginationRef.current) === null || _a === void 0 ? void 0 : _a.call(onPaginationRef, nextPage, chunk, lastRecord, "next");
|
|
290
305
|
};
|
|
291
|
-
|
|
306
|
+
// While more can load → live count; once everything's loaded → "Showing all
|
|
307
|
+
// records" (the running total isn't shown because de-duped/server totals can
|
|
308
|
+
// disagree, e.g. "250 of 250" would be misleading).
|
|
309
|
+
var groupLoadMoreCaption = !groupLoadMoreActive || isTableLoading || loadMoreBase.length === 0
|
|
310
|
+
? undefined
|
|
311
|
+
: canGroupLoadMore
|
|
312
|
+
? totalRecords > 0
|
|
313
|
+
? "Showing ".concat(loadMoreBase.length, " of ").concat(totalRecords)
|
|
314
|
+
: "Showing ".concat(loadMoreBase.length)
|
|
315
|
+
: "Showing all records";
|
|
292
316
|
var tablePaginationText = (0, react_1.useMemo)(function () { return isServerPagination
|
|
293
317
|
? "".concat(startRow + 1, " - ").concat(Math.min(startRow + rowsPerPage, totalRecords), " of ").concat(totalRecords)
|
|
294
318
|
: "".concat(startRow + 1, " - ").concat(endRow > tableData.length ? tableData.length : endRow, " of ").concat(tableData.length); }, [startRow, rowsPerPage, totalRecords, endRow, tableData.length]);
|
|
@@ -407,9 +431,9 @@ function Table(_a) {
|
|
|
407
431
|
react_1.default.createElement(HeaderActions_1.default, { actions: headerActions, selections: selection }))),
|
|
408
432
|
react_1.default.createElement(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }),
|
|
409
433
|
react_1.default.createElement(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2 },
|
|
410
|
-
|
|
434
|
+
groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto" },
|
|
411
435
|
groupLoadMoreCaption && (react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.text) === null || _x === void 0 ? void 0 : _x[500], whiteSpace: "nowrap" }, groupLoadMoreCaption)),
|
|
412
|
-
react_1.default.createElement(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))),
|
|
436
|
+
canGroupLoadMore && (react_1.default.createElement(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText })))),
|
|
413
437
|
(isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && (react_1.default.createElement(react_2.Box, { flex: "0 0 auto" },
|
|
414
438
|
react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }))),
|
|
415
439
|
(isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && tableData.length > 0 && (react_1.default.createElement(react_2.Popover, { placement: "bottom-end" },
|
|
@@ -462,17 +486,13 @@ function Table(_a) {
|
|
|
462
486
|
},
|
|
463
487
|
} },
|
|
464
488
|
react_1.default.createElement(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: (_2 = (_1 = (_0 = theme.colors.table) === null || _0 === void 0 ? void 0 : _0.hover) === null || _1 === void 0 ? void 0 : _1[200]) !== null && _2 !== void 0 ? _2 : (_3 = theme.colors.secondary) === null || _3 === void 0 ? void 0 : _3[50] },
|
|
465
|
-
react_1.default.createElement(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, headerTextColor: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_4 = theme.colors) === null || _4 === void 0 ? void 0 : _4.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_5 = theme.colors) === null || _5 === void 0 ? void 0 : _5.gray[600], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked:
|
|
466
|
-
? true
|
|
467
|
-
: selection.length === 0
|
|
468
|
-
? false
|
|
469
|
-
: "indeterminate", isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting })),
|
|
489
|
+
react_1.default.createElement(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, headerTextColor: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_4 = theme.colors) === null || _4 === void 0 ? void 0 : _4.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_5 = theme.colors) === null || _5 === void 0 ? void 0 : _5.gray[600], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting })),
|
|
470
490
|
react_1.default.createElement(react_3.Tbody, null,
|
|
471
491
|
react_1.default.createElement(TableBody_1.default, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, endRow: endRow, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_6 = theme.colors) === null || _6 === void 0 ? void 0 : _6.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }))),
|
|
472
492
|
canInfinite && isLoadingMore && (react_1.default.createElement(react_2.Flex, { justify: "center", align: "center", py: 3, gap: 2 },
|
|
473
493
|
react_1.default.createElement(react_2.Spinner, { size: "sm", color: (_8 = (_7 = theme.colors) === null || _7 === void 0 ? void 0 : _7.primary) === null || _8 === void 0 ? void 0 : _8[500] }),
|
|
474
494
|
react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_10 = (_9 = theme.colors) === null || _9 === void 0 ? void 0 : _9.text) === null || _10 === void 0 ? void 0 : _10[500] }, "Loading more\u2026")))),
|
|
475
|
-
|
|
495
|
+
groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && (react_1.default.createElement(react_2.Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: "0.063rem solid ".concat((_11 = theme.colors.border) === null || _11 === void 0 ? void 0 : _11[500]) },
|
|
476
496
|
groupLoadMoreCaption && (react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_13 = (_12 = theme.colors) === null || _12 === void 0 ? void 0 : _12.text) === null || _13 === void 0 ? void 0 : _13[500] }, groupLoadMoreCaption)),
|
|
477
|
-
react_1.default.createElement(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText })))))));
|
|
497
|
+
canGroupLoadMore && (react_1.default.createElement(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))))))));
|
|
478
498
|
}
|
|
@@ -49,7 +49,7 @@ var Pagination = react_1.default.memo(function (_a) {
|
|
|
49
49
|
var isLeftDisabled = dataLength === 0 || currentPage === 0;
|
|
50
50
|
var isRightDisabled = dataLength === 0 || currentPage >= pages - 1;
|
|
51
51
|
return (react_1.default.createElement(react_2.Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap" },
|
|
52
|
-
(!isServerPagination || paginationSelectOptions) && (react_1.default.createElement(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: 3, width:
|
|
52
|
+
(!isServerPagination || paginationSelectOptions) && (react_1.default.createElement(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: 3, width: "auto", minW: "4.5rem", isDisabled: dataLength === 0 },
|
|
53
53
|
!paginationSelectOptions && dataLength < 100 ? react_1.default.createElement("option", { value: 0 }) : null,
|
|
54
54
|
computedOptions.map(function (size, index) { return (react_1.default.createElement("option", { key: index, value: size }, String(size))); }))),
|
|
55
55
|
dataLength > 0 && (react_1.default.createElement(react_2.Flex, { w: "100%" },
|
|
@@ -62,14 +62,14 @@ var StatusCell = function (_a) {
|
|
|
62
62
|
var EMPTY_SX = {};
|
|
63
63
|
var EMPTY_HOVER = {};
|
|
64
64
|
var TableRow = react_2.default.memo(function (_a) {
|
|
65
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
65
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
|
|
66
66
|
var row = _a.row, rowIndex = _a.rowIndex, index = _a.index, isChecked = _a.isChecked, isExpanded = _a.isExpanded, isContent = _a.isContent, isLink = _a.isLink, isCheckbox = _a.isCheckbox, isLoading = _a.isLoading, isActionFreeze = _a.isActionFreeze, columns = _a.columns, leftOffsets = _a.leftOffsets, noBorders = _a.noBorders, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, theme = _a.theme, borderStyle = _a.borderStyle, hoverStyle = _a.hoverStyle, rowHeight = _a.rowHeight, cellPy = _a.cellPy, palette = _a.palette, accentColor = _a.accentColor, handleCheckbox = _a.handleCheckbox, onRowClick = _a.onRowClick, toggleRowExpansion = _a.toggleRowExpansion, onMeasure = _a.onMeasure;
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
67
|
+
// Selected-row tint applied per-cell (NOT a blanket `& td` override) so status
|
|
68
|
+
// cells keep their solid color + white text instead of white-on-tint.
|
|
69
|
+
var selectedBg = (_d = (_c = (_b = theme.colors.primary) === null || _b === void 0 ? void 0 : _b.opacity) === null || _c === void 0 ? void 0 : _c[16]) !== null && _d !== void 0 ? _d : (_e = theme.colors.disabled) === null || _e === void 0 ? void 0 : _e[100];
|
|
70
|
+
// Sticky/frozen cells overlay scrolling content, so their selected background
|
|
71
|
+
// must be OPAQUE — paint the (translucent) tint over an opaque base.
|
|
72
|
+
var selectedFrozenBg = "linear-gradient(0deg, ".concat(selectedBg, ", ").concat(selectedBg, "), ").concat((_h = (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.background) === null || _g === void 0 ? void 0 : _g[50]) !== null && _h !== void 0 ? _h : "#fff");
|
|
73
73
|
// Measured-height virtualization: report this row's real height (main + any
|
|
74
74
|
// expanded panel) so the windower can place variable/expandable rows exactly.
|
|
75
75
|
var mainRowRef = (0, react_2.useRef)(null);
|
|
@@ -108,10 +108,13 @@ var TableRow = react_2.default.memo(function (_a) {
|
|
|
108
108
|
}, [row, onRowClick]);
|
|
109
109
|
var firstDataColIndex = columns.findIndex(function (c) { return !c.isHidden; });
|
|
110
110
|
var accentSx = accentColor ? "inset 3px 0 0 ".concat(accentColor) : undefined;
|
|
111
|
+
// Pinned/frozen columns get a tinted, opaque background so the frozen pane reads
|
|
112
|
+
// as one piece with its header (and so sticky cells cover scrolling content).
|
|
113
|
+
var frozenCellBg = (_m = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : (_l = (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.table) === null || _k === void 0 ? void 0 : _k.hover) === null || _l === void 0 ? void 0 : _l[100]) !== null && _m !== void 0 ? _m : (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.background) === null || _p === void 0 ? void 0 : _p[100];
|
|
111
114
|
return (react_2.default.createElement(react_2.default.Fragment, null,
|
|
112
|
-
react_2.default.createElement(react_1.Tr, { ref: mainRowRef, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s"
|
|
113
|
-
isContent && (react_2.default.createElement(react_1.Td, { w: "6", p: 0, fontSize: 14,
|
|
114
|
-
isCheckbox && (react_2.default.createElement(react_1.Td, { w: "6", fontSize: 14, fontWeight: 600, color: (
|
|
115
|
+
react_2.default.createElement(react_1.Tr, { ref: mainRowRef, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s" },
|
|
116
|
+
isContent && (react_2.default.createElement(react_1.Td, { w: "6", p: 0, fontSize: 14, background: isChecked ? selectedFrozenBg : frozenCellBg, color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxShadow: accentSx, boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" }, !!(row === null || row === void 0 ? void 0 : row.content) && (react_2.default.createElement(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.gray[600], icon: isExpanded ? (react_2.default.createElement(lucide_react_1.ChevronDown, { fontSize: 16 })) : (react_2.default.createElement(lucide_react_1.ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: function () { return toggleRowExpansion(rowIndex); }, variant: "ghost" })))),
|
|
117
|
+
isCheckbox && (react_2.default.createElement(react_1.Td, { w: "6", fontSize: 14, fontWeight: 600, color: (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.background) === null || _s === void 0 ? void 0 : _s[50], textTransform: "capitalize", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? accentSx : undefined, boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" },
|
|
115
118
|
react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", onChange: function () { return handleCheckbox(row.id); }, isChecked: isChecked }))),
|
|
116
119
|
columns.map(function (header, headerIndex) {
|
|
117
120
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
@@ -124,7 +127,7 @@ var TableRow = react_2.default.memo(function (_a) {
|
|
|
124
127
|
var statusColor = isStatus
|
|
125
128
|
? (0, table_1.pickTableColor)(rawStatus, palette, (_b = header.statusColors) === null || _b === void 0 ? void 0 : _b[rawStatus])
|
|
126
129
|
: null;
|
|
127
|
-
return (react_2.default.createElement(react_1.Td, { maxWidth: 500, minWidth: 120, height: "".concat(rowHeight, "px"), py: isStatus && statusColor ? 0 : cellPy, px: isStatus && statusColor ? 0 : undefined, key: headerIndex + 1, onClick: function () { return handleCellClick(header); }, fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffsets[headerIndex] : undefined, zIndex: isFrozen ? 1 : 0,
|
|
130
|
+
return (react_2.default.createElement(react_1.Td, { maxWidth: 500, minWidth: 120, height: "".concat(rowHeight, "px"), py: isStatus && statusColor ? 0 : cellPy, px: isStatus && statusColor ? 0 : undefined, key: headerIndex + 1, onClick: function () { return handleCellClick(header); }, fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffsets[headerIndex] : undefined, zIndex: isFrozen ? 1 : 0, background: isStatus && statusColor ? statusColor.solid : isChecked ? (isFrozen ? selectedFrozenBg : selectedBg) : isFrozen ? frozenCellBg : (_c = theme.colors.background) === null || _c === void 0 ? void 0 : _c[50], textOverflow: "ellipsis", boxShadow: isFirstDataCell ? accentSx : undefined, borderBottom: noBorders
|
|
128
131
|
? "none"
|
|
129
132
|
: "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[isFrozen || isChecked ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: isStatus && statusColor ? "white" : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.text) === null || _f === void 0 ? void 0 : _f[500], _hover: isStatus && statusColor
|
|
130
133
|
? EMPTY_HOVER
|
|
@@ -132,7 +135,7 @@ var TableRow = react_2.default.memo(function (_a) {
|
|
|
132
135
|
? EMPTY_HOVER
|
|
133
136
|
: hoverStyle }, isStatus && statusColor ? (react_2.default.createElement(StatusCell, { value: (0, table_1.normalizeTableCellValue)(row[header.id]) })) : (react_2.default.createElement(react_1.Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word" }, (0, table_1.normalizeTableCellValue)(header.node ? header.node(row) : row[header.id])))));
|
|
134
137
|
}),
|
|
135
|
-
isLink && (react_2.default.createElement(react_1.Td, { w: 2, p: 0, fontSize: 14,
|
|
138
|
+
isLink && (react_2.default.createElement(react_1.Td, { w: 2, p: 0, fontSize: 14, background: isChecked ? (isActionFreeze ? selectedFrozenBg : selectedBg) : isActionFreeze ? frozenCellBg : (_u = (_t = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _t === void 0 ? void 0 : _t.background) === null || _u === void 0 ? void 0 : _u[50], color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", borderBottom: borderStyle, boxSizing: "border-box", right: 0, zIndex: 1, className: "columns sticky-columns".concat(isActionFreeze ? "-right" : "") }, (row.onLink || row.onEdit || row.onDelete) && (react_2.default.createElement(TableActions_1.default, { row: row }))))),
|
|
136
139
|
row.content && isExpanded && (react_2.default.createElement(react_1.Tr, { ref: expandedRowRef },
|
|
137
140
|
react_2.default.createElement(react_1.Td, { colSpan: columns.length +
|
|
138
141
|
(isCheckbox ? 1 : 0) +
|
|
@@ -43,5 +43,6 @@ declare const useTable: ({ tableBorderColor, data, isPagination, selections, onS
|
|
|
43
43
|
columnsList: TableHeaderProps[];
|
|
44
44
|
handleColumnPreferences: (columns: any, extra?: Record<string, any>) => void;
|
|
45
45
|
isSelecting: boolean;
|
|
46
|
+
selectAllRowsRef: import("react").MutableRefObject<DataObject[] | null>;
|
|
46
47
|
};
|
|
47
48
|
export default useTable;
|
|
@@ -162,14 +162,26 @@ var useTable = function (_a) {
|
|
|
162
162
|
selectionRef.current = selection;
|
|
163
163
|
var onSelectionRef = (0, react_1.useRef)(onSelection);
|
|
164
164
|
onSelectionRef.current = onSelection;
|
|
165
|
+
// Rows that "select all" should toggle. Defaults to `tableData`, but in grouped
|
|
166
|
+
// "load more" mode the parent points this at the accumulated/rendered rows so
|
|
167
|
+
// select-all covers everything on screen (not just the latest page).
|
|
168
|
+
var selectAllRowsRef = (0, react_1.useRef)(null);
|
|
165
169
|
var handleCheckbox = (0, react_1.useCallback)(function (id) {
|
|
166
|
-
var _a;
|
|
170
|
+
var _a, _b;
|
|
167
171
|
var current = selectionRef.current;
|
|
168
172
|
if (id === 0) {
|
|
173
|
+
var rows = (_a = selectAllRowsRef.current) !== null && _a !== void 0 ? _a : tableData;
|
|
174
|
+
var ids_1 = rows.map(function (item) { return item.id; });
|
|
175
|
+
var idSet_1 = new Set(ids_1);
|
|
176
|
+
var currentSet_1 = new Set(current);
|
|
177
|
+
var allSelected_1 = ids_1.length > 0 && ids_1.every(function (i) { return currentSet_1.has(i); });
|
|
169
178
|
setIsSelecting(true);
|
|
170
179
|
setTimeout(function () {
|
|
171
180
|
var _a;
|
|
172
|
-
|
|
181
|
+
// Toggle the rendered rows while preserving any selection outside them.
|
|
182
|
+
var selectedItems = allSelected_1
|
|
183
|
+
? current.filter(function (i) { return !idSet_1.has(i); })
|
|
184
|
+
: Array.from(new Set(__spreadArray(__spreadArray([], current, true), ids_1, true)));
|
|
173
185
|
setSelection(selectedItems);
|
|
174
186
|
(_a = onSelectionRef.current) === null || _a === void 0 ? void 0 : _a.call(onSelectionRef, selectedItems);
|
|
175
187
|
setIsSelecting(false);
|
|
@@ -184,7 +196,7 @@ var useTable = function (_a) {
|
|
|
184
196
|
selectedItems = __spreadArray(__spreadArray([], current, true), [id], false);
|
|
185
197
|
}
|
|
186
198
|
setSelection(selectedItems);
|
|
187
|
-
(
|
|
199
|
+
(_b = onSelectionRef.current) === null || _b === void 0 ? void 0 : _b.call(onSelectionRef, selectedItems);
|
|
188
200
|
}
|
|
189
201
|
}, [tableData]);
|
|
190
202
|
var handleColumnPreferences = function (columns, extra) {
|
|
@@ -215,6 +227,7 @@ var useTable = function (_a) {
|
|
|
215
227
|
columnsList: columnsList,
|
|
216
228
|
handleColumnPreferences: handleColumnPreferences,
|
|
217
229
|
isSelecting: isSelecting,
|
|
230
|
+
selectAllRowsRef: selectAllRowsRef,
|
|
218
231
|
};
|
|
219
232
|
};
|
|
220
233
|
exports.default = useTable;
|