fineui/src/base/single/tip/tip.toast.js

/**
 * toast提示
 *
 * Created by GUY on 2015/9/7.
 * @class BI.Toast
 * @extends BI.Tip
 */

import { shortcut } from "../../../core/decorator";
@shortcut()
export class Toast extends BI.Tip {
  _const= {
      closableMinWidth: 146,
      minWidth: 100,
      closableMaxWidth: 410,
      maxWidth: 400,
  }

  static EVENT_DESTORY = "EVENT_DESTORY";
  static xtype = "bi.toast";

  _defaultConfig() {
    return BI.extend(super._defaultConfig(arguments), {
        extraCls: "bi-toast",
        text: "",
        level: "success", // success或warning
        autoClose: true,
        closable: null,
        textHeight: 20,
        vgap: 10,
        innerHgap: 4,
        hgap: 8,
    });
  }

  render() {
    const { closable, level, autoClose, textHeight, text, hgap, vgap, innerHgap } = this.options;
    const { closableMinWidth, minWidth, maxWidth, closableMaxWidth } = this._const;
    this.element.css({
        minWidth: BI.pixFormat(closable ? closableMinWidth : minWidth),
        maxWidth: BI.pixFormat(closable ? closableMaxWidth : maxWidth),
    });
    this.element.addClass("toast-" + level);
    function fn(e) {
        e.stopPropagation();
        e.stopEvent();
        
        return false;
    }
    this.element.bind({
        click: fn,
        mousedown: fn,
        mouseup: fn,
        mouseover: fn,
        mouseenter: fn,
        mouseleave: fn,
        mousemove: fn,
    });
    let cls;
    switch (level) {
        case "success":
            cls = "toast-success-font";
            break;
        case "error":
            cls = "toast-error-font";
            break;
        case "warning":
            cls = "toast-warning-font";
            break;
        case "loading":
            cls = "toast-loading-font anim-rotate";
            break;
        case "normal":
        default:
            cls = "toast-message-font";
            break;
    }

    function hasCloseIcon() {
        return closable === true || (closable === null && autoClose === false);
    }
    const items = [{
        type: "bi.icon_label",
        cls: cls + " toast-icon",
        height: textHeight,
    }, {
        el: BI.isPlainObject(text) ? text : {
            type: "bi.label",
            whiteSpace: "normal",
            text: text,
            textHeight: textHeight,
            textAlign: "left",
        },
    }];

    const columnSize = ["", "fill"];

    if (hasCloseIcon()) {
        items.push({
            type: "bi.icon_button",
            cls: "close-font toast-icon",
            handler: ()=> {
                this.destroy();
            },
            height: textHeight,
        });
        columnSize.push("");
    }

    return {
        type: "bi.horizontal",
        horizontalAlign: BI.HorizontalAlign.Stretch,
        items: items,
        hgap: hgap,
        vgap: vgap,
        innerHgap: innerHgap,
        columnSize: columnSize,
    };
  }

  beforeDestroy() {
    this.fireEvent(Toast.EVENT_DESTORY);
  }

}

BI.extend(BI, { Toast });