/* eslint-disable react-hooks/exhaustive-deps */ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { Spin } from 'antd'; let timer = null; const LoadBox = ({ delay, 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); return () => { if (timer) clearTimeout(timer); }; }, [spinning]); return ( <Spin delay={delay} spinning={spinning} indicator={indicator} size={size} tip={loadTip} wrapperClassName={wrapperClassName} ></Spin> ); }; LoadBox.defaultProps = { spinning: true, delay: 0, 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;