Browse Source

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

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

* commit '4edb0d9b23139d38d3913765396c6c49d69d61b3':
  KERNEL-13948 refactor: base/combination文件夹ES6化
  KERNEL-13948 docs: 修复combo_group demo接口错误
es6
Impact-吴家豪 2 years ago
parent
commit
95a461c194
  1. 4
      demo/js/core/abstract/combination/demo.combo.js
  2. 4
      demo/js/core/abstract/combination/demo.combo_group.js
  3. 5
      src/base/0.base.js
  4. 382
      src/base/combination/bubble.js
  5. 302
      src/base/combination/combo.js
  6. 247
      src/base/combination/expander.js
  7. 330
      src/base/combination/group.button.js
  8. 98
      src/base/combination/group.combo.js
  9. 130
      src/base/combination/group.virtual.js
  10. 219
      src/base/combination/loader.js
  11. 162
      src/base/combination/navigation.js
  12. 306
      src/base/combination/searcher.js
  13. 280
      src/base/combination/switcher.js
  14. 173
      src/base/combination/tab.js
  15. 142
      src/base/combination/tree.button.js
  16. 40
      src/base/index.js
  17. 3
      src/core/index.js
  18. 52
      src/core/listener/listener.show.js

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

@ -29,7 +29,7 @@ Demo.Func = BI.inherit(BI.Widget, {
iconCls1: "close-ha-font", iconCls1: "close-ha-font",
iconCls2: "close-ha-font" iconCls2: "close-ha-font"
}, },
children: [{ items: [{
type: "bi.single_select_item", type: "bi.single_select_item",
height: 25, height: 25,
text: "一月", text: "一月",
@ -385,7 +385,7 @@ Demo.Func = BI.inherit(BI.Widget, {
}, },
width: 200 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({ var monthCombo = BI.createWidget({
type: "bi.combo", type: "bi.combo",

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

@ -12,7 +12,7 @@ Demo.Func = BI.inherit(BI.Widget, {
height: 25, height: 25,
iconCls: "close-ha-font" iconCls: "close-ha-font"
}, },
children: [{ items: [{
type: "bi.single_select_item", type: "bi.single_select_item",
height: 25, height: 25,
text: "一月", text: "一月",
@ -63,7 +63,7 @@ Demo.Func = BI.inherit(BI.Widget, {
}, },
width: 200 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({ return BI.createWidget({
type: "bi.left", type: "bi.left",

5
src/base/0.base.js

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

382
src/base/combination/bubble.js

@ -1,13 +1,28 @@
!(function () {
/** /**
* @class BI.Bubble * @class BI.Bubble
* @extends BI.Widget * @extends BI.Widget
*/ */
BI.Bubble = BI.inherit(BI.Widget, { import { shortcut, Widget, Controller, extend, nextTick, createWidget, each, defer, debounce, delay, isNull, isFunction, contains, bind } from "../../core";
_defaultConfig: function () {
var conf = BI.Bubble.superclass._defaultConfig.apply(this, arguments);
return BI.extend(conf, { @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", baseCls: (conf.baseCls || "") + " bi-popper",
attributes: { attributes: {
tabIndex: -1, tabIndex: -1,
@ -39,60 +54,60 @@
comboClass: "bi-combo-popup", comboClass: "bi-combo-popup",
hoverClass: "bi-combo-hover", hoverClass: "bi-combo-hover",
}); });
}, }
render: function () { render() {
var self = this, o = this.options; const { hoverClass, logic, isDefaultInit } = this.options;
this._initCombo(); this._initCombo();
// 延迟绑定事件,这样可以将自己绑定的事情优先执行 // 延迟绑定事件,这样可以将自己绑定的事情优先执行
BI.nextTick(() => { nextTick(() => {
!this.isDestroyed() && this._initPullDownAction(); !this.isDestroyed() && this._initPullDownAction();
}); });
this.combo.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) { this.combo.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => {
if (self.isEnabled() && self.isValid()) { if (this.isEnabled() && this.isValid()) {
if (type === BI.Events.EXPAND) { if (type === BI.Events.EXPAND) {
self._popupView(); this._popupView();
} }
if (type === BI.Events.COLLAPSE) { if (type === BI.Events.COLLAPSE) {
self._hideView(); this._hideView();
} }
if (type === BI.Events.EXPAND) { if (type === BI.Events.EXPAND) {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
self.fireEvent(BI.Bubble.EVENT_EXPAND); this.fireEvent(Bubble.EVENT_EXPAND);
} }
if (type === BI.Events.COLLAPSE) { if (type === BI.Events.COLLAPSE) {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
self.isViewVisible() && self.fireEvent(BI.Bubble.EVENT_COLLAPSE); this.isViewVisible() && this.fireEvent(Bubble.EVENT_COLLAPSE);
} }
if (type === BI.Events.CLICK) { if (type === BI.Events.CLICK) {
self.fireEvent(BI.Bubble.EVENT_TRIGGER_CHANGE, obj); this.fireEvent(Bubble.EVENT_TRIGGER_CHANGE, obj);
} }
} }
}); });
self.element.on("mouseenter." + self.getName(), function (e) { this.element.on("mouseenter." + this.getName(), (e) => {
if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid()) { if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid()) {
self.element.addClass(o.hoverClass); this.element.addClass(hoverClass);
} }
}); });
self.element.on("mouseleave." + self.getName(), function (e) { this.element.on("mouseleave." + this.getName(), (e) => {
if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid()) { if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid()) {
self.element.removeClass(o.hoverClass); this.element.removeClass(hoverClass);
} }
}); });
BI.createWidget(BI.extend({ createWidget(extend({
element: this, element: this,
scrolly: false, scrolly: false,
}, BI.LogicFactory.createLogic("vertical", BI.extend(o.logic, { }, BI.LogicFactory.createLogic("vertical", extend(logic, {
items: [ items: [
{ el: this.combo } { el: this.combo }
], ],
})))); }))));
o.isDefaultInit && (this._assertPopupView()); isDefaultInit && (this._assertPopupView());
}, }
_toggle: function (e) { _toggle(e) {
this._assertPopupViewRender(); this._assertPopupViewRender();
if (this.popupView.isVisible()) { if (this.popupView.isVisible()) {
this._hideView(e); this._hideView(e);
@ -101,53 +116,54 @@
this._popupView(e); this._popupView(e);
} }
} }
}, }
_initPullDownAction: function () { _initPullDownAction() {
var self = this, o = this.options; const { stopEvent, stopPropagation, toggle } = this.options;
var evs = (this.options.trigger || "").split(","); const evs = (this.options.trigger || "").split(",");
function st(e) { const st = (e) => {
if (o.stopEvent) { if (stopEvent) {
e.stopEvent(); e.stopEvent();
} }
if (o.stopPropagation) { if (stopPropagation) {
e.stopPropagation(); e.stopPropagation();
} }
} }
var enterPopup = false; let enterPopup = false;
function hide(e) { const hide = (e) => {
if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid() && o.toggle === true) { if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid() && toggle === true) {
self._hideView(e); this._hideView(e);
self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", self.combo); this.fireEvent(Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", this.combo);
self.fireEvent(BI.Bubble.EVENT_COLLAPSE); this.fireEvent(Bubble.EVENT_COLLAPSE);
} }
self.popupView && self.popupView.element.off("mouseenter." + self.getName()).off("mouseleave." + self.getName()); this.popupView && this.popupView.element.off("mouseenter." + this.getName()).off("mouseleave." + this.getName());
enterPopup = false; enterPopup = false;
} }
BI.each(evs, function (i, ev) { each(evs, (i, ev) => {
let debounced;
switch (ev) { switch (ev) {
case "hover": case "hover":
self.element.on("mouseenter." + self.getName(), function (e) { this.element.on("mouseenter." + this.getName(), (e) => {
if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid()) { if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid()) {
self._popupView(e); this._popupView(e);
self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EXPAND, "", self.combo); this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EXPAND, "", this.combo);
self.fireEvent(BI.Bubble.EVENT_EXPAND); this.fireEvent(Bubble.EVENT_EXPAND);
} }
}); });
self.element.on("mouseleave." + self.getName(), function (e) { this.element.on("mouseleave." + this.getName(), (e) => {
if (self.popupView) { if (this.popupView) {
self.popupView.element.on("mouseenter." + self.getName(), function (e) { this.popupView.element.on("mouseenter." + this.getName(), (e) => {
enterPopup = true; enterPopup = true;
self.popupView.element.on("mouseleave." + self.getName(), function (e) { this.popupView.element.on("mouseleave." + this.getName(), (e) => {
hide(e); hide(e);
}); });
self.popupView.element.off("mouseenter." + self.getName()); this.popupView.element.off("mouseenter." + this.getName());
}); });
BI.defer(function () { defer(() => {
if (!enterPopup) { if (!enterPopup) {
hide(e); hide(e);
} }
@ -156,19 +172,19 @@
}); });
break; break;
case "click": case "click":
var debounce = BI.debounce(function (e) { debounced = debounce((e) => {
if (self.combo.element.__isMouseInBounds__(e)) { if (this.combo.element.__isMouseInBounds__(e)) {
if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid()) { if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid()) {
// if (!o.toggle && self.isViewVisible()) { // if (!o.toggle && this.isViewVisible()) {
// return; // return;
// } // }
o.toggle ? self._toggle(e) : self._popupView(e); toggle ? this._toggle(e) : this._popupView(e);
if (self.isViewVisible()) { if (this.isViewVisible()) {
self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EXPAND, "", self.combo); this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EXPAND, "", this.combo);
self.fireEvent(BI.Bubble.EVENT_EXPAND); this.fireEvent(Bubble.EVENT_EXPAND);
} else { } else {
self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", self.combo); this.fireEvent(Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", this.combo);
self.fireEvent(BI.Bubble.EVENT_COLLAPSE); this.fireEvent(Bubble.EVENT_COLLAPSE);
} }
} }
} }
@ -176,22 +192,22 @@
"leading": true, "leading": true,
"trailing": false, "trailing": false,
}); });
self.element.off(ev + "." + self.getName()).on(ev + "." + self.getName(), function (e) { this.element.off(ev + "." + this.getName()).on(ev + "." + this.getName(), (e) => {
debounce(e); debounced(e);
st(e); st(e);
}); });
break; break;
case "click-hover": case "click-hover":
var debounce = BI.debounce(function (e) { debounced = debounce((e) => {
if (self.combo.element.__isMouseInBounds__(e)) { if (this.combo.element.__isMouseInBounds__(e)) {
if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid()) { if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid()) {
// if (self.isViewVisible()) { // if (this.isViewVisible()) {
// return; // return;
// } // }
self._popupView(e); this._popupView(e);
if (self.isViewVisible()) { if (this.isViewVisible()) {
self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EXPAND, "", self.combo); this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EXPAND, "", this.combo);
self.fireEvent(BI.Bubble.EVENT_EXPAND); this.fireEvent(Bubble.EVENT_EXPAND);
} }
} }
} }
@ -199,20 +215,20 @@
"leading": true, "leading": true,
"trailing": false, "trailing": false,
}); });
self.element.off("click." + self.getName()).on("click." + self.getName(), function (e) { this.element.off("click." + this.getName()).on("click." + this.getName(), (e) => {
debounce(e); debounced(e);
st(e); st(e);
}); });
self.element.on("mouseleave." + self.getName(), function (e) { this.element.on("mouseleave." + this.getName(), (e) => {
if (self.popupView) { if (this.popupView) {
self.popupView.element.on("mouseenter." + self.getName(), function (e) { this.popupView.element.on("mouseenter." + this.getName(), (e) => {
enterPopup = true; enterPopup = true;
self.popupView.element.on("mouseleave." + self.getName(), function (e) { this.popupView.element.on("mouseleave." + this.getName(), (e) => {
hide(e); hide(e);
}); });
self.popupView.element.off("mouseenter." + self.getName()); this.popupView.element.off("mouseenter." + this.getName());
}); });
BI.delay(function () { delay(() => {
if (!enterPopup) { if (!enterPopup) {
hide(e); hide(e);
} }
@ -221,11 +237,11 @@
}); });
break; break;
case "hover-click": case "hover-click":
self.element.on("mouseenter." + self.getName(), function (e) { this.element.on("mouseenter." + this.getName(), (e) => {
if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid()) { if (this.isEnabled() && this.isValid() && this.combo.isEnabled() && this.combo.isValid()) {
self._popupView(e); this._popupView(e);
self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EXPAND, "", self.combo); this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EXPAND, "", this.combo);
self.fireEvent(BI.Bubble.EVENT_EXPAND); this.fireEvent(Bubble.EVENT_EXPAND);
} }
}); });
break; break;
@ -233,61 +249,61 @@
break; break;
} }
}); });
}, }
_initCombo: function () { _initCombo() {
this.combo = BI.createWidget(this.options.el, { this.combo = createWidget(this.options.el, {
value: this.options.value, value: this.options.value,
}); });
}, }
_assertPopupView: function () { _assertPopupView() {
var self = this, o = this.options; const { showArrow, value } = this.options;
if (BI.isNull(this.popupView)) { if (isNull(this.popupView)) {
this.popupView = BI.createWidget(BI.isFunction(this.options.popup) ? this.options.popup() : this.options.popup, { this.popupView = createWidget(isFunction(this.options.popup) ? this.options.popup() : this.options.popup, {
type: "bi.bubble_popup_view", type: "bi.bubble_popup_view",
showArrow: o.showArrow, showArrow,
value: o.value, value,
}, this); }, this);
this.popupView.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) { this.popupView.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => {
if (type === BI.Events.CLICK) { if (type === BI.Events.CLICK) {
self.combo.setValue(self.getValue()); this.combo.setValue(this.getValue());
self.fireEvent(BI.Bubble.EVENT_CHANGE, value, obj); this.fireEvent(Bubble.EVENT_CHANGE, value, obj);
} }
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
}); });
this.popupView.setVisible(false); this.popupView.setVisible(false);
BI.nextTick(function () { nextTick(() => {
self.fireEvent(BI.Bubble.EVENT_AFTER_INIT); this.fireEvent(Bubble.EVENT_AFTER_INIT);
}); });
} }
}, }
_assertPopupViewRender: function () { _assertPopupViewRender() {
this._assertPopupView(); this._assertPopupView();
if (!this._rendered) { if (!this._rendered) {
BI.createWidget({ createWidget({
type: "bi.vertical", type: "bi.vertical",
scrolly: false, scrolly: false,
element: BI.isFunction(this.options.container) ? this.options.container() : (this.options.container || this), element: isFunction(this.options.container) ? this.options.container() : (this.options.container || this),
items: [ items: [
{ el: this.popupView } { el: this.popupView }
], ],
}); });
this._rendered = true; this._rendered = true;
} }
}, }
_hideIf: function (e, skipTriggerChecker) { _hideIf(e, skipTriggerChecker) {
// if (this.element.__isMouseInBounds__(e) || (this.popupView && this.popupView.element.__isMouseInBounds__(e))) { // if (this.element.__isMouseInBounds__(e) || (this.popupView && this.popupView.element.__isMouseInBounds__(e))) {
// return; // return;
// } // }
// BI-10290 公式combo双击公式内容会收起 // BI-10290 公式combo双击公式内容会收起
if (e && ((skipTriggerChecker !== true && this.element.find(e.target).length > 0) if (e && ((skipTriggerChecker !== true && this.element.find(e.target).length > 0)
|| (this.popupView && this.popupView.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的公式弹框需要特殊处理下 || e.target.className === "CodeMirror-cursor" || Widget._renderEngine.createElement(e.target).closest(".CodeMirror-hints").length > 0)) {// BI-9887 CodeMirror的公式弹框需要特殊处理下
var directions = this.options.direction.split(","); const directions = this.options.direction.split(",");
if (BI.contains(directions, "innerLeft") || BI.contains(directions, "innerRight")) { if (contains(directions, "innerLeft") || contains(directions, "innerRight")) {
// popup可以出现在trigger内部的combo,滚动时不需要消失,而是调整位置 // popup可以出现在trigger内部的combo,滚动时不需要消失,而是调整位置
this.adjustWidth(); this.adjustWidth();
this.adjustHeight(); this.adjustHeight();
@ -295,18 +311,18 @@
return; return;
} }
var isHide = this.options.hideChecker.apply(this, [e]); const isHide = this.options.hideChecker.apply(this, [e]);
if (isHide === false) { if (isHide === false) {
return; return;
} }
this._hideView(e); this._hideView(e);
return true; return true;
}, }
_hideView: function (e) { _hideView(e) {
var o = this.options; const { hideWhenBlur } = this.options;
this.fireEvent(BI.Bubble.EVENT_BEFORE_HIDEVIEW); this.fireEvent(Bubble.EVENT_BEFORE_HIDEVIEW);
if (this.options.destroyWhenHide === true) { if (this.options.destroyWhenHide === true) {
this.popupView && this.popupView.destroy(); this.popupView && this.popupView.destroy();
this.popupView = null; this.popupView = null;
@ -328,15 +344,15 @@
this.element.removeClass(this.options.comboClass); this.element.removeClass(this.options.comboClass);
BI.Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName()); 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()); BI.EVENT_BLUR && hideWhenBlur && Widget._renderEngine.createElement(window).unbind("blur." + this.getName());
this.fireEvent(BI.Bubble.EVENT_AFTER_HIDEVIEW); this.fireEvent(Bubble.EVENT_AFTER_HIDEVIEW);
}, }
_popupView: function (e) { _popupView(e) {
var o = this.options; const { adjustXOffset, showArrow, adjustYOffset, adjustLength, placement, hideWhenClickOutside, hideWhenBlur } = this.options;
this._assertPopupViewRender(); this._assertPopupViewRender();
this.fireEvent(BI.Bubble.EVENT_BEFORE_POPUPVIEW); this.fireEvent(Bubble.EVENT_BEFORE_POPUPVIEW);
// popupVisible是为了获取其宽高, 放到可视范围之外以防止在IE下闪一下 // popupVisible是为了获取其宽高, 放到可视范围之外以防止在IE下闪一下
// this.popupView.css({left: -999999999, top: -99999999}); // this.popupView.css({left: -999999999, top: -99999999});
this.popupView.visible(); this.popupView.visible();
@ -345,12 +361,12 @@
if (this.popper) { if (this.popper) {
this.popper.destroy(); this.popper.destroy();
} }
var modifiers = [ const modifiers = [
{ {
name: "offset", name: "offset",
options: { options: {
offset: function () { offset: () => {
return [o.adjustXOffset, (o.showArrow ? 12 : 0) + (o.adjustYOffset + o.adjustLength)]; return [adjustXOffset, (showArrow ? 12 : 0) + (adjustYOffset + adjustLength)];
}, },
}, },
} }
@ -365,31 +381,31 @@
}); });
} }
this.popper = BI.Popper.createPopper(this.combo.element[0], this.popupView.element[0], { this.popper = BI.Popper.createPopper(this.combo.element[0], this.popupView.element[0], {
placement: o.placement, placement,
strategy: "fixed", strategy: "fixed",
modifiers: modifiers, modifiers,
}); });
// this.adjustHeight(e); // this.adjustHeight(e);
this.element.addClass(this.options.comboClass); this.element.addClass(this.options.comboClass);
o.hideWhenClickOutside && BI.Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()); hideWhenClickOutside && Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName());
BI.EVENT_BLUR && o.hideWhenBlur && BI.Widget._renderEngine.createElement(window).unbind("blur." + this.getName()); BI.EVENT_BLUR && hideWhenBlur && Widget._renderEngine.createElement(window).unbind("blur." + this.getName());
o.hideWhenClickOutside && BI.Widget._renderEngine.createElement(document).bind("mousedown." + this.getName(), BI.bind(this._hideIf, this)); hideWhenClickOutside && Widget._renderEngine.createElement(document).bind("mousedown." + this.getName(), bind(this._hideIf, this));
BI.EVENT_BLUR && o.hideWhenBlur && BI.Widget._renderEngine.createElement(window).bind("blur." + this.getName(), BI.bind(this._hideIf, this)); BI.EVENT_BLUR && hideWhenBlur && Widget._renderEngine.createElement(window).bind("blur." + this.getName(), bind(this._hideIf, this));
this.fireEvent(BI.Bubble.EVENT_AFTER_POPUPVIEW); this.fireEvent(Bubble.EVENT_AFTER_POPUPVIEW);
}, }
adjustWidth: function (e) { adjustWidth(e) {
var o = this.options; const { isNeedAdjustWidth } = this.options;
if (!this.popupView) { if (!this.popupView) {
return; return;
} }
if (o.isNeedAdjustWidth === true) { if (isNeedAdjustWidth === true) {
this.resetListWidth(""); this.resetListWidth("");
var width = this.popupView.element.outerWidth(); const width = this.popupView.element.outerWidth();
var maxW = this.element.outerWidth() || o.width; let maxW = this.element.outerWidth() || this.options.width;
// BI-93885 最大列宽算法调整 // BI-93885 最大列宽算法调整
if (maxW < 500) { if (maxW < 500) {
if (width >= 500) { if (width >= 500) {
@ -407,30 +423,30 @@
// } // }
this.resetListWidth(maxW < 100 ? 100 : maxW); this.resetListWidth(maxW < 100 ? 100 : maxW);
} }
}, }
adjustHeight: function () { adjustHeight() {
}, }
resetListHeight: function (h) { resetListHeight(h) {
this._assertPopupView(); this._assertPopupView();
this.popupView.resetHeight && this.popupView.resetHeight(h); this.popupView.resetHeight && this.popupView.resetHeight(h);
}, }
resetListWidth: function (w) { resetListWidth(w) {
this._assertPopupView(); this._assertPopupView();
this.popupView.resetWidth && this.popupView.resetWidth(w); this.popupView.resetWidth && this.popupView.resetWidth(w);
}, }
populate: function (items) { populate(items) {
this._assertPopupView(); this._assertPopupView();
this.popupView.populate.apply(this.popupView, arguments); this.popupView.populate.apply(this.popupView, arguments);
this.combo.populate && this.combo.populate.apply(this.combo, arguments); this.combo.populate && this.combo.populate.apply(this.combo, arguments);
}, }
_setEnable: function (arg) { _setEnable(arg) {
BI.Bubble.superclass._setEnable.apply(this, arguments); super._setEnable(arguments);
if (arg === true) { if (arg === true) {
this.element.removeClass("base-disabled disabled"); this.element.removeClass("base-disabled disabled");
} else if (arg === false) { } else if (arg === false) {
@ -438,76 +454,62 @@
} }
!arg && this.element.removeClass(this.options.hoverClass); !arg && this.element.removeClass(this.options.hoverClass);
!arg && this.isViewVisible() && this._hideView(); !arg && this.isViewVisible() && this._hideView();
}, }
setValue: function (v) { setValue(v) {
this.combo.setValue(v); this.combo.setValue(v);
if (BI.isNull(this.popupView)) { if (isNull(this.popupView)) {
this.options.popup.value = v; this.options.popup.value = v;
} else { } else {
this.popupView.setValue(v); this.popupView.setValue(v);
} }
}, }
getValue: function () { getValue() {
if (BI.isNull(this.popupView)) { if (isNull(this.popupView)) {
return this.options.popup.value; return this.options.popup.value;
} else { } else {
return this.popupView.getValue(); return this.popupView.getValue();
} }
}, }
isViewVisible: function () { isViewVisible() {
return this.isEnabled() && this.combo.isEnabled() && !!this.popupView && this.popupView.isVisible(); return this.isEnabled() && this.combo.isEnabled() && !!this.popupView && this.popupView.isVisible();
}, }
showView: function (e) { showView(e) {
// 减少popup 调整宽高的次数 // 减少popup 调整宽高的次数
if (this.isEnabled() && this.combo.isEnabled() && !this.isViewVisible()) { if (this.isEnabled() && this.combo.isEnabled() && !this.isViewVisible()) {
this._popupView(e); this._popupView(e);
} }
}, }
hideView: function (e) { hideView(e) {
this._hideView(e); this._hideView(e);
}, }
getView: function () { getView() {
return this.popupView; return this.popupView;
}, }
getPopupPosition: function () { getPopupPosition() {
return this.position; return this.position;
}, }
toggle: function () { toggle() {
this._toggle(); this._toggle();
}, }
destroyed: function () { destroyed() {
BI.Widget._renderEngine.createElement(document) Widget._renderEngine.createElement(document)
.unbind("click." + this.getName()) .unbind("click." + this.getName())
.unbind("mousedown." + this.getName()) .unbind("mousedown." + this.getName())
.unbind("mouseenter." + this.getName()) .unbind("mouseenter." + this.getName())
.unbind("mouseleave." + this.getName()); .unbind("mouseleave." + this.getName());
BI.Widget._renderEngine.createElement(window) Widget._renderEngine.createElement(window)
.unbind("blur." + this.getName()); .unbind("blur." + this.getName());
this.popper && this.popper.destroy(); this.popper && this.popper.destroy();
this.popper = null; this.popper = null;
this.popupView && this.popupView._destroy(); 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);
}());

302
src/base/combination/combo.js

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

247
src/base/combination/expander.js

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

330
src/base/combination/group.button.js

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

98
src/base/combination/group.combo.js

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

130
src/base/combination/group.virtual.js

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

219
src/base/combination/loader.js

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

162
src/base/combination/navigation.js

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

306
src/base/combination/searcher.js

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

280
src/base/combination/switcher.js

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

173
src/base/combination/tab.js

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

142
src/base/combination/tree.button.js

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

40
src/base/index.js

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

3
src/core/index.js

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

52
src/core/listener/listener.show.js

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

Loading…
Cancel
Save