#Modal 弹窗

import { Button, Form, FormField, Input, Modal, Select } from '@ifhover/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 '@ifhover/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>
    </>
  );
}

import { Button, Input, Modal } from '@ifhover/leaf-ui';

import { useRef, useState } from 'react';

export function Capabilities() {
  const [open, setOpen] = useState(false);
  const focus = useRef<HTMLInputElement>(null);
  return (
    <>
      <Button onClick={() => setOpen(true)}>{'打开编辑器'}</Button>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title={'临时草稿'}
        destroyOnClose
        initialFocus={focus}
        footer={({ cancelButton, confirmButton }) => (
          <>
            {cancelButton}
            {confirmButton}
          </>
        )}
      >
        <Input
          ref={focus}
          aria-label={'草稿标题'}
          placeholder={'关闭后不保留草稿'}
        />
      </Modal>
    </>
  );
}

import { Button, Modal } from '@ifhover/leaf-ui';

import { Save } from 'lucide-react';

import { useState } from 'react';

export function ModalDescription() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        带图标与说明
      </Button>
      <Modal
        open={open}
        title="保存设置"
        description="保存后，新设置将立即生效。"
        icon={<Save />}
        confirmText="保存"
        onClose={() => setOpen(false)}
        onConfirm={() => setOpen(false)}
      >
        确认保存当前设置？
      </Modal>
    </>
  );
}