@etsoo/materialui 1.5.47 → 1.5.48

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 (6) hide show
  1. package/lib/cjs/pages/ViewPage.d.ts +9 -0
  2. package/lib/cjs/pages/ViewPage.js +11 -1
  3. package/lib/mjs/pages/ViewPage.d.ts +9 -0
  4. package/lib/mjs/pages/ViewPage.js +10 -1
  5. package/package.json +2 -2
  6. package/src/pages/ViewPage.tsx +31 -13
package/lib/cjs/pages/ViewPage.d.ts CHANGED
@@ -3,6 +3,15 @@ import React from "react";
3
3
  import { CommonPageProps } from "./CommonPage";
4
4
  import type { OperationMessageHandlerAll } from "../messages/OperationMessageHandler";
5
5
  import { ViewContainerProps } from "../ViewContainer";
6
+ import { StackProps } from "@mui/material/Stack";
7
+ /**
8
+ * View page action bar
9
+ * @param props Props
10
+ * @returns Component
11
+ */
12
+ export declare function ViewPageActionBar(props: StackProps & {
13
+ actionPaddings?: number | Record<string, string | number>;
14
+ }): import("react/jsx-runtime").JSX.Element;
6
15
  /**
7
16
  * View page props
8
17
  */
package/lib/cjs/pages/ViewPage.js CHANGED
@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.ViewPageActionBar = ViewPageActionBar;
6
7
  exports.ViewPage = ViewPage;
7
8
  const jsx_runtime_1 = require("react/jsx-runtime");
8
9
  const react_1 = require("@etsoo/react");
@@ -17,6 +18,15 @@ const OperationMessageContainer_1 = require("../messages/OperationMessageContain
17
18
  const ViewContainer_1 = require("../ViewContainer");
18
19
  const LinearProgress_1 = __importDefault(require("@mui/material/LinearProgress"));
19
20
  const Stack_1 = __importDefault(require("@mui/material/Stack"));
21
+ /**
22
+ * View page action bar
23
+ * @param props Props
24
+ * @returns Component
25
+ */
26
+ function ViewPageActionBar(props) {
27
+ const { actionPaddings = MUGlobal_1.MUGlobal.pagePaddings, ...rest } = props;
28
+ return ((0, jsx_runtime_1.jsx)(Stack_1.default, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "center", paddingTop: actionPaddings, paddingBottom: actionPaddings, gap: actionPaddings, ...rest }));
29
+ }
20
30
  /**
21
31
  * View page
22
32
  * @param props Props
@@ -51,7 +61,7 @@ function ViewPage(props) {
51
61
  refresh,
52
62
  operationMessageHandler.id
53
63
  ]
54
- : operationMessageHandler })), titleBar && titleBar(data), (0, jsx_runtime_1.jsx)(ViewContainer_1.ViewContainer, { data: data, fields: fields, gridRef: gridRef, leftContainer: leftContainer, leftContainerLines: leftContainerLines, leftContainerProps: leftContainerProps, refresh: refresh, spacing: spacing }), actions !== null && ((0, jsx_runtime_1.jsx)(Stack_1.default, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "center", paddingTop: actions == null ? undefined : actionPaddings, paddingBottom: actionPaddings, gap: actionPaddings, children: actions != null && shared_1.Utils.getResult(actions, data, refresh) })), shared_1.Utils.getResult(children, data, refresh), pullToRefresh && ((0, jsx_runtime_1.jsx)(PullToRefreshUI_1.PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: refresh, shouldPullToRefresh: () => {
64
+ : operationMessageHandler })), titleBar && titleBar(data), (0, jsx_runtime_1.jsx)(ViewContainer_1.ViewContainer, { data: data, fields: fields, gridRef: gridRef, leftContainer: leftContainer, leftContainerLines: leftContainerLines, leftContainerProps: leftContainerProps, refresh: refresh, spacing: spacing }), actions !== null && ((0, jsx_runtime_1.jsx)(ViewPageActionBar, { actionPaddings: actionPaddings, children: shared_1.Utils.getResult(actions, data, refresh) })), shared_1.Utils.getResult(children, data, refresh), pullToRefresh && ((0, jsx_runtime_1.jsx)(PullToRefreshUI_1.PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: refresh, shouldPullToRefresh: () => {
55
65
  const container = document.querySelector(pullContainer);
56
66
  return !container?.scrollTop;
57
67
  } })), (0, jsx_runtime_1.jsx)(react_1.ScrollRestoration, {})] })) }));
package/lib/mjs/pages/ViewPage.d.ts CHANGED
@@ -3,6 +3,15 @@ import React from "react";
3
3
  import { CommonPageProps } from "./CommonPage";
4
4
  import type { OperationMessageHandlerAll } from "../messages/OperationMessageHandler";
5
5
  import { ViewContainerProps } from "../ViewContainer";
6
+ import { StackProps } from "@mui/material/Stack";
7
+ /**
8
+ * View page action bar
9
+ * @param props Props
10
+ * @returns Component
11
+ */
12
+ export declare function ViewPageActionBar(props: StackProps & {
13
+ actionPaddings?: number | Record<string, string | number>;
14
+ }): import("react/jsx-runtime").JSX.Element;
6
15
  /**
7
16
  * View page props
8
17
  */
package/lib/mjs/pages/ViewPage.js CHANGED
@@ -11,6 +11,15 @@ import { OperationMessageContainer } from "../messages/OperationMessageContainer
11
11
  import { ViewContainer } from "../ViewContainer";
12
12
  import LinearProgress from "@mui/material/LinearProgress";
13
13
  import Stack from "@mui/material/Stack";
14
+ /**
15
+ * View page action bar
16
+ * @param props Props
17
+ * @returns Component
18
+ */
19
+ export function ViewPageActionBar(props) {
20
+ const { actionPaddings = MUGlobal.pagePaddings, ...rest } = props;
21
+ return (_jsx(Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "center", paddingTop: actionPaddings, paddingBottom: actionPaddings, gap: actionPaddings, ...rest }));
22
+ }
14
23
  /**
15
24
  * View page
16
25
  * @param props Props
@@ -45,7 +54,7 @@ export function ViewPage(props) {
45
54
  refresh,
46
55
  operationMessageHandler.id
47
56
  ]
48
- : operationMessageHandler })), titleBar && titleBar(data), _jsx(ViewContainer, { data: data, fields: fields, gridRef: gridRef, leftContainer: leftContainer, leftContainerLines: leftContainerLines, leftContainerProps: leftContainerProps, refresh: refresh, spacing: spacing }), actions !== null && (_jsx(Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "center", paddingTop: actions == null ? undefined : actionPaddings, paddingBottom: actionPaddings, gap: actionPaddings, children: actions != null && Utils.getResult(actions, data, refresh) })), Utils.getResult(children, data, refresh), pullToRefresh && (_jsx(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: refresh, shouldPullToRefresh: () => {
57
+ : operationMessageHandler })), titleBar && titleBar(data), _jsx(ViewContainer, { data: data, fields: fields, gridRef: gridRef, leftContainer: leftContainer, leftContainerLines: leftContainerLines, leftContainerProps: leftContainerProps, refresh: refresh, spacing: spacing }), actions !== null && (_jsx(ViewPageActionBar, { actionPaddings: actionPaddings, children: Utils.getResult(actions, data, refresh) })), Utils.getResult(children, data, refresh), pullToRefresh && (_jsx(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: refresh, shouldPullToRefresh: () => {
49
58
  const container = document.querySelector(pullContainer);
50
59
  return !container?.scrollTop;
51
60
  } })), _jsx(ScrollRestoration, {})] })) }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.5.47",
3
+ "version": "1.5.48",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/mjs/index.js",
@@ -46,7 +46,7 @@
46
46
  "@etsoo/shared": "^1.2.72",
47
47
  "@mui/icons-material": "^7.1.0",
48
48
  "@mui/material": "^7.1.0",
49
- "@mui/x-data-grid": "^8.3.0",
49
+ "@mui/x-data-grid": "^8.3.1",
50
50
  "chart.js": "^4.4.9",
51
51
  "chartjs-plugin-datalabels": "^2.2.0",
52
52
  "dompurify": "^3.2.5",
package/src/pages/ViewPage.tsx CHANGED
@@ -11,7 +11,34 @@ import type { RefreshHandler } from "../messages/RefreshHandler";
11
11
  import { OperationMessageContainer } from "../messages/OperationMessageContainer";
12
12
  import { ViewContainer, ViewContainerProps } from "../ViewContainer";
13
13
  import LinearProgress from "@mui/material/LinearProgress";
14
- import Stack from "@mui/material/Stack";
14
+ import Stack, { StackProps } from "@mui/material/Stack";
15
+
16
+ /**
17
+ * View page action bar
18
+ * @param props Props
19
+ * @returns Component
20
+ */
21
+ export function ViewPageActionBar(
22
+ props: StackProps & {
23
+ actionPaddings?: number | Record<string, string | number>;
24
+ }
25
+ ) {
26
+ const { actionPaddings = MUGlobal.pagePaddings, ...rest } = props;
27
+
28
+ return (
29
+ <Stack
30
+ className="ET-ViewPage-Actions"
31
+ direction="row"
32
+ width="100%"
33
+ flexWrap="wrap"
34
+ justifyContent="center"
35
+ paddingTop={actionPaddings}
36
+ paddingBottom={actionPaddings}
37
+ gap={actionPaddings}
38
+ {...rest}
39
+ ></Stack>
40
+ );
41
+ }
15
42
 
16
43
  /**
17
44
  * View page props
@@ -166,18 +193,9 @@ export function ViewPage<T extends DataTypes.StringRecord>(
166
193
  spacing={spacing}
167
194
  />
168
195
  {actions !== null && (
169
- <Stack
170
- className="ET-ViewPage-Actions"
171
- direction="row"
172
- width="100%"
173
- flexWrap="wrap"
174
- justifyContent="center"
175
- paddingTop={actions == null ? undefined : actionPaddings}
176
- paddingBottom={actionPaddings}
177
- gap={actionPaddings}
178
- >
179
- {actions != null && Utils.getResult(actions, data, refresh)}
180
- </Stack>
196
+ <ViewPageActionBar actionPaddings={actionPaddings}>
197
+ {Utils.getResult(actions, data, refresh)}
198
+ </ViewPageActionBar>
181
199
  )}
182
200
  {Utils.getResult(children, data, refresh)}
183
201
  {pullToRefresh && (