@etsoo/react 1.6.79 → 1.6.81

package/lib/components/GridLoader.d.ts

@@ -69,6 +69,18 @@ export type GridLoader<T extends object> = {
      * Load data
      */
     loadData: (props: GridLoadDataProps) => PromiseLike<T[] | null | undefined>;
+    /**
+     * Handler for init load
+     * @param ref Ref
+     * @returns Result
+     */
+    onInitLoad?: (ref: any) => [T[], Partial<GridLoaderStates<T>>?] | null | undefined;
+    /**
+     * Handler for updating rows
+     * @param rows Rows
+     * @param state State
+     */
+    onUpdateRows?: (rows: T[], state: GridLoaderStates<T>) => void;
     /**
      * Threshold at which to pre-fetch data; default is half of loadBatchSize
      */

package/lib/components/ScrollerGrid.js

@@ -7,12 +7,14 @@ import { VariableSizeGrid } from 'react-window';
  */
 export const ScrollerGrid = (props) => {
     // Destruct
-    const { autoLoad = true, defaultOrderBy, defaultOrderByAsc, footerRenderer, headerRenderer, itemRenderer, idField = 'id', loadBatchSize, loadData, mRef, onItemsRendered, onSelectChange, rowHeight = 53, threshold = 6, width, ...rest } = props;
+    const { autoLoad = true, defaultOrderBy, defaultOrderByAsc, footerRenderer, headerRenderer, itemRenderer, idField = 'id', loadBatchSize, loadData, mRef, onItemsRendered, onSelectChange, rowHeight = 53, threshold = 6, width, onInitLoad, onUpdateRows, ...rest } = props;
     // Rows
     const [rows, updateRows] = React.useState([]);
     const setRows = (rows) => {
         state.loadedItems = rows.length;
         updateRows(rows);
+        if (onUpdateRows)
+            onUpdateRows(rows, state);
     };
     // Refs
     const refs = React.useRef({
@@ -116,7 +118,7 @@ export const ScrollerGrid = (props) => {
             onItemsRendered(props);
     };
     // Reset the state and load again
-    const reset = (add) => {
+    const reset = (add, items = []) => {
         const resetState = {
             autoLoad: true,
             currentPage: 0,
@@ -129,7 +131,7 @@ export const ScrollerGrid = (props) => {
         Object.assign(state, resetState);
         // Reset items
         if (state.isMounted !== false)
-            setRows([]);
+            setRows(items);
     };
     const instance = {
         scrollTo(params) {
@@ -210,8 +212,13 @@ export const ScrollerGrid = (props) => {
     // Row count
     const rowCount = state.hasNextPage ? rowLength + 1 : rowLength;
     // Auto load data when current page is 0
-    if (state.currentPage === 0 && state.autoLoad)
-        loadDataLocal();
+    if (state.currentPage === 0 && state.autoLoad) {
+        const initItems = onInitLoad == null ? undefined : onInitLoad(ref.current);
+        if (initItems)
+            reset(initItems[1], initItems[0]);
+        else
+            loadDataLocal();
+    }
     // Layout
     return (React.createElement(React.Fragment, null,
         headerRenderer && headerRenderer(state),

package/lib/components/ScrollerList.js

@@ -15,7 +15,7 @@ const calculateBatchSize = (height, itemSize) => {
  */
 export const ScrollerList = (props) => {
     // Destruct
-    const { autoLoad = true, defaultOrderBy, defaultOrderByAsc, height = document.documentElement.clientHeight, width = '100%', mRef, oRef, style = {}, idField = 'id', itemRenderer, itemSize, loadBatchSize = calculateBatchSize(height, itemSize), loadData, threshold = GridSizeGet(loadBatchSize, height) / 2, onItemsRendered, ...rest } = props;
+    const { autoLoad = true, defaultOrderBy, defaultOrderByAsc, height = document.documentElement.clientHeight, width = '100%', mRef, oRef, style = {}, idField = 'id', itemRenderer, itemSize, loadBatchSize = calculateBatchSize(height, itemSize), loadData, threshold = GridSizeGet(loadBatchSize, height) / 2, onItemsRendered, onInitLoad, onUpdateRows, ...rest } = props;
     // Style
     Object.assign(style, {
         width: '100%',
@@ -31,6 +31,8 @@ export const ScrollerList = (props) => {
     const setRows = (rows) => {
         state.loadedItems = rows.length;
         updateRows(rows);
+        if (onUpdateRows)
+            onUpdateRows(rows, state);
     };
     // States
     const batchSize = GridSizeGet(loadBatchSize, height);
@@ -108,14 +110,21 @@ export const ScrollerList = (props) => {
             data: rows[itemProps.index]
         });
     };
-    // Update scroll location
-    const updateScroll = (scrollY) => {
-        const outerItem = outerRef.current;
-        const refMethods = listRef.current;
-        if (outerItem == null || refMethods == null)
-            return;
-        const scrollTop = scrollY - outerItem.offsetTop;
-        refMethods.scrollTo(scrollTop);
+    // Reset the state and load again
+    const reset = (add, items = []) => {
+        const resetState = {
+            autoLoad: true,
+            lastLoadedItems: undefined,
+            loadedItems: 0,
+            currentPage: 0,
+            hasNextPage: true,
+            isNextPageLoading: false,
+            ...add
+        };
+        Object.assign(state, resetState);
+        // Reset
+        if (state.isMounted !== false)
+            setRows(items);
     };
     React.useImperativeHandle(mRef, () => {
         const refMethods = listRef.current;
@@ -123,21 +132,7 @@ export const ScrollerList = (props) => {
             refresh() {
                 loadDataLocal(0);
             },
-            reset(add) {
-                const resetState = {
-                    autoLoad: true,
-                    lastLoadedItems: undefined,
-                    loadedItems: 0,
-                    currentPage: 0,
-                    hasNextPage: true,
-                    isNextPageLoading: false,
-                    ...add
-                };
-                Object.assign(state, resetState);
-                // Reset
-                if (state.isMounted !== false)
-                    setRows([]);
-            },
+            reset,
             scrollTo(scrollOffset) {
                 refMethods.scrollTo(scrollOffset);
             },
@@ -148,30 +143,8 @@ export const ScrollerList = (props) => {
     }, []);
     // When layout ready
     React.useEffect(() => {
-        let ticking = false;
-        let lastKnownScrollPosition = 0;
-        let requestAnimationFrameSeed = 0;
-        // Window scroll handler
-        const handleWindowScroll = () => {
-            lastKnownScrollPosition = window.scrollY;
-            if (!ticking) {
-                requestAnimationFrameSeed = window.requestAnimationFrame(() => {
-                    updateScroll(lastKnownScrollPosition);
-                    ticking = false;
-                    requestAnimationFrameSeed = 0;
-                });
-                ticking = true;
-            }
-        };
-        // Add scroll event
-        window.addEventListener('scroll', handleWindowScroll);
         // Return clear function
         return () => {
-            // Cancel animation frame
-            if (requestAnimationFrameSeed > 0)
-                window.cancelAnimationFrame(requestAnimationFrameSeed);
-            // Remove scroll event
-            window.removeEventListener('scroll', handleWindowScroll);
             state.isMounted = false;
         };
     }, []);
@@ -191,8 +164,13 @@ export const ScrollerList = (props) => {
     // Item count
     const itemCount = state.hasNextPage ? rowCount + 1 : rowCount;
     // Auto load data when current page is 0
-    if (state.currentPage === 0 && state.autoLoad)
-        loadDataLocal();
+    if (state.currentPage === 0 && state.autoLoad) {
+        const initItems = onInitLoad == null ? undefined : onInitLoad(listRef.current);
+        if (initItems)
+            reset(initItems[1], initItems[0]);
+        else
+            loadDataLocal();
+    }
     // Layout
     return typeof itemSize === 'function' ? (React.createElement(VariableSizeList, { height: height, width: width, itemCount: itemCount, itemKey: (index, data) => { var _a; return (_a = DataTypes.getIdValue1(data, idField)) !== null && _a !== void 0 ? _a : index; }, itemSize: itemSize, outerRef: refs, ref: listRef, style: style, onItemsRendered: onItemsRenderedLocal, ...rest }, itemRendererLocal)) : (React.createElement(FixedSizeList, { height: height, width: width, itemCount: itemCount, itemKey: (index, data) => { var _a; return (_a = DataTypes.getIdValue1(data, idField)) !== null && _a !== void 0 ? _a : index; }, itemSize: itemSize, outerRef: refs, ref: listRef, style: style, onItemsRendered: onItemsRenderedLocal, ...rest }, itemRendererLocal));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.6.79",
+    "version": "1.6.81",
     "description": "TypeScript ReactJs UI Independent Framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,7 +50,7 @@
         "@emotion/css": "^11.11.0",
         "@emotion/react": "^11.11.0",
         "@emotion/styled": "^11.11.0",
-        "@etsoo/appscript": "^1.4.5",
+        "@etsoo/appscript": "^1.4.8",
         "@etsoo/notificationbase": "^1.1.25",
         "@etsoo/shared": "^1.2.5",
         "@types/react": "^18.2.6",

package/src/components/GridLoader.ts

@@ -105,6 +105,22 @@ export type GridLoader<T extends object> = {
      */
     loadData: (props: GridLoadDataProps) => PromiseLike<T[] | null | undefined>;
 
+    /**
+     * Handler for init load
+     * @param ref Ref
+     * @returns Result
+     */
+    onInitLoad?: (
+        ref: any
+    ) => [T[], Partial<GridLoaderStates<T>>?] | null | undefined;
+
+    /**
+     * Handler for updating rows
+     * @param rows Rows
+     * @param state State
+     */
+    onUpdateRows?: (rows: T[], state: GridLoaderStates<T>) => void;
+
     /**
      * Threshold at which to pre-fetch data; default is half of loadBatchSize
      */

package/src/components/ScrollerGrid.tsx

@@ -181,6 +181,8 @@ export const ScrollerGrid = <
         rowHeight = 53,
         threshold = 6,
         width,
+        onInitLoad,
+        onUpdateRows,
         ...rest
     } = props;
 
@@ -189,6 +191,8 @@ export const ScrollerGrid = <
     const setRows = (rows: T[]) => {
         state.loadedItems = rows.length;
         updateRows(rows);
+
+        if (onUpdateRows) onUpdateRows(rows, state);
     };
 
     // Refs
@@ -320,7 +324,7 @@ export const ScrollerGrid = <
     };
 
     // Reset the state and load again
-    const reset = (add?: Partial<GridLoaderStates<T>>) => {
+    const reset = (add?: Partial<GridLoaderStates<T>>, items: T[] = []) => {
         const resetState: Partial<GridLoaderStates<T>> = {
             autoLoad: true,
             currentPage: 0,
@@ -333,7 +337,7 @@ export const ScrollerGrid = <
         Object.assign(state, resetState);
 
         // Reset items
-        if (state.isMounted !== false) setRows([]);
+        if (state.isMounted !== false) setRows(items);
     };
 
     const instance: ScrollerGridForwardRef<T> = {
@@ -425,7 +429,12 @@ export const ScrollerGrid = <
     const rowCount = state.hasNextPage ? rowLength + 1 : rowLength;
 
     // Auto load data when current page is 0
-    if (state.currentPage === 0 && state.autoLoad) loadDataLocal();
+    if (state.currentPage === 0 && state.autoLoad) {
+        const initItems =
+            onInitLoad == null ? undefined : onInitLoad(ref.current);
+        if (initItems) reset(initItems[1], initItems[0]);
+        else loadDataLocal();
+    }
 
     // Layout
     return (

package/src/components/ScrollerList.tsx

@@ -130,6 +130,8 @@ export const ScrollerList = <
         loadData,
         threshold = GridSizeGet(loadBatchSize, height) / 2,
         onItemsRendered,
+        onInitLoad,
+        onUpdateRows,
         ...rest
     } = props;
 
@@ -151,6 +153,8 @@ export const ScrollerList = <
     const setRows = (rows: T[]) => {
         state.loadedItems = rows.length;
         updateRows(rows);
+
+        if (onUpdateRows) onUpdateRows(rows, state);
     };
 
     // States
@@ -244,15 +248,21 @@ export const ScrollerList = <
         });
     };
 
-    // Update scroll location
-    const updateScroll = (scrollY: number) => {
-        const outerItem = outerRef.current;
-        const refMethods = listRef.current as ScrollerListRef;
-        if (outerItem == null || refMethods == null) return;
-
-        const scrollTop = scrollY - outerItem.offsetTop;
+    // Reset the state and load again
+    const reset = (add?: Partial<GridLoaderStates<T>>, items: T[] = []) => {
+        const resetState: Partial<GridLoaderStates<T>> = {
+            autoLoad: true,
+            lastLoadedItems: undefined,
+            loadedItems: 0,
+            currentPage: 0,
+            hasNextPage: true,
+            isNextPageLoading: false,
+            ...add
+        };
+        Object.assign(state, resetState);
 
-        refMethods.scrollTo(scrollTop);
+        // Reset
+        if (state.isMounted !== false) setRows(items);
     };
 
     React.useImperativeHandle(
@@ -265,21 +275,7 @@ export const ScrollerList = <
                     loadDataLocal(0);
                 },
 
-                reset(add?: Partial<GridLoaderStates<T>>): void {
-                    const resetState: Partial<GridLoaderStates<T>> = {
-                        autoLoad: true,
-                        lastLoadedItems: undefined,
-                        loadedItems: 0,
-                        currentPage: 0,
-                        hasNextPage: true,
-                        isNextPageLoading: false,
-                        ...add
-                    };
-                    Object.assign(state, resetState);
-
-                    // Reset
-                    if (state.isMounted !== false) setRows([]);
-                },
+                reset,
 
                 scrollTo(scrollOffset: number): void {
                     refMethods.scrollTo(scrollOffset);
@@ -295,36 +291,8 @@ export const ScrollerList = <
 
     // When layout ready
     React.useEffect(() => {
-        let ticking = false;
-        let lastKnownScrollPosition = 0;
-        let requestAnimationFrameSeed = 0;
-
-        // Window scroll handler
-        const handleWindowScroll = () => {
-            lastKnownScrollPosition = window.scrollY;
-
-            if (!ticking) {
-                requestAnimationFrameSeed = window.requestAnimationFrame(() => {
-                    updateScroll(lastKnownScrollPosition);
-                    ticking = false;
-                    requestAnimationFrameSeed = 0;
-                });
-                ticking = true;
-            }
-        };
-
-        // Add scroll event
-        window.addEventListener('scroll', handleWindowScroll);
-
         // Return clear function
         return () => {
-            // Cancel animation frame
-            if (requestAnimationFrameSeed > 0)
-                window.cancelAnimationFrame(requestAnimationFrameSeed);
-
-            // Remove scroll event
-            window.removeEventListener('scroll', handleWindowScroll);
-
             state.isMounted = false;
         };
     }, []);
@@ -349,7 +317,12 @@ export const ScrollerList = <
     const itemCount = state.hasNextPage ? rowCount + 1 : rowCount;
 
     // Auto load data when current page is 0
-    if (state.currentPage === 0 && state.autoLoad) loadDataLocal();
+    if (state.currentPage === 0 && state.autoLoad) {
+        const initItems =
+            onInitLoad == null ? undefined : onInitLoad(listRef.current);
+        if (initItems) reset(initItems[1], initItems[0]);
+        else loadDataLocal();
+    }
 
     // Layout
     return typeof itemSize === 'function' ? (