umi-game-template/src/utils/logic_tools/GameModal/game_modal.tsx

import React from "react";
import { Modal } from "antd";
import ModalCloseBtn from '@/utils/logic_tools/GameModal/CloseButton';
import { game_container_id } from '@/utils/game_setting/game_config';
import { intl_get } from '@/utils/tools/intl_helper';

export interface ModalItem {
  key: any,
  type: string,
}


export class GameModalController {
  public static modal_list: Array<ModalItem> = [];
  constructor() {}

  static destoryAll() {
    Modal.destroyAll();
  }

  static recordModal(key: any, type: string) {
    this.modal_list.push({
      key,
      type,
    });
  }

  static checkBeforeModal(type: string) {
    const target = this.findTypeModal(type);
    target.map(item => this.closeTypeModal(item.key, type));
  }

  static findTypeModal(type: string) {
    return this.modal_list.filter(item => item.type === type);
  }

  static closeTypeModal(key: any, type: string) {
    const targetIndex = this.modal_list.findIndex(item => (item.key === key && item.type === type));
    if (targetIndex || targetIndex === 0) {
      const target = this.modal_list[targetIndex];
      target.key.destroy();
      this.modal_list.splice(targetIndex, 1);
    }
  }

  static showPauseModal({
    mount = document.getElementById(game_container_id),
    className = "game-status-modal",
    content = intl_get({ id: "pause_modal_tip_text" }),
    okText = intl_get({ id: "pause_modal_ok_text" }),
    onOk = () => {},
    onCancel = () => {},
  }: any = {}) {
    this.checkBeforeModal("pause");
    const result = Modal.info({
      icon: null,
      iconType: undefined,
      title: null,
      content: (
        <div style={{ textAlign: 'center' }}>
          <ModalCloseBtn onClick={() => { onCancel(); }} />
          {content}
        </div>
      ),
      okText,
      width: 290,
      className,
      getContainer: () => mount || document.body,
      onOk
    });
    this.recordModal(result, "pause");
    if (document.body.style.overflow === "hidden") {
      document.body.style.overflow = "";
    }
    return result;
  }

  static showErrorModal({
    mount = document.getElementById(game_container_id),
    className = "game-status-modal",
    type = "common",
    okText = intl_get({ id: "error_loading_ok_text" }),
    onOk = () => {},
    onCancel = () => {},
  }: any = {}) {
    this.checkBeforeModal("error");
    let content = intl_get({ id: `error_loading_${type}_tip_text` });
    const result = Modal.error({
      icon: null,
      iconType: undefined,
      title: null,
      content: (
        <div style={{ textAlign: 'center' }}>
          <ModalCloseBtn onClick={() => { onCancel(); }} />
          {content}
        </div>
      ),
      okText,
      width: 290,
      className,
      getContainer: () => mount || document.body,
      onOk
    });
    this.recordModal(result, "error");
    if (document.body.style.overflow === "hidden") {
      document.body.style.overflow = "";
    }
    return result;
  }
}