From 5376192e59249eb7a512bcb0d701c6ac1c3f6678 Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Mon, 9 Jan 2023 17:41:17 +0800 Subject: [PATCH] =?UTF-8?q?KERNEL-14035=20refactor:=20layout=E7=9B=B8?= =?UTF-8?q?=E5=85=B3es6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/core/index.js | 3 + src/core/wrapper/index.js | 2 + src/core/wrapper/layout.js | 736 +++++++++--------- .../wrapper/layout/adapt/absolute.center.js | 51 +- .../layout/adapt/absolute.horizontal.js | 50 +- .../adapt/absolute.leftrightvertical.js | 160 ++-- .../wrapper/layout/adapt/absolute.vertical.js | 48 +- src/core/wrapper/layout/adapt/adapt.center.js | 51 +- .../wrapper/layout/adapt/adapt.horizontal.js | 11 +- .../layout/adapt/adapt.leftrightvertical.js | 177 +++-- src/core/wrapper/layout/adapt/adapt.table.js | 103 +-- .../wrapper/layout/adapt/adapt.vertical.js | 47 +- .../wrapper/layout/adapt/auto.horizontal.js | 50 +- src/core/wrapper/layout/adapt/index.js | 13 + .../wrapper/layout/adapt/inline.center.js | 47 +- .../wrapper/layout/adapt/inline.horizontal.js | 47 +- .../wrapper/layout/adapt/inline.vertical.js | 47 +- src/core/wrapper/layout/index.js | 17 + src/core/wrapper/layout/layout.absolute.js | 138 ++-- src/core/wrapper/layout/layout.adaptive.js | 69 +- src/core/wrapper/layout/layout.border.js | 102 +-- src/core/wrapper/layout/layout.card.js | 215 ++--- src/core/wrapper/layout/layout.default.js | 48 +- src/core/wrapper/layout/layout.division.js | 126 +-- src/core/wrapper/layout/layout.flow.js | 181 +++-- src/core/wrapper/layout/layout.grid.js | 106 +-- src/core/wrapper/layout/layout.horizontal.js | 14 +- src/core/wrapper/layout/layout.inline.js | 91 ++- src/core/wrapper/layout/layout.lattice.js | 55 +- src/core/wrapper/layout/layout.table.js | 95 +-- src/core/wrapper/layout/layout.tape.js | 244 +++--- src/core/wrapper/layout/layout.td.js | 134 ++-- src/core/wrapper/layout/layout.vertical.js | 63 +- src/core/wrapper/layout/layout.window.js | 163 ++-- 34 files changed, 1901 insertions(+), 1603 deletions(-) create mode 100644 src/core/wrapper/index.js create mode 100644 src/core/wrapper/layout/adapt/index.js create mode 100644 src/core/wrapper/layout/index.js diff --git a/src/core/index.js b/src/core/index.js index 34ab918cd..284098aa7 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -16,6 +16,7 @@ import * as constant from "./constant"; import * as logic from "./logic"; import { Element } from "./element"; import * as utils from "./utils"; +import * as wrapper from "./wrapper"; export * from "./decorator"; export * from "./2.base"; @@ -31,6 +32,7 @@ export * from "./h"; export * from "./constant"; export * from "./logic"; export * from "./utils"; +export * from "./wrapper"; export { StyleLoaderManager, @@ -60,4 +62,5 @@ Object.assign(BI, { useInWorker, ...h, ...utils, + ...wrapper, }); diff --git a/src/core/wrapper/index.js b/src/core/wrapper/index.js new file mode 100644 index 000000000..c32c3e3bf --- /dev/null +++ b/src/core/wrapper/index.js @@ -0,0 +1,2 @@ +export { Layout } from "./layout"; +export * from "./layout/index"; diff --git a/src/core/wrapper/layout.js b/src/core/wrapper/layout.js index d2926385d..6649f55bb 100644 --- a/src/core/wrapper/layout.js +++ b/src/core/wrapper/layout.js @@ -1,15 +1,22 @@ +import { isNull, isFunction, each, stripEL, keys, isArray, contains, isKey, isOdd, isWidget, isNotNull, has } from "../2.base"; +import { Widget } from "../4.widget"; +import { _lazyCreateWidget, Providers } from "../5.inject"; +import { shortcut } from "../decorator"; +import { pixFormat, Events } from "../constant"; + /** * 布局容器类 - * @class BI.Layout - * @extends BI.Widget * * @cfg {JSON} options 配置属性 * @cfg {Boolean} [options.scrollable=false] 子组件超出容器边界之后是否会出现滚动条 * @cfg {Boolean} [options.scrollx=false] 子组件超出容器边界之后是否会出现横向滚动条 * @cfg {Boolean} [options.scrolly=false] 子组件超出容器边界之后是否会出现纵向滚动条 */ -BI.Layout = BI.inherit(BI.Widget, { - props: function () { +@shortcut() +export class Layout extends Widget { + static xtype = "bi.layout"; + + props() { return { scrollable: null, // true, false, null scrollx: false, // true, false @@ -18,93 +25,97 @@ BI.Layout = BI.inherit(BI.Widget, { innerHgap: 0, innerVgap: 0, }; - }, + } - render: function () { - var self = this, o = this.options; + render() { + const o = this.options; this._init4Margin(); this._init4Scroll(); - if (BI.isFunction(o.columnSize)) { - var columnSizeFn = o.columnSize; - o.columnSize = this.__watch(columnSizeFn, function (context, newValue) { + if (isFunction(o.columnSize)) { + const columnSizeFn = o.columnSize; + o.columnSize = this.__watch(columnSizeFn, (context, newValue) => { o.columnSize = newValue; - self.resize(); + this.resize(); }); } - if (BI.isFunction(o.rowSize)) { - var rowSizeFn = o.rowSize; - o.rowSize = this.__watch(rowSizeFn, function (context, newValue) { + if (isFunction(o.rowSize)) { + const rowSizeFn = o.rowSize; + o.rowSize = this.__watch(rowSizeFn, (context, newValue) => { o.rowSize = newValue; - self.resize(); + this.resize(); }); } - }, + } - _init4Margin: function () { + _init4Margin() { if (this.options.top) { - this.element.css("top", BI.pixFormat(this.options.top)); + this.element.css("top", pixFormat(this.options.top)); } if (this.options.left) { - this.element.css("left", BI.pixFormat(this.options.left)); + this.element.css("left", pixFormat(this.options.left)); } if (this.options.bottom) { - this.element.css("bottom", BI.pixFormat(this.options.bottom)); + this.element.css("bottom", pixFormat(this.options.bottom)); } if (this.options.right) { - this.element.css("right", BI.pixFormat(this.options.right)); + this.element.css("right", pixFormat(this.options.right)); } - }, + } - _init4Scroll: function () { + _init4Scroll() { switch (this.options.scrollable) { - case true: - case "xy": - this.element.css("overflow", "auto"); - return; - case false: - this.element.css("overflow", "hidden"); - return; - case "x": - this.element.css({ - "overflow-x": "auto", - "overflow-y": "hidden" - }); - return; - case "y": - this.element.css({ - "overflow-x": "hidden", - "overflow-y": "auto" - }); - return; - default : - break; + case true: + case "xy": + this.element.css("overflow", "auto"); + + return; + case false: + this.element.css("overflow", "hidden"); + + return; + case "x": + this.element.css({ + "overflow-x": "auto", + "overflow-y": "hidden", + }); + + return; + case "y": + this.element.css({ + "overflow-x": "hidden", + "overflow-y": "auto", + }); + + return; + default : + break; } if (this.options.scrollx) { this.element.css({ "overflow-x": "auto", - "overflow-y": "hidden" + "overflow-y": "hidden", }); + return; } if (this.options.scrolly) { this.element.css({ "overflow-x": "hidden", - "overflow-y": "auto" + "overflow-y": "auto", }); } - }, + } - appendFragment: function (frag) { + appendFragment(frag) { this.element.append(frag); - }, - - _mountChildren: function () { - var self = this; - var frag = BI.Widget._renderEngine.createFragment(); - var hasChild = false; - for (var key in this._children) { - var child = this._children[key]; - if (child.element !== self.element) { + } + + _mountChildren() { + const frag = Widget._renderEngine.createFragment(); + let hasChild = false; + for (const key in this._children) { + const child = this._children[key]; + if (child.element !== this.element) { frag.appendChild(child.element[0]); hasChild = true; } @@ -112,24 +123,24 @@ BI.Layout = BI.inherit(BI.Widget, { if (hasChild === true) { this.appendFragment(frag); } - }, + } - _getChildName: function (index) { - return "" + index; - }, + _getChildName(index) { + return `${index}`; + } - _addElement: function (i, item, context, widget) { - var self = this, w; + _addElement(i, item, context, widget) { + let w; if (widget) { return widget; } if (!this.hasWidget(this._getChildName(i))) { - w = BI._lazyCreateWidget(item, context); - w.on(BI.Events.DESTROY, function () { - BI.each(self._children, function (name, child) { + w = _lazyCreateWidget(item, context); + w.on(Events.DESTROY, () => { + each(this._children, (name, child) => { if (child === w) { - delete self._children[name]; - self.removeItemAt(name | 0); + delete this._children[name]; + this.removeItemAt(name | 0); } }); }); @@ -137,73 +148,74 @@ BI.Layout = BI.inherit(BI.Widget, { } else { w = this.getWidgetByName(this._getChildName(i)); } + return w; - }, + } - _newElement: function (i, item, context) { - var self = this; - var w = BI._lazyCreateWidget(item, context); - w.on(BI.Events.DESTROY, function () { - BI.each(self._children, function (name, child) { + _newElement(i, item, context) { + const w = _lazyCreateWidget(item, context); + w.on(Events.DESTROY, () => { + each(this._children, (name, child) => { if (child === w) { - delete self._children[name]; - self.removeItemAt(name | 0); + delete this._children[name]; + this.removeItemAt(name | 0); } }); }); + return this._addElement(i, item, context, w); - }, + } - _getOptions: function (item) { - if (item instanceof BI.Widget) { + _getOptions(item) { + if (item instanceof Widget) { item = item.options; } - item = BI.stripEL(item); - if (item instanceof BI.Widget) { + item = stripEL(item); + if (item instanceof Widget) { item = item.options; } + return item; - }, - - _compare: function (item1, item2) { - var self = this; - return eq(item1, item2); + } + _compare(item1, item2) { // 不比较函数 - function eq (a, b, aStack, bStack) { + const eq = (a, b, aStack, bStack) => { if (a === b) { return a !== 0 || 1 / a === 1 / b; } - if (a == null || b == null) { + if (isNull(a) || isNull(b)) { return a === b; } - var className = Object.prototype.toString.call(a); + const className = Object.prototype.toString.call(a); switch (className) { - case "[object RegExp]": - case "[object String]": - return "" + a === "" + b; - case "[object Number]": - if (+a !== +a) { - return +b !== +b; - } - return +a === 0 ? 1 / +a === 1 / b : +a === +b; - case "[object Date]": - case "[object Boolean]": - return +a === +b; + case "[object RegExp]": + case "[object String]": + return `${a}` === `${b}`; + case "[object Number]": + if (+a !== +a) { + return +b !== +b; + } + + return +a === 0 ? 1 / +a === 1 / b : +a === +b; + case "[object Date]": + case "[object Boolean]": + return +a === +b; + default: } - var areArrays = className === "[object Array]"; + const areArrays = className === "[object Array]"; if (!areArrays) { - if (BI.isFunction(a) && BI.isFunction(b)) { + if (isFunction(a) && isFunction(b)) { return true; } - a = self._getOptions(a); - b = self._getOptions(b); + a = this._getOptions(a); + b = this._getOptions(b); } aStack = aStack || []; bStack = bStack || []; - var length = aStack.length; + let length = aStack.length; while (length--) { if (aStack[length] === a) { return bStack[length] === b; @@ -224,115 +236,126 @@ BI.Layout = BI.inherit(BI.Widget, { } } } else { - var keys = BI._.keys(a), key; - length = keys.length; - if (BI._.keys(b).length !== length) { + const aKeys = keys(a); + let key; + length = aKeys.length; + if (keys(b).length !== length) { return false; } while (length--) { - key = keys[length]; - if (!(BI._.has(b, key) && eq(a[key], b[key], aStack, bStack))) { + key = aKeys[length]; + if (!(has(b, key) && eq(a[key], b[key], aStack, bStack))) { return false; } } } aStack.pop(); bStack.pop(); + return true; - } - }, + }; + + return eq(item1, item2); + } - _getWrapper: function () { + _getWrapper() { return this.element; - }, + } // 不依赖于this.options.items进行更新 - _updateItemAt: function (oldIndex, newIndex, item) { - var del = this._children[this._getChildName(oldIndex)]; - var w = this._newElement(newIndex, item); + _updateItemAt(oldIndex, newIndex, item) { + const del = this._children[this._getChildName(oldIndex)]; + const w = this._newElement(newIndex, item); // 需要有个地方临时存一下新建的组件，否则如果直接使用newIndex的话，newIndex位置的元素可能会被用到 - this._children[this._getChildName(newIndex) + "-temp"] = w; - var nextSibling = del.element.next(); + this._children[`${this._getChildName(newIndex)}-temp`] = w; + const nextSibling = del.element.next(); if (nextSibling.length > 0) { - BI.Widget._renderEngine.createElement(nextSibling).before(w.element); + Widget._renderEngine.createElement(nextSibling).before(w.element); } else { w.element.appendTo(this._getWrapper()); } del._destroy(); w._mount(); + return true; - }, + } - _addItemAt: function (index, item) { - for (var i = this.options.items.length; i > index; i--) { + _addItemAt(index, item) { + for (let i = this.options.items.length; i > index; i--) { this._children[this._getChildName(i)] = this._children[this._getChildName(i - 1)]; } delete this._children[this._getChildName(index)]; this.options.items.splice(index, 0, item); - }, + } - _removeItemAt: function (index) { - for (var i = index; i < this.options.items.length - 1; i++) { + _removeItemAt(index) { + for (let i = index; i < this.options.items.length - 1; i++) { this._children[this._getChildName(i)] = this._children[this._getChildName(i + 1)]; } delete this._children[this._getChildName(this.options.items.length - 1)]; this.options.items.splice(index, 1); - }, + } - _clearGap: function (w) { + _clearGap(w) { w.element.css({ "margin-top": "", "margin-bottom": "", "margin-left": "", - "margin-right": "" + "margin-right": "", }); - }, + } - _optimiseGap: function (gap) { - return (gap > 0 && gap < 1) ? (gap * 100).toFixed(1) + "%" : BI.pixFormat(gap); - }, + _optimiseGap(gap) { + return (gap > 0 && gap < 1) ? `${(gap * 100).toFixed(1)}%` : pixFormat(gap); + } - _optimiseItemLgap: function (item) { - if (BI.Providers.getProvider("bi.provider.system").getLayoutOptimize()) { + _optimiseItemLgap(item) { + if (Providers.getProvider("bi.provider.system").getLayoutOptimize()) { return ((!item.type && item.el) ? ((item._lgap || 0) + (item.lgap || 0)) : item._lgap) || 0; } + return (item._lgap || 0) + (item.lgap || 0); - }, - _optimiseItemRgap: function (item) { - if (BI.Providers.getProvider("bi.provider.system").getLayoutOptimize()) { + } + _optimiseItemRgap(item) { + if (Providers.getProvider("bi.provider.system").getLayoutOptimize()) { return ((!item.type && item.el) ? ((item._rgap || 0) + (item.rgap || 0)) : item._rgap) || 0; } + return (item._rgap || 0) + (item.rgap || 0); - }, - _optimiseItemTgap: function (item) { - if (BI.Providers.getProvider("bi.provider.system").getLayoutOptimize()) { + } + _optimiseItemTgap(item) { + if (Providers.getProvider("bi.provider.system").getLayoutOptimize()) { return ((!item.type && item.el) ? ((item._tgap || 0) + (item.tgap || 0)) : item._tgap) || 0; } + return (item._tgap || 0) + (item.tgap || 0); - }, - _optimiseItemBgap: function (item) { - if (BI.Providers.getProvider("bi.provider.system").getLayoutOptimize()) { + } + _optimiseItemBgap(item) { + if (Providers.getProvider("bi.provider.system").getLayoutOptimize()) { return ((!item.type && item.el) ? ((item._bgap || 0) + (item.bgap || 0)) : item._bgap) || 0; } + return (item._bgap || 0) + (item.bgap || 0); - }, - _optimiseItemHgap: function (item) { - if (BI.Providers.getProvider("bi.provider.system").getLayoutOptimize()) { + } + _optimiseItemHgap(item) { + if (Providers.getProvider("bi.provider.system").getLayoutOptimize()) { return ((!item.type && item.el) ? ((item._hgap || 0) + (item.hgap || 0)) : item._hgap) || 0; } + return (item._hgap || 0) + (item.hgap || 0); - }, - _optimiseItemVgap: function (item) { - if (BI.Providers.getProvider("bi.provider.system").getLayoutOptimize()) { + } + _optimiseItemVgap(item) { + if (Providers.getProvider("bi.provider.system").getLayoutOptimize()) { return ((!item.type && item.el) ? ((item._vgap || 0) + (item.vgap || 0)) : item._vgap) || 0; } + return (item._vgap || 0) + (item.vgap || 0); - }, + } - _handleGap: function (w, item, hIndex, vIndex) { - var o = this.options; - var innerLgap, innerRgap, innerTgap, innerBgap; - if (BI.isNull(vIndex)) { + _handleGap(w, item, hIndex, vIndex) { + const o = this.options; + let innerLgap, innerRgap, innerTgap, innerBgap; + if (isNull(vIndex)) { innerTgap = innerBgap = o.innerVgap; innerLgap = hIndex === 0 ? o.innerHgap : 0; innerRgap = hIndex === o.items.length - 1 ? o.innerHgap : 0; @@ -342,83 +365,83 @@ BI.Layout = BI.inherit(BI.Widget, { innerBgap = vIndex === o.items.length - 1 ? o.innerVgap : 0; } if (o.vgap + o.tgap + innerTgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) { - var top = ((BI.isNull(vIndex) || vIndex === 0) ? o.vgap : 0) + o.tgap + innerTgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item); + const top = ((isNull(vIndex) || vIndex === 0) ? o.vgap : 0) + o.tgap + innerTgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item); w.element.css({ - "margin-top": this._optimiseGap(top) + "margin-top": this._optimiseGap(top), }); } if (o.hgap + o.lgap + innerLgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) { - var left = ((BI.isNull(hIndex) || hIndex === 0) ? o.hgap : 0) + o.lgap + innerLgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item); + const left = ((isNull(hIndex) || hIndex === 0) ? o.hgap : 0) + o.lgap + innerLgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item); w.element.css({ - "margin-left": this._optimiseGap(left) + "margin-left": this._optimiseGap(left), }); } if (o.hgap + o.rgap + innerRgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) { - var right = o.hgap + o.rgap + innerRgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item); + const right = o.hgap + o.rgap + innerRgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item); w.element.css({ - "margin-right": this._optimiseGap(right) + "margin-right": this._optimiseGap(right), }); } if (o.vgap + o.bgap + innerBgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) { - var bottom = o.vgap + o.bgap + innerBgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item); + const bottom = o.vgap + o.bgap + innerBgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item); w.element.css({ - "margin-bottom": this._optimiseGap(bottom) + "margin-bottom": this._optimiseGap(bottom), }); } - }, + } // 横向换纵向 - _handleReverseGap: function (w, item, index) { - var o = this.options; - var innerLgap, innerRgap, innerTgap, innerBgap; - innerLgap = innerRgap = o.innerHgap; - innerTgap = index === 0 ? o.innerVgap : 0; - innerBgap = index === o.items.length - 1 ? o.innerVgap : 0; + _handleReverseGap(w, item, index) { + const o = this.options; + const innerLgap = o.innerHgap; + const innerRgap = o.innerHgap; + const innerTgap = index === 0 ? o.innerVgap : 0; + const innerBgap = index === o.items.length - 1 ? o.innerVgap : 0; if (o.vgap + o.tgap + innerTgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) { - var top = (index === 0 ? o.vgap : 0) + (index === 0 ? o.tgap : 0) + innerTgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item); + const top = (index === 0 ? o.vgap : 0) + (index === 0 ? o.tgap : 0) + innerTgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item); w.element.css({ - "margin-top": this._optimiseGap(top) + "margin-top": this._optimiseGap(top), }); } if (o.hgap + o.lgap + innerLgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) { - var left = o.hgap + o.lgap + innerLgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item); + const left = o.hgap + o.lgap + innerLgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item); w.element.css({ - "margin-left": this._optimiseGap(left) + "margin-left": this._optimiseGap(left), }); } if (o.hgap + o.rgap + innerRgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) { - var right = o.hgap + o.rgap + innerRgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item); + const right = o.hgap + o.rgap + innerRgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item); w.element.css({ - "margin-right": this._optimiseGap(right) + "margin-right": this._optimiseGap(right), }); } // 这里的代码是关键 if (o.vgap + o.hgap + o.bgap + innerBgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) { - var bottom = (index === o.items.length - 1 ? o.vgap : o.hgap) + (index === o.items.length - 1 ? o.bgap : 0) + innerBgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item); + const bottom = (index === o.items.length - 1 ? o.vgap : o.hgap) + (index === o.items.length - 1 ? o.bgap : 0) + innerBgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item); w.element.css({ - "margin-bottom": this._optimiseGap(bottom) + "margin-bottom": this._optimiseGap(bottom), }); } - }, + } /** * 添加一个子组件到容器中 - * @param {JSON/BI.Widget} item 子组件 + * @param {JSON/Widget} item 子组件 */ - addItem: function (item) { + addItem(item) { return this.addItemAt(this.options.items.length, item); - }, + } - prependItem: function (item) { + prependItem(item) { return this.addItemAt(0, item); - }, + } - addItemAt: function (index, item) { + addItemAt(index, item) { if (index < 0 || index > this.options.items.length) { return; } this._addItemAt(index, item); - var w = this._addElement(index, item); + const w = this._addElement(index, item); // addItemAt 还是用之前的找上个兄弟节点向后插入的方式 if (index > 0) { this._children[this._getChildName(index - 1)].element.after(w.element); @@ -426,16 +449,17 @@ BI.Layout = BI.inherit(BI.Widget, { w.element.prependTo(this._getWrapper()); } w._mount(); + return w; - }, - - removeItemAt: function (indexes) { - indexes = BI.isArray(indexes) ? indexes : [indexes]; - var deleted = []; - var newItems = [], newChildren = {}; - for (var i = 0, len = this.options.items.length; i < len; i++) { - var child = this._children[this._getChildName(i)]; - if (BI.contains(indexes, i)) { + } + + removeItemAt(indexes) { + indexes = isArray(indexes) ? indexes : [indexes]; + const deleted = []; + const newItems = [], newChildren = {}; + for (let i = 0, len = this.options.items.length; i < len; i++) { + const child = this._children[this._getChildName(i)]; + if (contains(indexes, i)) { child && deleted.push(child); } else { newChildren[this._getChildName(newItems.length)] = child; @@ -444,45 +468,46 @@ BI.Layout = BI.inherit(BI.Widget, { } this.options.items = newItems; this._children = newChildren; - BI.each(deleted, function (i, c) { + each(deleted, (i, c) => { c._destroy(); }); - }, + } - shouldUpdateItem: function (index, item) { - var child = this._children[this._getChildName(index)]; + shouldUpdateItem(index, item) { + const child = this._children[this._getChildName(index)]; if (!child || !child.shouldUpdate) { return null; } + return child.shouldUpdate(this._getOptions(item)); - }, - - addItems: function (items, context) { - var self = this, o = this.options; - var fragment = BI.Widget._renderEngine.createFragment(); - var added = []; - BI.each(items, function (i, item) { - var w = self._addElement(o.items.length, item, context); - self._children[self._getChildName(o.items.length)] = w; + } + + addItems(items, context) { + const o = this.options; + const fragment = Widget._renderEngine.createFragment(); + const added = []; + each(items, (i, item) => { + const w = this._addElement(o.items.length, item, context); + this._children[this._getChildName(o.items.length)] = w; o.items.push(item); added.push(w); fragment.appendChild(w.element[0]); }); if (this._isMounted) { this._getWrapper().append(fragment); - BI.each(added, function (i, w) { + each(added, (i, w) => { w._mount(); }); } - }, + } - prependItems: function (items, context) { + prependItems(items, context) { items = items || []; - var fragment = BI.Widget._renderEngine.createFragment(); - var added = []; - for (var i = items.length - 1; i >= 0; i--) { + const fragment = Widget._renderEngine.createFragment(); + const added = []; + for (let i = items.length - 1; i >= 0; i--) { this._addItemAt(0, items[i]); - var w = this._addElement(0, items[i], context); + const w = this._addElement(0, items[i], context); this._children[this._getChildName(0)] = w; this.options.items.unshift(items[i]); added.push(w); @@ -490,47 +515,48 @@ BI.Layout = BI.inherit(BI.Widget, { } if (this._isMounted) { this._getWrapper().prepend(fragment); - BI.each(added, function (i, w) { + each(added, (i, w) => { w._mount(); }); } - }, + } - getValue: function () { - var self = this, value = [], child; - BI.each(this.options.items, function (i) { - if (child = self._children[self._getChildName(i)]) { - var v = child.getValue(); - v = BI.isArray(v) ? v : [v]; + getValue() { + let value = [], child; + each(this.options.items, i => { + child = this._children[this._getChildName(i)]; + if (child) { + let v = child.getValue(); + v = isArray(v) ? v : [v]; value = value.concat(v); } }); + return value; - }, + } - setValue: function (v) { - var self = this, child; - BI.each(this.options.items, function (i) { - if (child = self._children[self._getChildName(i)]) { - child.setValue(v); - } + setValue(v) { + let child; + each(this.options.items, i => { + child = this._children[this._getChildName(i)]; + child && child.setValue(v); }); - }, + } - setText: function (v) { - var self = this, child; - BI.each(this.options.items, function (i) { - if (child = self._children[self._getChildName(i)]) { - child.setText(v); - } + setText(v) { + let child; + each(this.options.items, i => { + child = this._children[this._getChildName(i)]; + child && child.setText(v); }); - }, + } - patchItem: function (oldVnode, vnode, oldIndex, newIndex) { - var shouldUpdate = this.shouldUpdateItem(oldIndex, vnode); - var child = this._children[this._getChildName(oldIndex)]; + patchItem(oldVnode, vnode, oldIndex, newIndex) { + const shouldUpdate = this.shouldUpdateItem(oldIndex, vnode); + const child = this._children[this._getChildName(oldIndex)]; if (shouldUpdate) { - this._children[this._getChildName(newIndex) + "-temp"] = child; + this._children[`${this._getChildName(newIndex)}-temp`] = child; + return child._update(this._getOptions(vnode), shouldUpdate); } if (shouldUpdate === null && !this._compare(oldVnode, vnode)) { @@ -539,69 +565,68 @@ BI.Layout = BI.inherit(BI.Widget, { // } return this._updateItemAt(oldIndex, newIndex, vnode); } - }, - - updateChildren: function (oldCh, newCh, context) { - var self = this; - var oldStartIdx = 0, newStartIdx = 0; - var oldEndIdx = oldCh.length - 1; - var oldStartVnode = oldCh[0]; - var oldEndVnode = oldCh[oldEndIdx]; - var newEndIdx = newCh.length - 1; - var newStartVnode = newCh[0]; - var newEndVnode = newCh[newEndIdx]; - var before; - var updated; - var children = {}; - BI.each(oldCh, function (i, child) { - child = self._getOptions(child); - var key = child.key == null ? i : child.key; - if (BI.isKey(key)) { - children[key] = self._children[self._getChildName(i)]; + } + + updateChildren(oldCh, newCh, context) { + let oldStartIdx = 0, newStartIdx = 0; + let oldEndIdx = oldCh.length - 1; + let oldStartVnode = oldCh[0]; + let oldEndVnode = oldCh[oldEndIdx]; + let newEndIdx = newCh.length - 1; + let newStartVnode = newCh[0]; + let newEndVnode = newCh[newEndIdx]; + let before; + let updated; + const children = {}; + each(oldCh, (i, child) => { + child = this._getOptions(child); + const key = isNull(child.key) ? i : child.key; + if (isKey(key)) { + children[key] = this._children[this._getChildName(i)]; } }); while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { - if (BI.isNull(oldStartVnode)) { + if (isNull(oldStartVnode)) { oldStartVnode = oldCh[++oldStartIdx]; - } else if (BI.isNull(oldEndVnode)) { + } else if (isNull(oldEndVnode)) { oldEndVnode = oldCh[--oldEndIdx]; } else if (sameVnode(oldStartVnode, newStartVnode, oldStartIdx, newStartIdx)) { - var willUpdate = this.patchItem(oldStartVnode, newStartVnode, oldStartIdx, newStartIdx); + const willUpdate = this.patchItem(oldStartVnode, newStartVnode, oldStartIdx, newStartIdx); updated = willUpdate || updated; - children[oldStartVnode.key == null ? oldStartIdx : oldStartVnode.key] = willUpdate ? this._children[this._getChildName(newStartIdx) + "-temp"] : this._children[this._getChildName(oldStartIdx)]; + children[isNull(oldStartVnode.key) ? oldStartIdx : oldStartVnode.key] = willUpdate ? this._children[`${this._getChildName(newStartIdx)}-temp`] : this._children[this._getChildName(oldStartIdx)]; oldStartVnode = oldCh[++oldStartIdx]; newStartVnode = newCh[++newStartIdx]; } else if (sameVnode(oldEndVnode, newEndVnode, oldEndIdx, newEndIdx)) { - var willUpdate = this.patchItem(oldEndVnode, newEndVnode, oldEndIdx, newEndIdx); + const willUpdate = this.patchItem(oldEndVnode, newEndVnode, oldEndIdx, newEndIdx); updated = willUpdate || updated; - children[oldEndVnode.key == null ? oldEndIdx : oldEndVnode.key] = willUpdate ? this._children[this._getChildName(newEndIdx) + "-temp"] : this._children[this._getChildName(oldEndIdx)]; + children[isNull(oldEndVnode.key) ? oldEndIdx : oldEndVnode.key] = willUpdate ? this._children[`${this._getChildName(newEndIdx)}-temp`] : this._children[this._getChildName(oldEndIdx)]; oldEndVnode = oldCh[--oldEndIdx]; newEndVnode = newCh[--newEndIdx]; } else if (sameVnode(oldStartVnode, newEndVnode)) { - var willUpdate = this.patchItem(oldStartVnode, newEndVnode, oldStartIdx, newStartIdx); + const willUpdate = this.patchItem(oldStartVnode, newEndVnode, oldStartIdx, newStartIdx); updated = willUpdate || updated; - children[oldStartVnode.key == null ? oldStartIdx : oldStartVnode.key] = willUpdate ? this._children[this._getChildName(newStartIdx) + "-temp"] : this._children[this._getChildName(oldStartIdx)]; + children[isNull(oldStartVnode.key) ? oldStartIdx : oldStartVnode.key] = willUpdate ? this._children[`${this._getChildName(newStartIdx)}-temp`] : this._children[this._getChildName(oldStartIdx)]; insertBefore(oldStartVnode, oldEndVnode, true); oldStartVnode = oldCh[++oldStartIdx]; newEndVnode = newCh[--newEndIdx]; } else if (sameVnode(oldEndVnode, newStartVnode)) { - var willUpdate = this.patchItem(oldEndVnode, newStartVnode, oldEndIdx, newEndIdx); + const willUpdate = this.patchItem(oldEndVnode, newStartVnode, oldEndIdx, newEndIdx); updated = willUpdate || updated; - children[oldEndVnode.key == null ? oldEndIdx : oldEndVnode.key] = willUpdate ? this._children[this._getChildName(newEndIdx) + "-temp"] : this._children[this._getChildName(oldEndIdx)]; + children[isNull(oldEndVnode) ? oldEndIdx : oldEndVnode.key] = willUpdate ? this._children[`${this._getChildName(newEndIdx)}-temp`] : this._children[this._getChildName(oldEndIdx)]; insertBefore(oldEndVnode, oldStartVnode); oldEndVnode = oldCh[--oldEndIdx]; newStartVnode = newCh[++newStartIdx]; } else { - var sameOldVnode = findOldVnode(oldCh, newStartVnode, oldStartIdx, oldEndIdx); - if (BI.isNull(sameOldVnode[0])) { // 不存在就把新的放到左边 - var node = addNode(newStartVnode, newStartIdx, context); + const sameOldVnode = findOldVnode(oldCh, newStartVnode, oldStartIdx, oldEndIdx); + if (isNull(sameOldVnode[0])) { // 不存在就把新的放到左边 + const node = addNode(newStartVnode, newStartIdx, context); insertBefore(node, oldStartVnode); - } else { // 如果新节点在旧节点区间中存在就复用一下 - var sameOldIndex = sameOldVnode[1]; - var willUpdate = self.patchItem(sameOldVnode[0], newStartVnode, sameOldIndex, newStartIdx); + } else { // 如果新节点在旧节点区间中存在就复用一下 + const sameOldIndex = sameOldVnode[1]; + const willUpdate = this.patchItem(sameOldVnode[0], newStartVnode, sameOldIndex, newStartIdx); updated = willUpdate || updated; - children[sameOldVnode[0].key == null ? newStartIdx : sameOldVnode[0].key] = willUpdate ? this._children[this._getChildName(newStartIdx) + "-temp"] : self._children[self._getChildName(sameOldIndex)]; + children[isNull(sameOldVnode[0].key) ? newStartIdx : sameOldVnode[0].key] = willUpdate ? this._children[`${this._getChildName(newStartIdx)}-temp`] : this._children[this._getChildName(sameOldIndex)]; oldCh[sameOldIndex] = undefined; insertBefore(sameOldVnode[0], oldStartVnode); } @@ -609,63 +634,65 @@ BI.Layout = BI.inherit(BI.Widget, { } } if (oldStartIdx > oldEndIdx) { - before = BI.isNull(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1]; + before = isNull(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1]; addVnodes(before, newCh, newStartIdx, newEndIdx, context); } else if (newStartIdx > newEndIdx) { removeVnodes(oldCh, oldStartIdx, oldEndIdx); } this._children = {}; - BI.each(newCh, function (i, child) { - var node = self._getOptions(child); - var key = node.key == null ? i : node.key; - children[key]._setParent && children[key]._setParent(self); + each(newCh, (i, child) => { + const node = this._getOptions(child); + const key = isNull(node.key) ? i : node.key; + children[key]._setParent && children[key]._setParent(this); children[key]._mount(); - self._children[self._getChildName(i)] = children[key]; + this._children[this._getChildName(i)] = children[key]; }); - function sameVnode (vnode1, vnode2, oldIndex, newIndex) { - vnode1 = self._getOptions(vnode1); - vnode2 = self._getOptions(vnode2); - if (BI.isKey(vnode1.key)) { + const sameVnode = (vnode1, vnode2, oldIndex, newIndex) => { + vnode1 = this._getOptions(vnode1); + vnode2 = this._getOptions(vnode2); + if (isKey(vnode1.key)) { return vnode1.key === vnode2.key; } if (oldIndex >= 0) { return oldIndex === newIndex; } - } + }; - function addNode (vnode, index, context) { - var opt = self._getOptions(vnode); - var key = opt.key == null ? index : opt.key; - return children[key] = self._newElement(index, vnode, context); - } + const addNode = (vnode, index, context) => { + const opt = this._getOptions(vnode); + const key = isNull(opt.key) ? index : opt.key; + children[key] = this._newElement(index, vnode, context); + + return children[key]; + }; - function addVnodes (before, vnodes, startIdx, endIdx, context) { + const addVnodes = (before, vnodes, startIdx, endIdx, context) => { for (; startIdx <= endIdx; ++startIdx) { - var node = addNode(vnodes[startIdx], startIdx, context); + const node = addNode(vnodes[startIdx], startIdx, context); insertBefore(node, before, false, startIdx); } - } + }; - function removeVnodes (vnodes, startIdx, endIdx) { + const removeVnodes = (vnodes, startIdx, endIdx) => { for (; startIdx <= endIdx; ++startIdx) { - var ch = vnodes[startIdx]; - if (BI.isNotNull(ch)) { - var node = self._getOptions(ch); - var key = node.key == null ? startIdx : node.key; + const ch = vnodes[startIdx]; + if (isNotNull(ch)) { + const node = this._getOptions(ch); + const key = isNull(node.key) ? startIdx : node.key; children[key]._destroy(); } } - } + }; - function insertBefore (insert, before, isNext, index) { - insert = self._getOptions(insert); - before = before && self._getOptions(before); - var insertKey = BI.isKey(insert.key) ? insert.key : index; + const insertBefore = (insert, before, isNext, index) => { + insert = this._getOptions(insert); + before = before && this._getOptions(before); + const insertKey = isKey(insert.key) ? insert.key : index; if (before && children[before.key]) { - var beforeKey = BI.isKey(before.key) ? before.key : index; - var next; + const beforeKey = isKey(before.key) ? before.key : index; + let next; if (isNext) { next = children[beforeKey].element.next(); } else { @@ -674,30 +701,31 @@ BI.Layout = BI.inherit(BI.Widget, { if (next.length > 0) { next.before(children[insertKey].element); } else { - self._getWrapper().append(children[insertKey].element); + this._getWrapper().append(children[insertKey].element); } } else { - self._getWrapper().append(children[insertKey].element); + this._getWrapper().append(children[insertKey].element); } - } + }; - function findOldVnode (vnodes, vNode, beginIdx, endIdx) { - var i, found, findIndex; + const findOldVnode = (vnodes, vNode, beginIdx, endIdx) => { + let i, found, findIndex; for (i = beginIdx; i <= endIdx; ++i) { if (vnodes[i] && sameVnode(vnodes[i], vNode)) { found = vnodes[i]; findIndex = i; } } + return [found, findIndex]; - } + }; return updated; - }, + } - forceUpdate: function (opt) { + forceUpdate(opt) { if (this._isMounted) { - BI.each(this._children, function (i, c) { + each(this._children, (i, c) => { c.destroy(); }); this._children = {}; @@ -706,29 +734,27 @@ BI.Layout = BI.inherit(BI.Widget, { this.options.items = opt.items; this.stroke(opt.items); this._mount(); - }, + } - update: function (opt) { - var o = this.options; - var items = opt.items || []; - var context = opt.context; - var oldItems = o.items; + update(opt) { + const o = this.options; + const items = opt.items || []; + const context = opt.context; + const oldItems = o.items; this.options.items = items; + return this.updateChildren(oldItems, items, context); - }, + } - stroke: function (items, options) { + stroke(items, options) { options = options || {}; - var self = this; - BI.each(items, function (i, item) { - if (item) { - self._addElement(i, item, options.context); - } + each(items, (i, item) => { + item && this._addElement(i, item, options.context); }); - }, + } - getRowColumnCls: function (rowIndex, colIndex, lastRowIndex, lastColIndex) { - var cls = ""; + getRowColumnCls(rowIndex, colIndex, lastRowIndex, lastColIndex) { + let cls = ""; if (rowIndex === 0) { cls += " first-row"; } else if (rowIndex === lastRowIndex) { @@ -739,17 +765,17 @@ BI.Layout = BI.inherit(BI.Widget, { } else if (colIndex === lastColIndex) { cls += " last-col"; } - BI.isOdd(rowIndex + 1) ? (cls += " odd-row") : (cls += " even-row"); - BI.isOdd(colIndex + 1) ? (cls += " odd-col") : (cls += " even-col"); + isOdd(rowIndex + 1) ? (cls += " odd-row") : (cls += " even-row"); + isOdd(colIndex + 1) ? (cls += " odd-col") : (cls += " even-col"); cls += " center-element"; return cls; - }, + } - removeWidget: function (nameOrWidget) { - var removeIndex, self = this; - if (BI.isWidget(nameOrWidget)) { - BI.each(this._children, function (name, child) { + removeWidget(nameOrWidget) { + let removeIndex; + if (isWidget(nameOrWidget)) { + each(this._children, (name, child) => { if (child === nameOrWidget) { removeIndex = name; } @@ -760,34 +786,34 @@ BI.Layout = BI.inherit(BI.Widget, { if (removeIndex) { this._removeItemAt(removeIndex | 0); } - }, + } - empty: function () { - BI.Layout.superclass.empty.apply(this, arguments); + empty() { + super.empty(...arguments); this.options.items = []; - }, + } - destroy: function () { - BI.Layout.superclass.destroy.apply(this, arguments); + destroy() { + super.destroy(...arguments); this.options.items = []; - }, + } - populate: function (items, options) { + populate(items, options) { items = items || []; options = options || {}; if (this._isMounted) { this.update({ - items: items, - context: options.context + items, + context: options.context, }); + return; } this.options.items = items; this.stroke(items, options); - }, + } - resize: function () { + resize() { this.stroke(this.options.items); } -}); -BI.shortcut("bi.layout", BI.Layout); +} diff --git a/src/core/wrapper/layout/adapt/absolute.center.js b/src/core/wrapper/layout/adapt/absolute.center.js index 14a122f00..126a9ec23 100644 --- a/src/core/wrapper/layout/adapt/absolute.center.js +++ b/src/core/wrapper/layout/adapt/absolute.center.js @@ -1,47 +1,54 @@ +import { shortcut } from "../../../decorator"; +import { Layout } from "../../layout"; +import { extend, isFunction } from "../../../2.base"; + /** * absolute实现的居中布局 - * @class BI.AbsoluteCenterLayout - * @extends BI.Layout + * @class AbsoluteCenterLayout + * @extends Layout */ -BI.AbsoluteCenterLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.AbsoluteCenterLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class AbsoluteCenterLayout extends Layout { + static xtype ="bi.absolute_center_adapt"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-abs-c-a", hgap: 0, lgap: 0, rgap: 0, vgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, + } - render: function () { - BI.AbsoluteCenterLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); + render() { + super.render(...arguments); + const o = this.options; + const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { + this.populate(newValue); }) : o.items; this.populate(items); - }, + } - _addElement: function (i, item) { - var o = this.options; - var w = BI.AbsoluteCenterLayout.superclass._addElement.apply(this, arguments); + _addElement(i, item) { + const o = this.options; + const w = super._addElement(...arguments); w.element.css({ position: "absolute", left: this._optimiseGap(o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item)), right: this._optimiseGap(o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item)), top: this._optimiseGap(o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item)), bottom: this._optimiseGap(o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item)), - margin: "auto" + margin: "auto", }); + return w; - }, + } - populate: function (items) { - BI.AbsoluteCenterLayout.superclass.populate.apply(this, arguments); + populate(...args) { + super.populate(...args); this._mount(); } -}); -BI.shortcut("bi.absolute_center_adapt", BI.AbsoluteCenterLayout); +} diff --git a/src/core/wrapper/layout/adapt/absolute.horizontal.js b/src/core/wrapper/layout/adapt/absolute.horizontal.js index 81bd4d05c..cedcfa334 100644 --- a/src/core/wrapper/layout/adapt/absolute.horizontal.js +++ b/src/core/wrapper/layout/adapt/absolute.horizontal.js @@ -1,26 +1,35 @@ +import { shortcut } from "../../../decorator"; +import { Layout } from "../../layout"; +import { extend } from "../../../2.base"; +import { HorizontalAlign } from "../../../constant"; + /** - * absolute实现的居中布局 - * @class BI.AbsoluteHorizontalLayout - * @extends BI.Layout + * absolute实现的水平布局 + * @class AbsoluteHorizontalLayout + * @extends Layout */ -BI.AbsoluteHorizontalLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.AbsoluteHorizontalLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class AbsoluteHorizontalLayout extends Layout { + static xtype = "bi.absolute_horizontal_adapt"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-abs-h-a", - horizontalAlign: BI.HorizontalAlign.Center, + horizontalAlign: HorizontalAlign.Center, rowSize: [], hgap: 0, lgap: 0, rgap: 0, vgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, + } - render: function () { - var self = this, o = this.options; - BI.AbsoluteHorizontalLayout.superclass.render.apply(this, arguments); + render() { + const o = this.options; + super.render(...arguments); + return { type: "bi.vtape", horizontalAlign: o.horizontalAlign, @@ -29,8 +38,8 @@ BI.AbsoluteHorizontalLayout = BI.inherit(BI.Layout, { scrollx: o.scrollx, scrolly: o.scrolly, scrollable: o.scrollable, - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, hgap: o.hgap, vgap: o.vgap, @@ -41,14 +50,13 @@ BI.AbsoluteHorizontalLayout = BI.inherit(BI.Layout, { innerHgap: o.innerHgap, innerVgap: o.innerVgap, }; - }, + } - resize: function () { + resize() { this.layout.resize(); - }, + } - populate: function (items) { - this.layout.populate.apply(this, arguments); + populate(...args) { + this.layout.populate(...args); } -}); -BI.shortcut("bi.absolute_horizontal_adapt", BI.AbsoluteHorizontalLayout); +} diff --git a/src/core/wrapper/layout/adapt/absolute.leftrightvertical.js b/src/core/wrapper/layout/adapt/absolute.leftrightvertical.js index 25d5aab94..c8e2bc533 100644 --- a/src/core/wrapper/layout/adapt/absolute.leftrightvertical.js +++ b/src/core/wrapper/layout/adapt/absolute.leftrightvertical.js @@ -1,8 +1,16 @@ -BI.AbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.AbsoluteLeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), { +import { shortcut } from "../../../decorator"; +import { Layout } from "../../layout"; +import { extend, isArray, each, map, stripEL } from "../../../2.base"; +import { VerticalAlign } from "../../../constant"; + +@shortcut() +export class AbsoluteLeftRightVerticalAdaptLayout extends Layout { + static xtype = "bi.absolute_left_right_vertical_adapt"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-abs-lr-v-a", - verticalAlign: BI.VerticalAlign.Middle, + verticalAlign: VerticalAlign.Middle, items: {}, llgap: 0, lrgap: 0, @@ -15,32 +23,34 @@ BI.AbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { rhgap: 0, rtgap: 0, rbgap: 0, - rvgap: 0 + rvgap: 0, }); - }, - render: function () { - var o = this.options, self = this; - BI.AbsoluteLeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments); + } + + render() { + const o = this.options; + super.render(...arguments); + return { type: "bi.htape", innerHgap: o.innerHgap, innerVgap: o.innerVgap, - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, verticalAlign: o.verticalAlign, items: this._formatItems(o.items), scrollx: o.scrollx, scrolly: o.scrolly, - scrollable: o.scrollable + scrollable: o.scrollable, }; - }, + } - _formatItems: function (items) { - var self = this, o = this.options; - var left, right; - if (BI.isArray(items)) { - BI.each(items, function (i, item) { + _formatItems(items) { + const o = this.options; + let left, right; + if (isArray(items)) { + each(items, (i, item) => { if (item.left) { left = item.left; } @@ -49,85 +59,92 @@ BI.AbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { } }); } - var leftItems = left || items.left || []; - var rightItems = right || items.right || []; - leftItems = BI.map(leftItems, function (i, item) { - var json = { - el: BI.stripEL(item), - width: item.width + let leftItems = left || items.left || []; + let rightItems = right || items.right || []; + leftItems = map(leftItems, (i, item) => { + const json = { + el: stripEL(item), + width: item.width, }; - if (o.lvgap + o.ltgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) !== 0) { - json.tgap = o.lvgap + o.ltgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item); + if (o.lvgap + o.ltgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) { + json.tgap = o.lvgap + o.ltgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item); } - if (o.lhgap + o.llgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) { - json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item); + if (o.lhgap + o.llgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) { + json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item); } - if (o.lhgap + o.lrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) { - json.rgap = o.lhgap + o.lrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item); + if (o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) { + json.rgap = o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item); } - if (o.lvgap + o.lbgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) !== 0) { - json.bgap = o.lvgap + o.lbgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item); + if (o.lvgap + o.lbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) { + json.bgap = o.lvgap + o.lbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item); } + return json; }); - rightItems = BI.map(rightItems, function (i, item) { - var json = { - el: BI.stripEL(item), - width: item.width + rightItems = map(rightItems, (i, item) => { + const json = { + el: stripEL(item), + width: item.width, }; - if (o.rvgap + o.rtgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) !== 0) { - json.tgap = o.rvgap + o.rtgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item); + if (o.rvgap + o.rtgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) { + json.tgap = o.rvgap + o.rtgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item); } - if (o.rhgap + o.rlgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) { - json.lgap = (i === 0 ? o.rhgap : 0) + o.rlgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item); + if (o.rhgap + o.rlgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) { + json.lgap = (i === 0 ? o.rhgap : 0) + o.rlgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item); } - if (o.rhgap + o.rrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) { - json.rgap = o.rhgap + o.rrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item); + if (o.rhgap + o.rrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) { + json.rgap = o.rhgap + o.rrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item); } - if (o.rvgap + o.rbgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) !== 0) { - json.bgap = o.rvgap + o.rbgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item); + if (o.rvgap + o.rbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) { + json.bgap = o.rvgap + o.rbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item); } + return json; }); + return leftItems.concat({}, rightItems); - }, + } - resize: function () { + resize() { this.layout.stroke(this._formatItems(this.options.items)); - }, + } - addItem: function () { + addItem() { // do nothing throw new Error("不能添加子组件"); - }, + } - populate: function (items) { + populate(items) { this.layout.populate(this._formatItems(items)); } -}); -BI.shortcut("bi.absolute_left_right_vertical_adapt", BI.AbsoluteLeftRightVerticalAdaptLayout); +} + +@shortcut() +export class AbsoluteRightVerticalAdaptLayout extends Layout { + static xtype = "bi.absolute_right_vertical_adapt"; -BI.AbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.AbsoluteRightVerticalAdaptLayout.superclass.props.apply(this, arguments), { + props () { + return extend(super.props(...arguments), { baseCls: "bi-abs-r-v-a", - verticalAlign: BI.VerticalAlign.Middle, + verticalAlign: VerticalAlign.Middle, items: [], lgap: 0, rgap: 0, hgap: 0, tgap: 0, bgap: 0, - vgap: 0 + vgap: 0, }); - }, - render: function () { - var o = this.options, self = this; - BI.AbsoluteRightVerticalAdaptLayout.superclass.render.apply(this, arguments); + } + + render () { + const o = this.options; + super.render(...arguments); + return { type: "bi.htape", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, verticalAlign: o.verticalAlign, items: [{}].concat(o.items), @@ -139,21 +156,20 @@ BI.AbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, { vgap: o.vgap, scrollx: o.scrollx, scrolly: o.scrolly, - scrollable: o.scrollable + scrollable: o.scrollable, }; - }, + } - resize: function () { + resize () { this.layout.stroke([{}].concat(this.options.items)); - }, + } - addItem: function () { + addItem () { // do nothing throw new Error("不能添加子组件"); - }, + } - populate: function (items) { + populate (items) { this.layout.populate([{}].concat(items)); } -}); -BI.shortcut("bi.absolute_right_vertical_adapt", BI.AbsoluteRightVerticalAdaptLayout); +} diff --git a/src/core/wrapper/layout/adapt/absolute.vertical.js b/src/core/wrapper/layout/adapt/absolute.vertical.js index 94a6e39fe..ea3f750a2 100644 --- a/src/core/wrapper/layout/adapt/absolute.vertical.js +++ b/src/core/wrapper/layout/adapt/absolute.vertical.js @@ -1,26 +1,35 @@ +import { shortcut } from "../../../decorator"; +import { Layout } from "../../layout"; +import { extend } from "../../../2.base"; +import { VerticalAlign } from "../../../constant"; + /** * absolute实现的居中布局 - * @class BI.AbsoluteVerticalLayout - * @extends BI.Layout + * @class AbsoluteVerticalLayout + * @extends Layout */ -BI.AbsoluteVerticalLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.AbsoluteVerticalLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class AbsoluteVerticalLayout extends Layout { + static xtype = "bi.absolute_vertical_adapt"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-abs-v-a", - verticalAlign: BI.VerticalAlign.Middle, + verticalAlign: VerticalAlign.Middle, columnSize: [], hgap: 0, lgap: 0, rgap: 0, vgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, + } - render: function () { - var self = this, o = this.options; - BI.AbsoluteVerticalLayout.superclass.render.apply(this, arguments); + render() { + const o = this.options; + super.render(...arguments); + return { type: "bi.htape", verticalAlign: o.verticalAlign, @@ -29,8 +38,8 @@ BI.AbsoluteVerticalLayout = BI.inherit(BI.Layout, { scrollx: o.scrollx, scrolly: o.scrolly, scrollable: o.scrollable, - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, hgap: o.hgap, vgap: o.vgap, @@ -41,14 +50,13 @@ BI.AbsoluteVerticalLayout = BI.inherit(BI.Layout, { innerHgap: o.innerHgap, innerVgap: o.innerVgap, }; - }, + } - resize: function () { + resize() { this.layout.resize(); - }, + } - populate: function (items) { - this.layout.populate.apply(this, arguments); + populate(...args) { + this.layout.populate(...args); } -}); -BI.shortcut("bi.absolute_vertical_adapt", BI.AbsoluteVerticalLayout); +} diff --git a/src/core/wrapper/layout/adapt/adapt.center.js b/src/core/wrapper/layout/adapt/adapt.center.js index fb088c5a9..446633caf 100644 --- a/src/core/wrapper/layout/adapt/adapt.center.js +++ b/src/core/wrapper/layout/adapt/adapt.center.js @@ -1,13 +1,21 @@ +import { shortcut } from "../../../decorator"; +import { Layout } from "../../layout"; +import { extend } from "../../../2.base"; +import { HorizontalAlign, VerticalAlign } from "../../../constant"; + /** * 自适应水平和垂直方向都居中容器 - * @class BI.CenterAdaptLayout - * @extends BI.Layout + * @class CenterAdaptLayout + * @extends Layout */ -BI.CenterAdaptLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.CenterAdaptLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class CenterAdaptLayout extends Layout { + static xtype = "bi.center_adapt"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-c-a", - horizontalAlign: BI.HorizontalAlign.Center, + horizontalAlign: HorizontalAlign.Center, columnSize: [], scrollx: false, hgap: 0, @@ -15,23 +23,25 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, { lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, - render: function () { - var o = this.options, self = this; - BI.CenterAdaptLayout.superclass.render.apply(this, arguments); + } + + render() { + const o = this.options; + super.render(...arguments); + return { type: "bi.horizontal", - verticalAlign: BI.VerticalAlign.Middle, + verticalAlign: VerticalAlign.Middle, horizontalAlign: o.horizontalAlign, columnSize: o.columnSize, scrollx: o.scrollx, scrolly: o.scrolly, scrollable: o.scrollable, items: o.items, - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, hgap: o.hgap, vgap: o.vgap, @@ -42,14 +52,13 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, { innerHgap: o.innerHgap, innerVgap: o.innerVgap, }; - }, + } - resize: function () { + resize() { this.layout.resize(); - }, + } - populate: function (items) { - this.layout.populate.apply(this, arguments); + populate(...args) { + this.layout.populate(...args); } -}); -BI.shortcut("bi.center_adapt", BI.CenterAdaptLayout); +} diff --git a/src/core/wrapper/layout/adapt/adapt.horizontal.js b/src/core/wrapper/layout/adapt/adapt.horizontal.js index 4d6fbae2a..4e44c6c19 100644 --- a/src/core/wrapper/layout/adapt/adapt.horizontal.js +++ b/src/core/wrapper/layout/adapt/adapt.horizontal.js @@ -1,8 +1,9 @@ +import { shortcut } from "../../../decorator"; + /** * 水平方向居中容器 - * @class BI.HorizontalAdaptLayout - * @extends BI.Layout */ -BI.HorizontalAdaptLayout = function () { -}; -BI.shortcut("bi.horizontal_adapt", BI.HorizontalAdaptLayout); +@shortcut() +export class HorizontalAdaptLayout { + static xtype = "bi.horizontal_adapt"; +} diff --git a/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js b/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js index cafc1dafb..5fd5e9a65 100644 --- a/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js +++ b/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js @@ -1,15 +1,23 @@ +import { shortcut } from "../../../decorator"; +import { Layout } from "../../layout"; +import { extend, isArray, each } from "../../../2.base"; +import { HorizontalAlign } from "../../../constant"; + /** * 左右分离，垂直方向居中容器 * items:{ left: [{el:{type:"bi.button"}}], right:[{el:{type:"bi.button"}}] } - * @class BI.LeftRightVerticalAdaptLayout - * @extends BI.Layout + * @class LeftRightVerticalAdaptLayout + * @extends Layout */ -BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.LeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class LeftRightVerticalAdaptLayout extends Layout { + static xtype = "bi.left_right_vertical_adapt"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-lr-v-a", items: {}, llgap: 0, @@ -23,14 +31,15 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { rhgap: 0, rtgap: 0, rbgap: 0, - rvgap: 0 + rvgap: 0, }); - }, - render: function () { - var o = this.options, self = this; - BI.LeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments); - var leftRight = this._getLeftRight(o.items); - var layoutArray = []; + } + + render() { + const o = this.options; + super.render(...arguments); + const leftRight = this._getLeftRight(o.items); + const layoutArray = []; if (leftRight.left || "left" in o.items) { layoutArray.push({ type: "bi.left", @@ -39,8 +48,8 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { items: [{ el: { type: "bi.vertical_adapt", - ref: function (_ref) { - self.left = _ref; + ref: _ref => { + this.left = _ref; }, height: "100%", items: leftRight.left || o.items.left, @@ -49,9 +58,9 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { rgap: o.lrgap, tgap: o.ltgap, bgap: o.lbgap, - vgap: o.lvgap - } - }] + vgap: o.lvgap, + }, + }], }); } if (leftRight.right || "right" in o.items) { @@ -62,8 +71,8 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { items: [{ el: { type: "bi.vertical_adapt", - ref: function (_ref) { - self.right = _ref; + ref: _ref => { + this.right = _ref; }, height: "100%", items: leftRight.right || o.items.right, @@ -72,18 +81,19 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { rgap: o.rrgap, tgap: o.rtgap, bgap: o.rbgap, - vgap: o.rvgap - } - }] + vgap: o.rvgap, + }, + }], }); } + return layoutArray; - }, + } - _getLeftRight: function (items) { - var left, right; - if (BI.isArray(items)) { - BI.each(items, function (i, item) { + _getLeftRight(items) { + let left, right; + if (isArray(items)) { + each(items, (i, item) => { if (item.left) { left = item.left; } @@ -92,35 +102,37 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { } }); } + return { - left: left, - right: right + left, + right, }; - }, + } - resize: function () { - var leftRight = this._getLeftRight(this.options.items); + resize() { + const leftRight = this._getLeftRight(this.options.items); this.left.stroke(leftRight.left || this.options.items.left); this.right.stroke(leftRight.right || this.options.items.right); - }, + } - addItem: function () { + addItem() { // do nothing throw new Error("不能添加子组件"); - }, + } - populate: function (items) { - var leftRight = this._getLeftRight(items); + populate(items) { + const leftRight = this._getLeftRight(items); this.left.populate(leftRight.left || items.left); this.right.populate(leftRight.right || items.right); } -}); -BI.shortcut("bi.left_right_vertical_adapt", BI.LeftRightVerticalAdaptLayout); +} +@shortcut() +export class LeftVerticalAdaptLayout extends Layout { + static xtype = "bi.left_vertical_adapt"; -BI.LeftVerticalAdaptLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.LeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), { + props() { + return extend(super.props(...arguments), { baseCls: "bi-l-v-a", items: [], columnSize: [], @@ -129,16 +141,18 @@ BI.LeftVerticalAdaptLayout = BI.inherit(BI.Layout, { hgap: 0, tgap: 0, bgap: 0, - vgap: 0 + vgap: 0, }); - }, - render: function () { - var o = this.options, self = this; - BI.LeftVerticalAdaptLayout.superclass.render.apply(this, arguments); + } + + render() { + const o = this.options; + super.render(...arguments); + return { type: "bi.vertical_adapt", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, items: o.items, columnSize: o.columnSize, @@ -152,28 +166,30 @@ BI.LeftVerticalAdaptLayout = BI.inherit(BI.Layout, { innerVgap: o.innerVgap, scrollx: o.scrollx, scrolly: o.scrolly, - scrollable: o.scrollable + scrollable: o.scrollable, }; - }, + } - resize: function () { + resize() { this.layout.resize(); - }, + } - addItem: function () { + addItem() { // do nothing throw new Error("不能添加子组件"); - }, + } - populate: function (items) { - this.layout.populate.apply(this, arguments); + populate(items) { + this.layout.populate(...arguments); } -}); -BI.shortcut("bi.left_vertical_adapt", BI.LeftVerticalAdaptLayout); +} -BI.RightVerticalAdaptLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.RightVerticalAdaptLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class RightVerticalAdaptLayout extends Layout { + static xtype = "bi.right_vertical_adapt"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-r-v-a", items: [], columnSize: [], @@ -182,18 +198,20 @@ BI.RightVerticalAdaptLayout = BI.inherit(BI.Layout, { hgap: 0, tgap: 0, bgap: 0, - vgap: 0 + vgap: 0, }); - }, - render: function () { - var o = this.options, self = this; - BI.RightVerticalAdaptLayout.superclass.render.apply(this, arguments); + } + + render() { + const o = this.options; + super.render(...arguments); + return { type: "bi.vertical_adapt", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, - horizontalAlign: BI.HorizontalAlign.Right, + horizontalAlign: HorizontalAlign.Right, items: o.items, columnSize: o.columnSize, hgap: o.hgap, @@ -206,21 +224,20 @@ BI.RightVerticalAdaptLayout = BI.inherit(BI.Layout, { innerVgap: o.innerVgap, scrollx: o.scrollx, scrolly: o.scrolly, - scrollable: o.scrollable + scrollable: o.scrollable, }; - }, + } - resize: function () { + resize() { this.layout.resize(); - }, + } - addItem: function () { + addItem() { // do nothing throw new Error("不能添加子组件"); - }, + } - populate: function (items) { - this.layout.populate(items); + populate(...args) { + this.layout.populate(...args); } -}); -BI.shortcut("bi.right_vertical_adapt", BI.RightVerticalAdaptLayout); +} diff --git a/src/core/wrapper/layout/adapt/adapt.table.js b/src/core/wrapper/layout/adapt/adapt.table.js index 5691840af..4526edde6 100644 --- a/src/core/wrapper/layout/adapt/adapt.table.js +++ b/src/core/wrapper/layout/adapt/adapt.table.js @@ -1,78 +1,91 @@ +import { shortcut } from "../../../decorator"; +import { Layout } from "../../layout"; +import { extend, isFunction, some, isNull } from "../../../2.base"; +import { Widget } from "../../../4.widget"; +import { _lazyCreateWidget } from "../../../5.inject"; +import { HorizontalAlign, VerticalAlign } from "../../../constant"; + /** * 使用display:table和display:table-cell实现的horizontal布局 - * @class BI.TableAdaptLayout - * @extends BI.Layout + * @class TableAdaptLayout + * @extends Layout */ -BI.TableAdaptLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.TableAdaptLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class TableAdaptLayout extends Layout { + static xtype = "bi.table_adapt"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-t-a", columnSize: [], - verticalAlign: BI.VerticalAlign.Top, - horizontalAlign: BI.HorizontalAlign.Left, + verticalAlign: VerticalAlign.Top, + horizontalAlign: HorizontalAlign.Left, hgap: 0, vgap: 0, lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, - render: function () { - BI.TableAdaptLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - this.$table = BI.Widget._renderEngine.createElement("
").css({ + } + + render() { + super.render(...arguments); + const o = this.options; + this.$table = Widget._renderEngine.createElement("
").css({ position: "relative", display: "table", - width: (o.horizontalAlign === BI.HorizontalAlign.Center || o.horizontalAlign === BI.HorizontalAlign.Stretch || this._hasFill()) ? "100%" : "auto", - height: (o.verticalAlign !== BI.VerticalAlign.Top) ? "100%" : "auto", - "white-space": "nowrap" + width: (o.horizontalAlign === HorizontalAlign.Center || o.horizontalAlign === HorizontalAlign.Stretch || this._hasFill()) ? "100%" : "auto", + height: (o.verticalAlign !== VerticalAlign.Top) ? "100%" : "auto", + "white-space": "nowrap", }); - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); + const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { + this.populate(newValue); }) : o.items; this.populate(items); - }, + } - _hasFill: function () { - var o = this.options; + _hasFill() { + const o = this.options; if (o.columnSize.length > 0) { return o.columnSize.indexOf("fill") >= 0; } - return BI.some(o.items, function (i, item) { + + return some(o.items, (i, item) => { if (item.width === "fill") { return true; } }); - }, + } - _addElement: function (i, item) { - var o = this.options; - var td, width = ""; - var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; + _addElement(i, item) { + const o = this.options; + let td, width = ""; + let w; + const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; if (columnSize > 0) { width = this._optimiseGap(columnSize + (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap); } - if ((BI.isNull(columnSize) || columnSize === "") && this._hasFill()) { + if ((isNull(columnSize) || columnSize === "") && this._hasFill()) { width = 2; } if (!this.hasWidget(this._getChildName(i))) { - var w = BI._lazyCreateWidget(item); - w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"}); - td = BI._lazyCreateWidget({ + w = _lazyCreateWidget(item); + w.element.css({ position: "relative", top: "0", left: "0", margin: "0px auto" }); + td = _lazyCreateWidget({ type: "bi.default", - width: width, - items: [w] + width, + items: [w], }); this.addWidget(this._getChildName(i), td); } else { td = this.getWidgetByName(this._getChildName(i)); td.element.width(width); } - if (o.verticalAlign === BI.VerticalAlign.Stretch) { - var top = o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item), + if (o.verticalAlign === VerticalAlign.Stretch) { + const top = o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item), bottom = o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item); - w.element.css("height", "calc(100% - " + this._optimiseGap(top + bottom) + ")"); + w.element.css("height", `calc(100% - ${this._optimiseGap(top + bottom)})`); } // 对于表现为td的元素设置最大宽度，有几点需要注意 // 1、由于直接对td设置最大宽度是在规范中未定义的, 所以要使用类似td:firstChild来迂回实现 @@ -81,7 +94,7 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, { if (columnSize > 0) { td.element.css({ "max-width": width, - "min-width": width + "min-width": width, }); } if (i === 0) { @@ -91,20 +104,20 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, { position: "relative", display: "table-cell", "vertical-align": o.verticalAlign, - height: "100%" + height: "100%", }); this._handleGap(w, item, i); + return td; - }, + } - appendFragment: function (frag) { + appendFragment(frag) { this.$table.append(frag); this.element.append(this.$table); - }, + } - populate: function (items) { - BI.TableAdaptLayout.superclass.populate.apply(this, arguments); + populate(...args) { + super.populate(...args); this._mount(); } -}); -BI.shortcut("bi.table_adapt", BI.TableAdaptLayout); +} diff --git a/src/core/wrapper/layout/adapt/adapt.vertical.js b/src/core/wrapper/layout/adapt/adapt.vertical.js index 31c227595..0a0f6c012 100644 --- a/src/core/wrapper/layout/adapt/adapt.vertical.js +++ b/src/core/wrapper/layout/adapt/adapt.vertical.js @@ -1,13 +1,20 @@ +import { shortcut } from "../../../decorator"; +import { Layout } from "../../layout"; +import { HorizontalAlign, VerticalAlign } from "../../../constant"; + /** * 垂直方向居中容器 - * @class BI.VerticalAdaptLayout - * @extends BI.Layout + * @class VerticalAdaptLayout + * @extends Layout */ -BI.VerticalAdaptLayout = BI.inherit(BI.Layout, { - props: { +@shortcut() +export class VerticalAdaptLayout extends Layout { + static xtype = "bi.vertical_adapt"; + + props = { baseCls: "bi-v-a", - horizontalAlign: BI.HorizontalAlign.Left, - verticalAlign: BI.VerticalAlign.Middle, + horizontalAlign: HorizontalAlign.Left, + verticalAlign: VerticalAlign.Middle, columnSize: [], scrollx: false, hgap: 0, @@ -15,12 +22,13 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, { lgap: 0, rgap: 0, tgap: 0, - bgap: 0 - }, + bgap: 0, + } - render: function () { - var self = this, o = this.options; - BI.VerticalAdaptLayout.superclass.render.apply(this, arguments); + render() { + const o = this.options; + super.render(...arguments); + return { type: "bi.horizontal", horizontalAlign: o.horizontalAlign, @@ -30,8 +38,8 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, { scrollx: o.scrollx, scrolly: o.scrolly, scrollable: o.scrollable, - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, hgap: o.hgap, vgap: o.vgap, @@ -42,14 +50,13 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, { innerHgap: o.innerHgap, innerVgap: o.innerVgap, }; - }, + } - resize: function () { + resize() { this.layout.resize(); - }, + } - populate: function (items) { - this.layout.populate.apply(this, arguments); + populate(...args) { + this.layout.populate(...args); } -}); -BI.shortcut("bi.vertical_adapt", BI.VerticalAdaptLayout); +} diff --git a/src/core/wrapper/layout/adapt/auto.horizontal.js b/src/core/wrapper/layout/adapt/auto.horizontal.js index ed0f5e29c..f55acaeea 100644 --- a/src/core/wrapper/layout/adapt/auto.horizontal.js +++ b/src/core/wrapper/layout/adapt/auto.horizontal.js @@ -1,44 +1,50 @@ +import { shortcut } from "../../../decorator"; +import { Layout } from "../../layout"; +import { extend, isFunction } from "../../../2.base"; + /** * 水平方向居中自适应容器 - * @class BI.HorizontalAutoLayout - * @extends BI.Layout + * @class HorizontalAutoLayout + * @extends Layout */ -BI.HorizontalAutoLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.HorizontalAutoLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class HorizontalAutoLayout extends Layout { + static xtype = "bi.horizontal_auto"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-h-o", hgap: 0, lgap: 0, rgap: 0, vgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, + } - render: function () { - BI.HorizontalAutoLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); + render() { + super.render(...arguments); + const o = this.options; + const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { + this.populate(newValue); }) : o.items; this.populate(items); - }, + } - _addElement: function (i, item) { - var o = this.options; - var w = BI.HorizontalAutoLayout.superclass._addElement.apply(this, arguments); + _addElement(i, item) { + const w = super._addElement(...arguments); w.element.css({ position: "relative", - margin: "0px auto" + margin: "0px auto", }); this._handleGap(w, item, null, i); + return w; - }, + } - populate: function (items) { - BI.HorizontalAutoLayout.superclass.populate.apply(this, arguments); + populate(...args) { + super.populate(...args); this._mount(); } -}); -BI.shortcut("bi.horizontal_auto", BI.HorizontalAutoLayout); +} diff --git a/src/core/wrapper/layout/adapt/index.js b/src/core/wrapper/layout/adapt/index.js new file mode 100644 index 000000000..82505c49c --- /dev/null +++ b/src/core/wrapper/layout/adapt/index.js @@ -0,0 +1,13 @@ +export { AbsoluteCenterLayout } from "./absolute.center"; +export { AbsoluteHorizontalLayout } from "./absolute.horizontal"; +export { AbsoluteLeftRightVerticalAdaptLayout, AbsoluteRightVerticalAdaptLayout } from "./absolute.leftrightvertical"; +export { AbsoluteVerticalLayout } from "./absolute.vertical"; +export { CenterAdaptLayout } from "./adapt.center"; +export { HorizontalAdaptLayout } from "./adapt.horizontal"; +export { LeftRightVerticalAdaptLayout, LeftVerticalAdaptLayout, RightVerticalAdaptLayout } from "./adapt.leftrightvertical"; +export { TableAdaptLayout } from "./adapt.table"; +export { VerticalAdaptLayout } from "./adapt.vertical"; +export { HorizontalAutoLayout } from "./auto.horizontal"; +export { InlineCenterAdaptLayout } from "./inline.center"; +export { InlineHorizontalAdaptLayout } from "./inline.horizontal"; +export { InlineVerticalAdaptLayout } from "./inline.vertical"; diff --git a/src/core/wrapper/layout/adapt/inline.center.js b/src/core/wrapper/layout/adapt/inline.center.js index 5d7d073af..ede12b455 100644 --- a/src/core/wrapper/layout/adapt/inline.center.js +++ b/src/core/wrapper/layout/adapt/inline.center.js @@ -1,35 +1,43 @@ +import { shortcut } from "../../../decorator"; +import { Layout } from "../../layout"; +import { extend } from "../../../2.base"; +import { HorizontalAlign, VerticalAlign } from "../../../constant"; + /** * 内联布局 - * @class BI.InlineCenterAdaptLayout - * @extends BI.Layout + * @class InlineCenterAdaptLayout + * @extends Layout * * @cfg {JSON} options 配置属性 * @cfg {Number} [hgap=0] 水平间隙 * @cfg {Number} [vgap=0] 垂直间隙 */ -BI.InlineCenterAdaptLayout = BI.inherit(BI.Layout, { +@shortcut() +export class InlineCenterAdaptLayout extends Layout { + static xtype = "bi.inline_center_adapt"; - props: function () { - return BI.extend(BI.InlineCenterAdaptLayout.superclass.props.apply(this, arguments), { + props() { + return extend(super.props(...arguments), { baseCls: "bi-i-c-a", - horizontalAlign: BI.HorizontalAlign.Center, - verticalAlign: BI.VerticalAlign.Middle, + horizontalAlign: HorizontalAlign.Center, + verticalAlign: VerticalAlign.Middle, columnSize: [], hgap: 0, vgap: 0, lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, + } - render: function () { - var self = this, o = this.options; + render() { + const o = this.options; + return { type: "bi.inline", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, items: o.items, horizontalAlign: o.horizontalAlign, @@ -44,14 +52,13 @@ BI.InlineCenterAdaptLayout = BI.inherit(BI.Layout, { innerHgap: o.innerHgap, innerVgap: o.innerVgap, }; - }, + } - resize: function () { + resize() { this.layout.resize(); - }, + } - populate: function (items) { - this.layout.populate.apply(this.layout, arguments); + populate(...args) { + this.layout.populate(...args); } -}); -BI.shortcut("bi.inline_center_adapt", BI.InlineCenterAdaptLayout); +} diff --git a/src/core/wrapper/layout/adapt/inline.horizontal.js b/src/core/wrapper/layout/adapt/inline.horizontal.js index 09874f1b5..5f7a6a3a2 100644 --- a/src/core/wrapper/layout/adapt/inline.horizontal.js +++ b/src/core/wrapper/layout/adapt/inline.horizontal.js @@ -1,35 +1,43 @@ +import { shortcut } from "../../../decorator"; +import { Layout } from "../../layout"; +import { extend } from "../../../2.base"; +import { HorizontalAlign, VerticalAlign } from "../../../constant"; + /** * 内联布局 - * @class BI.InlineHorizontalAdaptLayout - * @extends BI.Layout + * @class InlineHorizontalAdaptLayout + * @extends Layout * * @cfg {JSON} options 配置属性 * @cfg {Number} [hgap=0] 水平间隙 * @cfg {Number} [vgap=0] 垂直间隙 */ -BI.InlineHorizontalAdaptLayout = BI.inherit(BI.Layout, { +@shortcut() +export class InlineHorizontalAdaptLayout extends Layout { + static xtype = "bi.inline_horizontal_adapt"; - props: function () { - return BI.extend(BI.InlineHorizontalAdaptLayout.superclass.props.apply(this, arguments), { + props() { + return extend(super.props(...arguments), { baseCls: "bi-i-h-a", - horizontalAlign: BI.HorizontalAlign.Center, - verticalAlign: BI.VerticalAlign.Top, + horizontalAlign: HorizontalAlign.Center, + verticalAlign: VerticalAlign.Top, columnSize: [], hgap: 0, vgap: 0, lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, + } - render: function () { - var self = this, o = this.options; + render() { + const o = this.options; + return { type: "bi.inline", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, items: o.items, horizontalAlign: o.horizontalAlign, @@ -44,14 +52,13 @@ BI.InlineHorizontalAdaptLayout = BI.inherit(BI.Layout, { innerHgap: o.innerHgap, innerVgap: o.innerVgap, }; - }, + } - resize: function () { + resize() { this.layout.resize(); - }, + } - populate: function (items) { - this.layout.populate.apply(this.layout, arguments); + populate(...args) { + this.layout.populate(...args); } -}); -BI.shortcut("bi.inline_horizontal_adapt", BI.InlineHorizontalAdaptLayout); +} diff --git a/src/core/wrapper/layout/adapt/inline.vertical.js b/src/core/wrapper/layout/adapt/inline.vertical.js index 09d76592e..748074c02 100644 --- a/src/core/wrapper/layout/adapt/inline.vertical.js +++ b/src/core/wrapper/layout/adapt/inline.vertical.js @@ -1,35 +1,43 @@ +import { shortcut } from "../../../decorator"; +import { Layout } from "../../layout"; +import { extend } from "../../../2.base"; +import { HorizontalAlign, VerticalAlign } from "../../../constant"; + /** * 内联布局 - * @class BI.InlineVerticalAdaptLayout - * @extends BI.Layout + * @class InlineVerticalAdaptLayout + * @extends Layout * * @cfg {JSON} options 配置属性 * @cfg {Number} [hgap=0] 水平间隙 * @cfg {Number} [vgap=0] 垂直间隙 */ -BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, { +@shortcut() +export class InlineVerticalAdaptLayout extends Layout { + static xtype = "bi.inline_vertical_adapt"; - props: function () { - return BI.extend(BI.InlineVerticalAdaptLayout.superclass.props.apply(this, arguments), { + props() { + return extend(super.props(...arguments), { baseCls: "bi-i-v-a", - horizontalAlign: BI.HorizontalAlign.Left, - verticalAlign: BI.VerticalAlign.Middle, + horizontalAlign: HorizontalAlign.Left, + verticalAlign: VerticalAlign.Middle, columnSize: [], hgap: 0, vgap: 0, lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, + } - render: function () { - var self = this, o = this.options; + render() { + const o = this.options; + return { type: "bi.inline", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, items: o.items, horizontalAlign: o.horizontalAlign, @@ -44,14 +52,13 @@ BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, { innerHgap: o.innerHgap, innerVgap: o.innerVgap, }; - }, + } - resize: function () { + resize() { this.layout.resize(); - }, + } - populate: function (items) { - this.layout.populate.apply(this.layout, arguments); + populate(...args) { + this.layout.populate(...args); } -}); -BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout); +} diff --git a/src/core/wrapper/layout/index.js b/src/core/wrapper/layout/index.js new file mode 100644 index 000000000..03bd1cf74 --- /dev/null +++ b/src/core/wrapper/layout/index.js @@ -0,0 +1,17 @@ +export { AbsoluteLayout } from "./layout.absolute"; +export { AdaptiveLayout } from "./layout.adaptive"; +export { BorderLayout } from "./layout.border"; +export { CardLayout } from "./layout.card"; +export { DefaultLayout } from "./layout.default"; +export { DivisionLayout } from "./layout.division"; +export { FloatLeftLayout, FloatRightLayout } from "./layout.flow"; +export { GridLayout } from "./layout.grid"; +export { HorizontalLayout } from "./layout.horizontal"; +export { InlineLayout } from "./layout.inline"; +export { LatticeLayout } from "./layout.lattice"; +export { TableLayout } from "./layout.table"; +export { HTapeLayout, VTapeLayout } from "./layout.tape"; +export { TdLayout } from "./layout.td"; +export { VerticalLayout } from "./layout.vertical"; +export { WindowLayout } from "./layout.window"; +export * from "./adapt"; diff --git a/src/core/wrapper/layout/layout.absolute.js b/src/core/wrapper/layout/layout.absolute.js index 6333b38a8..7e88bd630 100644 --- a/src/core/wrapper/layout/layout.absolute.js +++ b/src/core/wrapper/layout/layout.absolute.js @@ -1,115 +1,119 @@ +import { shortcut } from "../../decorator"; +import { Layout } from "../layout"; +import { extend, isFunction, map, parseFloat, isKey, pick, isNotNull, isNumber } from "../../2.base"; + /** * 固定子组件上下左右的布局容器 - * @class BI.AbsoluteLayout - * @extends BI.Layout */ -BI.AbsoluteLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.AbsoluteLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class AbsoluteLayout extends Layout { + static xtype = "bi.absolute"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-abs", hgap: null, vgap: null, lgap: null, rgap: null, tgap: null, - bgap: null + bgap: null, }); - }, - render: function () { - BI.AbsoluteLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); + } + + render() { + super.render(...arguments); + const o = this.options; + const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { + this.populate(newValue); }) : o.items; this.populate(items); - }, + } - _addElement: function (i, item) { - var o = this.options; - var w = BI.AbsoluteLayout.superclass._addElement.apply(this, arguments); - var left = 0, right = 0, top = 0, bottom = 0; - var offsets = BI.pick(item, ["top", "right", "bottom", "left"]); + _addElement(i, item) { + const o = this.options; + const w = super._addElement(...arguments); + let left = 0, right = 0, top = 0, bottom = 0; + let offsets = pick(item, ["top", "right", "bottom", "left"]); - if (BI.isKey(item.inset)) { - var insets = BI.map((item.inset + "").split(" "), function (i, str) { - return BI.parseFloat(str); - }); + if (isKey(item.inset)) { + const insets = map((`${item.inset}`).split(" "), (i, str) => parseFloat(str)); switch (insets.length) { - case 1: - offsets = {top: insets[0], bottom: insets[0], left: insets[0], right: insets[0]} - break; - case 2: - offsets = {top: insets[0], bottom: insets[0], left: insets[1], right: insets[1]} - break; - case 3: - offsets = {top: insets[0], left: insets[1], right: insets[1], bottom: insets[2]} - break - case 4: - default: - offsets = {top: insets[0], right: insets[1], bottom: insets[2], left: insets[3]} - break; + case 1: + offsets = { top: insets[0], bottom: insets[0], left: insets[0], right: insets[0] }; + break; + case 2: + offsets = { top: insets[0], bottom: insets[0], left: insets[1], right: insets[1] }; + break; + case 3: + offsets = { top: insets[0], left: insets[1], right: insets[1], bottom: insets[2] }; + break; + case 4: + default: + offsets = { top: insets[0], right: insets[1], bottom: insets[2], left: insets[3] }; + break; } } - if (BI.isNotNull(offsets.left)) { - w.element.css({left: BI.isNumber(offsets.left) ? this._optimiseGap(offsets.left) : offsets.left}); + if (isNotNull(offsets.left)) { + w.element.css({ left: isNumber(offsets.left) ? this._optimiseGap(offsets.left) : offsets.left }); left += offsets.left; } - if (BI.isNotNull(offsets.right)) { - w.element.css({right: BI.isNumber(offsets.right) ? this._optimiseGap(offsets.right) : offsets.right}); + if (isNotNull(offsets.right)) { + w.element.css({ right: isNumber(offsets.right) ? this._optimiseGap(offsets.right) : offsets.right }); right += offsets.right; } - if (BI.isNotNull(offsets.top)) { - w.element.css({top: BI.isNumber(offsets.top) ? this._optimiseGap(offsets.top) : offsets.top}); + if (isNotNull(offsets.top)) { + w.element.css({ top: isNumber(offsets.top) ? this._optimiseGap(offsets.top) : offsets.top }); top += offsets.top; } - if (BI.isNotNull(offsets.bottom)) { - w.element.css({bottom: BI.isNumber(offsets.bottom) ? this._optimiseGap(offsets.bottom) : offsets.bottom}); + if (isNotNull(offsets.bottom)) { + w.element.css({ bottom: isNumber(offsets.bottom) ? this._optimiseGap(offsets.bottom) : offsets.bottom }); bottom += offsets.bottom; } - if (BI.isNotNull(o.hgap)) { + if (isNotNull(o.hgap)) { left += o.hgap; - w.element.css({left: this._optimiseGap(left)}); + w.element.css({ left: this._optimiseGap(left) }); right += o.hgap; - w.element.css({right: this._optimiseGap(right)}); + w.element.css({ right: this._optimiseGap(right) }); } - if (BI.isNotNull(o.vgap)) { + if (isNotNull(o.vgap)) { top += o.vgap; - w.element.css({top: this._optimiseGap(top)}); + w.element.css({ top: this._optimiseGap(top) }); bottom += o.vgap; - w.element.css({bottom: this._optimiseGap(bottom)}); + w.element.css({ bottom: this._optimiseGap(bottom) }); } - if (BI.isNotNull(o.lgap)) { + if (isNotNull(o.lgap)) { left += o.lgap; - w.element.css({left: this._optimiseGap(left)}); + w.element.css({ left: this._optimiseGap(left) }); } - if (BI.isNotNull(o.rgap)) { + if (isNotNull(o.rgap)) { right += o.rgap; - w.element.css({right: this._optimiseGap(right)}); + w.element.css({ right: this._optimiseGap(right) }); } - if (BI.isNotNull(o.tgap)) { + if (isNotNull(o.tgap)) { top += o.tgap; - w.element.css({top: this._optimiseGap(top)}); + w.element.css({ top: this._optimiseGap(top) }); } - if (BI.isNotNull(o.bgap)) { + if (isNotNull(o.bgap)) { bottom += o.bgap; - w.element.css({bottom: this._optimiseGap(bottom)}); + w.element.css({ bottom: this._optimiseGap(bottom) }); } - if (BI.isNotNull(item.width)) { - w.element.css({width: BI.isNumber(item.width) ? this._optimiseGap(item.width) : item.width}); + if (isNotNull(item.width)) { + w.element.css({ width: isNumber(item.width) ? this._optimiseGap(item.width) : item.width }); } - if (BI.isNotNull(item.height)) { - w.element.css({height: BI.isNumber(item.height) ? this._optimiseGap(item.height) : item.height}); + if (isNotNull(item.height)) { + w.element.css({ height: isNumber(item.height) ? this._optimiseGap(item.height) : item.height }); } - w.element.css({position: "absolute"}); + w.element.css({ position: "absolute" }); + return w; - }, + } - populate: function (items) { - BI.AbsoluteLayout.superclass.populate.apply(this, arguments); + populate(...args) { + super.populate(...args); this._mount(); } -}); -BI.shortcut("bi.absolute", BI.AbsoluteLayout); +} diff --git a/src/core/wrapper/layout/layout.adaptive.js b/src/core/wrapper/layout/layout.adaptive.js index 20b758ef4..e11e23eb4 100644 --- a/src/core/wrapper/layout/layout.adaptive.js +++ b/src/core/wrapper/layout/layout.adaptive.js @@ -1,63 +1,70 @@ -BI.AdaptiveLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.AdaptiveLayout.superclass.props.apply(this, arguments), { +import { shortcut } from "../../decorator"; +import { Layout } from "../layout"; +import { extend, isNumber, isNotNull, isFunction } from "../../2.base"; + +@shortcut() +export class AdaptiveLayout extends Layout { + static xtype = "bi.adaptive"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-adaptive", hgap: 0, vgap: 0, lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, - render: function () { - BI.AdaptiveLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { + } + + render() { + super.render(...arguments); + const self = this, o = this.options; + const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { self.populate(newValue); }) : o.items; this.populate(items); - }, + } - _addElement: function (i, item) { - var o = this.options; - var w = BI.AdaptiveLayout.superclass._addElement.apply(this, arguments); - w.element.css({position: "relative"}); - if (BI.isNotNull(item.left)) { + _addElement(i, item) { + const w = super._addElement(...arguments); + w.element.css({ position: "relative" }); + if (isNotNull(item.left)) { w.element.css({ - left: BI.isNumber(item.left) ? this._optimiseGap(item.left) : item.left + left: isNumber(item.left) ? this._optimiseGap(item.left) : item.left, }); } - if (BI.isNotNull(item.right)) { + if (isNotNull(item.right)) { w.element.css({ - right: BI.isNumber(item.right) ? this._optimiseGap(item.right) : item.right + right: isNumber(item.right) ? this._optimiseGap(item.right) : item.right, }); } - if (BI.isNotNull(item.top)) { + if (isNotNull(item.top)) { w.element.css({ - top: BI.isNumber(item.top) ? this._optimiseGap(item.top) : item.top + top: isNumber(item.top) ? this._optimiseGap(item.top) : item.top, }); } - if (BI.isNotNull(item.bottom)) { + if (isNotNull(item.bottom)) { w.element.css({ - bottom: BI.isNumber(item.bottom) ? this._optimiseGap(item.bottom) : item.bottom + bottom: isNumber(item.bottom) ? this._optimiseGap(item.bottom) : item.bottom, }); } this._handleGap(w, item); - if (BI.isNotNull(item.width)) { - w.element.css({width: BI.isNumber(item.width) ? this._optimiseGap(item.width) : item.width}); + if (isNotNull(item.width)) { + w.element.css({ width: isNumber(item.width) ? this._optimiseGap(item.width) : item.width }); } - if (BI.isNotNull(item.height)) { - w.element.css({height: BI.isNumber(item.height) ? this._optimiseGap(item.height) : item.height}); + if (isNotNull(item.height)) { + w.element.css({ height: isNumber(item.height) ? this._optimiseGap(item.height) : item.height }); } + return w; - }, + } - populate: function (items) { - BI.AbsoluteLayout.superclass.populate.apply(this, arguments); + populate(...args) { + super.populate(...args); this._mount(); } -}); -BI.shortcut("bi.adaptive", BI.AdaptiveLayout); +} diff --git a/src/core/wrapper/layout/layout.border.js b/src/core/wrapper/layout/layout.border.js index 15d3877af..717bc173a 100644 --- a/src/core/wrapper/layout/layout.border.js +++ b/src/core/wrapper/layout/layout.border.js @@ -1,42 +1,51 @@ +import { shortcut } from "../../decorator"; +import { Layout } from "../layout"; +import { extend, isNotNull, isFunction } from "../../2.base"; +import { _lazyCreateWidget } from "../../5.inject"; + /** * 上下的高度固定/左右的宽度固定，中间的高度/宽度自适应 * - * @class BI.BorderLayout - * @extends BI.Layout + * @class BorderLayout + * @extends Layout */ -BI.BorderLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.BorderLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class BorderLayout extends Layout { + static xtype = "bi.border"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-border-layout", - items: {} + items: {}, }); - }, - render: function () { - BI.BorderLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { + } + + render() { + super.render(...arguments); + const self = this, o = this.options; + const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { self.populate(newValue); }) : o.items; this.populate(items); - }, + } - addItem: function (item) { + addItem(item) { // do nothing throw new Error("不能添加子组件"); - }, + } - stroke: function (regions) { - var item; - var top = 0; - var bottom = 0; - var left = 0; - var right = 0; + stroke(regions) { + let item; + let top = 0; + let bottom = 0; + let left = 0; + let right = 0; if ("north" in regions) { - item = regions["north"]; - if (item != null) { + item = regions.north; + if (isNotNull(item)) { if (item.el) { if (!this.hasWidget(this._getChildName("north"))) { - var w = BI._lazyCreateWidget(item); + const w = _lazyCreateWidget(item); this.addWidget(this._getChildName("north"), w); } this.getWidgetByName(this._getChildName("north")).element.height(this._optimiseGap(item.height)) @@ -45,18 +54,18 @@ BI.BorderLayout = BI.inherit(BI.Layout, { top: this._optimiseGap(item.top || 0), left: this._optimiseGap(item.left || 0), right: this._optimiseGap(item.right || 0), - bottom: "initial" + bottom: "initial", }); } top = (item.height || 0) + (item.top || 0) + (item.bottom || 0); } } if ("south" in regions) { - item = regions["south"]; - if (item != null) { + item = regions.south; + if (isNotNull(item)) { if (item.el) { if (!this.hasWidget(this._getChildName("south"))) { - var w = BI._lazyCreateWidget(item); + const w = _lazyCreateWidget(item); this.addWidget(this._getChildName("south"), w); } this.getWidgetByName(this._getChildName("south")).element.height(this._optimiseGap(item.height)) @@ -65,18 +74,18 @@ BI.BorderLayout = BI.inherit(BI.Layout, { bottom: this._optimiseGap(item.bottom || 0), left: this._optimiseGap(item.left || 0), right: this._optimiseGap(item.right || 0), - top: "initial" + top: "initial", }); } bottom = (item.height || 0) + (item.top || 0) + (item.bottom || 0); } } if ("west" in regions) { - item = regions["west"]; - if (item != null) { + item = regions.west; + if (isNotNull(item)) { if (item.el) { if (!this.hasWidget(this._getChildName("west"))) { - var w = BI._lazyCreateWidget(item); + const w = _lazyCreateWidget(item); this.addWidget(this._getChildName("west"), w); } this.getWidgetByName(this._getChildName("west")).element.width(this._optimiseGap(item.width)) @@ -85,18 +94,18 @@ BI.BorderLayout = BI.inherit(BI.Layout, { left: this._optimiseGap(item.left || 0), top: this._optimiseGap(top), bottom: this._optimiseGap(bottom), - right: "initial" + right: "initial", }); } left = (item.width || 0) + (item.left || 0) + (item.right || 0); } } if ("east" in regions) { - item = regions["east"]; - if (item != null) { + item = regions.east; + if (isNotNull(item)) { if (item.el) { if (!this.hasWidget(this._getChildName("east"))) { - var w = BI._lazyCreateWidget(item); + const w = _lazyCreateWidget(item); this.addWidget(this._getChildName("east"), w); } this.getWidgetByName(this._getChildName("east")).element.width(this._optimiseGap(item.width)) @@ -105,17 +114,17 @@ BI.BorderLayout = BI.inherit(BI.Layout, { right: this._optimiseGap(item.right || 0), top: this._optimiseGap(top), bottom: this._optimiseGap(bottom), - left: "initial" + left: "initial", }); } right = (item.width || 0) + (item.left || 0) + (item.right || 0); } } if ("center" in regions) { - item = regions["center"]; - if (item != null) { + item = regions.center; + if (isNotNull(item)) { if (!this.hasWidget(this._getChildName("center"))) { - var w = BI._lazyCreateWidget(item); + const w = _lazyCreateWidget(item); this.addWidget(this._getChildName("center"), w); } this.getWidgetByName(this._getChildName("center")).element @@ -124,19 +133,18 @@ BI.BorderLayout = BI.inherit(BI.Layout, { top: this._optimiseGap(top), bottom: this._optimiseGap(bottom), left: this._optimiseGap(left), - right: this._optimiseGap(right) + right: this._optimiseGap(right), }); } } - }, + } - update: function (opt) { + update(opt) { return this.forceUpdate(opt); - }, + } - populate: function (items) { - BI.BorderLayout.superclass.populate.apply(this, arguments); + populate(...args) { + super.populate(...args); this._mount(); } -}); -BI.shortcut("bi.border", BI.BorderLayout); +} diff --git a/src/core/wrapper/layout/layout.card.js b/src/core/wrapper/layout/layout.card.js index 97034efba..4b2fbad2a 100644 --- a/src/core/wrapper/layout/layout.card.js +++ b/src/core/wrapper/layout/layout.card.js @@ -1,211 +1,215 @@ +import { shortcut } from "../../decorator"; +import { Layout } from "../layout"; +import { extend, each, isNotNull, isFunction, findIndex, isWidget, some, map, isKey } from "../../2.base"; +import { _lazyCreateWidget } from "../../5.inject"; +import { Events } from "../../constant"; +import { Action } from "../../action"; + /** * 卡片布局，可以做到当前只显示一个组件，其他的都隐藏 - * @class BI.CardLayout - * @extends BI.Layout + * @class CardLayout + * @extends Layout * * @cfg {JSON} options 配置属性 * @cfg {String} options.defaultShowName 默认展示的子组件名 */ -BI.CardLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.CardLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class CardLayout extends Layout { + static xtype = "bi.card"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-card-layout", - items: [] + items: [], }); - }, + } - render: function () { - BI.CardLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); + render() { + super.render(...arguments); + const o = this.options; + const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { + this.populate(newValue); }) : o.items; this.populate(items); - }, + } - stroke: function (items) { - var self = this, o = this.options; + stroke(items) { + const o = this.options; this.showIndex = void 0; - BI.each(items, function (i, item) { + each(items, (i, item) => { if (item) { - if (!self.hasWidget(item.cardName)) { - var w = BI._lazyCreateWidget(item); - w.on(BI.Events.DESTROY, function () { - var index = BI.findIndex(o.items, function (i, tItem) { - return tItem.cardName == item.cardName; - }); + let w; + if (!this.hasWidget(item.cardName)) { + w = _lazyCreateWidget(item); + w.on(Events.DESTROY, () => { + const index = findIndex(o.items, (i, tItem) => tItem.cardName === item.cardName); if (index > -1) { o.items.splice(index, 1); } }); - self.addWidget(self._getChildName(item.cardName), w); + this.addWidget(this._getChildName(item.cardName), w); } else { - var w = self.getWidgetByName(self._getChildName(item.cardName)); + w = this.getWidgetByName(this._getChildName(item.cardName)); } w.element.css({ position: "relative", top: "0", left: "0", width: "100%", - height: "100%" + height: "100%", }); w.setVisible(false); } }); - }, + } - resize: function () { + resize() { // console.log("Card布局不需要resize"); - }, + } - update: function (opt) { + update(opt) { return this.forceUpdate(opt); - }, + } - empty: function () { - BI.CardLayout.superclass.empty.apply(this, arguments); + empty(...args) { + super.empty(...args); this.options.items = []; - }, + } - populate: function (items) { - BI.CardLayout.superclass.populate.apply(this, arguments); + populate(...args) { + super.populate(...args); this._mount(); this.options.defaultShowName && this.showCardByName(this.options.defaultShowName); - }, + } - isCardExisted: function (cardName) { - return BI.some(this.options.items, function (i, item) { - return item.cardName == cardName && item.el; - }); - }, + isCardExisted(cardName) { + return some(this.options.items, (i, item) => item.cardName === cardName && item.el); + } - getCardByName: function (cardName) { + getCardByName(cardName) { if (!this.isCardExisted(cardName)) { throw new Error("cardName不存在", cardName); } + return this._children[this._getChildName(cardName)]; - }, + } - _deleteCardByName: function (cardName) { + _deleteCardByName(cardName) { delete this._children[this._getChildName(cardName)]; - var index = BI.findIndex(this.options.items, function (i, item) { - return item.cardName == cardName; - }); + const index = findIndex(this.options.items, (i, item) => item.cardName === cardName); if (index > -1) { this.options.items.splice(index, 1); } - }, + } - deleteCardByName: function (cardName) { + deleteCardByName(cardName) { if (!this.isCardExisted(cardName)) { throw new Error("cardName不存在", cardName); } - var child = this._children[this._getChildName(cardName)]; + const child = this._children[this._getChildName(cardName)]; this._deleteCardByName(cardName); child && child._destroy(); - }, + } - addCardByName: function (cardName, cardItem) { + addCardByName(cardName, cardItem) { if (this.isCardExisted(cardName)) { throw new Error("cardName 已存在", cardName); } - var widget = BI._lazyCreateWidget(cardItem, this); + const widget = _lazyCreateWidget(cardItem, this); widget.element.css({ position: "relative", top: "0", left: "0", width: "100%", - height: "100%" + height: "100%", }).appendTo(this.element); widget.invisible(); this.addWidget(this._getChildName(cardName), widget); - this.options.items.push({el: cardItem, cardName: cardName}); + this.options.items.push({ el: cardItem, cardName }); + return widget; - }, + } - showCardByName: function (name, action, callback) { - var self = this; + showCardByName(name, action, callback) { // name不存在的时候全部隐藏 - var exist = this.isCardExisted(name); - if (this.showIndex != null) { + const exist = this.isCardExisted(name); + if (isNotNull(this.showIndex)) { this.lastShowIndex = this.showIndex; } this.showIndex = name; - var flag = false; - BI.each(this.options.items, function (i, item) { - var el = self._children[self._getChildName(item.cardName)]; + let flag = false; + each(this.options.items, (i, item) => { + const el = this._children[this._getChildName(item.cardName)]; if (el) { - if (name != item.cardName) { + if (name !== item.cardName) { // 动画效果只有在全部都隐藏的时候才有意义,且只要执行一次动画操作就够了 - !flag && !exist && (BI.Action && action instanceof BI.Action) ? (action.actionBack(el), flag = true) : el.invisible(); + !flag && !exist && (Action && action instanceof Action) ? (action.actionBack(el), flag = true) : el.invisible(); } else { - (BI.Action && action instanceof BI.Action) ? action.actionPerformed(void 0, el, callback) : (el.visible(), callback && callback()); + (Action && action instanceof Action) ? action.actionPerformed(void 0, el, callback) : (el.visible(), callback && callback()); } } }); - }, + } - showLastCard: function () { - var self = this; + showLastCard() { this.showIndex = this.lastShowIndex; - BI.each(this.options.items, function (i, item) { - self._children[self._getChildName(item.cardName)].setVisible(self.showIndex == i); + each(this.options.items, (i, item) => { + this._children[this._getChildName(item.cardName)].setVisible(this.showIndex === i); }); - }, + } - setDefaultShowName: function (name) { + setDefaultShowName(name) { this.options.defaultShowName = name; + return this; - }, + } - getDefaultShowName: function () { + getDefaultShowName() { return this.options.defaultShowName; - }, + } - getAllCardNames: function () { - return BI.map(this.options.items, function (i, item) { - return item.cardName; - }); - }, + getAllCardNames() { + return map(this.options.items, (i, item) => item.cardName); + } - getShowingCard: function () { - if (!BI.isKey(this.showIndex)) { + getShowingCard() { + if (!isKey(this.showIndex)) { return void 0; } + return this.getWidgetByName(this._getChildName(this.showIndex)); - }, + } - deleteAllCard: function () { - var self = this; - BI.each(this.getAllCardNames(), function (i, name) { - self.deleteCardByName(name); + deleteAllCard() { + each(this.getAllCardNames(), (i, name) => { + this.deleteCardByName(name); }); - }, + } - hideAllCard: function () { - var self = this; - BI.each(this.options.items, function (i, item) { - self._children[self._getChildName(item.cardName)].invisible(); + hideAllCard() { + each(this.options.items, (i, item) => { + this._children[this._getChildName(item.cardName)].invisible(); }); - }, + } - isAllCardHide: function () { - var self = this; - var flag = true; - BI.some(this.options.items, function (i, item) { - if (self._children[self._getChildName(item.cardName)].isVisible()) { + isAllCardHide() { + let flag = true; + some(this.options.items, (i, item) => { + if (this._children[this._getChildName(item.cardName)].isVisible()) { flag = false; + return false; } }); + return flag; - }, + } - removeWidget: function (nameOrWidget) { - var removeName, self = this; - if (BI.isWidget(nameOrWidget)) { - BI.each(this._children, function (name, child) { + removeWidget(nameOrWidget) { + let removeName; + if (isWidget(nameOrWidget)) { + each(this._children, (name, child) => { if (child === nameOrWidget) { removeName = name; } @@ -217,5 +221,4 @@ BI.CardLayout = BI.inherit(BI.Layout, { this._deleteCardByName(removeName); } } -}); -BI.shortcut("bi.card", BI.CardLayout); +} diff --git a/src/core/wrapper/layout/layout.default.js b/src/core/wrapper/layout/layout.default.js index 90e4bf569..325be127e 100644 --- a/src/core/wrapper/layout/layout.default.js +++ b/src/core/wrapper/layout/layout.default.js @@ -1,39 +1,47 @@ +import { shortcut } from "../../decorator"; +import { Layout } from "../layout"; +import { extend, isFunction } from "../../2.base"; + /** * 默认的布局方式 * - * @class BI.DefaultLayout - * @extends BI.Layout + * @class DefaultLayout + * @extends Layout */ -BI.DefaultLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.DefaultLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class DefaultLayout extends Layout { + static xtype = "bi.default"; + + props() { + return extend(super.props(...arguments), { hgap: 0, vgap: 0, lgap: 0, rgap: 0, tgap: 0, bgap: 0, - items: [] + items: [], }); - }, - render: function () { - BI.DefaultLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); + } + + render() { + super.render(...arguments); + const o = this.options; + const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { + this.populate(newValue); }) : o.items; this.populate(items); - }, + } - _addElement: function (i, item) { - var w = BI.DefaultLayout.superclass._addElement.apply(this, arguments); + _addElement(i, item) { + const w = super._addElement(...arguments); this._handleGap(w, item); + return w; - }, + } - populate: function (items) { - BI.DefaultLayout.superclass.populate.apply(this, arguments); + populate(...args) { + super.populate(...args); this._mount(); } -}); -BI.shortcut("bi.default", BI.DefaultLayout); +} diff --git a/src/core/wrapper/layout/layout.division.js b/src/core/wrapper/layout/layout.division.js index 307166283..92701e7c0 100644 --- a/src/core/wrapper/layout/layout.division.js +++ b/src/core/wrapper/layout/layout.division.js @@ -1,36 +1,46 @@ +import { shortcut } from "../../decorator"; +import { Layout } from "../layout"; +import { extend, isFunction, makeArray, each, isArray } from "../../2.base"; +import { Widget } from "../../4.widget"; +import { _lazyCreateWidget } from "../../5.inject"; + /** * 分隔容器的控件，按照宽度和高度所占比平分整个容器 * - * @class BI.DivisionLayout - * @extends BI.Layout + * @class DivisionLayout + * @extends Layout */ -BI.DivisionLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.DivisionLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class DivisionLayout extends Layout { + static xtype = "bi.division"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-division", columns: null, rows: null, - items: [] + items: [], }); - }, - render: function () { - BI.DivisionLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); + } + + render() { + super.render(...arguments); + const o = this.options; + const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { + this.populate(newValue); }) : o.items; this.populate(items); - }, + } - addItem: function (item) { + addItem(item) { // do nothing throw new Error("不能添加子组件"); - }, + } - stroke: function (items) { - var o = this.options, self = this; - var rows = o.rows || o.items.length, columns = o.columns || ((o.items[0] && o.items[0].length) | 0); - var map = BI.makeArray(rows), widths = {}, heights = {}; + stroke(items) { + const o = this.options; + const rows = o.rows || o.items.length, columns = o.columns || ((o.items[0] && o.items[0].length) | 0); + const map = makeArray(rows), widths = {}, heights = {}; function firstElement (item, cls) { item.addClass(cls); @@ -45,9 +55,9 @@ BI.DivisionLayout = BI.inherit(BI.Layout, { } function first (item, cls) { - if (item instanceof BI.Widget) { + if (item instanceof Widget) { firstElement(item.element, cls); - } else if (item.el instanceof BI.Widget) { + } else if (item.el instanceof Widget) { firstElement(item.el.element, cls); } else if (item.el) { firstObject(item.el, cls); @@ -56,12 +66,12 @@ BI.DivisionLayout = BI.inherit(BI.Layout, { } } - BI.each(map, function (i) { - map[i] = BI.makeArray(columns); + each(map, i => { + map[i] = makeArray(columns); }); - BI.each(items, function (i, item) { - if (BI.isArray(item)) { - BI.each(item, function (j, el) { + each(items, (i, item) => { + if (isArray(item)) { + each(item, (j, el) => { widths[i] = (widths[i] || 0) + item.width; heights[j] = (heights[j] || 0) + item.height; map[i][j] = el; @@ -73,56 +83,56 @@ BI.DivisionLayout = BI.inherit(BI.Layout, { heights[item.column] = (heights[item.column] || 0) + item.height; map[item.row][item.column] = item; }); - for (var i = 0; i < rows; i++) { - var totalW = 0; - for (var j = 0; j < columns; j++) { + for (let i = 0; i < rows; i++) { + let totalW = 0; + for (let j = 0; j < columns; j++) { + let w; if (!map[i][j]) { - throw new Error("item(" + i + "" + j + ") 必须", map); + throw new Error(`item(${i}${j}) 必须`, map); } - if (!this.hasWidget(this._getChildName(i + "_" + j))) { - var w = BI._lazyCreateWidget(map[i][j]); - this.addWidget(this._getChildName(i + "_" + j), w); + if (!this.hasWidget(this._getChildName(`${i}_${j}`))) { + w = _lazyCreateWidget(map[i][j]); + this.addWidget(this._getChildName(`${i}_${j}`), w); } else { - w = this.getWidgetByName(this._getChildName(i + "_" + j)); + w = this.getWidgetByName(this._getChildName(`${i}_${j}`)); } - var left = totalW * 100 / widths[i]; - w.element.css({position: "absolute", left: left + "%"}); + const left = totalW * 100 / widths[i]; + w.element.css({ position: "absolute", left: `${left}%` }); if (j > 0) { - var lastW = this.getWidgetByName(this._getChildName(i + "_" + (j - 1))); - lastW.element.css({right: (100 - left) + "%"}); + const lastW = this.getWidgetByName(this._getChildName(`${i}_${j - 1}`)); + lastW.element.css({ right: `${100 - left}%` }); } - if (j == o.columns - 1) { - w.element.css({right: "0%"}); + if (j === o.columns - 1) { + w.element.css({ right: "0%" }); } - first(w, self.getRowColumnCls(i, j, rows - 1, columns - 1)); + first(w, this.getRowColumnCls(i, j, rows - 1, columns - 1)); totalW += map[i][j].width; } } - for (var j = 0; j < o.columns; j++) { - var totalH = 0; - for (var i = 0; i < o.rows; i++) { - var w = this.getWidgetByName(this._getChildName(i + "_" + j)); - var top = totalH * 100 / heights[j]; - w.element.css({top: top + "%"}); + for (let j = 0; j < o.columns; j++) { + let totalH = 0; + for (let i = 0; i < o.rows; i++) { + const w = this.getWidgetByName(this._getChildName(`${i}_${j}`)); + const top = totalH * 100 / heights[j]; + w.element.css({ top: `${top}%` }); if (i > 0) { - var lastW = this.getWidgetByName(this._getChildName((i - 1) + "_" + j)); - lastW.element.css({bottom: (100 - top) + "%"}); + const lastW = this.getWidgetByName(this._getChildName(`${i - 1}_${j}`)); + lastW.element.css({ bottom: `${100 - top}%` }); } - if (i == o.rows - 1) { - w.element.css({bottom: "0%"}); + if (i === o.rows - 1) { + w.element.css({ bottom: "0%" }); } totalH += map[i][j].height; } } - }, + } - update: function (opt) { + update(opt) { return this.forceUpdate(opt); - }, + } - populate: function (items) { - BI.DivisionLayout.superclass.populate.apply(this, arguments); + populate(...args) { + super.populate(...args); this._mount(); } -}); -BI.shortcut("bi.division", BI.DivisionLayout); +} diff --git a/src/core/wrapper/layout/layout.flow.js b/src/core/wrapper/layout/layout.flow.js index 13b9fdb54..0ab22e88d 100644 --- a/src/core/wrapper/layout/layout.flow.js +++ b/src/core/wrapper/layout/layout.flow.js @@ -1,183 +1,196 @@ +import { shortcut } from "../../decorator"; +import { Layout } from "../layout"; +import { extend, isFunction, isNotNull, isNumber } from "../../2.base"; +import { pixFormat } from "../../constant"; + /** * 靠左对齐的自由浮动布局 - * @class BI.FloatLeftLayout - * @extends BI.Layout + * @class FloatLeftLayout + * @extends Layout * * @cfg {JSON} options 配置属性 * @cfg {Number} [hgap=0] 水平间隙 * @cfg {Number} [vgap=0] 垂直间隙 */ -BI.FloatLeftLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FloatLeftLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class FloatLeftLayout extends Layout { + static xtype = "bi.left"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-left clearfix", hgap: 0, vgap: 0, lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, - render: function () { - BI.FloatLeftLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; + } + + render() { + super.render(...arguments); + const o = this.options; if (o.innerHgap !== 0) { this.element.css({ paddingLeft: this._optimiseGap(o.innerHgap), - paddingRight: this._optimiseGap(o.innerHgap) - }) + paddingRight: this._optimiseGap(o.innerHgap), + }); } if (o.innerVgap !== 0) { this.element.css({ paddingTop: this._optimiseGap(o.innerVgap), - paddingBottom: this._optimiseGap(o.innerVgap) - }) + paddingBottom: this._optimiseGap(o.innerVgap), + }); } - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); + const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { + this.populate(newValue); }) : o.items; this.populate(items); - }, + } - _addElement: function (i, item) { - var o = this.options; - var w = BI.FloatLeftLayout.superclass._addElement.apply(this, arguments); - w.element.css({position: "relative", float: "left"}); - if (BI.isNotNull(item.left)) { - w.element.css({left: BI.isNumber(item.left) ? this._optimiseGap(item.left) : item.left}); + _addElement(i, item) { + const o = this.options; + const w = super._addElement(...arguments); + w.element.css({ position: "relative", "float": "left" }); + if (isNotNull(item.left)) { + w.element.css({ left: isNumber(item.left) ? this._optimiseGap(item.left) : item.left }); } - if (BI.isNotNull(item.right)) { - w.element.css({right: BI.isNumber(item.right) ? this._optimiseGap(item.right) : item.right}); + if (isNotNull(item.right)) { + w.element.css({ right: isNumber(item.right) ? this._optimiseGap(item.right) : item.right }); } - if (BI.isNotNull(item.top)) { - w.element.css({top: BI.isNumber(item.top) ? this._optimiseGap(item.top) : item.top}); + if (isNotNull(item.top)) { + w.element.css({ top: isNumber(item.top) ? this._optimiseGap(item.top) : item.top }); } - if (BI.isNotNull(item.bottom)) { - w.element.css({bottom: BI.isNumber(item.bottom) ? this._optimiseGap(item.bottom) : item.bottom}); + if (isNotNull(item.bottom)) { + w.element.css({ bottom: isNumber(item.bottom) ? this._optimiseGap(item.bottom) : item.bottom }); } if (o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) { - var top = o.vgap / 2 + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item); + const top = o.vgap / 2 + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item); w.element.css({ - "margin-top": this._optimiseGap(top) + "margin-top": this._optimiseGap(top), }); } if (o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) { - var left = o.hgap / 2 + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item); + const left = o.hgap / 2 + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item); w.element.css({ - "margin-left": this._optimiseGap(left) + "margin-left": this._optimiseGap(left), }); } if (o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) { - var right = o.hgap / 2 + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item); + const right = o.hgap / 2 + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item); w.element.css({ - "margin-right": this._optimiseGap(right) + "margin-right": this._optimiseGap(right), }); } if (o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) { - var bottom = o.vgap / 2 + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item); + const bottom = o.vgap / 2 + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item); w.element.css({ - "margin-bottom": this._optimiseGap(bottom) + "margin-bottom": this._optimiseGap(bottom), }); } + return w; - }, + } - populate: function (items) { - BI.FloatLeftLayout.superclass.populate.apply(this, arguments); + populate(...args) { + super.populate(...args); this._mount(); } -}); -BI.shortcut("bi.left", BI.FloatLeftLayout); +} /** * 靠右对齐的自由浮动布局 - * @class BI.FloatRightLayout - * @extends BI.Layout + * @class FloatRightLayout + * @extends Layout * * @cfg {JSON} options 配置属性 * @cfg {Number} [hgap=0] 水平间隙 * @cfg {Number} [vgap=0] 垂直间隙 */ -BI.FloatRightLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FloatRightLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class FloatRightLayout extends Layout { + static xtype = "bi.right"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-right clearfix", hgap: 0, vgap: 0, lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, - render: function () { - BI.FloatRightLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; + } + + render() { + super.render(...arguments); + const o = this.options; if (o.innerHgap !== 0) { this.element.css({ paddingLeft: this._optimiseGap(o.innerHgap), - paddingRight: this._optimiseGap(o.innerHgap) - }) + paddingRight: this._optimiseGap(o.innerHgap), + }); } if (o.innerVgap !== 0) { this.element.css({ paddingTop: this._optimiseGap(o.innerVgap), - paddingBottom: this._optimiseGap(o.innerVgap) - }) + paddingBottom: this._optimiseGap(o.innerVgap), + }); } - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); + const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { + this.populate(newValue); }) : o.items; this.populate(items); - }, + } - _addElement: function (i, item) { - var o = this.options; - var w = BI.FloatRightLayout.superclass._addElement.apply(this, arguments); - w.element.css({position: "relative", float: "right"}); - if (BI.isNotNull(item.left)) { - w.element.css({left: BI.pixFormat(item.left)}); + _addElement(i, item) { + const o = this.options; + const w = super._addElement(...arguments); + w.element.css({ position: "relative", "float": "right" }); + if (isNotNull(item.left)) { + w.element.css({ left: pixFormat(item.left) }); } - if (BI.isNotNull(item.right)) { - w.element.css({right: BI.pixFormat(item.right)}); + if (isNotNull(item.right)) { + w.element.css({ right: pixFormat(item.right) }); } - if (BI.isNotNull(item.top)) { - w.element.css({top: BI.pixFormat(item.top)}); + if (isNotNull(item.top)) { + w.element.css({ top: pixFormat(item.top) }); } - if (BI.isNotNull(item.bottom)) { - w.element.css({bottom: BI.pixFormat(item.bottom)}); + if (isNotNull(item.bottom)) { + w.element.css({ bottom: pixFormat(item.bottom) }); } if (o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) { - var top = o.vgap / 2 + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item); + const top = o.vgap / 2 + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item); w.element.css({ - "margin-top": this._optimiseGap(top) + "margin-top": this._optimiseGap(top), }); } if (o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) { - var left = o.hgap / 2 + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item); + const left = o.hgap / 2 + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item); w.element.css({ - "margin-left": this._optimiseGap(left) + "margin-left": this._optimiseGap(left), }); } if (o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) { - var right = o.hgap / 2 + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item); + const right = o.hgap / 2 + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item); w.element.css({ - "margin-right": this._optimiseGap(right) + "margin-right": this._optimiseGap(right), }); } if (o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) { - var bottom = o.vgap / 2 + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item); + const bottom = o.vgap / 2 + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item); w.element.css({ - "margin-bottom": this._optimiseGap(bottom) + "margin-bottom": this._optimiseGap(bottom), }); } + return w; - }, + } - populate: function (items) { - BI.FloatRightLayout.superclass.populate.apply(this, arguments); + populate(...args) { + super.populate(...args); this._mount(); } -}); -BI.shortcut("bi.right", BI.FloatRightLayout); +} diff --git a/src/core/wrapper/layout/layout.grid.js b/src/core/wrapper/layout/layout.grid.js index 53e4cf00b..9f06311b9 100644 --- a/src/core/wrapper/layout/layout.grid.js +++ b/src/core/wrapper/layout/layout.grid.js @@ -1,38 +1,42 @@ -/** - * 上下的高度固定/左右的宽度固定，中间的高度/宽度自适应 - * - * @class BI.BorderLayout - * @extends BI.Layout - */ -BI.GridLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.GridLayout.superclass.props.apply(this, arguments), { +import { shortcut } from "../../decorator"; +import { Layout } from "../layout"; +import { extend, isFunction, isArray, each } from "../../2.base"; +import { Widget } from "../../4.widget"; +import { _lazyCreateWidget } from "../../5.inject"; + +@shortcut() +export class GridLayout extends Layout { + static xtype = "bi.grid"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-grid", columns: null, rows: null, - items: [] + items: [], }); - }, - render: function () { - BI.GridLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); + } + + render() { + super.render(...arguments); + const o = this.options; + const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { + this.populate(newValue); }) : o.items; this.populate(items); - }, + } - addItem: function () { + addItem() { // do nothing throw new Error("不能添加子组件"); - }, + } - stroke: function (items) { - var self = this, o = this.options; - var rows = o.rows || o.items.length, columns = o.columns || ((o.items[0] && o.items[0].length) | 0); - var width = 100 / columns, height = 100 / rows; - var els = []; - for (var i = 0; i < rows; i++) { + stroke(items) { + const o = this.options; + const rows = o.rows || o.items.length, columns = o.columns || ((o.items[0] && o.items[0].length) | 0); + const width = 100 / columns, height = 100 / rows; + const els = []; + for (let i = 0; i < rows; i++) { els[i] = []; } @@ -49,9 +53,9 @@ BI.GridLayout = BI.inherit(BI.Layout, { } function first (item, row, col) { - if (item instanceof BI.Widget) { + if (item instanceof Widget) { firstElement(item.element, row, col); - } else if (item.el instanceof BI.Widget) { + } else if (item.el instanceof Widget) { firstElement(item.el.element, row, col); } else if (item.el) { firstObject(item.el, row, col); @@ -60,46 +64,46 @@ BI.GridLayout = BI.inherit(BI.Layout, { } } - BI.each(items, function (i, item) { - if (BI.isArray(item)) { - BI.each(item, function (j, el) { - els[i][j] = BI._lazyCreateWidget(el); + each(items, (i, item) => { + if (isArray(item)) { + each(item, (j, el) => { + els[i][j] = _lazyCreateWidget(el); }); + return; } - els[item.row][item.column] = BI._lazyCreateWidget(item); + els[item.row][item.column] = _lazyCreateWidget(item); }); - for (var i = 0; i < rows; i++) { - for (var j = 0; j < columns; j++) { + for (let i = 0; i < rows; i++) { + for (let j = 0; j < columns; j++) { if (!els[i][j]) { - els[i][j] = BI._lazyCreateWidget({ - type: "bi.layout" + els[i][j] = _lazyCreateWidget({ + type: "bi.layout", }); } - first(els[i][j], self.getRowColumnCls(i, j, rows - 1, columns - 1)); + first(els[i][j], this.getRowColumnCls(i, j, rows - 1, columns - 1)); els[i][j].element.css({ position: "absolute", - top: height * i + "%", - left: width * j + "%", - right: (100 - (width * (j + 1))) + "%", - bottom: (100 - (height * (i + 1))) + "%" + top: `${height * i}%`, + left: `${width * j}%`, + right: `${100 - (width * (j + 1))}%`, + bottom: `${100 - (height * (i + 1))}%`, }); - this.addWidget(this._getChildName(i + "_" + j), els[i][j]); + this.addWidget(this._getChildName(`${i}_${j}`), els[i][j]); } } - }, + } - resize: function () { + resize() { // console.log("grid布局不需要resize") - }, + } - update: function (opt) { + update(opt) { return this.forceUpdate(opt); - }, + } - populate: function (items) { - BI.GridLayout.superclass.populate.apply(this, arguments); + populate(...args) { + super.populate(...args); this._mount(); } -}); -BI.shortcut("bi.grid", BI.GridLayout); +} diff --git a/src/core/wrapper/layout/layout.horizontal.js b/src/core/wrapper/layout/layout.horizontal.js index 525538e92..32938ef93 100644 --- a/src/core/wrapper/layout/layout.horizontal.js +++ b/src/core/wrapper/layout/layout.horizontal.js @@ -1,8 +1,6 @@ -/** - * 水平布局 - * @class BI.HorizontalLayout - * @extends BI.Layout - */ -BI.HorizontalLayout = function () { -}; -BI.shortcut("bi.horizontal", BI.HorizontalLayout); +import { shortcut } from "../../decorator"; + +@shortcut() +export class HorizontalLayout { + static xtype = "bi.horizontal"; +} diff --git a/src/core/wrapper/layout/layout.inline.js b/src/core/wrapper/layout/layout.inline.js index 661a6bf77..e837af6fc 100644 --- a/src/core/wrapper/layout/layout.inline.js +++ b/src/core/wrapper/layout/layout.inline.js @@ -1,19 +1,26 @@ +import { shortcut } from "../../decorator"; +import { Layout } from "../layout"; +import { extend, isFunction, isNull } from "../../2.base"; +import { pixFormat, HorizontalAlign, VerticalAlign } from "../../constant"; + /** * 内联布局 - * @class BI.InlineLayout - * @extends BI.Layout + * @class InlineLayout + * @extends Layout * * @cfg {JSON} options 配置属性 * @cfg {Number} [hgap=0] 水平间隙 * @cfg {Number} [vgap=0] 垂直间隙 */ -BI.InlineLayout = BI.inherit(BI.Layout, { +@shortcut() +export class InlineLayout extends Layout { + static xtype = "bi.inline"; - props: function () { - return BI.extend(BI.InlineLayout.superclass.props.apply(this, arguments), { + props() { + return extend(super.props(...arguments), { baseCls: "bi-i", - horizontalAlign: BI.HorizontalAlign.Left, - verticalAlign: BI.VerticalAlign.Top, + horizontalAlign: HorizontalAlign.Left, + verticalAlign: VerticalAlign.Top, columnSize: [], hgap: 0, vgap: 0, @@ -21,80 +28,80 @@ BI.InlineLayout = BI.inherit(BI.Layout, { rgap: 0, tgap: 0, bgap: 0, - items: [] + items: [], }); - }, + } - render: function () { - BI.InlineLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; + render() { + super.render(...arguments); + const o = this.options; this.element.css({ - textAlign: o.horizontalAlign + textAlign: o.horizontalAlign, }); - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); + const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { + this.populate(newValue); }) : o.items; this.populate(items); - }, + } - _addElement: function (i, item) { - var o = this.options; - var w = BI.InlineLayout.superclass._addElement.apply(this, arguments); - var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; + _addElement(i, item) { + const o = this.options; + const w = super._addElement(...arguments); + let columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; if (o.columnSize.length > 0) { if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) { columnSize = null; } } if (columnSize > 0) { - w.element.width(columnSize < 1 ? ((columnSize * 100).toFixed(1) + "%") : BI.pixFormat(columnSize)); + w.element.width(columnSize < 1 ? (`${(columnSize * 100).toFixed(1)}%`) : pixFormat(columnSize)); } w.element.css({ position: "relative", - "vertical-align": o.verticalAlign + "vertical-align": o.verticalAlign, }); w.element.addClass("i-item"); if (columnSize === "fill" || columnSize === "") { - var length = 0, gap = o.hgap + o.innerHgap; - var fillCount = 0, autoCount = 0; - for (var k = 0, len = o.columnSize.length || o.items.length; k < len; k++) { - var cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width; + let length = 0, gap = o.hgap + o.innerHgap; + let fillCount = 0, autoCount = 0; + for (let k = 0, len = o.columnSize.length || o.items.length; k < len; k++) { + let cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width; if (cz === "fill") { fillCount++; cz = 0; - } else if (cz === "" || BI.isNull(cz)) { + } else if (cz === "" || isNull(cz)) { autoCount++; cz = 0; } gap += o.hgap + o.lgap + o.rgap + this._optimiseItemLgap(o.items[k]) + this._optimiseItemRgap(o.items[k]) + this._optimiseItemHgap(o.items[k]); length += cz; } - length = length > 0 && length < 1 ? (length * 100).toFixed(1) + "%" : BI.pixFormat(length); - gap = gap > 0 && gap < 1 ? (gap * 100).toFixed(1) + "%" : BI.pixFormat(gap); + length = length > 0 && length < 1 ? `${(length * 100).toFixed(1)}%` : pixFormat(length); + gap = gap > 0 && gap < 1 ? `${(gap * 100).toFixed(1)}%` : pixFormat(gap); if (columnSize === "fill") { - w.element.css("min-width", "calc((100% - " + length + " - " + gap + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")"); + w.element.css("min-width", `calc((100% - ${length} - ${gap})${fillCount > 1 ? `/${fillCount}` : ""})`); } - if (o.horizontalAlign === BI.HorizontalAlign.Stretch || !(o.scrollable === true || o.scrollx === true)) { + if (o.horizontalAlign === HorizontalAlign.Stretch || !(o.scrollable === true || o.scrollx === true)) { if (columnSize === "fill") { - w.element.css("max-width", "calc((100% - " + length + " - " + gap + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")"); + w.element.css("max-width", `calc((100% - ${length} - ${gap})${fillCount > 1 ? `/${fillCount}` : ""})`); } else { - w.element.css("max-width", "calc((100% - " + length + " - " + gap + ")" + (autoCount > 1 ? "/" + autoCount : "") + ")"); + w.element.css("max-width", `calc((100% - ${length} - ${gap})${autoCount > 1 ? `/${autoCount}` : ""})`); } } } this._handleGap(w, item, i); - if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) { - var top = o.innerVgap + o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item), + if (o.verticalAlign === VerticalAlign.Stretch && isNull(item.height)) { + const top = o.innerVgap + o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item), bottom = o.innerVgap + o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item); - var gap = (top + bottom) > 0 && (top + bottom) < 1 ? ((top + bottom) * 100).toFixed(1) + "%" : BI.pixFormat(top + bottom); - w.element.css("height", "calc(100% - " + gap + ")"); + const gap = (top + bottom) > 0 && (top + bottom) < 1 ? `${((top + bottom) * 100).toFixed(1)}%` : pixFormat(top + bottom); + w.element.css("height", `calc(100% - ${gap})`); } + return w; - }, + } - populate: function (items) { - BI.InlineLayout.superclass.populate.apply(this, arguments); + populate(...args) { + super.populate(...args); this._mount(); } -}); -BI.shortcut("bi.inline", BI.InlineLayout); +} diff --git a/src/core/wrapper/layout/layout.lattice.js b/src/core/wrapper/layout/layout.lattice.js index 34845aa7b..65d049976 100644 --- a/src/core/wrapper/layout/layout.lattice.js +++ b/src/core/wrapper/layout/layout.lattice.js @@ -1,43 +1,52 @@ +import { shortcut } from "../../decorator"; +import { Layout } from "../layout"; +import { extend, isFunction, sum } from "../../2.base"; + /** * 靠左对齐的自由浮动布局 - * @class BI.LatticeLayout - * @extends BI.Layout + * @class LatticeLayout + * @extends Layout * * @cfg {JSON} options 配置属性 * @cfg {Number} [hgap=0] 水平间隙 * @cfg {Number} [vgap=0] 垂直间隙 */ -BI.LatticeLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.LatticeLayout.superclass.props.apply(this, arguments), { - baseCls: "bi-lattice clearfix" +@shortcut() +export class LatticeLayout extends Layout { + static xtype = "bi.lattice"; + + props() { + return extend(super.props(...arguments), { + baseCls: "bi-lattice clearfix", // columnSize: [0.2, 0.2, 0.6], }); - }, - render: function () { - BI.LatticeLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { + } + + render() { + super.render(...arguments); + const self = this, o = this.options; + const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { self.populate(newValue); }) : o.items; this.populate(items); - }, + } - _addElement: function (i, item) { - var o = this.options; - var w = BI.LatticeLayout.superclass._addElement.apply(this, arguments); + _addElement(i, item) { + const o = this.options; + const w = super._addElement(...arguments); + let width; if (o.columnSize && o.columnSize[i]) { - var width = o.columnSize[i] / BI.sum(o.columnSize) * 100 + "%"; + width = `${o.columnSize[i] / sum(o.columnSize) * 100}%`; } else { - var width = 1 / this.options.items.length * 100 + "%"; + width = `${1 / this.options.items.length * 100}%`; } - w.element.css({position: "relative", float: "left", width: width}); + w.element.css({ position: "relative", "float": "left", width }); + return w; - }, + } - populate: function (items) { - BI.LatticeLayout.superclass.populate.apply(this, arguments); + populate(...args) { + super.populate(...args); this._mount(); } -}); -BI.shortcut("bi.lattice", BI.LatticeLayout); +} diff --git a/src/core/wrapper/layout/layout.table.js b/src/core/wrapper/layout/layout.table.js index 51d6eeb14..ec75bc8f0 100644 --- a/src/core/wrapper/layout/layout.table.js +++ b/src/core/wrapper/layout/layout.table.js @@ -1,36 +1,46 @@ +import { shortcut } from "../../decorator"; +import { Layout } from "../layout"; +import { extend, isFunction, range, isArray, map, reduce, isEmpty, formatEL } from "../../2.base"; +import { Widget } from "../../4.widget"; +import { HorizontalAlign, VerticalAlign } from "../../constant"; + /** * 上下的高度固定/左右的宽度固定，中间的高度/宽度自适应 * - * @class BI.TableLayout - * @extends BI.Layout + * @class TableLayout + * @extends Layout */ -BI.TableLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.TableLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class TableLayout extends Layout { + static xtype = "bi.table"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-t", // scrolly: true, columnSize: [], rowSize: [], - horizontalAlign: BI.HorizontalAlign.Stretch, - verticalAlign: BI.VerticalAlign.Stretch, + horizontalAlign: HorizontalAlign.Stretch, + verticalAlign: VerticalAlign.Stretch, // rowSize: 30, // or [30,30,30] hgap: 0, vgap: 0, items: [], }); - }, - render: function () { - BI.TableLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); + } + + render() { + super.render(...arguments); + const o = this.options; + const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { + this.populate(newValue); }) : o.items; - var columnSize = o.columnSize.length > 0 ? o.columnSize : BI.range(items[0].length).fill(""); + const columnSize = o.columnSize.length > 0 ? o.columnSize : range(items[0].length).fill(""); if (columnSize.length > 0) { - var template = []; - for (var i = 0; i < columnSize.length; i++) { + const template = []; + for (let i = 0; i < columnSize.length; i++) { if (columnSize[i] === "") { template.push("auto"); } else if (columnSize[i] === "fill") { @@ -41,9 +51,7 @@ BI.TableLayout = BI.inherit(BI.Layout, { } this.element.css({ "grid-template-columns": template.join(" "), - "grid-template-rows": BI.isArray(o.rowSize) ? BI.map(o.rowSize, function (i, size) { - return self._optimiseGap(size); - }).join(" ") : BI.range(o.items.length).fill(this._optimiseGap(o.rowSize)).join(" "), + "grid-template-rows": isArray(o.rowSize) ? map(o.rowSize, (i, size) => this._optimiseGap(size)).join(" ") : range(o.items.length).fill(this._optimiseGap(o.rowSize)).join(" "), "grid-row-gap": this._optimiseGap(o.vgap), "grid-column-gap": this._optimiseGap(o.hgap), }); @@ -51,15 +59,15 @@ BI.TableLayout = BI.inherit(BI.Layout, { return { type: "bi.default", - ref: function (_ref) { - self.layout = _ref; + ref(_ref) { + this.layout = _ref; }, items: this._formatItems(items), }; - }, + } - _formatItems: function (items) { - var o = this.options, self = this; + _formatItems(items) { + const o = this.options; function firstElement (item, cls) { item.addClass(cls); @@ -74,9 +82,9 @@ BI.TableLayout = BI.inherit(BI.Layout, { } function first (item, cls) { - if (item instanceof BI.Widget) { + if (item instanceof Widget) { return firstElement(item.element, cls); - } else if (item.el instanceof BI.Widget) { + } else if (item.el instanceof Widget) { return firstElement(item.el.element, cls); } else if (item.el) { return firstObject(item.el, cls); @@ -91,30 +99,27 @@ BI.TableLayout = BI.inherit(BI.Layout, { columnSize: ["fill"], horizontalAlign: o.horizontalAlign, verticalAlign: o.verticalAlign, - items: [BI.formatEL(item)], + items: [formatEL(item)], }; } - return BI.reduce(items, function (rowItems, result, rowIndex) { - return result.concat(BI.map(rowItems, function (colIndex, item) { - var cls = self.getRowColumnCls(rowIndex, colIndex, items.length - 1, rowItems.length - 1); - if (BI.isEmpty(item)) { - return first(wrapLayout({ - type: "bi.layout", - }), cls); - } + return reduce(items, (rowItems, result, rowIndex) => result.concat(map(rowItems, (colIndex, item) => { + const cls = this.getRowColumnCls(rowIndex, colIndex, items.length - 1, rowItems.length - 1); + if (isEmpty(item)) { + return first(wrapLayout({ + type: "bi.layout", + }), cls); + } - return first(wrapLayout(item), cls); - })); - }, []); - }, + return first(wrapLayout(item), cls); + })), []); + } - resize: function () { + resize() { // console.log("table布局不需要resize"); - }, + } - populate: function (items) { + populate(items) { this.layout.populate(this._formatItems(items)); - }, -}); -BI.shortcut("bi.table", BI.TableLayout); + } +} diff --git a/src/core/wrapper/layout/layout.tape.js b/src/core/wrapper/layout/layout.tape.js index 9303f5865..9ad981f4e 100644 --- a/src/core/wrapper/layout/layout.tape.js +++ b/src/core/wrapper/layout/layout.tape.js @@ -1,13 +1,22 @@ +import { shortcut } from "../../decorator"; +import { Layout } from "../layout"; +import { extend, isFunction, compact, each, isEmptyObject, isNumber, isNull, any, backAny } from "../../2.base"; +import { _lazyCreateWidget } from "../../5.inject"; +import { HorizontalAlign, VerticalAlign } from "../../constant"; + /** * 水平tape布局 - * @class BI.HTapeLayout - * @extends BI.Layout + * @class HTapeLayout + * @extends Layout */ -BI.HTapeLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.HTapeLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class HTapeLayout extends Layout { + static xtype = "bi.htape"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-h-tape", - verticalAlign: BI.VerticalAlign.Top, + verticalAlign: VerticalAlign.Top, hgap: 0, vgap: 0, lgap: 0, @@ -15,37 +24,39 @@ BI.HTapeLayout = BI.inherit(BI.Layout, { tgap: 0, bgap: 0, columnSize: [], - items: [] + items: [], }); - }, - render: function () { - BI.HTapeLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); + } + + render() { + super.render(...arguments); + const o = this.options; + const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { + this.populate(newValue); }) : o.items; this.populate(items); - }, + } - addItem: function (item) { + addItem(item) { // do nothing throw new Error("不能添加子组件"); - }, + } - stroke: function (items) { - var self = this, o = this.options; - items = BI.compact(items); - BI.each(items, function (i, item) { - if (BI.isEmptyObject(item)) { + stroke(items) { + const o = this.options; + items = compact(items); + each(items, (i, item) => { + let w; + if (isEmptyObject(item)) { return; } - if (!self.hasWidget(self._getChildName(i))) { - var w = BI._lazyCreateWidget(item); - self.addWidget(self._getChildName(i), w); + if (!this.hasWidget(this._getChildName(i))) { + w = _lazyCreateWidget(item); + this.addWidget(this._getChildName(i), w); } else { - w = self.getWidgetByName(self._getChildName(i)); + w = this.getWidgetByName(this._getChildName(i)); } - var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; + let columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; if (o.columnSize.length > 0) { if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) { columnSize = item.width; @@ -53,90 +64,92 @@ BI.HTapeLayout = BI.inherit(BI.Layout, { } w.element.css({ position: "absolute", - top: self._optimiseGap(self._optimiseItemTgap(item) + self._optimiseItemVgap(item) + o.innerVgap + o.vgap + o.tgap), - bottom: self._optimiseGap(self._optimiseItemBgap(item) + self._optimiseItemVgap(item) + o.innerVgap + o.vgap + o.bgap), - width: BI.isNumber(columnSize) ? self._optimiseGap(columnSize) : "" + top: this._optimiseGap(this._optimiseItemTgap(item) + this._optimiseItemVgap(item) + o.innerVgap + o.vgap + o.tgap), + bottom: this._optimiseGap(this._optimiseItemBgap(item) + this._optimiseItemVgap(item) + o.innerVgap + o.vgap + o.bgap), + width: isNumber(columnSize) ? this._optimiseGap(columnSize) : "", }); - if (o.verticalAlign === BI.VerticalAlign.Middle) { + if (o.verticalAlign === VerticalAlign.Middle) { w.element.css({ marginTop: "auto", - marginBottom: "auto" + marginBottom: "auto", }); - } else if (o.verticalAlign === BI.VerticalAlign.Bottom) { + } else if (o.verticalAlign === VerticalAlign.Bottom) { w.element.css({ - marginTop: "auto" + marginTop: "auto", }); } }); - var left = {}, right = {}; + const left = {}, right = {}; left[0] = o.innerHgap; right[items.length - 1] = o.innerHgap; - BI.any(items, function (i, item) { - if (BI.isEmptyObject(item)) { + any(items, (i, item) => { + if (isEmptyObject(item)) { return true; } - var w = self.getWidgetByName(self._getChildName(i)); - var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; + const w = this.getWidgetByName(this._getChildName(i)); + let columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; if (o.columnSize.length > 0) { if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) { columnSize = item.width; } } - if (BI.isNull(left[i])) { - var preColumnSize = o.columnSize.length > 0 ? o.columnSize[i - 1] : items[i - 1].width; - left[i] = left[i - 1] + preColumnSize + self._optimiseItemLgap(items[i - 1]) + self._optimiseItemRgap(items[i - 1]) + 2 * self._optimiseItemHgap(items[i - 1]) + o.hgap + o.lgap + o.rgap; + if (isNull(left[i])) { + const preColumnSize = o.columnSize.length > 0 ? o.columnSize[i - 1] : items[i - 1].width; + left[i] = left[i - 1] + preColumnSize + this._optimiseItemLgap(items[i - 1]) + this._optimiseItemRgap(items[i - 1]) + 2 * this._optimiseItemHgap(items[i - 1]) + o.hgap + o.lgap + o.rgap; } w.element.css({ - left: self._optimiseGap(left[i] + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) + o.hgap + o.lgap) + left: this._optimiseGap(left[i] + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) + o.hgap + o.lgap), }); - if (BI.isNull(columnSize) || columnSize === "" || columnSize === "fill") { + if (isNull(columnSize) || columnSize === "" || columnSize === "fill") { return true; } }); - BI.backAny(items, function (i, item) { - if (BI.isEmptyObject(item)) { + backAny(items, (i, item) => { + if (isEmptyObject(item)) { return true; } - var w = self.getWidgetByName(self._getChildName(i)); - var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; - if (BI.isNull(right[i])) { - var nextColumnSize = o.columnSize.length > 0 ? o.columnSize[i + 1] : items[i + 1].width; - right[i] = right[i + 1] + nextColumnSize + self._optimiseItemLgap(items[i + 1]) + self._optimiseItemRgap(items[i + 1]) + 2 * self._optimiseItemHgap(items[i + 1]) + o.hgap + o.lgap + o.rgap; + const w = this.getWidgetByName(this._getChildName(i)); + const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; + if (isNull(right[i])) { + const nextColumnSize = o.columnSize.length > 0 ? o.columnSize[i + 1] : items[i + 1].width; + right[i] = right[i + 1] + nextColumnSize + this._optimiseItemLgap(items[i + 1]) + this._optimiseItemRgap(items[i + 1]) + 2 * this._optimiseItemHgap(items[i + 1]) + o.hgap + o.lgap + o.rgap; } w.element.css({ - right: self._optimiseGap(right[i] + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) + o.hgap + o.rgap) + right: this._optimiseGap(right[i] + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) + o.hgap + o.rgap), }); - if (BI.isNull(columnSize) || columnSize === "" || columnSize === "fill") { + if (isNull(columnSize) || columnSize === "" || columnSize === "fill") { return true; } }); - }, + } - update: function (opt) { + update(opt) { return this.forceUpdate(opt); - }, + } - populate: function (items) { - BI.HTapeLayout.superclass.populate.apply(this, arguments); + populate(items) { + super.populate(...arguments); this._mount(); } -}); -BI.shortcut("bi.htape", BI.HTapeLayout); +} /** * 垂直tape布局 - * @class BI.VTapeLayout - * @extends BI.Layout + * @class VTapeLayout + * @extends Layout */ -BI.VTapeLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.VTapeLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class VTapeLayout extends Layout { + static xtype = "bi.vtape"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-v-tape", - horizontalAlign: BI.HorizontalAlign.Left, + horizontalAlign: HorizontalAlign.Left, hgap: 0, vgap: 0, lgap: 0, @@ -144,33 +157,35 @@ BI.VTapeLayout = BI.inherit(BI.Layout, { tgap: 0, bgap: 0, rowSize: [], - items: [] + items: [], }); - }, - render: function () { - BI.VTapeLayout.superclass.render.apply(this, arguments); + } + + render() { + super.render(...arguments); this.populate(this.options.items); - }, + } - addItem: function (item) { + addItem(item) { // do nothing throw new Error("不能添加子组件"); - }, + } - stroke: function (items) { - var self = this, o = this.options; - items = BI.compact(items); - BI.each(items, function (i, item) { - if (BI.isEmptyObject(item)) { + stroke(items) { + const o = this.options; + items = compact(items); + each(items, (i, item) => { + let w; + if (isEmptyObject(item)) { return; } - if (!self.hasWidget(self._getChildName(i))) { - var w = BI._lazyCreateWidget(item); - self.addWidget(self._getChildName(i), w); + if (!this.hasWidget(this._getChildName(i))) { + w = _lazyCreateWidget(item); + this.addWidget(this._getChildName(i), w); } else { - w = self.getWidgetByName(self._getChildName(i)); + w = this.getWidgetByName(this._getChildName(i)); } - var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; + let rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; if (o.rowSize.length > 0) { if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) { rowSize = item.height; @@ -178,76 +193,75 @@ BI.VTapeLayout = BI.inherit(BI.Layout, { } w.element.css({ position: "absolute", - left: self._optimiseGap(self._optimiseItemLgap(item) + self._optimiseItemHgap(item) + o.innerHgap + o.hgap + o.lgap), - right: self._optimiseGap(self._optimiseItemRgap(item) + self._optimiseItemHgap(item) + o.innerHgap + o.hgap + o.rgap), - height: BI.isNumber(rowSize) ? self._optimiseGap(rowSize) : "" + left: this._optimiseGap(this._optimiseItemLgap(item) + this._optimiseItemHgap(item) + o.innerHgap + o.hgap + o.lgap), + right: this._optimiseGap(this._optimiseItemRgap(item) + this._optimiseItemHgap(item) + o.innerHgap + o.hgap + o.rgap), + height: isNumber(rowSize) ? this._optimiseGap(rowSize) : "", }); - if (o.horizontalAlign === BI.HorizontalAlign.Center) { + if (o.horizontalAlign === HorizontalAlign.Center) { w.element.css({ marginLeft: "auto", - marginRight: "auto" + marginRight: "auto", }); - } else if (o.horizontalAlign === BI.HorizontalAlign.Right) { + } else if (o.horizontalAlign === HorizontalAlign.Right) { w.element.css({ - marginLeft: "auto" + marginLeft: "auto", }); } }); - var top = {}, bottom = {}; + const top = {}, bottom = {}; top[0] = o.innerVgap; bottom[items.length - 1] = o.innerVgap; - BI.any(items, function (i, item) { - if (BI.isEmptyObject(item)) { + any(items, (i, item) => { + if (isEmptyObject(item)) { return true; } - var w = self.getWidgetByName(self._getChildName(i)); - var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; + const w = this.getWidgetByName(this._getChildName(i)); + let rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; if (o.rowSize.length > 0) { if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) { rowSize = item.height; } } - if (BI.isNull(top[i])) { - var preRowSize = o.rowSize.length > 0 ? o.rowSize[i - 1] : items[i - 1].height; - top[i] = top[i - 1] + preRowSize + self._optimiseItemTgap(items[i - 1]) + self._optimiseItemBgap(items[i - 1]) + 2 * self._optimiseItemVgap(items[i - 1]) + o.vgap + o.tgap + o.bgap; + if (isNull(top[i])) { + const preRowSize = o.rowSize.length > 0 ? o.rowSize[i - 1] : items[i - 1].height; + top[i] = top[i - 1] + preRowSize + this._optimiseItemTgap(items[i - 1]) + this._optimiseItemBgap(items[i - 1]) + 2 * this._optimiseItemVgap(items[i - 1]) + o.vgap + o.tgap + o.bgap; } w.element.css({ - top: self._optimiseGap(top[i] + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) + o.vgap + o.tgap) + top: this._optimiseGap(top[i] + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) + o.vgap + o.tgap), }); - if (BI.isNull(rowSize) || rowSize === "" || rowSize === "fill") { + if (isNull(rowSize) || rowSize === "" || rowSize === "fill") { return true; } }); - BI.backAny(items, function (i, item) { - if (BI.isEmptyObject(item)) { + backAny(items, (i, item) => { + if (isEmptyObject(item)) { return true; } - var w = self.getWidgetByName(self._getChildName(i)); - var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; - if (BI.isNull(bottom[i])) { - var nextRowSize = o.rowSize.length > 0 ? o.rowSize[i + 1] : items[i + 1].height; - bottom[i] = bottom[i + 1] + nextRowSize + self._optimiseItemTgap(items[i + 1]) + self._optimiseItemBgap(items[i + 1]) + 2 * self._optimiseItemVgap(items[i + 1]) + o.vgap + o.tgap + o.bgap; + const w = this.getWidgetByName(this._getChildName(i)); + const rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; + if (isNull(bottom[i])) { + const nextRowSize = o.rowSize.length > 0 ? o.rowSize[i + 1] : items[i + 1].height; + bottom[i] = bottom[i + 1] + nextRowSize + this._optimiseItemTgap(items[i + 1]) + this._optimiseItemBgap(items[i + 1]) + 2 * this._optimiseItemVgap(items[i + 1]) + o.vgap + o.tgap + o.bgap; } w.element.css({ - bottom: self._optimiseGap(bottom[i] + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) + o.vgap + o.bgap) + bottom: this._optimiseGap(bottom[i] + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) + o.vgap + o.bgap), }); - if (BI.isNull(rowSize) || rowSize === "" || rowSize === "fill") { + if (isNull(rowSize) || rowSize === "" || rowSize === "fill") { return true; } }); - }, + } - update: function (opt) { + update(opt) { return this.forceUpdate(opt); - }, + } - populate: function (items) { - BI.VTapeLayout.superclass.populate.apply(this, arguments); + populate(...args) { + super.populate(...args); this._mount(); } -}); -BI.shortcut("bi.vtape", BI.VTapeLayout); +} diff --git a/src/core/wrapper/layout/layout.td.js b/src/core/wrapper/layout/layout.td.js index cb3221570..e9228ca2d 100644 --- a/src/core/wrapper/layout/layout.td.js +++ b/src/core/wrapper/layout/layout.td.js @@ -1,45 +1,56 @@ +import { shortcut } from "../../decorator"; +import { Layout } from "../layout"; +import { extend, isFunction, isOdd, some, isNumber, isNull } from "../../2.base"; +import { Widget } from "../../4.widget"; +import { _lazyCreateWidget } from "../../5.inject"; +import { HorizontalAlign, VerticalAlign } from "../../constant"; + /** * td布局 - * @class BI.TdLayout - * @extends BI.Layout + * @class TdLayout + * @extends Layout */ -BI.TdLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.TdLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class TdLayout extends Layout { + static xtype = "bi.td"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-td", columnSize: [], rowSize: [], - verticalAlign: BI.VerticalAlign.Middle, - horizontalAlign: BI.HorizontalAlign.Stretch, + verticalAlign: VerticalAlign.Middle, + horizontalAlign: HorizontalAlign.Stretch, hgap: 0, vgap: 0, tgap: 0, bgap: 0, lgap: 0, rgap: 0, - items: [] + items: [], }); - }, - render: function () { - BI.TdLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - this.$table = BI.Widget._renderEngine.createElement("").attr({cellspacing: 0, cellpadding: 0}).css({ + } + + render() { + super.render(...arguments); + const o = this.options; + this.$table = Widget._renderEngine.createElement("
").attr({ cellspacing: 0, cellpadding: 0 }).css({ position: "relative", - width: (o.horizontalAlign === BI.HorizontalAlign.Center || o.horizontalAlign === BI.HorizontalAlign.Stretch) ? "100%" : "auto", - height: (o.verticalAlign !== BI.VerticalAlign.Top) ? "100%" : "auto", + width: (o.horizontalAlign === HorizontalAlign.Center || o.horizontalAlign === HorizontalAlign.Stretch) ? "100%" : "auto", + height: (o.verticalAlign !== VerticalAlign.Top) ? "100%" : "auto", "border-spacing": "0px", border: "none", - "border-collapse": "separate" + "border-collapse": "separate", }); this.rows = 0; - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); + const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { + this.populate(newValue); }) : o.items; this.populate(items); - }, + } - _addElement: function (idx, arr) { - var o = this.options; + _addElement(idx, arr) { + const o = this.options; function firstElement (item, row, col) { if (row === 0) { @@ -48,28 +59,28 @@ BI.TdLayout = BI.inherit(BI.Layout, { if (col === 0) { item.addClass("first-col"); } - item.addClass(BI.isOdd(row + 1) ? "odd-row" : "even-row"); - item.addClass(BI.isOdd(col + 1) ? "odd-col" : "even-col"); + item.addClass(isOdd(row + 1) ? "odd-row" : "even-row"); + item.addClass(isOdd(col + 1) ? "odd-col" : "even-col"); item.addClass("center-element"); } function firstObject (item, row, col) { - var cls = ""; + let cls = ""; if (row === 0) { cls += " first-row"; } if (col === 0) { cls += " first-col"; } - BI.isOdd(row + 1) ? (cls += " odd-row") : (cls += " even-row"); - BI.isOdd(col + 1) ? (cls += " odd-col") : (cls += " even-col"); - item.cls = (item.cls || "") + cls + " center-element"; + isOdd(row + 1) ? (cls += " odd-row") : (cls += " even-row"); + isOdd(col + 1) ? (cls += " odd-col") : (cls += " even-col"); + item.cls = `${(item.cls || "") + cls} center-element`; } function first (item, row, col) { - if (item instanceof BI.Widget) { + if (item instanceof Widget) { firstElement(item.element, row, col); - } else if (item.el instanceof BI.Widget) { + } else if (item.el instanceof Widget) { firstElement(item.el.element, row, col); } else if (item.el) { firstObject(item.el, row, col); @@ -78,30 +89,30 @@ BI.TdLayout = BI.inherit(BI.Layout, { } } - var height = BI.isNumber(o.rowSize) ? this._optimiseGap(o.rowSize) : (o.rowSize[idx] === "" ? this._optimiseGap(1) : this._optimiseGap(o.rowSize[idx])); - var tr = BI._lazyCreateWidget({ + const height = isNumber(o.rowSize) ? this._optimiseGap(o.rowSize) : (o.rowSize[idx] === "" ? this._optimiseGap(1) : this._optimiseGap(o.rowSize[idx])); + const tr = _lazyCreateWidget({ type: "bi.default", tagName: "tr", - height: height, + height, css: { "max-height": height, - "min-height": height - } + "min-height": height, + }, }); - for (var i = 0; i < arr.length; i++) { - var w = BI._lazyCreateWidget(arr[i]); - if (o.verticalAlign === BI.VerticalAlign.Stretch) { - var top = o.vgap + o.tgap + this._optimiseItemTgap(arr[i]) + this._optimiseItemVgap(arr[i]), + for (let i = 0; i < arr.length; i++) { + const w = _lazyCreateWidget(arr[i]); + if (o.verticalAlign === VerticalAlign.Stretch) { + const top = o.vgap + o.tgap + this._optimiseItemTgap(arr[i]) + this._optimiseItemVgap(arr[i]), bottom = o.vgap + o.bgap + this._optimiseItemBgap(arr[i]) + this._optimiseItemVgap(arr[i]); - w.element.css("height", "calc(100% - " + this._optimiseGap(top + bottom) + ")"); + w.element.css("height", `calc(100% - ${this._optimiseGap(top + bottom)})`); } - w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"}); - var item = arr[i]; + w.element.css({ position: "relative", top: "0", left: "0", margin: "0px auto" }); + const item = arr[i]; this._handleGap(w, item, i); first(w, this.rows++, i); - var width = ""; - var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; + let width = ""; + const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; if (columnSize > 0) { width = this._optimiseGap(columnSize + (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap); } @@ -109,20 +120,21 @@ BI.TdLayout = BI.inherit(BI.Layout, { if (o.columnSize.length > 0) { return o.columnSize.indexOf("fill") >= 0; } - return BI.some(arr, function (i, item) { + + return some(arr, (i, item) => { if (item.width === "fill") { return true; } }); } - if ((BI.isNull(columnSize) || columnSize === "") && hasFill()) { + if ((isNull(columnSize) || columnSize === "") && hasFill()) { width = 2; } - var td = BI._lazyCreateWidget({ + const td = _lazyCreateWidget({ type: "bi.default", - width: width, + width, tagName: "td", - items: [w] + items: [w], }); // 对于表现为td的元素设置最大宽度，有几点需要注意 // 1、由于直接对td设置最大宽度是在规范中未定义的, 所以要使用类似td:firstChild来迂回实现 @@ -131,7 +143,7 @@ BI.TdLayout = BI.inherit(BI.Layout, { if (columnSize > 0) { td.element.css({ "max-width": width, - "min-width": width + "min-width": width, }); } td.element.css({ @@ -139,30 +151,30 @@ BI.TdLayout = BI.inherit(BI.Layout, { "vertical-align": o.verticalAlign, margin: "0", padding: "0", - border: "none" + border: "none", }); tr.addItem(td); } this.addWidget(this._getChildName(idx), tr); + return tr; - }, + } - appendFragment: function (frag) { + appendFragment(frag) { this.$table.append(frag); this.element.append(this.$table); - }, + } - resize: function () { + resize() { // console.log("td布局不需要resize"); - }, + } - update: function (opt) { + update(opt) { return this.forceUpdate(opt); - }, + } - populate: function (items) { - BI.TdLayout.superclass.populate.apply(this, arguments); + populate(...args) { + super.populate(...args); this._mount(); } -}); -BI.shortcut("bi.td", BI.TdLayout); +} diff --git a/src/core/wrapper/layout/layout.vertical.js b/src/core/wrapper/layout/layout.vertical.js index b181b1d41..ada08e063 100644 --- a/src/core/wrapper/layout/layout.vertical.js +++ b/src/core/wrapper/layout/layout.vertical.js @@ -1,54 +1,63 @@ +import { shortcut } from "../../decorator"; +import { Layout } from "../layout"; +import { extend, isFunction } from "../../2.base"; +import { HorizontalAlign } from "../../constant"; + /** * 垂直布局 - * @class BI.VerticalLayout - * @extends BI.Layout + * @class VerticalLayout + * @extends Layout */ -BI.VerticalLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.VerticalLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class VerticalLayout extends Layout { + static xtype = "bi.vertical"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-v", - horizontalAlign: BI.HorizontalAlign.Stretch, + horizontalAlign: HorizontalAlign.Stretch, hgap: 0, vgap: 0, lgap: 0, rgap: 0, tgap: 0, bgap: 0, - scrolly: true + scrolly: true, }); - }, - render: function () { - BI.VerticalLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); + } + + render() { + super.render(...arguments); + const o = this.options; + const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { + this.populate(newValue); }) : o.items; this.populate(items); - }, + } - _addElement: function (i, item) { - var o = this.options; - var w = BI.VerticalLayout.superclass._addElement.apply(this, arguments); + _addElement(i, item) { + const o = this.options; + const w = super._addElement(...arguments); w.element.css({ - position: "relative" + position: "relative", }); this._handleGap(w, item, null, i); - if (o.horizontalAlign === BI.HorizontalAlign.Center) { + if (o.horizontalAlign === HorizontalAlign.Center) { w.element.css({ marginLeft: "auto", - marginRight: "auto" + marginRight: "auto", }); - } else if (o.horizontalAlign === BI.HorizontalAlign.Right) { + } else if (o.horizontalAlign === HorizontalAlign.Right) { w.element.css({ - marginLeft: "auto" + marginLeft: "auto", }); } + return w; - }, + } - populate: function (items) { - BI.VerticalLayout.superclass.populate.apply(this, arguments); + populate(...args) { + super.populate(...args); this._mount(); } -}); -BI.shortcut("bi.vertical", BI.VerticalLayout); +} diff --git a/src/core/wrapper/layout/layout.window.js b/src/core/wrapper/layout/layout.window.js index a6e6c6a26..34dfe422f 100644 --- a/src/core/wrapper/layout/layout.window.js +++ b/src/core/wrapper/layout/layout.window.js @@ -1,11 +1,20 @@ +import { shortcut } from "../../decorator"; +import { Layout } from "../layout"; +import { extend, isFunction, makeArray, isNumber, isNull } from "../../2.base"; +import { Widget } from "../../4.widget"; +import { _lazyCreateWidget } from "../../5.inject"; + /** * - * @class BI.WindowLayout - * @extends BI.Layout + * @class WindowLayout + * @extends Layout */ -BI.WindowLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.WindowLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class WindowLayout extends Layout { + static xtype = "bi.window"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-window", columns: 3, rows: 2, @@ -17,30 +26,31 @@ BI.WindowLayout = BI.inherit(BI.Layout, { bgap: 0, columnSize: [], rowSize: [], - items: [] + items: [], }); - }, - render: function () { - BI.WindowLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); + } + + render() { + super.render(...arguments); + const o = this.options; + const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { + this.populate(newValue); }) : o.items; this.populate(items); - }, + } - addItem: function (item) { + addItem(item) { // do nothing throw new Error("不能添加子组件"); - }, + } - stroke: function (items) { - var o = this.options, self = this; - if (BI.isNumber(o.rowSize)) { - o.rowSize = BI.makeArray(o.items.length, 1 / o.items.length); + stroke(items) { + const o = this.options; + if (isNumber(o.rowSize)) { + o.rowSize = makeArray(o.items.length, 1 / o.items.length); } - if (BI.isNumber(o.columnSize)) { - o.columnSize = BI.makeArray(o.items[0].length, 1 / o.items[0].length); + if (isNumber(o.columnSize)) { + o.columnSize = makeArray(o.items[0].length, 1 / o.items[0].length); } function firstElement (item, cls) { @@ -56,9 +66,9 @@ BI.WindowLayout = BI.inherit(BI.Layout, { } function first (item, row, col) { - if (item instanceof BI.Widget) { + if (item instanceof Widget) { firstElement(item.element, row, col); - } else if (item.el instanceof BI.Widget) { + } else if (item.el instanceof Widget) { firstElement(item.el.element, row, col); } else if (item.el) { firstObject(item.el, row, col); @@ -67,108 +77,111 @@ BI.WindowLayout = BI.inherit(BI.Layout, { } } - for (var i = 0; i < o.rows; i++) { - for (var j = 0; j < o.columns; j++) { + for (let i = 0; i < o.rows; i++) { + for (let j = 0; j < o.columns; j++) { if (!o.items[i][j]) { throw new Error("构造错误", o.items); } - if (!this.hasWidget(this._getChildName(i + "_" + j))) { - var w = BI._lazyCreateWidget(o.items[i][j]); - w.element.css({position: "absolute"}); - this.addWidget(this._getChildName(i + "_" + j), w); + if (!this.hasWidget(this._getChildName(`${i}_${j}`))) { + const w = _lazyCreateWidget(o.items[i][j]); + w.element.css({ position: "absolute" }); + this.addWidget(this._getChildName(`${i}_${j}`), w); } } } - var left = {}, right = {}, top = {}, bottom = {}; + const left = {}, right = {}, top = {}, bottom = {}; left[0] = 0; top[0] = 0; right[o.columns - 1] = 0; bottom[o.rows - 1] = 0; // 从上到下 - for (var i = 0; i < o.rows; i++) { - for (var j = 0; j < o.columns; j++) { - var wi = this.getWidgetByName(this._getChildName(i + "_" + j)); - if (BI.isNull(top[i])) { + for (let i = 0; i < o.rows; i++) { + for (let j = 0; j < o.columns; j++) { + const wi = this.getWidgetByName(this._getChildName(`${i}_${j}`)); + if (isNull(top[i])) { top[i] = top[i - 1] + (o.rowSize[i - 1] < 1 ? o.rowSize[i - 1] : o.rowSize[i - 1] + o.vgap + o.bgap); } - var t = this._optimiseGap(top[i] + o.vgap + o.tgap), h = ""; - if (BI.isNumber(o.rowSize[i])) { + const t = this._optimiseGap(top[i] + o.vgap + o.tgap); + let h = ""; + if (isNumber(o.rowSize[i])) { h = this._optimiseGap(o.rowSize[i]); } - wi.element.css({top: t, height: h}); - first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1)); + wi.element.css({ top: t, height: h }); + first(wi, this.getRowColumnCls(i, j, o.rows - 1, o.columns - 1)); } - if (!BI.isNumber(o.rowSize[i])) { + if (!isNumber(o.rowSize[i])) { break; } } // 从下到上 - for (var i = o.rows - 1; i >= 0; i--) { - for (var j = 0; j < o.columns; j++) { - var wi = this.getWidgetByName(this._getChildName(i + "_" + j)); - if (BI.isNull(bottom[i])) { + for (let i = o.rows - 1; i >= 0; i--) { + for (let j = 0; j < o.columns; j++) { + const wi = this.getWidgetByName(this._getChildName(`${i}_${j}`)); + if (isNull(bottom[i])) { bottom[i] = bottom[i + 1] + (o.rowSize[i + 1] < 1 ? o.rowSize[i + 1] : o.rowSize[i + 1] + o.vgap + o.tgap); } - var b = this._optimiseGap(bottom[i] + o.vgap + o.bgap), h = ""; - if (BI.isNumber(o.rowSize[i])) { + const b = this._optimiseGap(bottom[i] + o.vgap + o.bgap); + let h = ""; + if (isNumber(o.rowSize[i])) { h = this._optimiseGap(o.rowSize[i]); } - wi.element.css({bottom: b, height: h}); - first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1)); + wi.element.css({ bottom: b, height: h }); + first(wi, this.getRowColumnCls(i, j, o.rows - 1, o.columns - 1)); } - if (!BI.isNumber(o.rowSize[i])) { + if (!isNumber(o.rowSize[i])) { break; } } // 从左到右 - for (var j = 0; j < o.columns; j++) { - for (var i = 0; i < o.rows; i++) { - var wi = this.getWidgetByName(this._getChildName(i + "_" + j)); - if (BI.isNull(left[j])) { + for (let j = 0; j < o.columns; j++) { + for (let i = 0; i < o.rows; i++) { + const wi = this.getWidgetByName(this._getChildName(`${i}_${j}`)); + if (isNull(left[j])) { left[j] = left[j - 1] + (o.columnSize[j - 1] < 1 ? o.columnSize[j - 1] : o.columnSize[j - 1] + o.hgap + o.rgap); } - var l = this._optimiseGap(left[j] + o.hgap + o.lgap), w = ""; - if (BI.isNumber(o.columnSize[j])) { + const l = this._optimiseGap(left[j] + o.hgap + o.lgap); + let w = ""; + if (isNumber(o.columnSize[j])) { w = this._optimiseGap(o.columnSize[j]); } - wi.element.css({left: l, width: w}); - first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1)); + wi.element.css({ left: l, width: w }); + first(wi, this.getRowColumnCls(i, j, o.rows - 1, o.columns - 1)); } - if (!BI.isNumber(o.columnSize[j])) { + if (!isNumber(o.columnSize[j])) { break; } } // 从右到左 - for (var j = o.columns - 1; j >= 0; j--) { - for (var i = 0; i < o.rows; i++) { - var wi = this.getWidgetByName(this._getChildName(i + "_" + j)); - if (BI.isNull(right[j])) { + for (let j = o.columns - 1; j >= 0; j--) { + for (let i = 0; i < o.rows; i++) { + const wi = this.getWidgetByName(this._getChildName(`${i}_${j}`)); + if (isNull(right[j])) { right[j] = right[j + 1] + (o.columnSize[j + 1] < 1 ? o.columnSize[j + 1] : o.columnSize[j + 1] + o.hgap + o.lgap); } - var r = this._optimiseGap(right[j] + o.hgap + o.rgap), w = ""; - if (BI.isNumber(o.columnSize[j])) { + const r = this._optimiseGap(right[j] + o.hgap + o.rgap); + let w = ""; + if (isNumber(o.columnSize[j])) { w = this._optimiseGap(o.columnSize[j]); } - wi.element.css({right: r, width: w}); - first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1)); + wi.element.css({ right: r, width: w }); + first(wi, this.getRowColumnCls(i, j, o.rows - 1, o.columns - 1)); } - if (!BI.isNumber(o.columnSize[j])) { + if (!isNumber(o.columnSize[j])) { break; } } - }, + } - resize: function () { + resize() { // console.log("window布局不需要resize"); - }, + } - update: function (opt) { + update(opt) { return this.forceUpdate(opt); - }, + } - populate: function (items) { - BI.WindowLayout.superclass.populate.apply(this, arguments); + populate(...args) { + super.populate(...args); this._mount(); } -}); -BI.shortcut("bi.window", BI.WindowLayout); +}