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

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

/**
 * guy 表示一行数据，通过position来定位位置的数据
 * @class Html
 * @extends 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": 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 (isNumber(height)) {
            this.element.css({ lineHeight: pixFormat(height) });
        }
        if (isNumber(lineHeight)) {
            this.element.css({ lineHeight: pixFormat(lineHeight) });
        }
        if (isWidthOrHeight(maxWidth)) {
            this.element.css({ maxWidth });
        }
        if (isNumber(maxWidth)) {
            this.element.css({ maxWidth: pixFormat(maxWidth) });
        }
        this.element.css({
            textAlign,
            whiteSpace,
            textOverflow: whiteSpace === "nowrap" ? "ellipsis" : "",
            overflow: whiteSpace === "nowrap" ? "" : "auto",
        });
        if (handler) {
            this.text = createWidget({
                type: Layout.xtype,
                tagName: "span",
            });
            this.text.element.click(() => {
                handler(this.getValue());
            });
            createWidget({
                type: DefaultLayout.xtype,
                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);
    }
}