@etsoo/react 1.8.40 → 1.8.42

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 (7) hide show
  1. package/lib/cjs/components/ScrollerGrid.js +18 -14
  2. package/lib/cjs/components/ScrollerList.js +21 -17
  3. package/lib/mjs/components/ScrollerGrid.js +18 -14
  4. package/lib/mjs/components/ScrollerList.js +21 -17
  5. package/package.json +12 -12
  6. package/src/components/ScrollerGrid.tsx +21 -13
  7. package/src/components/ScrollerList.tsx +25 -19
package/lib/cjs/components/ScrollerGrid.js CHANGED
@@ -41,7 +41,9 @@ const ScrollerGrid = (props) => {
41
41
  // Load data
42
42
  const loadDataLocal = (pageAdd = 1) => {
43
43
  // Prevent multiple loadings
44
- if (!refs.current.hasNextPage || refs.current.isNextPageLoading)
44
+ if (!refs.current.hasNextPage ||
45
+ refs.current.isNextPageLoading ||
46
+ refs.current.isMounted === false)
45
47
  return;
46
48
  // Update state
47
49
  refs.current.isNextPageLoading = true;
@@ -218,11 +220,6 @@ const ScrollerGrid = (props) => {
218
220
  }
219
221
  };
220
222
  react_1.default.useImperativeHandle(mRef, () => instance, [rows]);
221
- react_1.default.useEffect(() => {
222
- return () => {
223
- refs.current.isMounted = false;
224
- };
225
- }, []);
226
223
  // Force update to work with the new width and rowHeight
227
224
  react_1.default.useEffect(() => {
228
225
  ref.current?.resetAfterIndices({
@@ -235,14 +232,21 @@ const ScrollerGrid = (props) => {
235
232
  const rowLength = rows.length;
236
233
  // Row count
237
234
  const rowCount = refs.current.hasNextPage ? rowLength + 1 : rowLength;
238
- // Auto load data when current page is 0
239
- if (refs.current.queryPaging.currentPage === 0 && refs.current.autoLoad) {
240
- const initItems = onInitLoad == null ? undefined : onInitLoad(ref.current);
241
- if (initItems)
242
- reset(initItems[1], initItems[0]);
243
- else
244
- loadDataLocal();
245
- }
235
+ react_1.default.useEffect(() => {
236
+ // Auto load data when current page is 0
237
+ if (refs.current.queryPaging.currentPage === 0 && refs.current.autoLoad) {
238
+ const initItems = onInitLoad == null ? undefined : onInitLoad(ref.current);
239
+ if (initItems)
240
+ reset(initItems[1], initItems[0]);
241
+ else
242
+ loadDataLocal();
243
+ }
244
+ }, [onInitLoad, loadDataLocal]);
245
+ react_1.default.useEffect(() => {
246
+ return () => {
247
+ refs.current.isMounted = false;
248
+ };
249
+ }, []);
246
250
  // Layout
247
251
  return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [headerRenderer && headerRenderer(refs.current), (0, jsx_runtime_1.jsx)(react_window_1.VariableSizeGrid, { itemKey: ({ columnIndex, rowIndex, data }) => {
248
252
  if (data == null)
package/lib/cjs/components/ScrollerList.js CHANGED
@@ -59,7 +59,9 @@ const ScrollerList = (props) => {
59
59
  // Load data
60
60
  const loadDataLocal = (pageAdd = 1) => {
61
61
  // Prevent multiple loadings
62
- if (!stateRefs.current.hasNextPage || stateRefs.current.isNextPageLoading)
62
+ if (!stateRefs.current.hasNextPage ||
63
+ stateRefs.current.isNextPageLoading ||
64
+ stateRefs.current.isMounted === false)
63
65
  return;
64
66
  // Update state
65
67
  stateRefs.current.isNextPageLoading = true;
@@ -168,13 +170,6 @@ const ScrollerList = (props) => {
168
170
  }
169
171
  };
170
172
  }, []);
171
- // When layout ready
172
- react_1.default.useEffect(() => {
173
- // Return clear function
174
- return () => {
175
- stateRefs.current.isMounted = false;
176
- };
177
- }, []);
178
173
  // Row count
179
174
  const rowCount = rows.length;
180
175
  // Local items renderer callback
@@ -190,15 +185,24 @@ const ScrollerList = (props) => {
190
185
  };
191
186
  // Item count
192
187
  const itemCount = stateRefs.current.hasNextPage ? rowCount + 1 : rowCount;
193
- // Auto load data when current page is 0
194
- if (stateRefs.current.queryPaging?.currentPage === 0 &&
195
- stateRefs.current.autoLoad) {
196
- const initItems = onInitLoad == null ? undefined : onInitLoad(listRef.current);
197
- if (initItems)
198
- reset(initItems[1], initItems[0]);
199
- else
200
- loadDataLocal();
201
- }
188
+ react_1.default.useEffect(() => {
189
+ // Auto load data when current page is 0
190
+ if (stateRefs.current.queryPaging?.currentPage === 0 &&
191
+ stateRefs.current.autoLoad) {
192
+ const initItems = onInitLoad == null ? undefined : onInitLoad(listRef.current);
193
+ if (initItems)
194
+ reset(initItems[1], initItems[0]);
195
+ else
196
+ loadDataLocal();
197
+ }
198
+ }, [onInitLoad, loadDataLocal]);
199
+ // When layout ready
200
+ react_1.default.useEffect(() => {
201
+ // Return clear function
202
+ return () => {
203
+ stateRefs.current.isMounted = false;
204
+ };
205
+ }, []);
202
206
  // Layout
203
207
  return typeof itemSize === "function" ? ((0, jsx_runtime_1.jsx)(react_window_1.VariableSizeList, { height: height, width: width, itemCount: itemCount, itemKey: (index, data) => shared_1.DataTypes.getIdValue1(data, idField) ?? index, itemSize: itemSize, outerRef: refs, ref: listRef, style: style, onItemsRendered: onItemsRenderedLocal, ...rest, children: itemRendererLocal })) : ((0, jsx_runtime_1.jsx)(react_window_1.FixedSizeList, { height: height, width: width, itemCount: itemCount, itemKey: (index, data) => shared_1.DataTypes.getIdValue1(data, idField) ?? index, itemSize: itemSize, outerRef: refs, ref: listRef, style: style, onItemsRendered: onItemsRenderedLocal, ...rest, children: itemRendererLocal }));
204
208
  };
package/lib/mjs/components/ScrollerGrid.js CHANGED
@@ -35,7 +35,9 @@ export const ScrollerGrid = (props) => {
35
35
  // Load data
36
36
  const loadDataLocal = (pageAdd = 1) => {
37
37
  // Prevent multiple loadings
38
- if (!refs.current.hasNextPage || refs.current.isNextPageLoading)
38
+ if (!refs.current.hasNextPage ||
39
+ refs.current.isNextPageLoading ||
40
+ refs.current.isMounted === false)
39
41
  return;
40
42
  // Update state
41
43
  refs.current.isNextPageLoading = true;
@@ -212,11 +214,6 @@ export const ScrollerGrid = (props) => {
212
214
  }
213
215
  };
214
216
  React.useImperativeHandle(mRef, () => instance, [rows]);
215
- React.useEffect(() => {
216
- return () => {
217
- refs.current.isMounted = false;
218
- };
219
- }, []);
220
217
  // Force update to work with the new width and rowHeight
221
218
  React.useEffect(() => {
222
219
  ref.current?.resetAfterIndices({
@@ -229,14 +226,21 @@ export const ScrollerGrid = (props) => {
229
226
  const rowLength = rows.length;
230
227
  // Row count
231
228
  const rowCount = refs.current.hasNextPage ? rowLength + 1 : rowLength;
232
- // Auto load data when current page is 0
233
- if (refs.current.queryPaging.currentPage === 0 && refs.current.autoLoad) {
234
- const initItems = onInitLoad == null ? undefined : onInitLoad(ref.current);
235
- if (initItems)
236
- reset(initItems[1], initItems[0]);
237
- else
238
- loadDataLocal();
239
- }
229
+ React.useEffect(() => {
230
+ // Auto load data when current page is 0
231
+ if (refs.current.queryPaging.currentPage === 0 && refs.current.autoLoad) {
232
+ const initItems = onInitLoad == null ? undefined : onInitLoad(ref.current);
233
+ if (initItems)
234
+ reset(initItems[1], initItems[0]);
235
+ else
236
+ loadDataLocal();
237
+ }
238
+ }, [onInitLoad, loadDataLocal]);
239
+ React.useEffect(() => {
240
+ return () => {
241
+ refs.current.isMounted = false;
242
+ };
243
+ }, []);
240
244
  // Layout
241
245
  return (_jsxs(React.Fragment, { children: [headerRenderer && headerRenderer(refs.current), _jsx(VariableSizeGrid, { itemKey: ({ columnIndex, rowIndex, data }) => {
242
246
  if (data == null)
package/lib/mjs/components/ScrollerList.js CHANGED
@@ -53,7 +53,9 @@ export const ScrollerList = (props) => {
53
53
  // Load data
54
54
  const loadDataLocal = (pageAdd = 1) => {
55
55
  // Prevent multiple loadings
56
- if (!stateRefs.current.hasNextPage || stateRefs.current.isNextPageLoading)
56
+ if (!stateRefs.current.hasNextPage ||
57
+ stateRefs.current.isNextPageLoading ||
58
+ stateRefs.current.isMounted === false)
57
59
  return;
58
60
  // Update state
59
61
  stateRefs.current.isNextPageLoading = true;
@@ -162,13 +164,6 @@ export const ScrollerList = (props) => {
162
164
  }
163
165
  };
164
166
  }, []);
165
- // When layout ready
166
- React.useEffect(() => {
167
- // Return clear function
168
- return () => {
169
- stateRefs.current.isMounted = false;
170
- };
171
- }, []);
172
167
  // Row count
173
168
  const rowCount = rows.length;
174
169
  // Local items renderer callback
@@ -184,15 +179,24 @@ export const ScrollerList = (props) => {
184
179
  };
185
180
  // Item count
186
181
  const itemCount = stateRefs.current.hasNextPage ? rowCount + 1 : rowCount;
187
- // Auto load data when current page is 0
188
- if (stateRefs.current.queryPaging?.currentPage === 0 &&
189
- stateRefs.current.autoLoad) {
190
- const initItems = onInitLoad == null ? undefined : onInitLoad(listRef.current);
191
- if (initItems)
192
- reset(initItems[1], initItems[0]);
193
- else
194
- loadDataLocal();
195
- }
182
+ React.useEffect(() => {
183
+ // Auto load data when current page is 0
184
+ if (stateRefs.current.queryPaging?.currentPage === 0 &&
185
+ stateRefs.current.autoLoad) {
186
+ const initItems = onInitLoad == null ? undefined : onInitLoad(listRef.current);
187
+ if (initItems)
188
+ reset(initItems[1], initItems[0]);
189
+ else
190
+ loadDataLocal();
191
+ }
192
+ }, [onInitLoad, loadDataLocal]);
193
+ // When layout ready
194
+ React.useEffect(() => {
195
+ // Return clear function
196
+ return () => {
197
+ stateRefs.current.isMounted = false;
198
+ };
199
+ }, []);
196
200
  // Layout
197
201
  return typeof itemSize === "function" ? (_jsx(VariableSizeList, { height: height, width: width, itemCount: itemCount, itemKey: (index, data) => DataTypes.getIdValue1(data, idField) ?? index, itemSize: itemSize, outerRef: refs, ref: listRef, style: style, onItemsRendered: onItemsRenderedLocal, ...rest, children: itemRendererLocal })) : (_jsx(FixedSizeList, { height: height, width: width, itemCount: itemCount, itemKey: (index, data) => DataTypes.getIdValue1(data, idField) ?? index, itemSize: itemSize, outerRef: refs, ref: listRef, style: style, onItemsRendered: onItemsRenderedLocal, ...rest, children: itemRendererLocal }));
198
202
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/react",
3
- "version": "1.8.40",
3
+ "version": "1.8.42",
4
4
  "description": "TypeScript ReactJs UI Independent Framework",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/mjs/index.js",
@@ -40,12 +40,12 @@
40
40
  "@emotion/css": "^11.13.5",
41
41
  "@emotion/react": "^11.14.0",
42
42
  "@emotion/styled": "^11.14.0",
43
- "@etsoo/appscript": "^1.6.25",
43
+ "@etsoo/appscript": "^1.6.32",
44
44
  "@etsoo/notificationbase": "^1.1.60",
45
- "@etsoo/shared": "^1.2.69",
45
+ "@etsoo/shared": "^1.2.70",
46
46
  "react": "^18.3.1",
47
47
  "react-dom": "^18.3.1",
48
- "react-router-dom": "^7.5.1",
48
+ "react-router-dom": "^7.5.3",
49
49
  "react-window": "^1.8.11"
50
50
  },
51
51
  "overrides": {
@@ -54,19 +54,19 @@
54
54
  "@emotion/react": "$@emotion/react"
55
55
  },
56
56
  "devDependencies": {
57
- "@babel/cli": "^7.27.0",
58
- "@babel/core": "^7.26.10",
59
- "@babel/plugin-transform-runtime": "^7.26.10",
60
- "@babel/preset-env": "^7.26.9",
61
- "@babel/runtime-corejs3": "^7.27.0",
57
+ "@babel/cli": "^7.27.1",
58
+ "@babel/core": "^7.27.1",
59
+ "@babel/plugin-transform-runtime": "^7.27.1",
60
+ "@babel/preset-env": "^7.27.1",
61
+ "@babel/runtime-corejs3": "^7.27.1",
62
62
  "@testing-library/jest-dom": "^6.6.3",
63
63
  "@testing-library/react": "^16.3.0",
64
64
  "@types/react": "^18.3.20",
65
- "@types/react-dom": "^18.3.6",
65
+ "@types/react-dom": "^18.3.7",
66
66
  "@types/react-window": "^1.8.8",
67
- "@vitejs/plugin-react": "^4.4.0",
67
+ "@vitejs/plugin-react": "^4.4.1",
68
68
  "jsdom": "^26.1.0",
69
69
  "typescript": "^5.8.3",
70
- "vitest": "^3.1.1"
70
+ "vitest": "^3.1.2"
71
71
  }
72
72
  }
package/src/components/ScrollerGrid.tsx CHANGED
@@ -206,7 +206,12 @@ export const ScrollerGrid = <T extends object>(props: ScrollerGridProps<T>) => {
206
206
  // Load data
207
207
  const loadDataLocal = (pageAdd: number = 1) => {
208
208
  // Prevent multiple loadings
209
- if (!refs.current.hasNextPage || refs.current.isNextPageLoading) return;
209
+ if (
210
+ !refs.current.hasNextPage ||
211
+ refs.current.isNextPageLoading ||
212
+ refs.current.isMounted === false
213
+ )
214
+ return;
210
215
 
211
216
  // Update state
212
217
  refs.current.isNextPageLoading = true;
@@ -419,12 +424,6 @@ export const ScrollerGrid = <T extends object>(props: ScrollerGridProps<T>) => {
419
424
 
420
425
  React.useImperativeHandle(mRef, () => instance, [rows]);
421
426
 
422
- React.useEffect(() => {
423
- return () => {
424
- refs.current.isMounted = false;
425
- };
426
- }, []);
427
-
428
427
  // Force update to work with the new width and rowHeight
429
428
  React.useEffect(() => {
430
429
  ref.current?.resetAfterIndices({
@@ -440,12 +439,21 @@ export const ScrollerGrid = <T extends object>(props: ScrollerGridProps<T>) => {
440
439
  // Row count
441
440
  const rowCount = refs.current.hasNextPage ? rowLength + 1 : rowLength;
442
441
 
443
- // Auto load data when current page is 0
444
- if (refs.current.queryPaging.currentPage === 0 && refs.current.autoLoad) {
445
- const initItems = onInitLoad == null ? undefined : onInitLoad(ref.current);
446
- if (initItems) reset(initItems[1], initItems[0]);
447
- else loadDataLocal();
448
- }
442
+ React.useEffect(() => {
443
+ // Auto load data when current page is 0
444
+ if (refs.current.queryPaging.currentPage === 0 && refs.current.autoLoad) {
445
+ const initItems =
446
+ onInitLoad == null ? undefined : onInitLoad(ref.current);
447
+ if (initItems) reset(initItems[1], initItems[0]);
448
+ else loadDataLocal();
449
+ }
450
+ }, [onInitLoad, loadDataLocal]);
451
+
452
+ React.useEffect(() => {
453
+ return () => {
454
+ refs.current.isMounted = false;
455
+ };
456
+ }, []);
449
457
 
450
458
  // Layout
451
459
  return (
package/src/components/ScrollerList.tsx CHANGED
@@ -164,7 +164,11 @@ export const ScrollerList = <T extends object>(props: ScrollerListProps<T>) => {
164
164
  // Load data
165
165
  const loadDataLocal = (pageAdd: number = 1) => {
166
166
  // Prevent multiple loadings
167
- if (!stateRefs.current.hasNextPage || stateRefs.current.isNextPageLoading)
167
+ if (
168
+ !stateRefs.current.hasNextPage ||
169
+ stateRefs.current.isNextPageLoading ||
170
+ stateRefs.current.isMounted === false
171
+ )
168
172
  return;
169
173
 
170
174
  // Update state
@@ -297,14 +301,6 @@ export const ScrollerList = <T extends object>(props: ScrollerListProps<T>) => {
297
301
  []
298
302
  );
299
303
 
300
- // When layout ready
301
- React.useEffect(() => {
302
- // Return clear function
303
- return () => {
304
- stateRefs.current.isMounted = false;
305
- };
306
- }, []);
307
-
308
304
  // Row count
309
305
  const rowCount = rows.length;
310
306
 
@@ -324,16 +320,26 @@ export const ScrollerList = <T extends object>(props: ScrollerListProps<T>) => {
324
320
  // Item count
325
321
  const itemCount = stateRefs.current.hasNextPage ? rowCount + 1 : rowCount;
326
322
 
327
- // Auto load data when current page is 0
328
- if (
329
- stateRefs.current.queryPaging?.currentPage === 0 &&
330
- stateRefs.current.autoLoad
331
- ) {
332
- const initItems =
333
- onInitLoad == null ? undefined : onInitLoad(listRef.current);
334
- if (initItems) reset(initItems[1], initItems[0]);
335
- else loadDataLocal();
336
- }
323
+ React.useEffect(() => {
324
+ // Auto load data when current page is 0
325
+ if (
326
+ stateRefs.current.queryPaging?.currentPage === 0 &&
327
+ stateRefs.current.autoLoad
328
+ ) {
329
+ const initItems =
330
+ onInitLoad == null ? undefined : onInitLoad(listRef.current);
331
+ if (initItems) reset(initItems[1], initItems[0]);
332
+ else loadDataLocal();
333
+ }
334
+ }, [onInitLoad, loadDataLocal]);
335
+
336
+ // When layout ready
337
+ React.useEffect(() => {
338
+ // Return clear function
339
+ return () => {
340
+ stateRefs.current.isMounted = false;
341
+ };
342
+ }, []);
337
343
 
338
344
  // Layout
339
345
  return typeof itemSize === "function" ? (