@etsoo/materialui 1.3.52 → 1.3.53

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.
Files changed (10) hide show
  1. package/lib/DataGridEx.js +2 -2
  2. package/lib/GridUtils.d.ts +1 -4
  3. package/lib/GridUtils.js +1 -1
  4. package/lib/ListMoreDisplay.js +10 -10
  5. package/lib/TableEx.js +26 -20
  6. package/package.json +14 -14
  7. package/src/DataGridEx.tsx +4 -3
  8. package/src/GridUtils.ts +1 -1
  9. package/src/ListMoreDisplay.tsx +10 -10
  10. package/src/TableEx.tsx +31 -25
package/lib/DataGridEx.js CHANGED
@@ -71,7 +71,7 @@ export function DataGridEx(props) {
71
71
  // Theme
72
72
  const theme = useTheme();
73
73
  const defaultHeaderRenderer = (states) => {
74
- const { orderBy } = states;
74
+ const { orderBy } = states.queryPaging;
75
75
  return (React.createElement(Box, { className: "DataGridEx-Header", display: "flex", alignItems: "center", borderBottom: boldBorder, fontWeight: 500, minWidth: widthCalculator.total, height: headerHeight }, columns.map((column, index) => {
76
76
  // Destruct
77
77
  const { align, field, header, headerCellRenderer, sortable, sortAsc = true, type } = column;
@@ -166,7 +166,7 @@ export function DataGridEx(props) {
166
166
  });
167
167
  // New sort
168
168
  const handleSort = (field, asc) => {
169
- reset({ orderBy: field, orderByAsc: asc });
169
+ reset({ queryPaging: { orderBy: field, orderByAsc: asc } });
170
170
  };
171
171
  // Reset
172
172
  const reset = (add) => {
package/lib/GridUtils.d.ts CHANGED
@@ -13,10 +13,7 @@ export declare namespace GridUtils {
13
13
  * @returns Request data
14
14
  */
15
15
  function createLoader<F extends DataTypes.BasicTemplate>(props: GridLoadDataProps, template?: F, cacheKey?: string): DataTypes.BasicTemplateType<F> & {
16
- currentPage: number;
17
- batchSize: number;
18
- orderBy?: string | undefined;
19
- orderByAsc?: boolean | undefined;
16
+ queryPaging: import("@etsoo/appscript").QueryPagingData;
20
17
  };
21
18
  /**
22
19
  * Get cache data
package/lib/GridUtils.js CHANGED
@@ -59,7 +59,7 @@ export var GridUtils;
59
59
  */
60
60
  function getUpdateRowsHandler(cacheKey) {
61
61
  return (rows, state) => {
62
- if (state.currentPage > 0 && cacheKey) {
62
+ if (state.queryPaging.currentPage > 0 && cacheKey) {
63
63
  const data = {
64
64
  rows,
65
65
  state,
package/lib/ListMoreDisplay.js CHANGED
@@ -13,12 +13,14 @@ export function ListMoreDisplay(props) {
13
13
  const { batchSize = 6, children, defaultOrderBy, headerRenderer, autoLoad = headerRenderer == null, headerTitle, loadBatchSize, loadData, moreLabel = globalApp ? globalApp.get("more") + "..." : undefined, fieldTemplate, threshold, ...rest } = props;
14
14
  // Refs
15
15
  const refs = React.useRef({
16
+ queryPaging: {
17
+ currentPage: 0,
18
+ orderBy: defaultOrderBy,
19
+ batchSize
20
+ },
16
21
  autoLoad,
17
- currentPage: 0,
18
22
  hasNextPage: true,
19
23
  isNextPageLoading: false,
20
- orderBy: defaultOrderBy,
21
- batchSize,
22
24
  loadedItems: 0,
23
25
  selectedItems: [],
24
26
  idCache: {}
@@ -36,12 +38,9 @@ export function ListMoreDisplay(props) {
36
38
  // Update state
37
39
  ref.isNextPageLoading = true;
38
40
  // Parameters
39
- const { currentPage, batchSize, orderBy, orderByAsc, data } = ref;
41
+ const { queryPaging, data } = ref;
40
42
  const loadProps = {
41
- currentPage,
42
- batchSize,
43
- orderBy,
44
- orderByAsc,
43
+ queryPaging,
45
44
  data
46
45
  };
47
46
  const mergedData = GridDataGet(loadProps, fieldTemplate);
@@ -56,7 +55,8 @@ export function ListMoreDisplay(props) {
56
55
  ref.isNextPageLoading = false;
57
56
  ref.hasNextPage = hasNextPage;
58
57
  // Next page
59
- ref.currentPage = currentPage + 1;
58
+ var currentPage = ref.queryPaging.currentPage ?? 0;
59
+ ref.queryPaging.currentPage = currentPage + 1;
60
60
  // Update rows
61
61
  if (states.items == null || reset) {
62
62
  setStates({ items, completed: !hasNextPage });
@@ -73,7 +73,7 @@ export function ListMoreDisplay(props) {
73
73
  ref.data = data;
74
74
  // Reset page number
75
75
  ref.isNextPageLoading = false;
76
- ref.currentPage = 0;
76
+ ref.queryPaging.currentPage = 0;
77
77
  ref.hasNextPage = true;
78
78
  // Load data
79
79
  loadDataLocal(true);
package/lib/TableEx.js CHANGED
@@ -38,32 +38,39 @@ export function TableEx(props) {
38
38
  state.loadedItems = rows.length;
39
39
  updateRows(rows);
40
40
  };
41
+ var orderByAsc = defaultOrderBy
42
+ ? columns.find((column) => column.field === defaultOrderBy)?.sortAsc
43
+ : undefined;
41
44
  // States
42
45
  const stateRefs = React.useRef({
46
+ queryPaging: {
47
+ currentPage: 0,
48
+ orderBy: defaultOrderBy,
49
+ orderByAsc,
50
+ batchSize: rowsPerPageLocal
51
+ },
43
52
  autoLoad,
44
- currentPage: 0,
45
53
  loadedItems: 0,
46
54
  hasNextPage: true,
47
55
  isNextPageLoading: false,
48
- orderBy: defaultOrderBy,
49
- orderByAsc: defaultOrderBy
50
- ? columns.find((column) => column.field === defaultOrderBy)?.sortAsc
51
- : undefined,
52
- batchSize: rowsPerPageLocal,
53
56
  selectedItems: [],
54
57
  idCache: {}
55
58
  });
56
59
  const state = stateRefs.current;
57
60
  // Reset the state and load again
58
61
  const reset = (add) => {
62
+ const { queryPaging, ...rest } = add ?? {};
59
63
  const resetState = {
64
+ queryPaging: {
65
+ currentPage: 0,
66
+ ...queryPaging
67
+ },
60
68
  autoLoad: true,
61
- currentPage: 0,
62
69
  loadedItems: 0,
63
70
  hasNextPage: true,
64
71
  isNextPageLoading: false,
65
72
  lastLoadedItems: undefined,
66
- ...add
73
+ ...rest
67
74
  };
68
75
  Object.assign(state, resetState);
69
76
  };
@@ -107,12 +114,9 @@ export function TableEx(props) {
107
114
  // Update state
108
115
  state.isNextPageLoading = true;
109
116
  // Parameters
110
- const { currentPage, batchSize, orderBy, orderByAsc, data, isMounted } = state;
117
+ const { queryPaging, data, isMounted } = state;
111
118
  const loadProps = {
112
- currentPage,
113
- batchSize,
114
- orderBy,
115
- orderByAsc,
119
+ queryPaging,
116
120
  data
117
121
  };
118
122
  loadData(loadProps).then((result) => {
@@ -122,7 +126,7 @@ export function TableEx(props) {
122
126
  }
123
127
  const newItems = result.length;
124
128
  state.lastLoadedItems = newItems;
125
- state.hasNextPage = newItems >= batchSize;
129
+ state.hasNextPage = newItems >= queryPaging.batchSize;
126
130
  state.isNextPageLoading = false;
127
131
  // Update rows
128
132
  setRows(result);
@@ -130,12 +134,12 @@ export function TableEx(props) {
130
134
  };
131
135
  const handleChangePage = (_event, newPage) => {
132
136
  state.hasNextPage = true;
133
- state.currentPage = newPage;
137
+ state.queryPaging.currentPage = newPage;
134
138
  loadDataLocal();
135
139
  };
136
140
  const handleChangeRowsPerPage = (event) => {
137
141
  const batchSize = parseInt(event.target.value);
138
- reset({ batchSize });
142
+ reset({ queryPaging: { batchSize } });
139
143
  };
140
144
  const handleSelect = (item, checked) => {
141
145
  const selectedItems = state.selectedItems;
@@ -170,7 +174,7 @@ export function TableEx(props) {
170
174
  };
171
175
  // New sort
172
176
  const handleSort = (field, asc) => {
173
- reset({ orderBy: field, orderByAsc: asc });
177
+ reset({ queryPaging: { orderBy: field, orderByAsc: asc } });
174
178
  };
175
179
  // Set items for rerenderer
176
180
  const setItems = (callback) => {
@@ -180,7 +184,9 @@ export function TableEx(props) {
180
184
  setRows(result);
181
185
  };
182
186
  // Destruct states
183
- const { autoLoad: stateAutoLoad, currentPage, hasNextPage, lastLoadedItems, orderBy, batchSize, selectedItems } = state;
187
+ const { queryPaging, autoLoad: stateAutoLoad, hasNextPage, lastLoadedItems, selectedItems } = state;
188
+ const currentPage = queryPaging.currentPage;
189
+ const batchSize = queryPaging.batchSize;
184
190
  // Current page selected items
185
191
  const pageSelectedItems = selectable
186
192
  ? rows.reduce((previousValue, currentItem) => {
@@ -222,7 +228,7 @@ export function TableEx(props) {
222
228
  // Sortable
223
229
  let sortLabel;
224
230
  if (sortable && field != null) {
225
- const active = orderBy === field;
231
+ const active = queryPaging.orderBy === field;
226
232
  sortLabel = (React.createElement(TableSortLabel, { active: active, direction: sortAsc ? "asc" : "desc", onClick: (_event) => {
227
233
  if (active)
228
234
  column.sortAsc = !sortAsc;
@@ -247,7 +253,7 @@ export function TableEx(props) {
247
253
  "& tr:nth-of-type(even):not(.Mui-selected)": {
248
254
  backgroundColor: alternatingColors[1]
249
255
  }
250
- } }, [...Array(batchSize)].map((_item, rowIndex) => {
256
+ } }, [...Array(queryPaging.batchSize)].map((_item, rowIndex) => {
251
257
  // Row
252
258
  const row = rowIndex < rows.length ? rows[rowIndex] : undefined;
253
259
  // Row id field value
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.3.52",
3
+ "version": "1.3.53",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -50,13 +50,13 @@
50
50
  "@emotion/css": "^11.11.2",
51
51
  "@emotion/react": "^11.11.4",
52
52
  "@emotion/styled": "^11.11.5",
53
- "@etsoo/appscript": "^1.4.84",
53
+ "@etsoo/appscript": "^1.4.86",
54
54
  "@etsoo/notificationbase": "^1.1.42",
55
- "@etsoo/react": "^1.7.34",
55
+ "@etsoo/react": "^1.7.39",
56
56
  "@etsoo/shared": "^1.2.37",
57
- "@mui/icons-material": "^5.15.15",
58
- "@mui/material": "^5.15.15",
59
- "@mui/x-data-grid": "^7.3.1",
57
+ "@mui/icons-material": "^5.15.17",
58
+ "@mui/material": "^5.15.17",
59
+ "@mui/x-data-grid": "^7.3.2",
60
60
  "chart.js": "^4.4.2",
61
61
  "chartjs-plugin-datalabels": "^2.2.0",
62
62
  "eventemitter3": "^5.0.1",
@@ -70,15 +70,15 @@
70
70
  "react-imask": "7.6.0"
71
71
  },
72
72
  "devDependencies": {
73
- "@babel/cli": "^7.24.1",
74
- "@babel/core": "^7.24.4",
73
+ "@babel/cli": "^7.24.5",
74
+ "@babel/core": "^7.24.5",
75
75
  "@babel/plugin-transform-runtime": "^7.24.3",
76
- "@babel/preset-env": "^7.24.4",
76
+ "@babel/preset-env": "^7.24.5",
77
77
  "@babel/preset-react": "^7.24.1",
78
78
  "@babel/preset-typescript": "^7.24.1",
79
- "@babel/runtime-corejs3": "^7.24.4",
80
- "@testing-library/jest-dom": "^6.4.2",
81
- "@testing-library/react": "^15.0.5",
79
+ "@babel/runtime-corejs3": "^7.24.5",
80
+ "@testing-library/jest-dom": "^6.4.5",
81
+ "@testing-library/react": "^15.0.7",
82
82
  "@types/jest": "^29.5.12",
83
83
  "@types/pica": "^9.0.4",
84
84
  "@types/pulltorefreshjs": "^0.1.7",
@@ -87,8 +87,8 @@
87
87
  "@types/react-dom": "^18.3.0",
88
88
  "@types/react-input-mask": "^3.0.5",
89
89
  "@types/react-window": "^1.8.8",
90
- "@typescript-eslint/eslint-plugin": "^7.7.1",
91
- "@typescript-eslint/parser": "^7.7.1",
90
+ "@typescript-eslint/eslint-plugin": "^7.8.0",
91
+ "@typescript-eslint/parser": "^7.8.0",
92
92
  "jest": "^29.7.0",
93
93
  "jest-environment-jsdom": "^29.7.0",
94
94
  "typescript": "^5.4.5"
package/src/DataGridEx.tsx CHANGED
@@ -5,6 +5,7 @@ import {
5
5
  GridCellRendererProps,
6
6
  GridColumn,
7
7
  GridHeaderCellRendererProps,
8
+ GridLoaderPartialStates,
8
9
  GridLoaderStates,
9
10
  ScrollerGrid,
10
11
  ScrollerGridForwardRef,
@@ -218,7 +219,7 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
218
219
  const theme = useTheme();
219
220
 
220
221
  const defaultHeaderRenderer = (states: GridLoaderStates<T>) => {
221
- const { orderBy } = states;
222
+ const { orderBy } = states.queryPaging;
222
223
  return (
223
224
  <Box
224
225
  className="DataGridEx-Header"
@@ -437,11 +438,11 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
437
438
 
438
439
  // New sort
439
440
  const handleSort = (field: string, asc?: boolean) => {
440
- reset({ orderBy: field, orderByAsc: asc });
441
+ reset({ queryPaging: { orderBy: field, orderByAsc: asc } });
441
442
  };
442
443
 
443
444
  // Reset
444
- const reset = (add: object) => {
445
+ const reset = (add: GridLoaderPartialStates<T>) => {
445
446
  refs.current.ref?.reset(add);
446
447
  };
447
448
 
package/src/GridUtils.ts CHANGED
@@ -73,7 +73,7 @@ export namespace GridUtils {
73
73
  */
74
74
  export function getUpdateRowsHandler<T extends object>(cacheKey?: string) {
75
75
  return (rows: T[], state: GridLoaderStates<T>) => {
76
- if (state.currentPage > 0 && cacheKey) {
76
+ if (state.queryPaging.currentPage > 0 && cacheKey) {
77
77
  const data: GridDataCacheType<T> = {
78
78
  rows,
79
79
  state,
package/src/ListMoreDisplay.tsx CHANGED
@@ -89,12 +89,14 @@ export function ListMoreDisplay<
89
89
 
90
90
  // Refs
91
91
  const refs = React.useRef<GridLoaderStates<T>>({
92
+ queryPaging: {
93
+ currentPage: 0,
94
+ orderBy: defaultOrderBy,
95
+ batchSize
96
+ },
92
97
  autoLoad,
93
- currentPage: 0,
94
98
  hasNextPage: true,
95
99
  isNextPageLoading: false,
96
- orderBy: defaultOrderBy,
97
- batchSize,
98
100
  loadedItems: 0,
99
101
  selectedItems: [],
100
102
  idCache: {}
@@ -118,13 +120,10 @@ export function ListMoreDisplay<
118
120
  ref.isNextPageLoading = true;
119
121
 
120
122
  // Parameters
121
- const { currentPage, batchSize, orderBy, orderByAsc, data } = ref;
123
+ const { queryPaging, data } = ref;
122
124
 
123
125
  const loadProps: GridLoadDataProps = {
124
- currentPage,
125
- batchSize,
126
- orderBy,
127
- orderByAsc,
126
+ queryPaging,
128
127
  data
129
128
  };
130
129
 
@@ -143,7 +142,8 @@ export function ListMoreDisplay<
143
142
  ref.hasNextPage = hasNextPage;
144
143
 
145
144
  // Next page
146
- ref.currentPage = currentPage + 1;
145
+ var currentPage = ref.queryPaging.currentPage ?? 0;
146
+ ref.queryPaging.currentPage = currentPage + 1;
147
147
 
148
148
  // Update rows
149
149
  if (states.items == null || reset) {
@@ -162,7 +162,7 @@ export function ListMoreDisplay<
162
162
 
163
163
  // Reset page number
164
164
  ref.isNextPageLoading = false;
165
- ref.currentPage = 0;
165
+ ref.queryPaging.currentPage = 0;
166
166
  ref.hasNextPage = true;
167
167
 
168
168
  // Load data
package/src/TableEx.tsx CHANGED
@@ -4,6 +4,7 @@ import {
4
4
  GridColumn,
5
5
  GridLoadDataProps,
6
6
  GridLoader,
7
+ GridLoaderPartialStates,
7
8
  GridLoaderStates,
8
9
  GridSizeGet
9
10
  } from "@etsoo/react";
@@ -148,33 +149,41 @@ export function TableEx<
148
149
  updateRows(rows);
149
150
  };
150
151
 
152
+ var orderByAsc = defaultOrderBy
153
+ ? columns.find((column) => column.field === defaultOrderBy)?.sortAsc
154
+ : undefined;
155
+
151
156
  // States
152
157
  const stateRefs = React.useRef<GridLoaderStates<T>>({
158
+ queryPaging: {
159
+ currentPage: 0,
160
+ orderBy: defaultOrderBy,
161
+ orderByAsc,
162
+ batchSize: rowsPerPageLocal
163
+ },
153
164
  autoLoad,
154
- currentPage: 0,
155
165
  loadedItems: 0,
156
166
  hasNextPage: true,
157
167
  isNextPageLoading: false,
158
- orderBy: defaultOrderBy,
159
- orderByAsc: defaultOrderBy
160
- ? columns.find((column) => column.field === defaultOrderBy)?.sortAsc
161
- : undefined,
162
- batchSize: rowsPerPageLocal,
163
168
  selectedItems: [],
164
169
  idCache: {}
165
170
  });
166
171
  const state = stateRefs.current;
167
172
 
168
173
  // Reset the state and load again
169
- const reset = (add?: Partial<GridLoaderStates<T>>) => {
170
- const resetState: Partial<GridLoaderStates<T>> = {
174
+ const reset = (add?: GridLoaderPartialStates<T>) => {
175
+ const { queryPaging, ...rest } = add ?? {};
176
+ const resetState: GridLoaderPartialStates<T> = {
177
+ queryPaging: {
178
+ currentPage: 0,
179
+ ...queryPaging
180
+ },
171
181
  autoLoad: true,
172
- currentPage: 0,
173
182
  loadedItems: 0,
174
183
  hasNextPage: true,
175
184
  isNextPageLoading: false,
176
185
  lastLoadedItems: undefined,
177
- ...add
186
+ ...rest
178
187
  };
179
188
  Object.assign(state, resetState);
180
189
  };
@@ -227,14 +236,10 @@ export function TableEx<
227
236
  state.isNextPageLoading = true;
228
237
 
229
238
  // Parameters
230
- const { currentPage, batchSize, orderBy, orderByAsc, data, isMounted } =
231
- state;
239
+ const { queryPaging, data, isMounted } = state;
232
240
 
233
241
  const loadProps: GridLoadDataProps = {
234
- currentPage,
235
- batchSize,
236
- orderBy,
237
- orderByAsc,
242
+ queryPaging,
238
243
  data
239
244
  };
240
245
 
@@ -246,7 +251,7 @@ export function TableEx<
246
251
 
247
252
  const newItems = result.length;
248
253
  state.lastLoadedItems = newItems;
249
- state.hasNextPage = newItems >= batchSize;
254
+ state.hasNextPage = newItems >= queryPaging.batchSize;
250
255
  state.isNextPageLoading = false;
251
256
 
252
257
  // Update rows
@@ -256,7 +261,7 @@ export function TableEx<
256
261
 
257
262
  const handleChangePage = (_event: unknown, newPage: number) => {
258
263
  state.hasNextPage = true;
259
- state.currentPage = newPage;
264
+ state.queryPaging.currentPage = newPage;
260
265
  loadDataLocal();
261
266
  };
262
267
 
@@ -264,7 +269,7 @@ export function TableEx<
264
269
  event: React.ChangeEvent<HTMLInputElement>
265
270
  ) => {
266
271
  const batchSize = parseInt(event.target.value);
267
- reset({ batchSize });
272
+ reset({ queryPaging: { batchSize } });
268
273
  };
269
274
 
270
275
  const handleSelect = (item: T, checked: Boolean) => {
@@ -306,7 +311,7 @@ export function TableEx<
306
311
 
307
312
  // New sort
308
313
  const handleSort = (field: string, asc?: boolean) => {
309
- reset({ orderBy: field, orderByAsc: asc });
314
+ reset({ queryPaging: { orderBy: field, orderByAsc: asc } });
310
315
  };
311
316
 
312
317
  // Set items for rerenderer
@@ -318,15 +323,16 @@ export function TableEx<
318
323
 
319
324
  // Destruct states
320
325
  const {
326
+ queryPaging,
321
327
  autoLoad: stateAutoLoad,
322
- currentPage,
323
328
  hasNextPage,
324
329
  lastLoadedItems,
325
- orderBy,
326
- batchSize,
327
330
  selectedItems
328
331
  } = state;
329
332
 
333
+ const currentPage = queryPaging.currentPage;
334
+ const batchSize = queryPaging.batchSize;
335
+
330
336
  // Current page selected items
331
337
  const pageSelectedItems = selectable
332
338
  ? rows.reduce((previousValue, currentItem) => {
@@ -399,7 +405,7 @@ export function TableEx<
399
405
  // Sortable
400
406
  let sortLabel: React.ReactNode;
401
407
  if (sortable && field != null) {
402
- const active = orderBy === field;
408
+ const active = queryPaging.orderBy === field;
403
409
 
404
410
  sortLabel = (
405
411
  <TableSortLabel
@@ -448,7 +454,7 @@ export function TableEx<
448
454
  }
449
455
  }}
450
456
  >
451
- {[...Array(batchSize)].map((_item, rowIndex) => {
457
+ {[...Array(queryPaging.batchSize)].map((_item, rowIndex) => {
452
458
  // Row
453
459
  const row = rowIndex < rows.length ? rows[rowIndex] : undefined;
454
460