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

import { Layout, DefaultLayout, shortcut, pixFormat, isWidthOrHeight, emptyFn, createWidget, isKey, isFunction, isUndefined } from "@/core";
import { Single } from "./0.single";

/**
 * guy 表示一行数据，通过position来定位位置的数据
 * @class Text
 * @extends 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": pixFormat(hgap + lgap),
            });
        }
        if (hgap + rgap > 0) {
            this.element.css({
                "padding-right": pixFormat(hgap + rgap),
            });
        }
        if (vgap + tgap > 0) {
            this.element.css({
                "padding-top": pixFormat(vgap + tgap),
            });
        }
        if (vgap + bgap > 0) {
            this.element.css({
                "padding-bottom": pixFormat(vgap + bgap),
            });
        }
        if (isWidthOrHeight(height)) {
            this.element.css({ lineHeight: pixFormat(height) });
        }
        if (isWidthOrHeight(lineHeight)) {
            this.element.css({ lineHeight: pixFormat(lineHeight) });
        }
        if (isWidthOrHeight(maxWidth)) {
            this.element.css({ maxWidth: pixFormat(maxWidth) });
        }
        this.element.css({
            textAlign,
            whiteSpace: this._getTextWrap(),
            textOverflow: whiteSpace === "nowrap" ? "ellipsis" : "",
            overflow: whiteSpace === "nowrap" ? "" : isWidthOrHeight(height) ? "auto" : "",
        });
        if (handler && handler !== emptyFn) {
            this.text = createWidget({
                type: Layout.xtype,
                tagName: "span",
            });
            this.text.element.click(e => {
                !disabled && !invalid && handler.call(this, this.getValue(), this, e);
            });
            createWidget({
                type: DefaultLayout.xtype,
                element: this,
                items: [this.text],
            });
        } else {
            this.text = this;
        }

        const text = isFunction(optionsText)
            ? this.__watch(optionsText, (context, newValue) => {
                this.setText(newValue);
            })
            : optionsText;
        // 只要不是undefined就可以显示text值，否则显示value
        if (!isUndefined(text)) {
            this.setText(text);
        } else if (isKey(value)) {
            this.setText(value);
        }
        if (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 = isFunction(optionsText) ? optionsText() : optionsText;

        return 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 (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;
};