/* * @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], };