1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
/*
* @description:
* @Author: lijiwen
* @Date: 2021-11-12 14:27:03
* @LastEditTime: 2021-11-12 14:32:30
* @LastEditors: lijiwen
*/
// eslint-disable-next-line no-unused-vars
import React, { useContext } from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { ConfigProvider } from 'antd';
import noDataLight from './assets/noDataLight.png';
import noDataDark from './assets/noDataDark.png';
import errorLight from './assets/errorLight.png';
import errorDark from './assets/errorDark.png';
import './index.less';
const Empty = ({ description, image, theme, size, statusCode, imageStyle, children }) => {
const alt = description || 'empty';
// eslint-disable-next-line no-use-before-define
const des = description || DESC_DATA[`${statusCode}`];
// eslint-disable-next-line no-use-before-define
const imageSrc = image || IMAGE_DATA[theme][statusCode == '0' ? 0 : 1];
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('panda-empty');
let imageNode = null;
if (typeof image === 'string') {
imageNode = <img alt={alt} src={imageSrc} />;
} else {
imageNode = image;
}
return (
<div
className={classNames(prefixCls, {
small: size === 'small',
middle: size === 'middle',
large: size === 'large',
})}
>
<div className={`${prefixCls}-image`} style={imageStyle}>
{imageNode}
</div>
{des && <div className={`${prefixCls}-des`}>{des}</div>}
{children && <div className={`${prefixCls}-footer`}>{children}</div>}
</div>
);
};
Empty.defaultProps = {
description: '',
image: '',
theme: 'light',
size: 'middle',
statusCode: '0',
imageStyle: {},
};
Empty.propTypes = {
description: PropTypes.node, // 自定义描述内容
image: PropTypes.node, // 设置显示图片，为 string 时表示自定义图片地址
theme: PropTypes.string, // 设置主题 light dark
size: PropTypes.string, // 设置图片尺寸 small middle large
statusCode: PropTypes.string, // 状态码
imageStyle: PropTypes.object, // 图片样式
};
export default Empty;
const DESC_DATA = {
0: '咦~暂时没有查询到相关数据呢~',
'-1': '参数错误~请刷新试试或等服务恢复~',
'-2': '服务器处理异常~请刷新试试或等服务恢复~',
};
const IMAGE_DATA = {
light: [noDataLight, errorLight],
dark: [noDataDark, errorDark],
};