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