index.js

import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { ConfigProvider } from 'antd';
import noDataLight from './assets/noDataLight.svg';
import noDataDark from './assets/noDataDark.svg';
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 ? description : 'empty';
  const des = description ? description : DESC_DATA[`${statusCode}`];
  const imageSrc = image ? 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],
};