@etsoo/materialui 1.2.42 → 1.2.43

package/src/pages/FixedListPage.tsx

@@ -1,7 +1,10 @@
 import {
   GridDataGet,
   GridLoadDataProps,
+  GridLoaderStates,
+  ListOnScrollProps,
   ScrollerListForwardRef,
+  ScrollerListRef,
   useCombinedRefs,
   useDimensions
 } from "@etsoo/react";
@@ -13,6 +16,7 @@ import { ScrollerListEx } from "../ScrollerListEx";
 import { SearchBar } from "../SearchBar";
 import { CommonPage } from "./CommonPage";
 import { ListPageProps } from "./ListPageProps";
+import { GridDataCacheType } from "../GridDataCacheType";
 
 /**
  * Fixed height list page
@@ -42,6 +46,8 @@ export function FixedListPage<
     mRef,
     sizeReadyMiliseconds = 0,
     pageProps = {},
+    cacheKey,
+    cacheMinutes = 120,
     ...rest
   } = props;
 
@@ -53,6 +59,8 @@ export function FixedListPage<
     ref?: ScrollerListForwardRef<T>;
   }>({});
 
+  const initLoadedRef = React.useRef<boolean>();
+
   // Scroll container
   const [scrollContainer, updateScrollContainer] = React.useState<
     HTMLElement | undefined
@@ -84,9 +92,61 @@ export function FixedListPage<
 
   const localLoadData = (props: GridLoadDataProps) => {
     const data = GridDataGet(props, fieldTemplate);
+
+    if (cacheKey)
+      sessionStorage.setItem(`${cacheKey}-searchbar`, JSON.stringify(data));
+
     return loadData(data);
   };
 
+  type DataType = GridDataCacheType<T>;
+
+  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: ScrollerListRef
+  ): [T[], Partial<GridLoaderStates<T>>?] | null | undefined => {
+    // Avoid repeatedly load from cache
+    if (initLoadedRef.current || !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) {
+        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
   const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
   const rect = dimensions[0][2];
@@ -110,6 +170,9 @@ export function FixedListPage<
             height={height}
             loadData={localLoadData}
             mRef={refs}
+            onUpdateRows={onUpdateRows}
+            onInitLoad={onInitLoad}
+            onScroll={onListScroll}
             oRef={(element) => {
               if (element != null) updateScrollContainer(element);
             }}
@@ -120,6 +183,15 @@ export function FixedListPage<
     }
   }, [rect]);
 
+  const f =
+    typeof fields == "function"
+      ? fields(
+          JSON.parse(
+            sessionStorage.getItem(`${cacheKey}-searchbar`) ?? "{}"
+          ) as DataTypes.BasicTemplateType<F>
+        )
+      : fields;
+
   const { paddings, ...pageRest } = pageProps;
 
   // Layout
@@ -127,7 +199,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>

package/src/pages/ListPage.tsx

@@ -1,17 +1,21 @@
 import {
-    GridDataGet,
-    GridLoadDataProps,
-    ScrollerListForwardRef,
-    useCombinedRefs
-} from '@etsoo/react';
-import { DataTypes, IdDefaultType } from '@etsoo/shared';
-import { Box, Stack } from '@mui/material';
-import React from 'react';
-import { MUGlobal } from '../MUGlobal';
-import { ScrollerListEx } from '../ScrollerListEx';
-import { SearchBar } from '../SearchBar';
-import { CommonPage, CommonPageScrollContainer } from './CommonPage';
-import { ListPageProps } from './ListPageProps';
+  GridDataGet,
+  GridLoadDataProps,
+  GridLoaderStates,
+  ListOnScrollProps,
+  ScrollerListForwardRef,
+  ScrollerListRef,
+  useCombinedRefs
+} from "@etsoo/react";
+import { DataTypes, IdDefaultType } from "@etsoo/shared";
+import { Box, Stack } from "@mui/material";
+import React from "react";
+import { MUGlobal } from "../MUGlobal";
+import { ScrollerListEx } from "../ScrollerListEx";
+import { SearchBar } from "../SearchBar";
+import { CommonPage, CommonPageScrollContainer } from "./CommonPage";
+import { ListPageProps } from "./ListPageProps";
+import { GridDataCacheType } from "../GridDataCacheType";
 
 /**
  * List page
@@ -19,72 +23,136 @@ import { ListPageProps } from './ListPageProps';
  * @returns Component
  */
 export function ListPage<
-    T extends object,
-    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
-    D extends DataTypes.Keys<T> = IdDefaultType<T>
+  T extends object,
+  F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
+  D extends DataTypes.Keys<T> = IdDefaultType<T>
 >(props: ListPageProps<T, F, D>) {
-    // Destruct
-    const {
-        fields,
-        fieldTemplate,
-        loadData,
-        mRef,
-        pageProps = {},
-        ...rest
-    } = props;
-
-    pageProps.paddings ??= MUGlobal.pagePaddings;
-
-    // States
-    const [states] = React.useState<{
-        data?: FormData;
-        ref?: ScrollerListForwardRef<T>;
-    }>({});
-
-    const refs = useCombinedRefs(mRef, (ref: ScrollerListForwardRef<T>) => {
-        if (ref == null) return;
-
-        const first = states.ref == null;
-
-        states.ref = ref;
-
-        if (first) reset();
-    });
-
-    const reset = () => {
-        if (states.data == null || states.ref == null) return;
-        states.ref.reset({ data: states.data });
-    };
-
-    // On submit callback
-    const onSubmit = (data: FormData, _reset: boolean) => {
-        states.data = data;
-        reset();
-    };
-
-    const localLoadData = (props: GridLoadDataProps) => {
-        const data = GridDataGet(props, fieldTemplate);
-        return loadData(data);
-    };
-
-    // Layout
-    return (
-        <CommonPage {...pageProps} scrollContainer={CommonPageScrollContainer}>
-            <Stack>
-                <Box
-                    sx={{
-                        paddingBottom: pageProps.paddings
-                    }}
-                >
-                    <SearchBar fields={fields} onSubmit={onSubmit} />
-                </Box>
-                <ScrollerListEx<T, D>
-                    autoLoad={false}
-                    loadData={localLoadData}
-                    mRef={refs}
-                    {...rest}
-                />
-            </Stack>
-        </CommonPage>
-    );
+  // Destruct
+  const {
+    fields,
+    fieldTemplate,
+    loadData,
+    mRef,
+    pageProps = {},
+    cacheKey,
+    cacheMinutes = 120,
+    ...rest
+  } = props;
+
+  pageProps.paddings ??= MUGlobal.pagePaddings;
+
+  // States
+  const [states] = React.useState<{
+    data?: FormData;
+    ref?: ScrollerListForwardRef<T>;
+  }>({});
+
+  const refs = useCombinedRefs(mRef, (ref: ScrollerListForwardRef<T>) => {
+    if (ref == null) return;
+
+    const first = states.ref == null;
+
+    states.ref = ref;
+
+    if (first) reset();
+  });
+
+  const initLoadedRef = React.useRef<boolean>();
+
+  const reset = () => {
+    if (states.data == null || states.ref == null) return;
+    states.ref.reset({ data: states.data });
+  };
+
+  // On submit callback
+  const onSubmit = (data: FormData, _reset: boolean) => {
+    states.data = data;
+    reset();
+  };
+
+  const localLoadData = (props: GridLoadDataProps) => {
+    const data = GridDataGet(props, fieldTemplate);
+    return loadData(data);
+  };
+
+  type DataType = GridDataCacheType<T>;
+
+  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: ScrollerListRef
+  ): [T[], Partial<GridLoaderStates<T>>?] | null | undefined => {
+    // Avoid repeatedly load from cache
+    if (initLoadedRef.current || !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) {
+        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));
+  };
+
+  const f =
+    typeof fields == "function"
+      ? fields(
+          JSON.parse(
+            sessionStorage.getItem(`${cacheKey}-searchbar`) ?? "{}"
+          ) as DataTypes.BasicTemplateType<F>
+        )
+      : fields;
+
+  // Layout
+  return (
+    <CommonPage {...pageProps} scrollContainer={CommonPageScrollContainer}>
+      <Stack>
+        <Box
+          sx={{
+            paddingBottom: pageProps.paddings
+          }}
+        >
+          <SearchBar fields={f} onSubmit={onSubmit} />
+        </Box>
+        <ScrollerListEx<T, D>
+          autoLoad={false}
+          loadData={localLoadData}
+          onUpdateRows={onUpdateRows}
+          onInitLoad={onInitLoad}
+          onScroll={onListScroll}
+          mRef={refs}
+          {...rest}
+        />
+      </Stack>
+    </CommonPage>
+  );
 }

package/src/pages/ListPageProps.ts

@@ -1,12 +1,12 @@
-import { DataTypes } from '@etsoo/shared';
-import { ScrollerListExProps } from '../ScrollerListEx';
-import { SearchPageProps } from './SearchPageProps';
+import { DataTypes } from "@etsoo/shared";
+import { ScrollerListExProps } from "../ScrollerListEx";
+import { SearchPageProps } from "./SearchPageProps";
 
 /**
  * List page props
  */
 export type ListPageProps<
-    T extends object,
-    F extends DataTypes.BasicTemplate,
-    D extends DataTypes.Keys<T>
-> = SearchPageProps<T, F> & Omit<ScrollerListExProps<T, D>, 'loadData'>;
+  T extends object,
+  F extends DataTypes.BasicTemplate,
+  D extends DataTypes.Keys<T>
+> = SearchPageProps<T, F> & Omit<ScrollerListExProps<T, D>, "loadData">;

package/src/pages/SearchPageProps.ts

@@ -9,10 +9,22 @@ export type SearchPageProps<
   T extends object,
   F extends DataTypes.BasicTemplate
 > = Omit<GridLoader<T>, "loadData"> & {
+  /**
+   * Cache key
+   */
+  cacheKey?: string;
+
+  /**
+   * Cache minutes
+   */
+  cacheMinutes?: number;
+
   /**
    * Search fields
    */
-  fields: React.ReactElement[];
+  fields:
+    | React.ReactElement[]
+    | ((data: DataTypes.BasicTemplateType<F>) => React.ReactElement[]);
 
   /**
    * Search field template

package/src/pages/TablePage.tsx

@@ -1,17 +1,17 @@
 import {
-    GridDataGet,
-    GridLoadDataProps,
-    useCombinedRefs,
-    useDimensions
-} from '@etsoo/react';
-import { DataTypes, IdDefaultType } from '@etsoo/shared';
-import { Box, Stack } from '@mui/material';
-import React from 'react';
-import { MUGlobal } from '../MUGlobal';
-import { SearchBar } from '../SearchBar';
-import { TableEx, TableExMethodRef, TableExMinWidth } from '../TableEx';
-import { CommonPage, CommonPageScrollContainer } from './CommonPage';
-import { TablePageProps } from './TablePageProps';
+  GridDataGet,
+  GridLoadDataProps,
+  useCombinedRefs,
+  useDimensions
+} from "@etsoo/react";
+import { DataTypes, IdDefaultType } from "@etsoo/shared";
+import { Box, Stack } from "@mui/material";
+import React from "react";
+import { MUGlobal } from "../MUGlobal";
+import { SearchBar } from "../SearchBar";
+import { TableEx, TableExMethodRef, TableExMinWidth } from "../TableEx";
+import { CommonPage, CommonPageScrollContainer } from "./CommonPage";
+import { TablePageProps } from "./TablePageProps";
 
 /**
  * Table page
@@ -19,108 +19,122 @@ import { TablePageProps } from './TablePageProps';
  * @returns Component
  */
 export function TablePage<
-    T extends object,
-    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
-    D extends DataTypes.Keys<T> = IdDefaultType<T>
+  T extends object,
+  F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
+  D extends DataTypes.Keys<T> = IdDefaultType<T>
 >(props: TablePageProps<T, F, D>) {
-    // Destruct
-    const {
-        columns,
-        fields,
-        fieldTemplate,
-        loadData,
-        mRef,
-        sizeReadyMiliseconds = 0,
-        pageProps = {},
-        ...rest
-    } = props;
-
-    pageProps.paddings ??= MUGlobal.pagePaddings;
-
-    // States
-    const [states] = React.useState<{
-        data?: FormData;
-        ref?: TableExMethodRef<T>;
-    }>({});
-
-    const refs = useCombinedRefs(
-        mRef,
-        (ref: TableExMethodRef<T> | null | undefined) => {
-            if (ref == null) return;
-
-            const first = states.ref == null;
-
-            states.ref = ref;
-
-            if (first) reset();
-        }
-    );
-
-    const reset = () => {
-        if (states.data == null || states.ref == null) return;
-        states.ref.reset({ data: states.data });
-    };
-
-    // On submit callback
-    const onSubmit = (data: FormData, _reset: boolean) => {
-        states.data = data;
-        reset();
-    };
-
-    const localLoadData = (props: GridLoadDataProps) => {
-        const data = GridDataGet(props, fieldTemplate);
-        return loadData(data);
-    };
-
-    // Total width
-    const totalWidth = React.useMemo(
-        () =>
-            columns.reduce((previousValue, { width, minWidth }) => {
-                return previousValue + (width ?? minWidth ?? TableExMinWidth);
-            }, 0),
-        [columns]
-    );
-
-    // Watch container
-    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
-    const rect = dimensions[0][2];
-    const list = React.useMemo(() => {
-        if (rect != null && rect.height > 50 && rect.width >= totalWidth) {
-            let maxHeight =
-                document.documentElement.clientHeight -
-                (rect.top + rect.height + 1);
-
-            const style = window.getComputedStyle(dimensions[0][1]!);
-            const paddingBottom = parseFloat(style.paddingBottom);
-            if (!isNaN(paddingBottom)) maxHeight -= paddingBottom;
-
-            return (
-                <TableEx<T, D>
-                    autoLoad={false}
-                    columns={columns}
-                    loadData={localLoadData}
-                    maxHeight={maxHeight}
-                    mRef={refs}
-                    {...rest}
-                />
-            );
-        }
-    }, [rect]);
-
-    // Layout
-    return (
-        <CommonPage {...pageProps} scrollContainer={CommonPageScrollContainer}>
-            <Stack>
-                <Box
-                    ref={dimensions[0][0]}
-                    sx={{
-                        paddingBottom: pageProps.paddings
-                    }}
-                >
-                    <SearchBar fields={fields} onSubmit={onSubmit} />
-                </Box>
-                {list}
-            </Stack>
-        </CommonPage>
-    );
+  // Destruct
+  const {
+    columns,
+    fields,
+    fieldTemplate,
+    loadData,
+    mRef,
+    sizeReadyMiliseconds = 0,
+    pageProps = {},
+    cacheKey,
+    cacheMinutes = 120,
+    ...rest
+  } = props;
+
+  pageProps.paddings ??= MUGlobal.pagePaddings;
+
+  // States
+  const [states] = React.useState<{
+    data?: FormData;
+    ref?: TableExMethodRef<T>;
+  }>({});
+
+  const refs = useCombinedRefs(
+    mRef,
+    (ref: TableExMethodRef<T> | null | undefined) => {
+      if (ref == null) return;
+
+      const first = states.ref == null;
+
+      states.ref = ref;
+
+      if (first) reset();
+    }
+  );
+
+  const reset = () => {
+    if (states.data == null || states.ref == null) return;
+    states.ref.reset({ data: states.data });
+  };
+
+  // On submit callback
+  const onSubmit = (data: FormData, _reset: boolean) => {
+    states.data = data;
+    reset();
+  };
+
+  const localLoadData = (props: GridLoadDataProps) => {
+    const data = GridDataGet(props, fieldTemplate);
+
+    if (cacheKey)
+      sessionStorage.setItem(`${cacheKey}-searchbar`, JSON.stringify(data));
+
+    return loadData(data);
+  };
+
+  // Total width
+  const totalWidth = React.useMemo(
+    () =>
+      columns.reduce((previousValue, { width, minWidth }) => {
+        return previousValue + (width ?? minWidth ?? TableExMinWidth);
+      }, 0),
+    [columns]
+  );
+
+  // Watch container
+  const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
+  const rect = dimensions[0][2];
+  const list = React.useMemo(() => {
+    if (rect != null && rect.height > 50 && rect.width >= totalWidth) {
+      let maxHeight =
+        document.documentElement.clientHeight - (rect.top + rect.height + 1);
+
+      const style = window.getComputedStyle(dimensions[0][1]!);
+      const paddingBottom = parseFloat(style.paddingBottom);
+      if (!isNaN(paddingBottom)) maxHeight -= paddingBottom;
+
+      return (
+        <TableEx<T, D>
+          autoLoad={false}
+          columns={columns}
+          loadData={localLoadData}
+          maxHeight={maxHeight}
+          mRef={refs}
+          {...rest}
+        />
+      );
+    }
+  }, [rect]);
+
+  const f =
+    typeof fields == "function"
+      ? fields(
+          JSON.parse(
+            sessionStorage.getItem(`${cacheKey}-searchbar`) ?? "{}"
+          ) as DataTypes.BasicTemplateType<F>
+        )
+      : fields;
+
+  // Layout
+  return (
+    <CommonPage {...pageProps} scrollContainer={CommonPageScrollContainer}>
+      <Stack>
+        <Box
+          ref={dimensions[0][0]}
+          sx={{
+            paddingBottom: pageProps.paddings
+          }}
+        >
+          <SearchBar fields={f} onSubmit={onSubmit} />
+        </Box>
+        {list}
+      </Stack>
+    </CommonPage>
+  );
 }