@etsoo/react 1.4.59 → 1.4.63

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 +5 -1
  2. package/lib/mu/pages/ViewPage.js +26 -11
  3. package/package.json +1 -1
  4. package/src/mu/pages/ViewPage.tsx +46 -14
package/lib/mu/pages/ViewPage.d.ts CHANGED
@@ -12,7 +12,11 @@ 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
+ /**
17
+ * Display as single row
18
+ */
19
+ singleRow?: boolean;
16
20
  }
17
21
  declare type ViewPageFieldType<T> = (string & keyof T) | ViewPageField<T>;
18
22
  /**
package/lib/mu/pages/ViewPage.js CHANGED
@@ -1,37 +1,48 @@
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) {
7
+ if (fieldData == null)
8
+ return undefined;
9
+ if (typeof fieldData === 'string')
10
+ return fieldData;
6
11
  if (fieldData instanceof Date)
7
12
  return globalApp.formatDate(fieldData, 'd');
8
- return new String(fieldData);
13
+ return `${fieldData}`;
9
14
  }
10
15
  function getItemField(field, data) {
11
16
  var _a, _b;
12
17
  // Item data and label
13
- let itemData, itemLabel, gridProps;
18
+ let itemData, itemLabel, gridProps = {};
14
19
  if (typeof field === 'object') {
15
20
  // Destruct
16
- const { data: fieldData, label: fieldLabel, ...rest } = field;
17
- gridProps = rest;
21
+ const { data: fieldData, label: fieldLabel, singleRow = false, ...rest } = field;
22
+ gridProps = {
23
+ ...rest,
24
+ ...(singleRow && { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 })
25
+ };
18
26
  // Field data
19
27
  if (typeof fieldData === 'function')
20
28
  itemData = fieldData(data);
21
29
  else
22
- itemData = formatItemData(formatItemData);
30
+ itemData = formatItemData(data[fieldData]);
23
31
  // Field label
24
32
  itemLabel =
25
33
  typeof fieldLabel === 'function'
26
34
  ? fieldLabel()
27
- : (_a = globalApp.get(fieldLabel)) !== null && _a !== void 0 ? _a : fieldLabel;
35
+ : (_a = globalApp.get(fieldLabel !== null && fieldLabel !== void 0 ? fieldLabel : (typeof fieldData === 'string' ? fieldData : 'noData'))) !== null && _a !== void 0 ? _a : fieldLabel;
28
36
  }
29
37
  else {
30
38
  itemData = formatItemData(data[field]);
31
39
  itemLabel = (_b = globalApp.get(field)) !== null && _b !== void 0 ? _b : field;
32
- gridProps = { xs: 12, sm: 6 };
33
40
  }
34
- return [itemData, itemLabel, gridProps];
41
+ return [
42
+ itemData,
43
+ itemLabel,
44
+ { xs: 12, sm: 6, md: 6, lg: 4, xl: 3, ...gridProps }
45
+ ];
35
46
  }
36
47
  /**
37
48
  * View page
@@ -39,7 +50,7 @@ function getItemField(field, data) {
39
50
  */
40
51
  export function ViewPage(props) {
41
52
  // Destruct
42
- const { children, fields, loadData, paddings, supportRefresh = true, ...rest } = props;
53
+ const { children, fields, loadData, paddings = MUGlobal.pagePaddings, supportRefresh = true, ...rest } = props;
43
54
  // Data
44
55
  const [data, setData] = React.useState();
45
56
  // Load data
@@ -50,11 +61,15 @@ export function ViewPage(props) {
50
61
  setData(result);
51
62
  };
52
63
  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) => {
64
+ React.createElement(Grid, { container: true, justifyContent: "left", spacing: paddings, sx: {
65
+ '.MuiTypography-subtitle2': { fontWeight: 'bold' }
66
+ } }, fields.map((field, index) => {
54
67
  // Get data
55
68
  const [itemData, itemLabel, gridProps] = getItemField(field, data);
69
+ if (itemData == null)
70
+ return undefined;
56
71
  // Layout
57
- return (React.createElement(Grid, { item: true, ...gridProps },
72
+ return (React.createElement(Grid, { item: true, ...gridProps, key: index },
58
73
  React.createElement(Typography, { variant: "caption", component: "div" },
59
74
  itemLabel,
60
75
  ":"),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/react",
3
- "version": "1.4.59",
3
+ "version": "1.4.63",
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,12 @@ 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);
21
+
22
+ /**
23
+ * Display as single row
24
+ */
25
+ singleRow?: boolean;
20
26
  }
21
27
 
22
28
  type ViewPageFieldType<T> = (string & keyof T) | ViewPageField<T>;
@@ -41,9 +47,11 @@ export interface ViewPageProps<T extends {}> extends CommonPageProps {
41
47
  supportRefresh?: boolean;
42
48
  }
43
49
 
44
- function formatItemData(fieldData: unknown) {
50
+ function formatItemData(fieldData: unknown): string | undefined {
51
+ if (fieldData == null) return undefined;
52
+ if (typeof fieldData === 'string') return fieldData;
45
53
  if (fieldData instanceof Date) return globalApp.formatDate(fieldData, 'd');
46
- return new String(fieldData);
54
+ return `${fieldData}`;
47
55
  }
48
56
 
49
57
  function getItemField<T>(
@@ -53,29 +61,44 @@ function getItemField<T>(
53
61
  // Item data and label
54
62
  let itemData: React.ReactNode,
55
63
  itemLabel: React.ReactNode,
56
- gridProps: GridProps;
64
+ gridProps: GridProps = {};
57
65
 
58
66
  if (typeof field === 'object') {
59
67
  // Destruct
60
- const { data: fieldData, label: fieldLabel, ...rest } = field;
61
- gridProps = rest;
68
+ const {
69
+ data: fieldData,
70
+ label: fieldLabel,
71
+ singleRow = false,
72
+ ...rest
73
+ } = field;
74
+
75
+ gridProps = {
76
+ ...rest,
77
+ ...(singleRow && { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 })
78
+ };
62
79
 
63
80
  // Field data
64
81
  if (typeof fieldData === 'function') itemData = fieldData(data);
65
- else itemData = formatItemData(formatItemData);
82
+ else itemData = formatItemData(data[fieldData]);
66
83
 
67
84
  // Field label
68
85
  itemLabel =
69
86
  typeof fieldLabel === 'function'
70
87
  ? fieldLabel()
71
- : globalApp.get<string>(fieldLabel) ?? fieldLabel;
88
+ : globalApp.get<string>(
89
+ fieldLabel ??
90
+ (typeof fieldData === 'string' ? fieldData : 'noData')
91
+ ) ?? fieldLabel;
72
92
  } else {
73
93
  itemData = formatItemData(data[field]);
74
94
  itemLabel = globalApp.get<string>(field) ?? field;
75
- gridProps = { xs: 12, sm: 6 };
76
95
  }
77
96
 
78
- return [itemData, itemLabel, gridProps];
97
+ return [
98
+ itemData,
99
+ itemLabel,
100
+ { xs: 12, sm: 6, md: 6, lg: 4, xl: 3, ...gridProps }
101
+ ];
79
102
  }
80
103
 
81
104
  /**
@@ -88,7 +111,7 @@ export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
88
111
  children,
89
112
  fields,
90
113
  loadData,
91
- paddings,
114
+ paddings = MUGlobal.pagePaddings,
92
115
  supportRefresh = true,
93
116
  ...rest
94
117
  } = props;
@@ -115,15 +138,24 @@ export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
115
138
  <LinearProgress />
116
139
  ) : (
117
140
  <React.Fragment>
118
- <Grid container justifyContent="left" spacing={paddings}>
119
- {fields.map((field) => {
141
+ <Grid
142
+ container
143
+ justifyContent="left"
144
+ spacing={paddings}
145
+ sx={{
146
+ '.MuiTypography-subtitle2': { fontWeight: 'bold' }
147
+ }}
148
+ >
149
+ {fields.map((field, index) => {
120
150
  // Get data
121
151
  const [itemData, itemLabel, gridProps] =
122
152
  getItemField(field, data);
123
153
 
154
+ if (itemData == null) return undefined;
155
+
124
156
  // Layout
125
157
  return (
126
- <Grid item {...gridProps}>
158
+ <Grid item {...gridProps} key={index}>
127
159
  <Typography
128
160
  variant="caption"
129
161
  component="div"