fineui/src/base/single/html/html.js

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

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

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

    render() {
        const { vgap, hgap, lgap, rgap, tgap, bgap, height, lineHeight, maxWidth, textAlign, whiteSpace, handler, text, value, 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 (isNumber(height)) {
            this.element.css({ lineHeight: BI.pixFormat(height) });
        }
        if (isNumber(lineHeight)) {
            this.element.css({ lineHeight: BI.pixFormat(lineHeight) });
        }
        if (isWidthOrHeight(maxWidth)) {
            this.element.css({ maxWidth });
        }
        if (isNumber(maxWidth)) {
            this.element.css({ maxWidth: BI.pixFormat(maxWidth) });
        }
        this.element.css({
            textAlign,
            whiteSpace,
            textOverflow: whiteSpace === "nowrap" ? "ellipsis" : "",
            overflow: whiteSpace === "nowrap" ? "" : "auto",
        });
        if (handler) {
            this.text = createWidget({
                type: "bi.layout",
                tagName: "span",
            });
            this.text.element.click(() => {
                handler(this.getValue());
            });
            createWidget({
                type: "bi.default",
                element: this,
                items: [this.text],
            });
        } else {
            this.text = this;
        }

        if (isKey(text)) {
            this.setText(text);
        } else if (isKey(value)) {
            this.setText(value);
        }
        if (highLight) {
            this.doHighLight();
        }
    }

    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.text.element.html(text);
    }
}