diff --git a/demo/js/core/abstract/combination/demo.combo.js b/demo/js/core/abstract/combination/demo.combo.js index 2ec3619b1..fd7765b85 100644 --- a/demo/js/core/abstract/combination/demo.combo.js +++ b/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", diff --git a/demo/js/core/abstract/combination/demo.combo_group.js b/demo/js/core/abstract/combination/demo.combo_group.js index aeb9a1936..2cd391b7d 100644 --- a/demo/js/core/abstract/combination/demo.combo_group.js +++ b/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", diff --git a/src/base/0.base.js b/src/base/0.base.js index 3d342a8d3..2b4960808 100644 --- a/src/base/0.base.js +++ b/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, diff --git a/src/base/combination/bubble.js b/src/base/combination/bubble.js index 7b5f57736..5d9e9e86a 100644 --- a/src/base/combination/bubble.js +++ b/src/base/combination/bubble.js @@ -1,513 +1,515 @@ -!(function () { - /** - * @class BI.Bubble - * @extends BI.Widget - */ - BI.Bubble = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.Bubble.superclass._defaultConfig.apply(this, arguments); - - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-popper", - attributes: { - tabIndex: -1, - }, - trigger: "click", // click || hover || click-hover || "hover-click" || "" - toggle: true, - direction: "", - placement: "bottom-start", // top-start/top/top-end/bottom-start/bottom/bottom-end/left-start/left/left-end/right-start/right/right-end - logic: { - dynamic: true, - }, - container: null, // popupview放置的容器，默认为this.element - isDefaultInit: false, - destroyWhenHide: false, - hideWhenClickOutside: true, - showArrow: true, - hideWhenBlur: false, - isNeedAdjustHeight: true, // 是否需要高度调整 - isNeedAdjustWidth: true, - stopEvent: false, - stopPropagation: false, - adjustLength: 0, // 调整的距离 - adjustXOffset: 0, - adjustYOffset: 0, - hideChecker: BI.emptyFn, - offsetStyle: "left", // left,right,center - el: {}, - popup: {}, - comboClass: "bi-combo-popup", - hoverClass: "bi-combo-hover", - }); - }, - - render: function () { - var self = this, o = this.options; - this._initCombo(); - // 延迟绑定事件，这样可以将自己绑定的事情优先执行 - 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.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.Bubble.EVENT_EXPAND); - } - if (type === BI.Events.COLLAPSE) { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - self.isViewVisible() && self.fireEvent(BI.Bubble.EVENT_COLLAPSE); - } - if (type === BI.Events.CLICK) { - self.fireEvent(BI.Bubble.EVENT_TRIGGER_CHANGE, obj); - } +/** + * @class BI.Bubble + * @extends BI.Widget + */ +import { shortcut, Widget, Controller, extend, nextTick, createWidget, each, defer, debounce, delay, isNull, isFunction, contains, bind } from "../../core"; + +@shortcut() +export default class Bubble extends Widget { + static xtype = "bi.bubble"; + + static EVENT_TRIGGER_CHANGE = "EVENT_TRIGGER_CHANGE"; + static EVENT_CHANGE = "EVENT_CHANGE"; + 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-popper", + attributes: { + tabIndex: -1, + }, + trigger: "click", // click || hover || click-hover || "hover-click" || "" + toggle: true, + direction: "", + placement: "bottom-start", // top-start/top/top-end/bottom-start/bottom/bottom-end/left-start/left/left-end/right-start/right/right-end + logic: { + dynamic: true, + }, + container: null, // popupview放置的容器，默认为this.element + isDefaultInit: false, + destroyWhenHide: false, + hideWhenClickOutside: true, + showArrow: true, + hideWhenBlur: false, + isNeedAdjustHeight: true, // 是否需要高度调整 + isNeedAdjustWidth: true, + stopEvent: false, + stopPropagation: false, + adjustLength: 0, // 调整的距离 + adjustXOffset: 0, + adjustYOffset: 0, + hideChecker: BI.emptyFn, + offsetStyle: "left", // left,right,center + el: {}, + popup: {}, + comboClass: "bi-combo-popup", + hoverClass: "bi-combo-hover", + }); + } + + 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.EXPAND) { + this._popupView(); } - }); - - self.element.on("mouseenter." + self.getName(), function (e) { - if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid()) { - self.element.addClass(o.hoverClass); + if (type === BI.Events.COLLAPSE) { + this._hideView(); } - }); - self.element.on("mouseleave." + self.getName(), function (e) { - if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid()) { - self.element.removeClass(o.hoverClass); + if (type === BI.Events.EXPAND) { + this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args); + this.fireEvent(Bubble.EVENT_EXPAND); } - }); - - BI.createWidget(BI.extend({ - element: this, - scrolly: false, - }, BI.LogicFactory.createLogic("vertical", BI.extend(o.logic, { - items: [ - { el: this.combo } - ], - })))); - o.isDefaultInit && (this._assertPopupView()); - }, - - _toggle: function (e) { - this._assertPopupViewRender(); - if (this.popupView.isVisible()) { - this._hideView(e); - } else { - if (this.isEnabled()) { - this._popupView(e); + if (type === BI.Events.COLLAPSE) { + this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args); + this.isViewVisible() && this.fireEvent(Bubble.EVENT_COLLAPSE); + } + if (type === BI.Events.CLICK) { + this.fireEvent(Bubble.EVENT_TRIGGER_CHANGE, obj); } } - }, + }); - _initPullDownAction: function () { - var self = this, o = this.options; - var evs = (this.options.trigger || "").split(","); - - function st(e) { - if (o.stopEvent) { - e.stopEvent(); - } - if (o.stopPropagation) { - e.stopPropagation(); - } + this.element.on("mouseenter." + this.getName(), (e) => { + if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid()) { + this.element.addClass(hoverClass); + } + }); + this.element.on("mouseleave." + this.getName(), (e) => { + if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid()) { + this.element.removeClass(hoverClass); + } + }); + + createWidget(extend({ + element: this, + scrolly: false, + }, BI.LogicFactory.createLogic("vertical", extend(logic, { + items: [ + { el: this.combo } + ], + })))); + isDefaultInit && (this._assertPopupView()); + } + + _toggle(e) { + this._assertPopupViewRender(); + if (this.popupView.isVisible()) { + this._hideView(e); + } else { + if (this.isEnabled()) { + this._popupView(e); } + } + } - var enterPopup = false; + _initPullDownAction() { + const { stopEvent, stopPropagation, toggle } = this.options; + const evs = (this.options.trigger || "").split(","); - function hide(e) { - if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid() && o.toggle === true) { - self._hideView(e); - self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", self.combo); - self.fireEvent(BI.Bubble.EVENT_COLLAPSE); - } - self.popupView && self.popupView.element.off("mouseenter." + self.getName()).off("mouseleave." + self.getName()); - enterPopup = false; + const st = (e) => { + if (stopEvent) { + e.stopEvent(); } + if (stopPropagation) { + e.stopPropagation(); + } + } - BI.each(evs, function (i, ev) { - switch (ev) { - case "hover": - self.element.on("mouseenter." + self.getName(), function (e) { - if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid()) { - self._popupView(e); - self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EXPAND, "", self.combo); - self.fireEvent(BI.Bubble.EVENT_EXPAND); - } - }); - self.element.on("mouseleave." + self.getName(), function (e) { - if (self.popupView) { - self.popupView.element.on("mouseenter." + self.getName(), function (e) { - enterPopup = true; - self.popupView.element.on("mouseleave." + self.getName(), function (e) { - hide(e); - }); - self.popupView.element.off("mouseenter." + self.getName()); + let enterPopup = false; + + const hide = (e) => { + if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid() && toggle === true) { + this._hideView(e); + this.fireEvent(Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", this.combo); + this.fireEvent(Bubble.EVENT_COLLAPSE); + } + this.popupView && this.popupView.element.off("mouseenter." + this.getName()).off("mouseleave." + this.getName()); + enterPopup = false; + } + + each(evs, (i, ev) => { + let debounced; + switch (ev) { + case "hover": + this.element.on("mouseenter." + this.getName(), (e) => { + if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid()) { + this._popupView(e); + this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EXPAND, "", this.combo); + this.fireEvent(Bubble.EVENT_EXPAND); + } + }); + this.element.on("mouseleave." + this.getName(), (e) => { + if (this.popupView) { + this.popupView.element.on("mouseenter." + this.getName(), (e) => { + enterPopup = true; + this.popupView.element.on("mouseleave." + this.getName(), (e) => { + hide(e); }); - BI.defer(function () { - if (!enterPopup) { - hide(e); - } - }, 50); - } - }); - break; - case "click": - var debounce = BI.debounce(function (e) { - if (self.combo.element.__isMouseInBounds__(e)) { - if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid()) { - // if (!o.toggle && self.isViewVisible()) { - // return; - // } - o.toggle ? self._toggle(e) : self._popupView(e); - if (self.isViewVisible()) { - self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EXPAND, "", self.combo); - self.fireEvent(BI.Bubble.EVENT_EXPAND); - } else { - self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", self.combo); - self.fireEvent(BI.Bubble.EVENT_COLLAPSE); - } + this.popupView.element.off("mouseenter." + this.getName()); + }); + defer(() => { + if (!enterPopup) { + hide(e); + } + }, 50); + } + }); + break; + case "click": + debounced = debounce((e) => { + if (this.combo.element.__isMouseInBounds__(e)) { + if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid()) { + // if (!o.toggle && this.isViewVisible()) { + // return; + // } + toggle ? this._toggle(e) : this._popupView(e); + if (this.isViewVisible()) { + this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EXPAND, "", this.combo); + this.fireEvent(Bubble.EVENT_EXPAND); + } else { + this.fireEvent(Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", this.combo); + this.fireEvent(Bubble.EVENT_COLLAPSE); } } - }, BI.EVENT_RESPONSE_TIME, { - "leading": true, - "trailing": false, - }); - self.element.off(ev + "." + self.getName()).on(ev + "." + self.getName(), function (e) { - debounce(e); - st(e); - }); - break; - case "click-hover": - var debounce = BI.debounce(function (e) { - if (self.combo.element.__isMouseInBounds__(e)) { - if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid()) { - // if (self.isViewVisible()) { - // return; - // } - self._popupView(e); - if (self.isViewVisible()) { - self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EXPAND, "", self.combo); - self.fireEvent(BI.Bubble.EVENT_EXPAND); - } + } + }, BI.EVENT_RESPONSE_TIME, { + "leading": true, + "trailing": false, + }); + this.element.off(ev + "." + this.getName()).on(ev + "." + this.getName(), (e) => { + debounced(e); + st(e); + }); + break; + case "click-hover": + debounced = debounce((e) => { + if (this.combo.element.__isMouseInBounds__(e)) { + if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid()) { + // if (this.isViewVisible()) { + // return; + // } + this._popupView(e); + if (this.isViewVisible()) { + this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EXPAND, "", this.combo); + this.fireEvent(Bubble.EVENT_EXPAND); } } - }, BI.EVENT_RESPONSE_TIME, { - "leading": true, - "trailing": false, - }); - self.element.off("click." + self.getName()).on("click." + self.getName(), function (e) { - debounce(e); - st(e); - }); - self.element.on("mouseleave." + self.getName(), function (e) { - if (self.popupView) { - self.popupView.element.on("mouseenter." + self.getName(), function (e) { - enterPopup = true; - self.popupView.element.on("mouseleave." + self.getName(), function (e) { - hide(e); - }); - self.popupView.element.off("mouseenter." + self.getName()); + } + }, BI.EVENT_RESPONSE_TIME, { + "leading": true, + "trailing": false, + }); + this.element.off("click." + this.getName()).on("click." + this.getName(), (e) => { + debounced(e); + st(e); + }); + this.element.on("mouseleave." + this.getName(), (e) => { + if (this.popupView) { + this.popupView.element.on("mouseenter." + this.getName(), (e) => { + enterPopup = true; + this.popupView.element.on("mouseleave." + this.getName(), (e) => { + hide(e); }); - BI.delay(function () { - if (!enterPopup) { - hide(e); - } - }, 50); - } - }); - break; - case "hover-click": - self.element.on("mouseenter." + self.getName(), function (e) { - if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid()) { - self._popupView(e); - self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EXPAND, "", self.combo); - self.fireEvent(BI.Bubble.EVENT_EXPAND); - } - }); - break; - default: - break; + this.popupView.element.off("mouseenter." + this.getName()); + }); + delay(() => { + if (!enterPopup) { + hide(e); + } + }, 50); + } + }); + break; + case "hover-click": + this.element.on("mouseenter." + this.getName(), (e) => { + if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid()) { + this._popupView(e); + this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EXPAND, "", this.combo); + this.fireEvent(Bubble.EVENT_EXPAND); + } + }); + break; + default: + break; + } + }); + } + + _initCombo() { + this.combo = createWidget(this.options.el, { + value: this.options.value, + }); + } + + _assertPopupView() { + const { showArrow, value } = this.options; + if (isNull(this.popupView)) { + this.popupView = createWidget(isFunction(this.options.popup) ? this.options.popup() : this.options.popup, { + type: "bi.bubble_popup_view", + showArrow, + value, + }, this); + this.popupView.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => { + if (type === BI.Events.CLICK) { + this.combo.setValue(this.getValue()); + this.fireEvent(Bubble.EVENT_CHANGE, value, obj); } + this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args); }); - }, - - _initCombo: function () { - this.combo = BI.createWidget(this.options.el, { - value: this.options.value, + this.popupView.setVisible(false); + nextTick(() => { + this.fireEvent(Bubble.EVENT_AFTER_INIT); }); - }, - - _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.bubble_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); - }); - } - }, - - _assertPopupViewRender: function () { - this._assertPopupView(); - if (!this._rendered) { - BI.createWidget({ - type: "bi.vertical", - scrolly: false, - element: BI.isFunction(this.options.container) ? this.options.container() : (this.options.container || this), - items: [ - { el: this.popupView } - ], - }); - this._rendered = true; - } - }, - - _hideIf: function (e, skipTriggerChecker) { - // if (this.element.__isMouseInBounds__(e) || (this.popupView && this.popupView.element.__isMouseInBounds__(e))) { - // return; - // } - // BI-10290 公式combo双击公式内容会收起 - if (e && ((skipTriggerChecker !== true && this.element.find(e.target).length > 0) - || (this.popupView && this.popupView.element.find(e.target).length > 0) - || e.target.className === "CodeMirror-cursor" || BI.Widget._renderEngine.createElement(e.target).closest(".CodeMirror-hints").length > 0)) {// BI-9887 CodeMirror的公式弹框需要特殊处理下 - var directions = this.options.direction.split(","); - if (BI.contains(directions, "innerLeft") || BI.contains(directions, "innerRight")) { - // popup可以出现在trigger内部的combo，滚动时不需要消失，而是调整位置 - this.adjustWidth(); - this.adjustHeight(); - } - - return; - } - var isHide = this.options.hideChecker.apply(this, [e]); - if (isHide === false) { - return; - } - this._hideView(e); - - return true; - }, - - _hideView: function (e) { - var o = this.options; - this.fireEvent(BI.Bubble.EVENT_BEFORE_HIDEVIEW); - 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.removeClass(this.options.hoverClass); - // 应对bi-focus-shadow在收起时不失焦 - this.element.blur(); - } - - if (this.popper) { - this.popper.destroy(); - this.popper = null; + } + } + + _assertPopupViewRender() { + this._assertPopupView(); + if (!this._rendered) { + createWidget({ + type: "bi.vertical", + scrolly: false, + element: isFunction(this.options.container) ? this.options.container() : (this.options.container || this), + items: [ + { el: this.popupView } + ], + }); + this._rendered = true; + } + } + + _hideIf(e, skipTriggerChecker) { + // if (this.element.__isMouseInBounds__(e) || (this.popupView && this.popupView.element.__isMouseInBounds__(e))) { + // return; + // } + // BI-10290 公式combo双击公式内容会收起 + if (e && ((skipTriggerChecker !== true && this.element.find(e.target).length > 0) + || (this.popupView && this.popupView.element.find(e.target).length > 0) + || e.target.className === "CodeMirror-cursor" || Widget._renderEngine.createElement(e.target).closest(".CodeMirror-hints").length > 0)) {// BI-9887 CodeMirror的公式弹框需要特殊处理下 + const directions = this.options.direction.split(","); + if (contains(directions, "innerLeft") || contains(directions, "innerRight")) { + // popup可以出现在trigger内部的combo，滚动时不需要消失，而是调整位置 + this.adjustWidth(); + this.adjustHeight(); } - this.element.removeClass(this.options.comboClass); - - BI.Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName()); - BI.EVENT_BLUR && o.hideWhenBlur && BI.Widget._renderEngine.createElement(window).unbind("blur." + this.getName()); - this.fireEvent(BI.Bubble.EVENT_AFTER_HIDEVIEW); - }, - - _popupView: function (e) { - var o = this.options; - this._assertPopupViewRender(); - this.fireEvent(BI.Bubble.EVENT_BEFORE_POPUPVIEW); - // popupVisible是为了获取其宽高, 放到可视范围之外以防止在IE下闪一下 - // this.popupView.css({left: -999999999, top: -99999999}); - this.popupView.visible(); - this.adjustWidth(e); - - if (this.popper) { - this.popper.destroy(); - } - var modifiers = [ - { - name: "offset", - options: { - offset: function () { - return [o.adjustXOffset, (o.showArrow ? 12 : 0) + (o.adjustYOffset + o.adjustLength)]; - }, - }, - } - ]; - if (this.options.showArrow) { - modifiers.push({ - name: "arrow", - options: { - padding: 4, - element: this.popupView.arrow.element[0], + return; + } + const isHide = this.options.hideChecker.apply(this, [e]); + if (isHide === false) { + return; + } + this._hideView(e); + + return true; + } + + _hideView(e) { + const { hideWhenBlur } = this.options; + this.fireEvent(Bubble.EVENT_BEFORE_HIDEVIEW); + 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.removeClass(this.options.hoverClass); + // 应对bi-focus-shadow在收起时不失焦 + this.element.blur(); + } + + if (this.popper) { + this.popper.destroy(); + this.popper = null; + } + + this.element.removeClass(this.options.comboClass); + + Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName()); + BI.EVENT_BLUR && hideWhenBlur && Widget._renderEngine.createElement(window).unbind("blur." + this.getName()); + this.fireEvent(Bubble.EVENT_AFTER_HIDEVIEW); + } + + _popupView(e) { + const { adjustXOffset, showArrow, adjustYOffset, adjustLength, placement, hideWhenClickOutside, hideWhenBlur } = this.options; + this._assertPopupViewRender(); + this.fireEvent(Bubble.EVENT_BEFORE_POPUPVIEW); + // popupVisible是为了获取其宽高, 放到可视范围之外以防止在IE下闪一下 + // this.popupView.css({left: -999999999, top: -99999999}); + this.popupView.visible(); + this.adjustWidth(e); + + if (this.popper) { + this.popper.destroy(); + } + const modifiers = [ + { + name: "offset", + options: { + offset: () => { + return [adjustXOffset, (showArrow ? 12 : 0) + (adjustYOffset + adjustLength)]; }, - }); + }, } - this.popper = BI.Popper.createPopper(this.combo.element[0], this.popupView.element[0], { - placement: o.placement, - strategy: "fixed", - modifiers: modifiers, + ]; + if (this.options.showArrow) { + modifiers.push({ + name: "arrow", + options: { + padding: 4, + element: this.popupView.arrow.element[0], + }, }); - - // this.adjustHeight(e); - - this.element.addClass(this.options.comboClass); - o.hideWhenClickOutside && BI.Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()); - BI.EVENT_BLUR && o.hideWhenBlur && BI.Widget._renderEngine.createElement(window).unbind("blur." + this.getName()); - - o.hideWhenClickOutside && BI.Widget._renderEngine.createElement(document).bind("mousedown." + this.getName(), BI.bind(this._hideIf, this)); - BI.EVENT_BLUR && o.hideWhenBlur && BI.Widget._renderEngine.createElement(window).bind("blur." + this.getName(), BI.bind(this._hideIf, this)); - this.fireEvent(BI.Bubble.EVENT_AFTER_POPUPVIEW); - }, - - adjustWidth: function (e) { - var o = this.options; - if (!this.popupView) { - return; - } - if (o.isNeedAdjustWidth === true) { - this.resetListWidth(""); - var width = this.popupView.element.outerWidth(); - var maxW = this.element.outerWidth() || o.width; - // BI-93885 最大列宽算法调整 - if (maxW < 500) { - if (width >= 500) { - maxW = 500; - } else if (width > maxW) { - // 防止小数导致差那么一点 - maxW = width + 1; - } + } + this.popper = BI.Popper.createPopper(this.combo.element[0], this.popupView.element[0], { + placement, + strategy: "fixed", + modifiers, + }); + + // this.adjustHeight(e); + + this.element.addClass(this.options.comboClass); + hideWhenClickOutside && Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()); + BI.EVENT_BLUR && hideWhenBlur && Widget._renderEngine.createElement(window).unbind("blur." + this.getName()); + + hideWhenClickOutside && Widget._renderEngine.createElement(document).bind("mousedown." + this.getName(), bind(this._hideIf, this)); + BI.EVENT_BLUR && hideWhenBlur && Widget._renderEngine.createElement(window).bind("blur." + this.getName(), bind(this._hideIf, this)); + this.fireEvent(Bubble.EVENT_AFTER_POPUPVIEW); + } + + adjustWidth(e) { + const { isNeedAdjustWidth } = this.options; + if (!this.popupView) { + return; + } + if (isNeedAdjustWidth === true) { + this.resetListWidth(""); + const width = this.popupView.element.outerWidth(); + let maxW = this.element.outerWidth() || this.options.width; + // BI-93885 最大列宽算法调整 + if (maxW < 500) { + if (width >= 500) { + maxW = 500; + } else if (width > maxW) { + // 防止小数导致差那么一点 + maxW = width + 1; } - - // if (width > maxW + 80) { - // maxW = maxW + 80; - // } else if (width > maxW) { - // maxW = width; - // } - this.resetListWidth(maxW < 100 ? 100 : maxW); - } - }, - - adjustHeight: function () { - - }, - - resetListHeight: function (h) { - this._assertPopupView(); - this.popupView.resetHeight && this.popupView.resetHeight(h); - }, - - resetListWidth: function (w) { - this._assertPopupView(); - this.popupView.resetWidth && this.popupView.resetWidth(w); - }, - - populate: function (items) { - this._assertPopupView(); - this.popupView.populate.apply(this.popupView, arguments); - this.combo.populate && this.combo.populate.apply(this.combo, arguments); - }, - - _setEnable: function (arg) { - BI.Bubble.superclass._setEnable.apply(this, arguments); - if (arg === true) { - this.element.removeClass("base-disabled disabled"); - } else if (arg === false) { - this.element.addClass("base-disabled disabled"); - } - !arg && this.element.removeClass(this.options.hoverClass); - !arg && this.isViewVisible() && this._hideView(); - }, - - setValue: function (v) { - this.combo.setValue(v); - if (BI.isNull(this.popupView)) { - this.options.popup.value = v; - } else { - this.popupView.setValue(v); } - }, - getValue: function () { - if (BI.isNull(this.popupView)) { - return this.options.popup.value; - } else { - return this.popupView.getValue(); - } - }, - - isViewVisible: function () { - return this.isEnabled() && this.combo.isEnabled() && !!this.popupView && this.popupView.isVisible(); - }, - - showView: function (e) { - // 减少popup 调整宽高的次数 - if (this.isEnabled() && this.combo.isEnabled() && !this.isViewVisible()) { - this._popupView(e); - } - }, - - hideView: function (e) { - this._hideView(e); - }, - - getView: function () { - return this.popupView; - }, - - getPopupPosition: function () { - return this.position; - }, - - toggle: function () { - this._toggle(); - }, - - destroyed: function () { - BI.Widget._renderEngine.createElement(document) - .unbind("click." + this.getName()) - .unbind("mousedown." + this.getName()) - .unbind("mouseenter." + this.getName()) - .unbind("mouseleave." + this.getName()); - BI.Widget._renderEngine.createElement(window) - .unbind("blur." + this.getName()); - this.popper && this.popper.destroy(); - this.popper = null; - this.popupView && this.popupView._destroy(); - }, - }); - BI.Bubble.EVENT_TRIGGER_CHANGE = "EVENT_TRIGGER_CHANGE"; - BI.Bubble.EVENT_CHANGE = "EVENT_CHANGE"; - BI.Bubble.EVENT_EXPAND = "EVENT_EXPAND"; - BI.Bubble.EVENT_COLLAPSE = "EVENT_COLLAPSE"; - BI.Bubble.EVENT_AFTER_INIT = "EVENT_AFTER_INIT"; - - - BI.Bubble.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; - BI.Bubble.EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW"; - BI.Bubble.EVENT_BEFORE_HIDEVIEW = "EVENT_BEFORE_HIDEVIEW"; - BI.Bubble.EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW"; - - BI.shortcut("bi.bubble", BI.Bubble); -}()); + // if (width > maxW + 80) { + // maxW = maxW + 80; + // } else if (width > maxW) { + // maxW = width; + // } + this.resetListWidth(maxW < 100 ? 100 : maxW); + } + } + + adjustHeight() { + + } + + resetListHeight(h) { + this._assertPopupView(); + this.popupView.resetHeight && this.popupView.resetHeight(h); + } + + resetListWidth(w) { + this._assertPopupView(); + this.popupView.resetWidth && this.popupView.resetWidth(w); + } + + populate(items) { + this._assertPopupView(); + this.popupView.populate.apply(this.popupView, arguments); + this.combo.populate && this.combo.populate.apply(this.combo, arguments); + } + + _setEnable(arg) { + super._setEnable(arguments); + if (arg === true) { + this.element.removeClass("base-disabled disabled"); + } else if (arg === false) { + this.element.addClass("base-disabled disabled"); + } + !arg && this.element.removeClass(this.options.hoverClass); + !arg && this.isViewVisible() && this._hideView(); + } + + setValue(v) { + this.combo.setValue(v); + if (isNull(this.popupView)) { + this.options.popup.value = v; + } else { + this.popupView.setValue(v); + } + } + + getValue() { + if (isNull(this.popupView)) { + return this.options.popup.value; + } else { + return this.popupView.getValue(); + } + } + + isViewVisible() { + return this.isEnabled() && this.combo.isEnabled() && !!this.popupView && this.popupView.isVisible(); + } + + showView(e) { + // 减少popup 调整宽高的次数 + if (this.isEnabled() && this.combo.isEnabled() && !this.isViewVisible()) { + this._popupView(e); + } + } + + hideView(e) { + this._hideView(e); + } + + getView() { + return this.popupView; + } + + getPopupPosition() { + return this.position; + } + + toggle() { + this._toggle(); + } + + destroyed() { + Widget._renderEngine.createElement(document) + .unbind("click." + this.getName()) + .unbind("mousedown." + this.getName()) + .unbind("mouseenter." + this.getName()) + .unbind("mouseleave." + this.getName()); + Widget._renderEngine.createElement(window) + .unbind("blur." + this.getName()); + this.popper && this.popper.destroy(); + this.popper = null; + this.popupView && this.popupView._destroy(); + } +} diff --git a/src/base/combination/combo.js b/src/base/combination/combo.js index 75c45a4fe..277e9e224 100644 --- a/src/base/combination/combo.js +++ b/src/base/combination/combo.js @@ -1,374 +1,374 @@ -!(function () { - var needHideWhenAnotherComboOpen = {}; - var currentOpenedCombos = {}; +/** + * @class BI.Combo + * @extends BI.Widget + */ - /** - * @class BI.Combo - * @extends BI.Widget - */ - BI.Combo = BI.inherit(BI.Bubble, { - _const: { - TRIANGLE_LENGTH: 12, - }, - _defaultConfig: function () { - var conf = BI.Combo.superclass._defaultConfig.apply(this, arguments); +import { shortcut, Widget, Controller, extend, createWidget, nextTick, bind, isNotNull, isNull, isFunction, each } from "../../core"; +import Bubble from "./bubble"; +import { Resizers } from "../0.base"; - return BI.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, - }); - }, +let needHideWhenAnotherComboOpen = {}; +let currentOpenedCombos = {}; - render: function () { - var self = this, o = this.options; - this._initCombo(); - // 延迟绑定事件，这样可以将自己绑定的事情优先执行 - 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); - } - } - }); +@shortcut() +export default class Combo extends Bubble { + static xtype = "bi.combo"; - self.element.on("mouseenter." + self.getName(), function (e) { - if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid()) { - self.element.addClass(o.hoverClass); + static EVENT_TRIGGER_CHANGE = "EVENT_TRIGGER_CHANGE"; + static EVENT_CHANGE = "EVENT_CHANGE"; + 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(); } - }); - self.element.on("mouseleave." + self.getName(), function (e) { - if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid()) { - self.element.removeClass(o.hoverClass); + if (type === BI.Events.EXPAND) { + this._popupView(); } - }); - - BI.createWidget(BI.extend({ - element: this, - scrolly: false, - }, BI.LogicFactory.createLogic("vertical", BI.extend(o.logic, { - items: [ - { el: this.combo } - ], - })))); - o.isDefaultInit && (this._assertPopupView()); - BI.Resizers.add(this.getName(), BI.bind(function (e) { - // 如果resize对象是combo的子元素，则不应该收起，或交由hideChecker去处理 - if (this.isViewVisible()) { - BI.isNotNull(e) ? this._hideIf(e) : this._hideView(); + if (type === BI.Events.COLLAPSE) { + this._hideView(); + } + if (type === BI.Events.EXPAND) { + this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args); + this.fireEvent(Combo.EVENT_EXPAND); + } + if (type === BI.Events.COLLAPSE) { + this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args); + this.isViewVisible() && this.fireEvent(Combo.EVENT_COLLAPSE); + } + if (type === BI.Events.CLICK) { + this.fireEvent(Combo.EVENT_TRIGGER_CHANGE, obj); } - }, 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) { - var o = this.options; - this.fireEvent(BI.Combo.EVENT_BEFORE_HIDEVIEW); - if (this.options.destroyWhenHide === true) { - this.popupView && this.popupView.destroy(); - this.popupView = null; - this._rendered = false; - } else { - this.popupView && this.popupView.invisible(); + this.element.on("mouseenter." + this.getName(), (e) => { + if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid()) { + this.element.addClass(hoverClass); } - - if (!e || !this.combo.element.__isMouseInBounds__(e)) { - this.element.removeClass(this.options.hoverClass); - // 应对bi-focus-shadow在收起时不失焦 - this.element.blur(); + }); + this.element.on("mouseleave." + this.getName(), (e) => { + if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid()) { + this.element.removeClass(hoverClass); } + }); - this.element.removeClass(this.options.comboClass); - delete needHideWhenAnotherComboOpen[this.getName()]; - delete currentOpenedCombos[this.getName()]; - - o.hideWhenClickOutside && BI.Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName()); - BI.EVENT_BLUR && o.hideWhenBlur && BI.Widget._renderEngine.createElement(window).unbind("blur." + this.getName()); - this.fireEvent(BI.Combo.EVENT_AFTER_HIDEVIEW, e); - }, + createWidget(extend({ + element: this, + scrolly: false, + }, BI.LogicFactory.createLogic("vertical", extend(logic, { + items: [ + { el: this.combo } + ], + })))); + 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) { - var self = this, o = this.options; - this._assertPopupViewRender(); - this.fireEvent(BI.Combo.EVENT_BEFORE_POPUPVIEW); - // popupVisible是为了获取其宽高, 放到可视范围之外以防止在IE下闪一下 - this.popupView.css({ left: -99999, top: -99999 }); - this.popupView.visible(); - BI.each(needHideWhenAnotherComboOpen, function (i, combo) { - if (i !== self.getName()) { - if (combo && combo._hideIf(e, true) === true) { - delete needHideWhenAnotherComboOpen[i]; - } + _assertPopupView() { + const { showArrow, value, hideWhenClickOutside, hideWhenBlur } = this.options; + if (isNull(this.popupView)) { + this.popupView = createWidget(isFunction(this.options.popup) ? this.options.popup() : this.options.popup, { + type: "bi.popup_view", + showArrow, + value, + }, this); + this.popupView.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => { + if (type === BI.Events.CLICK) { + 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); - o.hideWhenClickOutside && BI.Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName()); - o.hideWhenClickOutside && BI.Widget._renderEngine.createElement(document).unbind("mousewheel." + this.getName()); - BI.EVENT_BLUR && o.hideWhenBlur && BI.Widget._renderEngine.createElement(window).unbind("blur." + this.getName()); + _hideView(e) { + const { hideWhenClickOutside, hideWhenBlur } = this.options; + this.fireEvent(Combo.EVENT_BEFORE_HIDEVIEW); + 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)); - o.hideWhenClickOutside && BI.Widget._renderEngine.createElement(document).bind("mousewheel." + this.getName(), BI.bind(this._hideIf, this)); - BI.EVENT_BLUR && o.hideWhenBlur && BI.Widget._renderEngine.createElement(window).bind("blur." + this.getName(), BI.bind(this._hideIf, this)); - this.fireEvent(BI.Combo.EVENT_AFTER_POPUPVIEW); - }, + if (!e || !this.combo.element.__isMouseInBounds__(e)) { + this.element.removeClass(this.options.hoverClass); + // 应对bi-focus-shadow在收起时不失焦 + this.element.blur(); + } - adjustHeight: function (e) { - var o = this.options, p = {}; - if (!this.popupView) { - 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; + this.element.removeClass(this.options.comboClass); + delete needHideWhenAnotherComboOpen[this.getName()]; + delete currentOpenedCombos[this.getName()]; - var positionRelativeElement = BI.DOM.getPositionRelativeContainingBlock( - BI.isNull(o.container) - ? this.element[0] - : BI.isWidget(o.container) - ? o.container.element[0] - : BI.Widget._renderEngine.createElement(BI.isFunction(o.container) ? o.container() : o.container)[0] - ); + hideWhenClickOutside && Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName()); + BI.EVENT_BLUR && hideWhenBlur && Widget._renderEngine.createElement(window).unbind("blur." + this.getName()); + this.fireEvent(Combo.EVENT_AFTER_HIDEVIEW, e); + } - switch (o.direction) { - case "bottom": - case "bottom,right": - 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); - break; - case "top": - case "top,right": - 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); - break; - case "left": - case "left,bottom": - 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; + _popupView(e) { + const { hideWhenClickOutside, hideWhenBlur } = this.options; + this._assertPopupViewRender(); + this.fireEvent(Combo.EVENT_BEFORE_POPUPVIEW); + // popupVisible是为了获取其宽高, 放到可视范围之外以防止在IE下闪一下 + this.popupView.css({ left: -99999, top: -99999 }); + this.popupView.visible(); + each(needHideWhenAnotherComboOpen, (i, combo) => { + if (i !== this.getName()) { + if (combo && combo._hideIf(e, true) === true) { + delete needHideWhenAnotherComboOpen[i]; + } } + }); + currentOpenedCombos[this.getName()] = this; + this.options.hideWhenAnotherComboOpen && (needHideWhenAnotherComboOpen[this.getName()] = this); + this.adjustWidth(e); + this.adjustHeight(e); - var width = this.combo.element.outerWidth(); - var height = this.combo.element.outerHeight(); - this.popupView.setDirection && this.popupView.setDirection(p.dir, { - width: width, - height: height, - offsetStyle: o.offsetStyle, - adjustXOffset: o.adjustXOffset, - adjustYOffset: o.adjustYOffset, - offset: this.combo.element.offset(), - }); + this.element.addClass(this.options.comboClass); + hideWhenClickOutside && Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName()); + hideWhenClickOutside && Widget._renderEngine.createElement(document).unbind("mousewheel." + this.getName()); + BI.EVENT_BLUR && hideWhenBlur && Widget._renderEngine.createElement(window).unbind("blur." + this.getName()); - 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; - var scaleY = positonedRect.height / positionRelativeElement.offsetHeight; + if ("adaptHeight" in p) { + this.resetListHeight(p.adaptHeight); + } - p.top && (p.top = Math.round(p.top / scaleY + positionRelativeElement.scrollTop)); - p.left && (p.left = Math.round(p.left / scaleX + positionRelativeElement.scrollLeft)); + const width = this.combo.element.outerWidth(); + 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) { - this.resetListHeight(p.adaptHeight); - } + const positonedRect = positionRelativeElement.getBoundingClientRect(); - 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); - }, + const scaleX = positonedRect.width / positionRelativeElement.offsetWidth; + const scaleY = positonedRect.height / positionRelativeElement.offsetHeight; - destroyed: function () { - BI.Widget._renderEngine.createElement(document) - .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"; + p.top && (p.top = p.top / scaleY); + p.left && (p.left = p.left / scaleX); + } + 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"; - BI.Combo.EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW"; - BI.Combo.EVENT_BEFORE_HIDEVIEW = "EVENT_BEFORE_HIDEVIEW"; - BI.Combo.EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW"; + destroyed() { + Widget._renderEngine.createElement(document) + .unbind("click." + this.getName()) + .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 = {}; +}; diff --git a/src/base/combination/expander.js b/src/base/combination/expander.js index 60b3dd471..3c7e9f8cb 100644 --- a/src/base/combination/expander.js +++ b/src/base/combination/expander.js @@ -6,9 +6,25 @@ * @class BI.Expander * @extends BI.Widget */ -BI.Expander = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.Expander.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, Widget, Controller, extend, nextTick, each, debounce, isNull, createWidget } from "../../core"; + +@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 () { - var self = this, o = this.options; - this._expanded = !!o.el.open; + render() { + const { el, hoverClass, isDefaultInit } = this.options; + this._expanded = !!el.open; this._initExpander(); // 延迟绑定事件，这样可以将自己绑定的事情优先执行 - BI.nextTick(() => { + nextTick(() => { !this.isDestroyed() && this._initPullDownAction(); }); - this.expander.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) { - if (self.isEnabled() && self.isValid()) { + this.expander.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => { + 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); - self.fireEvent(BI.Expander.EVENT_EXPAND); + this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args); + this.fireEvent(Expander.EVENT_EXPAND); } if (type === BI.Events.COLLAPSE) { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - self.isViewVisible() && self.fireEvent(BI.Expander.EVENT_COLLAPSE); + this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args); + 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 () { - if (self.isEnabled() && self.isValid() && self.expander.isEnabled() && self.expander.isValid()) { - self.element.addClass(o.hoverClass); + this.element.hover(() => { + if (this.isEnabled() && this.isValid() && this.expander.isEnabled() && this.expander.isValid()) { + this.element.addClass(hoverClass); } - }, function () { - if (self.isEnabled() && self.isValid() && self.expander.isEnabled() && self.expander.isValid()) { - self.element.removeClass(o.hoverClass); + }, () => { + if (this.isEnabled() && this.isValid() && this.expander.isEnabled() && this.expander.isValid()) { + 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 () { - var self = this, o = this.options; - var evs = this.options.trigger.split(","); - BI.each(evs, function (i, e) { + _initPullDownAction() { + const { toggle } = this.options; + const evs = this.options.trigger.split(","); + each(evs, (i, e) => { switch (e) { case "hover": - self.element[e](function (e) { - if (self.isEnabled() && self.isValid() && self.expander.isEnabled() && self.expander.isValid()) { - self._popupView(); - self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EXPAND, "", self.expander); - self.fireEvent(BI.Expander.EVENT_EXPAND); + this.element[e]((e) => { + if (this.isEnabled() && this.isValid() && this.expander.isEnabled() && this.expander.isValid()) { + this._popupView(); + this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EXPAND, "", this.expander); + this.fireEvent(Expander.EVENT_EXPAND); } - }, function () { - if (self.isEnabled() && self.isValid() && self.expander.isEnabled() && self.expander.isValid() && o.toggle) { - self._hideView(); - self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", self.expander); - self.fireEvent(BI.Expander.EVENT_COLLAPSE); + }, () => { + if (this.isEnabled() && this.isValid() && this.expander.isEnabled() && this.expander.isValid() && toggle) { + this._hideView(); + this.fireEvent(Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", this.expander); + this.fireEvent(Expander.EVENT_COLLAPSE); } }); break; case "click": if (e) { - self.element.off(e + "." + self.getName()).on(e + "." + self.getName(), BI.debounce(function (e) { - if (self.expander.element.__isMouseInBounds__(e)) { - if (self.isEnabled() && self.isValid() && self.expander.isEnabled() && self.expander.isValid()) { - o.toggle ? self._toggle() : self._popupView(); - if (self.isExpanded()) { - self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EXPAND, "", self.expander); - self.fireEvent(BI.Expander.EVENT_EXPAND); + this.element.off(e + "." + this.getName()).on(e + "." + this.getName(), debounce((e) => { + if (this.expander.element.__isMouseInBounds__(e)) { + if (this.isEnabled() && this.isValid() && this.expander.isEnabled() && this.expander.isValid()) { + toggle ? this._toggle() : this._popupView(); + if (this.isExpanded()) { + this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EXPAND, "", this.expander); + this.fireEvent(Expander.EVENT_EXPAND); } else { - self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", self.expander); - self.fireEvent(BI.Expander.EVENT_COLLAPSE); + this.fireEvent(Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", this.expander); + this.fireEvent(Expander.EVENT_COLLAPSE); } } } @@ -130,16 +146,16 @@ BI.Expander = BI.inherit(BI.Widget, { break; } }); - }, + } - _initExpander: function () { - this.expander = BI.createWidget(this.options.el); - }, + _initExpander() { + this.expander = createWidget(this.options.el); + } - _assertPopupView: function () { - var self = this, o = this.options; - if (BI.isNull(this.popupView)) { - this.popupView = BI.createWidget(this.options.popup, { + _assertPopupView() { + const { value } = this.options; + if (isNull(this.popupView)) { + 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) { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.popupView.on(Controller.EVENT_CHANGE, (type, value, obj, ...args)=> { + 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 () { - self.fireEvent(BI.Expander.EVENT_AFTER_INIT); + nextTick(() => { + 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 () { - this.fireEvent(BI.Expander.EVENT_BEFORE_HIDEVIEW); + _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) { - BI.Expander.superclass._setEnable.apply(this, arguments); + _setEnable(arg) { + 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 () { - if (BI.isNull(this.popupView)) { + getValue() { + 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); + } +} diff --git a/src/base/combination/group.button.js b/src/base/combination/group.button.js index 02b044b17..22c110720 100644 --- a/src/base/combination/group.button.js +++ b/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, { - _defaultConfig: function () { - return BI.extend(BI.ButtonGroup.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export default class ButtonGroup extends Widget { + 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 () { - var self = this, o = this.options; - var behaviors = {}; - BI.each(o.behaviors, function (key, rule) { + render() { + const { behaviors: optionsBehaviors, items: optionsItems, value } = this.options; + const behaviors = {}; + 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) { - self.populate(newValue); - }) : o.items; + const items = isFunction(optionsItems) ? this.__watch(optionsItems, (context, newValue) => { + this.populate(newValue); + }) : optionsItems; this.populate(items); - o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) { - self.setValue(newValue); - }) : o.value; - if (BI.isKey(o.value) || BI.isNotEmptyArray(o.value)) { - this.setValue(o.value); + this.options.value = isFunction(value) ? this.__watch(value, (context, newValue) => { + this.setValue(newValue); + }) : value; + if (isKey(value) || isNotEmptyArray(value)) { + this.setValue(value); } - }, + } - _createBtns: function (items) { - var btns; - BI.Widget.execWithContext(this, function () { - btns = BI.createWidgets(BI.createItems(items, { + _createBtns(items) { + let btns; + Widget.execWithContext(this, () => { + btns = createWidgets(createItems(items, { type: "bi.text_button", })); }); return btns; - }, + } - _btnsCreator: function (items) { - var self = this, args = Array.prototype.slice.call(arguments), o = this.options; - var buttons = this._createBtns(items); + _btnsCreator(items) { + const args = Array.prototype.slice.call(arguments); + 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) { - btn.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) { + each(buttons, (i, btn) => { + btn.on(Controller.EVENT_CHANGE, (type, value, obj, ...arg) => { if (type === BI.Events.CLICK) { - switch (o.chooseType) { - case BI.ButtonGroup.CHOOSE_TYPE_SINGLE: - self.setValue(btn.getValue()); + switch (chooseType) { + case ButtonGroup.CHOOSE_TYPE_SINGLE: + this.setValue(btn.getValue()); break; - case BI.ButtonGroup.CHOOSE_TYPE_NONE: - self.setValue([]); + case ButtonGroup.CHOOSE_TYPE_NONE: + this.setValue([]); break; default: break; } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - self.fireEvent(BI.ButtonGroup.EVENT_CHANGE, value, obj); + this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...arg); + 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 () { - BI.remove(self.buttons, btn); + btn.on(BI.Events.DESTROY, () => { + remove(this.buttons, btn); }); }); return buttons; - }, - - _packageBtns: function (btns) { - var o = this.options; - var layouts = BI.isArray(o.layouts) ? o.layouts : [o.layouts]; - for (var i = layouts.length - 1; i > 0; i--) { - btns = BI.map(btns, function (k, it) { - return BI.extend({}, layouts[i], { + } + + _packageBtns(btns) { + const { layouts: optionsLayouts } = this.options; + const layouts = isArray(optionsLayouts) ? optionsLayouts : [optionsLayouts]; + for (let i = layouts.length - 1; i > 0; i--) { + btns = map(btns, (k, it) => { + 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) { - var o = this.options; + _packageSimpleItems(btns) { + const { items } = this.options; - return BI.map(o.items, function (i, item) { - if (BI.stripEL(item) === item) { + return map(items, (i, item) => { + if (stripEL(item) === item) { return btns[i]; } - return BI.extend({}, item, { + return extend({}, item, { el: btns[i], }); }); - }, + } - _packageItems: function (items, packBtns) { - return BI.createItems(BI.makeArrayByArray(items, {}), BI.clone(packBtns)); - }, + _packageItems(items, packBtns) { + return createItems(makeArrayByArray(items, {}), clone(packBtns)); + } - _packageLayout: function (items) { - var o = this.options, layout = BI.deepClone(BI.isArray(o.layouts) ? o.layouts[0] : o.layouts); + _packageLayout(items) { + const { layouts } = this.options; + const layout = deepClone(isArray(layouts) ? layouts[0] : layouts); - var lay = BI.formatEL(layout).el; - while (lay && lay.items && !BI.isEmpty(lay.items)) { - lay = BI.formatEL(lay.items[0]).el; + let lay = formatEL(layout).el; + while (lay && lay.items && !isEmpty(lay.items)) { + lay = formatEL(lay.items[0]).el; } lay.items = items; return layout; - }, + } // 如果是一个简单的layout - _isSimpleLayout: function () { - var o = this.options; + _isSimpleLayout() { + 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 () { - var args = Array.prototype.slice.call(arguments); + doBehavior() { + 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) { - var btns = this._btnsCreator.apply(this, arguments); - this.buttons = BI.concat(btns, this.buttons); + prependItems(items) { + const btns = this._btnsCreator.apply(this, arguments); + 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) { - var btns = this._btnsCreator.apply(this, arguments); - this.buttons = BI.concat(this.buttons, btns); + addItems(items) { + const btns = this._btnsCreator.apply(this, arguments); + 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) { - BI.removeAt(this.buttons, indexes); + removeItemAt(indexes) { + removeAt(this.buttons, indexes); this.layouts.removeItemAt(indexes); - }, + } - removeItems: function (values) { - values = BI.isArray(values) ? values : [values]; - var deleted = []; - BI.each(this.buttons, function (i, button) { - if (BI.deepContains(values, button.getValue())) { + removeItems(values) { + values = isArray(values) ? values : [values]; + const deleted = []; + each(this.buttons, (i, button) => { + 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) { - v = BI.isArray(v) ? v : [v]; - BI.each(this.buttons, function (i, item) { - if (BI.deepContains(v, item.getValue())) { + setNotSelectedValue(v) { + v = isArray(v) ? v : [v]; + each(this.buttons, (i, item) => { + if (deepContains(v, item.getValue())) { item.setSelected && item.setSelected(false); } else { item.setSelected && item.setSelected(true); } }); - }, + } - setEnabledValue: function (v) { - v = BI.isArray(v) ? v : [v]; - BI.each(this.buttons, function (i, item) { - if (BI.deepContains(v, item.getValue())) { + setEnabledValue(v) { + v = isArray(v) ? v : [v]; + each(this.buttons, (i, item) => { + if (deepContains(v, item.getValue())) { item.setEnable(true); } else { item.setEnable(false); } }); - }, + } - setValue: function (v) { - v = BI.isArray(v) ? v : [v]; - BI.each(this.buttons, function (i, item) { - if (BI.deepContains(v, item.getValue())) { + setValue(v) { + v = isArray(v) ? v : [v]; + each(this.buttons, (i, item) => { + 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) { - if (BI.has(map, item.getValue())) { + each(this.buttons, (i, item) => { + if (has(map, item.getValue())) { item.setSelected && item.setSelected(true); } else { item.setSelected && item.setSelected(false); } }); - }, + } - setAllSelected: function (v) { - BI.each(this.getAllButtons(), function (i, btn) { + setAllSelected(v) { + each(this.getAllButtons(), (i, btn) => { (btn.setSelected || btn.setAllSelected).apply(btn, [v]); }); - }, + } - getNotSelectedValue: function () { - var v = []; - BI.each(this.buttons, function (i, item) { + getNotSelectedValue() { + const v = []; + each(this.buttons, (i, item) => { if (item.isEnabled() && !(item.isSelected && item.isSelected())) { v.push(item.getValue()); } }); return v; - }, + } - getValue: function () { - var v = []; - BI.each(this.buttons, function (i, item) { + getValue() { + const v = []; + 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 () { - var btns = []; - BI.each(this.buttons, function (i, item) { + getSelectedButtons() { + const btns = []; + each(this.buttons, (i, item) => { if (item.isSelected && item.isSelected()) { btns.push(item); } }); return btns; - }, + } - getNotSelectedButtons: function () { - var btns = []; - BI.each(this.buttons, function (i, item) { + getNotSelectedButtons() { + const btns = []; + each(this.buttons, (i, item) => { if (item.isSelected && !item.isSelected()) { btns.push(item); } }); return btns; - }, + } - getIndexByValue: function (value) { - var index = -1; - BI.any(this.buttons, function (i, item) { + getIndexByValue(value) { + let index = -1; + 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) { - var node; - BI.any(this.buttons, function (i, item) { + getNodeById(id) { + let node; + 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) { - var node; - BI.any(this.buttons, function (i, item) { + getNodeByValue(value) { + let node; + 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) { - var node = this.getNodeByValue(value); + scrollToValue(value, scrollIntoViewOptions) { + const node = this.getNodeByValue(value); if (node) { node.element[0].scrollIntoView(scrollIntoViewOptions); } - }, + } - empty: function () { - BI.ButtonGroup.superclass.empty.apply(this, arguments); + empty() { + super.empty(arguments); this.options.items = []; - }, + } - destroy: function () { - BI.ButtonGroup.superclass.destroy.apply(this, arguments); + destroy() { + 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); diff --git a/src/base/combination/group.combo.js b/src/base/combination/group.combo.js index 2f8b0c72e..97882f40f 100644 --- a/src/base/combination/group.combo.js +++ b/src/base/combination/group.combo.js @@ -2,9 +2,16 @@ * Created by GUY on 2015/8/10. */ -BI.ComboGroup = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.ComboGroup.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, Widget, Controller, extend, isEmpty, each, formatEL, clone, createWidget } from "../../core"; + +@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) { - var self = this, o = this.options; - var children = o.items; - if (BI.isEmpty(children)) { + _populate(item) { + const { items, action, height, direction, isDefaultInit, isNeedAdjustHeight, isNeedAdjustWidth, adjustLength, popup, container, trigger } = this.options; + const children = items; + if (isEmpty(children)) { throw new Error("ComboGroup构造错误"); } - BI.each(children, function (i, ch) { - var son = BI.formatEL(ch).el.children; - ch = BI.formatEL(ch).el; - if (!BI.isEmpty(son)) { - ch.el = BI.clone(ch); + each(children, (i, ch) => { + const son = formatEL(ch).el.children; + ch = formatEL(ch).el; + if (!isEmpty(son)) { + ch.el = clone(ch); ch.items = son; ch.type = "bi.combo_group"; - ch.action = o.action; - ch.height = o.height; - ch.direction = o.direction; - ch.isDefaultInit = o.isDefaultInit; - ch.isNeedAdjustHeight = o.isNeedAdjustHeight; - ch.isNeedAdjustWidth = o.isNeedAdjustWidth; - ch.adjustLength = o.adjustLength; - ch.popup = o.popup; + ch.action = action; + ch.height = height; + ch.direction = direction; + ch.isDefaultInit = isDefaultInit; + ch.isNeedAdjustHeight = isNeedAdjustHeight; + ch.isNeedAdjustWidth = isNeedAdjustWidth; + ch.adjustLength = adjustLength; + ch.popup = popup; } }); - this.combo = BI.createWidget({ + this.combo = createWidget({ type: "bi.combo", element: this, - container: o.container, - height: o.height, - trigger: o.trigger, - direction: o.direction, - isDefaultInit: o.isDefaultInit, - isNeedAdjustWidth: o.isNeedAdjustWidth, - isNeedAdjustHeight: o.isNeedAdjustHeight, - adjustLength: o.adjustLength, + container, + height, + trigger, + direction, + isDefaultInit, + isNeedAdjustWidth, + isNeedAdjustHeight, + adjustLength, el: item, - popup: BI.extend({}, o.popup, { - el: BI.extend({ + popup: extend({}, popup, { + el: extend({ items: children, - }, o.popup.el), + }, popup.el), }), }); - this.combo.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.combo.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => { + 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); + } +} diff --git a/src/base/combination/group.virtual.js b/src/base/combination/group.virtual.js index 40e7c09f4..f757c4b4e 100644 --- a/src/base/combination/group.virtual.js +++ b/src/base/combination/group.virtual.js @@ -1,6 +1,13 @@ -BI.VirtualGroup = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.VirtualGroup.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, Widget, Controller, extend, isFunction, isKey, isArray, map, stripEL, deepClone, formatEL, isEmpty, each, createWidget } from "../../core"; + +@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 () { - var self = this, o = this.options; - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); - }) : o.items; + render() { + const { items: optionsItems, value } = this.options; + const items = isFunction(optionsItems) ? this.__watch(optionsItems, (context, newValue) => { + this.populate(newValue); + }) : optionsItems; this.populate(items); - o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) { - self.setValue(newValue); - }) : o.value; - if (BI.isKey(o.value)) { - this.setValue(o.value); + this.options.value = isFunction(value) ? this.__watch(value, (context, newValue) => { + this.setValue(newValue); + }) : value; + if (isKey(value)) { + this.setValue(value); } - }, + } - _packageBtns: function (items) { - var o = this.options; - var map = this.buttonMap = {}; - var layouts = BI.isArray(o.layouts) ? o.layouts : [o.layouts]; + _packageBtns(items) { + const o = this.options; + const map = this.buttonMap = {}; + 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) { - var el = BI.stripEL(it); + items = map(items, (k, it) => { + const el = stripEL(it); - return BI.extend({}, layouts[i], { + return extend({}, layouts[i], { items: [ - BI.extend({}, layouts[i].el, { - el: BI.extend({ - ref: function (_ref) { - if (BI.isKey(map[el.value])) { + extend({}, layouts[i].el, { + el: extend({ + ref: (_ref) => { + if (isKey(map[el.value])) { map[el.value] = _ref; } }, @@ -50,33 +57,33 @@ BI.VirtualGroup = BI.inherit(BI.Widget, { } return items; - }, + } - _packageLayout: function (items) { - var o = this.options; - var layouts = BI.isArray(o.layouts) ? o.layouts : [o.layouts]; - var layout = BI.deepClone(layouts[0]); + _packageLayout(items) { + const o = this.options; + const layouts = isArray(o.layouts) ? o.layouts : [o.layouts]; + const layout = deepClone(layouts[0]); - var lay = BI.formatEL(layout).el; - while (lay && lay.items && !BI.isEmpty(lay.items)) { - lay = BI.formatEL(lay.items[0]).el; + let lay = formatEL(layout).el; + while (lay && lay.items && !isEmpty(lay.items)) { + 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) { - v = BI.isArray(v) ? v : [v]; - BI.each(this.buttonMap, function (key, item) { + setValue(v) { + v = isArray(v) ? v : [v]; + 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 () { - var v = []; - BI.each(this.buttonMap, function (i, item) { + getNotSelectedValue() { + const v = []; + 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) { - var node = this.getNodeByValue(value); + scrollToValue(value, scrollIntoViewOptions) { + const node = this.getNodeByValue(value); if (node) { node.element[0].scrollIntoView(scrollIntoViewOptions); } - }, + } - getValue: function () { - var v = []; - BI.each(this.buttonMap, function (i, item) { + getValue() { + const v = []; + 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); + } +} diff --git a/src/base/combination/loader.js b/src/base/combination/loader.js index cf548b024..0ebf26770 100644 --- a/src/base/combination/loader.js +++ b/src/base/combination/loader.js @@ -5,9 +5,16 @@ * @class BI.Loader * @extends BI.Widget */ -BI.Loader = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.Loader.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, Widget, Controller, extend, createWidget, isEmpty, nextTick, bind, isFunction, isNotEmptyArray, isNumber, isObject, each } from "../../core"; + +@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 () { - var self = this, o = this.options; + _prevLoad() { + const o = this.options; this.prev.setLoading(); - o.itemsCreator.apply(this, [{ times: --this.times }, function () { - self.prev.setLoaded(); - self.prependItems.apply(self, arguments); + o.itemsCreator.apply(this, [{ times: --this.times }, (...args) => { + this.prev.setLoaded(); + this.prependItems.apply(this, args); }]); - }, + } - _nextLoad: function () { - var self = this, o = this.options; + _nextLoad() { + const o = this.options; this.next.setLoading(); - o.itemsCreator.apply(this, [{ times: ++this.times }, function () { - self.next.setLoaded(); - self.addItems.apply(self, arguments); + o.itemsCreator.apply(this, [{ times: ++this.times }, (...args) => { + this.next.setLoaded(); + this.addItems.apply(this, args); }]); - }, + } - render: function () { - var self = this, o = this.options; - if (o.itemsCreator === false) { - o.prev = false; - o.next = false; + render() { + const { itemsCreator, prev, next, el, items: optionsItems, value, direction, logic, isDefaultInit } = this.options; + if (itemsCreator === false) { + prev = false; + next = false; } - if (o.prev !== false) { - this.prev = BI.createWidget(BI.extend({ + if (prev !== false) { + this.prev = createWidget(extend({ type: "bi.loading_bar", - }, o.prev)); - this.prev.on(BI.Controller.EVENT_CHANGE, function (type) { + }, prev)); + 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) { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.button_group.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => { + 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) { - this.next = BI.createWidget(BI.extend({ + if (next !== false) { + this.next = createWidget(extend({ type: "bi.loading_bar", - }, o.next)); - this.next.on(BI.Controller.EVENT_CHANGE, function (type) { + }, next)); + 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, { - items: BI.LogicFactory.createLogicItemsByDirection(o.direction, this.prev, this.button_group, this.next), + }, logic, { + items: BI.LogicFactory.createLogicItemsByDirection(direction, this.prev, this.button_group, this.next), })))); - o.isDefaultInit && BI.isEmpty(o.items) && BI.nextTick(BI.bind(function () { - o.isDefaultInit && BI.isEmpty(o.items) && this._populate(); + isDefaultInit && isEmpty(optionsItems) && nextTick(bind(() => { + isDefaultInit && isEmpty(optionsItems) && this._populate(); }, this)); - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); - }) : o.items; - if (BI.isNotEmptyArray(items)) { + const items = isFunction(optionsItems) ? this.__watch(optionsItems, (context, newValue) => { + this.populate(newValue); + }) : optionsItems; + if (isNotEmptyArray(items)) { this._populate(items); } - }, + } - hasPrev: function () { - var o = this.options; - if (BI.isNumber(o.count)) { - return this.count < o.count; + hasPrev() { + const { count, hasPrev } = this.options; + if (isNumber(count)) { + return this.count < count; } - return !!o.hasPrev.apply(this, [{ + return !!hasPrev.apply(this, [{ times: this.times, count: this.count, }]); - }, + } - hasNext: function () { - var o = this.options; - if (BI.isNumber(o.count)) { - return this.count < o.count; + hasNext() { + const { count, hasNext } = this.options; + if (isNumber(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) { - var self = this, o = this.options; - if (arguments.length === 0 && (BI.isFunction(o.itemsCreator))) { - o.itemsCreator.apply(this, [{ times: 1 }, function () { - if (arguments.length === 0) { + _populate(items) { + const o = this.options; + if (arguments.length === 0 && (isFunction(o.itemsCreator))) { + o.itemsCreator.apply(this, [{ times: 1 }, (...args) => { + 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 () { - BI.Loader.superclass.destroy.apply(this, arguments); - }, -}); -BI.Loader.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.loader", BI.Loader); + } + + destroy() { + super.destroy(arguments); + } +} diff --git a/src/base/combination/navigation.js b/src/base/combination/navigation.js index 1b347298e..febb44958 100644 --- a/src/base/combination/navigation.js +++ b/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, { - _defaultConfig: function () { - return BI.extend(BI.Navigation.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export default class Navigation extends Widget { + 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) { - return BI.createWidget(); + cardCreator: (v) => { + return createWidget(); }, afterCardCreated: BI.emptyFn, afterCardShow: BI.emptyFn, }); - }, + } - render: function () { - var self = this, o = this.options; - this.tab = BI.createWidget(this.options.tab, { type: "bi.button_group" }); + render() { + const { direction, logic, cardCreator, showIndex } = this.options; + 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, { - items: BI.LogicFactory.createLogicItemsByDirection(o.direction, this.tab, this.layout), + }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(direction), extend({}, logic, { + items: BI.LogicFactory.createLogicItemsByDirection(direction, this.tab, this.layout), })))); - new BI.ShowListener({ + new ShowListener({ eventObj: this.tab, cardLayout: this.layout, - cardNameCreator: function (v) { - return self.showIndex + v; + cardNameCreator: (v) => { + return this.showIndex + v; }, - cardCreator: function (v) { - BI.Widget.execWithContext(self, function () { - self.cardMap[v] = o.cardCreator(v); + cardCreator: (v) => { + Widget.execWithContext(this, () => { + this.cardMap[v] = cardCreator(v); }); - return self.cardMap[v]; + return this.cardMap[v]; }, - afterCardCreated: BI.bind(this.afterCardCreated, this), - afterCardShow: BI.bind(this.afterCardShow, this), + afterCardCreated: bind(this.afterCardCreated, this), + afterCardShow: bind(this.afterCardShow, this), }); - if (BI.isFunction(o.showIndex)) { - this.__watch(o.showIndex, function (context, newValue) { - self.setSelect(newValue); + if (isFunction(showIndex)) { + this.__watch(showIndex, (context, newValue) => { + this.setSelect(newValue); }); } - }, + } - created: function () { - var o = this.options; - if (o.showIndex !== false) { - this.setSelect(o.showIndex); + created() { + const { showIndex } = this.options; + if (showIndex !== false) { + this.setSelect(showIndex); } - }, + } - _deleteOtherCards: function (currCardName) { - var self = this, o = this.options; - if (o.single === true) { - BI.each(this.cardMap, function (name, card) { + _deleteOtherCards(currCardName) { + const { single } = this.options; + if (single === true) { + each(this.cardMap, (name, card) => { if (name !== (currCardName + "")) { - self.layout.deleteCardByName(name); - delete self.cardMap[name]; + this.layout.deleteCardByName(name); + delete this.cardMap[name]; } }); } - }, + } - afterCardCreated: function (v) { - var self = this; - this.cardMap[v].on(BI.Controller.EVENT_CHANGE, function (type, value, obj) { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + afterCardCreated(v) { + this.cardMap[v].on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => { + this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args); 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 () { - var card = this.layout.getShowingCard(); + populate() { + const card = this.layout.getShowingCard(); if (card) { return card.populate.apply(card, arguments); } - }, + } - _assertCard: function (v) { - var self = this, o = this.options; + _assertCard(v) { + const { cardCreator } = this.options; if (!this.layout.isCardExisted(v)) { - BI.Widget.execWithContext(self, function () { - self.cardMap[v] = o.cardCreator(v); + Widget.execWithContext(this, () => { + 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 () { - if (BI.isKey(this.showIndex)) { + getSelectedCard() { + if (isKey(this.showIndex)) { return this.cardMap[this.showIndex]; } - }, + } - getAllCard: function() { - return BI.values(this.cardMap); - }, + getAllCard() { + return values(this.cardMap); + } /** * @override */ - setValue: function (v) { - var card = this.layout.getShowingCard(); + setValue(v) { + const card = this.layout.getShowingCard(); if (card) { card.setValue(v); } - }, + } /** * @override */ - getValue: function () { - var card = this.layout.getShowingCard(); + getValue() { + 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); diff --git a/src/base/combination/searcher.js b/src/base/combination/searcher.js index 2098f4ce0..56b03f720 100644 --- a/src/base/combination/searcher.js +++ b/src/base/combination/searcher.js @@ -5,10 +5,23 @@ * @class BI.Searcher * @extends BI.Widget */ - -BI.Searcher = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.Searcher.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, Widget, Controller, extend, createWidget, debounce, bind, endWith, deepWithout, nextTick, isEmptyString, isNull } from "../../core"; +import ButtonGroup from "./group.button"; +import { Maskers } from "../0.base"; + +@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 () { - var self = this, o = this.options; + render() { + 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, - rgap: o.rgap, - tgap: o.tgap, - bgap: o.bgap, - vgap: o.vgap, - hgap: o.hgap, + lgap, + rgap, + tgap, + bgap, + vgap, + 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)) { - self._pauseSearch(); + if (endWith(this.getValue(), BI.BlankSplitChar)) { + this._pauseSearch(); } break; default: break; } }); - }, + } - _assertPopupView: function () { - var self = this, o = this.options; - if ((o.masker && !BI.Maskers.has(this.getName())) || (o.masker === false && !this.popupView)) { - this.popupView = BI.createWidget(o.popup, { + _assertPopupView() { + const { masker, popup, chooseType, isAutoSync, adapter } = this.options; + if ((masker && !Maskers.has(this.getName())) || (masker === false && !this.popupView)) { + this.popupView = createWidget(popup, { type: "bi.searcher_view", - chooseType: o.chooseType, + chooseType: chooseType, }); - this.popupView.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.popupView.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => { + this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args); if (type === BI.Events.CLICK) { - if (o.isAutoSync) { - var values = o.adapter && o.adapter.getValue(); - switch (o.chooseType) { - case BI.ButtonGroup.CHOOSE_TYPE_SINGLE: - o.adapter && o.adapter.setValue([obj.getValue()]); + if (isAutoSync) { + const values = adapter && adapter.getValue(); + switch (chooseType) { + case ButtonGroup.CHOOSE_TYPE_SINGLE: + 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 () { - self.fireEvent(BI.Searcher.EVENT_AFTER_INIT); + nextTick(() => { + this.fireEvent(Searcher.EVENT_AFTER_INIT); }); } - if (o.masker && !BI.Maskers.has(this.getName())) { - BI.Maskers.create(this.getName(), o.adapter, BI.extend({ + if (masker && !Maskers.has(this.getName())) { + 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) { - BI.Maskers.show(name); + nextTick((name) => { + Maskers.show(name); }, this.getName()); - }, + } - _pauseSearch: function () { + _pauseSearch() { this._stop = true; - BI.nextTick(function (name) { - BI.Maskers.hide(name); + nextTick((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 () { - var name = this.getName(); + _stopSearch() { + 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 () { - var self = this, o = this.options, keyword = this.editor.getValue(); + _search() { + const { isAutoSearch, adapter, isAutoSync, onSearch } = this.options; + const keyword = this.editor.getValue(); if (keyword === "" || this._stop) { return; } - if (o.isAutoSearch) { - var items = (o.adapter && ((o.adapter.getItems && o.adapter.getItems()) || o.adapter.attr("items"))) || []; - var finding = BI.Func.getSearchResult(items, keyword); - var match = finding.match, find = finding.find; + if (isAutoSearch) { + const items = (adapter && ((adapter.getItems && adapter.getItems()) || adapter.attr("items"))) || []; + const finding = BI.Func.getSearchResult(items, keyword); + 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()); - self.fireEvent(BI.Searcher.EVENT_SEARCHING); + isAutoSync && adapter && adapter.getValue && this.popupView.setValue(adapter.getValue()); + 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(), - }, function (searchResult, matchResult) { - if (!self._stop && keyword === self.editor.getValue()) { - var args = [].slice.call(arguments); + selectedValues: adapter && adapter.getValue(), + }, (searchResult, matchResult, ...arg) => { + if (!this._stop && keyword === this.editor.getValue()) { + const args = [searchResult, matchResult, ...arg]; if (args.length > 0) { args.push(keyword); } - BI.Maskers.show(self.getName()); - self.popupView.populate.apply(self.popupView, args); - o.isAutoSync && o.adapter && o.adapter.getValue && self.popupView.setValue(o.adapter.getValue()); - self.popupView.loaded && self.popupView.loaded(); - self.fireEvent(BI.Searcher.EVENT_SEARCHING); + Maskers.show(this.getName()); + this.popupView.populate.apply(this.popupView, args); + isAutoSync && adapter && adapter.getValue && this.popupView.setValue(adapter.getValue()); + this.popupView.loaded && this.popupView.loaded(); + this.fireEvent(Searcher.EVENT_SEARCHING); } }); - }, + } - _getLastSearchKeyword: function () { + _getLastSearchKeyword() { if (this.isValid()) { - var res = this.editor.getValue().split(/\u200b\s\u200b/); - if (BI.isEmptyString(res[res.length - 1])) { + const res = this.editor.getValue().split(/\u200b\s\u200b/); + 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 () { - return this.editor.isEnabled() && BI.Maskers.isVisible(this.getName()); - }, + isViewVisible() { + 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 () { - if (BI.Maskers.has(this.getName()) && BI.Maskers.get(this.getName()).isVisible()) { - BI.Maskers.show(this.getName()); + adjustHeight() { + if (Maskers.has(this.getName()) && Maskers.get(this.getName()).isVisible()) { + Maskers.show(this.getName()); } - }, + } - adjustView: function () { - this.isViewVisible() && BI.Maskers.show(this.getName()); - }, + adjustView() { + this.isViewVisible() && Maskers.show(this.getName()); + } - setValue: function (v) { - if (BI.isNull(this.popupView)) { + setValue(v) { + 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 () { - var o = this.options; - if (o.isAutoSync && o.adapter && o.adapter.getValue) { - return o.adapter.getValue(); + getValue() { + const { isAutoSync, adapter, popup } = this.options; + if (isAutoSync && adapter && adapter.getValue) { + return adapter.getValue(); } if (this.isSearching()) { return this.popupView.getValue(); - } else if (o.adapter && o.adapter.getValue) { - return o.adapter.getValue(); + } else if (adapter && adapter.getValue) { + return adapter.getValue(); } - if (BI.isNull(this.popupView)) { - return o.popup.value; + if (isNull(this.popupView)) { + return popup.value; } return this.popupView.getValue(); - }, + } - populate: function (result, searchResult, keyword) { - var o = this.options; + populate(result, searchResult, keyword) { + const { isAutoSync, adapter } = this.options; this._assertPopupView(); this.popupView.populate.apply(this.popupView, arguments); - if (o.isAutoSync && o.adapter && o.adapter.getValue) { - this.popupView.setValue(o.adapter.getValue()); + if (isAutoSync && adapter && adapter.getValue) { + this.popupView.setValue(adapter.getValue()); } - }, + } - empty: function () { + empty() { this.popupView && this.popupView.empty(); - }, + } - destroyed: function () { - BI.Maskers.remove(this.getName()); - }, + destroyed() { + 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); + } +} diff --git a/src/base/combination/switcher.js b/src/base/combination/switcher.js index 419711595..e89b31314 100644 --- a/src/base/combination/switcher.js +++ b/src/base/combination/switcher.js @@ -6,9 +6,26 @@ * @class BI.Switcher * @extends BI.Widget */ -BI.Switcher = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.Switcher.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, Widget, Controller, extend, nextTick, createWidget, each, debounce, isNull } from "../../core"; +import { Maskers } from "../0.base"; + +@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 () { - var self = this, o = this.options; + render() { + 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) { - if (self.isEnabled() && self.isValid()) { + this.switcher.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => { + 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); - self.fireEvent(BI.Switcher.EVENT_EXPAND); + this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args); + this.fireEvent(Switcher.EVENT_EXPAND); } if (type === BI.Events.COLLAPSE) { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - self.isViewVisible() && self.fireEvent(BI.Switcher.EVENT_COLLAPSE); + this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args); + 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 () { - if (self.isEnabled() && self.switcher.isEnabled()) { - self.element.addClass(o.hoverClass); + this.element.hover(() => { + if (this.isEnabled() && this.switcher.isEnabled()) { + this.element.addClass(hoverClass); } - }, function () { - if (self.isEnabled() && self.switcher.isEnabled()) { - self.element.removeClass(o.hoverClass); + }, () => { + if (this.isEnabled() && this.switcher.isEnabled()) { + 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 () { - var self = this, o = this.options; - var evs = this.options.trigger.split(","); - BI.each(evs, function (i, e) { + _initPullDownAction() { + const { toggle } = this.options; + const evs = this.options.trigger.split(","); + each(evs, (i, e) => { switch (e) { case "hover": - self.element[e](function (e) { - if (self.isEnabled() && self.switcher.isEnabled()) { - self._popupView(); - self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EXPAND, "", self.switcher); - self.fireEvent(BI.Switcher.EVENT_EXPAND); + this.element[e]((e) => { + if (this.isEnabled() && this.switcher.isEnabled()) { + this._popupView(); + this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EXPAND, "", this.switcher); + this.fireEvent(Switcher.EVENT_EXPAND); } - }, function () { - if (self.isEnabled() && self.switcher.isEnabled() && o.toggle) { - self._hideView(); - self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", self.switcher); - self.fireEvent(BI.Switcher.EVENT_COLLAPSE); + }, () => { + if (this.isEnabled() && this.switcher.isEnabled() && toggle) { + this._hideView(); + this.fireEvent(Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", this.switcher); + this.fireEvent(Switcher.EVENT_COLLAPSE); } }); break; default : if (e) { - self.element.off(e + "." + self.getName()).on(e + "." + self.getName(), BI.debounce(function (e) { - if (self.switcher.element.__isMouseInBounds__(e)) { - if (self.isEnabled() && self.switcher.isEnabled()) { - o.toggle ? self._toggle() : self._popupView(); - if (self.isExpanded()) { - self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EXPAND, "", self.switcher); - self.fireEvent(BI.Switcher.EVENT_EXPAND); + this.element.off(e + "." + this.getName()).on(e + "." + this.getName(), debounce((e) => { + if (this.switcher.element.__isMouseInBounds__(e)) { + if (this.isEnabled() && this.switcher.isEnabled()) { + toggle ? this._toggle() : this._popupView(); + if (this.isExpanded()) { + this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EXPAND, "", this.switcher); + this.fireEvent(Switcher.EVENT_EXPAND); } else { - self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", self.switcher); - self.fireEvent(BI.Switcher.EVENT_COLLAPSE); + this.fireEvent(Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", this.switcher); + this.fireEvent(Switcher.EVENT_COLLAPSE); } } } @@ -125,36 +142,36 @@ BI.Switcher = BI.inherit(BI.Widget, { break; } }); - }, + } - _initSwitcher: function () { - this.switcher = BI.createWidget(this.options.el, { + _initSwitcher() { + this.switcher = createWidget(this.options.el, { value: this.options.value, }); - }, + } - _assertPopupView: function () { - var self = this, o = this.options; + _assertPopupView() { + 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) { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.popupView.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => { + 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) { - BI.createWidget({ + if (direction !== BI.Direction.Custom && !adapter) { + createWidget({ type: "bi.vertical", scrolly: false, element: this, @@ -164,133 +181,120 @@ BI.Switcher = BI.inherit(BI.Widget, { }); } this._created = true; - BI.nextTick(function () { - self.fireEvent(BI.Switcher.EVENT_AFTER_INIT); + nextTick(() => { + this.fireEvent(Switcher.EVENT_AFTER_INIT); }); } - }, + } - _hideView: function () { - this.fireEvent(BI.Switcher.EVENT_BEFORE_HIDEVIEW); - var self = this, o = this.options; - o.adapter ? BI.Maskers.hide(self.getName()) : (self.popupView && self.popupView.setVisible(false)); - BI.nextTick(function () { - o.adapter ? BI.Maskers.hide(self.getName()) : (self.popupView && self.popupView.setVisible(false)); - self.element.removeClass(o.switcherClass); - self.fireEvent(BI.Switcher.EVENT_AFTER_HIDEVIEW); + _hideView() { + this.fireEvent(Switcher.EVENT_BEFORE_HIDEVIEW); + const { adapter, switcherClass } = this.options; + adapter ? Maskers.hide(this.getName()) : (this.popupView && this.popupView.setVisible(false)); + nextTick(() => { + adapter ? Maskers.hide(this.getName()) : (this.popupView && this.popupView.setVisible(false)); + this.element.removeClass(switcherClass); + this.fireEvent(Switcher.EVENT_AFTER_HIDEVIEW); }); - }, + } - _popupView: function () { - var self = this, o = this.options; + _popupView() { + const { adapter, switcherClass } = this.options; this._assertPopupView(); - this.fireEvent(BI.Switcher.EVENT_BEFORE_POPUPVIEW); - o.adapter ? BI.Maskers.show(this.getName()) : self.popupView.setVisible(true); - BI.nextTick(function (name) { - o.adapter ? BI.Maskers.show(name) : self.popupView.setVisible(true); - self.element.addClass(o.switcherClass); - self.fireEvent(BI.Switcher.EVENT_AFTER_POPUPVIEW); + this.fireEvent(Switcher.EVENT_BEFORE_POPUPVIEW); + adapter ? Maskers.show(this.getName()) : this.popupView.setVisible(true); + nextTick((name) => { + adapter ? Maskers.show(name) : this.popupView.setVisible(true); + this.element.addClass(switcherClass); + 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) { - BI.Switcher.superclass._setEnable.apply(this, arguments); + _setEnable(arg) { + 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 () { - if (BI.isNull(this.popupView)) { + getValue() { + 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 () { - this.isViewVisible() && BI.Maskers.show(this.getName()); - }, + adjustView() { + 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); + } +} diff --git a/src/base/combination/tab.js b/src/base/combination/tab.js index 933496004..7fcce06c4 100644 --- a/src/base/combination/tab.js +++ b/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, { - _defaultConfig: function () { - return BI.extend(BI.Tab.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export default class Tab extends Widget { + 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) { - return BI.createWidget(); + cardCreator: (v) => { + return createWidget(); }, keepAlives: [], }); - }, - - render: function () { - var self = this, o = this.options; - if (BI.isObject(o.tab)) { - this.tab = BI.createWidget(this.options.tab, { type: "bi.button_group" }); - this.tab.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + } + + render() { + const { tab, direction, logic, cardCreator } = this.options; + if (isObject(tab)) { + this.tab = createWidget(this.options.tab, { type: "bi.button_group" }); + this.tab.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => { + 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, { - items: BI.LogicFactory.createLogicItemsByDirection(o.direction, this.tab, this.layout), + }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(direction), extend({}, logic, { + 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) { - BI.Widget.execWithContext(self, function () { - self.cardMap[v] = o.cardCreator(v); + cardCreator: (v) => { + Widget.execWithContext(this, () => { + this.cardMap[v] = cardCreator(v); }); - return self.cardMap[v]; + return this.cardMap[v]; }, - afterCardShow: function (v) { - self._deleteOtherCards(v); - self.curr = v; + afterCardShow: (v) => { + this._deleteOtherCards(v); + this.curr = v; }, }); - listener.on(BI.ShowListener.EVENT_CHANGE, function (value) { - self.fireEvent(BI.Tab.EVENT_CHANGE, value, self); + listener.on(ShowListener.EVENT_CHANGE, (value) => { + this.fireEvent(Tab.EVENT_CHANGE, value, this); }); - }, - - _deleteOtherCards: function (currCardName) { - var self = this, o = this.options; - if (o.single === true) { - BI.each(this.cardMap, function (name, card) { - if (name !== (currCardName + "") && self._keepAlive(name) !== true) { - self.layout.deleteCardByName(name); - delete self.cardMap[name]; + } + + _deleteOtherCards(currCardName) { + const { single } = this.options; + if (single === true) { + each(this.cardMap, (name, card) => { + if (name !== (currCardName + "") && this._keepAlive(name) !== true) { + this.layout.deleteCardByName(name); + delete this.cardMap[name]; } }); } - }, + } - _assertCard: function (v) { - var self = this, o = this.options; + _assertCard(v) { + const { cardCreator } = this.options; if (!this.layout.isCardExisted(v)) { - BI.Widget.execWithContext(this, function () { - self.cardMap[v] = o.cardCreator(v); + Widget.execWithContext(this, () => { + this.cardMap[v] = cardCreator(v); }); this.layout.addCardByName(v, this.cardMap[v]); } - }, + } - _keepAlive: function (v) { - var o = this.options; + _keepAlive(v) { + 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 () { - var self = this, o = this.options; + created() { + const o = this.options; + let showIndex; - var showIndex; - if (BI.isFunction(o.showIndex)) { - showIndex = this.__watch(o.showIndex, function (context, newValue) { - self.setSelect(newValue); + if (isFunction(o.showIndex)) { + showIndex = this.__watch(o.showIndex, (context, newValue) => { + this.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) { - var self = this; - BI.any(this.cardMap, function (name, card) { - if (BI.isEqual(name, (cardname + ""))) { - self.layout.deleteCardByName(name); - delete self.cardMap[name]; + removeTab(cardname) { + any(this.cardMap, (name, card) => { + if (isEqual(name, (cardname + ""))) { + this.layout.deleteCardByName(name); + delete this.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) { - var card = this.layout.getShowingCard(); + setValue(v) { + const card = this.layout.getShowingCard(); if (card) { card.setValue(v); } - }, + } - getValue: function () { - var card = this.layout.getShowingCard(); + getValue() { + const card = this.layout.getShowingCard(); if (card) { return card.getValue(); } - }, + } - populate: function () { - var card = this.layout.getShowingCard(); + populate() { + 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); - }, -}); -BI.Tab.EVENT_CHANGE = "EVENT_CHANGE"; + super.destroy(arguments); + } -BI.shortcut("bi.tab", BI.Tab); +} diff --git a/src/base/combination/tree.button.js b/src/base/combination/tree.button.js index cfa9a3c3b..6ed1a1b3f 100644 --- a/src/base/combination/tree.button.js +++ b/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, { - _defaultConfig: function () { - return BI.extend(BI.ButtonTree.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export default class ButtonTree extends ButtonGroup { + static xtype = "bi.button_tree"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(arguments), { baseCls: "bi-button-tree", }); - }, + } - setNotSelectedValue: function (v) { - v = BI.isArray(v) ? v : [v]; - BI.each(this.buttons, function (i, item) { - if (!BI.isFunction(item.setSelected)) { + setNotSelectedValue(v) { + v = isArray(v) ? v : [v]; + each(this.buttons, (i, item) => { + 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) { - v = BI.isArray(v) ? v : [v]; - BI.each(this.buttons, function (i, item) { - if (BI.isFunction(item.setEnabledValue)) { + setEnabledValue(v) { + v = isArray(v) ? v : [v]; + each(this.buttons, (i, item) => { + 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) { - v = BI.isArray(v) ? v : [v]; - BI.each(this.buttons, function (i, item) { - if (!BI.isFunction(item.setSelected)) { + setValue(v) { + v = isArray(v) ? v : [v]; + each(this.buttons, (i, item) => { + 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 () { - var v = []; - BI.each(this.buttons, function (i, item) { - if (item.isEnabled() && !BI.isFunction(item.setSelected)) { - v = BI.concat(v, item.getNotSelectedValue()); + getNotSelectedValue() { + let v = []; + each(this.buttons, (i, item) => { + if (item.isEnabled() && !isFunction(item.setSelected)) { + v = concat(v, item.getNotSelectedValue()); return; } @@ -73,13 +80,13 @@ BI.ButtonTree = BI.inherit(BI.ButtonGroup, { }); return v; - }, + } - getValue: function () { - var v = []; - BI.each(this.buttons, function (i, item) { - if (item.isEnabled() && !BI.isFunction(item.setSelected)) { - v = BI.concat(v, item.getValue()); + getValue() { + let v = []; + each(this.buttons, (i, item) => { + if (item.isEnabled() && !isFunction(item.setSelected)) { + v = concat(v, item.getValue()); return; } @@ -89,12 +96,12 @@ BI.ButtonTree = BI.inherit(BI.ButtonGroup, { }); return v; - }, + } - getSelectedButtons: function () { - var btns = []; - BI.each(this.buttons, function (i, item) { - if (item.isEnabled() && !BI.isFunction(item.setSelected)) { + getSelectedButtons() { + let btns = []; + each(this.buttons, (i, item) => { + 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 () { - var btns = []; - BI.each(this.buttons, function (i, item) { - if (item.isEnabled() && !BI.isFunction(item.setSelected)) { + getNotSelectedButtons() { + let btns = []; + each(this.buttons, (i, item) => { + 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 () { - var leaves = []; - BI.each(this.buttons, function (i, item) { - if (item.isEnabled() && !BI.isFunction(item.setSelected)) { + getAllLeaves() { + let leaves = []; + each(this.buttons, (i, item) => { + 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) { - var index = -1; - BI.any(this.buttons, function (i, item) { - var vs = item.getValue(); - if (item.isEnabled() && (vs === value || BI.contains(vs, value))) { + getIndexByValue(value) { + let index = -1; + any(this.buttons, (i, item) => { + const vs = item.getValue(); + 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) { - var node; - BI.any(this.buttons, function (i, item) { + getNodeById(id) { + let node; + 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) { - var node; - BI.any(this.buttons, function (i, item) { + getNodeByValue(value) { + let node; + 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); + } +} diff --git a/src/base/index.js b/src/base/index.js index b5f9c4faa..723070d48 100644 --- a/src/base/index.js +++ b/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"; - -BI.extend(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, } \ No newline at end of file diff --git a/src/core/index.js b/src/core/index.js index c5aeff55a..3c660e1de 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -17,6 +17,7 @@ import ResizeController from "./controller/controller.resizer"; import TooltipsController from "./controller/controller.tooltips"; import StyleLoaderManager from "./loader/loader.style"; import "./h"; +import ShowListener from "./listener/listener.show"; BI.extend(BI, { OB, @@ -36,11 +37,12 @@ BI.extend(BI, { ResizeController, TooltipsController, StyleLoaderManager, + ShowListener, }); -export * from './2.base'; -export * from './4.widget'; -export * from './5.inject'; +export * from "./2.base"; +export * from "./4.widget"; +export * from "./5.inject"; export * from "./func"; export { @@ -62,4 +64,5 @@ export { ResizeController, TooltipsController, StyleLoaderManager, + ShowListener }; diff --git a/src/core/listener/listener.show.js b/src/core/listener/listener.show.js index af2236578..1c9469473 100644 --- a/src/core/listener/listener.show.js +++ b/src/core/listener/listener.show.js @@ -5,44 +5,50 @@ * @class BI.ShowListener * @extends BI.OB */ -BI.ShowListener = BI.inherit(BI.OB, { - props: function () { +import OB from "../3.ob"; +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 () { - var self = this, o = this.options; - if (o.eventObj) { - o.eventObj.on(BI.Controller.EVENT_CHANGE, function (type, v, ob) { + init() { + const { eventObj, cardLayout, afterCardCreated, cardNameCreator, cardCreator, afterCardShow } = this.options; + if (eventObj) { + eventObj.on(Controller.EVENT_CHANGE, (type, v, ob) => { if (type === BI.Events.CLICK) { - v = v || o.eventObj.getValue(); - v = BI.isArray(v) ? (v.length > 1 ? v.toString() : v[0]) : v; - if (BI.isNull(v)) { + v = v || eventObj.getValue(); + v = isArray(v) ? (v.length > 1 ? v.toString() : v[0]) : v; + if (isNull(v)) { throw new Error("不能为null"); } - var cardName = o.cardNameCreator(v); - if (!o.cardLayout.isCardExisted(cardName)) { - var card = o.cardCreator(cardName); - o.cardLayout.addCardByName(cardName, card); - o.afterCardCreated(cardName); + var cardName = cardNameCreator(v); + if (!cardLayout.isCardExisted(cardName)) { + const card = cardCreator(cardName); + cardLayout.addCardByName(cardName, card); + afterCardCreated(cardName); } - o.cardLayout.showCardByName(cardName); - BI.nextTick(function () { - o.afterCardShow(cardName); - self.fireEvent(BI.ShowListener.EVENT_CHANGE, cardName); + cardLayout.showCardByName(cardName); + nextTick(() => { + afterCardShow(cardName); + this.fireEvent(ShowListener.EVENT_CHANGE, cardName); }); } }); } } -}); -BI.ShowListener.EVENT_CHANGE = "EVENT_CHANGE"; +}