fineui/packages/fineui/src/base/foundation/message.js

/**
 * z-index在1亿层级
 * 弹出提示消息框，用于模拟阻塞操作（通过回调函数实现）
 * @class Msg
 */
import {
    Widget,
    isString,
    isNull,
    isFunction,
    createWidget,
    remove,
    each,
    emptyFn,
    delay,
    zIndex_tip,
    i18nText,
    KeyCode,
    isPlainObject,
    SIZE_CONSANTS,
    CenterAdaptLayout,
    VerticalLayout,
    HTapeLayout,
    RightVerticalAdaptLayout
} from "../../core";
import { Button, IconLabel, Label, Toast } from "../single";

let $mask, $pop;

const messageShows = [];

const toastStack = [];

const AlertLevel = {
    WARNING: 'warning',
    INFO: 'info',
    ERROR: 'error',
    SUCCESS: 'success',
}

function getIconCls(level) {
    switch (level) {
        case AlertLevel.ERROR:
            return 'alert-error-font';
        case AlertLevel.SUCCESS:
            return 'alert-success-font';
        case AlertLevel.INFO:
            return 'alert-info-font';
        case AlertLevel.WARNING:
        default:
            return 'alert-warning-font';
    }
}


export const Msg = {
    alert(title, message, callback, config) {
        _show(false, title, message, callback, config);
    },
    confirm(title, message, callback, config) {
        _show(true, title, message, callback, config);
    },
    toast(message, options, context) {
        isString(options) && (options = { level: options });
        options = options || {};
        context = context || Widget._renderEngine.createElement("body");
        const level = options.level || "common";
        const autoClose = isNull(options.autoClose) ? true : options.autoClose;
        const callback = isFunction(options.callback) ? options.callback : emptyFn;
        const toast = createWidget({
            type: "bi.toast",
            cls: "bi-message-animate bi-message-leave",
            level,
            autoClose,
            closable: options.closable,
            text: message,
            listeners: [
                {
                    eventName: Toast.EVENT_DESTORY,
                    action() {
                        remove(toastStack, toast.element);
                        let _height = SIZE_CONSANTS.TOAST_TOP;
                        each(toastStack, (i, element) => {
                            element.css({ top: _height });
                            _height += element.outerHeight() + 10;
                        });
                        callback();
                    },
                }
            ],
        });
        let height = SIZE_CONSANTS.TOAST_TOP;
        each(toastStack, (i, element) => {
            height += element.outerHeight() + 10;
        });
        createWidget({
            type: "bi.absolute",
            element: context,
            items: [
                {
                    el: toast,
                    left: "50%",
                    top: height,
                }
            ],
        });
        toastStack.push(toast.element);
        toast.element.css({ "margin-left": (-1 * toast.element.outerWidth()) / 2 });
        toast.element.removeClass("bi-message-leave").addClass("bi-message-enter");

        autoClose &&
        delay(() => {
            toast.element.removeClass("bi-message-enter").addClass("bi-message-leave");
            toast.destroy?.();
        }, 5000);

        return function() {
            toast.element.removeClass("bi-message-enter").addClass("bi-message-leave");
            toast.destroy?.();
        };
    },
};

function _show(hasCancel, title, message, callback, config = {}) {
    config = {
        buttonHeight: 28,
        cancelText: i18nText("BI-Basic_Cancel"),
        sureText: i18nText("BI-Basic_OK"),
        level: AlertLevel.WARNING,
        ...config,
    }
    isNull($mask) &&
    ($mask = Widget._renderEngine
        .createElement("<div class=\"bi-z-index-mask\">")
        .css({
            position: "absolute",
            zIndex: zIndex_tip - 2,
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            opacity: 0.5,
        })
        .appendTo("body"));
    $pop = Widget._renderEngine
        .createElement("<div class=\"bi-message-depend\">")
        .css({
            position: "absolute",
            zIndex: zIndex_tip - 1,
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
        })
        .appendTo("body");

    function close() {
        messageShows[messageShows.length - 1].destroy();
        messageShows.pop();
        if (messageShows.length === 0) {
            $mask.remove();
            $mask = null;
        }
    }

    const controlItems = [];
    if (hasCancel === true) {
        controlItems.push({
            el: {
                type: Button.xtype,
                height: config.buttonHeight,
                text: config.cancelText,
                light: true,
                handler() {
                    close();
                    if (isFunction(callback)) {
                        callback.apply(null, [false]);
                    }
                },
            },
        });
    }
    controlItems.push({
        el: {
            type: Button.xtype,
            height: config.buttonHeight,
            text: config.sureText,
            handler() {
                close();
                if (isFunction(callback)) {
                    callback.apply(null, [true]);
                }
            },
        },
    });
    const conf = {
        element: $pop,
        type: CenterAdaptLayout.xtype,
        items: [
            {
                type: VerticalLayout.xtype,
                cls: "bi-card bi-border-radius",
                width: 450,
                css: {
                    'max-height': '100%'
                },
                hgap: 32,
                attributes: {
                    tabIndex: 1,
                },
                mounted() {
                    this.element.keyup(e => {
                        if (e.keyCode === KeyCode.ENTER) {
                            close();
                            if (isFunction(callback)) {
                                callback.apply(null, [true]);
                            }
                        } else if (e.keyCode === KeyCode.ESCAPE) {
                            close();
                            if (hasCancel === true) {
                                if (isFunction(callback)) {
                                    callback.apply(null, [false]);
                                }
                            }
                        }
                    });
                    try {
                        this.element.focus();
                    } catch (e) {
                    }
                },
                items: [
                    {
                        el: {
                            type: HTapeLayout.xtype,
                            height: 24,
                            items: [
                                {
                                    type: IconLabel.xtype,
                                    cls: `${getIconCls(config.level)} icon-size-20`,
                                    width: 24,
                                    height: 24,
                                },
                                {
                                    el: {
                                        type: Label.xtype,
                                        css: {"font-size": 16},
                                        cls: 'bi-font-bold', // 16px
                                        textAlign: 'left',
                                        text: title || i18nText('BI-Basic_Prompt'),
                                        lgap: 16,
                                    },
                                    width: 'fill',
                                },
                            ],
                        },
                        tgap: 32,
                    },
                    {
                        el: isPlainObject(message)
                            ? message
                            : {
                                type: Label.xtype,
                                css: { "font-size": 14 },
                                cls: 'alert-content',
                                textAlign: 'left',
                                text: message,
                                whiteSpace: 'normal',
                            },
                        height: 'fill',
                        tgap: 12,
                        lgap: 40,
                    },
                    {
                        el: config.footer && isFunction(config.footer) ? config.footer(close) : {
                            type: RightVerticalAdaptLayout.xtype,
                            lgap: 12,
                            items: controlItems,
                        },
                        tgap: 32,
                        bgap: 24,
                    },
                ],
            },
        ],
    };

    messageShows[messageShows.length] = createWidget(conf);
}