#Modal 弹窗

import { Button, Form, FormField, Input, Modal, Select } from '@sudden3/leaf-ui';
import { useRef, useState } from 'react';
export function ModalBasic() {
  const [open, setOpen] = useState(false);
  const formRef = useRef<HTMLFormElement>(null);
  return (
    <>
      <Button onClick={() => setOpen(true)}>编辑项目</Button>
      <Modal
        open={open}
        title="项目设置"
        confirmText="保存"
        onClose={() => setOpen(false)}
        onConfirm={() => formRef.current?.requestSubmit()}
      >
        <Form
          ref={formRef}
          layout="vertical"
          onSubmit={(event) => {
            event.preventDefault();
            setOpen(false);
          }}
        >
          <FormField label="项目名称" required>
            <Input name="name" defaultValue="Leaf UI" />
          </FormField>
          <FormField label="负责人">
            <Select
              name="owner"
              options={[
                { value: 'design', label: '设计团队' },
                { value: 'engineering', label: '工程团队' },
              ]}
            />
          </FormField>
        </Form>
      </Modal>
    </>
  );
}

import { Button, Modal } from '@sudden3/leaf-ui';
import { useState } from 'react';
export function ModalFooter() {
  const [open, setOpen] = useState(false);
  const [extra, setExtra] = useState(false);
  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        自定义底部
      </Button>
      <Modal
        open={open}
        title="扩展操作"
        onClose={() => setOpen(false)}
        footer={({ cancelButton, confirmButton }) => (
          <>
            <Button
              variant="ghost"
              style={{ marginRight: 'auto' }}
              onClick={() => setExtra(!extra)}
            >
              查看详情
            </Button>
            {cancelButton}
            {confirmButton}
          </>
        )}
      >
        <p>通过底部函数增加操作，保留默认取消与确定按钮。</p>
        {extra && <p>这里展示额外的信息。</p>}
      </Modal>
    </>
  );
}