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

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,
 }

src/base/single/1.text.js

@@ -3,172 +3,175 @@
  * @class BI.Text
  * @extends BI.Single
  */
-!(function () {
+import { shortcut } from "../../core/decorator";
-    BI.Text = BI.inherit(BI.Single, {
+import { Single } from "../index";
-
+import BI from "../../core/2.base";
-        props: {
+
-            baseCls: "bi-text",
+@shortcut()
-            textAlign: "left",
+export default class Text extends Single {
-            whiteSpace: "normal",
+    static xtype = "bi.text";
-            lineHeight: null,
+
-            handler: null, // 如果传入handler,表示处理文字的点击事件，不是区域的
+    props = {
-            hgap: 0,
+        baseCls: "bi-text",
-            vgap: 0,
+        textAlign: "left",
-            lgap: 0,
+        whiteSpace: "normal",
-            rgap: 0,
+        lineHeight: null,
-            tgap: 0,
+        handler: null, // 如果传入handler,表示处理文字的点击事件，不是区域的
-            bgap: 0,
+        hgap: 0,
-            py: "",
+        vgap: 0,
-            highLight: false,
+        lgap: 0,
-        },
+        rgap: 0,
-
+        tgap: 0,
-        render: function () {
+        bgap: 0,
-            var self = this, o = this.options;
+        py: "",
-            if (o.hgap + o.lgap > 0) {
+        highLight: false,
-                this.element.css({
+    }
-                    "padding-left": BI.pixFormat(o.hgap + o.lgap),
+
-                });
+    render() {
-            }
+        const { vgap, hgap, lgap, rgap, tgap, bgap, height, lineHeight, maxWidth, textAlign, whiteSpace, handler, disabled, invalid, text: optionsText, value, keyword, highLight } = this.options;
-            if (o.hgap + o.rgap > 0) {
+        if (hgap + lgap > 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) });
-            }
             this.element.css({
-                textAlign: o.textAlign,
+                "padding-left": BI.pixFormat(hgap + lgap),
-                whiteSpace: this._getTextWrap(),
-                textOverflow: o.whiteSpace === "nowrap" ? "ellipsis" : "",
-                overflow: o.whiteSpace === "nowrap" ? "" : (BI.isWidthOrHeight(o.height) ? "auto" : ""),
             });
-            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;
+    _getShowText() {
-    };
+        const { text: optionsText } = this.options;
-    BI.shortcut("bi.text", BI.Text);
+        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;
+};