@etsoo/react 1.4.64 → 1.4.69

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.
@@ -31,7 +31,15 @@ declare type ViewPageFieldType<T> = (string & keyof T) | [string & keyof T, Grid
31
31
  /**
32
32
  * View page props
33
33
  */
34
- export interface ViewPageProps<T extends {}> extends CommonPageProps {
34
+ export interface ViewPageProps<T extends {}> extends Exclude<CommonPageProps, 'children'> {
35
+ /**
36
+ * Actions
37
+ */
38
+ actions?: React.ReactNode | ((data: T) => React.ReactNode);
39
+ /**
40
+ * Children
41
+ */
42
+ children?: React.ReactNode | ((data: T) => React.ReactNode);
35
43
  /**
36
44
  * Fields to display
37
45
  */
@@ -1,4 +1,5 @@
1
- import { Grid, LinearProgress, Typography } from '@mui/material';
1
+ import { Utils } from '@etsoo/shared';
2
+ import { Grid, LinearProgress, Stack, Typography } from '@mui/material';
2
3
  import React from 'react';
3
4
  import { globalApp } from '../../app/ReactApp';
4
5
  import { GridDataFormat } from '../GridDataFormat';
@@ -58,7 +59,7 @@ function getItemField(field, data) {
58
59
  */
59
60
  export function ViewPage(props) {
60
61
  // Destruct
61
- const { children, fields, loadData, paddings = MUGlobal.pagePaddings, supportRefresh = true, ...rest } = props;
62
+ const { actions, children, fields, loadData, paddings = MUGlobal.pagePaddings, supportRefresh = true, ...rest } = props;
62
63
  // Data
63
64
  const [data, setData] = React.useState();
64
65
  // Load data
@@ -70,7 +71,9 @@ export function ViewPage(props) {
70
71
  };
71
72
  return (React.createElement(CommonPage, { paddings: paddings, onRefresh: supportRefresh ? onRefresh : undefined, onUpdate: supportRefresh ? undefined : onRefresh, ...rest, scrollContainer: global }, data == null ? (React.createElement(LinearProgress, null)) : (React.createElement(React.Fragment, null,
72
73
  React.createElement(Grid, { container: true, justifyContent: "left", spacing: paddings, sx: {
73
- '.MuiTypography-subtitle2': { fontWeight: 'bold' }
74
+ '.MuiTypography-subtitle2': {
75
+ fontWeight: 'bold'
76
+ }
74
77
  } }, fields.map((field, index) => {
75
78
  // Get data
76
79
  const [itemData, itemLabel, gridProps] = getItemField(field, data);
@@ -83,5 +86,6 @@ export function ViewPage(props) {
83
86
  ":"),
84
87
  React.createElement(Typography, { variant: "subtitle2" }, itemData)));
85
88
  })),
86
- children))));
89
+ actions != null && (React.createElement(Stack, { direction: "row", width: "100%", flexWrap: "wrap", paddingTop: paddings, paddingBottom: paddings }, Utils.getResult(actions, data))),
90
+ Utils.getResult(children, data)))));
87
91
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/react",
3
- "version": "1.4.64",
3
+ "version": "1.4.69",
4
4
  "description": "TypeScript ReactJs framework",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -53,8 +53,8 @@
53
53
  "@etsoo/appscript": "^1.2.27",
54
54
  "@etsoo/notificationbase": "^1.1.0",
55
55
  "@etsoo/shared": "^1.1.6",
56
- "@mui/icons-material": "^5.3.0",
57
- "@mui/material": "^5.3.0",
56
+ "@mui/icons-material": "^5.3.1",
57
+ "@mui/material": "^5.3.1",
58
58
  "@reach/router": "^1.3.4",
59
59
  "@types/pica": "^5.1.3",
60
60
  "@types/pulltorefreshjs": "^0.1.5",
@@ -83,8 +83,8 @@
83
83
  "@babel/runtime-corejs3": "^7.16.8",
84
84
  "@types/jest": "^27.4.0",
85
85
  "@types/react-test-renderer": "^17.0.1",
86
- "@typescript-eslint/eslint-plugin": "^5.10.0",
87
- "@typescript-eslint/parser": "^5.10.0",
86
+ "@typescript-eslint/eslint-plugin": "^5.10.1",
87
+ "@typescript-eslint/parser": "^5.10.1",
88
88
  "eslint": "^8.7.0",
89
89
  "eslint-config-airbnb-base": "^15.0.0",
90
90
  "eslint-plugin-import": "^2.25.4",
@@ -1,4 +1,11 @@
1
- import { Grid, GridProps, LinearProgress, Typography } from '@mui/material';
1
+ import { Utils } from '@etsoo/shared';
2
+ import {
3
+ Grid,
4
+ GridProps,
5
+ LinearProgress,
6
+ Stack,
7
+ Typography
8
+ } from '@mui/material';
2
9
  import React from 'react';
3
10
  import { globalApp } from '../../app/ReactApp';
4
11
  import {
@@ -48,7 +55,18 @@ type ViewPageFieldType<T> =
48
55
  /**
49
56
  * View page props
50
57
  */
51
- export interface ViewPageProps<T extends {}> extends CommonPageProps {
58
+ export interface ViewPageProps<T extends {}>
59
+ extends Exclude<CommonPageProps, 'children'> {
60
+ /**
61
+ * Actions
62
+ */
63
+ actions?: React.ReactNode | ((data: T) => React.ReactNode);
64
+
65
+ /**
66
+ * Children
67
+ */
68
+ children?: React.ReactNode | ((data: T) => React.ReactNode);
69
+
52
70
  /**
53
71
  * Fields to display
54
72
  */
@@ -133,6 +151,7 @@ function getItemField<T>(
133
151
  export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
134
152
  // Destruct
135
153
  const {
154
+ actions,
136
155
  children,
137
156
  fields,
138
157
  loadData,
@@ -168,7 +187,9 @@ export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
168
187
  justifyContent="left"
169
188
  spacing={paddings}
170
189
  sx={{
171
- '.MuiTypography-subtitle2': { fontWeight: 'bold' }
190
+ '.MuiTypography-subtitle2': {
191
+ fontWeight: 'bold'
192
+ }
172
193
  }}
173
194
  >
174
195
  {fields.map((field, index) => {
@@ -194,7 +215,18 @@ export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
194
215
  );
195
216
  })}
196
217
  </Grid>
197
- {children}
218
+ {actions != null && (
219
+ <Stack
220
+ direction="row"
221
+ width="100%"
222
+ flexWrap="wrap"
223
+ paddingTop={paddings}
224
+ paddingBottom={paddings}
225
+ >
226
+ {Utils.getResult(actions, data)}
227
+ </Stack>
228
+ )}
229
+ {Utils.getResult(children, data)}
198
230
  </React.Fragment>
199
231
  )}
200
232
  </CommonPage>