@cqsjjb/jjb-react-admin-component 3.0.25 → 3.0.27

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/ErrorBoundary/index.d.ts +12 -0
  2. package/ErrorBoundary/index.js +41 -0
  3. package/ErrorBoundary/index.mjs +58 -0
  4. package/FormilyDescriptions/index.js +34 -10
  5. package/FormilyDescriptions/index.mjs +101 -68
  6. package/package.json +1 -1
package/ErrorBoundary/index.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ // @ts-ignore
2
+ import * as React from 'react';
3
+ import { ComponentProps } from '../types';
4
+
5
+ interface ErrorBoundaryProps extends ComponentProps {
6
+ }
7
+
8
+ interface ErrorBoundaryFc extends React.FC<ErrorBoundaryProps> {
9
+ }
10
+
11
+ declare const ErrorBoundary: ErrorBoundaryFc;
12
+ export default ErrorBoundary;
package/ErrorBoundary/index.js ADDED
@@ -0,0 +1,41 @@
1
+ import React from 'react';
2
+ import { Result, Tooltip, Button } from 'antd';
3
+ export default class ErrorBoundary extends React.Component {
4
+ state = {
5
+ hasError: false,
6
+ errorInfo: '',
7
+ errorStack: undefined
8
+ };
9
+ componentDidCatch(error, info) {
10
+ this.setState({
11
+ hasError: true,
12
+ errorInfo: error.message,
13
+ errorStack: info.componentStack
14
+ });
15
+ }
16
+ render() {
17
+ if (this.state.hasError) {
18
+ return /*#__PURE__*/React.createElement(Result, {
19
+ status: "error",
20
+ title: "\u5E94\u7528\u8FD0\u884C\u5F02\u5E38",
21
+ subTitle: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, this.state.errorInfo), /*#__PURE__*/React.createElement("div", {
22
+ style: {
23
+ width: 700,
24
+ display: 'inline-block',
25
+ overflow: 'auto',
26
+ maxHeight: 400,
27
+ textAlign: 'left',
28
+ whiteSpace: 'pre-line'
29
+ }
30
+ }, this.state.errorStack)),
31
+ extra: /*#__PURE__*/React.createElement(Tooltip, {
32
+ title: "\u82E5\u5237\u65B0\u4EFB\u7136\u65E0\u6CD5\u89E3\u51B3\uFF0C\u8BF7\u8054\u7CFB\u6280\u672F\u4EBA\u5458\u89E3\u51B3"
33
+ }, /*#__PURE__*/React.createElement(Button, {
34
+ type: "primary",
35
+ onClick: () => window.location.reload()
36
+ }, "\u5237\u65B0\u91CD\u8BD5"))
37
+ });
38
+ }
39
+ return this.props.children;
40
+ }
41
+ }
package/ErrorBoundary/index.mjs ADDED
@@ -0,0 +1,58 @@
1
+ import React from 'react';
2
+ import { Result, Tooltip, Button } from 'antd';
3
+
4
+ export default class ErrorBoundary extends React.Component {
5
+ state = {
6
+ hasError: false,
7
+ errorInfo: '',
8
+ errorStack: undefined
9
+ };
10
+
11
+ componentDidCatch(error, info) {
12
+ this.setState({
13
+ hasError: true,
14
+ errorInfo: error.message,
15
+ errorStack: info.componentStack
16
+ });
17
+ }
18
+
19
+ render() {
20
+ if (this.state.hasError) {
21
+ return (
22
+ <Result
23
+ status="error"
24
+ title="应用运行异常"
25
+ subTitle={(
26
+ <React.Fragment>
27
+ <div>{this.state.errorInfo}</div>
28
+ <div
29
+ style={{
30
+ width: 700,
31
+ display: 'inline-block',
32
+ overflow: 'auto',
33
+ maxHeight: 400,
34
+ textAlign: 'left',
35
+ whiteSpace: 'pre-line'
36
+ }}
37
+ >
38
+ {this.state.errorStack}
39
+ </div>
40
+ </React.Fragment>
41
+ )}
42
+ extra={(
43
+ <Tooltip title="若刷新任然无法解决，请联系技术人员解决">
44
+ <Button
45
+ type="primary"
46
+ onClick={() => window.location.reload()}
47
+ >
48
+ 刷新重试
49
+ </Button>
50
+ </Tooltip>
51
+ )}
52
+ />
53
+ );
54
+ }
55
+
56
+ return this.props.children;
57
+ }
58
+ }
package/FormilyDescriptions/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
  import React from 'react';
3
3
  import { tools } from '@cqsjjb/jjb-common-lib';
4
- import { FilePdfOutlined, LinkOutlined } from '@ant-design/icons';
4
+ import { FilePdfOutlined, LinkOutlined, PlayCircleOutlined } from '@ant-design/icons';
5
5
  import { Modal, Descriptions, Empty, Image, Tooltip, Tag, Spin, Table } from 'antd';
6
6
  const formilyItemMargin = new Map([['small', 8], ['middle', 12], ['default', 16]]);
7
7
  export default function FormilyDescriptions(props) {
@@ -22,8 +22,13 @@ export default function FormilyDescriptions(props) {
22
22
  });
23
23
  return dataSource.length === 0 ? /*#__PURE__*/React.createElement(Empty, {
24
24
  image: Empty.PRESENTED_IMAGE_SIMPLE
25
- }) : /*#__PURE__*/React.createElement(React.Fragment, null, dataSource.map((item, index) => {
26
- const isLast = index === dataSource.length - 1;
25
+ }) : /*#__PURE__*/React.createElement(DescriptionsRender, _extends({
26
+ dataSource: dataSource
27
+ }, props));
28
+ }
29
+ export function DescriptionsRender(props) {
30
+ return props.dataSource.map((item, index) => {
31
+ const isLast = index === props.dataSource.length - 1;
27
32
  return /*#__PURE__*/React.createElement(Descriptions, {
28
33
  key: index,
29
34
  size: props.size,
@@ -54,9 +59,10 @@ export default function FormilyDescriptions(props) {
54
59
  labelStyle: props.labelStyle,
55
60
  contentStyle: props.contentStyle
56
61
  });
57
- }));
62
+ });
58
63
  }
59
- function ItemRender(props) {
64
+ export function ItemRender(props) {
65
+ const [type, setType] = React.useState(undefined);
60
66
  const [open, setOpen] = React.useState(false);
61
67
  const [previewUrl, setPreviewUrl] = React.useState('');
62
68
  const {
@@ -100,10 +106,23 @@ function ItemRender(props) {
100
106
  alignItems: 'center'
101
107
  },
102
108
  onClick: () => {
109
+ setType('pdf');
110
+ setOpen(true);
111
+ setPreviewUrl(next.url);
112
+ }
113
+ }, /*#__PURE__*/React.createElement(FilePdfOutlined, null), "\u70B9\u51FB\u67E5\u770B") : /\.(mp4|ogg|mkv|webm)$/.test(next.url) ? /*#__PURE__*/React.createElement("a", {
114
+ key: nextIndex,
115
+ style: {
116
+ gap: 4,
117
+ display: 'flex',
118
+ alignItems: 'center'
119
+ },
120
+ onClick: () => {
121
+ setType('video');
103
122
  setOpen(true);
104
123
  setPreviewUrl(next.url);
105
124
  }
106
- }, /*#__PURE__*/React.createElement(FilePdfOutlined, null), "\u70B9\u51FB\u67E5\u770B") : /*#__PURE__*/React.createElement("a", {
125
+ }, /*#__PURE__*/React.createElement(PlayCircleOutlined, null), "\u70B9\u51FB\u67E5\u770B") : /*#__PURE__*/React.createElement("a", {
107
126
  key: nextIndex,
108
127
  href: next.url,
109
128
  style: {
@@ -123,18 +142,23 @@ function ItemRender(props) {
123
142
  renderItemText: props.renderItemText
124
143
  }), /*#__PURE__*/React.createElement(Modal, {
125
144
  destroyOnClose: true,
126
- title: "\u67E5\u770BPDF",
145
+ title: "\u67E5\u770B\u6587\u4EF6",
127
146
  open: open,
128
147
  width: 1100,
129
148
  footer: false,
130
149
  onCancel: () => setOpen(false)
131
- }, /*#__PURE__*/React.createElement("embed", {
150
+ }, type === 'pdf' && /*#__PURE__*/React.createElement("embed", {
132
151
  src: previewUrl,
133
152
  width: "100%",
134
153
  height: 600
154
+ }), type === 'video' && /*#__PURE__*/React.createElement("video", {
155
+ controls: true,
156
+ src: previewUrl,
157
+ width: "100%",
158
+ height: "350"
135
159
  })));
136
160
  }
137
- function generateValue(data, prefix = []) {
161
+ export function generateValue(data, prefix = []) {
138
162
  const result = [];
139
163
  data.forEach(item => {
140
164
  // 当前节点的完整 name
@@ -150,7 +174,7 @@ function generateValue(data, prefix = []) {
150
174
  });
151
175
  return result;
152
176
  }
153
- function RenderText(props) {
177
+ export function RenderText(props) {
154
178
  const {
155
179
  value
156
180
  } = props;
package/FormilyDescriptions/index.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
 
3
3
  import { tools } from '@cqsjjb/jjb-common-lib';
4
- import { FilePdfOutlined, LinkOutlined } from '@ant-design/icons';
4
+ import { FilePdfOutlined, LinkOutlined, PlayCircleOutlined } from '@ant-design/icons';
5
5
  import { Modal, Descriptions, Empty, Image, Tooltip, Tag, Spin, Table } from 'antd';
6
6
 
7
7
  const formilyItemMargin = new Map([
@@ -26,54 +26,57 @@ export default function FormilyDescriptions(props) {
26
26
  return dataSource.length === 0
27
27
  ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
28
28
  : (
29
- <React.Fragment>
30
- {dataSource.map((item, index) => {
31
- const isLast = index === dataSource.length - 1;
29
+ <DescriptionsRender dataSource={dataSource} {...props} />
30
+ );
31
+ }
32
+
33
+ export function DescriptionsRender(props) {
34
+ return props.dataSource.map((item, index) => {
35
+ const isLast = index === props.dataSource.length - 1;
32
36
 
33
- return (
34
- <Descriptions
35
- key={index}
36
- size={props.size}
37
- style={{
38
- marginBottom: isLast
39
- ? 0
40
- : formilyItemMargin.get(props.size || 'default')
41
- }}
42
- items={item.fromComponentEnum === 'GRID_FORM'
43
- ? item.children.map((child, childIndex) => {
44
- return {
45
- key: childIndex,
46
- label: child.name,
47
- span: child.formType === 'Table'
48
- ? props.column
49
- : 1,
50
- children: (
51
- <ItemRender data={child} {...props} />
52
- )
53
- };
54
- })
55
- : [
56
- {
57
- key: 1,
58
- label: item.name,
59
- children: <ItemRender data={item} {...props} />
60
- }
61
- ]}
62
- colon={props.colon}
63
- title={props.title}
64
- extra={props.extra}
65
- layout={props.layout || 'vertical'}
66
- column={props.column}
67
- labelStyle={props.labelStyle}
68
- contentStyle={props.contentStyle}
69
- />
70
- );
71
- })}
72
- </React.Fragment>
37
+ return (
38
+ <Descriptions
39
+ key={index}
40
+ size={props.size}
41
+ style={{
42
+ marginBottom: isLast
43
+ ? 0
44
+ : formilyItemMargin.get(props.size || 'default')
45
+ }}
46
+ items={item.fromComponentEnum === 'GRID_FORM'
47
+ ? item.children.map((child, childIndex) => {
48
+ return {
49
+ key: childIndex,
50
+ label: child.name,
51
+ span: child.formType === 'Table'
52
+ ? props.column
53
+ : 1,
54
+ children: (
55
+ <ItemRender data={child} {...props} />
56
+ )
57
+ };
58
+ })
59
+ : [
60
+ {
61
+ key: 1,
62
+ label: item.name,
63
+ children: <ItemRender data={item} {...props} />
64
+ }
65
+ ]}
66
+ colon={props.colon}
67
+ title={props.title}
68
+ extra={props.extra}
69
+ layout={props.layout || 'vertical'}
70
+ column={props.column}
71
+ labelStyle={props.labelStyle}
72
+ contentStyle={props.contentStyle}
73
+ />
73
74
  );
75
+ });
74
76
  }
75
77
 
76
- function ItemRender(props) {
78
+ export function ItemRender(props) {
79
+ const [ type, setType ] = React.useState(undefined);
77
80
  const [ open, setOpen ] = React.useState(false);
78
81
  const [ previewUrl, setPreviewUrl ] = React.useState('');
79
82
 
@@ -135,6 +138,7 @@ function ItemRender(props) {
135
138
  alignItems: 'center'
136
139
  }}
137
140
  onClick={() => {
141
+ setType('pdf');
138
142
  setOpen(true);
139
143
  setPreviewUrl(next.url);
140
144
  }}
@@ -143,21 +147,40 @@ function ItemRender(props) {
143
147
  点击查看
144
148
  </a>
145
149
  )
146
- : (
147
- <a
148
- key={nextIndex}
149
- href={next.url}
150
- style={{
151
- gap: 4,
152
- display: 'flex',
153
- alignItems: 'center'
154
- }}
155
- target="_blank"
156
- >
157
- <LinkOutlined />
158
- 点击下载
159
- </a>
160
- )}
150
+ : /\.(mp4|ogg|mkv|webm)$/.test(next.url)
151
+ ? (
152
+ <a
153
+ key={nextIndex}
154
+ style={{
155
+ gap: 4,
156
+ display: 'flex',
157
+ alignItems: 'center'
158
+ }}
159
+ onClick={() => {
160
+ setType('video');
161
+ setOpen(true);
162
+ setPreviewUrl(next.url);
163
+ }}
164
+ >
165
+ <PlayCircleOutlined />
166
+ 点击查看
167
+ </a>
168
+ )
169
+ : (
170
+ <a
171
+ key={nextIndex}
172
+ href={next.url}
173
+ style={{
174
+ gap: 4,
175
+ display: 'flex',
176
+ alignItems: 'center'
177
+ }}
178
+ target="_blank"
179
+ >
180
+ <LinkOutlined />
181
+ 点击下载
182
+ </a>
183
+ )}
161
184
  </Tooltip>
162
185
  );
163
186
  }
@@ -177,23 +200,33 @@ function ItemRender(props) {
177
200
  )}
178
201
  <Modal
179
202
  destroyOnClose
180
- title="查看PDF"
203
+ title="查看文件"
181
204
  open={open}
182
205
  width={1100}
183
206
  footer={false}
184
207
  onCancel={() => setOpen(false)}
185
208
  >
186
- <embed
187
- src={previewUrl}
188
- width="100%"
189
- height={600}
190
- />
209
+ {type === 'pdf' && (
210
+ <embed
211
+ src={previewUrl}
212
+ width="100%"
213
+ height={600}
214
+ />
215
+ )}
216
+ {type === 'video' && (
217
+ <video
218
+ controls
219
+ src={previewUrl}
220
+ width="100%"
221
+ height="350"
222
+ />
223
+ )}
191
224
  </Modal>
192
225
  </React.Fragment>
193
226
  );
194
227
  }
195
228
 
196
- function generateValue(data, prefix = []) {
229
+ export function generateValue(data, prefix = []) {
197
230
  const result = [];
198
231
 
199
232
  data.forEach(item => {
@@ -213,7 +246,7 @@ function generateValue(data, prefix = []) {
213
246
  return result;
214
247
  }
215
248
 
216
- function RenderText(props) {
249
+ export function RenderText(props) {
217
250
  const { value } = props;
218
251
  const [ text, setText ] = React.useState();
219
252
  const [ loading, setLoading ] = React.useState(false);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cqsjjb/jjb-react-admin-component",
3
- "version": "3.0.25",
3
+ "version": "3.0.27",
4
4
  "description": "jjb-react-admin-组件库@new",
5
5
  "main": "index.js",
6
6
  "author": "jjb-front-team",