game_web_uk/src/components/MsgBox/index.jsx

import { Component } from "react";
import Modal from "@mui/material/Modal";
import Fade from "@mui/material/Fade";
import { ClickAwayListener } from "@mui/base/ClickAwayListener";
import Grow from "@mui/material/Grow";
import styles from "./styles.module.scss";
import MainButton from "@components/Buttons/MainButton";
const i18n = global.i18n;
class MsgBox extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isShow: false,
            title: "",
            content: '',
            sureLabel: '',
            cancelLabel: '',
            onlySure: false,
            isLockClose: false,
        };
    }
    show({ title = '', content = '', sureCB = null, cancelCB = null, sureLabel = '', cancelLabel = '', onlySure = false, isLockClose = false }) {
        if (title === '') title = i18n.t('msgbox.title');
        if (sureLabel === '') sureLabel = i18n.t('msgbox.sure_label');
        if (cancelLabel === '') cancelLabel = i18n.t('msgbox.cancel_label');
        this.sureCB = sureCB;
        this.cancelCB = cancelCB;
        this.setState({
            isShow: true,
            title: title,
            content: content,
            sureLabel: sureLabel,
            cancelLabel: cancelLabel,
            onlySure: onlySure,
            isLockClose: isLockClose
        })
    }
    hide() {
        this.setState({
            isShow: false,
        })
    }
    onClickBtn(type) {
        if (type === 1) {
            if (this.sureCB != null) this.sureCB();
            this.hide();
        }
        else {
            if (this.cancelCB != null) this.cancelCB(type === 0);
            if (!this.state.isLockClose) this.hide();
        }
    }
    closeMsgBox() {
        this.onClickBtn(-1);
    }
    onClickSure() {
        this.onClickBtn(1);
    }
    onClickCancel() {
        this.onClickBtn(0);
    }
    render() {
        return (
            <Modal open={this.state.isShow} onClose={this.closeMsgBox.bind(this)} closeAfterTransition>
                <Fade in={this.state.isShow} timeout={500}>
                    <div className="popup-container">
                        <ClickAwayListener onClickAway={this.closeMsgBox.bind(this)}>
                            <Grow in={this.state.isShow} timeout={500}>
                                <div className={`popup card card-padded ${styles.msg_box}`}>
                                    <div className={styles.msg_content}>
                                        <div className={styles.title}>{this.state.title}</div>
                                        <div className={styles.content}>{this.state.content}</div>
                                        <div className={styles.msg_btn}>
                                            {
                                                this.state.onlySure ? (<></>) : (
                                                    <MainButton grey onClick={this.onClickCancel.bind(this)} size="md">
                                                        {this.state.cancelLabel}
                                                    </MainButton>
                                                )
                                            }
                                            <MainButton onClick={this.onClickSure.bind(this)} size="md">
                                                {this.state.sureLabel}
                                            </MainButton>
                                        </div>
                                    </div>
                                </div>
                            </Grow>
                        </ClickAwayListener>
                    </div>
                </Fade>
            </Modal>
        )
    }
}
export default MsgBox;