Pull request #3300: KERNEL-13948 refactor: base/combination文件夹ES6化

Merge in VISUAL/fineui from ~IMPACT/fine_ui:es6 to es6

* commit '4edb0d9b23139d38d3913765396c6c49d69d61b3':
  KERNEL-13948 refactor: base/combination文件夹ES6化
  KERNEL-13948 docs: 修复combo_group demo接口错误

demo/js/core/abstract/combination/demo.combo.js

@@ -29,7 +29,7 @@ Demo.Func = BI.inherit(BI.Widget, {
             iconCls1: "close-ha-font",
             iconCls2: "close-ha-font"
         },
-        children: [{
+        items: [{
             type: "bi.single_select_item",
             height: 25,
             text: "一月",
@@ -385,7 +385,7 @@ Demo.Func = BI.inherit(BI.Widget, {
             },
             width: 200
         });
-        childCombo.setValue(BI.deepClone(this.child)[0].children[0].value);
+        childCombo.setValue(BI.deepClone(this.child)[0].items[0].value);
 
         var monthCombo = BI.createWidget({
             type: "bi.combo",

demo/js/core/abstract/combination/demo.combo_group.js

@@ -12,7 +12,7 @@ Demo.Func = BI.inherit(BI.Widget, {
             height: 25,
             iconCls: "close-ha-font"
         },
-        children: [{
+        items: [{
             type: "bi.single_select_item",
             height: 25,
             text: "一月",
@@ -63,7 +63,7 @@ Demo.Func = BI.inherit(BI.Widget, {
             },
             width: 200
         });
-        childCombo.setValue(BI.deepClone(this.child)[0].children[0].value);
+        childCombo.setValue(BI.deepClone(this.child)[0].items[0].value);
 
         return BI.createWidget({
             type: "bi.left",

src/base/0.base.js

@@ -7,7 +7,8 @@ import {
     PopoverController,
     ResizeController,
     TooltipsController,
-    StyleLoaderManager
+    StyleLoaderManager,
+    extend
 } from "../core";
 
 const Resizers = new ResizeController();
@@ -20,7 +21,7 @@ const Drawers = new DrawerController();
 const Broadcasts = new BroadcastController();
 const StyleLoaders = new StyleLoaderManager();
 
-BI.extend(BI, {
+extend(BI, {
     Resizers,
     Layers,
     Maskers,

src/base/combination/combo.js

@@ -1,374 +1,374 @@
-!(function () {
+/**
-    var needHideWhenAnotherComboOpen = {};
+ * @class BI.Combo
-    var currentOpenedCombos = {};
+ * @extends BI.Widget
+ */
 
-    /**
+import { shortcut, Widget, Controller, extend, createWidget, nextTick, bind, isNotNull, isNull, isFunction, each } from "../../core";
-     * @class BI.Combo
+import Bubble from "./bubble";
-     * @extends BI.Widget
+import { Resizers } from "../0.base";
-     */
-    BI.Combo = BI.inherit(BI.Bubble, {
-        _const: {
-            TRIANGLE_LENGTH: 12,
-        },
-        _defaultConfig: function () {
-            var conf = BI.Combo.superclass._defaultConfig.apply(this, arguments);
 
-            return BI.extend(conf, {
+let needHideWhenAnotherComboOpen = {};
-                baseCls: (conf.baseCls || "") + " bi-combo" + (BI.isIE() ? " hack" : ""),
+let currentOpenedCombos = {};
-                attributes: {
-                    tabIndex: -1,
-                },
-                trigger: "click", // click || hover || click-hover || ""
-                toggle: true,
-                direction: "bottom", // top||bottom||left||right||top,left||top,right||bottom,left||bottom,right||right,innerRight||right,innerLeft||innerRight||innerLeft
-                logic: {
-                    dynamic: true,
-                },
-                container: null, // popupview放置的容器，默认为this.element
-                isDefaultInit: false,
-                destroyWhenHide: false,
-                hideWhenBlur: true,
-                hideWhenAnotherComboOpen: false,
-                hideWhenClickOutside: true,
-                showArrow: false,
-                isNeedAdjustHeight: true, // 是否需要高度调整
-                isNeedAdjustWidth: true,
-                stopEvent: false,
-                stopPropagation: false,
-                adjustLength: 0, // 调整的距离
-                adjustXOffset: 0,
-                adjustYOffset: 0,
-                supportCSSTransform: true,
-                hideChecker: BI.emptyFn,
-                offsetStyle: "", // "",center,middle
-                el: {},
-                popup: {},
-                comboClass: "bi-combo-popup",
-                hoverClass: "bi-combo-hover",
-                belowMouse: false,
-            });
-        },
 
-        render: function () {
+@shortcut()
-            var self = this, o = this.options;
+export default class Combo extends Bubble {
-            this._initCombo();
+    static xtype = "bi.combo";
-            // 延迟绑定事件，这样可以将自己绑定的事情优先执行
-            BI.nextTick(() => {
-                !this.isDestroyed() && this._initPullDownAction();
-            });
-            this.combo.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
-                if (self.isEnabled() && self.isValid()) {
-                    if (type === BI.Events.TOGGLE) {
-                        self._toggle();
-                    }
-                    if (type === BI.Events.EXPAND) {
-                        self._popupView();
-                    }
-                    if (type === BI.Events.COLLAPSE) {
-                        self._hideView();
-                    }
-                    if (type === BI.Events.EXPAND) {
-                        self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
-                        self.fireEvent(BI.Combo.EVENT_EXPAND);
-                    }
-                    if (type === BI.Events.COLLAPSE) {
-                        self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
-                        self.isViewVisible() && self.fireEvent(BI.Combo.EVENT_COLLAPSE);
-                    }
-                    if (type === BI.Events.CLICK) {
-                        self.fireEvent(BI.Combo.EVENT_TRIGGER_CHANGE, obj);
-                    }
-                }
-            });
 
-            self.element.on("mouseenter." + self.getName(), function (e) {
+    static EVENT_TRIGGER_CHANGE = "EVENT_TRIGGER_CHANGE";
-                if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid()) {
+    static EVENT_CHANGE = "EVENT_CHANGE";
-                    self.element.addClass(o.hoverClass);
+    static EVENT_EXPAND = "EVENT_EXPAND";
+    static EVENT_COLLAPSE = "EVENT_COLLAPSE";
+    static EVENT_AFTER_INIT = "EVENT_AFTER_INIT";
+
+    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
+    static EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW";
+    static EVENT_BEFORE_HIDEVIEW = "EVENT_BEFORE_HIDEVIEW";
+    static EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW";
+
+    _defaultConfig() {
+        const conf = super._defaultConfig(arguments);
+
+        return extend(conf, {
+            baseCls: (conf.baseCls || "") + " bi-combo" + (BI.isIE() ? " hack" : ""),
+            attributes: {
+                tabIndex: -1,
+            },
+            trigger: "click", // click || hover || click-hover || ""
+            toggle: true,
+            direction: "bottom", // top||bottom||left||right||top,left||top,right||bottom,left||bottom,right||right,innerRight||right,innerLeft||innerRight||innerLeft
+            logic: {
+                dynamic: true,
+            },
+            container: null, // popupview放置的容器，默认为this.element
+            isDefaultInit: false,
+            destroyWhenHide: false,
+            hideWhenBlur: true,
+            hideWhenAnotherComboOpen: false,
+            hideWhenClickOutside: true,
+            showArrow: false,
+            isNeedAdjustHeight: true, // 是否需要高度调整
+            isNeedAdjustWidth: true,
+            stopEvent: false,
+            stopPropagation: false,
+            adjustLength: 0, // 调整的距离
+            adjustXOffset: 0,
+            adjustYOffset: 0,
+            supportCSSTransform: true,
+            hideChecker: BI.emptyFn,
+            offsetStyle: "", // "",center,middle
+            el: {},
+            popup: {},
+            comboClass: "bi-combo-popup",
+            hoverClass: "bi-combo-hover",
+            belowMouse: false,
+        });
+    }
+
+    render() {
+        const { hoverClass, logic, isDefaultInit } = this.options;
+        this._initCombo();
+        // 延迟绑定事件，这样可以将自己绑定的事情优先执行
+        nextTick(() => {
+            !this.isDestroyed() && this._initPullDownAction();
+        });
+        this.combo.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => {
+            if (this.isEnabled() && this.isValid()) {
+                if (type === BI.Events.TOGGLE) {
+                    this._toggle();
                 }
-            });
+                if (type === BI.Events.EXPAND) {
-            self.element.on("mouseleave." + self.getName(), function (e) {
+                    this._popupView();
-                if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid()) {
-                    self.element.removeClass(o.hoverClass);
                 }
-            });
+                if (type === BI.Events.COLLAPSE) {
-
+                    this._hideView();
-            BI.createWidget(BI.extend({
+                }
-                element: this,
+                if (type === BI.Events.EXPAND) {
-                scrolly: false,
+                    this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
-            }, BI.LogicFactory.createLogic("vertical", BI.extend(o.logic, {
+                    this.fireEvent(Combo.EVENT_EXPAND);
-                items: [
+                }
-                    { el: this.combo }
+                if (type === BI.Events.COLLAPSE) {
-                ],
+                    this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
-            }))));
+                    this.isViewVisible() && this.fireEvent(Combo.EVENT_COLLAPSE);
-            o.isDefaultInit && (this._assertPopupView());
+                }
-            BI.Resizers.add(this.getName(), BI.bind(function (e) {
+                if (type === BI.Events.CLICK) {
-                // 如果resize对象是combo的子元素，则不应该收起，或交由hideChecker去处理
+                    this.fireEvent(Combo.EVENT_TRIGGER_CHANGE, obj);
-                if (this.isViewVisible()) {
-                    BI.isNotNull(e) ? this._hideIf(e) : this._hideView();
                 }
-            }, this));
-        },
-
-        _assertPopupView: function () {
-            var self = this, o = this.options;
-            if (BI.isNull(this.popupView)) {
-                this.popupView = BI.createWidget(BI.isFunction(this.options.popup) ? this.options.popup() : this.options.popup, {
-                    type: "bi.popup_view",
-                    showArrow: o.showArrow,
-                    value: o.value,
-                }, this);
-                this.popupView.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
-                    if (type === BI.Events.CLICK) {
-                        self.combo.setValue(self.getValue());
-                        self.fireEvent(BI.Bubble.EVENT_CHANGE, value, obj);
-                    }
-                    self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
-                });
-                this.popupView.setVisible(false);
-                BI.nextTick(function () {
-                    self.fireEvent(BI.Bubble.EVENT_AFTER_INIT);
-                });
             }
-        },
+        });
 
-        _hideView: function (e) {
+        this.element.on("mouseenter." + this.getName(), (e) => {
-            var o = this.options;
+            if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid()) {
-            this.fireEvent(BI.Combo.EVENT_BEFORE_HIDEVIEW);
+                this.element.addClass(hoverClass);
-            if (this.options.destroyWhenHide === true) {
-                this.popupView && this.popupView.destroy();
-                this.popupView = null;
-                this._rendered = false;
-            } else {
-                this.popupView && this.popupView.invisible();
             }
-
+        });
-            if (!e || !this.combo.element.__isMouseInBounds__(e)) {
+        this.element.on("mouseleave." + this.getName(), (e) => {
-                this.element.removeClass(this.options.hoverClass);
+            if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid()) {
-                // 应对bi-focus-shadow在收起时不失焦
+                this.element.removeClass(hoverClass);
-                this.element.blur();
             }
+        });
 
-            this.element.removeClass(this.options.comboClass);
+        createWidget(extend({
-            delete needHideWhenAnotherComboOpen[this.getName()];
+            element: this,
-            delete currentOpenedCombos[this.getName()];
+            scrolly: false,
-
+        }, BI.LogicFactory.createLogic("vertical", extend(logic, {
-            o.hideWhenClickOutside && BI.Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName());
+            items: [
-            BI.EVENT_BLUR && o.hideWhenBlur && BI.Widget._renderEngine.createElement(window).unbind("blur." + this.getName());
+                { el: this.combo }
-            this.fireEvent(BI.Combo.EVENT_AFTER_HIDEVIEW, e);
+            ],
-        },
+        }))));
+        isDefaultInit && (this._assertPopupView());
+        Resizers.add(this.getName(), bind((e) => {
+            // 如果resize对象是combo的子元素，则不应该收起，或交由hideChecker去处理
+            if (this.isViewVisible()) {
+                isNotNull(e) ? this._hideIf(e) : this._hideView();
+            }
+        }, this));
+    }
 
-        _popupView: function (e) {
+    _assertPopupView() {
-            var self = this, o = this.options;
+        const { showArrow, value, hideWhenClickOutside, hideWhenBlur } = this.options;
-            this._assertPopupViewRender();
+        if (isNull(this.popupView)) {
-            this.fireEvent(BI.Combo.EVENT_BEFORE_POPUPVIEW);
+            this.popupView = createWidget(isFunction(this.options.popup) ? this.options.popup() : this.options.popup, {
-            // popupVisible是为了获取其宽高, 放到可视范围之外以防止在IE下闪一下
+                type: "bi.popup_view",
-            this.popupView.css({ left: -99999, top: -99999 });
+                showArrow,
-            this.popupView.visible();
+                value,
-            BI.each(needHideWhenAnotherComboOpen, function (i, combo) {
+            }, this);
-                if (i !== self.getName()) {
+            this.popupView.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => {
-                    if (combo && combo._hideIf(e, true) === true) {
+                if (type === BI.Events.CLICK) {
-                        delete needHideWhenAnotherComboOpen[i];
+                    this.combo.setValue(this.getValue());
-                    }
+                    this.fireEvent(Bubble.EVENT_CHANGE, value, obj);
                 }
+                this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
+            });
+            this.popupView.setVisible(false);
+            nextTick(() => {
+                this.fireEvent(Bubble.EVENT_AFTER_INIT);
             });
-            currentOpenedCombos[this.getName()] = this;
+        }
-            this.options.hideWhenAnotherComboOpen && (needHideWhenAnotherComboOpen[this.getName()] = this);
+    }
-            this.adjustWidth(e);
-            this.adjustHeight(e);
 
-            this.element.addClass(this.options.comboClass);
+    _hideView(e) {
-            o.hideWhenClickOutside && BI.Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName());
+        const { hideWhenClickOutside, hideWhenBlur } = this.options;
-            o.hideWhenClickOutside && BI.Widget._renderEngine.createElement(document).unbind("mousewheel." + this.getName());
+        this.fireEvent(Combo.EVENT_BEFORE_HIDEVIEW);
-            BI.EVENT_BLUR && o.hideWhenBlur && BI.Widget._renderEngine.createElement(window).unbind("blur." + this.getName());
+        if (this.options.destroyWhenHide === true) {
+            this.popupView && this.popupView.destroy();
+            this.popupView = null;
+            this._rendered = false;
+        } else {
+            this.popupView && this.popupView.invisible();
+        }
 
-            o.hideWhenClickOutside && BI.Widget._renderEngine.createElement(document).bind("mousedown." + this.getName(), BI.bind(this._hideIf, this)).bind("mousewheel." + this.getName(), BI.bind(this._hideIf, this));
+        if (!e || !this.combo.element.__isMouseInBounds__(e)) {
-            o.hideWhenClickOutside && BI.Widget._renderEngine.createElement(document).bind("mousewheel." + this.getName(), BI.bind(this._hideIf, this));
+            this.element.removeClass(this.options.hoverClass);
-            BI.EVENT_BLUR && o.hideWhenBlur && BI.Widget._renderEngine.createElement(window).bind("blur." + this.getName(), BI.bind(this._hideIf, this));
+            // 应对bi-focus-shadow在收起时不失焦
-            this.fireEvent(BI.Combo.EVENT_AFTER_POPUPVIEW);
+            this.element.blur();
-        },
+        }
 
-        adjustHeight: function (e) {
+        this.element.removeClass(this.options.comboClass);
-            var o = this.options, p = {};
+        delete needHideWhenAnotherComboOpen[this.getName()];
-            if (!this.popupView) {
+        delete currentOpenedCombos[this.getName()];
-                return;
-            }
-            var isVisible = this.popupView.isVisible();
-            this.popupView.visible();
-            var combo = (o.belowMouse && BI.isNotNull(e)) ? {
-                element: {
-                    0: BI.extend({}, e.target, {
-                        getBoundingClientRect: function () {
-                            return {
-                                left: e.pageX,
-                                top: e.pageY,
-                                width: 0,
-                                height: 0,
-                            };
-                        }
-                    }),
-                    offset: function () {
-                        return {
-                            left: e.pageX,
-                            top: e.pageY,
-                        };
-                    },
-                },
-            } : this.combo;
 
-            var positionRelativeElement = BI.DOM.getPositionRelativeContainingBlock(
+        hideWhenClickOutside && Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName());
-                BI.isNull(o.container)
+        BI.EVENT_BLUR && hideWhenBlur && Widget._renderEngine.createElement(window).unbind("blur." + this.getName());
-                    ? this.element[0]
+        this.fireEvent(Combo.EVENT_AFTER_HIDEVIEW, e);
-                    : BI.isWidget(o.container)
+    }
-                        ? o.container.element[0]
-                        : BI.Widget._renderEngine.createElement(BI.isFunction(o.container) ? o.container() : o.container)[0]
-            );
 
-            switch (o.direction) {
+    _popupView(e) {
-                case "bottom":
+        const { hideWhenClickOutside, hideWhenBlur } = this.options;
-                case "bottom,right":
+        this._assertPopupViewRender();
-                    p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["bottom", "top", "right", "left"], o.offsetStyle, positionRelativeElement);
+        this.fireEvent(Combo.EVENT_BEFORE_POPUPVIEW);
-                    break;
+        // popupVisible是为了获取其宽高, 放到可视范围之外以防止在IE下闪一下
-                case "top":
+        this.popupView.css({ left: -99999, top: -99999 });
-                case "top,right":
+        this.popupView.visible();
-                    p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["top", "bottom", "right", "left"], o.offsetStyle, positionRelativeElement);
+        each(needHideWhenAnotherComboOpen, (i, combo) => {
-                    break;
+            if (i !== this.getName()) {
-                case "left":
+                if (combo && combo._hideIf(e, true) === true) {
-                case "left,bottom":
+                    delete needHideWhenAnotherComboOpen[i];
-                    p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["left", "right", "bottom", "top"], o.offsetStyle, positionRelativeElement);
+                }
-                    break;
-                case "right":
-                case "right,bottom":
-                    p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "bottom", "top"], o.offsetStyle, positionRelativeElement);
-                    break;
-                case "top,left":
-                    p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["top", "bottom", "left", "right"], o.offsetStyle, positionRelativeElement);
-                    break;
-                case "bottom,left":
-                    p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["bottom", "top", "left", "right"], o.offsetStyle, positionRelativeElement);
-                    break;
-                case "left,top":
-                    p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["left", "right", "top", "bottom"], o.offsetStyle, positionRelativeElement);
-                    break;
-                case "right,top":
-                    p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "top", "bottom"], o.offsetStyle, positionRelativeElement);
-                    break;
-                case "right,innerRight":
-                    p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "innerRight", "innerLeft", "bottom", "top"], o.offsetStyle, positionRelativeElement);
-                    break;
-                case "right,innerLeft":
-                    p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "innerLeft", "innerRight", "bottom", "top"], o.offsetStyle, positionRelativeElement);
-                    break;
-                case "innerRight":
-                    p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["innerRight", "innerLeft", "right", "left", "bottom", "top"], o.offsetStyle, positionRelativeElement);
-                    break;
-                case "innerLeft":
-                    p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["innerLeft", "innerRight", "left", "right", "bottom", "top"], o.offsetStyle, positionRelativeElement);
-                    break;
-                case "top,custom":
-                case "custom,top":
-                    p = BI.DOM.getTopAdaptPosition(combo, this.popupView, (o.adjustYOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight);
-                    p.dir = "top";
-                    break;
-                case "custom,bottom":
-                case "bottom,custom":
-                    p = BI.DOM.getBottomAdaptPosition(combo, this.popupView, (o.adjustYOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight);
-                    p.dir = "bottom";
-                    break;
-                case "left,custom":
-                case "custom,left":
-                    p = BI.DOM.getLeftAdaptPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0));
-                    delete p.top;
-                    delete p.adaptHeight;
-                    p.dir = "left";
-                    break;
-                case "custom,right":
-                case "right,custom":
-                    p = BI.DOM.getRightAdaptPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0));
-                    delete p.top;
-                    delete p.adaptHeight;
-                    p.dir = "right";
-                    break;
-                default:
-                    break;
             }
+        });
+        currentOpenedCombos[this.getName()] = this;
+        this.options.hideWhenAnotherComboOpen && (needHideWhenAnotherComboOpen[this.getName()] = this);
+        this.adjustWidth(e);
+        this.adjustHeight(e);
 
-            var width = this.combo.element.outerWidth();
+        this.element.addClass(this.options.comboClass);
-            var height = this.combo.element.outerHeight();
+        hideWhenClickOutside && Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName());
-            this.popupView.setDirection && this.popupView.setDirection(p.dir, {
+        hideWhenClickOutside && Widget._renderEngine.createElement(document).unbind("mousewheel." + this.getName());
-                width: width,
+        BI.EVENT_BLUR && hideWhenBlur && Widget._renderEngine.createElement(window).unbind("blur." + this.getName());
-                height: height,
-                offsetStyle: o.offsetStyle,
-                adjustXOffset: o.adjustXOffset,
-                adjustYOffset: o.adjustYOffset,
-                offset: this.combo.element.offset(),
-            });
 
-            if (o.supportCSSTransform) {
+        hideWhenClickOutside && Widget._renderEngine.createElement(document).bind("mousewheel." + this.getName(), bind(this._hideIf, this));
+        hideWhenClickOutside && Widget._renderEngine.createElement(document).bind("mousedown." + this.getName(), bind(this._hideIf, this)).bind("mousewheel." + this.getName(), bind(this._hideIf, this));
+        BI.EVENT_BLUR && hideWhenBlur && Widget._renderEngine.createElement(window).bind("blur." + this.getName(), bind(this._hideIf, this));
+        this.fireEvent(Combo.EVENT_AFTER_POPUPVIEW);
+    }
 
-                var positonedRect = positionRelativeElement.getBoundingClientRect();
+    adjustHeight(e) {
+        const { belowMouse, supportCSSTransform, container, direction, adjustXOffset, adjustYOffset, adjustLength, showArrow, isNeedAdjustHeight, offsetStyle } = this.options;
+        let p = {};
+        if (!this.popupView) {
+            return;
+        }
+        const isVisible = this.popupView.isVisible();
+        this.popupView.visible();
+        const combo = (belowMouse && isNotNull(e)) ? {
+            element: {
+                0: e.target,
+                offset: () => {
+                    return {
+                        left: e.pageX,
+                        top: e.pageY,
+                    };
+                },
+                bounds: () => {
+                    // offset为其相对于父定位元素的偏移
+                    return {
+                        x: e.offsetX,
+                        y: e.offsetY,
+                        width: 0,
+                        height: 24,
+                    };
+                },
+                outerWidth: () => {
+                    return 0;
+                },
+                outerHeight: () => {
+                    return 24;
+                },
+            },
+        } : this.combo;
+        const positionRelativeElement = supportCSSTransform ? BI.DOM.getPositionRelativeContainingBlock(isNull(container) ? this.element[0] : Widget._renderEngine.createElement(isFunction(container) ? container() : container)[0]) : null;
+        const TRIANGLE_LENGTH = 12;
+        switch (direction) {
+            case "bottom":
+            case "bottom,right":
+                p = BI.DOM.getComboPosition(combo, this.popupView, adjustXOffset, (adjustYOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), isNeedAdjustHeight, ["bottom", "top", "right", "left"], offsetStyle, positionRelativeElement);
+                break;
+            case "top":
+            case "top,right":
+                p = BI.DOM.getComboPosition(combo, this.popupView, adjustXOffset, (adjustYOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), isNeedAdjustHeight, ["top", "bottom", "right", "left"], offsetStyle, positionRelativeElement);
+                break;
+            case "left":
+            case "left,bottom":
+                p = BI.DOM.getComboPosition(combo, this.popupView, (adjustXOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), adjustYOffset, isNeedAdjustHeight, ["left", "right", "bottom", "top"], offsetStyle, positionRelativeElement);
+                break;
+            case "right":
+            case "right,bottom":
+                p = BI.DOM.getComboPosition(combo, this.popupView, (adjustXOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), adjustYOffset, isNeedAdjustHeight, ["right", "left", "bottom", "top"], offsetStyle, positionRelativeElement);
+                break;
+            case "top,left":
+                p = BI.DOM.getComboPosition(combo, this.popupView, adjustXOffset, (adjustYOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), isNeedAdjustHeight, ["top", "bottom", "left", "right"], offsetStyle, positionRelativeElement);
+                break;
+            case "bottom,left":
+                p = BI.DOM.getComboPosition(combo, this.popupView, adjustXOffset, (adjustYOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), isNeedAdjustHeight, ["bottom", "top", "left", "right"], offsetStyle, positionRelativeElement);
+                break;
+            case "left,top":
+                p = BI.DOM.getComboPosition(combo, this.popupView, (adjustXOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), adjustYOffset, isNeedAdjustHeight, ["left", "right", "top", "bottom"], offsetStyle, positionRelativeElement);
+                break;
+            case "right,top":
+                p = BI.DOM.getComboPosition(combo, this.popupView, (adjustXOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), adjustYOffset, isNeedAdjustHeight, ["right", "left", "top", "bottom"], offsetStyle, positionRelativeElement);
+                break;
+            case "right,innerRight":
+                p = BI.DOM.getComboPosition(combo, this.popupView, (adjustXOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), adjustYOffset, isNeedAdjustHeight, ["right", "left", "innerRight", "innerLeft", "bottom", "top"], offsetStyle, positionRelativeElement);
+                break;
+            case "right,innerLeft":
+                p = BI.DOM.getComboPosition(combo, this.popupView, (adjustXOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), adjustYOffset, isNeedAdjustHeight, ["right", "left", "innerLeft", "innerRight", "bottom", "top"], offsetStyle, positionRelativeElement);
+                break;
+            case "innerRight":
+                p = BI.DOM.getComboPosition(combo, this.popupView, (adjustXOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), adjustYOffset, isNeedAdjustHeight, ["innerRight", "innerLeft", "right", "left", "bottom", "top"], offsetStyle, positionRelativeElement);
+                break;
+            case "innerLeft":
+                p = BI.DOM.getComboPosition(combo, this.popupView, (adjustXOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), adjustYOffset, isNeedAdjustHeight, ["innerLeft", "innerRight", "left", "right", "bottom", "top"], offsetStyle, positionRelativeElement);
+                break;
+            case "top,custom":
+            case "custom,top":
+                p = BI.DOM.getTopAdaptPosition(combo, this.popupView, (adjustYOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), isNeedAdjustHeight);
+                p.dir = "top";
+                break;
+            case "custom,bottom":
+            case "bottom,custom":
+                p = BI.DOM.getBottomAdaptPosition(combo, this.popupView, (adjustYOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0), isNeedAdjustHeight);
+                p.dir = "bottom";
+                break;
+            case "left,custom":
+            case "custom,left":
+                p = BI.DOM.getLeftAdaptPosition(combo, this.popupView, (adjustXOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0));
+                delete p.top;
+                delete p.adaptHeight;
+                p.dir = "left";
+                break;
+            case "custom,right":
+            case "right,custom":
+                p = BI.DOM.getRightAdaptPosition(combo, this.popupView, (adjustXOffset + adjustLength) + (showArrow ? TRIANGLE_LENGTH : 0));
+                delete p.top;
+                delete p.adaptHeight;
+                p.dir = "right";
+                break;
+            default:
+                break;
+        }
 
-                var scaleX = positonedRect.width / positionRelativeElement.offsetWidth;
+        if ("adaptHeight" in p) {
-                var scaleY = positonedRect.height / positionRelativeElement.offsetHeight;
+            this.resetListHeight(p.adaptHeight);
+        }
 
-                p.top && (p.top = Math.round(p.top / scaleY + positionRelativeElement.scrollTop));
+        const width = this.combo.element.outerWidth();
-                p.left && (p.left = Math.round(p.left / scaleX + positionRelativeElement.scrollLeft));
+        const height = this.combo.element.outerHeight();
+        this.popupView.setDirection && this.popupView.setDirection(p.dir, {
+            width,
+            height,
+            offsetStyle,
+            adjustXOffset,
+            adjustYOffset,
+            offset: this.combo.element.offset(),
+        });
 
-                p.adaptHeight && (p.adaptHeight = Math.round(p.adaptHeight / scaleY));
+        if (supportCSSTransform) {
-            }
 
-            if ("adaptHeight" in p) {
+            const positonedRect = positionRelativeElement.getBoundingClientRect();
-                this.resetListHeight(p.adaptHeight);
-            }
 
-            if ("left" in p) {
+            const scaleX = positonedRect.width / positionRelativeElement.offsetWidth;
-                this.popupView.element.css({
+            const scaleY = positonedRect.height / positionRelativeElement.offsetHeight;
-                    left: p.left,
-                });
-            }
-            if ("top" in p) {
-                this.popupView.element.css({
-                    top: p.top,
-                });
-            }
-            this.position = p;
-            this.popupView.setVisible(isVisible);
-        },
 
-        destroyed: function () {
+            p.top && (p.top = p.top / scaleY);
-            BI.Widget._renderEngine.createElement(document)
+            p.left && (p.left = p.left / scaleX);
-                .unbind("click." + this.getName())
+        }
-                .unbind("mousedown." + this.getName())
-                .unbind("mousewheel." + this.getName())
-                .unbind("mouseenter." + this.getName())
-                .unbind("mouseleave." + this.getName());
-            BI.Widget._renderEngine.createElement(window)
-                .unbind("blur." + this.getName());
-            BI.Resizers.remove(this.getName());
-            this.popupView && this.popupView._destroy();
-            delete needHideWhenAnotherComboOpen[this.getName()];
-            delete currentOpenedCombos[this.getName()];
-        },
-    });
-    BI.Combo.closeAll = function () {
-        BI.each(currentOpenedCombos, function (i, combo) {
-            if (combo) {
-                combo.hideView();
-            }
-        });
-        currentOpenedCombos = {};
-        needHideWhenAnotherComboOpen = {};
-    };
-    BI.Combo.EVENT_TRIGGER_CHANGE = "EVENT_TRIGGER_CHANGE";
-    BI.Combo.EVENT_CHANGE = "EVENT_CHANGE";
-    BI.Combo.EVENT_EXPAND = "EVENT_EXPAND";
-    BI.Combo.EVENT_COLLAPSE = "EVENT_COLLAPSE";
-    BI.Combo.EVENT_AFTER_INIT = "EVENT_AFTER_INIT";
 
+        if ("left" in p) {
+            this.popupView.element.css({
+                left: p.left,
+            });
+        }
+        if ("top" in p) {
+            this.popupView.element.css({
+                top: p.top,
+            });
+        }
+        this.position = p;
+        this.popupView.setVisible(isVisible);
+    }
 
-    BI.Combo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
+    destroyed() {
-    BI.Combo.EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW";
+        Widget._renderEngine.createElement(document)
-    BI.Combo.EVENT_BEFORE_HIDEVIEW = "EVENT_BEFORE_HIDEVIEW";
+            .unbind("click." + this.getName())
-    BI.Combo.EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW";
+            .unbind("mousedown." + this.getName())
+            .unbind("mousewheel." + this.getName())
+            .unbind("mouseenter." + this.getName())
+            .unbind("mouseleave." + this.getName());
+        Widget._renderEngine.createElement(window)
+            .unbind("blur." + this.getName());
+        Resizers.remove(this.getName());
+        this.popupView && this.popupView._destroy();
+        delete needHideWhenAnotherComboOpen[this.getName()];
+        delete currentOpenedCombos[this.getName()];
+    }
+}
 
-    BI.shortcut("bi.combo", BI.Combo);
+Combo.closeAll = () => {
-}());
+    each(currentOpenedCombos, (i, combo) => {
+        if (combo) {
+            combo.hideView();
+        }
+    });
+    currentOpenedCombos = {};
+    needHideWhenAnotherComboOpen = {};
+};

src/base/combination/expander.js

@@ -6,9 +6,25 @@
  * @class BI.Expander
  * @extends BI.Widget
  */
-BI.Expander = BI.inherit(BI.Widget, {
+import { shortcut, Widget, Controller, extend, nextTick, each, debounce, isNull, createWidget } from "../../core";
-    _defaultConfig: function () {
+
-        return BI.extend(BI.Expander.superclass._defaultConfig.apply(this, arguments), {
+@shortcut()
+export default class Expander extends Widget {
+    static xtype = "bi.expander";
+
+    static EVENT_EXPAND = "EVENT_EXPAND";
+    static EVENT_COLLAPSE = "EVENT_COLLAPSE";
+    static EVENT_TRIGGER_CHANGE = "EVENT_TRIGGER_CHANGE";
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    static EVENT_AFTER_INIT = "EVENT_AFTER_INIT";
+
+    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
+    static EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW";
+    static EVENT_BEFORE_HIDEVIEW = "EVENT_BEFORE_HIDEVIEW";
+    static EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(arguments), {
             baseCls: "bi-expander",
             trigger: "click",
             toggle: true,
@@ -19,48 +35,48 @@ BI.Expander = BI.inherit(BI.Widget, {
             expanderClass: "bi-expander-popup",
             hoverClass: "bi-expander-hover",
         });
-    },
+    }
 
-    render: function () {
+    render() {
-        var self = this, o = this.options;
+        const { el, hoverClass, isDefaultInit } = this.options;
-        this._expanded = !!o.el.open;
+        this._expanded = !!el.open;
         this._initExpander();
         // 延迟绑定事件，这样可以将自己绑定的事情优先执行
-        BI.nextTick(() => {
+        nextTick(() => {
             !this.isDestroyed() && this._initPullDownAction();
         });
-        this.expander.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
+        this.expander.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => {
-            if (self.isEnabled() && self.isValid()) {
+            if (this.isEnabled() && this.isValid()) {
                 if (type === BI.Events.EXPAND) {
-                    self._popupView();
+                    this._popupView();
                 }
                 if (type === BI.Events.COLLAPSE) {
-                    self._hideView();
+                    this._hideView();
                 }
                 if (type === BI.Events.EXPAND) {
-                    self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+                    this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
-                    self.fireEvent(BI.Expander.EVENT_EXPAND);
+                    this.fireEvent(Expander.EVENT_EXPAND);
                 }
                 if (type === BI.Events.COLLAPSE) {
-                    self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+                    this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
-                    self.isViewVisible() && self.fireEvent(BI.Expander.EVENT_COLLAPSE);
+                    this.isViewVisible() && this.fireEvent(Expander.EVENT_COLLAPSE);
                 }
                 if (type === BI.Events.CLICK) {
-                    self.fireEvent(BI.Expander.EVENT_TRIGGER_CHANGE, value, obj);
+                    this.fireEvent(Expander.EVENT_TRIGGER_CHANGE, value, obj);
                 }
             }
         });
 
-        this.element.hover(function () {
+        this.element.hover(() => {
-            if (self.isEnabled() && self.isValid() && self.expander.isEnabled() && self.expander.isValid()) {
+            if (this.isEnabled() && this.isValid() && this.expander.isEnabled() && this.expander.isValid()) {
-                self.element.addClass(o.hoverClass);
+                this.element.addClass(hoverClass);
             }
-        }, function () {
+        }, () => {
-            if (self.isEnabled() && self.isValid() && self.expander.isEnabled() && self.expander.isValid()) {
+            if (this.isEnabled() && this.isValid() && this.expander.isEnabled() && this.expander.isValid()) {
-                self.element.removeClass(o.hoverClass);
+                this.element.removeClass(hoverClass);
             }
         });
-        BI.createWidget({
+        createWidget({
             type: "bi.vertical",
             scrolly: false,
             element: this,
@@ -68,13 +84,13 @@ BI.Expander = BI.inherit(BI.Widget, {
                 { el: this.expander }
             ],
         });
-        o.isDefaultInit && this._assertPopupView();
+        isDefaultInit && this._assertPopupView();
         if (this.expander.isOpened() === true) {
             this._popupView();
         }
-    },
+    }
 
-    _toggle: function () {
+    _toggle() {
         this._assertPopupViewRender();
         if (this.popupView.isVisible()) {
             this._hideView();
@@ -83,40 +99,40 @@ BI.Expander = BI.inherit(BI.Widget, {
                 this._popupView();
             }
         }
-    },
+    }
 
-    _initPullDownAction: function () {
+    _initPullDownAction() {
-        var self = this, o = this.options;
+        const { toggle } = this.options;
-        var evs = this.options.trigger.split(",");
+        const evs = this.options.trigger.split(",");
-        BI.each(evs, function (i, e) {
+        each(evs, (i, e) => {
             switch (e) {
                 case "hover":
-                    self.element[e](function (e) {
+                    this.element[e]((e) => {
-                        if (self.isEnabled() && self.isValid() && self.expander.isEnabled() && self.expander.isValid()) {
+                        if (this.isEnabled() && this.isValid() && this.expander.isEnabled() && this.expander.isValid()) {
-                            self._popupView();
+                            this._popupView();
-                            self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EXPAND, "", self.expander);
+                            this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EXPAND, "", this.expander);
-                            self.fireEvent(BI.Expander.EVENT_EXPAND);
+                            this.fireEvent(Expander.EVENT_EXPAND);
                         }
-                    }, function () {
+                    }, () => {
-                        if (self.isEnabled() && self.isValid() && self.expander.isEnabled() && self.expander.isValid() && o.toggle) {
+                        if (this.isEnabled() && this.isValid() && this.expander.isEnabled() && this.expander.isValid() && toggle) {
-                            self._hideView();
+                            this._hideView();
-                            self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", self.expander);
+                            this.fireEvent(Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", this.expander);
-                            self.fireEvent(BI.Expander.EVENT_COLLAPSE);
+                            this.fireEvent(Expander.EVENT_COLLAPSE);
                         }
                     });
                     break;
                 case "click":
                     if (e) {
-                        self.element.off(e + "." + self.getName()).on(e + "." + self.getName(), BI.debounce(function (e) {
+                        this.element.off(e + "." + this.getName()).on(e + "." + this.getName(), debounce((e) => {
-                            if (self.expander.element.__isMouseInBounds__(e)) {
+                            if (this.expander.element.__isMouseInBounds__(e)) {
-                                if (self.isEnabled() && self.isValid() && self.expander.isEnabled() && self.expander.isValid()) {
+                                if (this.isEnabled() && this.isValid() && this.expander.isEnabled() && this.expander.isValid()) {
-                                    o.toggle ? self._toggle() : self._popupView();
+                                    toggle ? this._toggle() : this._popupView();
-                                    if (self.isExpanded()) {
+                                    if (this.isExpanded()) {
-                                        self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EXPAND, "", self.expander);
+                                        this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EXPAND, "", this.expander);
-                                        self.fireEvent(BI.Expander.EVENT_EXPAND);
+                                        this.fireEvent(Expander.EVENT_EXPAND);
                                     } else {
-                                        self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", self.expander);
+                                        this.fireEvent(Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", this.expander);
-                                        self.fireEvent(BI.Expander.EVENT_COLLAPSE);
+                                        this.fireEvent(Expander.EVENT_COLLAPSE);
                                     }
                                 }
                             }
@@ -130,16 +146,16 @@ BI.Expander = BI.inherit(BI.Widget, {
                     break;
             }
         });
-    },
+    }
 
-    _initExpander: function () {
+    _initExpander() {
-        this.expander = BI.createWidget(this.options.el);
+        this.expander = createWidget(this.options.el);
-    },
+    }
 
-    _assertPopupView: function () {
+    _assertPopupView() {
-        var self = this, o = this.options;
+        const { value } = this.options;
-        if (BI.isNull(this.popupView)) {
+        if (isNull(this.popupView)) {
-            this.popupView = BI.createWidget(this.options.popup, {
+            this.popupView = createWidget(this.options.popup, {
                 type: "bi.button_group",
                 cls: "expander-popup",
                 layouts: [{
@@ -147,26 +163,26 @@ BI.Expander = BI.inherit(BI.Widget, {
                     hgap: 0,
                     vgap: 0,
                 }],
-                value: o.value,
+                value,
             }, this);
-            this.popupView.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
+            this.popupView.on(Controller.EVENT_CHANGE, (type, value, obj, ...args)=> {
-                self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+                this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
                 if (type === BI.Events.CLICK) {
                     // self.setValue(self.getValue());
-                    self.fireEvent(BI.Expander.EVENT_CHANGE, value, obj);
+                    this.fireEvent(Expander.EVENT_CHANGE, value, obj);
                 }
             });
             this.popupView.setVisible(this.isExpanded());
-            BI.nextTick(function () {
+            nextTick(() => {
-                self.fireEvent(BI.Expander.EVENT_AFTER_INIT);
+                this.fireEvent(Expander.EVENT_AFTER_INIT);
             });
         }
-    },
+    }
 
-    _assertPopupViewRender: function () {
+    _assertPopupViewRender() {
         this._assertPopupView();
         if (!this._rendered) {
-            BI.createWidget({
+            createWidget({
                 type: "bi.vertical",
                 scrolly: false,
                 element: this,
@@ -176,113 +192,100 @@ BI.Expander = BI.inherit(BI.Widget, {
             });
             this._rendered = true;
         }
-    },
+    }
 
-    _hideView: function () {
+    _hideView() {
-        this.fireEvent(BI.Expander.EVENT_BEFORE_HIDEVIEW);
+        this.fireEvent(Expander.EVENT_BEFORE_HIDEVIEW);
         this._expanded = false;
         this.expander.setOpened(false);
         this.popupView && this.popupView.invisible();
         this.element.removeClass(this.options.expanderClass);
 
-        this.fireEvent(BI.Expander.EVENT_AFTER_HIDEVIEW);
+        this.fireEvent(Expander.EVENT_AFTER_HIDEVIEW);
-    },
+    }
 
-    _popupView: function () {
+    _popupView() {
         this._assertPopupViewRender();
-        this.fireEvent(BI.Expander.EVENT_BEFORE_POPUPVIEW);
+        this.fireEvent(Expander.EVENT_BEFORE_POPUPVIEW);
         this._expanded = true;
         this.expander.setOpened(true);
         this.popupView.visible();
         this.element.addClass(this.options.expanderClass);
-        this.fireEvent(BI.Expander.EVENT_AFTER_POPUPVIEW);
+        this.fireEvent(Expander.EVENT_AFTER_POPUPVIEW);
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         // this._assertPopupView();
         this.popupView && this.popupView.populate.apply(this.popupView, arguments);
         this.expander.populate && this.expander.populate.apply(this.expander, arguments);
-    },
+    }
 
-    _setEnable: function (arg) {
+    _setEnable(arg) {
-        BI.Expander.superclass._setEnable.apply(this, arguments);
+        super._setEnable(arguments);
         !arg && this.element.removeClass(this.options.hoverClass);
         !arg && this.isViewVisible() && this._hideView();
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.expander.setValue(v);
-        if (BI.isNull(this.popupView)) {
+        if (isNull(this.popupView)) {
             this.options.popup.value = v;
         } else {
             this.popupView.setValue(v);
         }
-    },
+    }
 
-    getValue: function () {
+    getValue() {
-        if (BI.isNull(this.popupView)) {
+        if (isNull(this.popupView)) {
             return this.options.popup.value;
         } else {
             return this.popupView.getValue();
         }
-    },
+    }
 
-    isViewVisible: function () {
+    isViewVisible() {
         return this.isEnabled() && this.expander.isEnabled() && !!this.popupView && this.popupView.isVisible();
-    },
+    }
 
-    isExpanded: function () {
+    isExpanded() {
         return this._expanded;
-    },
+    }
 
-    showView: function () {
+    showView() {
         if (this.isEnabled() && this.expander.isEnabled()) {
             this._popupView();
         }
-    },
+    }
 
-    hideView: function () {
+    hideView() {
         this._hideView();
-    },
+    }
 
-    getView: function () {
+    getView() {
         return this.popupView;
-    },
+    }
 
-    getAllLeaves: function () {
+    getAllLeaves() {
         return this.popupView && this.popupView.getAllLeaves();
-    },
+    }
 
-    getNodeById: function (id) {
+    getNodeById(id) {
         if (this.expander.options.id === id) {
             return this.expander;
         }
 
         return this.popupView && this.popupView.getNodeById(id);
-    },
+    }
 
-    getNodeByValue: function (value) {
+    getNodeByValue(value) {
         if (this.expander.getValue() === value) {
             return this.expander;
         }
         
         return this.popupView && this.popupView.getNodeByValue(value);
-    },
+    }
-
-    destroy: function () {
-        BI.Expander.superclass.destroy.apply(this, arguments);
-    },
-});
-BI.Expander.EVENT_EXPAND = "EVENT_EXPAND";
-BI.Expander.EVENT_COLLAPSE = "EVENT_COLLAPSE";
-BI.Expander.EVENT_TRIGGER_CHANGE = "EVENT_TRIGGER_CHANGE";
-BI.Expander.EVENT_CHANGE = "EVENT_CHANGE";
-BI.Expander.EVENT_AFTER_INIT = "EVENT_AFTER_INIT";
-
-
-BI.Expander.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
-BI.Expander.EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW";
-BI.Expander.EVENT_BEFORE_HIDEVIEW = "EVENT_BEFORE_HIDEVIEW";
-BI.Expander.EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW";
 
-BI.shortcut("bi.expander", BI.Expander);
+    destroy() {
+        super.destroy(arguments);
+    }
+}

src/base/combination/group.button.js

@@ -3,10 +3,16 @@
  * @class BI.ButtonGroup
  * @extends BI.Widget
  */
+import { shortcut, Widget, Controller, extend, createWidget, createWidgets, each, isFunction, isKey, isNotEmptyArray, createItems, isArray, remove, map, stripEL, makeArrayByArray, clone, deepClone, formatEL, isEmpty, concat, removeAt, deepContains, has, any } from "../../core";
 
-BI.ButtonGroup = BI.inherit(BI.Widget, {
+@shortcut()
-    _defaultConfig: function () {
+export default class ButtonGroup extends Widget {
-        return BI.extend(BI.ButtonGroup.superclass._defaultConfig.apply(this, arguments), {
+    static xtype = "bi.button_group";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(arguments), {
             baseCls: "bi-button-group",
             behaviors: {},
             items: [],
@@ -18,83 +24,84 @@ BI.ButtonGroup = BI.inherit(BI.Widget, {
                 vgap: 0,
             }],
         });
-    },
+    }
 
-    render: function () {
+    render() {
-        var self = this, o = this.options;
+        const { behaviors: optionsBehaviors, items: optionsItems, value } = this.options;
-        var behaviors = {};
+        const behaviors = {};
-        BI.each(o.behaviors, function (key, rule) {
+        each(optionsBehaviors, (key, rule) => {
             behaviors[key] = BI.BehaviorFactory.createBehavior(key, {
                 rule: rule,
             });
         });
         this.behaviors = behaviors;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+        const items = isFunction(optionsItems) ? this.__watch(optionsItems, (context, newValue) => {
-            self.populate(newValue);
+            this.populate(newValue);
-        }) : o.items;
+        }) : optionsItems;
         this.populate(items);
-        o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) {
+        this.options.value = isFunction(value) ? this.__watch(value, (context, newValue) => {
-            self.setValue(newValue);
+            this.setValue(newValue);
-        }) : o.value;
+        }) : value;
-        if (BI.isKey(o.value) || BI.isNotEmptyArray(o.value)) {
+        if (isKey(value) || isNotEmptyArray(value)) {
-            this.setValue(o.value);
+            this.setValue(value);
         }
-    },
+    }
 
-    _createBtns: function (items) {
+    _createBtns(items) {
-        var btns;
+        let btns;
-        BI.Widget.execWithContext(this, function () {
+        Widget.execWithContext(this, () => {
-            btns = BI.createWidgets(BI.createItems(items, {
+            btns = createWidgets(createItems(items, {
                 type: "bi.text_button",
             }));
         });
 
         return btns;
-    },
+    }
 
-    _btnsCreator: function (items) {
+    _btnsCreator(items) {
-        var self = this, args = Array.prototype.slice.call(arguments), o = this.options;
+        const args = Array.prototype.slice.call(arguments);
-        var buttons = this._createBtns(items);
+        const { chooseType } = this.options;
+        const buttons = this._createBtns(items);
         args[0] = buttons;
 
-        BI.each(this.behaviors, function (i, behavior) {
+        each(this.behaviors, (i, behavior) => {
             behavior.doBehavior.apply(behavior, args);
         });
-        BI.each(buttons, function (i, btn) {
+        each(buttons, (i, btn) => {
-            btn.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
+            btn.on(Controller.EVENT_CHANGE, (type, value, obj, ...arg) => {
                 if (type === BI.Events.CLICK) {
-                    switch (o.chooseType) {
+                    switch (chooseType) {
-                        case BI.ButtonGroup.CHOOSE_TYPE_SINGLE:
+                        case ButtonGroup.CHOOSE_TYPE_SINGLE:
-                            self.setValue(btn.getValue());
+                            this.setValue(btn.getValue());
                             break;
-                        case BI.ButtonGroup.CHOOSE_TYPE_NONE:
+                        case ButtonGroup.CHOOSE_TYPE_NONE:
-                            self.setValue([]);
+                            this.setValue([]);
                             break;
                         default:
                             break;
                     }
-                    self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+                    this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...arg);
-                    self.fireEvent(BI.ButtonGroup.EVENT_CHANGE, value, obj);
+                    this.fireEvent(ButtonGroup.EVENT_CHANGE, value, obj);
                 } else {
-                    self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+                    this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...arg);
                 }
             });
-            btn.on(BI.Events.DESTROY, function () {
+            btn.on(BI.Events.DESTROY, () => {
-                BI.remove(self.buttons, btn);
+                remove(this.buttons, btn);
             });
         });
 
         return buttons;
-    },
+    }
-
+
-    _packageBtns: function (btns) {
+    _packageBtns(btns) {
-        var o = this.options;
+        const { layouts: optionsLayouts } = this.options;
-        var layouts = BI.isArray(o.layouts) ? o.layouts : [o.layouts];
+        const layouts = isArray(optionsLayouts) ? optionsLayouts : [optionsLayouts];
-        for (var i = layouts.length - 1; i > 0; i--) {
+        for (let i = layouts.length - 1; i > 0; i--) {
-            btns = BI.map(btns, function (k, it) {
+            btns = map(btns, (k, it) => {
-                return BI.extend({}, layouts[i], {
+                return extend({}, layouts[i], {
                     items: [
-                        BI.extend({}, layouts[i].el, {
+                        extend({}, layouts[i].el, {
                             el: it,
                         })
                     ],
@@ -103,56 +110,57 @@ BI.ButtonGroup = BI.inherit(BI.Widget, {
         }
 
         return btns;
-    },
+    }
 
-    _packageSimpleItems: function (btns) {
+    _packageSimpleItems(btns) {
-        var o = this.options;
+        const { items } = this.options;
 
-        return BI.map(o.items, function (i, item) {
+        return map(items, (i, item) => {
-            if (BI.stripEL(item) === item) {
+            if (stripEL(item) === item) {
                 return btns[i];
             }
 
-            return BI.extend({}, item, {
+            return extend({}, item, {
                 el: btns[i],
             });
         });
-    },
+    }
 
-    _packageItems: function (items, packBtns) {
+    _packageItems(items, packBtns) {
-        return BI.createItems(BI.makeArrayByArray(items, {}), BI.clone(packBtns));
+        return createItems(makeArrayByArray(items, {}), clone(packBtns));
-    },
+    }
 
-    _packageLayout: function (items) {
+    _packageLayout(items) {
-        var o = this.options, layout = BI.deepClone(BI.isArray(o.layouts) ? o.layouts[0] : o.layouts);
+        const { layouts } = this.options;
+        const layout = deepClone(isArray(layouts) ? layouts[0] : layouts);
 
-        var lay = BI.formatEL(layout).el;
+        let lay = formatEL(layout).el;
-        while (lay && lay.items && !BI.isEmpty(lay.items)) {
+        while (lay && lay.items && !isEmpty(lay.items)) {
-            lay = BI.formatEL(lay.items[0]).el;
+            lay = formatEL(lay.items[0]).el;
         }
         lay.items = items;
 
         return layout;
-    },
+    }
 
     // 如果是一个简单的layout
-    _isSimpleLayout: function () {
+    _isSimpleLayout() {
-        var o = this.options;
+        const { layouts, items } = this.options;
 
-        return BI.isArray(o.layouts) ? (o.layouts.length === 1 && !BI.isArray(o.items[0])) : true;
+        return isArray(layouts) ? (layouts.length === 1 && !isArray(items[0])) : true;
-    },
+    }
 
-    doBehavior: function () {
+    doBehavior() {
-        var args = Array.prototype.slice.call(arguments);
+        const args = Array.prototype.slice.call(arguments);
         args.unshift(this.buttons);
-        BI.each(this.behaviors, function (i, behavior) {
+        each(this.behaviors, (i, behavior) => {
             behavior.doBehavior.apply(behavior, args);
         });
-    },
+    }
 
-    prependItems: function (items) {
+    prependItems(items) {
-        var btns = this._btnsCreator.apply(this, arguments);
+        const btns = this._btnsCreator.apply(this, arguments);
-        this.buttons = BI.concat(btns, this.buttons);
+        this.buttons = concat(btns, this.buttons);
 
         if (this._isSimpleLayout() && this.layouts && this.layouts.prependItems) {
             this.layouts.prependItems(btns);
@@ -162,11 +170,11 @@ BI.ButtonGroup = BI.inherit(BI.Widget, {
 
         items = this._packageItems(items, this._packageBtns(btns));
         this.layouts.prependItems(this._packageLayout(items).items);
-    },
+    }
 
-    addItems: function (items) {
+    addItems(items) {
-        var btns = this._btnsCreator.apply(this, arguments);
+        const btns = this._btnsCreator.apply(this, arguments);
-        this.buttons = BI.concat(this.buttons, btns);
+        this.buttons = concat(this.buttons, btns);
 
         // 如果是一个简单的layout
         if (this._isSimpleLayout() && this.layouts && this.layouts.addItems) {
@@ -177,26 +185,26 @@ BI.ButtonGroup = BI.inherit(BI.Widget, {
 
         items = this._packageItems(items, this._packageBtns(btns));
         this.layouts.addItems(this._packageLayout(items).items);
-    },
+    }
 
-    removeItemAt: function (indexes) {
+    removeItemAt(indexes) {
-        BI.removeAt(this.buttons, indexes);
+        removeAt(this.buttons, indexes);
         this.layouts.removeItemAt(indexes);
-    },
+    }
 
-    removeItems: function (values) {
+    removeItems(values) {
-        values = BI.isArray(values) ? values : [values];
+        values = isArray(values) ? values : [values];
-        var deleted = [];
+        const deleted = [];
-        BI.each(this.buttons, function (i, button) {
+        each(this.buttons, (i, button) => {
-            if (BI.deepContains(values, button.getValue())) {
+            if (deepContains(values, button.getValue())) {
                 deleted.push(i);
             }
         });
-        BI.removeAt(this.buttons, deleted);
+        removeAt(this.buttons, deleted);
         this.layouts.removeItemAt(deleted);
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         items = items || [];
         this.empty();
         this.options.items = items;
@@ -208,114 +216,114 @@ BI.ButtonGroup = BI.inherit(BI.Widget, {
             items = this._packageItems(items, this._packageBtns(this.buttons));
         }
 
-        this.layouts = BI.createWidget(BI.extend({ element: this }, this._packageLayout(items)));
+        this.layouts = createWidget(extend({ element: this }, this._packageLayout(items)));
-    },
+    }
 
-    setNotSelectedValue: function (v) {
+    setNotSelectedValue(v) {
-        v = BI.isArray(v) ? v : [v];
+        v = isArray(v) ? v : [v];
-        BI.each(this.buttons, function (i, item) {
+        each(this.buttons, (i, item) => {
-            if (BI.deepContains(v, item.getValue())) {
+            if (deepContains(v, item.getValue())) {
                 item.setSelected && item.setSelected(false);
             } else {
                 item.setSelected && item.setSelected(true);
             }
         });
-    },
+    }
 
-    setEnabledValue: function (v) {
+    setEnabledValue(v) {
-        v = BI.isArray(v) ? v : [v];
+        v = isArray(v) ? v : [v];
-        BI.each(this.buttons, function (i, item) {
+        each(this.buttons, (i, item) => {
-            if (BI.deepContains(v, item.getValue())) {
+            if (deepContains(v, item.getValue())) {
                 item.setEnable(true);
             } else {
                 item.setEnable(false);
             }
         });
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
-        v = BI.isArray(v) ? v : [v];
+        v = isArray(v) ? v : [v];
-        BI.each(this.buttons, function (i, item) {
+        each(this.buttons, (i, item) => {
-            if (BI.deepContains(v, item.getValue())) {
+            if (deepContains(v, item.getValue())) {
                 item.setSelected && item.setSelected(true);
             } else {
                 item.setSelected && item.setSelected(false);
             }
         });
-    },
+    }
 
-    setValueMap: function (map) {
+    setValueMap(map) {
         map = map || {};
-        BI.each(this.buttons, function (i, item) {
+        each(this.buttons, (i, item) => {
-            if (BI.has(map, item.getValue())) {
+            if (has(map, item.getValue())) {
                 item.setSelected && item.setSelected(true);
             } else {
                 item.setSelected && item.setSelected(false);
             }
         });
-    },
+    }
 
-    setAllSelected: function (v) {
+    setAllSelected(v) {
-        BI.each(this.getAllButtons(), function (i, btn) {
+        each(this.getAllButtons(), (i, btn) => {
             (btn.setSelected || btn.setAllSelected).apply(btn, [v]);
         });
-    },
+    }
 
-    getNotSelectedValue: function () {
+    getNotSelectedValue() {
-        var v = [];
+        const v = [];
-        BI.each(this.buttons, function (i, item) {
+        each(this.buttons, (i, item) => {
             if (item.isEnabled() && !(item.isSelected && item.isSelected())) {
                 v.push(item.getValue());
             }
         });
 
         return v;
-    },
+    }
 
-    getValue: function () {
+    getValue() {
-        var v = [];
+        const v = [];
-        BI.each(this.buttons, function (i, item) {
+        each(this.buttons, (i, item) => {
             if (item.isEnabled() && item.isSelected && item.isSelected()) {
                 v.push(item.getValue());
             }
         });
 
         return v;
-    },
+    }
 
-    getAllButtons: function () {
+    getAllButtons() {
         return this.buttons;
-    },
+    }
 
-    getAllLeaves: function () {
+    getAllLeaves() {
         return this.buttons;
-    },
+    }
 
-    getSelectedButtons: function () {
+    getSelectedButtons() {
-        var btns = [];
+        const btns = [];
-        BI.each(this.buttons, function (i, item) {
+        each(this.buttons, (i, item) => {
             if (item.isSelected && item.isSelected()) {
                 btns.push(item);
             }
         });
 
         return btns;
-    },
+    }
 
-    getNotSelectedButtons: function () {
+    getNotSelectedButtons() {
-        var btns = [];
+        const btns = [];
-        BI.each(this.buttons, function (i, item) {
+        each(this.buttons, (i, item) => {
             if (item.isSelected && !item.isSelected()) {
                 btns.push(item);
             }
         });
 
         return btns;
-    },
+    }
 
-    getIndexByValue: function (value) {
+    getIndexByValue(value) {
-        var index = -1;
+        let index = -1;
-        BI.any(this.buttons, function (i, item) {
+        any(this.buttons, (i, item) => {
             if (item.isEnabled() && item.getValue() === value) {
                 index = i;
 
@@ -324,11 +332,11 @@ BI.ButtonGroup = BI.inherit(BI.Widget, {
         });
 
         return index;
-    },
+    }
 
-    getNodeById: function (id) {
+    getNodeById(id) {
-        var node;
+        let node;
-        BI.any(this.buttons, function (i, item) {
+        any(this.buttons, (i, item) => {
             if (item.isEnabled() && item.options.id === id) {
                 node = item;
 
@@ -337,11 +345,11 @@ BI.ButtonGroup = BI.inherit(BI.Widget, {
         });
 
         return node;
-    },
+    }
 
-    getNodeByValue: function (value) {
+    getNodeByValue(value) {
-        var node;
+        let node;
-        BI.any(this.buttons, function (i, item) {
+        any(this.buttons, (i, item) => {
             if (item.isEnabled() && item.getValue() === value) {
                 node = item;
 
@@ -350,35 +358,33 @@ BI.ButtonGroup = BI.inherit(BI.Widget, {
         });
 
         return node;
-    },
+    }
 
     /**
      * 滚动到指定的节点
      */
-    scrollToValue: function (value, scrollIntoViewOptions) {
+    scrollToValue(value, scrollIntoViewOptions) {
-        var node = this.getNodeByValue(value);
+        const node = this.getNodeByValue(value);
         if (node) {
             node.element[0].scrollIntoView(scrollIntoViewOptions);
         }
-    },
+    }
 
-    empty: function () {
+    empty() {
-        BI.ButtonGroup.superclass.empty.apply(this, arguments);
+        super.empty(arguments);
         this.options.items = [];
-    },
+    }
 
-    destroy: function () {
+    destroy() {
-        BI.ButtonGroup.superclass.destroy.apply(this, arguments);
+        super.destroy(arguments);
         this.options.items = [];
-    },
+    }
-});
+}
-BI.extend(BI.ButtonGroup, {
+
+extend(ButtonGroup, {
     CHOOSE_TYPE_SINGLE: BI.Selection.Single,
     CHOOSE_TYPE_MULTI: BI.Selection.Multi,
     CHOOSE_TYPE_ALL: BI.Selection.All,
     CHOOSE_TYPE_NONE: BI.Selection.None,
     CHOOSE_TYPE_DEFAULT: BI.Selection.Default,
 });
-BI.ButtonGroup.EVENT_CHANGE = "EVENT_CHANGE";
-
-BI.shortcut("bi.button_group", BI.ButtonGroup);

src/base/combination/group.combo.js

@@ -2,9 +2,16 @@
  * Created by GUY on 2015/8/10.
  */
 
-BI.ComboGroup = BI.inherit(BI.Widget, {
+import { shortcut, Widget, Controller, extend, isEmpty, each, formatEL, clone, createWidget } from "../../core";
-    _defaultConfig: function () {
+
-        return BI.extend(BI.ComboGroup.superclass._defaultConfig.apply(this, arguments), {
+@shortcut()
+export default class ComboGroup extends Widget {
+    static xtype = "bi.combo_group";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(arguments), {
             baseCls: "bi-combo-group bi-list-item",
 
             // 以下这些属性对每一个combo都是公用的
@@ -28,69 +35,66 @@ BI.ComboGroup = BI.inherit(BI.Widget, {
                 },
             },
         });
-    },
+    }
 
-    render: function () {
+    render() {
         this._populate(this.options.el);
-    },
+    }
 
-    _populate: function (item) {
+    _populate(item) {
-        var self = this, o = this.options;
+        const { items, action, height, direction, isDefaultInit, isNeedAdjustHeight, isNeedAdjustWidth, adjustLength, popup, container, trigger } = this.options;
-        var children = o.items;
+        const children = items;
-        if (BI.isEmpty(children)) {
+        if (isEmpty(children)) {
             throw new Error("ComboGroup构造错误");
         }
-        BI.each(children, function (i, ch) {
+        each(children, (i, ch) => {
-            var son = BI.formatEL(ch).el.children;
+            const son = formatEL(ch).el.children;
-            ch = BI.formatEL(ch).el;
+            ch = formatEL(ch).el;
-            if (!BI.isEmpty(son)) {
+            if (!isEmpty(son)) {
-                ch.el = BI.clone(ch);
+                ch.el = clone(ch);
                 ch.items = son;
                 ch.type = "bi.combo_group";
-                ch.action = o.action;
+                ch.action = action;
-                ch.height = o.height;
+                ch.height = height;
-                ch.direction = o.direction;
+                ch.direction = direction;
-                ch.isDefaultInit = o.isDefaultInit;
+                ch.isDefaultInit = isDefaultInit;
-                ch.isNeedAdjustHeight = o.isNeedAdjustHeight;
+                ch.isNeedAdjustHeight = isNeedAdjustHeight;
-                ch.isNeedAdjustWidth = o.isNeedAdjustWidth;
+                ch.isNeedAdjustWidth = isNeedAdjustWidth;
-                ch.adjustLength = o.adjustLength;
+                ch.adjustLength = adjustLength;
-                ch.popup = o.popup;
+                ch.popup = popup;
             }
         });
-        this.combo = BI.createWidget({
+        this.combo = createWidget({
             type: "bi.combo",
             element: this,
-            container: o.container,
+            container,
-            height: o.height,
+            height,
-            trigger: o.trigger,
+            trigger,
-            direction: o.direction,
+            direction,
-            isDefaultInit: o.isDefaultInit,
+            isDefaultInit,
-            isNeedAdjustWidth: o.isNeedAdjustWidth,
+            isNeedAdjustWidth,
-            isNeedAdjustHeight: o.isNeedAdjustHeight,
+            isNeedAdjustHeight,
-            adjustLength: o.adjustLength,
+            adjustLength,
             el: item,
-            popup: BI.extend({}, o.popup, {
+            popup: extend({}, popup, {
-                el: BI.extend({
+                el: extend({
                     items: children,
-                }, o.popup.el),
+                }, popup.el),
             }),
         });
-        this.combo.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
+        this.combo.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+            this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
             if (type === BI.Events.CLICK) {
-                self.fireEvent(BI.ComboGroup.EVENT_CHANGE, obj);
+                this.fireEvent(ComboGroup.EVENT_CHANGE, obj);
             }
         });
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.combo.getValue();
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.combo.setValue(v);
-    },
+    }
-});
+}
-BI.ComboGroup.EVENT_CHANGE = "EVENT_CHANGE";
-
-BI.shortcut("bi.combo_group", BI.ComboGroup);

src/base/combination/group.virtual.js

@@ -1,6 +1,13 @@
-BI.VirtualGroup = BI.inherit(BI.Widget, {
+import { shortcut, Widget, Controller, extend, isFunction, isKey, isArray, map, stripEL, deepClone, formatEL, isEmpty, each, createWidget } from "../../core";
-    _defaultConfig: function () {
+
-        return BI.extend(BI.VirtualGroup.superclass._defaultConfig.apply(this, arguments), {
+@shortcut()
+export default class VirtualGroup extends Widget {
+    static xtype = "bi.virtual_group";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    
+    _defaultConfig() {
+        return extend(super._defaultConfig(arguments), {
             baseCls: "bi-virtual-group",
             items: [],
             layouts: [{
@@ -9,36 +16,36 @@ BI.VirtualGroup = BI.inherit(BI.Widget, {
                 vgap: 0,
             }],
         });
-    },
+    }
 
-    render: function () {
+    render() {
-        var self = this, o = this.options;
+        const { items: optionsItems, value } = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+        const items = isFunction(optionsItems) ? this.__watch(optionsItems, (context, newValue) => {
-            self.populate(newValue);
+            this.populate(newValue);
-        }) : o.items;
+        }) : optionsItems;
         this.populate(items);
-        o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) {
+        this.options.value = isFunction(value) ? this.__watch(value, (context, newValue) => {
-            self.setValue(newValue);
+            this.setValue(newValue);
-        }) : o.value;
+        }) : value;
-        if (BI.isKey(o.value)) {
+        if (isKey(value)) {
-            this.setValue(o.value);
+            this.setValue(value);
         }
-    },
+    }
 
-    _packageBtns: function (items) {
+    _packageBtns(items) {
-        var o = this.options;
+        const o = this.options;
-        var map = this.buttonMap = {};
+        const map = this.buttonMap = {};
-        var layouts = BI.isArray(o.layouts) ? o.layouts : [o.layouts];
+        const layouts = isArray(o.layouts) ? o.layouts : [o.layouts];
         for (let i = layouts.length - 1; i > 0; i--) {
-            items = BI.map(items, function (k, it) {
+            items = map(items, (k, it) => {
-                var el = BI.stripEL(it);
+                const el = stripEL(it);
 
-                return BI.extend({}, layouts[i], {
+                return extend({}, layouts[i], {
                     items: [
-                        BI.extend({}, layouts[i].el, {
+                        extend({}, layouts[i].el, {
-                            el: BI.extend({
+                            el: extend({
-                                ref: function (_ref) {
+                                ref: (_ref) => {
-                                    if (BI.isKey(map[el.value])) {
+                                    if (isKey(map[el.value])) {
                                         map[el.value] = _ref;
                                     }
                                 },
@@ -50,33 +57,33 @@ BI.VirtualGroup = BI.inherit(BI.Widget, {
         }
         
         return items;
-    },
+    }
 
-    _packageLayout: function (items) {
+    _packageLayout(items) {
-        var o = this.options;
+        const o = this.options;
-        var layouts = BI.isArray(o.layouts) ? o.layouts : [o.layouts];
+        const layouts = isArray(o.layouts) ? o.layouts : [o.layouts];
-        var layout = BI.deepClone(layouts[0]);
+        const layout = deepClone(layouts[0]);
 
-        var lay = BI.formatEL(layout).el;
+        let lay = formatEL(layout).el;
-        while (lay && lay.items && !BI.isEmpty(lay.items)) {
+        while (lay && lay.items && !isEmpty(lay.items)) {
-            lay = BI.formatEL(lay.items[0]).el;
+            lay = formatEL(lay.items[0]).el;
         }
         lay.items = items;
 
         return layout;
-    },
+    }
 
-    addItems: function (items) {
+    addItems(items) {
         this.layouts.addItems(items, this);
-    },
+    }
 
-    prependItems: function (items) {
+    prependItems(items) {
         this.layouts.prependItems(items, this);
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
-        v = BI.isArray(v) ? v : [v];
+        v = isArray(v) ? v : [v];
-        BI.each(this.buttonMap, function (key, item) {
+        each(this.buttonMap, (key, item) => {
             if (item) {
                 if (v.deepContains(key)) {
                     item.setSelected && item.setSelected(true);
@@ -85,11 +92,11 @@ BI.VirtualGroup = BI.inherit(BI.Widget, {
                 }
             }
         });
-    },
+    }
 
-    getNotSelectedValue: function () {
+    getNotSelectedValue() {
-        var v = [];
+        const v = [];
-        BI.each(this.buttonMap, function (i, item) {
+        each(this.buttonMap, (i, item) => {
             if (item) {
                 if (item.isEnabled() && !(item.isSelected && item.isSelected())) {
                     v.push(item.getValue());
@@ -98,25 +105,25 @@ BI.VirtualGroup = BI.inherit(BI.Widget, {
         });
 
         return v;
-    },
+    }
 
-    getNodeByValue: function (value) {
+    getNodeByValue(value) {
         return this.buttonMap[value];
-    },
+    }
 
     /**
      * 滚动到指定的节点
      */
-    scrollToValue: function (value, scrollIntoViewOptions) {
+    scrollToValue(value, scrollIntoViewOptions) {
-        var node = this.getNodeByValue(value);
+        const node = this.getNodeByValue(value);
         if (node) {
             node.element[0].scrollIntoView(scrollIntoViewOptions);
         }
-    },
+    }
 
-    getValue: function () {
+    getValue() {
-        var v = [];
+        const v = [];
-        BI.each(this.buttonMap, function (i, item) {
+        each(this.buttonMap, (i, item) => {
             if (item) {
                 if (item.isEnabled() && item.isSelected && item.isSelected()) {
                     v.push(item.getValue());
@@ -125,21 +132,18 @@ BI.VirtualGroup = BI.inherit(BI.Widget, {
         });
 
         return v;
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         items = items || [];
         this.options.items = items;
         items = this._packageBtns(items);
         if (!this.layouts) {
-            this.layouts = BI.createWidget(BI.extend({ element: this }, this._packageLayout(items)));
+            this.layouts = createWidget(extend({ element: this }, this._packageLayout(items)));
         } else {
             this.layouts.populate(items, {
                 context: this,
             });
         }
-    },
+    }
-});
+}
-BI.VirtualGroup.EVENT_CHANGE = "EVENT_CHANGE";
-
-BI.shortcut("bi.virtual_group", BI.VirtualGroup);

src/base/combination/loader.js

@@ -5,9 +5,16 @@
  * @class BI.Loader
  * @extends BI.Widget
  */
-BI.Loader = BI.inherit(BI.Widget, {
+import { shortcut, Widget, Controller, extend, createWidget, isEmpty, nextTick, bind, isFunction, isNotEmptyArray, isNumber, isObject, each } from "../../core";
-    _defaultConfig: function () {
+
-        return BI.extend(BI.Loader.superclass._defaultConfig.apply(this, arguments), {
+@shortcut()
+export default class Loader extends Widget {
+    static xtype = "bi.loader";
+    
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(arguments), {
             baseCls: "bi-loader",
 
             direction: "top",
@@ -33,115 +40,115 @@ BI.Loader = BI.inherit(BI.Widget, {
             hasPrev: BI.emptyFn,
             hasNext: BI.emptyFn,
         });
-    },
+    }
 
-    _prevLoad: function () {
+    _prevLoad() {
-        var self = this, o = this.options;
+        const o = this.options;
         this.prev.setLoading();
-        o.itemsCreator.apply(this, [{ times: --this.times }, function () {
+        o.itemsCreator.apply(this, [{ times: --this.times }, (...args) => {
-            self.prev.setLoaded();
+            this.prev.setLoaded();
-            self.prependItems.apply(self, arguments);
+            this.prependItems.apply(this, args);
         }]);
-    },
+    }
 
-    _nextLoad: function () {
+    _nextLoad() {
-        var self = this, o = this.options;
+        const o = this.options;
         this.next.setLoading();
-        o.itemsCreator.apply(this, [{ times: ++this.times }, function () {
+        o.itemsCreator.apply(this, [{ times: ++this.times }, (...args) => {
-            self.next.setLoaded();
+            this.next.setLoaded();
-            self.addItems.apply(self, arguments);
+            this.addItems.apply(this, args);
         }]);
-    },
+    }
 
-    render: function () {
+    render() {
-        var self = this, o = this.options;
+        const { itemsCreator, prev, next, el, items: optionsItems, value, direction, logic, isDefaultInit } = this.options;
-        if (o.itemsCreator === false) {
+        if (itemsCreator === false) {
-            o.prev = false;
+            prev = false;
-            o.next = false;
+            next = false;
         }
-        if (o.prev !== false) {
+        if (prev !== false) {
-            this.prev = BI.createWidget(BI.extend({
+            this.prev = createWidget(extend({
                 type: "bi.loading_bar",
-            }, o.prev));
+            }, prev));
-            this.prev.on(BI.Controller.EVENT_CHANGE, function (type) {
+            this.prev.on(Controller.EVENT_CHANGE, (type) => {
                 if (type === BI.Events.CLICK) {
-                    self._prevLoad();
+                    this._prevLoad();
                 }
             });
         }
 
-        this.button_group = BI.createWidget(o.el, {
+        this.button_group = createWidget(el, {
             type: "bi.button_group",
             chooseType: 0,
-            items: o.items,
+            items: optionsItems,
             behaviors: {},
             layouts: [{
                 type: "bi.vertical",
             }],
-            value: o.value,
+            value,
         });
-        this.button_group.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
+        this.button_group.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+            this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
             if (type === BI.Events.CLICK) {
-                self.fireEvent(BI.Loader.EVENT_CHANGE, obj);
+                this.fireEvent(Loader.EVENT_CHANGE, obj);
             }
         });
 
-        if (o.next !== false) {
+        if (next !== false) {
-            this.next = BI.createWidget(BI.extend({
+            this.next = createWidget(extend({
                 type: "bi.loading_bar",
-            }, o.next));
+            }, next));
-            this.next.on(BI.Controller.EVENT_CHANGE, function (type) {
+            this.next.on(Controller.EVENT_CHANGE, (type) => {
                 if (type === BI.Events.CLICK) {
-                    self._nextLoad();
+                    this._nextLoad();
                 }
             });
         }
 
-        BI.createWidget(BI.extend({
+        createWidget(extend({
             element: this,
-        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({
+        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(direction), extend({
             scrolly: true,
-        }, o.logic, {
+        }, logic, {
-            items: BI.LogicFactory.createLogicItemsByDirection(o.direction, this.prev, this.button_group, this.next),
+            items: BI.LogicFactory.createLogicItemsByDirection(direction, this.prev, this.button_group, this.next),
         }))));
 
-        o.isDefaultInit && BI.isEmpty(o.items) && BI.nextTick(BI.bind(function () {
+        isDefaultInit && isEmpty(optionsItems) && nextTick(bind(() => {
-            o.isDefaultInit && BI.isEmpty(o.items) && this._populate();
+            isDefaultInit && isEmpty(optionsItems) && this._populate();
         }, this));
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+        const items = isFunction(optionsItems) ? this.__watch(optionsItems, (context, newValue) => {
-            self.populate(newValue);
+            this.populate(newValue);
-        }) : o.items;
+        }) : optionsItems;
-        if (BI.isNotEmptyArray(items)) {
+        if (isNotEmptyArray(items)) {
             this._populate(items);
         }
-    },
+    }
 
-    hasPrev: function () {
+    hasPrev() {
-        var o = this.options;
+        const { count, hasPrev } = this.options;
-        if (BI.isNumber(o.count)) {
+        if (isNumber(count)) {
-            return this.count < o.count;
+            return this.count < count;
         }
 
-        return !!o.hasPrev.apply(this, [{
+        return !!hasPrev.apply(this, [{
             times: this.times,
             count: this.count,
         }]);
-    },
+    }
 
-    hasNext: function () {
+    hasNext() {
-        var o = this.options;
+        const { count, hasNext } = this.options;
-        if (BI.isNumber(o.count)) {
+        if (isNumber(count)) {
-            return this.count < o.count;
+            return this.count < count;
         }
 
-        return !!o.hasNext.apply(this, [{
+        return !!hasNext.apply(this, [{
             times: this.times,
             count: this.count,
         }]);
-    },
+    }
 
-    prependItems: function (items) {
+    prependItems(items) {
         this.count += items.length;
         if (this.next !== false) {
             if (this.hasPrev()) {
@@ -152,11 +159,11 @@ BI.Loader = BI.inherit(BI.Widget, {
             }
         }
         this.button_group.prependItems.apply(this.button_group, arguments);
-    },
+    }
 
-    addItems: function (items) {
+    addItems(items) {
         this.count += items.length;
-        if (BI.isObject(this.next)) {
+        if (isObject(this.next)) {
             if (this.hasNext()) {
                 this.options.items = this.options.items.concat(items);
                 this.next.setLoaded();
@@ -165,16 +172,16 @@ BI.Loader = BI.inherit(BI.Widget, {
             }
         }
         this.button_group.addItems.apply(this.button_group, arguments);
-    },
+    }
 
-    _populate: function (items) {
+    _populate(items) {
-        var self = this, o = this.options;
+        const o = this.options;
-        if (arguments.length === 0 && (BI.isFunction(o.itemsCreator))) {
+        if (arguments.length === 0 && (isFunction(o.itemsCreator))) {
-            o.itemsCreator.apply(this, [{ times: 1 }, function () {
+            o.itemsCreator.apply(this, [{ times: 1 }, (...args) => {
-                if (arguments.length === 0) {
+                if (args.length === 0) {
                     throw new Error("参数不能为空");
                 }
-                self.populate.apply(self, arguments);
+                this.populate.apply(this, args);
                 o.onLoaded();
             }]);
 
@@ -184,14 +191,14 @@ BI.Loader = BI.inherit(BI.Widget, {
         this.times = 1;
         this.count = 0;
         this.count += items.length;
-        if (BI.isObject(this.next)) {
+        if (isObject(this.next)) {
             if (this.hasNext()) {
                 this.next.setLoaded();
             } else {
                 this.next.invisible();
             }
         }
-        if (BI.isObject(this.prev)) {
+        if (isObject(this.prev)) {
             if (this.hasPrev()) {
                 this.prev.setLoaded();
             } else {
@@ -200,66 +207,64 @@ BI.Loader = BI.inherit(BI.Widget, {
         }
         
         return true;
-    },
+    }
 
-    populate: function () {
+    populate() {
         this._populate.apply(this, arguments) && this.button_group.populate.apply(this.button_group, arguments);
-    },
+    }
 
-    setNotSelectedValue: function () {
+    setNotSelectedValue() {
         this.button_group.setNotSelectedValue.apply(this.button_group, arguments);
-    },
+    }
 
-    getNotSelectedValue: function () {
+    getNotSelectedValue() {
         return this.button_group.getNotSelectedValue();
-    },
+    }
 
-    setValue: function () {
+    setValue() {
         this.button_group.setValue.apply(this.button_group, arguments);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.button_group.getValue.apply(this.button_group, 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);
-    },
+    }
 
-    empty: function () {
+    empty() {
         this.button_group.empty();
-        BI.each([this.prev, this.next], function (i, ob) {
+        each([this.prev, this.next], (i, ob) => {
             ob && ob.setVisible(false);
         });
-    },
+    }
-
+
-    destroy: function () {
+    destroy() {
-        BI.Loader.superclass.destroy.apply(this, arguments);
+        super.destroy(arguments);
-    },
+    }
-});
+}
-BI.Loader.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.loader", BI.Loader);

src/base/combination/navigation.js

@@ -1,10 +1,16 @@
 /**
  * Created by GUY on 2015/6/26.
  */
+import { shortcut, Widget, Controller, extend, createWidget, bind, ShowListener, isFunction, each, nextTick, isKey, values } from "../../core";
 
-BI.Navigation = BI.inherit(BI.Widget, {
+@shortcut()
-    _defaultConfig: function () {
+export default class Navigation extends Widget {
-        return BI.extend(BI.Navigation.superclass._defaultConfig.apply(this, arguments), {
+    static xtype = "bi.navigation";
+    
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(arguments), {
             direction: "bottom", // top, bottom, left, right, custom
             logic: {
                 dynamic: false,
@@ -12,160 +18,158 @@ BI.Navigation = BI.inherit(BI.Widget, {
             single: false,
             showIndex: false,
             tab: false,
-            cardCreator: function (v) {
+            cardCreator: (v) => {
-                return BI.createWidget();
+                return createWidget();
             },
 
             afterCardCreated: BI.emptyFn,
             afterCardShow: BI.emptyFn,
         });
-    },
+    }
 
-    render: function () {
+    render() {
-        var self = this, o = this.options;
+        const { direction, logic, cardCreator, showIndex } = this.options;
-        this.tab = BI.createWidget(this.options.tab, { type: "bi.button_group" });
+        this.tab = createWidget(this.options.tab, { type: "bi.button_group" });
         this.cardMap = {};
         this.showIndex = 0;
-        this.layout = BI.createWidget({
+        this.layout = createWidget({
             type: "bi.card",
         });
-        BI.createWidget(BI.extend({
+        createWidget(extend({
             element: this,
-        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({}, o.logic, {
+        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(direction), extend({}, logic, {
-            items: BI.LogicFactory.createLogicItemsByDirection(o.direction, this.tab, this.layout),
+            items: BI.LogicFactory.createLogicItemsByDirection(direction, this.tab, this.layout),
         }))));
 
 
-        new BI.ShowListener({
+        new ShowListener({
             eventObj: this.tab,
             cardLayout: this.layout,
-            cardNameCreator: function (v) {
+            cardNameCreator: (v) => {
-                return self.showIndex + v;
+                return this.showIndex + v;
             },
-            cardCreator: function (v) {
+            cardCreator: (v) => {
-                BI.Widget.execWithContext(self, function () {
+                Widget.execWithContext(this, () => {
-                    self.cardMap[v] = o.cardCreator(v);
+                    this.cardMap[v] = cardCreator(v);
                 });
-                return self.cardMap[v];
+                return this.cardMap[v];
             },
-            afterCardCreated: BI.bind(this.afterCardCreated, this),
+            afterCardCreated: bind(this.afterCardCreated, this),
-            afterCardShow: BI.bind(this.afterCardShow, this),
+            afterCardShow: bind(this.afterCardShow, this),
         });
 
-        if (BI.isFunction(o.showIndex)) {
+        if (isFunction(showIndex)) {
-            this.__watch(o.showIndex, function (context, newValue) {
+            this.__watch(showIndex, (context, newValue) => {
-                self.setSelect(newValue);
+                this.setSelect(newValue);
             });
         }
-    },
+    }
 
-    created: function () {
+    created() {
-        var o = this.options;
+        const { showIndex } = this.options;
-        if (o.showIndex !== false) {
+        if (showIndex !== false) {
-            this.setSelect(o.showIndex);
+            this.setSelect(showIndex);
         }
-    },
+    }
 
-    _deleteOtherCards: function (currCardName) {
+    _deleteOtherCards(currCardName) {
-        var self = this, o = this.options;
+        const { single } = this.options;
-        if (o.single === true) {
+        if (single === true) {
-            BI.each(this.cardMap, function (name, card) {
+            each(this.cardMap, (name, card) => {
                 if (name !== (currCardName + "")) {
-                    self.layout.deleteCardByName(name);
+                    this.layout.deleteCardByName(name);
-                    delete self.cardMap[name];
+                    delete this.cardMap[name];
                 }
             });
         }
-    },
+    }
 
-    afterCardCreated: function (v) {
+    afterCardCreated(v) {
-        var self = this;
+        this.cardMap[v].on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => {
-        this.cardMap[v].on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
+            this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
             if (type === BI.Events.CLICK) {
-                self.fireEvent(BI.Navigation.EVENT_CHANGE, obj);
+                this.fireEvent(Navigation.EVENT_CHANGE, obj);
             }
         });
         this.options.afterCardCreated.apply(this, arguments);
-    },
+    }
 
-    afterCardShow: function (v) {
+    afterCardShow(v) {
         this.showIndex = v;
         this._deleteOtherCards(v);
         this.options.afterCardShow.apply(this, arguments);
-    },
+    }
 
-    populate: function () {
+    populate() {
-        var card = this.layout.getShowingCard();
+        const card = this.layout.getShowingCard();
         if (card) {
             return card.populate.apply(card, arguments);
         }
-    },
+    }
 
-    _assertCard: function (v) {
+    _assertCard(v) {
-        var self = this, o = this.options;
+        const { cardCreator } = this.options;
         if (!this.layout.isCardExisted(v)) {
-            BI.Widget.execWithContext(self, function () {
+            Widget.execWithContext(this, () => {
-                self.cardMap[v] = o.cardCreator(v);
+                this.cardMap[v] = cardCreator(v);
             });
             this.layout.addCardByName(v, this.cardMap[v]);
             this.afterCardCreated(v);
         }
-    },
+    }
 
-    setSelect: function (v) {
+    setSelect(v) {
         this._assertCard(v);
         this.layout.showCardByName(v);
         this._deleteOtherCards(v);
         if (this.showIndex !== v) {
             this.showIndex = v;
-            BI.nextTick(BI.bind(this.afterCardShow, this, v));
+            nextTick(bind(this.afterCardShow, this, v));
         }
-    },
+    }
 
-    getSelect: function () {
+    getSelect() {
         return this.showIndex;
-    },
+    }
 
-    getSelectedCard: function () {
+    getSelectedCard() {
-        if (BI.isKey(this.showIndex)) {
+        if (isKey(this.showIndex)) {
             return this.cardMap[this.showIndex];
         }
-    },
+    }
 
-    getAllCard: function() {
+    getAllCard() {
-        return BI.values(this.cardMap);
+        return values(this.cardMap);
-    },
+    }
 
     /**
      * @override
      */
-    setValue: function (v) {
+    setValue(v) {
-        var card = this.layout.getShowingCard();
+        const card = this.layout.getShowingCard();
         if (card) {
             card.setValue(v);
         }
-    },
+    }
 
     /**
      * @override
      */
-    getValue: function () {
+    getValue() {
-        var card = this.layout.getShowingCard();
+        const card = this.layout.getShowingCard();
         if (card) {
             return card.getValue();
         }
-    },
+    }
 
-    empty: function () {
+    empty() {
         this.layout.deleteAllCard();
         this.cardMap = {};
-    },
+    }
+
+    destroy() {
+        super.destroy(arguments);
+    }
 
-    destroy: function () {
+}
-        BI.Navigation.superclass.destroy.apply(this, arguments);
-    },
-});
-BI.Navigation.EVENT_CHANGE = "EVENT_CHANGE";
 
-BI.shortcut("bi.navigation", BI.Navigation);

src/base/combination/searcher.js

@@ -5,10 +5,23 @@
  * @class BI.Searcher
  * @extends BI.Widget
  */
-
+import { shortcut, Widget, Controller, extend, createWidget, debounce, bind, endWith, deepWithout, nextTick, isEmptyString, isNull } from "../../core";
-BI.Searcher = BI.inherit(BI.Widget, {
+import ButtonGroup from "./group.button";
-    _defaultConfig: function () {
+import { Maskers } from "../0.base";
-        return BI.extend(BI.Searcher.superclass._defaultConfig.apply(this, arguments), {
+
+@shortcut()
+export default class Searcher extends Widget {
+    static xtype = "bi.searcher";
+    
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    static EVENT_START = "EVENT_START";
+    static EVENT_STOP = "EVENT_STOP";
+    static EVENT_PAUSE = "EVENT_PAUSE";
+    static EVENT_SEARCHING = "EVENT_SEARCHING";
+    static EVENT_AFTER_INIT = "EVENT_AFTER_INIT";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(arguments), {
             baseCls: "bi-searcher",
             lgap: 0,
             rgap: 0,
@@ -20,10 +33,10 @@ BI.Searcher = BI.inherit(BI.Widget, {
             isDefaultInit: false,
             isAutoSearch: true, // 是否自动搜索
             isAutoSync: true, // 是否自动同步数据, 即是否保持搜索面板和adapter面板状态值的统一
-            chooseType: BI.ButtonGroup.CHOOSE_TYPE_SINGLE,
+            chooseType: ButtonGroup.CHOOSE_TYPE_SINGLE,
 
             // isAutoSearch为false时启用
-            onSearch: function (op, callback) {
+            onSearch: (op, callback) => {
                 callback([]);
             },
 
@@ -40,190 +53,191 @@ BI.Searcher = BI.inherit(BI.Widget, {
                 offset: {},
             },
         });
-    },
+    }
 
-    render: function () {
+    render() {
-        var self = this, o = this.options;
+        const { el, lgap, rgap, tgap, bgap, vgap, hgap, isDefaultInit } = this.options;
 
-        this.editor = BI.createWidget(o.el, {
+        this.editor = createWidget(el, {
             type: "bi.search_editor",
         });
 
-        BI.createWidget({
+        createWidget({
             type: "bi.vertical",
             element: this,
-            lgap: o.lgap,
+            lgap,
-            rgap: o.rgap,
+            rgap,
-            tgap: o.tgap,
+            tgap,
-            bgap: o.bgap,
+            bgap,
-            vgap: o.vgap,
+            vgap,
-            hgap: o.hgap,
+            hgap,
             items: [this.editor],
         });
-        o.isDefaultInit && (this._assertPopupView());
+        isDefaultInit && (this._assertPopupView());
 
-        var search = BI.debounce(BI.bind(this._search, this), BI.EVENT_RESPONSE_TIME, {
+        const search = debounce(bind(this._search, this), BI.EVENT_RESPONSE_TIME, {
             "leading": true,
             "trailing": false,
         });
-        this.editor.on(BI.Controller.EVENT_CHANGE, function (type) {
+        this.editor.on(Controller.EVENT_CHANGE, (type) => {
             switch (type) {
                 case BI.Events.STARTEDIT:
-                    self._startSearch();
+                    this._startSearch();
                     break;
                 case BI.Events.EMPTY:
-                    self._stopSearch();
+                    this._stopSearch();
                     break;
                 case BI.Events.CHANGE:
                     search();
                     break;
                 case BI.Events.PAUSE:
-                    if (BI.endWith(this.getValue(), BI.BlankSplitChar)) {
+                    if (endWith(this.getValue(), BI.BlankSplitChar)) {
-                        self._pauseSearch();
+                        this._pauseSearch();
                     }
                     break;
                 default:
                     break;
             }
         });
-    },
+    }
 
-    _assertPopupView: function () {
+    _assertPopupView() {
-        var self = this, o = this.options;
+        const { masker, popup, chooseType, isAutoSync, adapter } = this.options;
-        if ((o.masker && !BI.Maskers.has(this.getName())) || (o.masker === false && !this.popupView)) {
+        if ((masker && !Maskers.has(this.getName())) || (masker === false && !this.popupView)) {
-            this.popupView = BI.createWidget(o.popup, {
+            this.popupView = createWidget(popup, {
                 type: "bi.searcher_view",
-                chooseType: o.chooseType,
+                chooseType: chooseType,
             });
-            this.popupView.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
+            this.popupView.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => {
-                self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+                this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
                 if (type === BI.Events.CLICK) {
-                    if (o.isAutoSync) {
+                    if (isAutoSync) {
-                        var values = o.adapter && o.adapter.getValue();
+                        const values = adapter && adapter.getValue();
-                        switch (o.chooseType) {
+                        switch (chooseType) {
-                            case BI.ButtonGroup.CHOOSE_TYPE_SINGLE:
+                            case ButtonGroup.CHOOSE_TYPE_SINGLE:
-                                o.adapter && o.adapter.setValue([obj.getValue()]);
+                                adapter && adapter.setValue([obj.getValue()]);
                                 break;
-                            case BI.ButtonGroup.CHOOSE_TYPE_MULTI:
+                            case ButtonGroup.CHOOSE_TYPE_MULTI:
                                 if (!obj.isSelected()) {
-                                    o.adapter && o.adapter.setValue(BI.deepWithout(values, obj.getValue()));
+                                    adapter && adapter.setValue(deepWithout(values, obj.getValue()));
                                 }
                                 values.push(obj.getValue());
-                                o.adapter && o.adapter.setValue(values);
+                                adapter && adapter.setValue(values);
                                 break;
                             default:
                                 break;
                         }
                     }
-                    self.fireEvent(BI.Searcher.EVENT_CHANGE, value, obj);
+                    this.fireEvent(Searcher.EVENT_CHANGE, value, obj);
                 }
             });
-            BI.nextTick(function () {
+            nextTick(() => {
-                self.fireEvent(BI.Searcher.EVENT_AFTER_INIT);
+                this.fireEvent(Searcher.EVENT_AFTER_INIT);
             });
         }
-        if (o.masker && !BI.Maskers.has(this.getName())) {
+        if (masker && !Maskers.has(this.getName())) {
-            BI.Maskers.create(this.getName(), o.adapter, BI.extend({
+            Maskers.create(this.getName(), adapter, extend({
                 container: this,
                 render: this.popupView,
-            }, o.masker), this);
+            }, masker), this);
         }
-    },
+    }
 
-    _startSearch: function () {
+    _startSearch() {
         this._assertPopupView();
         this._stop = false;
         this._isSearching = true;
-        this.fireEvent(BI.Searcher.EVENT_START);
+        this.fireEvent(Searcher.EVENT_START);
         this.popupView.startSearch && this.popupView.startSearch();
         // 搜索前先清空dom
         // BI.Maskers.get(this.getName()).empty();
-        BI.nextTick(function (name) {
+        nextTick((name) => {
-            BI.Maskers.show(name);
+            Maskers.show(name);
         }, this.getName());
-    },
+    }
 
-    _pauseSearch: function () {
+    _pauseSearch() {
         this._stop = true;
-        BI.nextTick(function (name) {
+        nextTick((name) => {
-            BI.Maskers.hide(name);
+            Maskers.hide(name);
         }, this.getName());
         if (this._isSearching === true) {
             this.popupView && this.popupView.pauseSearch && this.popupView.pauseSearch();
-            this.fireEvent(BI.Searcher.EVENT_PAUSE);
+            this.fireEvent(Searcher.EVENT_PAUSE);
         }
         this._isSearching = false;
-    },
+    }
 
-    _stopSearch: function () {
+    _stopSearch() {
-        var name = this.getName();
+        const name = this.getName();
         this._stop = true;
-        BI.Maskers.hide(name);
+        Maskers.hide(name);
         if (this._isSearching === true) {
             this.popupView && this.popupView.stopSearch && this.popupView.stopSearch();
-            this.fireEvent(BI.Searcher.EVENT_STOP);
+            this.fireEvent(Searcher.EVENT_STOP);
         }
         this._isSearching = false;
-    },
+    }
 
-    _search: function () {
+    _search() {
-        var self = this, o = this.options, keyword = this.editor.getValue();
+        const { isAutoSearch, adapter, isAutoSync, onSearch } = this.options;
+        const keyword = this.editor.getValue();
         if (keyword === "" || this._stop) {
             return;
         }
-        if (o.isAutoSearch) {
+        if (isAutoSearch) {
-            var items = (o.adapter && ((o.adapter.getItems && o.adapter.getItems()) || o.adapter.attr("items"))) || [];
+            const items = (adapter && ((adapter.getItems && adapter.getItems()) || adapter.attr("items"))) || [];
-            var finding = BI.Func.getSearchResult(items, keyword);
+            const finding = BI.Func.getSearchResult(items, keyword);
-            var match = finding.match, find = finding.find;
+            const match = finding.match, find = finding.find;
             this.popupView.populate(find, match, keyword);
-            o.isAutoSync && o.adapter && o.adapter.getValue && this.popupView.setValue(o.adapter.getValue());
+            isAutoSync && adapter && adapter.getValue && this.popupView.setValue(adapter.getValue());
-            self.fireEvent(BI.Searcher.EVENT_SEARCHING);
+            this.fireEvent(Searcher.EVENT_SEARCHING);
 
             return;
         }
         this.popupView.loading && this.popupView.loading();
-        o.onSearch({
+        onSearch({
             times: 1,
             keyword: keyword,
-            selectedValues: o.adapter && o.adapter.getValue(),
+            selectedValues: adapter && adapter.getValue(),
-        }, function (searchResult, matchResult) {
+        }, (searchResult, matchResult, ...arg) => {
-            if (!self._stop && keyword === self.editor.getValue()) {
+            if (!this._stop && keyword === this.editor.getValue()) {
-                var args = [].slice.call(arguments);
+                const args = [searchResult, matchResult, ...arg];
                 if (args.length > 0) {
                     args.push(keyword);
                 }
-                BI.Maskers.show(self.getName());
+                Maskers.show(this.getName());
-                self.popupView.populate.apply(self.popupView, args);
+                this.popupView.populate.apply(this.popupView, args);
-                o.isAutoSync && o.adapter && o.adapter.getValue && self.popupView.setValue(o.adapter.getValue());
+                isAutoSync && adapter && adapter.getValue && this.popupView.setValue(adapter.getValue());
-                self.popupView.loaded && self.popupView.loaded();
+                this.popupView.loaded && this.popupView.loaded();
-                self.fireEvent(BI.Searcher.EVENT_SEARCHING);
+                this.fireEvent(Searcher.EVENT_SEARCHING);
             }
         });
-    },
+    }
 
-    _getLastSearchKeyword: function () {
+    _getLastSearchKeyword() {
         if (this.isValid()) {
-            var res = this.editor.getValue().split(/\u200b\s\u200b/);
+            const res = this.editor.getValue().split(/\u200b\s\u200b/);
-            if (BI.isEmptyString(res[res.length - 1])) {
+            if (isEmptyString(res[res.length - 1])) {
                 res = res.slice(0, res.length - 1);
             }
 
-            return BI.isNull(res) ? "" : res[res.length - 1];
+            return isNull(res) ? "" : res[res.length - 1];
         }
-    },
+    }
 
-    setAdapter: function (adapter) {
+    setAdapter(adapter) {
         this.options.adapter = adapter;
-        BI.Maskers.remove(this.getName());
+        Maskers.remove(this.getName());
-    },
+    }
 
-    doSearch: function () {
+    doSearch() {
         if (this.isSearching()) {
             this._search();
         }
-    },
+    }
 
-    stopSearch: function () {
+    stopSearch() {
         this._stopSearch();// 先停止搜索，然后再去设置editor为空
         // important:停止搜索必须退出编辑状态,这里必须加上try(input框不显示时blur会抛异常)
         try {
@@ -235,103 +249,95 @@ BI.Searcher = BI.inherit(BI.Widget, {
         } finally {
             this.editor.setValue("");
         }
-    },
+    }
 
-    isSearching: function () {
+    isSearching() {
         return this._isSearching;
-    },
+    }
 
-    isViewVisible: function () {
+    isViewVisible() {
-        return this.editor.isEnabled() && BI.Maskers.isVisible(this.getName());
+        return this.editor.isEnabled() && Maskers.isVisible(this.getName());
-    },
+    }
 
-    getView: function () {
+    getView() {
         return this.popupView;
-    },
+    }
 
-    hasMatched: function () {
+    hasMatched() {
         this._assertPopupView();
 
         return this.popupView.hasMatched();
-    },
+    }
 
-    adjustHeight: function () {
+    adjustHeight() {
-        if (BI.Maskers.has(this.getName()) && BI.Maskers.get(this.getName()).isVisible()) {
+        if (Maskers.has(this.getName()) && Maskers.get(this.getName()).isVisible()) {
-            BI.Maskers.show(this.getName());
+            Maskers.show(this.getName());
         }
-    },
+    }
 
-    adjustView: function () {
+    adjustView() {
-        this.isViewVisible() && BI.Maskers.show(this.getName());
+        this.isViewVisible() && Maskers.show(this.getName());
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
-        if (BI.isNull(this.popupView)) {
+        if (isNull(this.popupView)) {
             this.options.popup.value = v;
         } else {
             this.popupView.setValue(v);
         }
-    },
+    }
 
-    getKeyword: function () {
+    getKeyword() {
         return this._getLastSearchKeyword();
-    },
+    }
 
-    getKeywords: function () {
+    getKeywords() {
         return this.editor.getKeywords();
-    },
+    }
 
-    getValue: function () {
+    getValue() {
-        var o = this.options;
+        const { isAutoSync, adapter, popup } = this.options;
-        if (o.isAutoSync && o.adapter && o.adapter.getValue) {
+        if (isAutoSync && adapter && adapter.getValue) {
-            return o.adapter.getValue();
+            return adapter.getValue();
         }
         if (this.isSearching()) {
             return this.popupView.getValue();
-        } else if (o.adapter && o.adapter.getValue) {
+        } else if (adapter && adapter.getValue) {
-            return o.adapter.getValue();
+            return adapter.getValue();
         }
-        if (BI.isNull(this.popupView)) {
+        if (isNull(this.popupView)) {
-            return o.popup.value;
+            return popup.value;
         }
 
         return this.popupView.getValue();
-    },
+    }
 
-    populate: function (result, searchResult, keyword) {
+    populate(result, searchResult, keyword) {
-        var o = this.options;
+        const { isAutoSync, adapter } = this.options;
         this._assertPopupView();
         this.popupView.populate.apply(this.popupView, arguments);
-        if (o.isAutoSync && o.adapter && o.adapter.getValue) {
+        if (isAutoSync && adapter && adapter.getValue) {
-            this.popupView.setValue(o.adapter.getValue());
+            this.popupView.setValue(adapter.getValue());
         }
-    },
+    }
 
-    empty: function () {
+    empty() {
         this.popupView && this.popupView.empty();
-    },
+    }
 
-    destroyed: function () {
+    destroyed() {
-        BI.Maskers.remove(this.getName());
+        Maskers.remove(this.getName());
-    },
+    }
 
-    focus: function () {
+    focus() {
         this.editor.focus();
-    },
+    }
 
-    blur: function () {
+    blur() {
         this.editor.blur();
-    },
+    }
 
-    setWaterMark: function (v) {
+    setWaterMark(v) {
         this.editor.setWaterMark(v);
-    },
+    }
-});
+}
-BI.Searcher.EVENT_CHANGE = "EVENT_CHANGE";
-BI.Searcher.EVENT_START = "EVENT_START";
-BI.Searcher.EVENT_STOP = "EVENT_STOP";
-BI.Searcher.EVENT_PAUSE = "EVENT_PAUSE";
-BI.Searcher.EVENT_SEARCHING = "EVENT_SEARCHING";
-BI.Searcher.EVENT_AFTER_INIT = "EVENT_AFTER_INIT";
-
-BI.shortcut("bi.searcher", BI.Searcher);

src/base/combination/switcher.js

@@ -6,9 +6,26 @@
  * @class BI.Switcher
  * @extends BI.Widget
  */
-BI.Switcher = BI.inherit(BI.Widget, {
+import { shortcut, Widget, Controller, extend, nextTick, createWidget, each, debounce, isNull } from "../../core";
-    _defaultConfig: function () {
+import { Maskers } from "../0.base";
-        return BI.extend(BI.Switcher.superclass._defaultConfig.apply(this, arguments), {
+
+@shortcut()
+export default class Switcher extends Widget {
+    static xtype = "bi.switcher";
+    
+    static EVENT_EXPAND = "EVENT_EXPAND";
+    static EVENT_COLLAPSE = "EVENT_COLLAPSE";
+    static EVENT_TRIGGER_CHANGE = "EVENT_TRIGGER_CHANGE";
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    static EVENT_AFTER_INIT = "EVENT_AFTER_INIT";
+
+    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
+    static EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW";
+    static EVENT_BEFORE_HIDEVIEW = "EVENT_BEFORE_HIDEVIEW";
+    static EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(arguments), {
             baseCls: "bi-switcher",
             direction: BI.Direction.Top,
             trigger: "click",
@@ -20,47 +37,47 @@ BI.Switcher = BI.inherit(BI.Widget, {
             switcherClass: "bi-switcher-popup",
             hoverClass: "bi-switcher-hover",
         });
-    },
+    }
 
-    render: function () {
+    render() {
-        var self = this, o = this.options;
+        const { hoverClass, isDefaultInit } = this.options;
         this._initSwitcher();
         // 延迟绑定事件，这样可以将自己绑定的事情优先执行
-        BI.nextTick(() => {
+        nextTick(() => {
             !this.isDestroyed() && this._initPullDownAction();
         });
-        this.switcher.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
+        this.switcher.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => {
-            if (self.isEnabled() && self.isValid()) {
+            if (this.isEnabled() && this.isValid()) {
                 if (type === BI.Events.EXPAND) {
-                    self._popupView();
+                    this._popupView();
                 }
                 if (type === BI.Events.COLLAPSE) {
-                    self._hideView();
+                    this._hideView();
                 }
                 if (type === BI.Events.EXPAND) {
-                    self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+                    this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
-                    self.fireEvent(BI.Switcher.EVENT_EXPAND);
+                    this.fireEvent(Switcher.EVENT_EXPAND);
                 }
                 if (type === BI.Events.COLLAPSE) {
-                    self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+                    this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
-                    self.isViewVisible() && self.fireEvent(BI.Switcher.EVENT_COLLAPSE);
+                    this.isViewVisible() && this.fireEvent(Switcher.EVENT_COLLAPSE);
                 }
                 if (type === BI.Events.CLICK) {
-                    self.fireEvent(BI.Switcher.EVENT_TRIGGER_CHANGE, value, obj);
+                    this.fireEvent(Switcher.EVENT_TRIGGER_CHANGE, value, obj);
                 }
             }
         });
 
-        this.element.hover(function () {
+        this.element.hover(() => {
-            if (self.isEnabled() && self.switcher.isEnabled()) {
+            if (this.isEnabled() && this.switcher.isEnabled()) {
-                self.element.addClass(o.hoverClass);
+                this.element.addClass(hoverClass);
             }
-        }, function () {
+        }, () => {
-            if (self.isEnabled() && self.switcher.isEnabled()) {
+            if (this.isEnabled() && this.switcher.isEnabled()) {
-                self.element.removeClass(o.hoverClass);
+                this.element.removeClass(hoverClass);
             }
         });
-        BI.createWidget({
+        createWidget({
             type: "bi.vertical",
             scrolly: false,
             element: this,
@@ -68,10 +85,10 @@ BI.Switcher = BI.inherit(BI.Widget, {
                 { el: this.switcher }
             ],
         });
-        o.isDefaultInit && (this._assertPopupView());
+        isDefaultInit && (this._assertPopupView());
-    },
+    }
 
-    _toggle: function () {
+    _toggle() {
         this._assertPopupView();
         if (this.isExpanded()) {
             this._hideView();
@@ -80,40 +97,40 @@ BI.Switcher = BI.inherit(BI.Widget, {
                 this._popupView();
             }
         }
-    },
+    }
 
-    _initPullDownAction: function () {
+    _initPullDownAction() {
-        var self = this, o = this.options;
+        const { toggle } = this.options;
-        var evs = this.options.trigger.split(",");
+        const evs = this.options.trigger.split(",");
-        BI.each(evs, function (i, e) {
+        each(evs, (i, e) => {
             switch (e) {
                 case "hover":
-                    self.element[e](function (e) {
+                    this.element[e]((e) => {
-                        if (self.isEnabled() && self.switcher.isEnabled()) {
+                        if (this.isEnabled() && this.switcher.isEnabled()) {
-                            self._popupView();
+                            this._popupView();
-                            self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EXPAND, "", self.switcher);
+                            this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EXPAND, "", this.switcher);
-                            self.fireEvent(BI.Switcher.EVENT_EXPAND);
+                            this.fireEvent(Switcher.EVENT_EXPAND);
                         }
-                    }, function () {
+                    }, () => {
-                        if (self.isEnabled() && self.switcher.isEnabled() && o.toggle) {
+                        if (this.isEnabled() && this.switcher.isEnabled() && toggle) {
-                            self._hideView();
+                            this._hideView();
-                            self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", self.switcher);
+                            this.fireEvent(Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", this.switcher);
-                            self.fireEvent(BI.Switcher.EVENT_COLLAPSE);
+                            this.fireEvent(Switcher.EVENT_COLLAPSE);
                         }
                     });
                     break;
                 default :
                     if (e) {
-                        self.element.off(e + "." + self.getName()).on(e + "." + self.getName(), BI.debounce(function (e) {
+                        this.element.off(e + "." + this.getName()).on(e + "." + this.getName(), debounce((e) => {
-                            if (self.switcher.element.__isMouseInBounds__(e)) {
+                            if (this.switcher.element.__isMouseInBounds__(e)) {
-                                if (self.isEnabled() && self.switcher.isEnabled()) {
+                                if (this.isEnabled() && this.switcher.isEnabled()) {
-                                    o.toggle ? self._toggle() : self._popupView();
+                                    toggle ? this._toggle() : this._popupView();
-                                    if (self.isExpanded()) {
+                                    if (this.isExpanded()) {
-                                        self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EXPAND, "", self.switcher);
+                                        this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EXPAND, "", this.switcher);
-                                        self.fireEvent(BI.Switcher.EVENT_EXPAND);
+                                        this.fireEvent(Switcher.EVENT_EXPAND);
                                     } else {
-                                        self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", self.switcher);
+                                        this.fireEvent(Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", this.switcher);
-                                        self.fireEvent(BI.Switcher.EVENT_COLLAPSE);
+                                        this.fireEvent(Switcher.EVENT_COLLAPSE);
                                     }
                                 }
                             }
@@ -125,36 +142,36 @@ BI.Switcher = BI.inherit(BI.Widget, {
                     break;
             }
         });
-    },
+    }
 
-    _initSwitcher: function () {
+    _initSwitcher() {
-        this.switcher = BI.createWidget(this.options.el, {
+        this.switcher = createWidget(this.options.el, {
             value: this.options.value,
         });
-    },
+    }
 
-    _assertPopupView: function () {
+    _assertPopupView() {
-        var self = this, o = this.options;
+        const { popup, adapter, masker, value, direction } = this.options;
         if (!this._created) {
-            this.popupView = BI.createWidget(o.popup, {
+            this.popupView = createWidget(popup, {
                 type: "bi.button_group",
-                element: o.adapter && BI.Maskers.create(this.getName(), o.adapter, BI.extend({ container: this }, o.masker)),
+                element: adapter && Maskers.create(this.getName(), adapter, extend({ container: this }, masker)),
                 cls: "switcher-popup",
                 layouts: [{
                     type: "bi.vertical",
                     hgap: 0,
                     vgap: 0,
                 }],
-                value: o.value,
+                value,
             }, this);
-            this.popupView.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
+            this.popupView.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) =>  {
-                self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+                this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
                 if (type === BI.Events.CLICK) {
-                    self.fireEvent(BI.Switcher.EVENT_CHANGE, value, obj);
+                    this.fireEvent(Switcher.EVENT_CHANGE, value, obj);
                 }
             });
-            if (o.direction !== BI.Direction.Custom && !o.adapter) {
+            if (direction !== BI.Direction.Custom && !adapter) {
-                BI.createWidget({
+                createWidget({
                     type: "bi.vertical",
                     scrolly: false,
                     element: this,
@@ -164,133 +181,120 @@ BI.Switcher = BI.inherit(BI.Widget, {
                 });
             }
             this._created = true;
-            BI.nextTick(function () {
+            nextTick(() => {
-                self.fireEvent(BI.Switcher.EVENT_AFTER_INIT);
+                this.fireEvent(Switcher.EVENT_AFTER_INIT);
             });
         }
-    },
+    }
 
-    _hideView: function () {
+    _hideView() {
-        this.fireEvent(BI.Switcher.EVENT_BEFORE_HIDEVIEW);
+        this.fireEvent(Switcher.EVENT_BEFORE_HIDEVIEW);
-        var self = this, o = this.options;
+        const { adapter, switcherClass } = this.options;
-        o.adapter ? BI.Maskers.hide(self.getName()) : (self.popupView && self.popupView.setVisible(false));
+        adapter ? Maskers.hide(this.getName()) : (this.popupView && this.popupView.setVisible(false));
-        BI.nextTick(function () {
+        nextTick(() => {
-            o.adapter ? BI.Maskers.hide(self.getName()) : (self.popupView && self.popupView.setVisible(false));
+            adapter ? Maskers.hide(this.getName()) : (this.popupView && this.popupView.setVisible(false));
-            self.element.removeClass(o.switcherClass);
+            this.element.removeClass(switcherClass);
-            self.fireEvent(BI.Switcher.EVENT_AFTER_HIDEVIEW);
+            this.fireEvent(Switcher.EVENT_AFTER_HIDEVIEW);
         });
-    },
+    }
 
-    _popupView: function () {
+    _popupView() {
-        var self = this, o = this.options;
+        const { adapter, switcherClass } = this.options;
         this._assertPopupView();
-        this.fireEvent(BI.Switcher.EVENT_BEFORE_POPUPVIEW);
+        this.fireEvent(Switcher.EVENT_BEFORE_POPUPVIEW);
-        o.adapter ? BI.Maskers.show(this.getName()) : self.popupView.setVisible(true);
+        adapter ? Maskers.show(this.getName()) : this.popupView.setVisible(true);
-        BI.nextTick(function (name) {
+        nextTick((name) => {
-            o.adapter ? BI.Maskers.show(name) : self.popupView.setVisible(true);
+            adapter ? Maskers.show(name) : this.popupView.setVisible(true);
-            self.element.addClass(o.switcherClass);
+            this.element.addClass(switcherClass);
-            self.fireEvent(BI.Switcher.EVENT_AFTER_POPUPVIEW);
+            this.fireEvent(Switcher.EVENT_AFTER_POPUPVIEW);
         }, this.getName());
-    },
+    }
 
-    _populate: function () {
+    _populate() {
         this._assertPopupView();
         this.popupView.populate.apply(this.popupView, arguments);
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this._populate.apply(this, arguments);
         this.switcher.populate && this.switcher.populate.apply(this.switcher, arguments);
-    },
+    }
 
-    _setEnable: function (arg) {
+    _setEnable(arg) {
-        BI.Switcher.superclass._setEnable.apply(this, arguments);
+        super._setEnable(arguments);
         !arg && this.isViewVisible() && this._hideView();
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.switcher.setValue(v);
-        if (BI.isNull(this.popupView)) {
+        if (isNull(this.popupView)) {
             this.options.popup.value = v;
         } else {
             this.popupView.setValue(v);
         }
-    },
+    }
 
-    getValue: function () {
+    getValue() {
-        if (BI.isNull(this.popupView)) {
+        if (isNull(this.popupView)) {
             return this.options.popup.value;
         } else {
             return this.popupView.getValue();
         }
-    },
+    }
 
-    setAdapter: function (adapter) {
+    setAdapter(adapter) {
         this.options.adapter = adapter;
-        BI.Maskers.remove(this.getName());
+        Maskers.remove(this.getName());
-    },
+    }
 
-    isViewVisible: function () {
+    isViewVisible() {
         return this.isEnabled() && this.switcher.isEnabled() &&
-            (this.options.adapter ? BI.Maskers.isVisible(this.getName()) : (this.popupView && this.popupView.isVisible()));
+            (this.options.adapter ? Maskers.isVisible(this.getName()) : (this.popupView && this.popupView.isVisible()));
-    },
+    }
 
-    isExpanded: function () {
+    isExpanded() {
         return this.isViewVisible();
-    },
+    }
 
-    showView: function () {
+    showView() {
         if (this.isEnabled() && this.switcher.isEnabled()) {
             this._popupView();
         }
-    },
+    }
 
-    hideView: function () {
+    hideView() {
         this._hideView();
-    },
+    }
 
-    getView: function () {
+    getView() {
         return this.popupView;
-    },
+    }
 
-    adjustView: function () {
+    adjustView() {
-        this.isViewVisible() && BI.Maskers.show(this.getName());
+        this.isViewVisible() && Maskers.show(this.getName());
-    },
+    }
 
-    getAllLeaves: function () {
+    getAllLeaves() {
         return this.popupView && this.popupView.getAllLeaves();
-    },
+    }
 
-    getNodeById: function (id) {
+    getNodeById(id) {
         if (this.switcher.attr("id") === id) {
             return this.switcher;
         }
 
         return this.popupView && this.popupView.getNodeById(id);
-    },
+    }
 
-    getNodeByValue: function (value) {
+    getNodeByValue(value) {
         if (this.switcher.getValue() === value) {
             return this.switcher;
         }
         
         return this.popupView && this.popupView.getNodeByValue(value);
-    },
+    }
 
-    empty: function () {
+    empty() {
         this.popupView && this.popupView.empty();
-    },
+    }
-});
+}
-BI.Switcher.EVENT_EXPAND = "EVENT_EXPAND";
-BI.Switcher.EVENT_COLLAPSE = "EVENT_COLLAPSE";
-BI.Switcher.EVENT_TRIGGER_CHANGE = "EVENT_TRIGGER_CHANGE";
-BI.Switcher.EVENT_CHANGE = "EVENT_CHANGE";
-BI.Switcher.EVENT_AFTER_INIT = "EVENT_AFTER_INIT";
-
-
-BI.Switcher.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
-BI.Switcher.EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW";
-BI.Switcher.EVENT_BEFORE_HIDEVIEW = "EVENT_BEFORE_HIDEVIEW";
-BI.Switcher.EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW";
-
-BI.shortcut("bi.switcher", BI.Switcher);

src/base/combination/tab.js

@@ -1,10 +1,16 @@
 /**
  * Created by GUY on 2015/6/26.
  */
+import { shortcut, Widget, Controller, ShowListener, extend, createWidget, isObject, each, isFunction, contains, any, isEqual } from "../../core";
 
-BI.Tab = BI.inherit(BI.Widget, {
+@shortcut()
-    _defaultConfig: function () {
+export default class Tab extends Widget {
-        return BI.extend(BI.Tab.superclass._defaultConfig.apply(this, arguments), {
+    static xtype = "bi.tab";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(arguments), {
             baseCls: "bi-tab",
             direction: "top", // top, bottom, left, right, custom
             single: false, // 是不是单页面
@@ -13,87 +19,87 @@ BI.Tab = BI.inherit(BI.Widget, {
             },
             showIndex: false,
             tab: false,
-            cardCreator: function (v) {
+            cardCreator: (v) => {
-                return BI.createWidget();
+                return createWidget();
             },
             keepAlives: [],
         });
-    },
+    }
-
+
-    render: function () {
+    render() {
-        var self = this, o = this.options;
+        const { tab, direction, logic, cardCreator } = this.options;
-        if (BI.isObject(o.tab)) {
+        if (isObject(tab)) {
-            this.tab = BI.createWidget(this.options.tab, { type: "bi.button_group" });
+            this.tab = createWidget(this.options.tab, { type: "bi.button_group" });
-            this.tab.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
+            this.tab.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => {
-                self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+                this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
             });
         }
         this.cardMap = {};
-        this.layout = BI.createWidget({
+        this.layout = createWidget({
             type: "bi.card",
         });
 
-        BI.createWidget(BI.extend({
+        createWidget(extend({
             element: this,
-        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({}, o.logic, {
+        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(direction), extend({}, logic, {
-            items: BI.LogicFactory.createLogicItemsByDirection(o.direction, this.tab, this.layout),
+            items: BI.LogicFactory.createLogicItemsByDirection(direction, this.tab, this.layout),
         }))));
 
-        var listener = new BI.ShowListener({
+        const listener = new ShowListener({
             eventObj: this.tab,
             cardLayout: this.layout,
-            cardCreator: function (v) {
+            cardCreator: (v) => {
-                BI.Widget.execWithContext(self, function () {
+                Widget.execWithContext(this, () => {
-                    self.cardMap[v] = o.cardCreator(v);
+                    this.cardMap[v] = cardCreator(v);
                 });
 
-                return self.cardMap[v];
+                return this.cardMap[v];
             },
-            afterCardShow: function (v) {
+            afterCardShow: (v) => {
-                self._deleteOtherCards(v);
+                this._deleteOtherCards(v);
-                self.curr = v;
+                this.curr = v;
             },
         });
-        listener.on(BI.ShowListener.EVENT_CHANGE, function (value) {
+        listener.on(ShowListener.EVENT_CHANGE, (value) => {
-            self.fireEvent(BI.Tab.EVENT_CHANGE, value, self);
+            this.fireEvent(Tab.EVENT_CHANGE, value, this);
         });
-    },
+    }
-
+
-    _deleteOtherCards: function (currCardName) {
+    _deleteOtherCards(currCardName) {
-        var self = this, o = this.options;
+        const { single } = this.options;
-        if (o.single === true) {
+        if (single === true) {
-            BI.each(this.cardMap, function (name, card) {
+            each(this.cardMap, (name, card) => {
-                if (name !== (currCardName + "") && self._keepAlive(name) !== true) {
+                if (name !== (currCardName + "") && this._keepAlive(name) !== true) {
-                    self.layout.deleteCardByName(name);
+                    this.layout.deleteCardByName(name);
-                    delete self.cardMap[name];
+                    delete this.cardMap[name];
                 }
             });
         }
-    },
+    }
 
-    _assertCard: function (v) {
+    _assertCard(v) {
-        var self = this, o = this.options;
+        const { cardCreator } = this.options;
         if (!this.layout.isCardExisted(v)) {
-            BI.Widget.execWithContext(this, function () {
+            Widget.execWithContext(this, () => {
-                self.cardMap[v] = o.cardCreator(v);
+                this.cardMap[v] = cardCreator(v);
             });
             this.layout.addCardByName(v, this.cardMap[v]);
         }
-    },
+    }
 
-    _keepAlive: function (v) {
+    _keepAlive(v) {
-        var o = this.options;
+        const { keepAlives } = this.options;
 
-        return BI.isFunction(o.keepAlives) ? o.keepAlives(v) : BI.contains(o.keepAlives, v);
+        return isFunction(keepAlives) ? keepAlives(v) : contains(keepAlives, v);
-    },
+    }
 
-    created: function () {
+    created() {
-        var self = this, o = this.options;
+        const o = this.options;
+        let showIndex;
 
-        var showIndex;
+        if (isFunction(o.showIndex)) {
-        if (BI.isFunction(o.showIndex)) {
+            showIndex = this.__watch(o.showIndex, (context, newValue) => {
-            showIndex = this.__watch(o.showIndex, function (context, newValue) {
+                this.setSelect(newValue);
-                self.setSelect(newValue);
             });
         } else {
             showIndex = o.showIndex;
@@ -102,9 +108,9 @@ BI.Tab = BI.inherit(BI.Widget, {
         if (showIndex !== false) {
             this.setSelect(showIndex);
         }
-    },
+    }
 
-    setSelect: function (v, action, callback) {
+    setSelect(v, action, callback) {
         this.tab && this.tab.setValue(v);
         this._assertCard(v);
         this.layout.showCardByName(v, action, callback);
@@ -112,69 +118,66 @@ BI.Tab = BI.inherit(BI.Widget, {
         if (this.curr !== v) {
             this.curr = v;
         }
-    },
+    }
 
-    removeTab: function (cardname) {
+    removeTab(cardname) {
-        var self = this;
+        any(this.cardMap, (name, card) => {
-        BI.any(this.cardMap, function (name, card) {
+            if (isEqual(name, (cardname + ""))) {
-            if (BI.isEqual(name, (cardname + ""))) {
+                this.layout.deleteCardByName(name);
-                self.layout.deleteCardByName(name);
+                delete this.cardMap[name];
-                delete self.cardMap[name];
 
                 return true;
             }
         });
-    },
+    }
 
-    isCardExisted: function (cardName) {
+    isCardExisted(cardName) {
         return this.layout.isCardExisted(cardName);
-    },
+    }
 
-    getSelect: function () {
+    getSelect() {
         return this.curr;
-    },
+    }
 
-    getSelectedTab: function () {
+    getSelectedTab() {
         return this.layout.getShowingCard();
-    },
+    }
 
-    getTab: function (v) {
+    getTab(v) {
         this._assertCard(v);
 
         return this.layout.getCardByName(v);
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
-        var card = this.layout.getShowingCard();
+        const card = this.layout.getShowingCard();
         if (card) {
             card.setValue(v);
         }
-    },
+    }
 
-    getValue: function () {
+    getValue() {
-        var card = this.layout.getShowingCard();
+        const card = this.layout.getShowingCard();
         if (card) {
             return card.getValue();
         }
-    },
+    }
 
-    populate: function () {
+    populate() {
-        var card = this.layout.getShowingCard();
+        const card = this.layout.getShowingCard();
         if (card) {
             return card.populate && card.populate.apply(card, arguments);
         }
-    },
+    }
 
-    empty: function () {
+    empty() {
         this.layout.deleteAllCard();
         this.cardMap = {};
-    },
+    }
 
-    destroy: function () {
+    destroy() {
         this.cardMap = {};
-        BI.Tab.superclass.destroy.apply(this, arguments);
+        super.destroy(arguments);
-    },
+    }
-});
-BI.Tab.EVENT_CHANGE = "EVENT_CHANGE";
 
-BI.shortcut("bi.tab", BI.Tab);
+}

src/base/combination/tree.button.js

@@ -3,67 +3,74 @@
  * @class BI.ButtonTree
  * @extends BI.ButtonGroup
  */
+import { shortcut, Widget, extend, isArray, each, isFunction, deepContains, concat, any, contains } from "../../core";
+import ButtonGroup from "./group.button";
 
-BI.ButtonTree = BI.inherit(BI.ButtonGroup, {
+@shortcut()
-    _defaultConfig: function () {
+export default class ButtonTree extends ButtonGroup {
-        return BI.extend(BI.ButtonTree.superclass._defaultConfig.apply(this, arguments), {
+    static xtype = "bi.button_tree";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(arguments), {
             baseCls: "bi-button-tree",
         });
-    },
+    }
 
-    setNotSelectedValue: function (v) {
+    setNotSelectedValue(v) {
-        v = BI.isArray(v) ? v : [v];
+        v = isArray(v) ? v : [v];
-        BI.each(this.buttons, function (i, item) {
+        each(this.buttons, (i, item) => {
-            if (!BI.isFunction(item.setSelected)) {
+            if (!isFunction(item.setSelected)) {
                 item.setNotSelectedValue(v);
 
                 return;
             }
-            if (BI.deepContains(v, item.getValue())) {
+            if (deepContains(v, item.getValue())) {
                 item.setSelected(false);
             } else {
                 item.setSelected(true);
             }
         });
-    },
+    }
 
-    setEnabledValue: function (v) {
+    setEnabledValue(v) {
-        v = BI.isArray(v) ? v : [v];
+        v = isArray(v) ? v : [v];
-        BI.each(this.buttons, function (i, item) {
+        each(this.buttons, (i, item) => {
-            if (BI.isFunction(item.setEnabledValue)) {
+            if (isFunction(item.setEnabledValue)) {
                 item.setEnabledValue(v);
 
                 return;
             }
-            if (BI.deepContains(v, item.getValue())) {
+            if (deepContains(v, item.getValue())) {
                 item.setEnable(true);
             } else {
                 item.setEnable(false);
             }
         });
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
-        v = BI.isArray(v) ? v : [v];
+        v = isArray(v) ? v : [v];
-        BI.each(this.buttons, function (i, item) {
+        each(this.buttons, (i, item) => {
-            if (!BI.isFunction(item.setSelected)) {
+            if (!isFunction(item.setSelected)) {
                 item.setValue(v);
 
                 return;
             }
-            if (BI.deepContains(v, item.getValue())) {
+            if (deepContains(v, item.getValue())) {
                 item.setSelected(true);
             } else {
                 item.setSelected(false);
             }
         });
-    },
+    }
 
-    getNotSelectedValue: function () {
+    getNotSelectedValue() {
-        var v = [];
+        let v = [];
-        BI.each(this.buttons, function (i, item) {
+        each(this.buttons, (i, item) => {
-            if (item.isEnabled() && !BI.isFunction(item.setSelected)) {
+            if (item.isEnabled() && !isFunction(item.setSelected)) {
-                v = BI.concat(v, item.getNotSelectedValue());
+                v = concat(v, item.getNotSelectedValue());
 
                 return;
             }
@@ -73,13 +80,13 @@ BI.ButtonTree = BI.inherit(BI.ButtonGroup, {
         });
 
         return v;
-    },
+    }
 
-    getValue: function () {
+    getValue() {
-        var v = [];
+        let v = [];
-        BI.each(this.buttons, function (i, item) {
+        each(this.buttons, (i, item) => {
-            if (item.isEnabled() && !BI.isFunction(item.setSelected)) {
+            if (item.isEnabled() && !isFunction(item.setSelected)) {
-                v = BI.concat(v, item.getValue());
+                v = concat(v, item.getValue());
 
                 return;
             }
@@ -89,12 +96,12 @@ BI.ButtonTree = BI.inherit(BI.ButtonGroup, {
         });
 
         return v;
-    },
+    }
 
-    getSelectedButtons: function () {
+    getSelectedButtons() {
-        var btns = [];
+        let btns = [];
-        BI.each(this.buttons, function (i, item) {
+        each(this.buttons, (i, item) => {
-            if (item.isEnabled() && !BI.isFunction(item.setSelected)) {
+            if (item.isEnabled() && !isFunction(item.setSelected)) {
                 btns = btns.concat(item.getSelectedButtons());
 
                 return;
@@ -105,12 +112,12 @@ BI.ButtonTree = BI.inherit(BI.ButtonGroup, {
         });
 
         return btns;
-    },
+    }
 
-    getNotSelectedButtons: function () {
+    getNotSelectedButtons() {
-        var btns = [];
+        let btns = [];
-        BI.each(this.buttons, function (i, item) {
+        each(this.buttons, (i, item) => {
-            if (item.isEnabled() && !BI.isFunction(item.setSelected)) {
+            if (item.isEnabled() && !isFunction(item.setSelected)) {
                 btns = btns.concat(item.getNotSelectedButtons());
                 
                 return;
@@ -121,13 +128,13 @@ BI.ButtonTree = BI.inherit(BI.ButtonGroup, {
         });
 
         return btns;
-    },
+    }
 
     // 获取所有的叶子节点
-    getAllLeaves: function () {
+    getAllLeaves() {
-        var leaves = [];
+        let leaves = [];
-        BI.each(this.buttons, function (i, item) {
+        each(this.buttons, (i, item) => {
-            if (item.isEnabled() && !BI.isFunction(item.setSelected)) {
+            if (item.isEnabled() && !isFunction(item.setSelected)) {
                 leaves = leaves.concat(item.getAllLeaves());
 
                 return;
@@ -138,13 +145,13 @@ BI.ButtonTree = BI.inherit(BI.ButtonGroup, {
         });
 
         return leaves;
-    },
+    }
 
-    getIndexByValue: function (value) {
+    getIndexByValue(value) {
-        var index = -1;
+        let index = -1;
-        BI.any(this.buttons, function (i, item) {
+        any(this.buttons, (i, item) => {
-            var vs = item.getValue();
+            const vs = item.getValue();
-            if (item.isEnabled() && (vs === value || BI.contains(vs, value))) {
+            if (item.isEnabled() && (vs === value || contains(vs, value))) {
                 index = i;
 
                 return true;
@@ -152,17 +159,17 @@ BI.ButtonTree = BI.inherit(BI.ButtonGroup, {
         });
 
         return index;
-    },
+    }
 
-    getNodeById: function (id) {
+    getNodeById(id) {
-        var node;
+        let node;
-        BI.any(this.buttons, function (i, item) {
+        any(this.buttons, (i, item) => {
             if (item.isEnabled()) {
                 if (item.attr("id") === id) {
                     node = item;
                     
                     return true;
-                } else if (BI.isFunction(item.getNodeById)) {
+                } else if (isFunction(item.getNodeById)) {
                     node = item.getNodeById(id);
                     if (node) {
                         return true;
@@ -172,13 +179,13 @@ BI.ButtonTree = BI.inherit(BI.ButtonGroup, {
         });
 
         return node;
-    },
+    }
 
-    getNodeByValue: function (value) {
+    getNodeByValue(value) {
-        var node;
+        let node;
-        BI.any(this.buttons, function (i, item) {
+        any(this.buttons, (i, item) => {
             if (item.isEnabled()) {
-                if (BI.isFunction(item.getNodeByValue)) {
+                if (isFunction(item.getNodeByValue)) {
                     node = item.getNodeByValue(value);
                     if (node) {
                         return true;
@@ -192,8 +199,5 @@ BI.ButtonTree = BI.inherit(BI.ButtonGroup, {
         });
 
         return node;
-    },
+    }
-});
+}
-BI.ButtonTree.EVENT_CHANGE = "EVENT_CHANGE";
-
-BI.shortcut("bi.button_tree", BI.ButtonTree);

src/base/index.js

@@ -1,3 +1,4 @@
+import { extend } from "../core";
 import Pane from "./1.pane";
 import Single from "./single/0.single";
 import Text from "./single/1.text";
@@ -14,9 +15,20 @@ import VirtualGroupList from "./list/virtualgrouplist";
 import VirtualList from "./list/virtuallist";
 import GridView from "./grid/grid";
 import Pager from "./pager/pager";
+import Bubble from "./combination/bubble";
+import Combo from "./combination/combo";
+import Expander from "./combination/expander";
+import ButtonGroup from "./combination/group.button";
+import ComboGroup from "./combination/group.combo";
+import VirtualGroup from "./combination/group.virtual";
+import Loader from "./combination/loader";
+import Navigation from "./combination/navigation";
+import Searcher from "./combination/searcher";
+import Switcher from "./combination/switcher";
+import Tab from "./combination/tab";
+import ButtonTree from "./combination/tree.button";
 
-
+extend(BI, {
-BI.extend(BI, {
     Pane,
     Single,
     Text,
@@ -34,6 +46,18 @@ BI.extend(BI, {
     VirtualList,
     GridView,
     Pager,
+    Bubble,
+    Combo,
+    Expander,
+    ButtonGroup,
+    ComboGroup,
+    VirtualGroup,
+    Loader,
+    Navigation,
+    Searcher,
+    Switcher,
+    Tab,
+    ButtonTree,
 });
 
 export {
@@ -54,4 +78,16 @@ export {
     VirtualList,
     GridView,
     Pager,
+    Bubble,
+    Combo,
+    Expander,
+    ButtonGroup,
+    ComboGroup,
+    VirtualGroup,
+    Loader,
+    Navigation,
+    Searcher,
+    Switcher,
+    Tab,
+    ButtonTree,
 }

src/core/index.js

@@ -16,6 +16,7 @@ import PopoverController from "./controller/controller.popover";
 import ResizeController from "./controller/controller.resizer";
 import TooltipsController from "./controller/controller.tooltips";
 import StyleLoaderManager from "./loader/loader.style";
+import ShowListener from "./listener/listener.show";
 
 BI.extend(BI, {
     OB,
@@ -35,6 +36,7 @@ BI.extend(BI, {
     ResizeController,
     TooltipsController,
     StyleLoaderManager,
+    ShowListener,
 });
 
 export * from './2.base';
@@ -60,4 +62,5 @@ export {
     ResizeController,
     TooltipsController,
     StyleLoaderManager,
+    ShowListener,
 }

src/core/listener/listener.show.js

@@ -5,44 +5,50 @@
  * @class BI.ShowListener
  * @extends BI.OB
  */
-BI.ShowListener = BI.inherit(BI.OB, {
+import OB from "../3.ob";
-    props: function () {
+import { isArray, isNull, nextTick,  } from "../2.base";
+import { createWidget } from "../5.inject";
+import Controller from "../controller/0.controller";
+
+export default class ShowListener extends OB {
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    props() {
         return {
-            eventObj: BI.createWidget(),
+            eventObj: createWidget(),
             cardLayout: null,
-            cardNameCreator: function (v) {
+            cardNameCreator: (v) => {
                 return v;
             },
             cardCreator: BI.emptyFn,
             afterCardCreated: BI.emptyFn,
             afterCardShow: BI.emptyFn
         };
-    },
+    }
 
-    init: function () {
+    init() {
-        var self = this, o = this.options;
+        const { eventObj, cardLayout, afterCardCreated, cardNameCreator, cardCreator, afterCardShow } = this.options;
-        if (o.eventObj) {
+        if (eventObj) {
-            o.eventObj.on(BI.Controller.EVENT_CHANGE, function (type, v, ob) {
+            eventObj.on(Controller.EVENT_CHANGE, (type, v, ob) => {
                 if (type === BI.Events.CLICK) {
-                    v = v || o.eventObj.getValue();
+                    v = v || eventObj.getValue();
-                    v = BI.isArray(v) ? (v.length > 1 ? v.toString() : v[0]) : v;
+                    v = isArray(v) ? (v.length > 1 ? v.toString() : v[0]) : v;
-                    if (BI.isNull(v)) {
+                    if (isNull(v)) {
                         throw new Error("不能为null");
                     }
-                    var cardName = o.cardNameCreator(v);
+                    var cardName = cardNameCreator(v);
-                    if (!o.cardLayout.isCardExisted(cardName)) {
+                    if (!cardLayout.isCardExisted(cardName)) {
-                        var card = o.cardCreator(cardName);
+                        const card = cardCreator(cardName);
-                        o.cardLayout.addCardByName(cardName, card);
+                        cardLayout.addCardByName(cardName, card);
-                        o.afterCardCreated(cardName);
+                        afterCardCreated(cardName);
                     }
-                    o.cardLayout.showCardByName(cardName);
+                    cardLayout.showCardByName(cardName);
-                    BI.nextTick(function () {
+                    nextTick(() => {
-                        o.afterCardShow(cardName);
+                        afterCardShow(cardName);
-                        self.fireEvent(BI.ShowListener.EVENT_CHANGE, cardName);
+                        this.fireEvent(ShowListener.EVENT_CHANGE, cardName);
                     });
                 }
             });
         }
     }
-});
+}
-BI.ShowListener.EVENT_CHANGE = "EVENT_CHANGE";