/** * guy * 这仅仅只是一个超类, 所有简单控件的基类 * 1、类的控制, * 2、title的控制 * 3、文字超过边界显示3个点 * 4、cursor默认pointor * @class BI.Single * @extends BI.Widget * @abstract */ import { Widget, shortcut } from "../../core"; import { Tooltips } from "../0.base"; @shortcut() export class Single extends Widget { static xtype = "bi.single"; _defaultConfig() { const conf = super._defaultConfig(arguments); return BI.extend(conf, { readonly: false, title: null, warningTitle: null, // deprecated tipType: null, // deprecated success或warning belowMouse: false, // title是否跟随鼠标 enableHover: false, }); } _showToolTip(e, opt) { opt || (opt = {}); const { action } = this.options; const title = this.getTitle(); const showToolTip = (tooltipOpt) => { if (BI.isKey(tooltipOpt.text) && !Tooltips.has(this.getName())) { Tooltips.show(e, this.getName(), tooltipOpt, this, opt); if (action) { BI.Actions.runAction(action, "hover", this.options, this); } BI.Actions.runGlobalAction("hover", this.options, this); } } if (title instanceof Promise) { this.requestingTitle = title; title.then(resolvedTitle => { // 由于是异步的,所以无法避免Promise resolve时机问题,所以设计为:鼠标移出了则不显示,并且只显示最后一次发起的查询结果 this.mouseOver && this.requestingTitle === title && showToolTip(this._getTooltipOptions(resolvedTitle)); }); } else { showToolTip(this._getTooltipOptions(title)); } } _hideTooltip() { const tooltip = Tooltips.get(this.getName()); if (BI.isNotNull(tooltip)) { tooltip.element.fadeOut(200, () => { Tooltips.remove(this.getName()); }); } } _init() { const { value } = this.options; this.options.value = BI.isFunction(value) ? this.__watch(value, (context, newValue) => { this.setValue(newValue); }) : value; super._init(arguments); } _mounted() { const { enableHover, title, warningTitle, belowMouse, container } = this.options; if (enableHover || BI.isKey(title) || BI.isKey(warningTitle) || BI.isFunction(title) || BI.isFunction(warningTitle)) { this.enableHover({ belowMouse, container, }); } } _clearTimeOut() { if (BI.isNotNull(this.showTimeout)) { clearTimeout(this.showTimeout); this.showTimeout = null; } if (BI.isNotNull(this.hideTimeout)) { clearTimeout(this.hideTimeout); this.hideTimeout = null; } } _getTooltipOptions(title) { const { tipType } = this.options; let tooltipOpt = {}; if (BI.isPlainObject(title)) { tooltipOpt = title; } else { tooltipOpt.level = this.getTipType() || "success"; // 由于以前的用法,存在大量disabled:true搭配warningTitle的情况,所以这里做一个兼容,disabled:true的情况下,依然优先显示warningTitle,避免只设置了warningTitle而没有设置title的情况 if (BI.isNull(tipType) && !this.isEnabled()) { tooltipOpt.text = (this.getWarningTitle() || title); } else { tooltipOpt.text = tooltipOpt.level === "success" ? title : (this.getWarningTitle() || title); } } return tooltipOpt; } enableHover(opt) { opt || (opt = {}); let delayingTooltips; if (!this._hoverBinded) { this.element.unbind("mouseenter.title").on("mouseenter.title", (e) => { this._e = e; this.mouseOver = true; if (this.getTipType() === "warning" || (BI.isKey(this.getWarningTitle()) && !this.isEnabled())) { delayingTooltips = this.getName(); this.showTimeout = BI.delay(() => { if (BI.isNotNull(this.showTimeout) && delayingTooltips === this.getName()) { this._showToolTip(this._e || e, opt); } }, 200); } else if (this.getTipType() === "success" || this.isEnabled()) { delayingTooltips = this.getName(); this.showTimeout = BI.delay(() => { if (BI.isNotNull(this.showTimeout) && delayingTooltips === this.getName()) { this._showToolTip(this._e || e, opt); } }, 500); } }); this.element.unbind("mousemove.title").on("mousemove.title", (e) => { this._e = e; if (BI.isNotNull(this.showTimeout)) { clearTimeout(this.showTimeout); this.showTimeout = null; } if (BI.isNull(this.hideTimeout)) { this.hideTimeout = BI.delay(() => { if (BI.isNotNull(this.hideTimeout)) { this._hideTooltip(); } }, 500); } this.showTimeout = BI.delay(() => { // DEC-5321 IE下如果回调已经进入事件队列,clearTimeout将不会起作用 if (BI.isNotNull(this.showTimeout)) { if (BI.isNotNull(this.hideTimeout)) { clearTimeout(this.hideTimeout); this.hideTimeout = null; } // CHART-10611 在拖拽的情况下, 鼠标拖拽着元素离开了拖拽元素的容器,但是子元素在dom结构上仍然属于容器 // 这样会认为鼠标仍然在容器中, 500ms内放开的话,会在容器之外显示鼠标停留处显示容器的title if (this.element.__isMouseInBounds__(this._e || e)) { this._showToolTip(this._e || e, opt); } } }, 500); }); this.element.unbind("mouseleave.title").on("mouseleave.title", (e) => { this._e = null; this.mouseOver = false; this._clearTimeOut(); this._hideTooltip(); }); this._hoverBinded = true; } } disabledHover() { // 取消hover事件 this._clearTimeOut(); this._hideTooltip(); this.element.unbind("mouseenter.title") .unbind("mousemove.title") .unbind("mouseleave.title"); this._hoverBinded = false; } // opt: {container: '', belowMouse: false} setTitle(title, opt) { this.options.title = title; if (BI.isKey(title) || BI.isFunction(title)) { this.enableHover(opt); } else { this.disabledHover(); } } setWarningTitle(title, opt) { this.options.warningTitle = title; if (BI.isKey(title) || BI.isFunction(title)) { this.enableHover(opt); } else { this.disabledHover(); } } setTipType(type) { this.options.tipType = type; } getTipType() { return this.options.tipType; } isReadOnly() { return !!this.options.readonly; } getTitle() { const title = this.options.title; if (BI.isFunction(title)) { return title(); } return title; } getWarningTitle() { const title = this.options.warningTitle; if (BI.isFunction(title)) { return title(); } return title; } setValue(val) { if (!this.options.readonly) { this.options.value = val; this.options.setValue && this.options.setValue(val); } } getValue() { return this.options.value; } _destroyed() { if (BI.isNotNull(this.showTimeout)) { clearTimeout(this.showTimeout); this.showTimeout = null; } Tooltips.remove(this.getName()); } }