@etsoo/materialui 1.2.43 → 1.2.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/lib/GridUtils.d.ts +46 -0
  2. package/lib/GridUtils.js +85 -0
  3. package/lib/ResponsibleContainer.js +11 -24
  4. package/lib/pages/DataGridPage.js +11 -23
  5. package/lib/pages/FixedListPage.js +11 -23
  6. package/lib/pages/ListPage.js +11 -21
  7. package/lib/pages/TablePage.js +7 -9
  8. package/package.json +2 -2
  9. package/src/GridUtils.ts +99 -0
  10. package/src/ResponsibleContainer.tsx +11 -34
  11. package/src/pages/DataGridPage.tsx +9 -32
  12. package/src/pages/FixedListPage.tsx +9 -32
  13. package/src/pages/ListPage.tsx +9 -28
  14. package/src/pages/TablePage.tsx +6 -15
package/lib/GridUtils.d.ts ADDED
@@ -0,0 +1,46 @@
1
+ import { GridLoadDataProps, GridLoaderStates } from "@etsoo/react";
2
+ import { DataTypes } from "@etsoo/shared";
3
+ import { GridDataCacheType } from "./GridDataCacheType";
4
+ /**
5
+ * Grid utilities
6
+ */
7
+ export declare namespace GridUtils {
8
+ /**
9
+ * Create data loader
10
+ * @param props Props
11
+ * @param template Field template
12
+ * @param cacheKey Cache key
13
+ * @returns Request data
14
+ */
15
+ function createLoader<F extends DataTypes.BasicTemplate>(props: GridLoadDataProps, template?: F, cacheKey?: string): DataTypes.BasicTemplateType<F> & {
16
+ currentPage: number;
17
+ batchSize: number;
18
+ orderBy?: string | undefined;
19
+ orderByAsc?: boolean | undefined;
20
+ };
21
+ /**
22
+ * Get cache data
23
+ * @param cacheKey Cache key
24
+ * @param cacheMinutes Cache minutes
25
+ * @returns
26
+ */
27
+ function getCacheData<T>(cacheKey: string, cacheMinutes: number): GridDataCacheType<T> | undefined;
28
+ /**
29
+ * Get search data
30
+ * @param cacheKey Cache key
31
+ * @returns Result
32
+ */
33
+ function getSearchData<F extends DataTypes.BasicTemplate>(cacheKey?: string): DataTypes.BasicTemplateType<F> | undefined;
34
+ /**
35
+ * Get update rows handler
36
+ * @param cacheKey Cache key
37
+ * @returns Handler
38
+ */
39
+ function getUpdateRowsHandler<T extends object>(cacheKey?: string): (rows: T[], state: GridLoaderStates<T>) => void;
40
+ /**
41
+ * Merget search date to state
42
+ * @param state State
43
+ * @param searchData Search data
44
+ */
45
+ function mergeSearchData<T, F extends DataTypes.BasicTemplate>(state: GridLoaderStates<T>, searchData?: DataTypes.BasicTemplateType<F>): void;
46
+ }
package/lib/GridUtils.js ADDED
@@ -0,0 +1,85 @@
1
+ import { GridDataGetData } from "@etsoo/react";
2
+ /**
3
+ * Grid utilities
4
+ */
5
+ export var GridUtils;
6
+ (function (GridUtils) {
7
+ /**
8
+ * Create data loader
9
+ * @param props Props
10
+ * @param template Field template
11
+ * @param cacheKey Cache key
12
+ * @returns Request data
13
+ */
14
+ function createLoader(props, template, cacheKey) {
15
+ const { data, ...rest } = props;
16
+ const formData = GridDataGetData(data, template);
17
+ if (cacheKey)
18
+ sessionStorage.setItem(`${cacheKey}-searchbar`, JSON.stringify(formData));
19
+ return { ...formData, ...rest };
20
+ }
21
+ GridUtils.createLoader = createLoader;
22
+ /**
23
+ * Get cache data
24
+ * @param cacheKey Cache key
25
+ * @param cacheMinutes Cache minutes
26
+ * @returns
27
+ */
28
+ function getCacheData(cacheKey, cacheMinutes) {
29
+ const cacheSource = sessionStorage.getItem(cacheKey);
30
+ if (cacheSource) {
31
+ const cacheData = JSON.parse(cacheSource);
32
+ if (new Date().valueOf() - cacheData.creation > cacheMinutes * 60000) {
33
+ sessionStorage.removeItem(cacheKey);
34
+ return;
35
+ }
36
+ return cacheData;
37
+ }
38
+ }
39
+ GridUtils.getCacheData = getCacheData;
40
+ /**
41
+ * Get search data
42
+ * @param cacheKey Cache key
43
+ * @returns Result
44
+ */
45
+ function getSearchData(cacheKey) {
46
+ if (cacheKey) {
47
+ const data = sessionStorage.getItem(`${cacheKey}-searchbar`);
48
+ if (data) {
49
+ return JSON.parse(data);
50
+ }
51
+ }
52
+ }
53
+ GridUtils.getSearchData = getSearchData;
54
+ /**
55
+ * Get update rows handler
56
+ * @param cacheKey Cache key
57
+ * @returns Handler
58
+ */
59
+ function getUpdateRowsHandler(cacheKey) {
60
+ return (rows, state) => {
61
+ if (state.currentPage > 0 && cacheKey) {
62
+ const data = {
63
+ rows,
64
+ state,
65
+ creation: new Date().valueOf()
66
+ };
67
+ sessionStorage.setItem(cacheKey, JSON.stringify(data));
68
+ }
69
+ };
70
+ }
71
+ GridUtils.getUpdateRowsHandler = getUpdateRowsHandler;
72
+ /**
73
+ * Merget search date to state
74
+ * @param state State
75
+ * @param searchData Search data
76
+ */
77
+ function mergeSearchData(state, searchData) {
78
+ var _a;
79
+ if (searchData == null)
80
+ return;
81
+ (_a = state.data) !== null && _a !== void 0 ? _a : (state.data = {});
82
+ Object.assign(state.data, searchData);
83
+ }
84
+ GridUtils.mergeSearchData = mergeSearchData;
85
+ })(GridUtils || (GridUtils = {}));
package/lib/ResponsibleContainer.js CHANGED
@@ -1,12 +1,13 @@
1
1
  import { Box, Stack } from "@mui/material";
2
2
  import React from "react";
3
- import { GridDataGet, ReactUtils, useCombinedRefs, useDimensions } from "@etsoo/react";
3
+ import { ReactUtils, useCombinedRefs, useDimensions } from "@etsoo/react";
4
4
  import { DataGridEx, DataGridExCalColumns } from "./DataGridEx";
5
5
  import { MUGlobal } from "./MUGlobal";
6
6
  import { PullToRefreshUI } from "./PullToRefreshUI";
7
7
  import { ScrollerListEx } from "./ScrollerListEx";
8
8
  import { SearchBar } from "./SearchBar";
9
9
  import { Labels } from "./app/Labels";
10
+ import { GridUtils } from "./GridUtils";
10
11
  function defaultContainerBoxSx(paddings, hasField, _dataGrid) {
11
12
  const half = MUGlobal.half(paddings);
12
13
  return {
@@ -44,11 +45,10 @@ export function ResponsibleContainer(props) {
44
45
  // Load data
45
46
  const localLoadData = (props) => {
46
47
  state.mounted = true;
47
- const data = GridDataGet(props, fieldTemplate);
48
- if (cacheKey)
49
- sessionStorage.setItem(`${cacheKey}-searchbar`, JSON.stringify(data));
50
- return loadData(data);
48
+ return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey));
51
49
  };
50
+ // Search data
51
+ const searchData = GridUtils.getSearchData(cacheKey);
52
52
  // On submit callback
53
53
  const onSubmit = (data, _reset) => {
54
54
  if (data == null || state.ref == null)
@@ -72,25 +72,15 @@ export function ResponsibleContainer(props) {
72
72
  state.rect = rect;
73
73
  return false;
74
74
  });
75
- const onUpdateRows = (rows, state) => {
76
- if (state.currentPage > 0 && cacheKey) {
77
- const data = { rows, state, creation: new Date().valueOf() };
78
- sessionStorage.setItem(cacheKey, JSON.stringify(data));
79
- }
80
- };
81
75
  const onInitLoad = (ref) => {
82
76
  // Avoid repeatedly load from cache
83
77
  if (refs.current.initLoaded || !cacheKey)
84
78
  return undefined;
85
79
  // Cache data
86
- const cacheData = sessionStorage.getItem(cacheKey);
80
+ const cacheData = GridUtils.getCacheData(cacheKey, cacheMinutes);
87
81
  if (cacheData) {
88
- const { rows, state, creation } = JSON.parse(cacheData);
89
- // 120 minutes
90
- if (new Date().valueOf() - creation > cacheMinutes * 60000) {
91
- sessionStorage.removeItem(cacheKey);
92
- return undefined;
93
- }
82
+ const { rows, state } = cacheData;
83
+ GridUtils.mergeSearchData(state, searchData);
94
84
  // Scroll position
95
85
  const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
96
86
  if (scrollData) {
@@ -157,7 +147,7 @@ export function ResponsibleContainer(props) {
157
147
  React.createElement(DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, onDoubleClick: (_, data) => quickAction && quickAction(data), outerRef: (element) => {
158
148
  if (element != null && elementReady)
159
149
  elementReady(element, true);
160
- }, onScroll: onGridScroll, columns: columns, onUpdateRows: onUpdateRows, onInitLoad: onInitLoad, ...rest })),
150
+ }, onScroll: onGridScroll, columns: columns, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, ...rest })),
161
151
  true
162
152
  ];
163
153
  }
@@ -172,7 +162,7 @@ export function ResponsibleContainer(props) {
172
162
  delete rest.selectable;
173
163
  return [
174
164
  React.createElement(Box, { className: "ListBox", sx: { height: heightLocal } },
175
- 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) => {
165
+ 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) => {
176
166
  if (element != null && elementReady)
177
167
  elementReady(element, false);
178
168
  }, onScroll: onListScroll, ...rest })),
@@ -180,12 +170,9 @@ export function ResponsibleContainer(props) {
180
170
  ];
181
171
  })();
182
172
  const searchBar = React.useMemo(() => {
183
- var _a;
184
173
  if (!hasFields || showDataGrid == null)
185
174
  return;
186
- const f = typeof fields == "function"
187
- ? fields(JSON.parse((_a = sessionStorage.getItem(`${cacheKey}-searchbar`)) !== null && _a !== void 0 ? _a : "{}"))
188
- : fields;
175
+ const f = typeof fields == "function" ? fields(searchData !== null && searchData !== void 0 ? searchData : {}) : fields;
189
176
  return (React.createElement(SearchBar, { fields: f, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}` }));
190
177
  }, [showDataGrid, hasFields, searchBarHeight]);
191
178
  // Pull container
package/lib/pages/DataGridPage.js CHANGED
@@ -1,17 +1,18 @@
1
- import { GridDataGet, useCombinedRefs, useDimensions } from "@etsoo/react";
1
+ import { useCombinedRefs, useDimensions } from "@etsoo/react";
2
2
  import { Box, Stack } from "@mui/material";
3
3
  import React from "react";
4
4
  import { DataGridEx } from "../DataGridEx";
5
5
  import { MUGlobal } from "../MUGlobal";
6
6
  import { SearchBar } from "../SearchBar";
7
7
  import { CommonPage } from "./CommonPage";
8
+ import { GridUtils } from "../GridUtils";
8
9
  /**
9
10
  * DataGrid page
10
11
  * @param props Props
11
12
  * @returns Component
12
13
  */
13
14
  export function DataGridPage(props) {
14
- var _a, _b;
15
+ var _a;
15
16
  // Destruct
16
17
  const { adjustHeight, fields, fieldTemplate, height, loadData, mRef, sizeReadyMiliseconds = 100, pageProps = {}, cacheKey, cacheMinutes = 120, ...rest } = props;
17
18
  (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
@@ -33,30 +34,19 @@ export function DataGridPage(props) {
33
34
  setStates({ data });
34
35
  };
35
36
  const localLoadData = (props) => {
36
- const data = GridDataGet(props, fieldTemplate);
37
- if (cacheKey)
38
- sessionStorage.setItem(`${cacheKey}-searchbar`, JSON.stringify(data));
39
- return loadData(data);
40
- };
41
- const onUpdateRows = (rows, state) => {
42
- if (state.currentPage > 0 && cacheKey) {
43
- const data = { rows, state, creation: new Date().valueOf() };
44
- sessionStorage.setItem(cacheKey, JSON.stringify(data));
45
- }
37
+ return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey));
46
38
  };
39
+ // Search data
40
+ const searchData = GridUtils.getSearchData(cacheKey);
47
41
  const onInitLoad = (ref) => {
48
42
  // Avoid repeatedly load from cache
49
43
  if (initLoadedRef.current || !cacheKey)
50
44
  return undefined;
51
45
  // Cache data
52
- const cacheData = sessionStorage.getItem(cacheKey);
46
+ const cacheData = GridUtils.getCacheData(cacheKey, cacheMinutes);
53
47
  if (cacheData) {
54
- const { rows, state, creation } = JSON.parse(cacheData);
55
- // 120 minutes
56
- if (new Date().valueOf() - creation > cacheMinutes * 60000) {
57
- sessionStorage.removeItem(cacheKey);
58
- return undefined;
59
- }
48
+ const { rows, state } = cacheData;
49
+ GridUtils.mergeSearchData(state, searchData);
60
50
  // Scroll position
61
51
  const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
62
52
  if (scrollData) {
@@ -96,7 +86,7 @@ export function DataGridPage(props) {
96
86
  const gridHeight = states.height;
97
87
  if (gridHeight == null)
98
88
  return;
99
- return (React.createElement(DataGridEx, { autoLoad: false, height: gridHeight, loadData: localLoadData, mRef: refs, onUpdateRows: onUpdateRows, onInitLoad: onInitLoad, onScroll: onGridScroll, outerRef: (element) => {
89
+ return (React.createElement(DataGridEx, { autoLoad: false, height: gridHeight, loadData: localLoadData, mRef: refs, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onGridScroll, outerRef: (element) => {
100
90
  if (element != null)
101
91
  setStates({ element });
102
92
  }, ...rest }));
@@ -107,9 +97,7 @@ export function DataGridPage(props) {
107
97
  return;
108
98
  ref.reset({ data });
109
99
  }, [ref, data]);
110
- const f = typeof fields == "function"
111
- ? fields(JSON.parse((_b = sessionStorage.getItem(`${cacheKey}-searchbar`)) !== null && _b !== void 0 ? _b : "{}"))
112
- : fields;
100
+ const f = typeof fields == "function" ? fields(searchData !== null && searchData !== void 0 ? searchData : {}) : fields;
113
101
  // Layout
114
102
  return (React.createElement(CommonPage, { ...pageProps, scrollContainer: states.element },
115
103
  React.createElement(Stack, null,
package/lib/pages/FixedListPage.js CHANGED
@@ -1,17 +1,18 @@
1
- import { GridDataGet, useCombinedRefs, useDimensions } from "@etsoo/react";
1
+ import { useCombinedRefs, useDimensions } from "@etsoo/react";
2
2
  import { Box, Stack } from "@mui/material";
3
3
  import React from "react";
4
4
  import { MUGlobal } from "../MUGlobal";
5
5
  import { ScrollerListEx } from "../ScrollerListEx";
6
6
  import { SearchBar } from "../SearchBar";
7
7
  import { CommonPage } from "./CommonPage";
8
+ import { GridUtils } from "../GridUtils";
8
9
  /**
9
10
  * Fixed height list page
10
11
  * @param props Props
11
12
  * @returns Component
12
13
  */
13
14
  export function FixedListPage(props) {
14
- var _a, _b;
15
+ var _a;
15
16
  // Destruct
16
17
  const { adjustHeight, fields, fieldTemplate, loadData, mRef, sizeReadyMiliseconds = 0, pageProps = {}, cacheKey, cacheMinutes = 120, ...rest } = props;
17
18
  (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
@@ -39,30 +40,19 @@ export function FixedListPage(props) {
39
40
  reset();
40
41
  };
41
42
  const localLoadData = (props) => {
42
- const data = GridDataGet(props, fieldTemplate);
43
- if (cacheKey)
44
- sessionStorage.setItem(`${cacheKey}-searchbar`, JSON.stringify(data));
45
- return loadData(data);
46
- };
47
- const onUpdateRows = (rows, state) => {
48
- if (state.currentPage > 0 && cacheKey) {
49
- const data = { rows, state, creation: new Date().valueOf() };
50
- sessionStorage.setItem(cacheKey, JSON.stringify(data));
51
- }
43
+ return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey));
52
44
  };
45
+ // Search data
46
+ const searchData = GridUtils.getSearchData(cacheKey);
53
47
  const onInitLoad = (ref) => {
54
48
  // Avoid repeatedly load from cache
55
49
  if (initLoadedRef.current || !cacheKey)
56
50
  return undefined;
57
51
  // Cache data
58
- const cacheData = sessionStorage.getItem(cacheKey);
52
+ const cacheData = GridUtils.getCacheData(cacheKey, cacheMinutes);
59
53
  if (cacheData) {
60
- const { rows, state, creation } = JSON.parse(cacheData);
61
- // 120 minutes
62
- if (new Date().valueOf() - creation > cacheMinutes * 60000) {
63
- sessionStorage.removeItem(cacheKey);
64
- return undefined;
65
- }
54
+ const { rows, state } = cacheData;
55
+ GridUtils.mergeSearchData(state, searchData);
66
56
  // Scroll position
67
57
  const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
68
58
  if (scrollData) {
@@ -93,15 +83,13 @@ export function FixedListPage(props) {
93
83
  return (React.createElement(Box, { id: "list-container", sx: {
94
84
  height: height + "px"
95
85
  } },
96
- React.createElement(ScrollerListEx, { autoLoad: false, height: height, loadData: localLoadData, mRef: refs, onUpdateRows: onUpdateRows, onInitLoad: onInitLoad, onScroll: onListScroll, oRef: (element) => {
86
+ React.createElement(ScrollerListEx, { autoLoad: false, height: height, loadData: localLoadData, mRef: refs, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, oRef: (element) => {
97
87
  if (element != null)
98
88
  updateScrollContainer(element);
99
89
  }, ...rest })));
100
90
  }
101
91
  }, [rect]);
102
- const f = typeof fields == "function"
103
- ? fields(JSON.parse((_b = sessionStorage.getItem(`${cacheKey}-searchbar`)) !== null && _b !== void 0 ? _b : "{}"))
104
- : fields;
92
+ const f = typeof fields == "function" ? fields(searchData !== null && searchData !== void 0 ? searchData : {}) : fields;
105
93
  const { paddings, ...pageRest } = pageProps;
106
94
  // Layout
107
95
  return (React.createElement(CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer },
package/lib/pages/ListPage.js CHANGED
@@ -1,17 +1,18 @@
1
- import { GridDataGet, useCombinedRefs } from "@etsoo/react";
1
+ import { useCombinedRefs } from "@etsoo/react";
2
2
  import { Box, Stack } from "@mui/material";
3
3
  import React from "react";
4
4
  import { MUGlobal } from "../MUGlobal";
5
5
  import { ScrollerListEx } from "../ScrollerListEx";
6
6
  import { SearchBar } from "../SearchBar";
7
7
  import { CommonPage, CommonPageScrollContainer } from "./CommonPage";
8
+ import { GridUtils } from "../GridUtils";
8
9
  /**
9
10
  * List page
10
11
  * @param props Props
11
12
  * @returns Component
12
13
  */
13
14
  export function ListPage(props) {
14
- var _a, _b;
15
+ var _a;
15
16
  // Destruct
16
17
  const { fields, fieldTemplate, loadData, mRef, pageProps = {}, cacheKey, cacheMinutes = 120, ...rest } = props;
17
18
  (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
@@ -37,28 +38,19 @@ export function ListPage(props) {
37
38
  reset();
38
39
  };
39
40
  const localLoadData = (props) => {
40
- const data = GridDataGet(props, fieldTemplate);
41
- return loadData(data);
42
- };
43
- const onUpdateRows = (rows, state) => {
44
- if (state.currentPage > 0 && cacheKey) {
45
- const data = { rows, state, creation: new Date().valueOf() };
46
- sessionStorage.setItem(cacheKey, JSON.stringify(data));
47
- }
41
+ return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey));
48
42
  };
43
+ // Search data
44
+ const searchData = GridUtils.getSearchData(cacheKey);
49
45
  const onInitLoad = (ref) => {
50
46
  // Avoid repeatedly load from cache
51
47
  if (initLoadedRef.current || !cacheKey)
52
48
  return undefined;
53
49
  // Cache data
54
- const cacheData = sessionStorage.getItem(cacheKey);
50
+ const cacheData = GridUtils.getCacheData(cacheKey, cacheMinutes);
55
51
  if (cacheData) {
56
- const { rows, state, creation } = JSON.parse(cacheData);
57
- // 120 minutes
58
- if (new Date().valueOf() - creation > cacheMinutes * 60000) {
59
- sessionStorage.removeItem(cacheKey);
60
- return undefined;
61
- }
52
+ const { rows, state } = cacheData;
53
+ GridUtils.mergeSearchData(state, searchData);
62
54
  // Scroll position
63
55
  const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
64
56
  if (scrollData) {
@@ -77,9 +69,7 @@ export function ListPage(props) {
77
69
  return;
78
70
  sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
79
71
  };
80
- const f = typeof fields == "function"
81
- ? fields(JSON.parse((_b = sessionStorage.getItem(`${cacheKey}-searchbar`)) !== null && _b !== void 0 ? _b : "{}"))
82
- : fields;
72
+ const f = typeof fields == "function" ? fields(searchData !== null && searchData !== void 0 ? searchData : {}) : fields;
83
73
  // Layout
84
74
  return (React.createElement(CommonPage, { ...pageProps, scrollContainer: CommonPageScrollContainer },
85
75
  React.createElement(Stack, null,
@@ -87,5 +77,5 @@ export function ListPage(props) {
87
77
  paddingBottom: pageProps.paddings
88
78
  } },
89
79
  React.createElement(SearchBar, { fields: f, onSubmit: onSubmit })),
90
- React.createElement(ScrollerListEx, { autoLoad: false, loadData: localLoadData, onUpdateRows: onUpdateRows, onInitLoad: onInitLoad, onScroll: onListScroll, mRef: refs, ...rest }))));
80
+ React.createElement(ScrollerListEx, { autoLoad: false, loadData: localLoadData, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, mRef: refs, ...rest }))));
91
81
  }
package/lib/pages/TablePage.js CHANGED
@@ -1,17 +1,18 @@
1
- import { GridDataGet, useCombinedRefs, useDimensions } from "@etsoo/react";
1
+ import { useCombinedRefs, useDimensions } from "@etsoo/react";
2
2
  import { Box, Stack } from "@mui/material";
3
3
  import React from "react";
4
4
  import { MUGlobal } from "../MUGlobal";
5
5
  import { SearchBar } from "../SearchBar";
6
6
  import { TableEx, TableExMinWidth } from "../TableEx";
7
7
  import { CommonPage, CommonPageScrollContainer } from "./CommonPage";
8
+ import { GridUtils } from "../GridUtils";
8
9
  /**
9
10
  * Table page
10
11
  * @param props Props
11
12
  * @returns Component
12
13
  */
13
14
  export function TablePage(props) {
14
- var _a, _b;
15
+ var _a;
15
16
  // Destruct
16
17
  const { columns, fields, fieldTemplate, loadData, mRef, sizeReadyMiliseconds = 0, pageProps = {}, cacheKey, cacheMinutes = 120, ...rest } = props;
17
18
  (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
@@ -36,11 +37,10 @@ export function TablePage(props) {
36
37
  reset();
37
38
  };
38
39
  const localLoadData = (props) => {
39
- const data = GridDataGet(props, fieldTemplate);
40
- if (cacheKey)
41
- sessionStorage.setItem(`${cacheKey}-searchbar`, JSON.stringify(data));
42
- return loadData(data);
40
+ return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey));
43
41
  };
42
+ // Search data
43
+ const searchData = GridUtils.getSearchData(cacheKey);
44
44
  // Total width
45
45
  const totalWidth = React.useMemo(() => columns.reduce((previousValue, { width, minWidth }) => {
46
46
  var _a;
@@ -59,9 +59,7 @@ export function TablePage(props) {
59
59
  return (React.createElement(TableEx, { autoLoad: false, columns: columns, loadData: localLoadData, maxHeight: maxHeight, mRef: refs, ...rest }));
60
60
  }
61
61
  }, [rect]);
62
- const f = typeof fields == "function"
63
- ? fields(JSON.parse((_b = sessionStorage.getItem(`${cacheKey}-searchbar`)) !== null && _b !== void 0 ? _b : "{}"))
64
- : fields;
62
+ const f = typeof fields == "function" ? fields(searchData !== null && searchData !== void 0 ? searchData : {}) : fields;
65
63
  // Layout
66
64
  return (React.createElement(CommonPage, { ...pageProps, scrollContainer: CommonPageScrollContainer },
67
65
  React.createElement(Stack, null,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.2.43",
3
+ "version": "1.2.44",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -52,7 +52,7 @@
52
52
  "@emotion/styled": "^11.11.0",
53
53
  "@etsoo/appscript": "^1.4.8",
54
54
  "@etsoo/notificationbase": "^1.1.25",
55
- "@etsoo/react": "^1.6.84",
55
+ "@etsoo/react": "^1.6.85",
56
56
  "@etsoo/shared": "^1.2.5",
57
57
  "@mui/icons-material": "^5.11.16",
58
58
  "@mui/material": "^5.13.0",
package/src/GridUtils.ts ADDED
@@ -0,0 +1,99 @@
1
+ import {
2
+ GridDataGetData,
3
+ GridLoadDataProps,
4
+ GridLoaderStates
5
+ } from "@etsoo/react";
6
+ import { DataTypes } from "@etsoo/shared";
7
+ import { GridDataCacheType } from "./GridDataCacheType";
8
+
9
+ /**
10
+ * Grid utilities
11
+ */
12
+ export namespace GridUtils {
13
+ /**
14
+ * Create data loader
15
+ * @param props Props
16
+ * @param template Field template
17
+ * @param cacheKey Cache key
18
+ * @returns Request data
19
+ */
20
+ export function createLoader<F extends DataTypes.BasicTemplate>(
21
+ props: GridLoadDataProps,
22
+ template?: F,
23
+ cacheKey?: string
24
+ ) {
25
+ const { data, ...rest } = props;
26
+ const formData = GridDataGetData(data, template);
27
+
28
+ if (cacheKey)
29
+ sessionStorage.setItem(`${cacheKey}-searchbar`, JSON.stringify(formData));
30
+
31
+ return { ...formData, ...rest };
32
+ }
33
+
34
+ /**
35
+ * Get cache data
36
+ * @param cacheKey Cache key
37
+ * @param cacheMinutes Cache minutes
38
+ * @returns
39
+ */
40
+ export function getCacheData<T>(cacheKey: string, cacheMinutes: number) {
41
+ const cacheSource = sessionStorage.getItem(cacheKey);
42
+ if (cacheSource) {
43
+ const cacheData = JSON.parse(cacheSource) as GridDataCacheType<T>;
44
+ if (new Date().valueOf() - cacheData.creation > cacheMinutes * 60000) {
45
+ sessionStorage.removeItem(cacheKey);
46
+ return;
47
+ }
48
+ return cacheData;
49
+ }
50
+ }
51
+
52
+ /**
53
+ * Get search data
54
+ * @param cacheKey Cache key
55
+ * @returns Result
56
+ */
57
+ export function getSearchData<F extends DataTypes.BasicTemplate>(
58
+ cacheKey?: string
59
+ ) {
60
+ if (cacheKey) {
61
+ const data = sessionStorage.getItem(`${cacheKey}-searchbar`);
62
+ if (data) {
63
+ return JSON.parse(data) as DataTypes.BasicTemplateType<F>;
64
+ }
65
+ }
66
+ }
67
+
68
+ /**
69
+ * Get update rows handler
70
+ * @param cacheKey Cache key
71
+ * @returns Handler
72
+ */
73
+ export function getUpdateRowsHandler<T extends object>(cacheKey?: string) {
74
+ return (rows: T[], state: GridLoaderStates<T>) => {
75
+ if (state.currentPage > 0 && cacheKey) {
76
+ const data: GridDataCacheType<T> = {
77
+ rows,
78
+ state,
79
+ creation: new Date().valueOf()
80
+ };
81
+ sessionStorage.setItem(cacheKey, JSON.stringify(data));
82
+ }
83
+ };
84
+ }
85
+
86
+ /**
87
+ * Merget search date to state
88
+ * @param state State
89
+ * @param searchData Search data
90
+ */
91
+ export function mergeSearchData<T, F extends DataTypes.BasicTemplate>(
92
+ state: GridLoaderStates<T>,
93
+ searchData?: DataTypes.BasicTemplateType<F>
94
+ ) {
95
+ if (searchData == null) return;
96
+ state.data ??= {};
97
+ Object.assign(state.data, searchData);
98
+ }
99
+ }
package/src/ResponsibleContainer.tsx CHANGED
@@ -9,7 +9,6 @@ import {
9
9
  } from "react-window";
10
10
  import {
11
11
  GridColumn,
12
- GridDataGet,
13
12
  GridJsonData,
14
13
  GridLoadDataProps,
15
14
  GridLoaderStates,
@@ -33,7 +32,7 @@ import {
33
32
  } from "./ScrollerListEx";
34
33
  import { SearchBar } from "./SearchBar";
35
34
  import { Labels } from "./app/Labels";
36
- import { GridDataCacheType } from "./GridDataCacheType";
35
+ import { GridUtils } from "./GridUtils";
37
36
 
38
37
  /**
39
38
  * ResponsibleContainer props
@@ -242,14 +241,12 @@ export function ResponsibleContainer<
242
241
  // Load data
243
242
  const localLoadData = (props: GridLoadDataProps) => {
244
243
  state.mounted = true;
245
- const data = GridDataGet(props, fieldTemplate);
246
-
247
- if (cacheKey)
248
- sessionStorage.setItem(`${cacheKey}-searchbar`, JSON.stringify(data));
249
-
250
- return loadData(data);
244
+ return loadData(GridUtils.createLoader<F>(props, fieldTemplate, cacheKey));
251
245
  };
252
246
 
247
+ // Search data
248
+ const searchData = GridUtils.getSearchData<F>(cacheKey);
249
+
253
250
  // On submit callback
254
251
  const onSubmit = (data: FormData, _reset: boolean) => {
255
252
  if (data == null || state.ref == null) return;
@@ -284,15 +281,6 @@ export function ResponsibleContainer<
284
281
  }
285
282
  );
286
283
 
287
- type DataType = GridDataCacheType<T>;
288
-
289
- const onUpdateRows = (rows: T[], state: GridLoaderStates<T>) => {
290
- if (state.currentPage > 0 && cacheKey) {
291
- const data: DataType = { rows, state, creation: new Date().valueOf() };
292
- sessionStorage.setItem(cacheKey, JSON.stringify(data));
293
- }
294
- };
295
-
296
284
  const onInitLoad = (
297
285
  ref: VariableSizeGrid<T> | ScrollerListRef
298
286
  ): [T[], Partial<GridLoaderStates<T>>?] | null | undefined => {
@@ -300,15 +288,11 @@ export function ResponsibleContainer<
300
288
  if (refs.current.initLoaded || !cacheKey) return undefined;
301
289
 
302
290
  // Cache data
303
- const cacheData = sessionStorage.getItem(cacheKey);
291
+ const cacheData = GridUtils.getCacheData<T>(cacheKey, cacheMinutes);
304
292
  if (cacheData) {
305
- const { rows, state, creation } = JSON.parse(cacheData) as DataType;
293
+ const { rows, state } = cacheData;
306
294
 
307
- // 120 minutes
308
- if (new Date().valueOf() - creation > cacheMinutes * 60000) {
309
- sessionStorage.removeItem(cacheKey);
310
- return undefined;
311
- }
295
+ GridUtils.mergeSearchData(state, searchData);
312
296
 
313
297
  // Scroll position
314
298
  const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
@@ -399,7 +383,7 @@ export function ResponsibleContainer<
399
383
  }}
400
384
  onScroll={onGridScroll}
401
385
  columns={columns}
402
- onUpdateRows={onUpdateRows}
386
+ onUpdateRows={GridUtils.getUpdateRowsHandler<T>(cacheKey)}
403
387
  onInitLoad={onInitLoad}
404
388
  {...rest}
405
389
  />
@@ -424,7 +408,7 @@ export function ResponsibleContainer<
424
408
  autoLoad={!hasFields}
425
409
  height={heightLocal}
426
410
  loadData={localLoadData}
427
- onUpdateRows={onUpdateRows}
411
+ onUpdateRows={GridUtils.getUpdateRowsHandler<T>(cacheKey)}
428
412
  onInitLoad={onInitLoad}
429
413
  mRef={mRefs}
430
414
  onClick={(event, data) =>
@@ -444,14 +428,7 @@ export function ResponsibleContainer<
444
428
  const searchBar = React.useMemo(() => {
445
429
  if (!hasFields || showDataGrid == null) return;
446
430
 
447
- const f =
448
- typeof fields == "function"
449
- ? fields(
450
- JSON.parse(
451
- sessionStorage.getItem(`${cacheKey}-searchbar`) ?? "{}"
452
- ) as DataTypes.BasicTemplateType<F>
453
- )
454
- : fields;
431
+ const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
455
432
 
456
433
  return (
457
434
  <SearchBar
package/src/pages/DataGridPage.tsx CHANGED
@@ -1,5 +1,4 @@
1
1
  import {
2
- GridDataGet,
3
2
  GridLoadDataProps,
4
3
  GridLoaderStates,
5
4
  GridOnScrollProps,
@@ -16,7 +15,7 @@ import { MUGlobal } from "../MUGlobal";
16
15
  import { SearchBar } from "../SearchBar";
17
16
  import { CommonPage } from "./CommonPage";
18
17
  import { DataGridPageProps } from "./DataGridPageProps";
19
- import { GridDataCacheType } from "../GridDataCacheType";
18
+ import { GridUtils } from "../GridUtils";
20
19
 
21
20
  interface LocalStates<T> {
22
21
  data?: FormData;
@@ -79,22 +78,11 @@ export function DataGridPage<
79
78
  };
80
79
 
81
80
  const localLoadData = (props: GridLoadDataProps) => {
82
- const data = GridDataGet(props, fieldTemplate);
83
-
84
- if (cacheKey)
85
- sessionStorage.setItem(`${cacheKey}-searchbar`, JSON.stringify(data));
86
-
87
- return loadData(data);
81
+ return loadData(GridUtils.createLoader<F>(props, fieldTemplate, cacheKey));
88
82
  };
89
83
 
90
- type DataType = GridDataCacheType<T>;
91
-
92
- const onUpdateRows = (rows: T[], state: GridLoaderStates<T>) => {
93
- if (state.currentPage > 0 && cacheKey) {
94
- const data: DataType = { rows, state, creation: new Date().valueOf() };
95
- sessionStorage.setItem(cacheKey, JSON.stringify(data));
96
- }
97
- };
84
+ // Search data
85
+ const searchData = GridUtils.getSearchData<F>(cacheKey);
98
86
 
99
87
  const onInitLoad = (
100
88
  ref: VariableSizeGrid<T>
@@ -103,15 +91,11 @@ export function DataGridPage<
103
91
  if (initLoadedRef.current || !cacheKey) return undefined;
104
92
 
105
93
  // Cache data
106
- const cacheData = sessionStorage.getItem(cacheKey);
94
+ const cacheData = GridUtils.getCacheData<T>(cacheKey, cacheMinutes);
107
95
  if (cacheData) {
108
- const { rows, state, creation } = JSON.parse(cacheData) as DataType;
96
+ const { rows, state } = cacheData;
109
97
 
110
- // 120 minutes
111
- if (new Date().valueOf() - creation > cacheMinutes * 60000) {
112
- sessionStorage.removeItem(cacheKey);
113
- return undefined;
114
- }
98
+ GridUtils.mergeSearchData(state, searchData);
115
99
 
116
100
  // Scroll position
117
101
  const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
@@ -168,7 +152,7 @@ export function DataGridPage<
168
152
  height={gridHeight}
169
153
  loadData={localLoadData}
170
154
  mRef={refs}
171
- onUpdateRows={onUpdateRows}
155
+ onUpdateRows={GridUtils.getUpdateRowsHandler<T>(cacheKey)}
172
156
  onInitLoad={onInitLoad}
173
157
  onScroll={onGridScroll}
174
158
  outerRef={(element?: HTMLDivElement) => {
@@ -185,14 +169,7 @@ export function DataGridPage<
185
169
  ref.reset({ data });
186
170
  }, [ref, data]);
187
171
 
188
- const f =
189
- typeof fields == "function"
190
- ? fields(
191
- JSON.parse(
192
- sessionStorage.getItem(`${cacheKey}-searchbar`) ?? "{}"
193
- ) as DataTypes.BasicTemplateType<F>
194
- )
195
- : fields;
172
+ const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
196
173
 
197
174
  // Layout
198
175
  return (
package/src/pages/FixedListPage.tsx CHANGED
@@ -1,5 +1,4 @@
1
1
  import {
2
- GridDataGet,
3
2
  GridLoadDataProps,
4
3
  GridLoaderStates,
5
4
  ListOnScrollProps,
@@ -16,7 +15,7 @@ import { ScrollerListEx } from "../ScrollerListEx";
16
15
  import { SearchBar } from "../SearchBar";
17
16
  import { CommonPage } from "./CommonPage";
18
17
  import { ListPageProps } from "./ListPageProps";
19
- import { GridDataCacheType } from "../GridDataCacheType";
18
+ import { GridUtils } from "../GridUtils";
20
19
 
21
20
  /**
22
21
  * Fixed height list page
@@ -91,22 +90,11 @@ export function FixedListPage<
91
90
  };
92
91
 
93
92
  const localLoadData = (props: GridLoadDataProps) => {
94
- const data = GridDataGet(props, fieldTemplate);
95
-
96
- if (cacheKey)
97
- sessionStorage.setItem(`${cacheKey}-searchbar`, JSON.stringify(data));
98
-
99
- return loadData(data);
93
+ return loadData(GridUtils.createLoader<F>(props, fieldTemplate, cacheKey));
100
94
  };
101
95
 
102
- type DataType = GridDataCacheType<T>;
103
-
104
- const onUpdateRows = (rows: T[], state: GridLoaderStates<T>) => {
105
- if (state.currentPage > 0 && cacheKey) {
106
- const data: DataType = { rows, state, creation: new Date().valueOf() };
107
- sessionStorage.setItem(cacheKey, JSON.stringify(data));
108
- }
109
- };
96
+ // Search data
97
+ const searchData = GridUtils.getSearchData<F>(cacheKey);
110
98
 
111
99
  const onInitLoad = (
112
100
  ref: ScrollerListRef
@@ -115,15 +103,11 @@ export function FixedListPage<
115
103
  if (initLoadedRef.current || !cacheKey) return undefined;
116
104
 
117
105
  // Cache data
118
- const cacheData = sessionStorage.getItem(cacheKey);
106
+ const cacheData = GridUtils.getCacheData<T>(cacheKey, cacheMinutes);
119
107
  if (cacheData) {
120
- const { rows, state, creation } = JSON.parse(cacheData) as DataType;
108
+ const { rows, state } = cacheData;
121
109
 
122
- // 120 minutes
123
- if (new Date().valueOf() - creation > cacheMinutes * 60000) {
124
- sessionStorage.removeItem(cacheKey);
125
- return undefined;
126
- }
110
+ GridUtils.mergeSearchData(state, searchData);
127
111
 
128
112
  // Scroll position
129
113
  const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
@@ -170,7 +154,7 @@ export function FixedListPage<
170
154
  height={height}
171
155
  loadData={localLoadData}
172
156
  mRef={refs}
173
- onUpdateRows={onUpdateRows}
157
+ onUpdateRows={GridUtils.getUpdateRowsHandler<T>(cacheKey)}
174
158
  onInitLoad={onInitLoad}
175
159
  onScroll={onListScroll}
176
160
  oRef={(element) => {
@@ -183,14 +167,7 @@ export function FixedListPage<
183
167
  }
184
168
  }, [rect]);
185
169
 
186
- const f =
187
- typeof fields == "function"
188
- ? fields(
189
- JSON.parse(
190
- sessionStorage.getItem(`${cacheKey}-searchbar`) ?? "{}"
191
- ) as DataTypes.BasicTemplateType<F>
192
- )
193
- : fields;
170
+ const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
194
171
 
195
172
  const { paddings, ...pageRest } = pageProps;
196
173
 
package/src/pages/ListPage.tsx CHANGED
@@ -1,5 +1,4 @@
1
1
  import {
2
- GridDataGet,
3
2
  GridLoadDataProps,
4
3
  GridLoaderStates,
5
4
  ListOnScrollProps,
@@ -15,7 +14,7 @@ import { ScrollerListEx } from "../ScrollerListEx";
15
14
  import { SearchBar } from "../SearchBar";
16
15
  import { CommonPage, CommonPageScrollContainer } from "./CommonPage";
17
16
  import { ListPageProps } from "./ListPageProps";
18
- import { GridDataCacheType } from "../GridDataCacheType";
17
+ import { GridUtils } from "../GridUtils";
19
18
 
20
19
  /**
21
20
  * List page
@@ -71,18 +70,11 @@ export function ListPage<
71
70
  };
72
71
 
73
72
  const localLoadData = (props: GridLoadDataProps) => {
74
- const data = GridDataGet(props, fieldTemplate);
75
- return loadData(data);
73
+ return loadData(GridUtils.createLoader<F>(props, fieldTemplate, cacheKey));
76
74
  };
77
75
 
78
- type DataType = GridDataCacheType<T>;
79
-
80
- const onUpdateRows = (rows: T[], state: GridLoaderStates<T>) => {
81
- if (state.currentPage > 0 && cacheKey) {
82
- const data: DataType = { rows, state, creation: new Date().valueOf() };
83
- sessionStorage.setItem(cacheKey, JSON.stringify(data));
84
- }
85
- };
76
+ // Search data
77
+ const searchData = GridUtils.getSearchData<F>(cacheKey);
86
78
 
87
79
  const onInitLoad = (
88
80
  ref: ScrollerListRef
@@ -91,15 +83,11 @@ export function ListPage<
91
83
  if (initLoadedRef.current || !cacheKey) return undefined;
92
84
 
93
85
  // Cache data
94
- const cacheData = sessionStorage.getItem(cacheKey);
86
+ const cacheData = GridUtils.getCacheData<T>(cacheKey, cacheMinutes);
95
87
  if (cacheData) {
96
- const { rows, state, creation } = JSON.parse(cacheData) as DataType;
88
+ const { rows, state } = cacheData;
97
89
 
98
- // 120 minutes
99
- if (new Date().valueOf() - creation > cacheMinutes * 60000) {
100
- sessionStorage.removeItem(cacheKey);
101
- return undefined;
102
- }
90
+ GridUtils.mergeSearchData(state, searchData);
103
91
 
104
92
  // Scroll position
105
93
  const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
@@ -123,14 +111,7 @@ export function ListPage<
123
111
  sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
124
112
  };
125
113
 
126
- const f =
127
- typeof fields == "function"
128
- ? fields(
129
- JSON.parse(
130
- sessionStorage.getItem(`${cacheKey}-searchbar`) ?? "{}"
131
- ) as DataTypes.BasicTemplateType<F>
132
- )
133
- : fields;
114
+ const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
134
115
 
135
116
  // Layout
136
117
  return (
@@ -146,7 +127,7 @@ export function ListPage<
146
127
  <ScrollerListEx<T, D>
147
128
  autoLoad={false}
148
129
  loadData={localLoadData}
149
- onUpdateRows={onUpdateRows}
130
+ onUpdateRows={GridUtils.getUpdateRowsHandler<T>(cacheKey)}
150
131
  onInitLoad={onInitLoad}
151
132
  onScroll={onListScroll}
152
133
  mRef={refs}
package/src/pages/TablePage.tsx CHANGED
@@ -1,5 +1,4 @@
1
1
  import {
2
- GridDataGet,
3
2
  GridLoadDataProps,
4
3
  useCombinedRefs,
5
4
  useDimensions
@@ -12,6 +11,7 @@ import { SearchBar } from "../SearchBar";
12
11
  import { TableEx, TableExMethodRef, TableExMinWidth } from "../TableEx";
13
12
  import { CommonPage, CommonPageScrollContainer } from "./CommonPage";
14
13
  import { TablePageProps } from "./TablePageProps";
14
+ import { GridUtils } from "../GridUtils";
15
15
 
16
16
  /**
17
17
  * Table page
@@ -70,14 +70,12 @@ export function TablePage<
70
70
  };
71
71
 
72
72
  const localLoadData = (props: GridLoadDataProps) => {
73
- const data = GridDataGet(props, fieldTemplate);
74
-
75
- if (cacheKey)
76
- sessionStorage.setItem(`${cacheKey}-searchbar`, JSON.stringify(data));
77
-
78
- return loadData(data);
73
+ return loadData(GridUtils.createLoader<F>(props, fieldTemplate, cacheKey));
79
74
  };
80
75
 
76
+ // Search data
77
+ const searchData = GridUtils.getSearchData<F>(cacheKey);
78
+
81
79
  // Total width
82
80
  const totalWidth = React.useMemo(
83
81
  () =>
@@ -112,14 +110,7 @@ export function TablePage<
112
110
  }
113
111
  }, [rect]);
114
112
 
115
- const f =
116
- typeof fields == "function"
117
- ? fields(
118
- JSON.parse(
119
- sessionStorage.getItem(`${cacheKey}-searchbar`) ?? "{}"
120
- ) as DataTypes.BasicTemplateType<F>
121
- )
122
- : fields;
113
+ const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
123
114
 
124
115
  // Layout
125
116
  return (