KERNEL-13883 refactor:base/single/tip文件夹es6化

src/base/single/tip/0.tip.js

@@ -6,18 +6,19 @@
  * @extends BI.Single
  * @abstract
  */
-BI.Tip = BI.inherit(BI.Single, {
+export class Tip extends BI.Single {
-    _defaultConfig: function () {
+  _defaultConfig() {
-        var conf = BI.Tip.superclass._defaultConfig.apply(this, arguments);
+    const conf = super._defaultConfig(arguments);
+    return BI.extend(conf, {
+      _baseCls: (conf._baseCls || "") + " bi-tip",
+      zIndex: BI.zIndex_tip,
+  });
+  }
 
-        return BI.extend(conf, {
+  _init() {
-            _baseCls: (conf._baseCls || "") + " bi-tip",
+    super._init();
-            zIndex: BI.zIndex_tip,
+    this.element.css({ zIndex: this.options.zIndex });
-        });
+  }
-    },
+}
 
-    _init: function () {
+BI.extend(BI, { Tip });
-        BI.Tip.superclass._init.apply(this, arguments);
-        this.element.css({ zIndex: this.options.zIndex });
-    },
-});

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

@@ -5,115 +5,123 @@
  * @class BI.Toast
  * @extends BI.Tip
  */
-BI.Toast = BI.inherit(BI.Tip, {
-    _const: {
-        closableMinWidth: 146,
-        minWidth: 100,
-        closableMaxWidth: 410,
-        maxWidth: 400,
-    },
 
-    _defaultConfig: function () {
+import { shortcut } from "../../../core/decorator";
-        return BI.extend(BI.Toast.superclass._defaultConfig.apply(this, arguments), {
+@shortcut()
-            extraCls: "bi-toast",
+export class Toast extends BI.Tip {
-            text: "",
+  _const= {
-            level: "success", // success或warning
+      closableMinWidth: 146,
-            autoClose: true,
+      minWidth: 100,
-            closable: null,
+      closableMaxWidth: 410,
-            textHeight: 20,
+      maxWidth: 400,
-            vgap: 10,
+  }
-            innerHgap: 4,
-            hgap: 8,
-        });
-    },
 
-    render: function () {
+  static EVENT_DESTORY = "EVENT_DESTORY";
-        var self = this, o = this.options, c = this._const;
+  static xtype = "bi.toast";
-        this.element.css({
+
-            minWidth: BI.pixFormat(o.closable ? c.closableMinWidth : c.minWidth),
+  _defaultConfig() {
-            maxWidth: BI.pixFormat(o.closable ? c.closableMaxWidth : c.maxWidth),
+    return BI.extend(super._defaultConfig(arguments), {
-        });
+        extraCls: "bi-toast",
-        this.element.addClass("toast-" + o.level);
+        text: "",
-        function fn(e) {
+        level: "success", // success或warning
-            e.stopPropagation();
+        autoClose: true,
-            e.stopEvent();
+        closable: null,
-            
+        textHeight: 20,
-            return false;
+        vgap: 10,
-        }
+        innerHgap: 4,
-        this.element.bind({
+        hgap: 8,
-            click: fn,
+    });
-            mousedown: fn,
+  }
-            mouseup: fn,
-            mouseover: fn,
-            mouseenter: fn,
-            mouseleave: fn,
-            mousemove: fn,
-        });
-        var cls;
-        switch (o.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() {
+  render() {
-            return o.closable === true || (o.closable === null && o.autoClose === false);
+    const { closable, level, autoClose, textHeight, text, hgap, vgap, innerHgap } = this.options;
-        }
+    const { closableMinWidth, minWidth, maxWidth, closableMaxWidth } = this._const;
-        var items = [{
+    this.element.css({
-            type: "bi.icon_label",
+        minWidth: BI.pixFormat(closable ? closableMinWidth : minWidth),
-            cls: cls + " toast-icon",
+        maxWidth: BI.pixFormat(closable ? closableMaxWidth : maxWidth),
-            height: o.textHeight,
+    });
-        }, {
+    this.element.addClass("toast-" + level);
-            el: BI.isPlainObject(o.text) ? o.text : {
+    function fn(e) {
-                type: "bi.label",
+        e.stopPropagation();
-                whiteSpace: "normal",
+        e.stopEvent();
-                text: o.text,
+        
-                textHeight: o.textHeight,
+        return false;
-                textAlign: "left",
+    }
+    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("");
+    }
 
-        var columnSize = ["", "fill"];
+    return {
+        type: "bi.horizontal",
+        horizontalAlign: BI.HorizontalAlign.Stretch,
+        items: items,
+        hgap: hgap,
+        vgap: vgap,
+        innerHgap: innerHgap,
+        columnSize: columnSize,
+    };
+  }
 
-        if (hasCloseIcon()) {
+  beforeDestroy() {
-            items.push({
+    this.fireEvent(Toast.EVENT_DESTORY);
-                type: "bi.icon_button",
+  }
-                cls: "close-font toast-icon",
-                handler: function () {
-                    self.destroy();
-                },
-                height: o.textHeight,
-            });
-            columnSize.push("");
-        }
 
-        return {
+}
-            type: "bi.horizontal",
-            horizontalAlign: BI.HorizontalAlign.Stretch,
-            items: items,
-            hgap: o.hgap,
-            vgap: o.vgap,
-            innerHgap: o.innerHgap,
-            columnSize: columnSize,
-        };
-    },
 
-    beforeDestroy: function () {
+BI.extend(BI, { Toast });
-        this.fireEvent(BI.Toast.EVENT_DESTORY);
-    },
-});
-BI.Toast.EVENT_DESTORY = "EVENT_DESTORY";
-BI.shortcut("bi.toast", BI.Toast);

src/base/single/tip/tip.tooltip.js

@@ -5,85 +5,90 @@
  * @class BI.Tooltip
  * @extends BI.Tip
  */
-BI.Tooltip = BI.inherit(BI.Tip, {
+
-    _const: {
+import { shortcut } from "../../../core/decorator";
+@shortcut()
+export class Tooltip extends BI.Tip {
+    _const = {
         hgap: 8,
         vgap: 4,
-    },
+    }
+  static xtype = "bi.tooltip";
+  
+  _defaultConfig() {
+    return BI.extend(super._defaultConfig(arguments), {
+        extraCls: "bi-tooltip",
+        text: "",
+        level: "success", // success或warning
+        stopEvent: false,
+        stopPropagation: false,
+        textAlign: "left",
+    });
+  }
 
-    _defaultConfig: function () {
+  render () {
-        return BI.extend(BI.Tooltip.superclass._defaultConfig.apply(this, arguments), {
+    const { level, stopPropagation, stopEvent, text, textAlign  } = this.options;
-            extraCls: "bi-tooltip",
+    this.element.addClass("tooltip-" + level);
-            text: "",
+    function fn(e) {
-            level: "success", // success或warning
+        stopPropagation && e.stopPropagation();
-            stopEvent: false,
+        stopEvent && e.stopEvent();
-            stopPropagation: false,
+    }
-            textAlign: "left",
+    this.element.bind({
-        });
+        click: fn,
-    },
+        mousedown: fn,
+        mouseup: fn,
+        mouseover: fn,
+        mouseenter: fn,
+        mouseleave: fn,
+        mousemove: fn,
+    });
 
-    render: function () {
+    const texts = (text + "").split("\n");
-        var o = this.options;
+    if (texts.length > 1) {
-        this.element.addClass("tooltip-" + o.level);
+        BI.createWidget({
-        function fn(e) {
+            type: "bi.vertical",
-            o.stopPropagation && e.stopPropagation();
+            element: this,
-            o.stopEvent && e.stopEvent();
+            hgap: this._const.hgap,
-        }
+            innerVgap: this._const.vgap,
-        this.element.bind({
+            items: BI.map(texts, function (i, text) {
-            click: fn,
+                return {
-            mousedown: fn,
+                    type: "bi.label",
-            mouseup: fn,
+                    textAlign: textAlign,
-            mouseover: fn,
+                    whiteSpace: "normal",
-            mouseenter: fn,
+                    text: text,
-            mouseleave: fn,
+                    textHeight: 18,
-            mousemove: fn,
+                    title: null,
+                };
+            }),
         });
-
-        var texts = (o.text + "").split("\n");
-        if (texts.length > 1) {
-            BI.createWidget({
-                type: "bi.vertical",
-                element: this,
-                hgap: this._const.hgap,
-                innerVgap: this._const.vgap,
-                items: BI.map(texts, function (i, text) {
-                    return {
-                        type: "bi.label",
-                        textAlign: o.textAlign,
-                        whiteSpace: "normal",
-                        text: text,
-                        textHeight: 18,
-                        title: null,
-                    };
-                }),
-            });
         } else {
             this.text = BI.createWidget({
                 type: "bi.label",
                 element: this,
-                textAlign: o.textAlign,
+                textAlign: textAlign,
                 whiteSpace: "normal",
-                text: o.text,
+                text: text,
                 title: null,
                 textHeight: 18,
                 hgap: this._const.hgap,
                 vgap: this._const.vgap,
             });
         }
-    },
+    }
 
-    setWidth: function (width) {
+    setWidth(width) {
         this.element.width(BI.pixFormat(width - 2 * this._const.hgap));
-    },
+    }
 
-    setText: function (text) {
+    setText(text) {
         this.text && this.text.setText(text);
-    },
+    }
 
-    setLevel: function (level) {
+    setLevel(level) {
         this.element.removeClass("tooltip-success").removeClass("tooltip-warning");
         this.element.addClass("tooltip-" + level);
-    },
+    }
-});
+
+}
 
-BI.shortcut("bi.tooltip", BI.Tooltip);
+BI.extend(BI, { Tooltip });