en-US

Realize complex footer operations through the DDrawer.Footer component.

zh-CN

通过 DDrawer.Footer 组件实现复杂的页脚操作。

import { useState, useRef } from 'react';

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

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

  const [visible, setVisible] = useState(false);

  return (
    <>
      <DButton
        onClick={() => {
          setVisible(true);
        }}
      >
        Show Drawer
      </DButton>
      <DDrawer
        dVisible={visible}
        dHeader="Custom Footer"
        dFooter={
          <DDrawer.Footer
            dAlign="center"
            dActions={[
              'cancel',
              <DButton
                onClick={() => {
                  setVisible(false);
                }}
              >
                Submit
              </DButton>,
              'ok',
            ]}
            dCancelProps={{ disabled: true }}
            onOkClick={() => {
              return new Promise((r) => {
                dataRef.current.clearTid?.();
                dataRef.current.clearTid = async.setTimeout(() => {
                  r(true);
                }, 3000);
              });
            }}
          ></DDrawer.Footer>
        }
        onClose={() => {
          setVisible(false);
        }}
      >
        <div className="app-demo-text-container">
          <div>Some contents...</div>
          <div>Some contents...</div>
          <div>Some contents...</div>
        </div>
      </DDrawer>
    </>
  );
}