@etsoo/materialui 1.2.42 → 1.2.44

package/lib/DataGridEx.d.ts

@@ -20,6 +20,14 @@ export type DataGridExProps<T extends object, D extends DataTypes.Keys<T>> = Omi
      * Alternating colors for odd/even rows
      */
     alternatingColors?: [string?, string?];
+    /**
+     * Cache key
+     */
+    cacheKey?: string;
+    /**
+     * Cache minutes
+     */
+    cacheMinutes?: number;
     /**
      * Checkable to choose multiple items
      * @default false

package/lib/GridDataCacheType.d.ts

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

package/lib/GridDataCacheType.js

@@ -0,0 +1 @@
+export {};

package/lib/GridUtils.d.ts

@@ -0,0 +1,46 @@
+import { GridLoadDataProps, GridLoaderStates } from "@etsoo/react";
+import { DataTypes } from "@etsoo/shared";
+import { GridDataCacheType } from "./GridDataCacheType";
+/**
+ * Grid utilities
+ */
+export declare namespace GridUtils {
+    /**
+     * Create data loader
+     * @param props Props
+     * @param template Field template
+     * @param cacheKey Cache key
+     * @returns Request data
+     */
+    function createLoader<F extends DataTypes.BasicTemplate>(props: GridLoadDataProps, template?: F, cacheKey?: string): DataTypes.BasicTemplateType<F> & {
+        currentPage: number;
+        batchSize: number;
+        orderBy?: string | undefined;
+        orderByAsc?: boolean | undefined;
+    };
+    /**
+     * Get cache data
+     * @param cacheKey Cache key
+     * @param cacheMinutes Cache minutes
+     * @returns
+     */
+    function getCacheData<T>(cacheKey: string, cacheMinutes: number): GridDataCacheType<T> | undefined;
+    /**
+     * Get search data
+     * @param cacheKey Cache key
+     * @returns Result
+     */
+    function getSearchData<F extends DataTypes.BasicTemplate>(cacheKey?: string): DataTypes.BasicTemplateType<F> | undefined;
+    /**
+     * Get update rows handler
+     * @param cacheKey Cache key
+     * @returns Handler
+     */
+    function getUpdateRowsHandler<T extends object>(cacheKey?: string): (rows: T[], state: GridLoaderStates<T>) => void;
+    /**
+     * Merget search date to state
+     * @param state State
+     * @param searchData Search data
+     */
+    function mergeSearchData<T, F extends DataTypes.BasicTemplate>(state: GridLoaderStates<T>, searchData?: DataTypes.BasicTemplateType<F>): void;
+}

package/lib/GridUtils.js

@@ -0,0 +1,85 @@
+import { GridDataGetData } from "@etsoo/react";
+/**
+ * Grid utilities
+ */
+export var GridUtils;
+(function (GridUtils) {
+    /**
+     * Create data loader
+     * @param props Props
+     * @param template Field template
+     * @param cacheKey Cache key
+     * @returns Request data
+     */
+    function createLoader(props, template, cacheKey) {
+        const { data, ...rest } = props;
+        const formData = GridDataGetData(data, template);
+        if (cacheKey)
+            sessionStorage.setItem(`${cacheKey}-searchbar`, JSON.stringify(formData));
+        return { ...formData, ...rest };
+    }
+    GridUtils.createLoader = createLoader;
+    /**
+     * Get cache data
+     * @param cacheKey Cache key
+     * @param cacheMinutes Cache minutes
+     * @returns
+     */
+    function getCacheData(cacheKey, cacheMinutes) {
+        const cacheSource = sessionStorage.getItem(cacheKey);
+        if (cacheSource) {
+            const cacheData = JSON.parse(cacheSource);
+            if (new Date().valueOf() - cacheData.creation > cacheMinutes * 60000) {
+                sessionStorage.removeItem(cacheKey);
+                return;
+            }
+            return cacheData;
+        }
+    }
+    GridUtils.getCacheData = getCacheData;
+    /**
+     * Get search data
+     * @param cacheKey Cache key
+     * @returns Result
+     */
+    function getSearchData(cacheKey) {
+        if (cacheKey) {
+            const data = sessionStorage.getItem(`${cacheKey}-searchbar`);
+            if (data) {
+                return JSON.parse(data);
+            }
+        }
+    }
+    GridUtils.getSearchData = getSearchData;
+    /**
+     * Get update rows handler
+     * @param cacheKey Cache key
+     * @returns Handler
+     */
+    function getUpdateRowsHandler(cacheKey) {
+        return (rows, state) => {
+            if (state.currentPage > 0 && cacheKey) {
+                const data = {
+                    rows,
+                    state,
+                    creation: new Date().valueOf()
+                };
+                sessionStorage.setItem(cacheKey, JSON.stringify(data));
+            }
+        };
+    }
+    GridUtils.getUpdateRowsHandler = getUpdateRowsHandler;
+    /**
+     * Merget search date to state
+     * @param state State
+     * @param searchData Search data
+     */
+    function mergeSearchData(state, searchData) {
+        var _a;
+        if (searchData == null)
+            return;
+        (_a = state.data) !== null && _a !== void 0 ? _a : (state.data = {});
+        Object.assign(state.data, searchData);
+    }
+    GridUtils.mergeSearchData = mergeSearchData;
+})(GridUtils || (GridUtils = {}));

package/lib/ResponsibleContainer.d.ts

@@ -22,14 +22,6 @@ 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
      */

package/lib/ResponsibleContainer.js

@@ -1,12 +1,13 @@
 import { Box, Stack } from "@mui/material";
 import React from "react";
-import { GridDataGet, ReactUtils, useCombinedRefs, useDimensions } from "@etsoo/react";
+import { ReactUtils, useCombinedRefs, useDimensions } from "@etsoo/react";
 import { DataGridEx, DataGridExCalColumns } from "./DataGridEx";
 import { MUGlobal } from "./MUGlobal";
 import { PullToRefreshUI } from "./PullToRefreshUI";
 import { ScrollerListEx } from "./ScrollerListEx";
 import { SearchBar } from "./SearchBar";
 import { Labels } from "./app/Labels";
+import { GridUtils } from "./GridUtils";
 function defaultContainerBoxSx(paddings, hasField, _dataGrid) {
     const half = MUGlobal.half(paddings);
     return {
@@ -44,11 +45,10 @@ export function ResponsibleContainer(props) {
     // Load data
     const localLoadData = (props) => {
         state.mounted = true;
-        const data = GridDataGet(props, fieldTemplate);
-        if (cacheKey)
-            sessionStorage.setItem(`${cacheKey}-searchbar`, JSON.stringify(data));
-        return loadData(data);
+        return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey));
     };
+    // Search data
+    const searchData = GridUtils.getSearchData(cacheKey);
     // On submit callback
     const onSubmit = (data, _reset) => {
         if (data == null || state.ref == null)
@@ -72,25 +72,15 @@ 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);
+        const cacheData = GridUtils.getCacheData(cacheKey, cacheMinutes);
         if (cacheData) {
-            const { rows, state, creation } = JSON.parse(cacheData);
-            // 120 minutes
-            if (new Date().valueOf() - creation > cacheMinutes * 60000) {
-                sessionStorage.removeItem(cacheKey);
-                return undefined;
-            }
+            const { rows, state } = cacheData;
+            GridUtils.mergeSearchData(state, searchData);
             // Scroll position
             const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
             if (scrollData) {
@@ -157,7 +147,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);
-                        }, onScroll: onGridScroll, columns: columns, onUpdateRows: onUpdateRows, onInitLoad: onInitLoad, ...rest })),
+                        }, onScroll: onGridScroll, columns: columns, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, ...rest })),
                 true
             ];
         }
@@ -172,7 +162,7 @@ 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, onUpdateRows: onUpdateRows, onInitLoad: onInitLoad, mRef: mRefs, onClick: (event, data) => quickAction && ReactUtils.isSafeClick(event) && quickAction(data), oRef: (element) => {
+                React.createElement(ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, mRef: mRefs, onClick: (event, data) => quickAction && ReactUtils.isSafeClick(event) && quickAction(data), oRef: (element) => {
                         if (element != null && elementReady)
                             elementReady(element, false);
                     }, onScroll: onListScroll, ...rest })),
@@ -180,12 +170,9 @@ export function ResponsibleContainer(props) {
         ];
     })();
     const searchBar = React.useMemo(() => {
-        var _a;
         if (!hasFields || showDataGrid == null)
             return;
-        const f = typeof fields == "function"
-            ? fields(JSON.parse((_a = sessionStorage.getItem(`${cacheKey}-searchbar`)) !== null && _a !== void 0 ? _a : "{}"))
-            : fields;
+        const f = typeof fields == "function" ? fields(searchData !== null && searchData !== void 0 ? searchData : {}) : fields;
         return (React.createElement(SearchBar, { fields: f, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}` }));
     }, [showDataGrid, hasFields, searchBarHeight]);
     // Pull container

package/lib/pages/DataGridPage.js

@@ -1,10 +1,11 @@
-import { GridDataGet, useCombinedRefs, useDimensions } from "@etsoo/react";
+import { useCombinedRefs, useDimensions } from "@etsoo/react";
 import { Box, Stack } from "@mui/material";
 import React from "react";
 import { DataGridEx } from "../DataGridEx";
 import { MUGlobal } from "../MUGlobal";
 import { SearchBar } from "../SearchBar";
 import { CommonPage } from "./CommonPage";
+import { GridUtils } from "../GridUtils";
 /**
  * DataGrid page
  * @param props Props
@@ -13,7 +14,7 @@ import { CommonPage } from "./CommonPage";
 export function DataGridPage(props) {
     var _a;
     // Destruct
-    const { adjustHeight, fields, fieldTemplate, height, loadData, mRef, sizeReadyMiliseconds = 100, pageProps = {}, ...rest } = props;
+    const { adjustHeight, fields, fieldTemplate, height, loadData, mRef, sizeReadyMiliseconds = 100, pageProps = {}, cacheKey, cacheMinutes = 120, ...rest } = props;
     (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
     // States
     const [states, setStates] = React.useReducer((currentState, newState) => {
@@ -27,13 +28,42 @@ export function DataGridPage(props) {
         states.ref = ref;
         //setStates({ ref });
     });
+    const initLoadedRef = React.useRef();
     // On submit callback
     const onSubmit = (data, _reset) => {
         setStates({ data });
     };
     const localLoadData = (props) => {
-        const data = GridDataGet(props, fieldTemplate);
-        return loadData(data);
+        return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey));
+    };
+    // Search data
+    const searchData = GridUtils.getSearchData(cacheKey);
+    const onInitLoad = (ref) => {
+        // Avoid repeatedly load from cache
+        if (initLoadedRef.current || !cacheKey)
+            return undefined;
+        // Cache data
+        const cacheData = GridUtils.getCacheData(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);
+                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) => {
+        if (!cacheKey || !initLoadedRef.current)
+            return;
+        sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
     };
     // Watch container
     const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
@@ -56,7 +86,7 @@ export function DataGridPage(props) {
         const gridHeight = states.height;
         if (gridHeight == null)
             return;
-        return (React.createElement(DataGridEx, { autoLoad: false, height: gridHeight, loadData: localLoadData, mRef: refs, outerRef: (element) => {
+        return (React.createElement(DataGridEx, { autoLoad: false, height: gridHeight, loadData: localLoadData, mRef: refs, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onGridScroll, outerRef: (element) => {
                 if (element != null)
                     setStates({ element });
             }, ...rest }));
@@ -67,12 +97,13 @@ export function DataGridPage(props) {
             return;
         ref.reset({ data });
     }, [ref, data]);
+    const f = typeof fields == "function" ? fields(searchData !== null && searchData !== void 0 ? searchData : {}) : fields;
     // Layout
     return (React.createElement(CommonPage, { ...pageProps, scrollContainer: states.element },
         React.createElement(Stack, null,
             React.createElement(Box, { ref: dimensions[0][0], sx: {
                     paddingBottom: pageProps.paddings
                 } },
-                React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit })),
+                React.createElement(SearchBar, { fields: f, onSubmit: onSubmit })),
             list)));
 }

package/lib/pages/FixedListPage.js

@@ -1,10 +1,11 @@
-import { GridDataGet, useCombinedRefs, useDimensions } from "@etsoo/react";
+import { useCombinedRefs, useDimensions } from "@etsoo/react";
 import { Box, Stack } from "@mui/material";
 import React from "react";
 import { MUGlobal } from "../MUGlobal";
 import { ScrollerListEx } from "../ScrollerListEx";
 import { SearchBar } from "../SearchBar";
 import { CommonPage } from "./CommonPage";
+import { GridUtils } from "../GridUtils";
 /**
  * Fixed height list page
  * @param props Props
@@ -13,10 +14,11 @@ import { CommonPage } from "./CommonPage";
 export function FixedListPage(props) {
     var _a;
     // Destruct
-    const { adjustHeight, fields, fieldTemplate, loadData, mRef, sizeReadyMiliseconds = 0, pageProps = {}, ...rest } = props;
+    const { adjustHeight, fields, fieldTemplate, loadData, mRef, sizeReadyMiliseconds = 0, pageProps = {}, cacheKey, cacheMinutes = 120, ...rest } = props;
     (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
     // States
     const [states] = React.useState({});
+    const initLoadedRef = React.useRef();
     // Scroll container
     const [scrollContainer, updateScrollContainer] = React.useState();
     const refs = useCombinedRefs(mRef, (ref) => {
@@ -38,8 +40,36 @@ export function FixedListPage(props) {
         reset();
     };
     const localLoadData = (props) => {
-        const data = GridDataGet(props, fieldTemplate);
-        return loadData(data);
+        return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey));
+    };
+    // Search data
+    const searchData = GridUtils.getSearchData(cacheKey);
+    const onInitLoad = (ref) => {
+        // Avoid repeatedly load from cache
+        if (initLoadedRef.current || !cacheKey)
+            return undefined;
+        // Cache data
+        const cacheData = GridUtils.getCacheData(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);
+                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) => {
+        if (!cacheKey || !initLoadedRef.current)
+            return;
+        sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
     };
     // Watch container
     const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
@@ -53,17 +83,18 @@ export function FixedListPage(props) {
             return (React.createElement(Box, { id: "list-container", sx: {
                     height: height + "px"
                 } },
-                React.createElement(ScrollerListEx, { autoLoad: false, height: height, loadData: localLoadData, mRef: refs, oRef: (element) => {
+                React.createElement(ScrollerListEx, { autoLoad: false, height: height, loadData: localLoadData, mRef: refs, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, oRef: (element) => {
                         if (element != null)
                             updateScrollContainer(element);
                     }, ...rest })));
         }
     }, [rect]);
+    const f = typeof fields == "function" ? fields(searchData !== null && searchData !== void 0 ? searchData : {}) : fields;
     const { paddings, ...pageRest } = pageProps;
     // Layout
     return (React.createElement(CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer },
         React.createElement(Stack, null,
             React.createElement(Box, { ref: dimensions[0][0], sx: { padding: paddings } },
-                React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit })),
+                React.createElement(SearchBar, { fields: f, onSubmit: onSubmit })),
             list)));
 }

package/lib/pages/ListPage.d.ts

@@ -1,6 +1,6 @@
-import { DataTypes, IdDefaultType } from '@etsoo/shared';
-import React from 'react';
-import { ListPageProps } from './ListPageProps';
+import { DataTypes, IdDefaultType } from "@etsoo/shared";
+import React from "react";
+import { ListPageProps } from "./ListPageProps";
 /**
  * List page
  * @param props Props

package/lib/pages/ListPage.js

@@ -1,10 +1,11 @@
-import { GridDataGet, useCombinedRefs } from '@etsoo/react';
-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 { useCombinedRefs } from "@etsoo/react";
+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 { GridUtils } from "../GridUtils";
 /**
  * List page
  * @param props Props
@@ -13,7 +14,7 @@ import { CommonPage, CommonPageScrollContainer } from './CommonPage';
 export function ListPage(props) {
     var _a;
     // Destruct
-    const { fields, fieldTemplate, loadData, mRef, pageProps = {}, ...rest } = props;
+    const { fields, fieldTemplate, loadData, mRef, pageProps = {}, cacheKey, cacheMinutes = 120, ...rest } = props;
     (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
     // States
     const [states] = React.useState({});
@@ -25,6 +26,7 @@ export function ListPage(props) {
         if (first)
             reset();
     });
+    const initLoadedRef = React.useRef();
     const reset = () => {
         if (states.data == null || states.ref == null)
             return;
@@ -36,15 +38,44 @@ export function ListPage(props) {
         reset();
     };
     const localLoadData = (props) => {
-        const data = GridDataGet(props, fieldTemplate);
-        return loadData(data);
+        return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey));
     };
+    // Search data
+    const searchData = GridUtils.getSearchData(cacheKey);
+    const onInitLoad = (ref) => {
+        // Avoid repeatedly load from cache
+        if (initLoadedRef.current || !cacheKey)
+            return undefined;
+        // Cache data
+        const cacheData = GridUtils.getCacheData(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);
+                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) => {
+        if (!cacheKey || !initLoadedRef.current)
+            return;
+        sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
+    };
+    const f = typeof fields == "function" ? fields(searchData !== null && searchData !== void 0 ? searchData : {}) : fields;
     // Layout
     return (React.createElement(CommonPage, { ...pageProps, scrollContainer: CommonPageScrollContainer },
         React.createElement(Stack, null,
             React.createElement(Box, { sx: {
                     paddingBottom: pageProps.paddings
                 } },
-                React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit })),
-            React.createElement(ScrollerListEx, { autoLoad: false, loadData: localLoadData, mRef: refs, ...rest }))));
+                React.createElement(SearchBar, { fields: f, onSubmit: onSubmit })),
+            React.createElement(ScrollerListEx, { autoLoad: false, loadData: localLoadData, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, mRef: refs, ...rest }))));
 }

package/lib/pages/ListPageProps.d.ts

@@ -1,7 +1,7 @@
-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'>;
+export type ListPageProps<T extends object, F extends DataTypes.BasicTemplate, D extends DataTypes.Keys<T>> = SearchPageProps<T, F> & Omit<ScrollerListExProps<T, D>, "loadData">;

package/lib/pages/SearchPageProps.d.ts

@@ -6,10 +6,18 @@ import { CommonPageProps } from "./CommonPageProps";
  * Search page props
  */
 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/lib/pages/TablePage.d.ts

@@ -1,6 +1,6 @@
-import { DataTypes, IdDefaultType } from '@etsoo/shared';
-import React from 'react';
-import { TablePageProps } from './TablePageProps';
+import { DataTypes, IdDefaultType } from "@etsoo/shared";
+import React from "react";
+import { TablePageProps } from "./TablePageProps";
 /**
  * Table page
  * @param props Props

package/lib/pages/TablePage.js

@@ -1,10 +1,11 @@
-import { GridDataGet, useCombinedRefs, useDimensions } from '@etsoo/react';
-import { Box, Stack } from '@mui/material';
-import React from 'react';
-import { MUGlobal } from '../MUGlobal';
-import { SearchBar } from '../SearchBar';
-import { TableEx, TableExMinWidth } from '../TableEx';
-import { CommonPage, CommonPageScrollContainer } from './CommonPage';
+import { useCombinedRefs, useDimensions } from "@etsoo/react";
+import { Box, Stack } from "@mui/material";
+import React from "react";
+import { MUGlobal } from "../MUGlobal";
+import { SearchBar } from "../SearchBar";
+import { TableEx, TableExMinWidth } from "../TableEx";
+import { CommonPage, CommonPageScrollContainer } from "./CommonPage";
+import { GridUtils } from "../GridUtils";
 /**
  * Table page
  * @param props Props
@@ -13,7 +14,7 @@ import { CommonPage, CommonPageScrollContainer } from './CommonPage';
 export function TablePage(props) {
     var _a;
     // Destruct
-    const { columns, fields, fieldTemplate, loadData, mRef, sizeReadyMiliseconds = 0, pageProps = {}, ...rest } = props;
+    const { columns, fields, fieldTemplate, loadData, mRef, sizeReadyMiliseconds = 0, pageProps = {}, cacheKey, cacheMinutes = 120, ...rest } = props;
     (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
     // States
     const [states] = React.useState({});
@@ -36,9 +37,10 @@ export function TablePage(props) {
         reset();
     };
     const localLoadData = (props) => {
-        const data = GridDataGet(props, fieldTemplate);
-        return loadData(data);
+        return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey));
     };
+    // Search data
+    const searchData = GridUtils.getSearchData(cacheKey);
     // Total width
     const totalWidth = React.useMemo(() => columns.reduce((previousValue, { width, minWidth }) => {
         var _a;
@@ -49,8 +51,7 @@ export function TablePage(props) {
     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);
+            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))
@@ -58,12 +59,13 @@ export function TablePage(props) {
             return (React.createElement(TableEx, { autoLoad: false, columns: columns, loadData: localLoadData, maxHeight: maxHeight, mRef: refs, ...rest }));
         }
     }, [rect]);
+    const f = typeof fields == "function" ? fields(searchData !== null && searchData !== void 0 ? searchData : {}) : fields;
     // Layout
     return (React.createElement(CommonPage, { ...pageProps, scrollContainer: CommonPageScrollContainer },
         React.createElement(Stack, null,
             React.createElement(Box, { ref: dimensions[0][0], sx: {
                     paddingBottom: pageProps.paddings
                 } },
-                React.createElement(SearchBar, { fields: fields, onSubmit: onSubmit })),
+                React.createElement(SearchBar, { fields: f, onSubmit: onSubmit })),
             list)));
 }