en-US

Add the dLoading attribute to make the button in the loading state.

zh-CN

添加 dLoading 属性即可让按钮处于加载状态。

import { useRef } from 'react';

import { useAsync, useImmer } from '@react-devui/hooks';
import { SearchOutlined } from '@react-devui/icons';
import { DButton } from '@react-devui/ui';

export default function Demo() {
  const dataRef = useRef({});
  const async = useAsync();

  const [loadings, setLoadings] = useImmer([false, false, false, false, false]);

  const handleClick = (index) => {
    setLoadings((draft) => {
      draft[index] = true;
    });
    dataRef.current[`clearTid${index}`]?.();
    dataRef.current[`clearTid${index}`] = async.setTimeout(() => {
      setLoadings((draft) => {
        draft[index] = false;
      });
    }, 3000);
  };

  return (
    <>
      <DButton dLoading={loadings[0]} dIcon={<SearchOutlined />} onClick={() => handleClick(0)}>
        Click me!
      </DButton>
      <DButton dLoading={loadings[1]} onClick={() => handleClick(1)}>
        Click me!
      </DButton>
      <DButton dLoading={loadings[2]} dVariant="circle" dIcon={<SearchOutlined />} onClick={() => handleClick(2)} />
      <br />
      <DButton dLoading={loadings[3]} dIcon={<SearchOutlined />} dIconRight onClick={() => handleClick(3)}>
        Click me!
      </DButton>
      <DButton dLoading={loadings[4]} dIconRight onClick={() => handleClick(4)}>
        Click me!
      </DButton>
      <br />
      <DButton dLoading>Primary Button</DButton>
      <DButton dType="secondary" dLoading>
        Secondary Button
      </DButton>
      <DButton dType="outline" dLoading>
        Outline Button
      </DButton>
      <DButton dType="dashed" dLoading>
        Dashed Button
      </DButton>
      <DButton dType="text" dLoading>
        Text Button
      </DButton>
      <DButton dType="link" dLoading>
        Link Button
      </DButton>
    </>
  );
}