@etsoo/materialui 1.2.41 → 1.2.42

package/lib/ResponsibleContainer.d.ts

@@ -8,7 +8,7 @@ import { ScrollerListExInnerItemRendererProps, ScrollerListExItemSize } from "./
 /**
  * ResponsibleContainer props
  */
-export type ResponsibleContainerProps<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = IdDefaultType<T>> = Omit<DataGridExProps<T, D>, "height" | "itemKey" | "loadData" | "mRef" | "onScroll" | "onItemsRendered"> & {
+export type ResponsibleContainerProps<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate, D extends DataTypes.Keys<T> = IdDefaultType<T>> = Omit<DataGridExProps<T, D>, "height" | "itemKey" | "loadData" | "mRef" | "onScroll" | "onItemsRendered" | "onInitLoad" | "onUpdateRows"> & {
     /**
      * Height will be deducted
      * @param height Current calcuated height
@@ -22,6 +22,14 @@ export type ResponsibleContainerProps<T extends object, F extends DataTypes.Basi
      * @returns Adjusted height
      */
     adjustFabHeight?: (height: number, isGrid: boolean) => number;
+    /**
+     * Cache key
+     */
+    cacheKey?: string;
+    /**
+     * Cache minutes
+     */
+    cacheMinutes?: number;
     /**
      * Columns
      */
@@ -37,7 +45,7 @@ export type ResponsibleContainerProps<T extends object, F extends DataTypes.Basi
     /**
      * Search fields
      */
-    fields?: React.ReactElement[];
+    fields?: React.ReactElement[] | ((data: DataTypes.BasicTemplateType<F>) => React.ReactElement[]);
     /**
      * Search field template
      */

package/lib/ResponsibleContainer.js

@@ -22,7 +22,7 @@ function defaultContainerBoxSx(paddings, hasField, _dataGrid) {
  */
 export function ResponsibleContainer(props) {
     // Destruct
-    const { adjustHeight, adjustFabHeight, columns, containerBoxSx = defaultContainerBoxSx, dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total), elementReady, fields, fieldTemplate, height, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, quickAction, sizeReadyMiliseconds = 0, searchBarHeight = 45.6, ...rest } = props;
+    const { adjustHeight, adjustFabHeight, cacheKey, cacheMinutes = 120, columns, containerBoxSx = defaultContainerBoxSx, dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total), elementReady, fields, fieldTemplate, height, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, quickAction, sizeReadyMiliseconds = 0, searchBarHeight = 45.6, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Refs
@@ -45,6 +45,8 @@ export function ResponsibleContainer(props) {
     const localLoadData = (props) => {
         state.mounted = true;
         const data = GridDataGet(props, fieldTemplate);
+        if (cacheKey)
+            sessionStorage.setItem(`${cacheKey}-searchbar`, JSON.stringify(data));
         return loadData(data);
     };
     // On submit callback
@@ -70,6 +72,54 @@ export function ResponsibleContainer(props) {
         state.rect = rect;
         return false;
     });
+    const onUpdateRows = (rows, state) => {
+        if (state.currentPage > 0 && cacheKey) {
+            const data = { rows, state, creation: new Date().valueOf() };
+            sessionStorage.setItem(cacheKey, JSON.stringify(data));
+        }
+    };
+    const onInitLoad = (ref) => {
+        // Avoid repeatedly load from cache
+        if (refs.current.initLoaded || !cacheKey)
+            return undefined;
+        // Cache data
+        const cacheData = sessionStorage.getItem(cacheKey);
+        if (cacheData) {
+            const { rows, state, creation } = JSON.parse(cacheData);
+            // 120 minutes
+            if (new Date().valueOf() - creation > cacheMinutes * 60000) {
+                sessionStorage.removeItem(cacheKey);
+                return undefined;
+            }
+            // Scroll position
+            const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
+            if (scrollData) {
+                if ("resetAfterColumnIndex" in ref) {
+                    const { scrollLeft, scrollTop } = JSON.parse(scrollData);
+                    globalThis.setTimeout(() => ref.scrollTo({ scrollLeft, scrollTop }), 0);
+                }
+                else {
+                    const { scrollOffset } = JSON.parse(scrollData);
+                    globalThis.setTimeout(() => ref.scrollTo(scrollOffset), 0);
+                }
+            }
+            // Update flag value
+            refs.current.initLoaded = true;
+            // Return cached rows and state
+            return [rows, state];
+        }
+        return undefined;
+    };
+    const onListScroll = (props) => {
+        if (!cacheKey || !refs.current.initLoaded)
+            return;
+        sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
+    };
+    const onGridScroll = (props) => {
+        if (!cacheKey || !refs.current.initLoaded)
+            return;
+        sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
+    };
     // Rect
     const rect = dimensions[0][2];
     // Create list
@@ -107,7 +157,7 @@ export function ResponsibleContainer(props) {
                     React.createElement(DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, onDoubleClick: (_, data) => quickAction && quickAction(data), outerRef: (element) => {
                             if (element != null && elementReady)
                                 elementReady(element, true);
-                        }, columns: columns, ...rest })),
+                        }, onScroll: onGridScroll, columns: columns, onUpdateRows: onUpdateRows, onInitLoad: onInitLoad, ...rest })),
                 true
             ];
         }
@@ -122,17 +172,21 @@ export function ResponsibleContainer(props) {
         delete rest.selectable;
         return [
             React.createElement(Box, { className: "ListBox", sx: { height: heightLocal } },
-                React.createElement(ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, mRef: mRefs, onClick: (event, data) => quickAction && ReactUtils.isSafeClick(event) && quickAction(data), oRef: (element) => {
+                React.createElement(ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, onUpdateRows: onUpdateRows, onInitLoad: onInitLoad, mRef: mRefs, onClick: (event, data) => quickAction && ReactUtils.isSafeClick(event) && quickAction(data), oRef: (element) => {
                         if (element != null && elementReady)
                             elementReady(element, false);
-                    }, ...rest })),
+                    }, onScroll: onListScroll, ...rest })),
             false
         ];
     })();
     const searchBar = React.useMemo(() => {
+        var _a;
         if (!hasFields || showDataGrid == null)
             return;
-        return (React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}` }));
+        const f = typeof fields == "function"
+            ? fields(JSON.parse((_a = sessionStorage.getItem(`${cacheKey}-searchbar`)) !== null && _a !== void 0 ? _a : "{}"))
+            : fields;
+        return (React.createElement(SearchBar, { fields: f, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}` }));
     }, [showDataGrid, hasFields, searchBarHeight]);
     // Pull container
     const pullContainer = showDataGrid == null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.2.41",
+  "version": "1.2.42",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -52,7 +52,7 @@
     "@emotion/styled": "^11.11.0",
     "@etsoo/appscript": "^1.4.8",
     "@etsoo/notificationbase": "^1.1.25",
-    "@etsoo/react": "^1.6.83",
+    "@etsoo/react": "^1.6.84",
     "@etsoo/shared": "^1.2.5",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.13.0",

package/src/ResponsibleContainer.tsx

@@ -1,14 +1,21 @@
 import { DataTypes, IdDefaultType } from "@etsoo/shared";
 import { Box, Stack, SxProps, Theme } from "@mui/material";
 import React from "react";
-import { ListChildComponentProps } from "react-window";
+import {
+  GridOnScrollProps,
+  ListChildComponentProps,
+  ListOnScrollProps,
+  VariableSizeGrid
+} from "react-window";
 import {
   GridColumn,
   GridDataGet,
   GridJsonData,
   GridLoadDataProps,
+  GridLoaderStates,
   GridMethodRef,
   ReactUtils,
+  ScrollerListRef,
   useCombinedRefs,
   useDimensions
 } from "@etsoo/react";
@@ -36,7 +43,14 @@ export type ResponsibleContainerProps<
   D extends DataTypes.Keys<T> = IdDefaultType<T>
 > = Omit<
   DataGridExProps<T, D>,
-  "height" | "itemKey" | "loadData" | "mRef" | "onScroll" | "onItemsRendered"
+  | "height"
+  | "itemKey"
+  | "loadData"
+  | "mRef"
+  | "onScroll"
+  | "onItemsRendered"
+  | "onInitLoad"
+  | "onUpdateRows"
 > & {
   /**
    * Height will be deducted
@@ -53,6 +67,16 @@ export type ResponsibleContainerProps<
    */
   adjustFabHeight?: (height: number, isGrid: boolean) => number;
 
+  /**
+   * Cache key
+   */
+  cacheKey?: string;
+
+  /**
+   * Cache minutes
+   */
+  cacheMinutes?: number;
+
   /**
    * Columns
    */
@@ -75,7 +99,9 @@ export type ResponsibleContainerProps<
   /**
    * Search fields
    */
-  fields?: React.ReactElement[];
+  fields?:
+    | React.ReactElement[]
+    | ((data: DataTypes.BasicTemplateType<F>) => React.ReactElement[]);
 
   /**
    * Search field template
@@ -151,6 +177,7 @@ interface LocalRefs<T> {
   rect?: DOMRect;
   ref?: GridMethodRef<T>;
   mounted?: boolean;
+  initLoaded?: boolean;
 }
 
 function defaultContainerBoxSx(
@@ -180,6 +207,8 @@ export function ResponsibleContainer<
   const {
     adjustHeight,
     adjustFabHeight,
+    cacheKey,
+    cacheMinutes = 120,
     columns,
     containerBoxSx = defaultContainerBoxSx,
     dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total),
@@ -223,6 +252,10 @@ export function ResponsibleContainer<
   const localLoadData = (props: GridLoadDataProps) => {
     state.mounted = true;
     const data = GridDataGet(props, fieldTemplate);
+
+    if (cacheKey)
+      sessionStorage.setItem(`${cacheKey}-searchbar`, JSON.stringify(data));
+
     return loadData(data);
   };
 
@@ -260,6 +293,70 @@ export function ResponsibleContainer<
     }
   );
 
+  type DataType = { rows: T[]; state: GridLoaderStates<T>; creation: number };
+
+  const onUpdateRows = (rows: T[], state: GridLoaderStates<T>) => {
+    if (state.currentPage > 0 && cacheKey) {
+      const data: DataType = { rows, state, creation: new Date().valueOf() };
+      sessionStorage.setItem(cacheKey, JSON.stringify(data));
+    }
+  };
+
+  const onInitLoad = (
+    ref: VariableSizeGrid<T> | ScrollerListRef
+  ): [T[], Partial<GridLoaderStates<T>>?] | null | undefined => {
+    // Avoid repeatedly load from cache
+    if (refs.current.initLoaded || !cacheKey) return undefined;
+
+    // Cache data
+    const cacheData = sessionStorage.getItem(cacheKey);
+    if (cacheData) {
+      const { rows, state, creation } = JSON.parse(cacheData) as DataType;
+
+      // 120 minutes
+      if (new Date().valueOf() - creation > cacheMinutes * 60000) {
+        sessionStorage.removeItem(cacheKey);
+        return undefined;
+      }
+
+      // Scroll position
+      const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
+      if (scrollData) {
+        if ("resetAfterColumnIndex" in ref) {
+          const { scrollLeft, scrollTop } = JSON.parse(
+            scrollData
+          ) as GridOnScrollProps;
+
+          globalThis.setTimeout(
+            () => ref.scrollTo({ scrollLeft, scrollTop }),
+            0
+          );
+        } else {
+          const { scrollOffset } = JSON.parse(scrollData) as ListOnScrollProps;
+
+          globalThis.setTimeout(() => ref.scrollTo(scrollOffset), 0);
+        }
+      }
+
+      // Update flag value
+      refs.current.initLoaded = true;
+
+      // Return cached rows and state
+      return [rows, state];
+    }
+
+    return undefined;
+  };
+
+  const onListScroll = (props: ListOnScrollProps) => {
+    if (!cacheKey || !refs.current.initLoaded) return;
+    sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
+  };
+  const onGridScroll = (props: GridOnScrollProps) => {
+    if (!cacheKey || !refs.current.initLoaded) return;
+    sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
+  };
+
   // Rect
   const rect = dimensions[0][2];
 
@@ -309,7 +406,10 @@ export function ResponsibleContainer<
             outerRef={(element?: HTMLDivElement) => {
               if (element != null && elementReady) elementReady(element, true);
             }}
+            onScroll={onGridScroll}
             columns={columns}
+            onUpdateRows={onUpdateRows}
+            onInitLoad={onInitLoad}
             {...rest}
           />
         </Box>,
@@ -333,6 +433,8 @@ export function ResponsibleContainer<
           autoLoad={!hasFields}
           height={heightLocal}
           loadData={localLoadData}
+          onUpdateRows={onUpdateRows}
+          onInitLoad={onInitLoad}
           mRef={mRefs}
           onClick={(event, data) =>
             quickAction && ReactUtils.isSafeClick(event) && quickAction(data)
@@ -340,6 +442,7 @@ export function ResponsibleContainer<
           oRef={(element) => {
             if (element != null && elementReady) elementReady(element, false);
           }}
+          onScroll={onListScroll}
           {...rest}
         />
       </Box>,
@@ -349,9 +452,19 @@ export function ResponsibleContainer<
 
   const searchBar = React.useMemo(() => {
     if (!hasFields || showDataGrid == null) return;
+
+    const f =
+      typeof fields == "function"
+        ? fields(
+            JSON.parse(
+              sessionStorage.getItem(`${cacheKey}-searchbar`) ?? "{}"
+            ) as DataTypes.BasicTemplateType<F>
+          )
+        : fields;
+
     return (
       <SearchBar
-        fields={fields}
+        fields={f}
         onSubmit={onSubmit}
         className={`searchBar${showDataGrid ? "Grid" : "List"}`}
       />