@etsoo/react 1.7.35 → 1.7.37

package/lib/components/GridLoader.d.ts

@@ -1,3 +1,4 @@
+import { QueryPagingData } from '@etsoo/appscript';
 import { DataTypes } from '@etsoo/shared';
 /**
  * Grid size
@@ -34,21 +35,9 @@ export type GridJsonData = Omit<GridLoadDataProps, 'data'>;
  */
 export type GridLoadDataProps = {
     /**
-     * Current page
+     * Query paging data
      */
-    currentPage: number;
-    /**
-     * Load batch size
-     */
-    batchSize: number;
-    /**
-     * Current order field
-     */
-    orderBy?: string;
-    /**
-     * Order ascending or not?
-     */
-    orderByAsc?: boolean;
+    queryPaging: QueryPagingData;
     /**
      * Data related
      */

package/lib/components/ScrollerGrid.js

@@ -18,13 +18,15 @@ export const ScrollerGrid = (props) => {
     };
     // Refs
     const refs = React.useRef({
+        queryPaging: {
+            currentPage: 0,
+            orderBy: defaultOrderBy,
+            orderByAsc: defaultOrderByAsc,
+            batchSize: 10
+        },
         autoLoad,
-        currentPage: 0,
         hasNextPage: true,
         isNextPageLoading: false,
-        orderBy: defaultOrderBy,
-        orderByAsc: defaultOrderByAsc,
-        batchSize: 10,
         loadedItems: 0,
         selectedItems: [],
         idCache: {}
@@ -38,12 +40,9 @@ export const ScrollerGrid = (props) => {
         // Update state
         refs.current.isNextPageLoading = true;
         // Parameters
-        const { currentPage, batchSize, orderBy, orderByAsc, data } = refs.current;
+        const { queryPaging, data } = refs.current;
         const loadProps = {
-            currentPage,
-            batchSize,
-            orderBy,
-            orderByAsc,
+            queryPaging,
             data
         };
         loadData(loadProps).then((result) => {
@@ -54,7 +53,8 @@ export const ScrollerGrid = (props) => {
             const newItems = result.length;
             refs.current.lastLoadedItems = newItems;
             refs.current.isNextPageLoading = false;
-            refs.current.hasNextPage = newItems >= batchSize;
+            refs.current.hasNextPage =
+                newItems >= refs.current.queryPaging.batchSize;
             if (pageAdd === 0) {
                 // New items
                 const newRows = refs.current.lastLoadedItems
@@ -72,7 +72,8 @@ export const ScrollerGrid = (props) => {
             }
             else {
                 // Set current page
-                refs.current.currentPage = refs.current.currentPage + pageAdd;
+                var currentPage = refs.current.queryPaging.currentPage ?? 0;
+                refs.current.queryPaging.currentPage = currentPage + pageAdd;
                 // Update rows, avoid duplicate items
                 const newRows = [...rows];
                 for (const item of result) {
@@ -118,14 +119,19 @@ export const ScrollerGrid = (props) => {
     };
     // Reset the state and load again
     const reset = (add, items = []) => {
+        const { queryPaging, ...rest } = add ?? {};
         const resetState = {
+            queryPaging: {
+                ...refs.current.queryPaging,
+                currentPage: 0,
+                ...queryPaging
+            },
             autoLoad: true,
-            currentPage: 0,
             loadedItems: 0,
             hasNextPage: true,
             isNextPageLoading: false,
             lastLoadedItems: undefined,
-            ...add
+            ...rest
         };
         Object.assign(refs.current, resetState);
         // Reset items
@@ -225,7 +231,7 @@ export const ScrollerGrid = (props) => {
     // Row count
     const rowCount = refs.current.hasNextPage ? rowLength + 1 : rowLength;
     // Auto load data when current page is 0
-    if (refs.current.currentPage === 0 && refs.current.autoLoad) {
+    if (refs.current.queryPaging.currentPage === 0 && refs.current.autoLoad) {
         const initItems = onInitLoad == null ? undefined : onInitLoad(ref.current);
         if (initItems)
             reset(initItems[1], initItems[0]);

package/lib/components/ScrollerList.js

@@ -37,14 +37,16 @@ export const ScrollerList = (props) => {
     // States
     const batchSize = GridSizeGet(loadBatchSize, height);
     const stateRefs = React.useRef({
+        queryPaging: {
+            currentPage: 0,
+            orderBy: defaultOrderBy,
+            orderByAsc: defaultOrderByAsc,
+            batchSize: batchSize
+        },
         autoLoad,
-        currentPage: 0,
         loadedItems: 0,
         hasNextPage: true,
         isNextPageLoading: false,
-        orderBy: defaultOrderBy,
-        orderByAsc: defaultOrderByAsc,
-        batchSize: batchSize,
         selectedItems: [],
         idCache: {}
     });
@@ -57,12 +59,9 @@ export const ScrollerList = (props) => {
         // Update state
         stateRefs.current.isNextPageLoading = true;
         // Parameters
-        const { currentPage, batchSize, orderBy, orderByAsc, data } = stateRefs.current;
+        const { queryPaging, data } = stateRefs.current;
         const loadProps = {
-            currentPage,
-            batchSize,
-            orderBy,
-            orderByAsc,
+            queryPaging,
             data
         };
         loadData(loadProps).then((result) => {
@@ -90,8 +89,9 @@ export const ScrollerList = (props) => {
                 setRows(newRows);
             }
             else {
-                stateRefs.current.currentPage =
-                    stateRefs.current.currentPage + pageAdd;
+                var currentPage = stateRefs.current.queryPaging.currentPage ?? 0;
+                stateRefs.current.queryPaging.currentPage =
+                    currentPage + pageAdd;
                 // Update rows, avoid duplicate items
                 const newRows = [...rows];
                 for (const item of result) {
@@ -113,14 +113,19 @@ export const ScrollerList = (props) => {
     };
     // Reset the state and load again
     const reset = (add, items = []) => {
+        const { queryPaging, ...rest } = add ?? {};
         const resetState = {
+            queryPaging: {
+                ...stateRefs.current.queryPaging,
+                currentPage: 0,
+                ...queryPaging
+            },
             autoLoad: true,
             lastLoadedItems: undefined,
             loadedItems: 0,
-            currentPage: 0,
             hasNextPage: true,
             isNextPageLoading: false,
-            ...add
+            ...rest
         };
         Object.assign(stateRefs.current, resetState);
         // Reset
@@ -179,7 +184,8 @@ export const ScrollerList = (props) => {
     // Item count
     const itemCount = stateRefs.current.hasNextPage ? rowCount + 1 : rowCount;
     // Auto load data when current page is 0
-    if (stateRefs.current.currentPage === 0 && stateRefs.current.autoLoad) {
+    if (stateRefs.current.queryPaging?.currentPage === 0 &&
+        stateRefs.current.autoLoad) {
         const initItems = onInitLoad == null ? undefined : onInitLoad(listRef.current);
         if (initItems)
             reset(initItems[1], initItems[0]);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.7.35",
+    "version": "1.7.37",
     "description": "TypeScript ReactJs UI Independent Framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -65,7 +65,7 @@
         "@babel/preset-env": "^7.24.5",
         "@babel/runtime-corejs3": "^7.24.5",
         "@testing-library/jest-dom": "^6.4.5",
-        "@testing-library/react": "^15.0.6",
+        "@testing-library/react": "^15.0.7",
         "@types/jest": "^29.5.12",
         "@types/react": "^18.3.1",
         "@types/react-dom": "^18.3.0",

package/src/components/GridLoader.ts

@@ -1,3 +1,4 @@
+import { QueryPagingData } from '@etsoo/appscript';
 import { DataTypes, DomUtils } from '@etsoo/shared';
 
 /**
@@ -67,24 +68,9 @@ export type GridJsonData = Omit<GridLoadDataProps, 'data'>;
  */
 export type GridLoadDataProps = {
     /**
-     * Current page
+     * Query paging data
      */
-    currentPage: number;
-
-    /**
-     * Load batch size
-     */
-    batchSize: number;
-
-    /**
-     * Current order field
-     */
-    orderBy?: string;
-
-    /**
-     * Order ascending or not?
-     */
-    orderByAsc?: boolean;
+    queryPaging: QueryPagingData;
 
     /**
      * Data related

package/src/components/ScrollerGrid.tsx

@@ -190,13 +190,15 @@ export const ScrollerGrid = <T extends object>(props: ScrollerGridProps<T>) => {
 
     // Refs
     const refs = React.useRef<GridLoaderStates<T>>({
+        queryPaging: {
+            currentPage: 0,
+            orderBy: defaultOrderBy,
+            orderByAsc: defaultOrderByAsc,
+            batchSize: 10
+        },
         autoLoad,
-        currentPage: 0,
         hasNextPage: true,
         isNextPageLoading: false,
-        orderBy: defaultOrderBy,
-        orderByAsc: defaultOrderByAsc,
-        batchSize: 10,
         loadedItems: 0,
         selectedItems: [],
         idCache: {}
@@ -213,14 +215,10 @@ export const ScrollerGrid = <T extends object>(props: ScrollerGridProps<T>) => {
         refs.current.isNextPageLoading = true;
 
         // Parameters
-        const { currentPage, batchSize, orderBy, orderByAsc, data } =
-            refs.current;
+        const { queryPaging, data } = refs.current;
 
         const loadProps: GridLoadDataProps = {
-            currentPage,
-            batchSize,
-            orderBy,
-            orderByAsc,
+            queryPaging,
             data
         };
 
@@ -233,7 +231,8 @@ export const ScrollerGrid = <T extends object>(props: ScrollerGridProps<T>) => {
             const newItems = result.length;
             refs.current.lastLoadedItems = newItems;
             refs.current.isNextPageLoading = false;
-            refs.current.hasNextPage = newItems >= batchSize;
+            refs.current.hasNextPage =
+                newItems >= refs.current.queryPaging.batchSize;
 
             if (pageAdd === 0) {
                 // New items
@@ -256,7 +255,8 @@ export const ScrollerGrid = <T extends object>(props: ScrollerGridProps<T>) => {
                 setRows(newRows);
             } else {
                 // Set current page
-                refs.current.currentPage = refs.current.currentPage + pageAdd;
+                var currentPage = refs.current.queryPaging.currentPage ?? 0;
+                refs.current.queryPaging.currentPage = currentPage + pageAdd;
 
                 // Update rows, avoid duplicate items
                 const newRows = [...rows];
@@ -318,14 +318,19 @@ export const ScrollerGrid = <T extends object>(props: ScrollerGridProps<T>) => {
 
     // Reset the state and load again
     const reset = (add?: Partial<GridLoaderStates<T>>, items: T[] = []) => {
+        const { queryPaging, ...rest } = add ?? {};
         const resetState: Partial<GridLoaderStates<T>> = {
+            queryPaging: {
+                ...refs.current.queryPaging,
+                currentPage: 0,
+                ...queryPaging
+            },
             autoLoad: true,
-            currentPage: 0,
             loadedItems: 0,
             hasNextPage: true,
             isNextPageLoading: false,
             lastLoadedItems: undefined,
-            ...add
+            ...rest
         };
         Object.assign(refs.current, resetState);
 
@@ -443,7 +448,7 @@ export const ScrollerGrid = <T extends object>(props: ScrollerGridProps<T>) => {
     const rowCount = refs.current.hasNextPage ? rowLength + 1 : rowLength;
 
     // Auto load data when current page is 0
-    if (refs.current.currentPage === 0 && refs.current.autoLoad) {
+    if (refs.current.queryPaging.currentPage === 0 && refs.current.autoLoad) {
         const initItems =
             onInitLoad == null ? undefined : onInitLoad(ref.current);
         if (initItems) reset(initItems[1], initItems[0]);

package/src/components/ScrollerList.tsx

@@ -154,14 +154,16 @@ export const ScrollerList = <T extends object>(props: ScrollerListProps<T>) => {
     // States
     const batchSize = GridSizeGet(loadBatchSize, height);
     const stateRefs = React.useRef<GridLoaderStates<T>>({
+        queryPaging: {
+            currentPage: 0,
+            orderBy: defaultOrderBy,
+            orderByAsc: defaultOrderByAsc,
+            batchSize: batchSize
+        },
         autoLoad,
-        currentPage: 0,
         loadedItems: 0,
         hasNextPage: true,
         isNextPageLoading: false,
-        orderBy: defaultOrderBy,
-        orderByAsc: defaultOrderByAsc,
-        batchSize: batchSize,
         selectedItems: [],
         idCache: {}
     });
@@ -179,14 +181,10 @@ export const ScrollerList = <T extends object>(props: ScrollerListProps<T>) => {
         stateRefs.current.isNextPageLoading = true;
 
         // Parameters
-        const { currentPage, batchSize, orderBy, orderByAsc, data } =
-            stateRefs.current;
+        const { queryPaging, data } = stateRefs.current;
 
         const loadProps: GridLoadDataProps = {
-            currentPage,
-            batchSize,
-            orderBy,
-            orderByAsc,
+            queryPaging,
             data
         };
 
@@ -221,8 +219,10 @@ export const ScrollerList = <T extends object>(props: ScrollerListProps<T>) => {
                 // Update rows
                 setRows(newRows);
             } else {
-                stateRefs.current.currentPage =
-                    stateRefs.current.currentPage + pageAdd;
+                var currentPage =
+                    stateRefs.current.queryPaging.currentPage ?? 0;
+                stateRefs.current.queryPaging.currentPage =
+                    currentPage + pageAdd;
 
                 // Update rows, avoid duplicate items
                 const newRows = [...rows];
@@ -249,14 +249,19 @@ export const ScrollerList = <T extends object>(props: ScrollerListProps<T>) => {
 
     // Reset the state and load again
     const reset = (add?: Partial<GridLoaderStates<T>>, items: T[] = []) => {
+        const { queryPaging, ...rest } = add ?? {};
         const resetState: Partial<GridLoaderStates<T>> = {
+            queryPaging: {
+                ...stateRefs.current.queryPaging,
+                currentPage: 0,
+                ...queryPaging
+            },
             autoLoad: true,
             lastLoadedItems: undefined,
             loadedItems: 0,
-            currentPage: 0,
             hasNextPage: true,
             isNextPageLoading: false,
-            ...add
+            ...rest
         };
         Object.assign(stateRefs.current, resetState);
 
@@ -330,7 +335,10 @@ export const ScrollerList = <T extends object>(props: ScrollerListProps<T>) => {
     const itemCount = stateRefs.current.hasNextPage ? rowCount + 1 : rowCount;
 
     // Auto load data when current page is 0
-    if (stateRefs.current.currentPage === 0 && stateRefs.current.autoLoad) {
+    if (
+        stateRefs.current.queryPaging?.currentPage === 0 &&
+        stateRefs.current.autoLoad
+    ) {
         const initItems =
             onInitLoad == null ? undefined : onInitLoad(listRef.current);
         if (initItems) reset(initItems[1], initItems[0]);