@proteinjs/ui 3.0.1 → 4.0.0
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/CHANGELOG.md +27 -0
- package/LICENSE +21 -0
- package/dist/generated/index.js +1 -1
- package/dist/generated/index.js.map +1 -1
- package/dist/src/table/Table.d.ts +11 -3
- package/dist/src/table/Table.d.ts.map +1 -1
- package/dist/src/table/Table.js +73 -39
- package/dist/src/table/Table.js.map +1 -1
- package/dist/src/table/TableLoader.d.ts +14 -5
- package/dist/src/table/TableLoader.d.ts.map +1 -1
- package/dist/src/table/TableLoader.js +8 -1
- package/dist/src/table/TableLoader.js.map +1 -1
- package/dist/src/table/tableData.d.ts +3 -2
- package/dist/src/table/tableData.d.ts.map +1 -1
- package/dist/src/table/tableData.js +9 -12
- package/dist/src/table/tableData.js.map +1 -1
- package/generated/index.ts +1 -1
- package/package.json +3 -2
- package/src/table/Table.tsx +97 -42
- package/src/table/TableLoader.ts +18 -4
- package/src/table/tableData.ts +9 -9
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,33 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [4.0.0](https://github.com/proteinjs/ui/compare/@proteinjs/ui@3.1.0...@proteinjs/ui@4.0.0) (2024-09-27)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* table enhancements (rowOnClick, custom skeleton, hideColumnHeaders, setRowCount) ([#7](https://github.com/proteinjs/ui/issues/7)) ([1024069](https://github.com/proteinjs/ui/commit/10240696bce41ba2c3105b882d2b7cbd5182f89d))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### BREAKING CHANGES
|
|
15
|
+
|
|
16
|
+
* rowOnClickRedirectUrl name has been changed to rowOnClick
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
# [3.1.0](https://github.com/proteinjs/ui/compare/@proteinjs/ui@3.0.1...@proteinjs/ui@3.1.0) (2024-08-27)
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
### Features
|
|
26
|
+
|
|
27
|
+
* add empty table component for tables ([2b368af](https://github.com/proteinjs/ui/commit/2b368afd017418b71b6e0dbbfbca71619a0f4a6e))
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
6
33
|
# [3.0.0](https://github.com/proteinjs/ui/compare/@proteinjs/ui@2.4.1...@proteinjs/ui@3.0.0) (2024-08-08)
|
|
7
34
|
|
|
8
35
|
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2023 Brent Bahry
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/dist/generated/index.js
CHANGED
|
@@ -33,7 +33,7 @@ require("react-router-dom");
|
|
|
33
33
|
require("string");
|
|
34
34
|
require("uuid");
|
|
35
35
|
/** Generate Source Graph */
|
|
36
|
-
var sourceGraph = "{\"options\":{\"directed\":true,\"multigraph\":false,\"compound\":false},\"nodes\":[{\"v\":\"@proteinjs/ui/Page\",\"value\":{\"packageName\":\"@proteinjs/ui\",\"name\":\"Page\",\"filePath\":\"/
|
|
36
|
+
var sourceGraph = "{\"options\":{\"directed\":true,\"multigraph\":false,\"compound\":false},\"nodes\":[{\"v\":\"@proteinjs/ui/Page\",\"value\":{\"packageName\":\"@proteinjs/ui\",\"name\":\"Page\",\"filePath\":\"/home/runner/work/ui/ui/packages/ui/src/router/Page.ts\",\"qualifiedName\":\"@proteinjs/ui/Page\",\"properties\":[{\"name\":\"name\",\"type\":{\"packageName\":\"\",\"name\":\"string\",\"filePath\":null,\"qualifiedName\":\"/string\",\"typeParameters\":null,\"directParents\":null},\"isOptional\":false,\"isAbstract\":false,\"isStatic\":false,\"visibility\":\"public\"},{\"name\":\"path\",\"type\":{\"packageName\":\"\",\"name\":\"string | string[]\",\"filePath\":null,\"qualifiedName\":\"/string | string[]\",\"typeParameters\":null,\"directParents\":null},\"isOptional\":false,\"isAbstract\":false,\"isStatic\":false,\"visibility\":\"public\"},{\"name\":\"component\",\"type\":{\"packageName\":\"\",\"name\":\"React.ComponentType<PageComponentProps>\",\"filePath\":null,\"qualifiedName\":\"/React.ComponentType<PageComponentProps>\",\"typeParameters\":null,\"directParents\":null},\"isOptional\":false,\"isAbstract\":false,\"isStatic\":false,\"visibility\":\"public\"},{\"name\":\"noPageContainer\",\"type\":{\"packageName\":\"\",\"name\":\"boolean\",\"filePath\":null,\"qualifiedName\":\"/boolean\",\"typeParameters\":null,\"directParents\":null},\"isOptional\":true,\"isAbstract\":false,\"isStatic\":false,\"visibility\":\"public\"},{\"name\":\"auth\",\"type\":{\"packageName\":\"@proteinjs/ui\",\"name\":\"{\\n /** If true, the user does not need to be logged in or have any roles to access this page. If blank, defaults to false. */\\n public?: boolean;\\n /** If true, the user does not need to have any roles to access this page, but must be logged in. If blank, defaults to false. */\\n allUsers?: boolean;\\n /** The user must be logged in and have these roles to access this page. If blank, defaults to requiring the 'admin' role. */\\n roles?: string[];\\n }\",\"filePath\":null,\"qualifiedName\":\"@proteinjs/ui/{\\n /** If true, the user does not need to be logged in or have any roles to access this page. If blank, defaults to false. */\\n public?: boolean;\\n /** If true, the user does not need to have any roles to access this page, but must be logged in. If blank, defaults to false. */\\n allUsers?: boolean;\\n /** The user must be logged in and have these roles to access this page. If blank, defaults to requiring the 'admin' role. */\\n roles?: string[];\\n }\",\"typeParameters\":null,\"directParents\":null},\"isOptional\":true,\"isAbstract\":false,\"isStatic\":false,\"visibility\":\"public\"},{\"name\":\"pageContainerSxProps\",\"type\":{\"packageName\":\"\",\"name\":\"(theme: Theme) => SxProps\",\"filePath\":null,\"qualifiedName\":\"/(theme: Theme) => SxProps\",\"typeParameters\":null,\"directParents\":null},\"isOptional\":true,\"isAbstract\":false,\"isStatic\":false,\"visibility\":\"public\"}],\"methods\":[],\"typeParameters\":[],\"directParents\":[{\"packageName\":\"@proteinjs/reflection\",\"name\":\"Loadable\",\"filePath\":null,\"qualifiedName\":\"@proteinjs/reflection/Loadable\",\"properties\":[],\"methods\":[],\"typeParameters\":[],\"directParents\":[]}],\"sourceType\":3}},{\"v\":\"@proteinjs/reflection/Loadable\"},{\"v\":\"/React.FC\"},{\"v\":\"/string | React.ComponentType\"},{\"v\":\"/Partial\"},{\"v\":\"/React.Component\"},{\"v\":\"/(value: ColumnValue\"}],\"edges\":[{\"v\":\"@proteinjs/ui/Page\",\"w\":\"@proteinjs/reflection/Loadable\",\"value\":\"extends interface\"}]}";
|
|
37
37
|
/** Generate Source Links */
|
|
38
38
|
var sourceLinks = {};
|
|
39
39
|
/** Load Source Graph and Links */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../generated/index.ts"],"names":[],"mappings":";AAAA,oCAAoC;;;;;;;;;;;;;;;;AAEpC,0BAAwB;AACxB,2BAAyB;AACzB,+BAA6B;AAC7B,yBAAuB;AACvB,iCAA+B;AAC/B,2BAAyB;AACzB,mBAAiB;AACjB,kBAAgB;AAChB,wBAAsB;AACtB,iBAAe;AACf,qBAAmB;AACnB,2CAAyC;AACzC,uBAAqB;AACrB,wBAAsB;AACtB,4BAA0B;AAC1B,kBAAgB;AAChB,gBAAc;AAGd,4BAA4B;AAE5B,IAAM,WAAW,GAAG,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../generated/index.ts"],"names":[],"mappings":";AAAA,oCAAoC;;;;;;;;;;;;;;;;AAEpC,0BAAwB;AACxB,2BAAyB;AACzB,+BAA6B;AAC7B,yBAAuB;AACvB,iCAA+B;AAC/B,2BAAyB;AACzB,mBAAiB;AACjB,kBAAgB;AAChB,wBAAsB;AACtB,iBAAe;AACf,qBAAmB;AACnB,2CAAyC;AACzC,uBAAqB;AACrB,wBAAsB;AACtB,4BAA0B;AAC1B,kBAAgB;AAChB,gBAAc;AAGd,4BAA4B;AAE5B,IAAM,WAAW,GAAG,o+GAAo+G,CAAC;AAGz/G,4BAA4B;AAG5B,IAAM,WAAW,GAAG,EACnB,CAAC;AAGF,kCAAkC;AAElC,oDAAyD;AACzD,6BAAgB,CAAC,KAAK,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;AAGjD,2CAAyB"}
|
|
@@ -6,17 +6,23 @@ type ColumnValue<T, K extends keyof T> = T[K];
|
|
|
6
6
|
export type CustomRenderer<T, K extends keyof T> = (value: ColumnValue<T, K>, row: T) => React.ReactNode;
|
|
7
7
|
export type ColumnConfig<T> = {
|
|
8
8
|
[K in keyof T]?: {
|
|
9
|
-
renderer?:
|
|
9
|
+
renderer?: CustomRenderer<T, K>;
|
|
10
|
+
/** If no header is provided, a default header will be used. Pass in `null` if you'd like the header to be omitted. */
|
|
10
11
|
header?: string | React.ReactNode;
|
|
11
12
|
};
|
|
12
13
|
};
|
|
14
|
+
type RowClickAction<T> = string | ((row: T) => void | Promise<void> | string | Promise<string>);
|
|
13
15
|
export type TableProps<T> = {
|
|
14
16
|
title?: string;
|
|
15
17
|
description?: () => JSX.Element;
|
|
16
18
|
columns: (keyof T)[];
|
|
17
19
|
columnConfig?: ColumnConfig<T>;
|
|
20
|
+
hideColumnHeaders?: boolean;
|
|
18
21
|
tableLoader: TableLoader<T>;
|
|
19
|
-
|
|
22
|
+
/** Setter which will be used to update the row count when rows are loaded */
|
|
23
|
+
setRowCount?: React.Dispatch<React.SetStateAction<number | undefined>>;
|
|
24
|
+
rowOnClick?: RowClickAction<T>;
|
|
25
|
+
/** Buttons displayed in the table head */
|
|
20
26
|
buttons?: TableButton<T>[];
|
|
21
27
|
/** If true, use pagination for table page navigation, if false uses infinite scroll. Defaults to false. */
|
|
22
28
|
pagination?: boolean;
|
|
@@ -24,7 +30,9 @@ export type TableProps<T> = {
|
|
|
24
30
|
toolbarSx?: ToolbarProps['sx'];
|
|
25
31
|
toolbarContent?: React.ReactNode;
|
|
26
32
|
tableContainerSx?: TableContainerOwnProps['sx'];
|
|
33
|
+
emptyTableComponent?: React.ReactNode;
|
|
34
|
+
skeleton?: React.ReactNode;
|
|
27
35
|
};
|
|
28
|
-
export declare function Table<T>({ title, description, columns, columnConfig, tableLoader,
|
|
36
|
+
export declare function Table<T>({ title, description, columns, columnConfig, hideColumnHeaders, tableLoader, rowOnClick, setRowCount, pagination, defaultRowsPerPage, buttons, tableContainerSx, toolbarSx, toolbarContent, emptyTableComponent, skeleton, }: TableProps<T>): React.JSX.Element;
|
|
29
37
|
export {};
|
|
30
38
|
//# sourceMappingURL=Table.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,EAWL,sBAAsB,EACtB,YAAY,EAEb,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAK5C,KAAK,WAAW,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9C,MAAM,MAAM,cAAc,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;AACzG,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI;KAC3B,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE;QACf,QAAQ,CAAC,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,EAWL,sBAAsB,EACtB,YAAY,EAEb,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAK5C,KAAK,WAAW,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9C,MAAM,MAAM,cAAc,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;AACzG,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI;KAC3B,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE;QACf,QAAQ,CAAC,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAChC,sHAAsH;QACtH,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;KACnC;CACF,CAAC;AAEF,KAAK,cAAc,CAAC,CAAC,IAAI,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;AAEhG,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IAChC,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IAC5B,6EAA6E;IAC7E,WAAW,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC;IACvE,UAAU,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAC/B,0CAA0C;IAC1C,OAAO,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,2GAA2G;IAC3G,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,SAAS,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;IAE/B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC,gBAAgB,CAAC,EAAE,sBAAsB,CAAC,IAAI,CAAC,CAAC;IAEhD,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,wBAAgB,KAAK,CAAC,CAAC,EAAE,EACvB,KAAK,EACL,WAAW,EACX,OAAO,EACP,YAAiB,EACjB,iBAAyB,EACzB,WAAW,EACX,UAAU,EACV,WAAW,EACX,UAAkB,EAClB,kBAAuB,EACvB,OAAO,EACP,gBAAgB,EAChB,SAAS,EACT,cAAc,EACd,mBAAmB,EACnB,QAAQ,GACT,EAAE,UAAU,CAAC,CAAC,CAAC,qBAqRf"}
|
package/dist/src/table/Table.js
CHANGED
|
@@ -83,14 +83,14 @@ var TableToolbar_1 = require("./TableToolbar");
|
|
|
83
83
|
var tableData_1 = require("./tableData");
|
|
84
84
|
var InfiniteScroll_1 = require("./InfiniteScroll");
|
|
85
85
|
function Table(_a) {
|
|
86
|
-
var title = _a.title, description = _a.description, columns = _a.columns, _b = _a.columnConfig, columnConfig = _b === void 0 ? {} : _b, tableLoader = _a.tableLoader,
|
|
86
|
+
var title = _a.title, description = _a.description, columns = _a.columns, _b = _a.columnConfig, columnConfig = _b === void 0 ? {} : _b, _c = _a.hideColumnHeaders, hideColumnHeaders = _c === void 0 ? false : _c, tableLoader = _a.tableLoader, rowOnClick = _a.rowOnClick, setRowCount = _a.setRowCount, _d = _a.pagination, pagination = _d === void 0 ? false : _d, _e = _a.defaultRowsPerPage, defaultRowsPerPage = _e === void 0 ? 10 : _e, buttons = _a.buttons, tableContainerSx = _a.tableContainerSx, toolbarSx = _a.toolbarSx, toolbarContent = _a.toolbarContent, emptyTableComponent = _a.emptyTableComponent, skeleton = _a.skeleton;
|
|
87
87
|
var infiniteScroll = !pagination;
|
|
88
|
-
var
|
|
89
|
-
var
|
|
90
|
-
var
|
|
91
|
-
var
|
|
88
|
+
var _f = (0, react_1.useState)(defaultRowsPerPage), rowsPerPage = _f[0], setRowsPerPage = _f[1];
|
|
89
|
+
var _g = (0, react_1.useState)(0), page = _g[0], setPage = _g[1];
|
|
90
|
+
var _h = (0, react_1.useState)({}), selectedRows = _h[0], setSelectedRows = _h[1];
|
|
91
|
+
var _j = (0, react_1.useState)(false), selectAll = _j[0], setSelectAll = _j[1];
|
|
92
92
|
var navigate = (0, react_router_dom_1.useNavigate)();
|
|
93
|
-
var
|
|
93
|
+
var _k = (0, tableData_1.useTableData)(tableLoader, rowsPerPage, page, infiniteScroll, setRowCount), rows = _k.rows, totalRows = _k.totalRows, isLoading = _k.isLoading, error = _k.error, fetchNextPage = _k.fetchNextPage, hasNextPage = _k.hasNextPage, isFetchingNextPage = _k.isFetchingNextPage, resetQuery = _k.resetQuery;
|
|
94
94
|
(0, react_1.useEffect)(function () {
|
|
95
95
|
resetQuery();
|
|
96
96
|
setPage(0);
|
|
@@ -99,28 +99,57 @@ function Table(_a) {
|
|
|
99
99
|
setSelectedRows({});
|
|
100
100
|
setSelectAll(false);
|
|
101
101
|
}, [rows]);
|
|
102
|
+
(0, react_1.useEffect)(function () {
|
|
103
|
+
if (!setRowCount || !totalRows) {
|
|
104
|
+
return;
|
|
105
|
+
}
|
|
106
|
+
setRowCount(totalRows);
|
|
107
|
+
}, [totalRows, setRowCount]);
|
|
102
108
|
var handleFetchNextPage = (0, react_1.useCallback)(function () {
|
|
103
109
|
if (!isFetchingNextPage) {
|
|
104
110
|
fetchNextPage();
|
|
105
111
|
}
|
|
106
112
|
}, [fetchNextPage, isFetchingNextPage]);
|
|
107
|
-
function handleRowOnClick(row) {
|
|
113
|
+
function handleRowOnClick(row, action, navigate) {
|
|
108
114
|
return __awaiter(this, void 0, void 0, function () {
|
|
109
|
-
var
|
|
115
|
+
var url, result, resolvedResult, url, url;
|
|
110
116
|
return __generator(this, function (_a) {
|
|
111
117
|
switch (_a.label) {
|
|
112
118
|
case 0:
|
|
113
|
-
if (!
|
|
119
|
+
if (!action) {
|
|
120
|
+
return [2 /*return*/];
|
|
121
|
+
}
|
|
122
|
+
if (typeof action === 'string') {
|
|
123
|
+
url = action;
|
|
124
|
+
if (!url.startsWith('/')) {
|
|
125
|
+
url = "/".concat(url);
|
|
126
|
+
}
|
|
127
|
+
navigate(url);
|
|
114
128
|
return [2 /*return*/];
|
|
115
129
|
}
|
|
116
|
-
|
|
130
|
+
result = action(row);
|
|
131
|
+
if (!(result instanceof Promise)) return [3 /*break*/, 2];
|
|
132
|
+
return [4 /*yield*/, result];
|
|
117
133
|
case 1:
|
|
118
|
-
|
|
119
|
-
if (
|
|
120
|
-
|
|
134
|
+
resolvedResult = _a.sent();
|
|
135
|
+
if (typeof resolvedResult === 'string') {
|
|
136
|
+
url = resolvedResult;
|
|
137
|
+
if (!url.startsWith('/')) {
|
|
138
|
+
url = "/".concat(url);
|
|
139
|
+
}
|
|
140
|
+
navigate(url);
|
|
121
141
|
}
|
|
122
|
-
|
|
123
|
-
|
|
142
|
+
return [3 /*break*/, 3];
|
|
143
|
+
case 2:
|
|
144
|
+
if (typeof result === 'string') {
|
|
145
|
+
url = result;
|
|
146
|
+
if (!url.startsWith('/')) {
|
|
147
|
+
url = "/".concat(url);
|
|
148
|
+
}
|
|
149
|
+
navigate(url);
|
|
150
|
+
}
|
|
151
|
+
_a.label = 3;
|
|
152
|
+
case 3: return [2 /*return*/];
|
|
124
153
|
}
|
|
125
154
|
});
|
|
126
155
|
});
|
|
@@ -165,22 +194,29 @@ function Table(_a) {
|
|
|
165
194
|
var _a;
|
|
166
195
|
var customRenderer = (_a = columnConfig[column]) === null || _a === void 0 ? void 0 : _a.renderer;
|
|
167
196
|
if (customRenderer) {
|
|
168
|
-
return
|
|
197
|
+
return {
|
|
198
|
+
value: customRenderer(value, row),
|
|
199
|
+
isCustomRendered: true,
|
|
200
|
+
};
|
|
169
201
|
}
|
|
170
202
|
// Default formatting logic
|
|
203
|
+
var formattedValue;
|
|
171
204
|
if (value == null) {
|
|
172
|
-
|
|
205
|
+
formattedValue = '';
|
|
206
|
+
}
|
|
207
|
+
else if (typeof value === 'boolean') {
|
|
208
|
+
formattedValue = value ? 'True' : 'False';
|
|
173
209
|
}
|
|
174
|
-
if (
|
|
175
|
-
|
|
210
|
+
else if (moment_1.default.isMoment(value)) {
|
|
211
|
+
formattedValue = value.format('ddd, MMM Do YY, h:mm:ss a');
|
|
176
212
|
}
|
|
177
|
-
if (
|
|
178
|
-
|
|
213
|
+
else if (typeof value === 'object') {
|
|
214
|
+
formattedValue = JSON.stringify(value);
|
|
179
215
|
}
|
|
180
|
-
|
|
181
|
-
|
|
216
|
+
else {
|
|
217
|
+
formattedValue = value.toString();
|
|
182
218
|
}
|
|
183
|
-
return value
|
|
219
|
+
return { value: formattedValue, isCustomRendered: false };
|
|
184
220
|
}
|
|
185
221
|
var renderTableContainer = function () {
|
|
186
222
|
var totalColumns = columns.length + (buttons && buttons.length > 0 ? 1 : 0);
|
|
@@ -192,40 +228,38 @@ function Table(_a) {
|
|
|
192
228
|
react_1.default.createElement(material_1.Checkbox, { checked: selectAll, onChange: function (event, selected) { return toggleSelectAll(selected); }, inputProps: {
|
|
193
229
|
'aria-label': 'Select all',
|
|
194
230
|
} }))),
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
react_1.default.createElement(material_1.Typography, { variant: 'h6' }, ((
|
|
199
|
-
|
|
231
|
+
!hideColumnHeaders &&
|
|
232
|
+
columns.map(function (column, index) {
|
|
233
|
+
var _a, _b;
|
|
234
|
+
return (react_1.default.createElement(material_1.TableCell, { key: index }, ((_a = columnConfig[column]) === null || _a === void 0 ? void 0 : _a.header) !== null && (react_1.default.createElement(material_1.Typography, { variant: 'h6' }, ((_b = columnConfig[column]) === null || _b === void 0 ? void 0 : _b.header) || util_1.StringUtil.humanizeCamel(column)))));
|
|
235
|
+
}))),
|
|
200
236
|
isLoading && (react_1.default.createElement(material_1.TableBody, null,
|
|
201
237
|
react_1.default.createElement(material_1.TableRow, null,
|
|
202
|
-
react_1.default.createElement(material_1.TableCell, { colSpan: totalColumns, align: 'center', sx: { py: 3 } },
|
|
203
|
-
react_1.default.createElement(material_1.CircularProgress, null))))),
|
|
238
|
+
react_1.default.createElement(material_1.TableCell, { colSpan: totalColumns, align: 'center', sx: { py: 3 } }, skeleton ? skeleton : react_1.default.createElement(material_1.CircularProgress, null))))),
|
|
204
239
|
rows.length === 0 && !isLoading && (react_1.default.createElement(material_1.TableBody, null,
|
|
205
240
|
react_1.default.createElement(material_1.TableRow, null,
|
|
206
|
-
react_1.default.createElement(material_1.TableCell, { colSpan: totalColumns, align: 'center' },
|
|
207
|
-
react_1.default.createElement(material_1.Typography, null, "No rows to display."))))),
|
|
241
|
+
react_1.default.createElement(material_1.TableCell, { colSpan: totalColumns, align: 'center' }, emptyTableComponent ? emptyTableComponent : react_1.default.createElement(material_1.Typography, null, "No rows to display."))))),
|
|
208
242
|
rows.length > 0 && (react_1.default.createElement(material_1.TableBody, null, rows.map(function (row, index) {
|
|
209
243
|
index = rowsPerPage * page + index;
|
|
210
|
-
|
|
244
|
+
var isSelected = typeof selectedRows[index] !== 'undefined';
|
|
245
|
+
return (react_1.default.createElement(material_1.TableRow, { hover: true, tabIndex: -1, key: index, selected: isSelected, onClick: rowOnClick ? function () { return handleRowOnClick(row, rowOnClick, navigate); } : undefined },
|
|
211
246
|
buttons && buttons.length > 0 && (react_1.default.createElement(material_1.TableCell, { padding: 'checkbox' },
|
|
212
|
-
react_1.default.createElement(material_1.Checkbox, { checked:
|
|
247
|
+
react_1.default.createElement(material_1.Checkbox, { checked: isSelected, onChange: function (event) {
|
|
213
248
|
event.stopPropagation();
|
|
214
249
|
toggleSelectRow(index, row);
|
|
215
250
|
}, onClick: function (event) { return event.stopPropagation(); }, inputProps: {
|
|
216
251
|
'aria-label': 'Select row',
|
|
217
252
|
} }))),
|
|
218
253
|
columns.map(function (column, index) {
|
|
219
|
-
var
|
|
220
|
-
return (react_1.default.createElement(material_1.TableCell, { key: index },
|
|
221
|
-
react_1.default.createElement(material_1.Typography, null, cellValue)));
|
|
254
|
+
var _a = formatCellValue(row[column], column, row), cellValue = _a.value, isCustomRendered = _a.isCustomRendered;
|
|
255
|
+
return (react_1.default.createElement(material_1.TableCell, { key: index }, isCustomRendered ? cellValue : react_1.default.createElement(material_1.Typography, null, cellValue)));
|
|
222
256
|
})));
|
|
223
257
|
}))))));
|
|
224
258
|
};
|
|
225
259
|
return (react_1.default.createElement(material_1.Box, { sx: { width: '100%', height: '100%', display: 'flex', flexDirection: 'column' } },
|
|
226
260
|
(title || description || (buttons && buttons.length > 0)) && (react_1.default.createElement(TableToolbar_1.TableToolbar, { title: title, description: description, selectedRows: Object.values(selectedRows), content: toolbarContent, buttons: buttons, sx: toolbarSx })),
|
|
227
261
|
react_1.default.createElement(material_1.Box, { id: 'infinite-scroll-container', sx: { width: '100%', flexGrow: 1, overflow: 'auto' } },
|
|
228
|
-
infiniteScroll ? (react_1.default.createElement(InfiniteScroll_1.InfiniteScroll, { dataLength: rows.length, next: handleFetchNextPage, hasMore: !!hasNextPage, loader: react_1.default.createElement(material_1.Typography, { sx: { p:
|
|
262
|
+
infiniteScroll ? (react_1.default.createElement(InfiniteScroll_1.InfiniteScroll, { dataLength: rows.length, next: handleFetchNextPage, hasMore: !!hasNextPage, loader: react_1.default.createElement(material_1.Typography, { variant: 'body2', sx: { p: 3 } }, "Loading..."), scrollableTarget: 'infinite-scroll-container' }, renderTableContainer())) : (renderTableContainer()),
|
|
229
263
|
pagination && !isLoading && (react_1.default.createElement(material_1.TablePagination, { rowsPerPageOptions: [5, 10, 25, 50, 100, 200], component: 'div', count: totalRows || 0, rowsPerPage: rowsPerPage, page: page, onPageChange: function (event, newPage) { return setPage(newPage); }, onRowsPerPageChange: function (event) { return updateRowsPerPage(parseInt(event.target.value)); } })))));
|
|
230
264
|
}
|
|
231
265
|
exports.Table = Table;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/table/Table.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAgE;AAChE,qDAA+C;AAC/C,0CAcuB;AACvB,kDAA4B;AAC5B,wCAA6C;AAG7C,+CAA8C;AAC9C,yCAA2C;AAC3C,mDAAkD;
|
|
1
|
+
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/table/Table.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,14 +9,23 @@ export type ReactQueryKeys = {
|
|
|
9
9
|
/** Unique name to differentiate between queries on the data set */
|
|
10
10
|
dataQueryKey: string;
|
|
11
11
|
};
|
|
12
|
-
export
|
|
13
|
-
|
|
12
|
+
export interface TableLoader<T> {
|
|
13
|
+
/**
|
|
14
|
+
* Query keys are used in React Query to uniquely identify and manage cached data fetched from an API.
|
|
15
|
+
* If you do not want to set your own query keys, extend `BaseTableLoader` and it will implement defaults for you.
|
|
16
|
+
* */
|
|
17
|
+
reactQueryKeys: ReactQueryKeys;
|
|
14
18
|
load: (startIndex: number, endIndex: number, skipRowCount?: boolean) => Promise<RowWindow<T>>;
|
|
15
|
-
}
|
|
19
|
+
}
|
|
20
|
+
export declare abstract class BaseTableLoader<T> implements TableLoader<T> {
|
|
21
|
+
readonly reactQueryKeys: ReactQueryKeys;
|
|
22
|
+
constructor();
|
|
23
|
+
abstract load(startIndex: number, endIndex: number, skipRowCount?: boolean): Promise<RowWindow<T>>;
|
|
24
|
+
}
|
|
16
25
|
export declare class StaticTableLoader<T> implements TableLoader<T> {
|
|
17
26
|
private list;
|
|
18
|
-
reactQueryKeys
|
|
19
|
-
constructor(list: T[], reactQueryKeys
|
|
27
|
+
reactQueryKeys: TableLoader<T>['reactQueryKeys'];
|
|
28
|
+
constructor(list: T[], reactQueryKeys: TableLoader<T>['reactQueryKeys']);
|
|
20
29
|
load(startIndex: number, endIndex: number): Promise<{
|
|
21
30
|
rows: T[];
|
|
22
31
|
totalCount: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableLoader.d.ts","sourceRoot":"","sources":["../../../src/table/TableLoader.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI;IACzB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,6BAA6B,IAAI,cAAc,CAK9D;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,
|
|
1
|
+
{"version":3,"file":"TableLoader.d.ts","sourceRoot":"","sources":["../../../src/table/TableLoader.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI;IACzB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,6BAA6B,IAAI,cAAc,CAK9D;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B;;;SAGK;IACL,cAAc,EAAE,cAAc,CAAC;IAC/B,IAAI,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;CAC/F;AAED,8BAAsB,eAAe,CAAC,CAAC,CAAE,YAAW,WAAW,CAAC,CAAC,CAAC;IAChE,QAAQ,CAAC,cAAc,EAAE,cAAc,CAAC;;IAMxC,QAAQ,CAAC,IAAI,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;CACnG;AAED,qBAAa,iBAAiB,CAAC,CAAC,CAAE,YAAW,WAAW,CAAC,CAAC,CAAC;IAEvD,OAAO,CAAC,IAAI;IACL,cAAc,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC;gBAD/C,IAAI,EAAE,CAAC,EAAE,EACV,cAAc,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAOnD,IAAI,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;;;;CAMhD"}
|
|
@@ -36,7 +36,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
|
36
36
|
}
|
|
37
37
|
};
|
|
38
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
-
exports.StaticTableLoader = exports.generateDefaultReactQueryKeys = void 0;
|
|
39
|
+
exports.StaticTableLoader = exports.BaseTableLoader = exports.generateDefaultReactQueryKeys = void 0;
|
|
40
40
|
var uuid_1 = require("uuid");
|
|
41
41
|
function generateDefaultReactQueryKeys() {
|
|
42
42
|
return {
|
|
@@ -45,6 +45,13 @@ function generateDefaultReactQueryKeys() {
|
|
|
45
45
|
};
|
|
46
46
|
}
|
|
47
47
|
exports.generateDefaultReactQueryKeys = generateDefaultReactQueryKeys;
|
|
48
|
+
var BaseTableLoader = /** @class */ (function () {
|
|
49
|
+
function BaseTableLoader() {
|
|
50
|
+
this.reactQueryKeys = generateDefaultReactQueryKeys();
|
|
51
|
+
}
|
|
52
|
+
return BaseTableLoader;
|
|
53
|
+
}());
|
|
54
|
+
exports.BaseTableLoader = BaseTableLoader;
|
|
48
55
|
var StaticTableLoader = /** @class */ (function () {
|
|
49
56
|
function StaticTableLoader(list, reactQueryKeys) {
|
|
50
57
|
this.list = list;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableLoader.js","sourceRoot":"","sources":["../../../src/table/TableLoader.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6BAAoC;AAOpC,SAAgB,6BAA6B;IAC3C,OAAO;QACL,OAAO,EAAE,IAAA,SAAM,GAAE;QACjB,YAAY,EAAE,IAAA,SAAM,GAAE;KACvB,CAAC;AACJ,CAAC;AALD,sEAKC;
|
|
1
|
+
{"version":3,"file":"TableLoader.js","sourceRoot":"","sources":["../../../src/table/TableLoader.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6BAAoC;AAOpC,SAAgB,6BAA6B;IAC3C,OAAO;QACL,OAAO,EAAE,IAAA,SAAM,GAAE;QACjB,YAAY,EAAE,IAAA,SAAM,GAAE;KACvB,CAAC;AACJ,CAAC;AALD,sEAKC;AAkBD;IAGE;QACE,IAAI,CAAC,cAAc,GAAG,6BAA6B,EAAE,CAAC;IACxD,CAAC;IAGH,sBAAC;AAAD,CAAC,AARD,IAQC;AARqB,0CAAe;AAUrC;IACE,2BACU,IAAS,EACV,cAAgD;QAD/C,SAAI,GAAJ,IAAI,CAAK;QACV,mBAAc,GAAd,cAAc,CAAkC;QAEvD,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;YACxB,IAAI,CAAC,cAAc,GAAG,6BAA6B,EAAE,CAAC;SACvD;IACH,CAAC;IAEK,gCAAI,GAAV,UAAW,UAAkB,EAAE,QAAgB;;;gBAC7C,sBAAO;wBACL,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,QAAQ,CAAC;wBAC3C,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM;qBAC7B,EAAC;;;KACH;IACH,wBAAC;AAAD,CAAC,AAhBD,IAgBC;AAhBY,8CAAiB"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { UseQueryResult, UseMutationResult, UseInfiniteQueryResult } from 'react-query';
|
|
2
3
|
import { TableLoader, RowWindow } from './TableLoader';
|
|
3
|
-
export declare function useTableData<T>(tableLoader: TableLoader<T>, rowsPerPage: number, page: number, infiniteScroll: boolean): {
|
|
4
|
+
export declare function useTableData<T>(tableLoader: TableLoader<T>, rowsPerPage: number, page: number, infiniteScroll: boolean, setRowCount?: React.Dispatch<React.SetStateAction<number | undefined>>): {
|
|
4
5
|
rows: T[];
|
|
5
6
|
totalRows: number | undefined;
|
|
6
7
|
isLoading: boolean;
|
|
@@ -11,6 +12,6 @@ export declare function useTableData<T>(tableLoader: TableLoader<T>, rowsPerPage
|
|
|
11
12
|
resetQuery: () => void;
|
|
12
13
|
};
|
|
13
14
|
export declare const usePaginationTableQuery: <T>(tableLoader: TableLoader<T>, startIndex: number, endIndex: number, enabled?: boolean) => UseQueryResult<RowWindow<T>, Error>;
|
|
14
|
-
export declare const useInfiniteScrollTableQuery: <T>(tableLoader: TableLoader<T>, rowsPerPage: number, enabled?: boolean) => UseInfiniteQueryResult<RowWindow<T>, Error>;
|
|
15
|
+
export declare const useInfiniteScrollTableQuery: <T>(tableLoader: TableLoader<T>, rowsPerPage: number, setRowCount?: React.Dispatch<React.SetStateAction<number | undefined>>, enabled?: boolean) => UseInfiniteQueryResult<RowWindow<T>, Error>;
|
|
15
16
|
export declare const useTableMutation: <T, TVariables = unknown>(tableLoader: TableLoader<T>, mutationFn: (variables: TVariables) => Promise<void>) => UseMutationResult<void, Error, TVariables>;
|
|
16
17
|
//# sourceMappingURL=tableData.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tableData.d.ts","sourceRoot":"","sources":["../../../src/table/tableData.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,cAAc,EACd,iBAAiB,EAEjB,sBAAsB,EAEvB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,WAAW,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"tableData.d.ts","sourceRoot":"","sources":["../../../src/table/tableData.ts"],"names":[],"mappings":";AAAA,OAAO,EAIL,cAAc,EACd,iBAAiB,EAEjB,sBAAsB,EAEvB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAGvD,wBAAgB,YAAY,CAAC,CAAC,EAC5B,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,EAC3B,WAAW,EAAE,MAAM,EACnB,IAAI,EAAE,MAAM,EACZ,cAAc,EAAE,OAAO,EACvB,WAAW,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;;;;;;;;;EAkEvE;AAID,eAAO,MAAM,uBAAuB,+CAEtB,MAAM,YACR,MAAM,2DAmBjB,CAAC;AAEF,eAAO,MAAM,2BAA2B,gDAEzB,MAAM,gBACL,MAAM,QAAQ,CAAC,MAAM,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,mEAkCvE,CAAC;AAEF,eAAO,MAAM,gBAAgB,gGAEY,QAAQ,IAAI,CAAC,+CAoBrD,CAAC"}
|
|
@@ -38,16 +38,12 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
|
38
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
39
|
exports.useTableMutation = exports.useInfiniteScrollTableQuery = exports.usePaginationTableQuery = exports.useTableData = void 0;
|
|
40
40
|
var react_query_1 = require("react-query");
|
|
41
|
-
var TableLoader_1 = require("./TableLoader");
|
|
42
41
|
var react_1 = require("react");
|
|
43
|
-
function useTableData(tableLoader, rowsPerPage, page, infiniteScroll) {
|
|
44
|
-
if (!tableLoader.reactQueryKeys) {
|
|
45
|
-
tableLoader.reactQueryKeys = (0, TableLoader_1.generateDefaultReactQueryKeys)();
|
|
46
|
-
}
|
|
42
|
+
function useTableData(tableLoader, rowsPerPage, page, infiniteScroll, setRowCount) {
|
|
47
43
|
var startIndex = (0, react_1.useMemo)(function () { return page * rowsPerPage; }, [page, rowsPerPage]);
|
|
48
44
|
var endIndex = (0, react_1.useMemo)(function () { return startIndex + rowsPerPage; }, [startIndex, rowsPerPage]);
|
|
49
45
|
var _a = (0, exports.usePaginationTableQuery)(tableLoader, startIndex, endIndex, !infiniteScroll), paginatedData = _a.data, isPaginatedLoading = _a.isLoading, paginatedError = _a.error, refetchPaginatedData = _a.refetch;
|
|
50
|
-
var _b = (0, exports.useInfiniteScrollTableQuery)(tableLoader, rowsPerPage, infiniteScroll), infiniteData = _b.data, fetchNextPage = _b.fetchNextPage, hasNextPage = _b.hasNextPage, isInfiniteLoading = _b.isLoading, isFetchingNextPage = _b.isFetchingNextPage, infiniteError = _b.error, refetchInfiniteData = _b.refetch;
|
|
46
|
+
var _b = (0, exports.useInfiniteScrollTableQuery)(tableLoader, rowsPerPage, setRowCount, infiniteScroll), infiniteData = _b.data, fetchNextPage = _b.fetchNextPage, hasNextPage = _b.hasNextPage, isInfiniteLoading = _b.isLoading, isFetchingNextPage = _b.isFetchingNextPage, infiniteError = _b.error, refetchInfiniteData = _b.refetch;
|
|
51
47
|
var rows = (0, react_1.useMemo)(function () {
|
|
52
48
|
return infiniteScroll
|
|
53
49
|
? ((infiniteData === null || infiniteData === void 0 ? void 0 : infiniteData.pages) || []).reduce(function (acc, page) { return acc.concat(page.rows); }, [])
|
|
@@ -99,7 +95,7 @@ var usePaginationTableQuery = function (tableLoader, startIndex, endIndex, enabl
|
|
|
99
95
|
});
|
|
100
96
|
};
|
|
101
97
|
exports.usePaginationTableQuery = usePaginationTableQuery;
|
|
102
|
-
var useInfiniteScrollTableQuery = function (tableLoader, rowsPerPage, enabled) {
|
|
98
|
+
var useInfiniteScrollTableQuery = function (tableLoader, rowsPerPage, setRowCount, enabled) {
|
|
103
99
|
if (enabled === void 0) { enabled = true; }
|
|
104
100
|
var reactQueryKeys = tableLoader.reactQueryKeys;
|
|
105
101
|
if (!reactQueryKeys) {
|
|
@@ -108,15 +104,16 @@ var useInfiniteScrollTableQuery = function (tableLoader, rowsPerPage, enabled) {
|
|
|
108
104
|
var fetchTableData = function (_a) {
|
|
109
105
|
var _b = _a.pageParam, pageParam = _b === void 0 ? { startIndex: 0, endIndex: rowsPerPage } : _b;
|
|
110
106
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
111
|
-
var startIndex, endIndex;
|
|
107
|
+
var startIndex, endIndex, data;
|
|
112
108
|
return __generator(this, function (_c) {
|
|
113
109
|
switch (_c.label) {
|
|
114
110
|
case 0:
|
|
115
111
|
startIndex = pageParam.startIndex, endIndex = pageParam.endIndex;
|
|
116
|
-
return [4 /*yield*/, tableLoader.load(startIndex, endIndex, true)];
|
|
117
|
-
case 1:
|
|
118
|
-
|
|
119
|
-
|
|
112
|
+
return [4 /*yield*/, tableLoader.load(startIndex, endIndex, setRowCount ? false : true)];
|
|
113
|
+
case 1:
|
|
114
|
+
data = _c.sent();
|
|
115
|
+
setRowCount && setRowCount(data.totalCount);
|
|
116
|
+
return [2 /*return*/, data];
|
|
120
117
|
}
|
|
121
118
|
});
|
|
122
119
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tableData.js","sourceRoot":"","sources":["../../../src/table/tableData.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CASqB;
|
|
1
|
+
{"version":3,"file":"tableData.js","sourceRoot":"","sources":["../../../src/table/tableData.ts"],"names":[],"mappings":"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"}
|
package/generated/index.ts
CHANGED
|
@@ -21,7 +21,7 @@ import 'uuid';
|
|
|
21
21
|
|
|
22
22
|
/** Generate Source Graph */
|
|
23
23
|
|
|
24
|
-
const sourceGraph = "{\"options\":{\"directed\":true,\"multigraph\":false,\"compound\":false},\"nodes\":[{\"v\":\"@proteinjs/ui/Page\",\"value\":{\"packageName\":\"@proteinjs/ui\",\"name\":\"Page\",\"filePath\":\"/
|
|
24
|
+
const sourceGraph = "{\"options\":{\"directed\":true,\"multigraph\":false,\"compound\":false},\"nodes\":[{\"v\":\"@proteinjs/ui/Page\",\"value\":{\"packageName\":\"@proteinjs/ui\",\"name\":\"Page\",\"filePath\":\"/home/runner/work/ui/ui/packages/ui/src/router/Page.ts\",\"qualifiedName\":\"@proteinjs/ui/Page\",\"properties\":[{\"name\":\"name\",\"type\":{\"packageName\":\"\",\"name\":\"string\",\"filePath\":null,\"qualifiedName\":\"/string\",\"typeParameters\":null,\"directParents\":null},\"isOptional\":false,\"isAbstract\":false,\"isStatic\":false,\"visibility\":\"public\"},{\"name\":\"path\",\"type\":{\"packageName\":\"\",\"name\":\"string | string[]\",\"filePath\":null,\"qualifiedName\":\"/string | string[]\",\"typeParameters\":null,\"directParents\":null},\"isOptional\":false,\"isAbstract\":false,\"isStatic\":false,\"visibility\":\"public\"},{\"name\":\"component\",\"type\":{\"packageName\":\"\",\"name\":\"React.ComponentType<PageComponentProps>\",\"filePath\":null,\"qualifiedName\":\"/React.ComponentType<PageComponentProps>\",\"typeParameters\":null,\"directParents\":null},\"isOptional\":false,\"isAbstract\":false,\"isStatic\":false,\"visibility\":\"public\"},{\"name\":\"noPageContainer\",\"type\":{\"packageName\":\"\",\"name\":\"boolean\",\"filePath\":null,\"qualifiedName\":\"/boolean\",\"typeParameters\":null,\"directParents\":null},\"isOptional\":true,\"isAbstract\":false,\"isStatic\":false,\"visibility\":\"public\"},{\"name\":\"auth\",\"type\":{\"packageName\":\"@proteinjs/ui\",\"name\":\"{\\n /** If true, the user does not need to be logged in or have any roles to access this page. If blank, defaults to false. */\\n public?: boolean;\\n /** If true, the user does not need to have any roles to access this page, but must be logged in. If blank, defaults to false. */\\n allUsers?: boolean;\\n /** The user must be logged in and have these roles to access this page. If blank, defaults to requiring the 'admin' role. */\\n roles?: string[];\\n }\",\"filePath\":null,\"qualifiedName\":\"@proteinjs/ui/{\\n /** If true, the user does not need to be logged in or have any roles to access this page. If blank, defaults to false. */\\n public?: boolean;\\n /** If true, the user does not need to have any roles to access this page, but must be logged in. If blank, defaults to false. */\\n allUsers?: boolean;\\n /** The user must be logged in and have these roles to access this page. If blank, defaults to requiring the 'admin' role. */\\n roles?: string[];\\n }\",\"typeParameters\":null,\"directParents\":null},\"isOptional\":true,\"isAbstract\":false,\"isStatic\":false,\"visibility\":\"public\"},{\"name\":\"pageContainerSxProps\",\"type\":{\"packageName\":\"\",\"name\":\"(theme: Theme) => SxProps\",\"filePath\":null,\"qualifiedName\":\"/(theme: Theme) => SxProps\",\"typeParameters\":null,\"directParents\":null},\"isOptional\":true,\"isAbstract\":false,\"isStatic\":false,\"visibility\":\"public\"}],\"methods\":[],\"typeParameters\":[],\"directParents\":[{\"packageName\":\"@proteinjs/reflection\",\"name\":\"Loadable\",\"filePath\":null,\"qualifiedName\":\"@proteinjs/reflection/Loadable\",\"properties\":[],\"methods\":[],\"typeParameters\":[],\"directParents\":[]}],\"sourceType\":3}},{\"v\":\"@proteinjs/reflection/Loadable\"},{\"v\":\"/React.FC\"},{\"v\":\"/string | React.ComponentType\"},{\"v\":\"/Partial\"},{\"v\":\"/React.Component\"},{\"v\":\"/(value: ColumnValue\"}],\"edges\":[{\"v\":\"@proteinjs/ui/Page\",\"w\":\"@proteinjs/reflection/Loadable\",\"value\":\"extends interface\"}]}";
|
|
25
25
|
|
|
26
26
|
|
|
27
27
|
/** Generate Source Links */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proteinjs/ui",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0",
|
|
4
4
|
"description": "UI libs",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -56,5 +56,6 @@
|
|
|
56
56
|
"typescript": "5.2.2"
|
|
57
57
|
},
|
|
58
58
|
"main": "./dist/generated/index.js",
|
|
59
|
-
"types": "./dist/generated/index.d.ts"
|
|
59
|
+
"types": "./dist/generated/index.d.ts",
|
|
60
|
+
"gitHead": "11f5fa799ca7a948fc37cd8dddd73bd97b53e4ff"
|
|
60
61
|
}
|
package/src/table/Table.tsx
CHANGED
|
@@ -27,18 +27,25 @@ type ColumnValue<T, K extends keyof T> = T[K];
|
|
|
27
27
|
export type CustomRenderer<T, K extends keyof T> = (value: ColumnValue<T, K>, row: T) => React.ReactNode;
|
|
28
28
|
export type ColumnConfig<T> = {
|
|
29
29
|
[K in keyof T]?: {
|
|
30
|
-
renderer?:
|
|
30
|
+
renderer?: CustomRenderer<T, K>;
|
|
31
|
+
/** If no header is provided, a default header will be used. Pass in `null` if you'd like the header to be omitted. */
|
|
31
32
|
header?: string | React.ReactNode;
|
|
32
33
|
};
|
|
33
34
|
};
|
|
34
35
|
|
|
36
|
+
type RowClickAction<T> = string | ((row: T) => void | Promise<void> | string | Promise<string>);
|
|
37
|
+
|
|
35
38
|
export type TableProps<T> = {
|
|
36
39
|
title?: string;
|
|
37
40
|
description?: () => JSX.Element;
|
|
38
41
|
columns: (keyof T)[];
|
|
39
42
|
columnConfig?: ColumnConfig<T>;
|
|
43
|
+
hideColumnHeaders?: boolean;
|
|
40
44
|
tableLoader: TableLoader<T>;
|
|
41
|
-
|
|
45
|
+
/** Setter which will be used to update the row count when rows are loaded */
|
|
46
|
+
setRowCount?: React.Dispatch<React.SetStateAction<number | undefined>>;
|
|
47
|
+
rowOnClick?: RowClickAction<T>;
|
|
48
|
+
/** Buttons displayed in the table head */
|
|
42
49
|
buttons?: TableButton<T>[];
|
|
43
50
|
/** If true, use pagination for table page navigation, if false uses infinite scroll. Defaults to false. */
|
|
44
51
|
pagination?: boolean;
|
|
@@ -50,6 +57,10 @@ export type TableProps<T> = {
|
|
|
50
57
|
toolbarContent?: React.ReactNode;
|
|
51
58
|
/* Styling set on the container element of the table. */
|
|
52
59
|
tableContainerSx?: TableContainerOwnProps['sx'];
|
|
60
|
+
/* Component displayed when there are no rows to display. */
|
|
61
|
+
emptyTableComponent?: React.ReactNode;
|
|
62
|
+
/* Loading skeleton that's displayed before the table rows are first fetched. */
|
|
63
|
+
skeleton?: React.ReactNode;
|
|
53
64
|
};
|
|
54
65
|
|
|
55
66
|
export function Table<T>({
|
|
@@ -57,14 +68,18 @@ export function Table<T>({
|
|
|
57
68
|
description,
|
|
58
69
|
columns,
|
|
59
70
|
columnConfig = {},
|
|
71
|
+
hideColumnHeaders = false,
|
|
60
72
|
tableLoader,
|
|
61
|
-
|
|
73
|
+
rowOnClick,
|
|
74
|
+
setRowCount,
|
|
62
75
|
pagination = false,
|
|
63
76
|
defaultRowsPerPage = 10,
|
|
64
77
|
buttons,
|
|
65
78
|
tableContainerSx,
|
|
66
79
|
toolbarSx,
|
|
67
80
|
toolbarContent,
|
|
81
|
+
emptyTableComponent,
|
|
82
|
+
skeleton,
|
|
68
83
|
}: TableProps<T>) {
|
|
69
84
|
const infiniteScroll = !pagination;
|
|
70
85
|
const [rowsPerPage, setRowsPerPage] = useState(defaultRowsPerPage);
|
|
@@ -74,7 +89,7 @@ export function Table<T>({
|
|
|
74
89
|
const navigate = useNavigate();
|
|
75
90
|
|
|
76
91
|
const { rows, totalRows, isLoading, error, fetchNextPage, hasNextPage, isFetchingNextPage, resetQuery } =
|
|
77
|
-
useTableData<T>(tableLoader, rowsPerPage, page, infiniteScroll);
|
|
92
|
+
useTableData<T>(tableLoader, rowsPerPage, page, infiniteScroll, setRowCount);
|
|
78
93
|
|
|
79
94
|
useEffect(() => {
|
|
80
95
|
resetQuery();
|
|
@@ -86,23 +101,56 @@ export function Table<T>({
|
|
|
86
101
|
setSelectAll(false);
|
|
87
102
|
}, [rows]);
|
|
88
103
|
|
|
104
|
+
useEffect(() => {
|
|
105
|
+
if (!setRowCount || !totalRows) {
|
|
106
|
+
return;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
setRowCount(totalRows);
|
|
110
|
+
}, [totalRows, setRowCount]);
|
|
111
|
+
|
|
89
112
|
const handleFetchNextPage = useCallback(() => {
|
|
90
113
|
if (!isFetchingNextPage) {
|
|
91
114
|
fetchNextPage();
|
|
92
115
|
}
|
|
93
116
|
}, [fetchNextPage, isFetchingNextPage]);
|
|
94
117
|
|
|
95
|
-
async function handleRowOnClick(row: T) {
|
|
96
|
-
if (!
|
|
118
|
+
async function handleRowOnClick<T>(row: T, action: RowClickAction<T>, navigate: (url: string) => void) {
|
|
119
|
+
if (!action) {
|
|
97
120
|
return;
|
|
98
121
|
}
|
|
99
122
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
123
|
+
if (typeof action === 'string') {
|
|
124
|
+
// If action is a string, treat it as a URL
|
|
125
|
+
let url = action;
|
|
126
|
+
if (!url.startsWith('/')) {
|
|
127
|
+
url = `/${url}`;
|
|
128
|
+
}
|
|
129
|
+
navigate(url);
|
|
130
|
+
return;
|
|
103
131
|
}
|
|
104
132
|
|
|
105
|
-
|
|
133
|
+
// If action is a function, execute it
|
|
134
|
+
const result = action(row);
|
|
135
|
+
|
|
136
|
+
if (result instanceof Promise) {
|
|
137
|
+
// If the result is a Promise, wait for it to resolve
|
|
138
|
+
const resolvedResult = await result;
|
|
139
|
+
if (typeof resolvedResult === 'string') {
|
|
140
|
+
let url = resolvedResult;
|
|
141
|
+
if (!url.startsWith('/')) {
|
|
142
|
+
url = `/${url}`;
|
|
143
|
+
}
|
|
144
|
+
navigate(url);
|
|
145
|
+
}
|
|
146
|
+
} else if (typeof result === 'string') {
|
|
147
|
+
let url = result;
|
|
148
|
+
if (!url.startsWith('/')) {
|
|
149
|
+
url = `/${url}`;
|
|
150
|
+
}
|
|
151
|
+
navigate(url);
|
|
152
|
+
}
|
|
153
|
+
// If result is void, do nothing (the action has been performed in the function)
|
|
106
154
|
}
|
|
107
155
|
|
|
108
156
|
function updateRowsPerPage(newValue: number) {
|
|
@@ -144,30 +192,30 @@ export function Table<T>({
|
|
|
144
192
|
setSelectAll(selected);
|
|
145
193
|
}
|
|
146
194
|
|
|
147
|
-
function formatCellValue(value: any, column: keyof T, row: T): React.ReactNode {
|
|
195
|
+
function formatCellValue(value: any, column: keyof T, row: T): { value: React.ReactNode; isCustomRendered: boolean } {
|
|
148
196
|
const customRenderer = columnConfig[column]?.renderer;
|
|
149
197
|
if (customRenderer) {
|
|
150
|
-
return
|
|
198
|
+
return {
|
|
199
|
+
value: customRenderer(value, row),
|
|
200
|
+
isCustomRendered: true,
|
|
201
|
+
};
|
|
151
202
|
}
|
|
152
203
|
|
|
153
204
|
// Default formatting logic
|
|
205
|
+
let formattedValue: React.ReactNode;
|
|
154
206
|
if (value == null) {
|
|
155
|
-
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
if (
|
|
159
|
-
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
if (typeof value === 'object') {
|
|
167
|
-
return JSON.stringify(value);
|
|
207
|
+
formattedValue = '';
|
|
208
|
+
} else if (typeof value === 'boolean') {
|
|
209
|
+
formattedValue = value ? 'True' : 'False';
|
|
210
|
+
} else if (moment.isMoment(value)) {
|
|
211
|
+
formattedValue = value.format('ddd, MMM Do YY, h:mm:ss a');
|
|
212
|
+
} else if (typeof value === 'object') {
|
|
213
|
+
formattedValue = JSON.stringify(value);
|
|
214
|
+
} else {
|
|
215
|
+
formattedValue = value.toString();
|
|
168
216
|
}
|
|
169
217
|
|
|
170
|
-
return value
|
|
218
|
+
return { value: formattedValue, isCustomRendered: false };
|
|
171
219
|
}
|
|
172
220
|
|
|
173
221
|
const renderTableContainer = () => {
|
|
@@ -189,20 +237,23 @@ export function Table<T>({
|
|
|
189
237
|
/>
|
|
190
238
|
</TableCell>
|
|
191
239
|
)}
|
|
192
|
-
{
|
|
193
|
-
|
|
194
|
-
<
|
|
195
|
-
{columnConfig[column]?.header
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
240
|
+
{!hideColumnHeaders &&
|
|
241
|
+
columns.map((column, index) => (
|
|
242
|
+
<TableCell key={index}>
|
|
243
|
+
{columnConfig[column]?.header !== null && (
|
|
244
|
+
<Typography variant='h6'>
|
|
245
|
+
{columnConfig[column]?.header || StringUtil.humanizeCamel(column as string)}
|
|
246
|
+
</Typography>
|
|
247
|
+
)}
|
|
248
|
+
</TableCell>
|
|
249
|
+
))}
|
|
199
250
|
</TableRow>
|
|
200
251
|
</TableHead>
|
|
201
252
|
{isLoading && (
|
|
202
253
|
<TableBody>
|
|
203
254
|
<TableRow>
|
|
204
255
|
<TableCell colSpan={totalColumns} align='center' sx={{ py: 3 }}>
|
|
205
|
-
<CircularProgress />
|
|
256
|
+
{skeleton ? skeleton : <CircularProgress />}
|
|
206
257
|
</TableCell>
|
|
207
258
|
</TableRow>
|
|
208
259
|
</TableBody>
|
|
@@ -211,7 +262,7 @@ export function Table<T>({
|
|
|
211
262
|
<TableBody>
|
|
212
263
|
<TableRow>
|
|
213
264
|
<TableCell colSpan={totalColumns} align='center'>
|
|
214
|
-
<Typography>No rows to display.</Typography>
|
|
265
|
+
{emptyTableComponent ? emptyTableComponent : <Typography>No rows to display.</Typography>}
|
|
215
266
|
</TableCell>
|
|
216
267
|
</TableRow>
|
|
217
268
|
</TableBody>
|
|
@@ -220,19 +271,19 @@ export function Table<T>({
|
|
|
220
271
|
<TableBody>
|
|
221
272
|
{rows.map((row, index) => {
|
|
222
273
|
index = rowsPerPage * page + index;
|
|
274
|
+
const isSelected = typeof selectedRows[index] !== 'undefined';
|
|
223
275
|
return (
|
|
224
276
|
<TableRow
|
|
225
277
|
hover
|
|
226
|
-
role='checkbox'
|
|
227
278
|
tabIndex={-1}
|
|
228
279
|
key={index}
|
|
229
|
-
selected={
|
|
230
|
-
onClick={(
|
|
280
|
+
selected={isSelected}
|
|
281
|
+
onClick={rowOnClick ? () => handleRowOnClick(row, rowOnClick, navigate) : undefined}
|
|
231
282
|
>
|
|
232
283
|
{buttons && buttons.length > 0 && (
|
|
233
284
|
<TableCell padding='checkbox'>
|
|
234
285
|
<Checkbox
|
|
235
|
-
checked={
|
|
286
|
+
checked={isSelected}
|
|
236
287
|
onChange={(event) => {
|
|
237
288
|
event.stopPropagation();
|
|
238
289
|
toggleSelectRow(index, row);
|
|
@@ -245,10 +296,10 @@ export function Table<T>({
|
|
|
245
296
|
</TableCell>
|
|
246
297
|
)}
|
|
247
298
|
{columns.map((column, index) => {
|
|
248
|
-
const cellValue = formatCellValue(row[column], column, row);
|
|
299
|
+
const { value: cellValue, isCustomRendered } = formatCellValue(row[column], column, row);
|
|
249
300
|
return (
|
|
250
301
|
<TableCell key={index}>
|
|
251
|
-
<Typography>{cellValue}</Typography>
|
|
302
|
+
{isCustomRendered ? cellValue : <Typography>{cellValue}</Typography>}
|
|
252
303
|
</TableCell>
|
|
253
304
|
);
|
|
254
305
|
})}
|
|
@@ -280,7 +331,11 @@ export function Table<T>({
|
|
|
280
331
|
dataLength={rows.length}
|
|
281
332
|
next={handleFetchNextPage}
|
|
282
333
|
hasMore={!!hasNextPage}
|
|
283
|
-
loader={
|
|
334
|
+
loader={
|
|
335
|
+
<Typography variant='body2' sx={{ p: 3 }}>
|
|
336
|
+
Loading...
|
|
337
|
+
</Typography>
|
|
338
|
+
}
|
|
284
339
|
scrollableTarget='infinite-scroll-container'
|
|
285
340
|
>
|
|
286
341
|
{renderTableContainer()}
|
package/src/table/TableLoader.ts
CHANGED
|
@@ -19,15 +19,29 @@ export type ReactQueryKeys = {
|
|
|
19
19
|
dataQueryKey: string;
|
|
20
20
|
};
|
|
21
21
|
|
|
22
|
-
export
|
|
23
|
-
|
|
22
|
+
export interface TableLoader<T> {
|
|
23
|
+
/**
|
|
24
|
+
* Query keys are used in React Query to uniquely identify and manage cached data fetched from an API.
|
|
25
|
+
* If you do not want to set your own query keys, extend `BaseTableLoader` and it will implement defaults for you.
|
|
26
|
+
* */
|
|
27
|
+
reactQueryKeys: ReactQueryKeys;
|
|
24
28
|
load: (startIndex: number, endIndex: number, skipRowCount?: boolean) => Promise<RowWindow<T>>;
|
|
25
|
-
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export abstract class BaseTableLoader<T> implements TableLoader<T> {
|
|
32
|
+
readonly reactQueryKeys: ReactQueryKeys;
|
|
33
|
+
|
|
34
|
+
constructor() {
|
|
35
|
+
this.reactQueryKeys = generateDefaultReactQueryKeys();
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
abstract load(startIndex: number, endIndex: number, skipRowCount?: boolean): Promise<RowWindow<T>>;
|
|
39
|
+
}
|
|
26
40
|
|
|
27
41
|
export class StaticTableLoader<T> implements TableLoader<T> {
|
|
28
42
|
constructor(
|
|
29
43
|
private list: T[],
|
|
30
|
-
public reactQueryKeys
|
|
44
|
+
public reactQueryKeys: TableLoader<T>['reactQueryKeys']
|
|
31
45
|
) {
|
|
32
46
|
if (!this.reactQueryKeys) {
|
|
33
47
|
this.reactQueryKeys = generateDefaultReactQueryKeys();
|
package/src/table/tableData.ts
CHANGED
|
@@ -8,19 +8,16 @@ import {
|
|
|
8
8
|
UseInfiniteQueryResult,
|
|
9
9
|
QueryFunctionContext,
|
|
10
10
|
} from 'react-query';
|
|
11
|
-
import { TableLoader, RowWindow
|
|
11
|
+
import { TableLoader, RowWindow } from './TableLoader';
|
|
12
12
|
import { useCallback, useMemo } from 'react';
|
|
13
13
|
|
|
14
14
|
export function useTableData<T>(
|
|
15
15
|
tableLoader: TableLoader<T>,
|
|
16
16
|
rowsPerPage: number,
|
|
17
17
|
page: number,
|
|
18
|
-
infiniteScroll: boolean
|
|
18
|
+
infiniteScroll: boolean,
|
|
19
|
+
setRowCount?: React.Dispatch<React.SetStateAction<number | undefined>>
|
|
19
20
|
) {
|
|
20
|
-
if (!tableLoader.reactQueryKeys) {
|
|
21
|
-
tableLoader.reactQueryKeys = generateDefaultReactQueryKeys();
|
|
22
|
-
}
|
|
23
|
-
|
|
24
21
|
const startIndex = useMemo(() => page * rowsPerPage, [page, rowsPerPage]);
|
|
25
22
|
const endIndex = useMemo(() => startIndex + rowsPerPage, [startIndex, rowsPerPage]);
|
|
26
23
|
|
|
@@ -39,7 +36,7 @@ export function useTableData<T>(
|
|
|
39
36
|
isFetchingNextPage,
|
|
40
37
|
error: infiniteError,
|
|
41
38
|
refetch: refetchInfiniteData,
|
|
42
|
-
} = useInfiniteScrollTableQuery<T>(tableLoader, rowsPerPage, infiniteScroll);
|
|
39
|
+
} = useInfiniteScrollTableQuery<T>(tableLoader, rowsPerPage, setRowCount, infiniteScroll);
|
|
43
40
|
|
|
44
41
|
const rows = useMemo(
|
|
45
42
|
() =>
|
|
@@ -116,6 +113,7 @@ export const usePaginationTableQuery = <T>(
|
|
|
116
113
|
export const useInfiniteScrollTableQuery = <T>(
|
|
117
114
|
tableLoader: TableLoader<T>,
|
|
118
115
|
rowsPerPage: number,
|
|
116
|
+
setRowCount?: React.Dispatch<React.SetStateAction<number | undefined>>,
|
|
119
117
|
enabled = true
|
|
120
118
|
): UseInfiniteQueryResult<RowWindow<T>, Error> => {
|
|
121
119
|
const { reactQueryKeys } = tableLoader;
|
|
@@ -128,8 +126,10 @@ export const useInfiniteScrollTableQuery = <T>(
|
|
|
128
126
|
pageParam = { startIndex: 0, endIndex: rowsPerPage },
|
|
129
127
|
}: QueryFunctionContext<[string, string], { startIndex: number; endIndex: number }>) => {
|
|
130
128
|
const { startIndex, endIndex } = pageParam;
|
|
131
|
-
// skip row count query since it is not utilized in infinite scroll implementation
|
|
132
|
-
|
|
129
|
+
// skip row count query, unless setRowCount was provided, since it is not utilized in infinite scroll implementation
|
|
130
|
+
const data = await tableLoader.load(startIndex, endIndex, setRowCount ? false : true);
|
|
131
|
+
setRowCount && setRowCount(data.totalCount);
|
|
132
|
+
return data;
|
|
133
133
|
};
|
|
134
134
|
|
|
135
135
|
const { dataKey, dataQueryKey } = reactQueryKeys;
|