diff --git a/src/base/single/tip/0.tip.js b/src/base/single/tip/0.tip.js index a13240d8b..21cd96deb 100644 --- a/src/base/single/tip/0.tip.js +++ b/src/base/single/tip/0.tip.js @@ -6,18 +6,19 @@ * @extends BI.Single * @abstract */ -BI.Tip = BI.inherit(BI.Single, { - _defaultConfig: function () { - var conf = BI.Tip.superclass._defaultConfig.apply(this, arguments); +export class Tip extends BI.Single { + _defaultConfig() { + const conf = super._defaultConfig(arguments); + return BI.extend(conf, { + _baseCls: (conf._baseCls || "") + " bi-tip", + zIndex: BI.zIndex_tip, + }); + } - return BI.extend(conf, { - _baseCls: (conf._baseCls || "") + " bi-tip", - zIndex: BI.zIndex_tip, - }); - }, + _init() { + super._init(); + this.element.css({ zIndex: this.options.zIndex }); + } +} - _init: function () { - BI.Tip.superclass._init.apply(this, arguments); - this.element.css({ zIndex: this.options.zIndex }); - }, -}); +BI.extend(BI, { Tip }); diff --git a/src/base/single/tip/tip.toast.js b/src/base/single/tip/tip.toast.js index e347ae062..124cf6af0 100644 --- a/src/base/single/tip/tip.toast.js +++ b/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 () { - return BI.extend(BI.Toast.superclass._defaultConfig.apply(this, arguments), { - extraCls: "bi-toast", - text: "", - level: "success", // success或warning - autoClose: true, - closable: null, - textHeight: 20, - vgap: 10, - innerHgap: 4, - hgap: 8, - }); - }, +import { shortcut } from "../../../core/decorator"; +@shortcut() +export class Toast extends BI.Tip { + _const= { + closableMinWidth: 146, + minWidth: 100, + closableMaxWidth: 410, + maxWidth: 400, + } - render: function () { - var self = this, o = this.options, c = this._const; - this.element.css({ - minWidth: BI.pixFormat(o.closable ? c.closableMinWidth : c.minWidth), - maxWidth: BI.pixFormat(o.closable ? c.closableMaxWidth : c.maxWidth), - }); - this.element.addClass("toast-" + o.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, - }); - 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; - } + 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, + }); + } - function hasCloseIcon() { - return o.closable === true || (o.closable === null && o.autoClose === false); - } - var items = [{ - type: "bi.icon_label", - cls: cls + " toast-icon", - height: o.textHeight, - }, { - el: BI.isPlainObject(o.text) ? o.text : { - type: "bi.label", - whiteSpace: "normal", - text: o.text, - textHeight: o.textHeight, - textAlign: "left", + 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(""); + } - var columnSize = ["", "fill"]; + return { + type: "bi.horizontal", + horizontalAlign: BI.HorizontalAlign.Stretch, + items: items, + hgap: hgap, + vgap: vgap, + innerHgap: innerHgap, + columnSize: columnSize, + }; + } - if (hasCloseIcon()) { - items.push({ - type: "bi.icon_button", - cls: "close-font toast-icon", - handler: function () { - self.destroy(); - }, - height: o.textHeight, - }); - columnSize.push(""); - } + beforeDestroy() { + this.fireEvent(Toast.EVENT_DESTORY); + } - return { - type: "bi.horizontal", - horizontalAlign: BI.HorizontalAlign.Stretch, - items: items, - hgap: o.hgap, - vgap: o.vgap, - innerHgap: o.innerHgap, - columnSize: columnSize, - }; - }, +} - beforeDestroy: function () { - this.fireEvent(BI.Toast.EVENT_DESTORY); - }, -}); -BI.Toast.EVENT_DESTORY = "EVENT_DESTORY"; -BI.shortcut("bi.toast", BI.Toast); +BI.extend(BI, { Toast }); diff --git a/src/base/single/tip/tip.tooltip.js b/src/base/single/tip/tip.tooltip.js index aae6d8e86..3d4f77382 100644 --- a/src/base/single/tip/tip.tooltip.js +++ b/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 () { - return BI.extend(BI.Tooltip.superclass._defaultConfig.apply(this, arguments), { - extraCls: "bi-tooltip", - text: "", - level: "success", // success或warning - stopEvent: false, - stopPropagation: false, - textAlign: "left", - }); - }, + render () { + const { level, stopPropagation, stopEvent, text, textAlign } = this.options; + this.element.addClass("tooltip-" + level); + function fn(e) { + stopPropagation && e.stopPropagation(); + stopEvent && e.stopEvent(); + } + this.element.bind({ + click: fn, + mousedown: fn, + mouseup: fn, + mouseover: fn, + mouseenter: fn, + mouseleave: fn, + mousemove: fn, + }); - render: function () { - var o = this.options; - this.element.addClass("tooltip-" + o.level); - function fn(e) { - o.stopPropagation && e.stopPropagation(); - o.stopEvent && e.stopEvent(); - } - this.element.bind({ - click: fn, - mousedown: fn, - mouseup: fn, - mouseover: fn, - mouseenter: fn, - mouseleave: fn, - mousemove: fn, + const texts = (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: textAlign, + whiteSpace: "normal", + text: text, + textHeight: 18, + 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 });