All files / src/modal/_example ModalSceneExample.jsx

50% Statements 7/14
50% Branches 2/4
14.29% Functions 1/7
50% Lines 7/14

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 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62          1x   1x                     1x           1x           1x                         1x 1x                                  
import React, { Fragment, useState } from "react";
import { Button } from "@tencent/tea-component/lib/button";
import { Modal } from "@tencent/tea-component/lib/modal";
 
export default function ModalSceneExample() {
  const [answer, setAnswer] = useState(null);
 
  const askQuestion = async () => {
    const yes = await Modal.confirm({
      message: "确认删除当前所选实例?",
      description: "删除后,该实例下的所有配置将会被清空,且无法恢复。",
      okText: "删除",
      cancelText: "取消",
    });
 
    setAnswer(yes ? "已删除" : "未删除");
  };
 
  const alertSuccess = () =>
    Modal.success({
      message: "路由表更新成功!",
      description: "配置将在 1-3 分钟内同步到集群中的路由节点",
    });
 
  const alertError = () =>
    Modal.error({
      message: "路由表更新失败!",
      description: "路由表包含无效的路由转发策略公网网关的网络",
    });
 
  const alertCustom = () =>
    Modal.alert({
      type: "pending",
      message: "重启成功",
      description: "大约需要 2 分钟,请稍后再登录机器",
      buttons: [
        <Button type="primary" onClick={() => console.log("已确认")}>
          确认
        </Button>,
        <Button onClick={() => window.location.reload()}>刷新页面</Button>,
      ],
    });
 
  const style = { marginRight: 5 };
  return (
    <Fragment>
      <Button style={style} onClick={askQuestion}>
        {answer || "删除前询问"}
      </Button>
      <Button style={style} onClick={alertSuccess}>
        提示成功
      </Button>
      <Button style={style} onClick={alertError}>
        提示失败
      </Button>
      <Button style={style} onClick={alertCustom}>
        自定义提示
      </Button>
    </Fragment>
  );
}