KERNEL-14069 refactor: case/layer、linearsegment、list es6化

src/case/index.js

@@ -6,6 +6,9 @@ import * as trigger from "./trigger";
 import * as loader from "./loader";
 import * as segment from "./segment";
 import { MultiSelectBar } from "./toolbar/toolbar.multiselect";
+import * as layer from "./layer";
+import * as linearSegment from "./linearsegment";
+import { SelectList } from "./list/list.select";
 
 Object.assign(BI, {
     ...button,
@@ -16,6 +19,9 @@ Object.assign(BI, {
     ...loader,
     ...segment,
     MultiSelectBar,
+    ...layer,
+    ...linearSegment,
+    SelectList,
 });
 
 export * from "./button";
@@ -25,6 +31,10 @@ export * from "./editor";
 export * from "./trigger";
 export * from "./loader";
 export * from "./segment";
+export * from "./layer";
+export * from "./linearsegment";
 export {
-    MultiSelectBar
+    MultiSelectBar,
+    SelectList
 };
+

src/case/layer/index.js

@@ -0,0 +1,4 @@
+export { MultiPopupView } from "./layer.multipopup";
+export { PopupPanel } from "./layer.panel";
+export { ListPane } from "./pane.list";
+export { Panel } from "./panel";

src/case/layer/layer.multipopup.js

@@ -4,57 +4,57 @@
  * @extends BI.Widget
  */
 
-BI.MultiPopupView = BI.inherit(BI.PopupView, {
-
-    _defaultConfig: function () {
-        var conf = BI.MultiPopupView.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            _baseCls: (conf._baseCls || "") + " bi-multi-list-view",
-            buttons: [BI.i18nText("BI-Basic_OK")]
+import { shortcut, extend, i18nText, each, createWidget, createItems } from "@/core";
+import { PopupView, ButtonGroup } from "@/base";
+@shortcut()
+export class MultiPopupView extends PopupView {
+    static xtype = "bi.multi_popup_view";
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    static EVENT_CLICK_TOOLBAR_BUTTON = "EVENT_CLICK_TOOLBAR_BUTTON";
+    _defaultConfig () {
+        const conf = super._defaultConfig(...arguments);
+        
+        return extend(conf, {
+            _baseCls: `${conf._baseCls || ""} bi-multi-list-view`,
+            buttons: [i18nText("BI-Basic_OK")],
         });
-    },
+    }
 
-    _createToolBar: function () {
-        var o = this.options, self = this;
+    _createToolBar () {
+        const o = this.options;
         if (o.buttons.length === 0) {
             return;
         }
 
-        var text = [];          // 构造[{text:content},……]
-        BI.each(o.buttons, function (idx, item) {
+        const text = []; // 构造[{text:content},……]
+        each(o.buttons, (idx, item) => {
             text.push({
                 text: item,
-                value: idx
+                value: idx,
             });
         });
 
-        this.buttongroup = BI.createWidget({
+        this.buttongroup = createWidget({
             type: "bi.button_group",
             cls: "list-view-toolbar bi-high-light bi-split-top",
             height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
-            items: BI.createItems(text, {
+            items: createItems(text, {
                 type: "bi.text_button",
                 once: false,
                 shadow: true,
-                isShadowShowingOnSelected: true
+                isShadowShowingOnSelected: true,
             }),
             layouts: [{
                 type: "bi.center",
                 hgap: 0,
-                vgap: 0
-            }]
+                vgap: 0,
+            }],
         });
 
-        this.buttongroup.on(BI.ButtonGroup.EVENT_CHANGE, function (value, obj) {
-            self.fireEvent(BI.MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, value, obj);
+        this.buttongroup.on(ButtonGroup.EVENT_CHANGE, (value, obj) => {
+            this.fireEvent(MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, value, obj);
         });
 
         return this.buttongroup;
     }
-
-});
-
-BI.MultiPopupView.EVENT_CHANGE = "EVENT_CHANGE";
-BI.MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON = "EVENT_CLICK_TOOLBAR_BUTTON";
-
-BI.shortcut("bi.multi_popup_view", BI.MultiPopupView);
+}

src/case/layer/layer.panel.js

@@ -4,29 +4,38 @@
  * @extends BI.MultiPopupView
  */
 
-BI.PopupPanel = BI.inherit(BI.MultiPopupView, {
-
-    _defaultConfig: function () {
-        var conf = BI.PopupPanel.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-popup-panel",
-            title: ""
+import { shortcut, extend, createWidget } from "@/core";
+import { IconButton } from "@/base";
+import { MultiPopupView } from "./layer.multipopup";
+@shortcut()
+export class PopupPanel extends MultiPopupView {
+    static xtype = "bi.popup_panel";
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    static EVENT_CLOSE = "EVENT_CLOSE";
+    static EVENT_CLICK_TOOLBAR_BUTTON = "EVENT_CLICK_TOOLBAR_BUTTON";
+    _defaultConfig () {
+        const conf = super._defaultConfig(...arguments);
+        
+        return extend(conf, {
+            baseCls: `${conf.baseCls || ""} bi-popup-panel`,
+            title: "",
         });
-    },
+    }
 
-    _createTool: function () {
-        var self = this, o = this.options;
-        var close = BI.createWidget({
+    _createTool () {
+        const o = this.options;
+        const close = createWidget({
             type: "bi.icon_button",
             cls: "close-h-font",
             width: 25,
-            height: 25
+            height: 25,
         });
-        close.on(BI.IconButton.EVENT_CHANGE, function () {
-            self.setVisible(false);
-            self.fireEvent(BI.PopupPanel.EVENT_CLOSE);
+        close.on(IconButton.EVENT_CHANGE, () => {
+            this.setVisible(false);
+            this.fireEvent(PopupPanel.EVENT_CLOSE);
         });
-        return BI.createWidget({
+        
+        return createWidget({
             type: "bi.htape",
             cls: "popup-panel-title bi-header-background",
             height: 25,
@@ -36,18 +45,12 @@ BI.PopupPanel = BI.inherit(BI.MultiPopupView, {
                     textAlign: "left",
                     text: o.title,
                     height: 25,
-                    lgap: 10
-                }
+                    lgap: 10,
+                },
             }, {
                 el: close,
-                width: 25
-            }]
+                width: 25,
+            }],
         });
     }
-});
-
-BI.PopupPanel.EVENT_CHANGE = "EVENT_CHANGE";
-BI.PopupPanel.EVENT_CLOSE = "EVENT_CLOSE";
-BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON = "EVENT_CLICK_TOOLBAR_BUTTON";
-
-BI.shortcut("bi.popup_panel", BI.PopupPanel);
+}

src/case/layer/pane.list.js

@@ -5,14 +5,19 @@
  * @class BI.ListPane
  * @extends BI.Pane
  */
-BI.ListPane = BI.inherit(BI.Pane, {
-
-    _defaultConfig: function () {
-        var conf = BI.ListPane.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-list-pane",
+import { shortcut, extend, each, createWidget, emptyFn, nextTick, concat, get, Controller, Events, LogicFactory, Direction, isNull, removeAt, isFunction, isNotEmptyString, isEmptyArray } from "@/core";
+import { Pane, ButtonGroup } from "@/base";
+@shortcut()
+export class ListPane extends Pane {
+    static xtype = "bi.list_pane";
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    _defaultConfig () {
+        const conf = super._defaultConfig(...arguments);
+        
+        return extend(conf, {
+            baseCls: `${conf.baseCls || ""} bi-list-pane`,
             logic: {
-                dynamic: true
+                dynamic: true,
             },
             lgap: 0,
             rgap: 0,
@@ -21,181 +26,373 @@ BI.ListPane = BI.inherit(BI.Pane, {
             vgap: 0,
             hgap: 0,
             items: [],
-            itemsCreator: BI.emptyFn,
-            hasNext: BI.emptyFn,
-            onLoaded: BI.emptyFn,
+            itemsCreator: emptyFn,
+            hasNext: emptyFn,
+            onLoaded: emptyFn,
             el: {
-                type: "bi.button_group"
-            }
+                type: "bi.button_group",
+            },
         });
-    },
-    _init: function () {
-        BI.ListPane.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-
-        this.button_group = BI.createWidget(o.el, {
+    }
+    _init () {
+        super._init(...arguments);
+        const o = this.options;
+        this.button_group = createWidget(o.el, {
             type: "bi.button_group",
-            chooseType: BI.ButtonGroup.CHOOSE_TYPE_SINGLE,
+            chooseType: ButtonGroup.CHOOSE_TYPE_SINGLE,
             behaviors: {},
             items: o.items,
             value: o.value,
-            itemsCreator: function (op, calback) {
+            itemsCreator: (op, callback) => {
                 if (op.times === 1) {
-                    self.empty();
-                    BI.nextTick(function () {
-                        self.loading();
+                    this.empty();
+                    nextTick(() => {
+                        this.loading();
                     });
                 }
-                o.itemsCreator(op, function () {
-                    calback.apply(self, arguments);
-                    o.items = BI.concat(o.items, BI.get(arguments, [0], []));
+                o.itemsCreator(op, (...args) => {
+                    callback(...args);
+                    o.items = concat(o.items, get(...args, [0], []));
                     if (op.times === 1) {
-                        o.items = BI.get(arguments, [0], []);
-                        BI.nextTick(function () {
-                            self.loaded();
+                        o.items = get(...args, [0], []);
+                        nextTick(() => {
+                            this.loaded();
                             // callback可能在loading之前执行, check保证显示正确
-                            self.check();
+                            this.check();
                         });
                     }
                 });
             },
             hasNext: o.hasNext,
             layouts: [{
-                type: "bi.vertical"
-            }]
+                type: "bi.vertical",
+            }],
         });
 
-        this.button_group.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
-            if (type === BI.Events.CLICK) {
-                self.fireEvent(BI.ListPane.EVENT_CHANGE, value, obj);
+        this.button_group.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => {
+            this.fireEvent(Controller.EVENT_CHANGE, ...args);
+            if (type === Events.CLICK) {
+                this.fireEvent(ListPane.EVENT_CHANGE, value, obj);
             }
         });
         this.check();
 
-        BI.createWidget(BI.extend({
-            element: this
-        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Top), BI.extend({
+        createWidget(extend({
+            element: this,
+        }, LogicFactory.createLogic(LogicFactory.createLogicTypeByDirection(Direction.Top), extend({
             scrolly: true,
             lgap: o.lgap,
             rgap: o.rgap,
             tgap: o.tgap,
             bgap: o.bgap,
             vgap: o.vgap,
-            hgap: o.hgap
+            hgap: o.hgap,
         }, o.logic, {
-            items: BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Top, this.button_group)
+            items: LogicFactory.createLogicItemsByDirection(Direction.Top, this.button_group),
         }))));
-    },
+    }
 
-    hasPrev: function () {
+    hasPrev () {
         return this.button_group.hasPrev && this.button_group.hasPrev();
-    },
+    }
 
-    hasNext: function () {
+    hasNext () {
         return this.button_group.hasNext && this.button_group.hasNext();
-    },
+    }
 
-    prependItems: function (items) {
+    prependItems (items) {
         this.options.items = items.concat(this.options.items);
-        this.button_group.prependItems.apply(this.button_group, arguments);
+        this.button_group.prependItems(...arguments);
         this.check();
-    },
+    }
 
-    addItems: function (items) {
+    addItems (items) {
         this.options.items = this.options.items.concat(items);
-        this.button_group.addItems.apply(this.button_group, arguments);
+        this.button_group.addItems(...arguments);
         this.check();
-    },
+    }
 
-    removeItemAt: function (indexes) {
-        indexes = BI.isNull(indexes) ? [] : indexes;
-        BI.removeAt(this.options.items, indexes);
-        this.button_group.removeItemAt.apply(this.button_group, arguments);
+    removeItemAt (indexes) {
+        indexes = isNull(indexes) ? [] : indexes;
+        removeAt(this.options.items, indexes);
+        this.button_group.removeItemAt(...arguments);
         this.check();
-    },
+    }
 
-    populate: function (items) {
-        var self = this, o = this.options;
-        if (arguments.length === 0 && (BI.isFunction(this.button_group.attr("itemsCreator")))) {// 接管loader的populate方法
-            this.button_group.attr("itemsCreator").apply(this, [{ times: 1 }, function () {
-                if (arguments.length === 0) {
+    populate (items) {
+        const o = this.options;
+        if (arguments.length === 0 && (isFunction(this.button_group.attr("itemsCreator")))) {// 接管loader的populate方法
+            this.button_group.attr("itemsCreator").apply(this, [{ times: 1 }, (...args) => {
+                if (args.length === 0) {
                     throw new Error("参数不能为空");
                 }
-                self.populate.apply(self, arguments);
+                this.populate(...args);
             }]);
+            
             return;
         }
 
-        var context = BI.get(arguments, [2], {});
-        var tipText = context.tipText || '';
-        if (BI.isNotEmptyString(tipText)) {
-            BI.ListPane.superclass.populate.apply(this, []);
+        const context = get(arguments, [2], {});
+        const tipText = context.tipText || "";
+        if (isNotEmptyString(tipText)) {
+            super.populate.apply(this, []);
             this.setTipText(tipText);
         } else {
-            BI.ListPane.superclass.populate.apply(this, arguments);
-            this.button_group.populate.apply(this.button_group, arguments);
-            BI.isEmptyArray(BI.get(arguments, [0], [])) && this.setTipText(o.tipText);
+            super.populate(...arguments);
+            this.button_group.populate(...arguments);
+            isEmptyArray(get(arguments, [0], [])) && this.setTipText(o.tipText);
         }
-    },
+    }
 
-    empty: function () {
+    empty () {
         this.button_group.empty();
-    },
+    }
 
-    setNotSelectedValue: function () {
-        this.button_group.setNotSelectedValue.apply(this.button_group, arguments);
-    },
+    setNotSelectedValue () {
+        this.button_group.setNotSelectedValue(...arguments);
+    }
 
-    getNotSelectedValue: function () {
+    getNotSelectedValue () {
         return this.button_group.getNotSelectedValue();
-    },
+    }
 
-    setValue: function () {
-        this.button_group.setValue.apply(this.button_group, arguments);
-    },
+    setValue () {
+        this.button_group.setValue(...arguments);
+    }
 
-    setAllSelected: function (v) {
+    setAllSelected (v) {
         if (this.button_group.setAllSelected) {
             this.button_group.setAllSelected(v);
         } else {
-            BI.each(this.getAllButtons(), function (i, btn) {
+            each(this.getAllButtons(), (i, btn) => {
                 (btn.setSelected || btn.setAllSelected).apply(btn, [v]);
             });
         }
-    },
+    }
 
-    getValue: function () {
-        return this.button_group.getValue.apply(this.button_group, arguments);
-    },
+    getValue () {
+        return this.button_group.getValue(...arguments);
+    }
 
-    getAllButtons: function () {
+    getAllButtons () {
         return this.button_group.getAllButtons();
-    },
+    }
 
-    getAllLeaves: function () {
+    getAllLeaves () {
         return this.button_group.getAllLeaves();
-    },
+    }
 
-    getSelectedButtons: function () {
+    getSelectedButtons () {
         return this.button_group.getSelectedButtons();
-    },
+    }
 
-    getNotSelectedButtons: function () {
+    getNotSelectedButtons () {
         return this.button_group.getNotSelectedButtons();
-    },
+    }
 
-    getIndexByValue: function (value) {
+    getIndexByValue (value) {
         return this.button_group.getIndexByValue(value);
-    },
+    }
 
-    getNodeById: function (id) {
+    getNodeById (id) {
         return this.button_group.getNodeById(id);
-    },
+    }
 
-    getNodeByValue: function (value) {
+    getNodeByValue (value) {
         return this.button_group.getNodeByValue(value);
     }
-});
-BI.ListPane.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.list_pane", BI.ListPane);
+}
+// BI.ListPane = BI.inherit(BI.Pane, {
+
+//     _defaultConfig: function () {
+//         var conf = BI.ListPane.superclass._defaultConfig.apply(this, arguments);
+//         return BI.extend(conf, {
+//             baseCls: (conf.baseCls || "") + " bi-list-pane",
+//             logic: {
+//                 dynamic: true
+//             },
+//             lgap: 0,
+//             rgap: 0,
+//             tgap: 0,
+//             bgap: 0,
+//             vgap: 0,
+//             hgap: 0,
+//             items: [],
+//             itemsCreator: BI.emptyFn,
+//             hasNext: BI.emptyFn,
+//             onLoaded: BI.emptyFn,
+//             el: {
+//                 type: "bi.button_group"
+//             }
+//         });
+//     },
+//     _init: function () {
+//         BI.ListPane.superclass._init.apply(this, arguments);
+//         var self = this, o = this.options;
+
+//         this.button_group = BI.createWidget(o.el, {
+//             type: "bi.button_group",
+//             chooseType: BI.ButtonGroup.CHOOSE_TYPE_SINGLE,
+//             behaviors: {},
+//             items: o.items,
+//             value: o.value,
+//             itemsCreator: function (op, calback) {
+//                 if (op.times === 1) {
+//                     self.empty();
+//                     BI.nextTick(function () {
+//                         self.loading();
+//                     });
+//                 }
+//                 o.itemsCreator(op, function () {
+//                     calback.apply(self, arguments);
+//                     o.items = BI.concat(o.items, BI.get(arguments, [0], []));
+//                     if (op.times === 1) {
+//                         o.items = BI.get(arguments, [0], []);
+//                         BI.nextTick(function () {
+//                             self.loaded();
+//                             // callback可能在loading之前执行, check保证显示正确
+//                             self.check();
+//                         });
+//                     }
+//                 });
+//             },
+//             hasNext: o.hasNext,
+//             layouts: [{
+//                 type: "bi.vertical"
+//             }]
+//         });
+
+//         this.button_group.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
+//             self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+//             if (type === BI.Events.CLICK) {
+//                 self.fireEvent(BI.ListPane.EVENT_CHANGE, value, obj);
+//             }
+//         });
+//         this.check();
+
+//         BI.createWidget(BI.extend({
+//             element: this
+//         }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Top), BI.extend({
+//             scrolly: true,
+//             lgap: o.lgap,
+//             rgap: o.rgap,
+//             tgap: o.tgap,
+//             bgap: o.bgap,
+//             vgap: o.vgap,
+//             hgap: o.hgap
+//         }, o.logic, {
+//             items: BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Top, this.button_group)
+//         }))));
+//     },
+
+//     hasPrev: function () {
+//         return this.button_group.hasPrev && this.button_group.hasPrev();
+//     },
+
+//     hasNext: function () {
+//         return this.button_group.hasNext && this.button_group.hasNext();
+//     },
+
+//     prependItems: function (items) {
+//         this.options.items = items.concat(this.options.items);
+//         this.button_group.prependItems.apply(this.button_group, arguments);
+//         this.check();
+//     },
+
+//     addItems: function (items) {
+//         this.options.items = this.options.items.concat(items);
+//         this.button_group.addItems.apply(this.button_group, arguments);
+//         this.check();
+//     },
+
+//     removeItemAt: function (indexes) {
+//         indexes = BI.isNull(indexes) ? [] : indexes;
+//         BI.removeAt(this.options.items, indexes);
+//         this.button_group.removeItemAt.apply(this.button_group, arguments);
+//         this.check();
+//     },
+
+//     populate: function (items) {
+//         var self = this, o = this.options;
+//         if (arguments.length === 0 && (BI.isFunction(this.button_group.attr("itemsCreator")))) {// 接管loader的populate方法
+//             this.button_group.attr("itemsCreator").apply(this, [{ times: 1 }, function () {
+//                 if (arguments.length === 0) {
+//                     throw new Error("参数不能为空");
+//                 }
+//                 self.populate.apply(self, arguments);
+//             }]);
+//             return;
+//         }
+
+//         var context = BI.get(arguments, [2], {});
+//         var tipText = context.tipText || '';
+//         if (BI.isNotEmptyString(tipText)) {
+//             BI.ListPane.superclass.populate.apply(this, []);
+//             this.setTipText(tipText);
+//         } else {
+//             BI.ListPane.superclass.populate.apply(this, arguments);
+//             this.button_group.populate.apply(this.button_group, arguments);
+//             BI.isEmptyArray(BI.get(arguments, [0], [])) && this.setTipText(o.tipText);
+//         }
+//     },
+
+//     empty: function () {
+//         this.button_group.empty();
+//     },
+
+//     setNotSelectedValue: function () {
+//         this.button_group.setNotSelectedValue.apply(this.button_group, arguments);
+//     },
+
+//     getNotSelectedValue: function () {
+//         return this.button_group.getNotSelectedValue();
+//     },
+
+//     setValue: function () {
+//         this.button_group.setValue.apply(this.button_group, arguments);
+//     },
+
+//     setAllSelected: function (v) {
+//         if (this.button_group.setAllSelected) {
+//             this.button_group.setAllSelected(v);
+//         } else {
+//             BI.each(this.getAllButtons(), function (i, btn) {
+//                 (btn.setSelected || btn.setAllSelected).apply(btn, [v]);
+//             });
+//         }
+//     },
+
+//     getValue: function () {
+//         return this.button_group.getValue.apply(this.button_group, arguments);
+//     },
+
+//     getAllButtons: function () {
+//         return this.button_group.getAllButtons();
+//     },
+
+//     getAllLeaves: function () {
+//         return this.button_group.getAllLeaves();
+//     },
+
+//     getSelectedButtons: function () {
+//         return this.button_group.getSelectedButtons();
+//     },
+
+//     getNotSelectedButtons: function () {
+//         return this.button_group.getNotSelectedButtons();
+//     },
+
+//     getIndexByValue: function (value) {
+//         return this.button_group.getIndexByValue(value);
+//     },
+
+//     getNodeById: function (id) {
+//         return this.button_group.getNodeById(id);
+//     },
+
+//     getNodeByValue: function (value) {
+//         return this.button_group.getNodeByValue(value);
+//     }
+// });
+// BI.ListPane.EVENT_CHANGE = "EVENT_CHANGE";
+// BI.shortcut("bi.list_pane", BI.ListPane);

src/case/layer/panel.js

@@ -1,11 +1,18 @@
-/**
- * 带有标题栏的pane
- * @class BI.Panel
- * @extends BI.Widget
- */
-BI.Panel = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
-        return BI.extend(BI.Panel.superclass._defaultConfig.apply(this, arguments), {
+
+import { shortcut, Widget, extend, toPix, Controller, createWidget } from "@/core";
+import { ButtonGroup } from "@/base";
+
+@shortcut()
+export class Panel extends Widget {
+    static xtype = "bi.panel"
+
+
+
+    static EVENT_CHANGE = "EVENT_CHANGE"
+
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-panel bi-border",
             title: "",
             titleHeight: 30,
@@ -15,62 +22,59 @@ BI.Panel = BI.inherit(BI.Widget, {
             //     dynamic: false
             // }
         });
-    },
+    }
 
-    render: function () {
+    render() {
         return {
             type: "bi.vertical_fill",
             rowSize: ["", "fill"],
-            items: [this._createTitle(), this.options.el]
+            items: [this._createTitle(), this.options.el],
         };
-    },
+    }
 
-    _createTitle: function () {
-        var self = this, o = this.options;
-        this.text = BI.createWidget({
+    _createTitle() {
+        const o = this.options;
+        this.text = createWidget({
             type: "bi.label",
             cls: "panel-title-text",
             text: o.title,
-            height: o.titleHeight
+            height: o.titleHeight,
         });
 
-        this.button_group = BI.createWidget({
+        this.button_group = createWidget({
             type: "bi.button_group",
             items: o.titleButtons,
             layouts: [{
                 type: "bi.center_adapt",
-                lgap: 10
-            }]
+                lgap: 10,
+            }],
         });
 
-        this.button_group.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+        this.button_group.on(Controller.EVENT_CHANGE, () => {
+            this.fireEvent(Controller.EVENT_CHANGE, ...arguments);
         });
 
-        this.button_group.on(BI.ButtonGroup.EVENT_CHANGE, function (value, obj) {
-            self.fireEvent(BI.Panel.EVENT_CHANGE, value, obj);
+        this.button_group.on(ButtonGroup.EVENT_CHANGE, (value, obj) => {
+            this.fireEvent(Panel.EVENT_CHANGE, value, obj);
         });
 
         return {
             // el: {
             type: "bi.left_right_vertical_adapt",
             cls: "panel-title bi-header-background bi-border-bottom",
-            height: BI.toPix(o.titleHeight, 1),
+            height: toPix(o.titleHeight, 1),
             items: {
                 left: [this.text],
-                right: [this.button_group]
+                right: [this.button_group],
             },
             lhgap: 10,
-            rhgap: 10
+            rhgap: 10,
             // },
-            // height: BI.toPix(o.titleHeight, 1)
+            // height: toPix(o.titleHeight, 1)
         };
-    },
+    }
 
-    setTitle: function (title) {
+    setTitle(title) {
         this.text.setValue(title);
     }
-});
-BI.Panel.EVENT_CHANGE = "EVENT_CHANGE";
-
-BI.shortcut("bi.panel", BI.Panel);
+}

src/case/linearsegment/button.linear.segment.js

@@ -1,26 +1,28 @@
-BI.LinearSegmentButton = BI.inherit(BI.BasicButton, {
 
-    props: {
-        extraCls: "bi-line-segment-button bi-list-item-effect",
-        once: true,
-        readonly: true,
-        hgap: 10,
-        height: 24
-    },
+import { shortcut, toPix } from "@/core";
+import { BasicButton } from "@/base";
 
-    render: function () {
-        var self = this, o = this.options;
+@shortcut()
+export class LinearSegmentButton extends BasicButton {
+	static xtype = "bi.linear_segment_button"
+
+    props = { extraCls:"bi-line-segment-button bi-list-item-effect", once:true, readonly:true, hgap:10, height:24 };
+
+
+
+    render () {
+        const o = this.options;
 
         return [{
             type: "bi.label",
             text: o.text,
             height: o.height,
-            textHeight: BI.toPix(o.height, 2),
+            textHeight: toPix(o.height, 2),
             value: o.value,
             hgap: o.hgap,
-            ref: function () {
-                self.text = this;
-            }
+            ref : _ref => {
+                this.text = _ref;
+            },
         }, {
             type: "bi.absolute",
             items: [{
@@ -28,28 +30,27 @@ BI.LinearSegmentButton = BI.inherit(BI.BasicButton, {
                     type: "bi.layout",
                     cls: "line-segment-button-line",
                     height: 2,
-                    ref: function () {
-                        self.line = this;
-                    }
+                    ref : _ref => {
+                        this.line = _ref;
+                    },
                 },
                 left: 0,
                 right: 0,
-                bottom: 0
-            }]
+                bottom: 0,
+            }],
         }];
-    },
+    }
 
-    setSelected: function (v) {
-        BI.LinearSegmentButton.superclass.setSelected.apply(this, arguments);
+    setSelected (v) {
+        super.setSelected(...arguments);
         if (v) {
             this.line.element.addClass("bi-high-light-background");
         } else {
             this.line.element.removeClass("bi-high-light-background");
         }
-    },
+    }
 
-    setText: function (text) {
+    setText (text) {
         this.text.setText(text);
     }
-});
-BI.shortcut("bi.linear_segment_button", BI.LinearSegmentButton);
+}

src/case/linearsegment/index.js

@@ -0,0 +1,2 @@
+export { LinearSegmentButton } from "./button.linear.segment";
+export { LinearSegment } from "./linear.segment";

src/case/linearsegment/linear.segment.js

@@ -1,60 +1,62 @@
-BI.LinearSegment = BI.inherit(BI.Widget, {
 
-    props: {
-        baseCls: "bi-linear-segment",
-        items: [],
-        height: 30
-    },
+import { shortcut, Widget, createItems, makeArrayByArray } from "@/core";
 
-    render: function () {
-        var self = this, o = this.options;
+@shortcut()
+export class LinearSegment extends Widget {
+	static xtype = "bi.linear_segment"
+
+    props = { baseCls:"bi-linear-segment", items:[], height:30 };
+
+
+
+    render () {
+        const o = this.options;
+        
         return {
             type: "bi.button_group",
-            items: [BI.createItems(o.items, {
+            items: [createItems(o.items, {
                 type: "bi.linear_segment_button",
-                height: o.height
+                height: o.height,
             })],
             layouts: [{
                 type: "bi.table",
-                columnSize: BI.makeArrayByArray(o.items, "fill"),
+                columnSize: makeArrayByArray(o.items, "fill"),
             }],
             value: o.value,
             listeners: [{
                 eventName: "__EVENT_CHANGE__",
-                action: function () {
-                    self.fireEvent("__EVENT_CHANGE__", arguments);
-                }
+                action () {
+                    this.fireEvent("__EVENT_CHANGE__", arguments);
+                },
             }, {
                 eventName: "EVENT_CHANGE",
-                action: function () {
-                    self.fireEvent("EVENT_CHANGE");
-                }
+                action () {
+                    this.fireEvent("EVENT_CHANGE");
+                },
             }],
-            ref: function () {
-                self.buttonGroup = this;
-            }
+            ref: _ref => {
+                this.buttonGroup = _ref;
+            },
         };
-    },
+    }
 
-    setValue: function (v) {
+    setValue (v) {
         this.buttonGroup.setValue(v);
-    },
+    }
 
-    setEnabledValue: function (v) {
+    setEnabledValue (v) {
         this.buttonGroup.setEnabledValue(v);
-    },
-
+    }
 
-    getValue: function () {
+    getValue () {
         return this.buttonGroup.getValue();
-    },
+    }
 
-    populate: function (buttons) {
-        var o = this.options;
-        this.buttonGroup.populate([BI.createItems(buttons, {
+    populate (buttons) {
+        const o = this.options;
+        this.buttonGroup.populate([createItems(buttons, {
             type: "bi.linear_segment_button",
-            height: o.height
-        })])
-    },
-});
-BI.shortcut("bi.linear_segment", BI.LinearSegment);
+            height: o.height,
+        })]);
+    }
+}

src/case/list/list.select.js

@@ -1,100 +1,105 @@
-/**
- * 选择列表
- *
- * Created by GUY on 2015/11/1.
- * @class BI.SelectList
- * @extends BI.Widget
- */
-BI.SelectList = BI.inherit(BI.Widget, {
-
-    _defaultConfig: function () {
-        return BI.extend(BI.SelectList.superclass._defaultConfig.apply(this, arguments), {
+/* eslint-disable no-mixed-spaces-and-tabs */
+
+import { shortcut, Widget, extend, emptyFn, Controller, createWidget, Events, isNotNull, isEmptyString, isEmptyArray, Direction, get, LogicFactory, each, pixFormat } from "@/core";
+import { ButtonGroup } from "@/base";
+@shortcut()
+export class SelectList extends Widget {
+    static xtype = "bi.select_list";
+
+
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-select-list",
-            direction: BI.Direction.Top, // toolbar的位置
+            direction: Direction.Top, // toolbar的位置
             logic: {
-                dynamic: true
+                dynamic: true,
             },
             items: [],
-            itemsCreator: BI.emptyFn,
-            hasNext: BI.emptyFn,
-            onLoaded: BI.emptyFn,
+            itemsCreator: emptyFn,
+            hasNext: emptyFn,
+            onLoaded: emptyFn,
             toolbar: {
                 type: "bi.multi_select_bar",
-                iconWrapperWidth: 36
+                iconWrapperWidth: 36,
             },
             el: {
-                type: "bi.list_pane"
-            }
+                type: "bi.list_pane",
+            },
         });
-    },
-    _init: function () {
-        BI.SelectList.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
+    }
+
+    _init() {
+        super._init(...arguments);
+        const o = this.options;
 
         // 全选
-        this.toolbar = BI.createWidget(o.toolbar);
+        this.toolbar = createWidget(o.toolbar);
         this.allSelected = false;
-        this.toolbar.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
-            self.allSelected = this.isSelected();
-            if (type === BI.Events.CLICK) {
-                self.setAllSelected(self.allSelected);
-                self.fireEvent(BI.SelectList.EVENT_CHANGE, value, obj);
+        this.toolbar.on(Controller.EVENT_CHANGE, (type, value, obj) => {
+            this.allSelected = this.toolbar.isSelected();
+            if (type === Events.CLICK) {
+                this.setAllSelected(this.allSelected);
+                this.fireEvent(SelectList.EVENT_CHANGE, value, obj);
             }
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+            this.fireEvent(Controller.EVENT_CHANGE, arguments);
         });
 
-        this.list = BI.createWidget(o.el, {
+        this.list = createWidget(o.el, {
             type: "bi.list_pane",
             items: o.items,
-            itemsCreator: function (op, callback) {
-                op.times === 1 && self.toolbar.setVisible(false);
-                o.itemsCreator(op, function (items, keywords, context) {
-                    callback.apply(self, arguments);
+            itemsCreator(op, callback) {
+                op.times === 1 && this.toolbar.setVisible(false);
+                o.itemsCreator(op, (items, keywords, context, ...args) => {
+                    callback(items, keywords, context, ...args);
                     if (op.times === 1) {
-                        var tipText = BI.get(context, 'tipText', '');
-                        var visible = BI.isEmptyString(tipText) && items && items.length > 0;
-                        self.toolbar.setVisible(visible);
-                        self.toolbar.setEnable(self.isEnabled() && visible);
+                        const tipText = get(context, "tipText", "");
+                        const visible = isEmptyString(tipText) && items && items.length > 0;
+                        this.toolbar.setVisible(visible);
+                        this.toolbar.setEnable(this.isEnabled() && visible);
                     }
-                    self._checkAllSelected();
+                    this._checkAllSelected();
                 });
             },
             onLoaded: o.onLoaded,
-            hasNext: o.hasNext
+            hasNext: o.hasNext,
         });
 
-        this.list.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
-            if (type === BI.Events.CLICK) {
-                self._checkAllSelected();
-                self.fireEvent(BI.SelectList.EVENT_CHANGE, value, obj);
+        this.list.on(Controller.EVENT_CHANGE, (type, value, obj) => {
+            if (type === Events.CLICK) {
+                this._checkAllSelected();
+                this.fireEvent(SelectList.EVENT_CHANGE, value, obj);
             }
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+            this.fireEvent(Controller.EVENT_CHANGE, arguments);
         });
 
-        BI.createWidget(BI.extend({
-            element: this
-        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({
-            scrolly: true
+        createWidget(extend({
+            element: this,
+        }, LogicFactory.createLogic(LogicFactory.createLogicTypeByDirection(o.direction), extend({
+            scrolly: true,
         }, o.logic, {
-            items: BI.LogicFactory.createLogicItemsByDirection(o.direction, this.toolbar, this.list)
+            items: LogicFactory.createLogicItemsByDirection(o.direction, this.toolbar, this.list),
         }))));
 
         if (o.items.length <= 0) {
             this.toolbar.setVisible(false);
             this.toolbar.setEnable(false);
         }
-        if(BI.isNotNull(o.value)){
+        if (isNotNull(o.value)) {
             this.setValue(o.value);
         }
-    },
+    }
 
-    _checkAllSelected: function () {
-        var selectLength = this.list.getValue().length;
-        var notSelectLength = this.getAllLeaves().length - selectLength;
-        var hasNext = this.list.hasNext();
-        var isAlreadyAllSelected = this.toolbar.isSelected();
-        var isHalf = selectLength > 0 && notSelectLength > 0;
-        var allSelected = selectLength > 0 && notSelectLength <= 0 && (!hasNext || isAlreadyAllSelected);
+    _checkAllSelected() {
+        const selectLength = this.list.getValue().length;
+        const notSelectLength = this.getAllLeaves().length - selectLength;
+        const hasNext = this.list.hasNext();
+        const isAlreadyAllSelected = this.toolbar.isSelected();
+        let isHalf = selectLength > 0 && notSelectLength > 0;
+        let allSelected = selectLength > 0 && notSelectLength <= 0 && (!hasNext || isAlreadyAllSelected);
 
         if (this.isAllSelected() === false) {
             hasNext && (isHalf = selectLength > 0);
@@ -110,127 +115,125 @@ BI.SelectList = BI.inherit(BI.Widget, {
 
         this.toolbar.setHalfSelected(isHalf);
         !isHalf && this.toolbar.setSelected(allSelected);
-    },
+    }
 
-    setAllSelected: function (v) {
+    setAllSelected(v) {
         if (this.list.setAllSelected) {
             this.list.setAllSelected(v);
         } else {
-            BI.each(this.getAllButtons(), function (i, btn) {
+            each(this.getAllButtons(), (i, btn) => {
                 (btn.setSelected || btn.setAllSelected).apply(btn, [v]);
             });
         }
         this.allSelected = !!v;
         this.toolbar.setSelected(v);
         this.toolbar.setHalfSelected(false);
-    },
+    }
 
-    setToolBarVisible: function (b) {
+    setToolBarVisible(b) {
         this.toolbar.setVisible(b);
-    },
+    }
 
-    isAllSelected: function () {
+    isAllSelected() {
         return this.allSelected;
         // return this.toolbar.isSelected();
-    },
+    }
 
-    hasPrev: function () {
+    hasPrev() {
         return this.list.hasPrev();
-    },
+    }
 
-    hasNext: function () {
+    hasNext() {
         return this.list.hasNext();
-    },
+    }
 
-    prependItems: function (items) {
-        this.list.prependItems.apply(this.list, arguments);
-    },
+    prependItems(items) {
+        this.list.prependItems(...arguments);
+    }
 
-    addItems: function (items) {
-        this.list.addItems.apply(this.list, arguments);
-    },
+    addItems(items) {
+        this.list.addItems(...arguments);
+    }
 
-    setValue: function (data) {
-        var selectAll = data.type === BI.ButtonGroup.CHOOSE_TYPE_ALL;
+    setValue(data) {
+        const selectAll = data.type === ButtonGroup.CHOOSE_TYPE_ALL;
         this.setAllSelected(selectAll);
         this.list[selectAll ? "setNotSelectedValue" : "setValue"](data.value);
         this._checkAllSelected();
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         if (this.isAllSelected() === false) {
             return {
-                type: BI.ButtonGroup.CHOOSE_TYPE_MULTI,
+                type: ButtonGroup.CHOOSE_TYPE_MULTI,
                 value: this.list.getValue(),
-                assist: this.list.getNotSelectedValue()
+                assist: this.list.getNotSelectedValue(),
             };
         }
+
         return {
-            type: BI.ButtonGroup.CHOOSE_TYPE_ALL,
+            type: ButtonGroup.CHOOSE_TYPE_ALL,
             value: this.list.getNotSelectedValue(),
-            assist: this.list.getValue()
+            assist: this.list.getValue(),
         };
+    }
 
-    },
-
-    empty: function () {
+    empty() {
         this.list.empty();
-    },
+    }
 
-    populate: function (items) {
-        this.toolbar.setVisible(!BI.isEmptyArray(items));
-        this.toolbar.setEnable(this.isEnabled() && !BI.isEmptyArray(items));
-        this.list.populate.apply(this.list, arguments);
+    populate(items) {
+        this.toolbar.setVisible(!isEmptyArray(items));
+        this.toolbar.setEnable(this.isEnabled() && !isEmptyArray(items));
+        this.list.populate(...arguments);
         this._checkAllSelected();
-    },
+    }
 
-    _setEnable: function (enable) {
-        BI.SelectList.superclass._setEnable.apply(this, arguments);
+    _setEnable(enable) {
+        super._setEnable(...arguments);
         this.toolbar.setEnable(enable);
-    },
+    }
 
-    resetHeight: function (h) {
-        var toolHeight = ( this.toolbar.element.outerHeight() || 25) * ( this.toolbar.isVisible() ? 1 : 0);
+    resetHeight(h) {
+        const toolHeight = (this.toolbar.element.outerHeight() || 25) * (this.toolbar.isVisible() ? 1 : 0);
         this.list.resetHeight ? this.list.resetHeight(h - toolHeight) :
-            this.list.element.css({"max-height": BI.pixFormat(h - toolHeight)});
-    },
+            this.list.element.css({ "max-height": pixFormat(h - toolHeight) });
+    }
 
-    setNotSelectedValue: function () {
-        this.list.setNotSelectedValue.apply(this.list, arguments);
+    setNotSelectedValue() {
+        this.list.setNotSelectedValue(...arguments);
         this._checkAllSelected();
-    },
+    }
 
-    getNotSelectedValue: function () {
+    getNotSelectedValue() {
         return this.list.getNotSelectedValue();
-    },
+    }
 
-    getAllButtons: function () {
+    getAllButtons() {
         return this.list.getAllButtons();
-    },
+    }
 
-    getAllLeaves: function () {
+    getAllLeaves() {
         return this.list.getAllLeaves();
-    },
+    }
 
-    getSelectedButtons: function () {
+    getSelectedButtons() {
         return this.list.getSelectedButtons();
-    },
+    }
 
-    getNotSelectedButtons: function () {
+    getNotSelectedButtons() {
         return this.list.getNotSelectedButtons();
-    },
+    }
 
-    getIndexByValue: function (value) {
+    getIndexByValue(value) {
         return this.list.getIndexByValue(value);
-    },
+    }
 
-    getNodeById: function (id) {
+    getNodeById(id) {
         return this.list.getNodeById(id);
-    },
+    }
 
-    getNodeByValue: function (value) {
+    getNodeByValue(value) {
         return this.list.getNodeByValue(value);
     }
-});
-BI.SelectList.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.select_list", BI.SelectList);
+}

src/core/platform/web/dom.js

@@ -265,12 +265,12 @@ export function _getLeftAlignPosition(combo, popup, extraWidth, container) {
 }
 
 export function getLeftAlignPosition(combo, popup, extraWidth, container) {
-    let left = this._getLeftAlignPosition(combo, popup, extraWidth, container);
+    let left = _getLeftAlignPosition(combo, popup, extraWidth, container);
     let dir = "";
     // 如果放不下，优先使用RightAlign, 如果RightAlign也放不下, 再使用left=0
     const containerRect = container ? container.getBoundingClientRect() : { left: 0 };
     if (left + containerRect.left < 0) {
-        left = this._getRightAlignPosition(combo, popup, extraWidth);
+        left = _getRightAlignPosition(combo, popup, extraWidth);
         dir = "left";
     }
     if (left + containerRect.left < 0) {
@@ -302,11 +302,11 @@ export function _getRightAlignPosition(combo, popup, extraWidth, container) {
 }
 
 export function getRightAlignPosition(combo, popup, extraWidth, container) {
-    let left = this._getRightAlignPosition(combo, popup, extraWidth, container);
+    let left = _getRightAlignPosition(combo, popup, extraWidth, container);
     let dir = "";
     // 如果放不下，优先使用LeftAlign, 如果LeftAlign也放不下, 再使用left=0
     if (left < 0) {
-        left = this._getLeftAlignPosition(combo, popup, extraWidth, container);
+        left = _getLeftAlignPosition(combo, popup, extraWidth, container);
         dir = "right";
     }
     if (left < 0) {