fineui/src/base/single/0.single.js

/**
 * 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());
    }
}