index.js

/*
 * @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, Image } 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 defaultSrc = image || IMAGE_DATA_DEFAULT[theme][statusCode == '0' ? 0 : 1];

  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('panda-empty');

  let imageNode = null;

  if (typeof image === 'string') {
    imageNode = <Image
      rootClassName={`${prefixCls}-image-nodebox`}
      alt={alt}
      src={defaultSrc}
      fallback={imageSrc}
      preview={false}
      onError={(e) => {
        // 清除console
        // if (window.__POWERED_BY_QIANKUN__) console.clear();
      }}
    />;
  } 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],
};

const IMAGE_DATA_DEFAULT = {
  light: ['/localassets/empty/noDataLight.png', '/localassets/empty/errorLight.png'],
  dark: ['/localassets/empty/noDataDark.png', '/localassets/empty/errorDark.png'],
};