pixelize-design-library 2.3.1-beta.10 → 2.3.1-beta.12
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 +48 -28
- package/dist/Components/Table/TableProps.d.ts +2 -2
- package/dist/Components/Table/components/Pagination.js +1 -1
- package/dist/Components/Table/components/TableBody.js +15 -12
- package/dist/Components/Table/components/TableHeader.d.ts +1 -1
- package/dist/Components/Table/components/TableHeader.js +7 -7
- package/dist/Components/Table/hooks/useTable.d.ts +1 -0
- package/dist/Components/Table/hooks/useTable.js +16 -3
- package/package.json +1 -1
|
@@ -78,30 +78,30 @@ var Button_1 = __importDefault(require("../Button/Button"));
|
|
|
78
78
|
var lucide_react_1 = require("lucide-react");
|
|
79
79
|
var MotionBox = (0, framer_motion_1.motion)(react_2.Box);
|
|
80
80
|
function Table(_a) {
|
|
81
|
-
var _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, _8, _9, _10, _11, _12
|
|
82
|
-
var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading,
|
|
81
|
+
var _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, _8, _9, _10, _11, _12;
|
|
82
|
+
var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _13 = _a.isCheckbox, isCheckbox = _13 === void 0 ? false : _13, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _14 = _a.noBorders, noBorders = _14 === void 0 ? false : _14, _15 = _a.isPagination, isPagination = _15 === void 0 ? true : _15, onRowClick = _a.onRowClick, selections = _a.selections, _16 = _a.isActionFreeze, isActionFreeze = _16 === void 0 ? true : _16, _17 = _a.preferences, preferences = _17 === void 0 ? {
|
|
83
83
|
url: "",
|
|
84
84
|
token: "",
|
|
85
85
|
key: "",
|
|
86
86
|
name: "",
|
|
87
87
|
page: "",
|
|
88
88
|
orgId: "",
|
|
89
|
-
} :
|
|
89
|
+
} : _17, _18 = _a.paginationMode, paginationMode = _18 === void 0 ? "client" : _18, _19 = _a.infiniteScroll, infiniteScroll = _19 === void 0 ? false : _19, hasMore = _a.hasMore, _20 = _a.isLoadingMore, isLoadingMore = _20 === void 0 ? false : _20, _21 = _a.groupLoadMore, groupLoadMore = _21 === void 0 ? false : _21, _22 = _a.loadMoreText, loadMoreText = _22 === void 0 ? "Load more" : _22, _23 = _a.loadMorePosition, loadMorePosition = _23 === void 0 ? "top" : _23, loadMoreChunkSize = _a.loadMoreChunkSize, _24 = _a.noOfRowsPerPage, noOfRowsPerPage = _24 === void 0 ? 50 : _24, _25 = _a.totalRecords, totalRecords = _25 === void 0 ? 0 : _25, onPagination = _a.onPagination, _26 = _a.isTableSettings, isTableSettings = _26 === void 0 ? false : _26, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch, onNoOfRowsPerPageChange = _a.onNoOfRowsPerPageChange, paginationSelectOptions = _a.paginationSelectOptions, tableMaxHeight = _a.tableMaxHeight, minVisibleRows = _a.minVisibleRows, maxVisibleRows = _a.maxVisibleRows, autoFitViewport = _a.autoFitViewport, tableSettings = _a.tableSettings, filterSidebar = _a.filterSidebar, loadingSkeletonRows = _a.loadingSkeletonRows, defaultVisibleColumns = _a.defaultVisibleColumns, _27 = _a.density, density = _27 === void 0 ? "normal" : _27, stripe = _a.stripe, groupColors = _a.groupColors, onAddItem = _a.onAddItem, emptyState = _a.emptyState;
|
|
90
90
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
91
|
-
var
|
|
91
|
+
var _28 = (0, react_1.useState)({}), columnsSearch = _28[0], setColumnsSearch = _28[1];
|
|
92
92
|
var tableContainerRef = (0, react_1.useRef)(null);
|
|
93
|
-
var
|
|
93
|
+
var _29 = (0, react_2.useDisclosure)(), isFilterModalOpen = _29.isOpen, onFilterModalOpen = _29.onOpen, onFilterModalClose = _29.onClose;
|
|
94
94
|
var filterMode = (_b = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterMode) !== null && _b !== void 0 ? _b : "sidebar";
|
|
95
|
-
var
|
|
95
|
+
var _30 = (0, react_1.useState)(500), viewportAvailableH = _30[0], setViewportAvailableH = _30[1];
|
|
96
96
|
var isServerPagination = paginationMode === "server";
|
|
97
|
-
var
|
|
97
|
+
var _31 = (0, usePreferences_1.useGetPreferences)({
|
|
98
98
|
baseUrl: preferences.url,
|
|
99
99
|
page: preferences.page,
|
|
100
100
|
key: preferences.key,
|
|
101
101
|
name: preferences.name,
|
|
102
102
|
authToken: preferences.token,
|
|
103
103
|
orgId: preferences.orgId,
|
|
104
|
-
}), tablePreferencesData =
|
|
104
|
+
}), tablePreferencesData = _31.preferences, loading = _31.loading;
|
|
105
105
|
var savePreferences = (0, usePreferences_1.useSavePreferences)({
|
|
106
106
|
baseUrl: preferences.url,
|
|
107
107
|
page: preferences.page,
|
|
@@ -119,7 +119,7 @@ function Table(_a) {
|
|
|
119
119
|
}
|
|
120
120
|
return {};
|
|
121
121
|
}, [tablePreferencesData]);
|
|
122
|
-
var
|
|
122
|
+
var _32 = (0, useTable_1.default)({
|
|
123
123
|
tableBorderColor: tableBorderColor,
|
|
124
124
|
data: data,
|
|
125
125
|
isPagination: isPagination,
|
|
@@ -133,17 +133,17 @@ function Table(_a) {
|
|
|
133
133
|
isServerPagination: isServerPagination,
|
|
134
134
|
onNoOfRowsPerPageChange: onNoOfRowsPerPageChange,
|
|
135
135
|
defaultVisibleColumns: defaultVisibleColumns,
|
|
136
|
-
}), tableData =
|
|
136
|
+
}), tableData = _32.tableData, isContent = _32.isContent, isLink = _32.isLink, headerRefs = _32.headerRefs, columnWidths = _32.columnWidths, handleSort = _32.handleSort, handleCheckbox = _32.handleCheckbox, filteredData = _32.filteredData, startRow = _32.startRow, endRow = _32.endRow, selection = _32.selection, columnsSort = _32.columnsSort, currentPage = _32.currentPage, pages = _32.pages, rowsPerPage = _32.rowsPerPage, handlePageSizeChange = _32.handlePageSizeChange, setCurrentPage = _32.setCurrentPage, columnsList = _32.columnsList, handleColumnPreferences = _32.handleColumnPreferences, isSelecting = _32.isSelecting, selectAllRowsRef = _32.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
|
-
var
|
|
139
|
+
var _33 = (0, react_1.useState)(density), densityState = _33[0], setDensityState = _33[1];
|
|
140
140
|
// Grouping is chosen by the user in Table Settings > Group and persisted to
|
|
141
141
|
// preferences (`json.groupBy`); there is no `groupBy` prop.
|
|
142
|
-
var
|
|
142
|
+
var _34 = (0, react_1.useState)(undefined), groupByState = _34[0], setGroupByState = _34[1];
|
|
143
143
|
// Grouped "Load more" accumulates pages here so loading more ADDS rows to the
|
|
144
144
|
// groups (server pagination replaces `data` each fetch). Reset on fresh loads
|
|
145
145
|
// (search / filter / sort / page-size). Only used in grouped + groupLoadMore mode.
|
|
146
|
-
var
|
|
146
|
+
var _35 = (0, react_1.useState)([]), accumulatedRows = _35[0], setAccumulatedRows = _35[1];
|
|
147
147
|
var pendingLoadMoreRef = (0, react_1.useRef)(false);
|
|
148
148
|
// Pages loaded so far (1 = the initial page). The next page is derived from this
|
|
149
149
|
// counter — NOT from the deduped row count — so overlapping rows across pages
|
|
@@ -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,
|
|
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, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_4 = theme.colors) === null || _4 === void 0 ? void 0 : _4.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
|
-
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 : (
|
|
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 : (_5 = theme.colors) === null || _5 === void 0 ? void 0 : _5.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
|
-
react_1.default.createElement(react_2.Spinner, { size: "sm", color: (
|
|
474
|
-
react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (
|
|
475
|
-
|
|
476
|
-
groupLoadMoreCaption && (react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (
|
|
477
|
-
react_1.default.createElement(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText })))))));
|
|
493
|
+
react_1.default.createElement(react_2.Spinner, { size: "sm", color: (_7 = (_6 = theme.colors) === null || _6 === void 0 ? void 0 : _6.primary) === null || _7 === void 0 ? void 0 : _7[500] }),
|
|
494
|
+
react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_9 = (_8 = theme.colors) === null || _8 === void 0 ? void 0 : _8.text) === null || _9 === void 0 ? void 0 : _9[500] }, "Loading more\u2026")))),
|
|
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((_10 = theme.colors.border) === null || _10 === void 0 ? void 0 : _10[500]) },
|
|
496
|
+
groupLoadMoreCaption && (react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_12 = (_11 = theme.colors) === null || _11 === void 0 ? void 0 : _11.text) === null || _12 === void 0 ? void 0 : _12[500] }, groupLoadMoreCaption)),
|
|
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
|
}
|
|
@@ -123,7 +123,7 @@ export type ColumnSortingProps = {
|
|
|
123
123
|
column: string | number;
|
|
124
124
|
direction: "asc" | "desc" | "none";
|
|
125
125
|
};
|
|
126
|
-
export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "headerBgColor" | "
|
|
126
|
+
export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "headerBgColor" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "isActionFreeze"> & {
|
|
127
127
|
handleSort: (label: string | number, type: "asc" | "desc" | "none") => void;
|
|
128
128
|
activeHeader?: string | null;
|
|
129
129
|
isPopoverOpen?: boolean;
|
|
@@ -172,7 +172,7 @@ export type TableFiltersProps = {
|
|
|
172
172
|
columnsSearch: string;
|
|
173
173
|
onClose: () => void;
|
|
174
174
|
};
|
|
175
|
-
export type ColumnHeaderProps = Pick<TableProps, "isCheckbox" | "headerBgColor" | "
|
|
175
|
+
export type ColumnHeaderProps = Pick<TableProps, "isCheckbox" | "headerBgColor" | "freezedBgColor" | "noBorders"> & Pick<TableHeaderPageProps, "handleSort" | "columnsSort"> & {
|
|
176
176
|
header: TableHeaderProps;
|
|
177
177
|
index: number;
|
|
178
178
|
columnWidths: number[];
|
|
@@ -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) +
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { TableHeaderPageProps } from "../TableProps";
|
|
3
|
-
declare const _default: React.MemoExoticComponent<({ columns, isCheckbox, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor,
|
|
3
|
+
declare const _default: React.MemoExoticComponent<({ columns, isCheckbox, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }: TableHeaderPageProps) => React.JSX.Element>;
|
|
4
4
|
export default _default;
|
|
@@ -55,12 +55,12 @@ var TableFilters_1 = __importDefault(require("../filters/TableFilters"));
|
|
|
55
55
|
var lucide_react_1 = require("lucide-react");
|
|
56
56
|
var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
|
|
57
57
|
var TableHeader = function (_a) {
|
|
58
|
-
var columns = _a.columns, isCheckbox = _a.isCheckbox, handleSort = _a.handleSort, headerRefs = _a.headerRefs, columnWidths = _a.columnWidths, columnsSort = _a.columnsSort, headerBgColor = _a.headerBgColor,
|
|
58
|
+
var columns = _a.columns, isCheckbox = _a.isCheckbox, handleSort = _a.handleSort, headerRefs = _a.headerRefs, columnWidths = _a.columnWidths, columnsSort = _a.columnsSort, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, checked = _a.checked, isLoading = _a.isLoading, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch, isSelecting = _a.isSelecting;
|
|
59
59
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
60
60
|
var _b = (0, react_2.useState)(null), openFilterId = _b[0], setOpenFilterId = _b[1];
|
|
61
61
|
var RenderCheckbox = (0, react_2.useCallback)(function () {
|
|
62
|
-
var _a, _b, _c, _d, _e;
|
|
63
|
-
return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.
|
|
62
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
63
|
+
return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]) }, isSelecting ? (react_2.default.createElement(react_1.Spinner, { size: "sm", color: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j[500] })) : (react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: function () { return handleCheckbox(0); }, isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" }))));
|
|
64
64
|
}, [
|
|
65
65
|
checked,
|
|
66
66
|
freezedTextColor,
|
|
@@ -75,8 +75,8 @@ var TableHeader = function (_a) {
|
|
|
75
75
|
return (react_2.default.createElement(react_1.Th, { w: 6, minW: "35px", p: 0, backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50], borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1 }));
|
|
76
76
|
}, [noBorders, theme.colors]);
|
|
77
77
|
var RenderView = (0, react_2.useCallback)(function () {
|
|
78
|
-
var _a, _b, _c;
|
|
79
|
-
return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.
|
|
78
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
79
|
+
return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]), position: isActionFreeze ? "sticky" : "relative", className: "columns sticky-columns", right: "0px", zIndex: 1 }));
|
|
80
80
|
}, [noBorders, theme.colors, isActionFreeze]);
|
|
81
81
|
return (react_2.default.createElement(react_1.Tr, { pr: 0 },
|
|
82
82
|
isContent && react_2.default.createElement(RenderConent, null),
|
|
@@ -84,7 +84,7 @@ var TableHeader = function (_a) {
|
|
|
84
84
|
columns.map(function (header, index) {
|
|
85
85
|
if (header === null || header === void 0 ? void 0 : header.isHidden)
|
|
86
86
|
return null;
|
|
87
|
-
return (react_2.default.createElement(ColumnHeader, { header: header, index: index, key: header.label, columnWidths: columnWidths, handleSort: handleSort, isCheckbox: isCheckbox, headerBgColor: headerBgColor,
|
|
87
|
+
return (react_2.default.createElement(ColumnHeader, { header: header, index: index, key: header.label, columnWidths: columnWidths, handleSort: handleSort, isCheckbox: isCheckbox, headerBgColor: headerBgColor, freezedBgColor: freezedBgColor, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }));
|
|
88
88
|
}),
|
|
89
89
|
isLink && react_2.default.createElement(RenderView, null)));
|
|
90
90
|
};
|
|
@@ -100,7 +100,7 @@ var SortingIcon = (0, react_2.memo)(function (_a) {
|
|
|
100
100
|
});
|
|
101
101
|
var ColumnHeader = (0, react_2.memo)(function (_a) {
|
|
102
102
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
|
|
103
|
-
var header = _a.header, index = _a.index, columnWidths = _a.columnWidths, isCheckbox = _a.isCheckbox,
|
|
103
|
+
var header = _a.header, index = _a.index, columnWidths = _a.columnWidths, isCheckbox = _a.isCheckbox, noBorders = _a.noBorders, columnsSort = _a.columnsSort, headerRefs = _a.headerRefs, columnsSearch = _a.columnsSearch, setColumnsSearch = _a.setColumnsSearch, handleSort = _a.handleSort, openFilterId = _a.openFilterId, setOpenFilterId = _a.setOpenFilterId;
|
|
104
104
|
var _v = (0, react_2.useState)(false), isHovered = _v[0], setIsHovered = _v[1];
|
|
105
105
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
106
106
|
var isFrozen = header.isFreeze;
|
|
@@ -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;
|