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