fineui/src/base/single/1.text.js

/**
 * guy 表示一行数据，通过position来定位位置的数据
 * @class BI.Text
 * @extends BI.Single
 */
import { shortcut } from "../../core";
import { Single } from "./0.single";

@shortcut()
export class Text extends Single {
    static xtype = "bi.text";

    props = {
        baseCls: "bi-text",
        textAlign: "left",
        whiteSpace: "normal",
        lineHeight: null,
        handler: null, // 如果传入handler,表示处理文字的点击事件，不是区域的
        hgap: 0,
        vgap: 0,
        lgap: 0,
        rgap: 0,
        tgap: 0,
        bgap: 0,
        py: "",
        highLight: false,
    }

    render() {
        const { vgap, hgap, lgap, rgap, tgap, bgap, height, lineHeight, maxWidth, textAlign, whiteSpace, handler, disabled, invalid, text: optionsText, value, keyword, highLight } = this.options;
        if (hgap + lgap > 0) {
            this.element.css({
                "padding-left": BI.pixFormat(hgap + lgap),
            });
        }
        if (hgap + rgap > 0) {
            this.element.css({
                "padding-right": BI.pixFormat(hgap + rgap),
            });
        }
        if (vgap + tgap > 0) {
            this.element.css({
                "padding-top": BI.pixFormat(vgap + tgap),
            });
        }
        if (vgap + bgap > 0) {
            this.element.css({
                "padding-bottom": BI.pixFormat(vgap + bgap),
            });
        }
        if (BI.isWidthOrHeight(height)) {
            this.element.css({ lineHeight: BI.pixFormat(height) });
        }
        if (BI.isWidthOrHeight(lineHeight)) {
            this.element.css({ lineHeight: BI.pixFormat(lineHeight) });
        }
        if (BI.isWidthOrHeight(maxWidth)) {
            this.element.css({ maxWidth: BI.pixFormat(maxWidth) });
        }
        this.element.css({
            textAlign: textAlign,
            whiteSpace: this._getTextWrap(),
            textOverflow: whiteSpace === "nowrap" ? "ellipsis" : "",
            overflow: whiteSpace === "nowrap" ? "" : (BI.isWidthOrHeight(height) ? "auto" : ""),
        });
        if (handler && handler !== BI.emptyFn) {
            this.text = BI.createWidget({
                type: "bi.layout",
                tagName: "span",
            });
            this.text.element.click((e) => { 
                !disabled && !invalid && handler.call(this, this.getValue(), this, e);
            });
            BI.createWidget({
                type: "bi.default",
                element: this,
                items: [this.text],
            });
        } else {
            this.text = this;
        }

        const text = BI.isFunction(optionsText) ? this.__watch(optionsText, (context, newValue) => {
            this.setText(newValue);
        }) : optionsText;
        // 只要不是undefined就可以显示text值，否则显示value
        if (!BI.isUndefined(text)) {
            this.setText(text);
        } else if (BI.isKey(value)) {
            this.setText(value);
        }
        if (BI.isKey(keyword)) {
            this.doRedMark(keyword);
        }
        if (highLight) {
            this.doHighLight();
        }
    }

    _getTextWrap() {
        const { whiteSpace } = this.options;
        switch (whiteSpace) {
            case "nowrap":
                return "pre";
            case "normal":
                return "pre-wrap";
            default:
                return whiteSpace;
        }
    }

    _getShowText() {
        const { text: optionsText } = this.options;
        const text = BI.isFunction(optionsText) ? optionsText() : optionsText;

        return BI.isKey(text) ? Text.formatText(text + "") : text;
    }

    _doRedMark(keyword) {
        const { py } = this.options;
        // render之后做的doRedMark,这个时候虽然标红了，但是之后text mounted执行的时候并没有keyword
        this.options.keyword = keyword;
        this.text.element.__textKeywordMarked__(this._getShowText(), keyword, py);
    }

    doRedMark(keyword) {
        if (BI.isKey(keyword)) {
            this._doRedMark(keyword);
        }
    }

    unRedMark() {
        const { py } = this.options;
        this.options.keyword = "";
        this.text.element.__textKeywordMarked__(this._getShowText(), "", py);
    }

    doHighLight() {
        this.text.element.addClass("bi-high-light");
    }

    unHighLight() {
        this.text.element.removeClass("bi-high-light");
    }

    setValue(text) {
        super.setValue(text);
        if (!this.isReadOnly()) {
            this.setText(text);
        }
    }

    setStyle(css) {
        this.text.element.css(css);
    }

    setText(text) {
        super.setText(text);
        this.options.text = text;
        this._doRedMark(this.options.keyword);
    }
}

const formatters = [];
Text.addTextFormatter = (formatter) => {
    formatters.push(formatter);
};
Text.formatText = (text) => {
    if (formatters.length > 0) {
        for (let i = 0; i < formatters.length; i++) {
            text = formatters[i](text);
        }
    }

    return text;
};