Dialog 弹出框

function ImperativeDialog() {
  return (
    <>
      {/* <Dialog id="dialog" /> */}
      <Cell
        title="提示弹窗"
        clickable
        bordered
        isLink
        onClick={() =>
          Dialog.alert({ title: "标题", message: "代码是写出来给人看的，附带能在机器上运行" })
        }
      />
    </>
  )
}

<Dialog
  open
  title="标题"
  message="代码是写出来给人看的，附带能在机器上运行"
  messageAlign="left"
  confirm="ok"
  cancel="cancel"
  onConfirm={() => console.log("confirm")}
  onCancel={() => console.log("cancel")}
/>

function TextDialog() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Cell title="提示弹窗" clickable bordered isLink onClick={() => setOpen(true)} />
      <Dialog open={open} onClose={setOpen}>
        <Dialog.Header>标题</Dialog.Header>
        <Dialog.Content>代码是写出来给人看的，附带能在机器上运行</Dialog.Content>
        <Dialog.Actions>
          <Button onClick={() => setOpen(false)}>取消</Button>
          <Button onClick={() => setOpen(false)}>确认</Button>
        </Dialog.Actions>
      </Dialog>
    </>
  )
}

Dialog.alert("生命远不止连轴转和忙到极限，人类的体验远比这辽阔、丰富得多。")

function BasicDialog() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Cell title="提示弹窗" clickable bordered isLink onClick={() => setOpen(true)} />
      <Dialog open={open} onClose={setOpen}>
        <Dialog.Header>标题</Dialog.Header>
        <Dialog.Content>代码是写出来给人看的，附带能在机器上运行</Dialog.Content>
        <Dialog.Actions>
          <Button onClick={() => setOpen(false)}>确认</Button>
        </Dialog.Actions>
      </Dialog>
    </>
  )
}

Dialog.confirm({ title: "标题", message: "代码是写出来给人看的，附带能在机器上运行" })

function ConfirmDialog() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Cell title="确认弹窗" clickable bordered isLink onClick={() => setOpen(true)} />
      <Dialog open={open} onClose={setOpen}>
        <Dialog.Header>标题</Dialog.Header>
        <Dialog.Content>代码是写出来给人看的，附带能在机器上运行</Dialog.Content>
        <Dialog.Actions>
          <Button onClick={() => setOpen(false)}>取消</Button>
          <Button onClick={() => setOpen(false)}>确认</Button>
        </Dialog.Actions>
      </Dialog>
    </>
  )
}

Dialog.confirm({
  theme: "rounded",
  title: "标题",
  message: "代码是写出来给人看的，附带能在机器上运行",
})

function RoundedDialog() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Cell title="提示弹窗" clickable bordered isLink onClick={() => setOpen(true)} />
      <Dialog open={open} onClose={setOpen}>
        <Dialog.Header>标题</Dialog.Header>
        <Dialog.Content>代码是写出来给人看的，附带能在机器上运行</Dialog.Content>
        <Dialog.Actions variant="rounded">
          <Button onClick={() => setOpen(false)}>取消</Button>
          <Button onClick={() => setOpen(false)}>确认</Button>
        </Dialog.Actions>
      </Dialog>
    </>
  )
}

function AsyncCloseDialog() {
  return (
    <>
      <Cell
        title="异步关闭"
        clickable
        bordered
        isLink
        onClick={() =>
          Dialog.confirm({
            title: "标题",
            message: "如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。",
            async onBeforeClose(action) {
              return new Promise((resolve) => {
                setTimeout(() => {
                  // action !== 'confirm'  拦截取消操作
                  resolve(action === "confirm")
                }, 1000)
              })
            },
            onCancel() {
              console.log("cancel")
            },
            onConfirm() {
              console.log("confirm")
            },
          })
        }
      />
    </>
  )
}