en-US

Customize interactions with dActions and dDefaultActions.

zh-CN

通过 dActions 和 dDefaultActions 自定义交互。

import { useState } from 'react';

import { UploadOutlined, StarOutlined } from '@react-devui/icons';
import { DUpload, DButton, DModal } from '@react-devui/ui';

export default function Demo() {
  const [visible, setVisible] = useState(false);
  const [file, setFile] = useState();
  const [files, setFiles] = useState([
    {
      uid: 1,
      name: 'logo.svg',
      status: 'load',
      url: '/assets/logo.svg',
      thumbUrl: '/assets/logo.svg',
    },
  ]);

  return (
    <>
      <DUpload
        dModel={files}
        dTrigger={
          <DButton className="mb-2" dIcon={<UploadOutlined />}>
            Upload
          </DButton>
        }
        dList={
          <DUpload.List
            dDefaultActions={{
              preview: (file) => {
                setFile(file);
                setVisible(true);
              },
            }}
            dActions={() => [
              <DUpload.Action dPreset="download" />,
              <DUpload.Action title="star">
                <StarOutlined />
              </DUpload.Action>,
              <DUpload.Action style={{ padding: '0 4px' }} dPreset="remove">
                Delete
              </DUpload.Action>,
            ]}
          />
        }
        dXHRRequest={{ url: 'https://rd-upload.free.beeceptor.com' }}
        onModelChange={setFiles}
      >
        {({ trigger, list }) => (
          <>
            {trigger}
            {list}
          </>
        )}
      </DUpload>
      <DModal
        dVisible={visible}
        dHeader={<DModal.Header>{file?.name}</DModal.Header>}
        onClose={() => {
          setVisible(false);
        }}
      >
        <img style={{ width: '100%' }} src={file?.url} alt={file?.name} />
      </DModal>
    </>
  );
}