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 } from "../../core";
import { Toast } from "../single";

export const Msg = (() => {
    let $mask, $pop;

    const messageShows = [];

    const toastStack = [];

    return {
        alert (title, message, callback) {
            this._show(false, title, message, callback);
        },
        confirm (title, message, callback) {
            this._show(true, title, message, callback);
        },
        prompt (title, message, value, callback, min_width) {
            // Msg.prompt(title, message, value, callback, min_width);
        },
        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?.();
            };
        },
        _show (hasCancel, title, message, callback) {
            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: "bi.button",
                        text: i18nText("BI-Basic_Cancel"),
                        light: true,
                        handler () {
                            close();
                            if (isFunction(callback)) {
                                callback.apply(null, [false]);
                            }
                        },
                    },
                });
            }
            controlItems.push({
                el: {
                    type: "bi.button",
                    text: i18nText("BI-Basic_OK"),
                    handler () {
                        close();
                        if (isFunction(callback)) {
                            callback.apply(null, [true]);
                        }
                    },
                },
            });
            const conf = {
                element: $pop,
                type: "bi.center_adapt",
                items: [
                    {
                        type: "bi.border",
                        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) {}
                        },
                        cls: "bi-card",
                        items: {
                            north: {
                                el: {
                                    type: "bi.border",
                                    cls: "bi-message-title bi-background",
                                    items: {
                                        center: {
                                            el: {
                                                type: "bi.label",
                                                cls: "bi-font-bold",
                                                text: title || i18nText("BI-Basic_Prompt"),
                                                textAlign: "left",
                                                hgap: 20,
                                                height: 40,
                                            },
                                        },
                                        east: {
                                            el: {
                                                type: "bi.icon_button",
                                                cls: "bi-message-close close-font",
                                                //                                                    height: 50,
                                                handler () {
                                                    close();
                                                    if (isFunction(callback)) {
                                                        callback.apply(null, [false]);
                                                    }
                                                },
                                            },
                                            width: 56,
                                        },
                                    },
                                },
                                height: 40,
                            },
                            center: {
                                el: isPlainObject(message)
                                    ? message
                                    : {
                                        type: "bi.label",
                                        vgap: 10,
                                        hgap: 20,
                                        whiteSpace: "normal",
                                        text: message,
                                    },
                            },
                            south: {
                                el: {
                                    type: "bi.absolute",
                                    items: [
                                        {
                                            el: {
                                                type: "bi.right_vertical_adapt",
                                                lgap: 10,
                                                items: controlItems,
                                            },
                                            top: 0,
                                            left: 20,
                                            right: 20,
                                            bottom: 0,
                                        }
                                    ],
                                },
                                height: 44,
                            },
                        },
                        width: 450,
                        height: 200,
                    }
                ],
            };

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