Browse Source

KERNEL-13928 refactor: es6化1.text.js

es6
impact 2 years ago
parent
commit
2314d4b58b
  1. 3
      src/base/index.js
  2. 331
      src/base/single/1.text.js

3
src/base/index.js

@ -1,12 +1,15 @@
import Pane from "./1.pane";
import Single from "./single/0.single";
import Text from "./single/1.text";
BI.extend(BI, {
Pane,
Single,
Text,
});
export {
Pane,
Single,
Text,
}

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

@ -3,172 +3,175 @@
* @class BI.Text
* @extends BI.Single
*/
!(function () {
BI.Text = BI.inherit(BI.Single, {
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: function () {
var self = this, o = this.options;
if (o.hgap + o.lgap > 0) {
this.element.css({
"padding-left": BI.pixFormat(o.hgap + o.lgap),
});
}
if (o.hgap + o.rgap > 0) {
this.element.css({
"padding-right": BI.pixFormat(o.hgap + o.rgap),
});
}
if (o.vgap + o.tgap > 0) {
this.element.css({
"padding-top": BI.pixFormat(o.vgap + o.tgap),
});
}
if (o.vgap + o.bgap > 0) {
this.element.css({
"padding-bottom": BI.pixFormat(o.vgap + o.bgap),
});
}
if (BI.isWidthOrHeight(o.height)) {
this.element.css({ lineHeight: BI.pixFormat(o.height) });
}
if (BI.isWidthOrHeight(o.lineHeight)) {
this.element.css({ lineHeight: BI.pixFormat(o.lineHeight) });
}
if (BI.isWidthOrHeight(o.maxWidth)) {
this.element.css({ maxWidth: BI.pixFormat(o.maxWidth) });
}
import { shortcut } from "../../core/decorator";
import { Single } from "../index";
import BI from "../../core/2.base";
@shortcut()
export default 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({
textAlign: o.textAlign,
whiteSpace: this._getTextWrap(),
textOverflow: o.whiteSpace === "nowrap" ? "ellipsis" : "",
overflow: o.whiteSpace === "nowrap" ? "" : (BI.isWidthOrHeight(o.height) ? "auto" : ""),
"padding-left": BI.pixFormat(hgap + lgap),
});
if (o.handler && o.handler !== BI.emptyFn) {
this.text = BI.createWidget({
type: "bi.layout",
tagName: "span",
});
this.text.element.click(function (e) {
!o.disabled && !o.invalid && o.handler.call(self, self.getValue(), self, e);
});
BI.createWidget({
type: "bi.default",
element: this,
items: [this.text],
});
} else {
this.text = this;
}
var text = BI.isFunction(o.text) ? this.__watch(o.text, function (context, newValue) {
self.setText(newValue);
}) : o.text;
// 只要不是undefined就可以显示text值,否则显示value
if (!BI.isUndefined(text)) {
this.setText(text);
} else if (BI.isKey(o.value)) {
this.setText(o.value);
}
if (BI.isKey(o.keyword)) {
this.doRedMark(o.keyword);
}
if (o.highLight) {
this.doHighLight();
}
},
_getTextWrap: function () {
var o = this.options;
switch (o.whiteSpace) {
case "nowrap":
return "pre";
case "normal":
return "pre-wrap";
default:
return o.whiteSpace;
}
},
_getShowText: function () {
var o = this.options;
var text = BI.isFunction(o.text) ? o.text() : o.text;
return BI.isKey(text) ? BI.Text.formatText(text + "") : text;
},
_doRedMark: function (keyword) {
var o = this.options;
// render之后做的doRedMark,这个时候虽然标红了,但是之后text mounted执行的时候并没有keyword
o.keyword = keyword;
this.text.element.__textKeywordMarked__(this._getShowText(), keyword, o.py);
},
doRedMark: function (keyword) {
if (BI.isKey(keyword)) {
this._doRedMark(keyword);
}
},
unRedMark: function () {
var o = this.options;
o.keyword = "";
this.text.element.__textKeywordMarked__(this._getShowText(), "", o.py);
},
doHighLight: function () {
this.text.element.addClass("bi-high-light");
},
unHighLight: function () {
this.text.element.removeClass("bi-high-light");
},
setValue: function (text) {
BI.Text.superclass.setValue.apply(this, arguments);
if (!this.isReadOnly()) {
this.setText(text);
}
},
setStyle: function (css) {
this.text.element.css(css);
},
setText: function (text) {
BI.Text.superclass.setText.apply(this, arguments);
this.options.text = text;
this._doRedMark(this.options.keyword);
},
});
var formatters = [];
BI.Text.addTextFormatter = function (formatter) {
formatters.push(formatter);
};
BI.Text.formatText = function (text) {
if (formatters.length > 0) {
for (var i = 0, len = formatters.length; i < len; i++) {
text = formatters[i](text);
}
}
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;
}
}
return text;
};
BI.shortcut("bi.text", BI.Text);
}());
_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;
};

Loading…
Cancel
Save