import React, { Fragment, useState } from "react";
import { Modal, Button } from "@tencent/tea-component";

export default function ModalSizeExample() {
  const [visible, setVisible] = useState({
    s: false,
    m: false,
    l: false,
    xl: false,
    auto: false,
  });

  const open = size => () =>
    setVisible(visible => ({ ...visible, [size]: true }));
  const close = size => () =>
    setVisible(visible => ({ ...visible, [size]: false }));

  const names = {
    s: "小号",
    m: "中号",
    l: "大号",
    xl: "超大号",
    auto: "自动适应",
  };

  return Object.entries(names).map(([size, name]) => (
    <Fragment key={size}>
      <Button onClick={open(size)} style={{ marginRight: 5 }}>
        {name} ({size})
      </Button>
      <Modal
        visible={visible[size]}
        // @ts-ignore
        size={size}
        caption={`${name}对话框`}
        onClose={close(size)}
      >
        <Modal.Body>
          {name} - {size.toUpperCase()}
        </Modal.Body>
      </Modal>
    </Fragment>
  ));
}