index.js 1.54 KB
Newer Older
李纪文's avatar
李纪文 committed
1
/* eslint-disable react-hooks/exhaustive-deps */
2 3 4
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { Spin } from 'antd';
李纪文's avatar
李纪文 committed
5

6 7
let timer = null;
const LoadBox = ({
8
  delay = 1000,
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
  indicator,
  size,
  tip,
  wrapperClassName,
  timeout,
  timeoutTip,
  spinning,
}) => {
  const [loadTip, setloadTip] = useState(tip);
  useEffect(() => {
    setloadTip(tip);
    if (timer) clearTimeout(timer);
    if (spinning)
      timer = setTimeout(() => {
        setloadTip(timeoutTip);
      }, timeout);
李纪文's avatar
李纪文 committed
25 26 27
    return () => {
      if (timer) clearTimeout(timer);
    };
28 29 30 31 32 33 34 35 36 37 38 39 40 41
  }, [spinning]);
  return (
    <Spin
      delay={delay}
      spinning={spinning}
      indicator={indicator}
      size={size}
      tip={loadTip}
      wrapperClassName={wrapperClassName}
    ></Spin>
  );
};
LoadBox.defaultProps = {
  spinning: true,
42
  delay: 1000,
43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
  indicator: '',
  size: 'default',
  tip: '',
  wrapperClassName: '',
  timeout: 3000,
  timeoutTip: '正在加载数据,请耐心等待...',
};

LoadBox.propTypes = {
  spinning: PropTypes.bool, // 是否为加载中状态
  delay: PropTypes.number, // 延迟显示加载效果的时间(防止闪烁)
  indicator: PropTypes.node, // 加载指示符
  size: PropTypes.string, // 组件大小,可选值为 small default large
  tip: PropTypes.string, // 当作为包裹元素时,可以自定义描述文案
  wrapperClassName: PropTypes.string, // 包装器的类属性
  timeout: PropTypes.number, // 超时时间
  timeoutTip: PropTypes.string, // 超时时间提示
};

export default LoadBox;