index.js 2.4 KB
Newer Older
李纪文's avatar
李纪文 committed
1 2 3 4 5 6 7
/*
 * @description:
 * @Author: lijiwen
 * @Date: 2021-11-12 14:27:03
 * @LastEditTime: 2021-11-12 14:32:30
 * @LastEditors: lijiwen
 */
邓晓峰's avatar
邓晓峰 committed
8
// eslint-disable-next-line no-unused-vars
涂茜's avatar
涂茜 committed
9 10
import React, { useContext } from 'react';
import classNames from 'classnames';
涂茜's avatar
涂茜 committed
11
import PropTypes from 'prop-types';
涂茜's avatar
涂茜 committed
12
import { ConfigProvider } from 'antd';
涂茜's avatar
涂茜 committed
13 14
import noDataLight from './assets/noDataLight.png';
import noDataDark from './assets/noDataDark.png';
涂茜's avatar
涂茜 committed
15 16
import errorLight from './assets/errorLight.png';
import errorDark from './assets/errorDark.png';
涂茜's avatar
涂茜 committed
17 18 19
import './index.less';

const Empty = ({ description, image, theme, size, statusCode, imageStyle, children }) => {
邓晓峰's avatar
邓晓峰 committed
20 21 22 23 24
  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];
涂茜's avatar
涂茜 committed
25

涂茜's avatar
涂茜 committed
26 27 28
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('panda-empty');

涂茜's avatar
涂茜 committed
29 30 31
  let imageNode = null;

  if (typeof image === 'string') {
涂茜's avatar
涂茜 committed
32
    imageNode = <img alt={alt} src={imageSrc} />;
涂茜's avatar
涂茜 committed
33 34 35 36 37
  } else {
    imageNode = image;
  }

  return (
涂茜's avatar
涂茜 committed
38 39 40 41 42 43 44 45
    <div
      className={classNames(prefixCls, {
        small: size === 'small',
        middle: size === 'middle',
        large: size === 'large',
      })}
    >
      <div className={`${prefixCls}-image`} style={imageStyle}>
涂茜's avatar
涂茜 committed
46 47
        {imageNode}
      </div>
涂茜's avatar
涂茜 committed
48 49
      {des && <div className={`${prefixCls}-des`}>{des}</div>}
      {children && <div className={`${prefixCls}-footer`}>{children}</div>}
涂茜's avatar
涂茜 committed
50 51 52 53 54 55 56 57
    </div>
  );
};

Empty.defaultProps = {
  description: '',
  image: '',
  theme: 'light',
涂茜's avatar
涂茜 committed
58
  size: 'middle',
涂茜's avatar
涂茜 committed
59 60 61 62 63 64 65 66
  statusCode: '0',
  imageStyle: {},
};

Empty.propTypes = {
  description: PropTypes.node, // 自定义描述内容
  image: PropTypes.node, // 设置显示图片,为 string 时表示自定义图片地址
  theme: PropTypes.string, // 设置主题 light dark
涂茜's avatar
涂茜 committed
67
  size: PropTypes.string, // 设置图片尺寸 small middle large
涂茜's avatar
涂茜 committed
68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
  statusCode: PropTypes.string, // 状态码
  imageStyle: PropTypes.object, // 图片样式
};

export default Empty;

const DESC_DATA = {
  0: '咦~暂时没有查询到相关数据呢~',
  '-1': '参数错误~请刷新试试或等服务恢复~',
  '-2': '服务器处理异常~请刷新试试或等服务恢复~',
};

const IMAGE_DATA = {
  light: [noDataLight, errorLight],
  dark: [noDataDark, errorDark],
};