@etsoo/react 1.4.59 → 1.4.60

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 (4) hide show
  1. package/lib/mu/pages/ViewPage.d.ts +1 -1
  2. package/lib/mu/pages/ViewPage.js +14 -5
  3. package/package.json +1 -1
  4. package/src/mu/pages/ViewPage.tsx +20 -6
package/lib/mu/pages/ViewPage.d.ts CHANGED
@@ -12,7 +12,7 @@ export interface ViewPageField<T extends {}> extends GridProps {
12
12
  /**
13
13
  * Label field
14
14
  */
15
- label: string | (() => React.ReactNode);
15
+ label?: string | (() => React.ReactNode);
16
16
  }
17
17
  declare type ViewPageFieldType<T> = (string & keyof T) | ViewPageField<T>;
18
18
  /**
package/lib/mu/pages/ViewPage.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { Grid, LinearProgress, Typography } from '@mui/material';
2
2
  import React from 'react';
3
3
  import { globalApp } from '../../app/ReactApp';
4
+ import { MUGlobal } from '../MUGlobal';
4
5
  import { CommonPage } from './CommonPage';
5
6
  function formatItemData(fieldData) {
6
7
  if (fieldData instanceof Date)
@@ -13,6 +14,8 @@ function getItemField(field, data) {
13
14
  let itemData, itemLabel, gridProps;
14
15
  if (typeof field === 'object') {
15
16
  // Destruct
17
+ if (field.label == null && typeof field.data === 'string')
18
+ field.label = field.data;
16
19
  const { data: fieldData, label: fieldLabel, ...rest } = field;
17
20
  gridProps = rest;
18
21
  // Field data
@@ -24,12 +27,14 @@ function getItemField(field, data) {
24
27
  itemLabel =
25
28
  typeof fieldLabel === 'function'
26
29
  ? fieldLabel()
27
- : (_a = globalApp.get(fieldLabel)) !== null && _a !== void 0 ? _a : fieldLabel;
30
+ : fieldLabel == null
31
+ ? 'No Label'
32
+ : (_a = globalApp.get(fieldLabel)) !== null && _a !== void 0 ? _a : fieldLabel;
28
33
  }
29
34
  else {
30
35
  itemData = formatItemData(data[field]);
31
36
  itemLabel = (_b = globalApp.get(field)) !== null && _b !== void 0 ? _b : field;
32
- gridProps = { xs: 12, sm: 6 };
37
+ gridProps = { xs: 12, sm: 6, md: 4, lg: 3 };
33
38
  }
34
39
  return [itemData, itemLabel, gridProps];
35
40
  }
@@ -39,7 +44,7 @@ function getItemField(field, data) {
39
44
  */
40
45
  export function ViewPage(props) {
41
46
  // Destruct
42
- const { children, fields, loadData, paddings, supportRefresh = true, ...rest } = props;
47
+ const { children, fields, loadData, paddings = MUGlobal.pagePaddings, supportRefresh = true, ...rest } = props;
43
48
  // Data
44
49
  const [data, setData] = React.useState();
45
50
  // Load data
@@ -50,11 +55,15 @@ export function ViewPage(props) {
50
55
  setData(result);
51
56
  };
52
57
  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,
53
- React.createElement(Grid, { container: true, justifyContent: "left", spacing: paddings }, fields.map((field) => {
58
+ React.createElement(Grid, { container: true, justifyContent: "left", spacing: paddings, sx: {
59
+ '.MuiTypography-subtitle2': { fontWeight: 'bold' }
60
+ } }, fields.map((field, index) => {
54
61
  // Get data
55
62
  const [itemData, itemLabel, gridProps] = getItemField(field, data);
63
+ if (itemData == null)
64
+ return undefined;
56
65
  // Layout
57
- return (React.createElement(Grid, { item: true, ...gridProps },
66
+ return (React.createElement(Grid, { item: true, ...gridProps, key: index },
58
67
  React.createElement(Typography, { variant: "caption", component: "div" },
59
68
  itemLabel,
60
69
  ":"),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/react",
3
- "version": "1.4.59",
3
+ "version": "1.4.60",
4
4
  "description": "TypeScript ReactJs framework",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
package/src/mu/pages/ViewPage.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import { Grid, GridProps, LinearProgress, Typography } from '@mui/material';
2
2
  import React from 'react';
3
3
  import { globalApp } from '../../app/ReactApp';
4
+ import { MUGlobal } from '../MUGlobal';
4
5
  import { CommonPage } from './CommonPage';
5
6
  import { CommonPageProps } from './CommonPageProps';
6
7
 
@@ -16,7 +17,7 @@ export interface ViewPageField<T extends {}> extends GridProps {
16
17
  /**
17
18
  * Label field
18
19
  */
19
- label: string | (() => React.ReactNode);
20
+ label?: string | (() => React.ReactNode);
20
21
  }
21
22
 
22
23
  type ViewPageFieldType<T> = (string & keyof T) | ViewPageField<T>;
@@ -57,6 +58,8 @@ function getItemField<T>(
57
58
 
58
59
  if (typeof field === 'object') {
59
60
  // Destruct
61
+ if (field.label == null && typeof field.data === 'string')
62
+ field.label = field.data;
60
63
  const { data: fieldData, label: fieldLabel, ...rest } = field;
61
64
  gridProps = rest;
62
65
 
@@ -68,11 +71,13 @@ function getItemField<T>(
68
71
  itemLabel =
69
72
  typeof fieldLabel === 'function'
70
73
  ? fieldLabel()
74
+ : fieldLabel == null
75
+ ? 'No Label'
71
76
  : globalApp.get<string>(fieldLabel) ?? fieldLabel;
72
77
  } else {
73
78
  itemData = formatItemData(data[field]);
74
79
  itemLabel = globalApp.get<string>(field) ?? field;
75
- gridProps = { xs: 12, sm: 6 };
80
+ gridProps = { xs: 12, sm: 6, md: 4, lg: 3 };
76
81
  }
77
82
 
78
83
  return [itemData, itemLabel, gridProps];
@@ -88,7 +93,7 @@ export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
88
93
  children,
89
94
  fields,
90
95
  loadData,
91
- paddings,
96
+ paddings = MUGlobal.pagePaddings,
92
97
  supportRefresh = true,
93
98
  ...rest
94
99
  } = props;
@@ -115,15 +120,24 @@ export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
115
120
  <LinearProgress />
116
121
  ) : (
117
122
  <React.Fragment>
118
- <Grid container justifyContent="left" spacing={paddings}>
119
- {fields.map((field) => {
123
+ <Grid
124
+ container
125
+ justifyContent="left"
126
+ spacing={paddings}
127
+ sx={{
128
+ '.MuiTypography-subtitle2': { fontWeight: 'bold' }
129
+ }}
130
+ >
131
+ {fields.map((field, index) => {
120
132
  // Get data
121
133
  const [itemData, itemLabel, gridProps] =
122
134
  getItemField(field, data);
123
135
 
136
+ if (itemData == null) return undefined;
137
+
124
138
  // Layout
125
139
  return (
126
- <Grid item {...gridProps}>
140
+ <Grid item {...gridProps} key={index}>
127
141
  <Typography
128
142
  variant="caption"
129
143
  component="div"