All files / src/modal/_example ModalSizeExample.jsx

66.67% Statements 8/12
100% Branches 0/0
50% Functions 4/8
75% Lines 6/8

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46          1x               5x   5x     1x               1x 5x                                    
import React, { Fragment, useState } from "react";
import { Modal } from "@tencent/tea-component/lib/modal";
import { Button } from "@tencent/tea-component/lib/button";
 
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>
  ));
}