import React, { useCallback, useRef, useState } from 'react';
import IconFont from '../../themeComponents/IconFont';
import { Button } from 'antd';
import './index.less';

export default function RefreshButton({ loading, onClick, className }) {
  const [mask, setMask] = useState(false);
  const timer = useRef(null);
  const onTraggerClick = useCallback(
    e => {
      clearTimeout(timer.current);
      setMask(true);
      !mask && !loading && onClick && onClick(e);
      timer.current = setTimeout(() => setMask(false), 500);
    },
    [loading, mask, onClick]
  );
  return (
    <Button className={`refresh-btn ${className}`} onClick={onTraggerClick} loading={mask || loading} icon={<IconFont type="icon-S_Edit_Refresh" theme="outlined" />}>
      刷新
    </Button>
  );
}
