@etsoo/materialui 1.2.42 → 1.2.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.2.42",
+  "version": "1.2.44",
   "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.84",
+    "@etsoo/react": "^1.6.85",
     "@etsoo/shared": "^1.2.5",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.13.0",

package/src/DataGridEx.tsx

@@ -51,6 +51,16 @@ export type DataGridExProps<
    */
   alternatingColors?: [string?, string?];
 
+  /**
+   * Cache key
+   */
+  cacheKey?: string;
+
+  /**
+   * Cache minutes
+   */
+  cacheMinutes?: number;
+
   /**
    * Checkable to choose multiple items
    * @default false

package/src/GridDataCacheType.ts

@@ -0,0 +1,10 @@
+import { GridLoaderStates } from "@etsoo/react";
+
+/**
+ * Grid data cache type
+ */
+export type GridDataCacheType<T> = {
+  rows: T[];
+  state: GridLoaderStates<T>;
+  creation: number;
+};

package/src/GridUtils.ts

@@ -0,0 +1,99 @@
+import {
+  GridDataGetData,
+  GridLoadDataProps,
+  GridLoaderStates
+} from "@etsoo/react";
+import { DataTypes } from "@etsoo/shared";
+import { GridDataCacheType } from "./GridDataCacheType";
+
+/**
+ * Grid utilities
+ */
+export namespace GridUtils {
+  /**
+   * Create data loader
+   * @param props Props
+   * @param template Field template
+   * @param cacheKey Cache key
+   * @returns Request data
+   */
+  export function createLoader<F extends DataTypes.BasicTemplate>(
+    props: GridLoadDataProps,
+    template?: F,
+    cacheKey?: string
+  ) {
+    const { data, ...rest } = props;
+    const formData = GridDataGetData(data, template);
+
+    if (cacheKey)
+      sessionStorage.setItem(`${cacheKey}-searchbar`, JSON.stringify(formData));
+
+    return { ...formData, ...rest };
+  }
+
+  /**
+   * Get cache data
+   * @param cacheKey Cache key
+   * @param cacheMinutes Cache minutes
+   * @returns
+   */
+  export function getCacheData<T>(cacheKey: string, cacheMinutes: number) {
+    const cacheSource = sessionStorage.getItem(cacheKey);
+    if (cacheSource) {
+      const cacheData = JSON.parse(cacheSource) as GridDataCacheType<T>;
+      if (new Date().valueOf() - cacheData.creation > cacheMinutes * 60000) {
+        sessionStorage.removeItem(cacheKey);
+        return;
+      }
+      return cacheData;
+    }
+  }
+
+  /**
+   * Get search data
+   * @param cacheKey Cache key
+   * @returns Result
+   */
+  export function getSearchData<F extends DataTypes.BasicTemplate>(
+    cacheKey?: string
+  ) {
+    if (cacheKey) {
+      const data = sessionStorage.getItem(`${cacheKey}-searchbar`);
+      if (data) {
+        return JSON.parse(data) as DataTypes.BasicTemplateType<F>;
+      }
+    }
+  }
+
+  /**
+   * Get update rows handler
+   * @param cacheKey Cache key
+   * @returns Handler
+   */
+  export function getUpdateRowsHandler<T extends object>(cacheKey?: string) {
+    return (rows: T[], state: GridLoaderStates<T>) => {
+      if (state.currentPage > 0 && cacheKey) {
+        const data: GridDataCacheType<T> = {
+          rows,
+          state,
+          creation: new Date().valueOf()
+        };
+        sessionStorage.setItem(cacheKey, JSON.stringify(data));
+      }
+    };
+  }
+
+  /**
+   * Merget search date to state
+   * @param state State
+   * @param searchData Search data
+   */
+  export function mergeSearchData<T, F extends DataTypes.BasicTemplate>(
+    state: GridLoaderStates<T>,
+    searchData?: DataTypes.BasicTemplateType<F>
+  ) {
+    if (searchData == null) return;
+    state.data ??= {};
+    Object.assign(state.data, searchData);
+  }
+}

package/src/ResponsibleContainer.tsx

@@ -9,7 +9,6 @@ import {
 } from "react-window";
 import {
   GridColumn,
-  GridDataGet,
   GridJsonData,
   GridLoadDataProps,
   GridLoaderStates,
@@ -33,6 +32,7 @@ import {
 } from "./ScrollerListEx";
 import { SearchBar } from "./SearchBar";
 import { Labels } from "./app/Labels";
+import { GridUtils } from "./GridUtils";
 
 /**
  * ResponsibleContainer props
@@ -67,16 +67,6 @@ export type ResponsibleContainerProps<
    */
   adjustFabHeight?: (height: number, isGrid: boolean) => number;
 
-  /**
-   * Cache key
-   */
-  cacheKey?: string;
-
-  /**
-   * Cache minutes
-   */
-  cacheMinutes?: number;
-
   /**
    * Columns
    */
@@ -251,14 +241,12 @@ export function ResponsibleContainer<
   // Load data
   const localLoadData = (props: GridLoadDataProps) => {
     state.mounted = true;
-    const data = GridDataGet(props, fieldTemplate);
-
-    if (cacheKey)
-      sessionStorage.setItem(`${cacheKey}-searchbar`, JSON.stringify(data));
-
-    return loadData(data);
+    return loadData(GridUtils.createLoader<F>(props, fieldTemplate, cacheKey));
   };
 
+  // Search data
+  const searchData = GridUtils.getSearchData<F>(cacheKey);
+
   // On submit callback
   const onSubmit = (data: FormData, _reset: boolean) => {
     if (data == null || state.ref == null) return;
@@ -293,15 +281,6 @@ 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 => {
@@ -309,15 +288,11 @@ export function ResponsibleContainer<
     if (refs.current.initLoaded || !cacheKey) return undefined;
 
     // Cache data
-    const cacheData = sessionStorage.getItem(cacheKey);
+    const cacheData = GridUtils.getCacheData<T>(cacheKey, cacheMinutes);
     if (cacheData) {
-      const { rows, state, creation } = JSON.parse(cacheData) as DataType;
+      const { rows, state } = cacheData;
 
-      // 120 minutes
-      if (new Date().valueOf() - creation > cacheMinutes * 60000) {
-        sessionStorage.removeItem(cacheKey);
-        return undefined;
-      }
+      GridUtils.mergeSearchData(state, searchData);
 
       // Scroll position
       const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
@@ -408,7 +383,7 @@ export function ResponsibleContainer<
             }}
             onScroll={onGridScroll}
             columns={columns}
-            onUpdateRows={onUpdateRows}
+            onUpdateRows={GridUtils.getUpdateRowsHandler<T>(cacheKey)}
             onInitLoad={onInitLoad}
             {...rest}
           />
@@ -433,7 +408,7 @@ export function ResponsibleContainer<
           autoLoad={!hasFields}
           height={heightLocal}
           loadData={localLoadData}
-          onUpdateRows={onUpdateRows}
+          onUpdateRows={GridUtils.getUpdateRowsHandler<T>(cacheKey)}
           onInitLoad={onInitLoad}
           mRef={mRefs}
           onClick={(event, data) =>
@@ -453,14 +428,7 @@ 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;
+    const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
 
     return (
       <SearchBar

package/src/pages/DataGridPage.tsx

@@ -1,7 +1,9 @@
 import {
-  GridDataGet,
   GridLoadDataProps,
+  GridLoaderStates,
+  GridOnScrollProps,
   ScrollerGridForwardRef,
+  VariableSizeGrid,
   useCombinedRefs,
   useDimensions
 } from "@etsoo/react";
@@ -13,6 +15,7 @@ import { MUGlobal } from "../MUGlobal";
 import { SearchBar } from "../SearchBar";
 import { CommonPage } from "./CommonPage";
 import { DataGridPageProps } from "./DataGridPageProps";
+import { GridUtils } from "../GridUtils";
 
 interface LocalStates<T> {
   data?: FormData;
@@ -41,6 +44,8 @@ export function DataGridPage<
     mRef,
     sizeReadyMiliseconds = 100,
     pageProps = {},
+    cacheKey,
+    cacheMinutes = 120,
     ...rest
   } = props;
 
@@ -65,14 +70,56 @@ export function DataGridPage<
     }
   );
 
+  const initLoadedRef = React.useRef<boolean>();
+
   // On submit callback
   const onSubmit = (data: FormData, _reset: boolean) => {
     setStates({ data });
   };
 
   const localLoadData = (props: GridLoadDataProps) => {
-    const data = GridDataGet(props, fieldTemplate);
-    return loadData(data);
+    return loadData(GridUtils.createLoader<F>(props, fieldTemplate, cacheKey));
+  };
+
+  // Search data
+  const searchData = GridUtils.getSearchData<F>(cacheKey);
+
+  const onInitLoad = (
+    ref: VariableSizeGrid<T>
+  ): [T[], Partial<GridLoaderStates<T>>?] | null | undefined => {
+    // Avoid repeatedly load from cache
+    if (initLoadedRef.current || !cacheKey) return undefined;
+
+    // Cache data
+    const cacheData = GridUtils.getCacheData<T>(cacheKey, cacheMinutes);
+    if (cacheData) {
+      const { rows, state } = cacheData;
+
+      GridUtils.mergeSearchData(state, searchData);
+
+      // Scroll position
+      const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
+      if (scrollData) {
+        const { scrollLeft, scrollTop } = JSON.parse(
+          scrollData
+        ) as GridOnScrollProps;
+
+        globalThis.setTimeout(() => ref.scrollTo({ scrollLeft, scrollTop }), 0);
+      }
+
+      // Update flag value
+      initLoadedRef.current = true;
+
+      // Return cached rows and state
+      return [rows, state];
+    }
+
+    return undefined;
+  };
+
+  const onGridScroll = (props: GridOnScrollProps) => {
+    if (!cacheKey || !initLoadedRef.current) return;
+    sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
   };
 
   // Watch container
@@ -105,6 +152,9 @@ export function DataGridPage<
         height={gridHeight}
         loadData={localLoadData}
         mRef={refs}
+        onUpdateRows={GridUtils.getUpdateRowsHandler<T>(cacheKey)}
+        onInitLoad={onInitLoad}
+        onScroll={onGridScroll}
         outerRef={(element?: HTMLDivElement) => {
           if (element != null) setStates({ element });
         }}
@@ -119,6 +169,8 @@ export function DataGridPage<
     ref.reset({ data });
   }, [ref, data]);
 
+  const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
+
   // Layout
   return (
     <CommonPage {...pageProps} scrollContainer={states.element}>
@@ -129,7 +181,7 @@ export function DataGridPage<
             paddingBottom: pageProps.paddings
           }}
         >
-          <SearchBar fields={fields} onSubmit={onSubmit} />
+          <SearchBar fields={f} onSubmit={onSubmit} />
         </Box>
         {list}
       </Stack>

package/src/pages/FixedListPage.tsx

@@ -1,7 +1,9 @@
 import {
-  GridDataGet,
   GridLoadDataProps,
+  GridLoaderStates,
+  ListOnScrollProps,
   ScrollerListForwardRef,
+  ScrollerListRef,
   useCombinedRefs,
   useDimensions
 } from "@etsoo/react";
@@ -13,6 +15,7 @@ import { ScrollerListEx } from "../ScrollerListEx";
 import { SearchBar } from "../SearchBar";
 import { CommonPage } from "./CommonPage";
 import { ListPageProps } from "./ListPageProps";
+import { GridUtils } from "../GridUtils";
 
 /**
  * Fixed height list page
@@ -42,6 +45,8 @@ export function FixedListPage<
     mRef,
     sizeReadyMiliseconds = 0,
     pageProps = {},
+    cacheKey,
+    cacheMinutes = 120,
     ...rest
   } = props;
 
@@ -53,6 +58,8 @@ export function FixedListPage<
     ref?: ScrollerListForwardRef<T>;
   }>({});
 
+  const initLoadedRef = React.useRef<boolean>();
+
   // Scroll container
   const [scrollContainer, updateScrollContainer] = React.useState<
     HTMLElement | undefined
@@ -83,8 +90,45 @@ export function FixedListPage<
   };
 
   const localLoadData = (props: GridLoadDataProps) => {
-    const data = GridDataGet(props, fieldTemplate);
-    return loadData(data);
+    return loadData(GridUtils.createLoader<F>(props, fieldTemplate, cacheKey));
+  };
+
+  // Search data
+  const searchData = GridUtils.getSearchData<F>(cacheKey);
+
+  const onInitLoad = (
+    ref: ScrollerListRef
+  ): [T[], Partial<GridLoaderStates<T>>?] | null | undefined => {
+    // Avoid repeatedly load from cache
+    if (initLoadedRef.current || !cacheKey) return undefined;
+
+    // Cache data
+    const cacheData = GridUtils.getCacheData<T>(cacheKey, cacheMinutes);
+    if (cacheData) {
+      const { rows, state } = cacheData;
+
+      GridUtils.mergeSearchData(state, searchData);
+
+      // Scroll position
+      const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
+      if (scrollData) {
+        const { scrollOffset } = JSON.parse(scrollData) as ListOnScrollProps;
+        globalThis.setTimeout(() => ref.scrollTo(scrollOffset), 0);
+      }
+
+      // Update flag value
+      initLoadedRef.current = true;
+
+      // Return cached rows and state
+      return [rows, state];
+    }
+
+    return undefined;
+  };
+
+  const onListScroll = (props: ListOnScrollProps) => {
+    if (!cacheKey || !initLoadedRef.current) return;
+    sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
   };
 
   // Watch container
@@ -110,6 +154,9 @@ export function FixedListPage<
             height={height}
             loadData={localLoadData}
             mRef={refs}
+            onUpdateRows={GridUtils.getUpdateRowsHandler<T>(cacheKey)}
+            onInitLoad={onInitLoad}
+            onScroll={onListScroll}
             oRef={(element) => {
               if (element != null) updateScrollContainer(element);
             }}
@@ -120,6 +167,8 @@ export function FixedListPage<
     }
   }, [rect]);
 
+  const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
+
   const { paddings, ...pageRest } = pageProps;
 
   // Layout
@@ -127,7 +176,7 @@ export function FixedListPage<
     <CommonPage {...pageRest} paddings={{}} scrollContainer={scrollContainer}>
       <Stack>
         <Box ref={dimensions[0][0]} sx={{ padding: paddings }}>
-          <SearchBar fields={fields} onSubmit={onSubmit} />
+          <SearchBar fields={f} onSubmit={onSubmit} />
         </Box>
         {list}
       </Stack>