From 2aefcaac8b8a6d9ad2787dd2e4215d0184f514ae Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Tue, 10 Jan 2023 20:47:52 +0800 Subject: [PATCH] =?UTF-8?q?KERNEL-14035=20refactor:=20=E5=89=A9=E4=BD=99?= =?UTF-8?q?=E7=9A=84layout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/0.base.js | 4 +- src/core/wrapper/layout/fill/auto.vtape.js | 100 +++++----- .../wrapper/layout/fill/fill.horizontal.js | 9 +- src/core/wrapper/layout/fill/fill.vertical.js | 9 +- .../layout/fill/float.fill.horizontal.js | 147 ++++++++------- src/core/wrapper/layout/fill/index.js | 4 + src/core/wrapper/layout/flex/flex.center.js | 49 +++-- .../layout/flex/flex.horizontal.center.js | 55 +++--- .../wrapper/layout/flex/flex.horizontal.js | 72 ++++--- .../flex/flex.leftrightvertical.center.js | 96 +++++----- .../layout/flex/flex.vertical.center.js | 55 +++--- src/core/wrapper/layout/flex/flex.vertical.js | 68 ++++--- src/core/wrapper/layout/flex/index.js | 7 + .../flex/wrapper/flex.wrapper.center.js | 49 +++-- .../wrapper/flex.wrapper.horizontal.center.js | 55 +++--- .../flex/wrapper/flex.wrapper.horizontal.js | 83 ++++---- .../wrapper/flex.wrapper.vertical.center.js | 55 +++--- .../flex/wrapper/flex.wrapper.vertical.js | 83 ++++---- src/core/wrapper/layout/flex/wrapper/index.js | 5 + .../layout/float/float.absolute.center.js | 46 +++-- .../layout/float/float.absolute.horizontal.js | 66 ++++--- .../float/float.absolute.leftrightvertical.js | 178 ++++++++++-------- .../layout/float/float.absolute.vertical.js | 66 ++++--- .../wrapper/layout/float/float.horizontal.js | 68 ++++--- src/core/wrapper/layout/float/index.js | 5 + src/core/wrapper/layout/index.js | 6 + src/core/wrapper/layout/middle/index.js | 4 + .../wrapper/layout/middle/middle.center.js | 76 ++++---- .../layout/middle/middle.float.center.js | 83 ++++---- .../layout/middle/middle.horizontal.js | 77 ++++---- .../wrapper/layout/middle/middle.vertical.js | 68 ++++--- src/core/wrapper/layout/responsive/index.js | 3 + .../responsive/responsive.flex.horizontal.js | 68 +++---- .../responsive.flex.wrapper.horizontal.js | 72 +++---- .../layout/responsive/responsive.inline..js | 50 ----- .../layout/responsive/responsive.inline.js | 58 ++++++ src/core/wrapper/layout/sticky/index.js | 2 + .../layout/sticky/sticky.horizontal.js | 42 +++-- .../wrapper/layout/sticky/sticky.vertical.js | 42 +++-- 39 files changed, 1190 insertions(+), 895 deletions(-) create mode 100644 src/core/wrapper/layout/fill/index.js create mode 100644 src/core/wrapper/layout/flex/index.js create mode 100644 src/core/wrapper/layout/flex/wrapper/index.js create mode 100644 src/core/wrapper/layout/float/index.js create mode 100644 src/core/wrapper/layout/middle/index.js create mode 100644 src/core/wrapper/layout/responsive/index.js delete mode 100644 src/core/wrapper/layout/responsive/responsive.inline..js create mode 100644 src/core/wrapper/layout/responsive/responsive.inline.js create mode 100644 src/core/wrapper/layout/sticky/index.js diff --git a/src/base/0.base.js b/src/base/0.base.js index e4daef1cf..a2cffed9b 100644 --- a/src/base/0.base.js +++ b/src/base/0.base.js @@ -7,7 +7,7 @@ import { PopoverController, ResizeController, TooltipsController, - StyleLoaderManager, + StyleLoaderManager } from "../core"; const Resizers = new ResizeController(); @@ -20,7 +20,7 @@ const Drawers = new DrawerController(); const Broadcasts = new BroadcastController(); const StyleLoaders = new StyleLoaderManager(); -export { +export { Resizers, Layers, Maskers, diff --git a/src/core/wrapper/layout/fill/auto.vtape.js b/src/core/wrapper/layout/fill/auto.vtape.js index efc784f5d..aa6c2eb9b 100644 --- a/src/core/wrapper/layout/fill/auto.vtape.js +++ b/src/core/wrapper/layout/fill/auto.vtape.js @@ -1,9 +1,17 @@ -BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.AutoVerticalTapeLayout.superclass.props.apply(this, arguments), { +import { shortcut } from "@/core/decorator"; +import { extend, any, isEmptyObject, isNull, backAny } from "@/core/2.base"; +import { HorizontalAlign, VerticalAlign } from "@/core/constant"; +import { Layout } from "../../layout"; + +@shortcut() +export class AutoVerticalTapeLayout extends Layout { + static xtype = "bi.vtape_auto"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-auto-htape", - horizontalAlign: BI.HorizontalAlign.Stretch, - verticalAlign: BI.VerticalAlign.Stretch, + horizontalAlign: HorizontalAlign.Stretch, + verticalAlign: VerticalAlign.Stretch, hgap: 0, vgap: 0, lgap: 0, @@ -11,16 +19,17 @@ BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, { tgap: 0, bgap: 0, rowSize: [], - items: [] + items: [], }); - }, + } - render: function () { - var self = this, o = this.options; + render() { + const o = this.options; + return { type: "bi.vtape", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, items: o.items, horizontalAlign: o.horizontalAlign, @@ -35,65 +44,65 @@ BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, { innerHgap: o.innerHgap, innerVgap: o.innerVgap, }; - }, + } - _handleResize: function () { - var self = this, o = this.options; - var items = o.items; - var top = {}, bottom = {}; + _handleResize() { + const o = this.options; + const items = o.items; + 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.layout.getWidgetByName(self._getChildName(i)); - var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; + const w = this.layout.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; + if (isNull(top[i])) { + let preRowSize = o.rowSize.length > 0 ? o.rowSize[i - 1] : items[i - 1].height; if (preRowSize === "") { - preRowSize = self.layout.getWidgetByName(self._getChildName(i - 1)).element.height(); + preRowSize = this.layout.getWidgetByName(this._getChildName(i - 1)).element.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; + 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 (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.layout.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; + const w = this.layout.getWidgetByName(this._getChildName(i)); + const rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; + if (isNull(bottom[i])) { + let nextRowSize = o.rowSize.length > 0 ? o.rowSize[i + 1] : items[i + 1].height; if (nextRowSize === "") { - nextRowSize = self.layout.getWidgetByName(self._getChildName(i + 1)).element.height(); + nextRowSize = this.layout.getWidgetByName(this._getChildName(i + 1)).element.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; + 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 (rowSize === "fill") { return true; } }); - }, + } - mounted: function () { + mounted() { if (window.ResizeObserver) { this.resizeObserver = new window.ResizeObserver(this._handleResize.bind(this)); this.resizeObserver.observe(this.element[0]); @@ -103,23 +112,22 @@ BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, { this.mutationObserver.observe(this.element[0], { attributes: true, childList: true, - subtree: true + subtree: true, }); } this._handleResize(); - }, + } - destroyed: function () { + destroyed() { this.resizeObserver && this.resizeObserver.unobserve(this.element[0]); this.mutationObserver && this.mutationObserver.disconnect(); - }, + } - 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.vtape_auto", BI.AutoVerticalTapeLayout); +} diff --git a/src/core/wrapper/layout/fill/fill.horizontal.js b/src/core/wrapper/layout/fill/fill.horizontal.js index 72ce8d393..88cc76e7d 100644 --- a/src/core/wrapper/layout/fill/fill.horizontal.js +++ b/src/core/wrapper/layout/fill/fill.horizontal.js @@ -1,6 +1,9 @@ +import { shortcut } from "@/core/decorator"; + /** * 横向填满布局 */ -BI.HorizontalFillLayout = function () { -}; -BI.shortcut("bi.horizontal_fill", BI.HorizontalFillLayout); +@shortcut() +export class HorizontalFillLayout { + static xtype = "bi.horizontal_fill"; +} diff --git a/src/core/wrapper/layout/fill/fill.vertical.js b/src/core/wrapper/layout/fill/fill.vertical.js index 9acd9c307..66fbafa7d 100644 --- a/src/core/wrapper/layout/fill/fill.vertical.js +++ b/src/core/wrapper/layout/fill/fill.vertical.js @@ -1,6 +1,9 @@ +import { shortcut } from "@/core/decorator"; + /** * 纵向填满布局 */ -BI.VerticalFillLayout = function () { -}; -BI.shortcut("bi.vertical_fill", BI.VerticalFillLayout); +@shortcut() +export class VerticalFillLayout { + static xtype = "bi.vertical_fill"; +} diff --git a/src/core/wrapper/layout/fill/float.fill.horizontal.js b/src/core/wrapper/layout/fill/float.fill.horizontal.js index 512ffb627..cd3475ad8 100644 --- a/src/core/wrapper/layout/fill/float.fill.horizontal.js +++ b/src/core/wrapper/layout/fill/float.fill.horizontal.js @@ -1,9 +1,18 @@ -BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FloatHorizontalFillLayout.superclass.props.apply(this, arguments), { +import { shortcut } from "@/core/decorator"; +import { extend, any, isEmptyObject, isNull, backAny, isFunction, compact, each } from "@/core/2.base"; +import { _lazyCreateWidget } from "@/core/5.inject"; +import { HorizontalAlign, VerticalAlign } from "@/core/constant"; +import { Layout } from "../../layout"; + +@shortcut() +export class FloatHorizontalFillLayout extends Layout { + static xtype = "bi.horizontal_float_fill"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-h-float-fill clearfix", - horizontalAlign: BI.HorizontalAlign.Stretch, - verticalAlign: BI.VerticalAlign.Stretch, + horizontalAlign: HorizontalAlign.Stretch, + verticalAlign: VerticalAlign.Stretch, hgap: 0, vgap: 0, lgap: 0, @@ -11,134 +20,136 @@ BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, { tgap: 0, bgap: 0, columnSize: [], - items: [] + items: [], }); - }, - render: function () { - BI.FloatHorizontalFillLayout.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); - var rank = 0; + stroke(items) { + const o = this.options; + items = compact(items); + let rank = 0; - function createWidget (i, item, desc) { - if (o.verticalAlign !== BI.VerticalAlign.Stretch) { - var w = BI._lazyCreateWidget({ + const createWidget = (i, item, desc) => { + let w; + if (o.verticalAlign !== VerticalAlign.Stretch) { + w = _lazyCreateWidget({ type: "bi.vertical_adapt", - horizontalAlign: BI.HorizontalAlign.Stretch, + horizontalAlign: HorizontalAlign.Stretch, verticalAlign: o.verticalAlign, columnSize: ["fill"], - items: [item] + items: [item], }); } else { - var w = BI._lazyCreateWidget(item); + w = _lazyCreateWidget(item); } - if (o.vgap + o.tgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) !== 0) { + if (o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) { w.element.css({ - "margin-top": self._optimiseGap(o.vgap + o.tgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item)) + "margin-top": this._optimiseGap(o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item)), }); } if (desc) { - if (o.hgap + o.rgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) { + if (o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) { w.element.css({ - "margin-right": self._optimiseGap((i === o.items.length - 1 ? o.hgap : 0) + o.rgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item)) + "margin-right": this._optimiseGap((i === o.items.length - 1 ? o.hgap : 0) + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item)), }); } - if (o.hgap + o.lgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) { + if (o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) { w.element.css({ - "margin-left": self._optimiseGap(o.hgap + o.lgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item)) + "margin-left": this._optimiseGap(o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item)), }); } } else { - if (o.hgap + o.lgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) { + if (o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) { w.element.css({ - "margin-left": self._optimiseGap((i === 0 ? o.hgap : 0) + o.lgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item)) + "margin-left": this._optimiseGap((i === 0 ? o.hgap : 0) + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item)), }); } - if (o.hgap + o.rgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) { + if (o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) { w.element.css({ - "margin-right": self._optimiseGap(o.hgap + o.rgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item)) + "margin-right": this._optimiseGap(o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item)), }); } } - if (o.vgap + o.bgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) !== 0) { + if (o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) { w.element.css({ - "margin-bottom": self._optimiseGap(o.vgap + o.bgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item)) + "margin-bottom": this._optimiseGap(o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item)), }); } - var top = o.vgap + o.tgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item), - bottom = o.vgap + o.bgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item); - if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) { + const top = o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item), + bottom = o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item); + if (o.verticalAlign === VerticalAlign.Stretch && isNull(item.height)) { w.element.css({ - height: "calc(100% - " + self._optimiseGap(top + bottom) + ")" + height: `calc(100% - ${this._optimiseGap(top + bottom)})`, }); } w.element.css({ - position: "relative" + position: "relative", }); + return w; - } + }; - BI.any(items, function (i, item) { - if (BI.isEmptyObject(item)) { + any(items, (i, item) => { + if (isEmptyObject(item)) { return true; } - var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; + const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; if (columnSize === "fill") { return true; } - var w = createWidget(i, item); - self.addWidget(self._getChildName(rank++), w); + const w = createWidget(i, item); + this.addWidget(this._getChildName(rank++), w); w.element.css({ - float: "left" + "float": "left", }); }); - BI.backAny(items, function (i, item) { - if (BI.isEmptyObject(item)) { + backAny(items, (i, item) => { + if (isEmptyObject(item)) { return true; } - var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; + const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; if (columnSize === "fill") { return true; } - var w = createWidget(i, item, true); - self.addWidget(self._getChildName(rank++), w); + const w = createWidget(i, item, true); + this.addWidget(this._getChildName(rank++), w); w.element.css({ - float: "right" + "float": "right", }); }); - BI.each(items, function (i, item) { - var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; + each(items, (i, item) => { + const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; if (columnSize === "fill") { - var w = createWidget(i, item); - self.addWidget(self._getChildName(rank++), w); + const w = createWidget(i, item); + this.addWidget(this._getChildName(rank++), w); } }); - }, + } - resize: function () { + resize() { // console.log("填充布局不需要resize"); - }, + } - update: function (opt) { + update(opt) { return this.forceUpdate(opt); - }, + } - populate: function (items) { - BI.FloatHorizontalFillLayout.superclass.populate.apply(this, arguments); + populate(...args) { + super.populate(...args); this._mount(); } -}); -BI.shortcut("bi.horizontal_float_fill", BI.FloatHorizontalFillLayout); +} diff --git a/src/core/wrapper/layout/fill/index.js b/src/core/wrapper/layout/fill/index.js new file mode 100644 index 000000000..aefc020d1 --- /dev/null +++ b/src/core/wrapper/layout/fill/index.js @@ -0,0 +1,4 @@ +export { AutoVerticalTapeLayout } from "./auto.vtape"; +export { HorizontalFillLayout } from "./fill.horizontal"; +export { VerticalFillLayout } from "./fill.vertical"; +export { FloatHorizontalFillLayout } from "./float.fill.horizontal"; diff --git a/src/core/wrapper/layout/flex/flex.center.js b/src/core/wrapper/layout/flex/flex.center.js index 8944b3add..caec5842e 100644 --- a/src/core/wrapper/layout/flex/flex.center.js +++ b/src/core/wrapper/layout/flex/flex.center.js @@ -1,30 +1,40 @@ +import { shortcut } from "@/core/decorator"; +import { extend } from "@/core/2.base"; +import { HorizontalAlign, VerticalAlign } from "@/core/constant"; +import { Layout } from "../../layout"; + /** *自适应水平和垂直方向都居中容器 * Created by GUY on 2016/12/2. * - * @class BI.FlexCenterLayout - * @extends BI.Layout + * @class FlexCenterLayout + * @extends Layout */ -BI.FlexCenterLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class FlexCenterLayout extends Layout { + static xtype = "bi.flex_center_adapt"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-f-c", - verticalAlign: BI.VerticalAlign.Middle, - horizontalAlign: BI.HorizontalAlign.Center, + verticalAlign: VerticalAlign.Middle, + horizontalAlign: HorizontalAlign.Center, 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.flex_horizontal", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, horizontalAlign: o.horizontalAlign, verticalAlign: o.verticalAlign, @@ -39,16 +49,15 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, { bgap: o.bgap, innerHgap: o.innerHgap, innerVgap: o.innerVgap, - items: o.items + items: o.items, }; - }, + } - resize: function () { + resize() { this.layout.resize(); - }, + } - populate: function (items) { + populate(items) { this.layout.populate(items); } -}); -BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout); +} diff --git a/src/core/wrapper/layout/flex/flex.horizontal.center.js b/src/core/wrapper/layout/flex/flex.horizontal.center.js index 220f1f394..ffc0d6aac 100644 --- a/src/core/wrapper/layout/flex/flex.horizontal.center.js +++ b/src/core/wrapper/layout/flex/flex.horizontal.center.js @@ -1,15 +1,23 @@ +import { shortcut } from "@/core/decorator"; +import { extend } from "@/core/2.base"; +import { HorizontalAlign, VerticalAlign } from "@/core/constant"; +import { Layout } from "../../layout"; + /** * Created by GUY on 2016/12/2. * - * @class BI.FlexHorizontalCenter - * @extends BI.Layout + * @class FlexHorizontalCenter + * @extends Layout */ -BI.FlexHorizontalCenter = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FlexHorizontalCenter.superclass.props.apply(this, arguments), { +@shortcut() +export class FlexHorizontalCenter extends Layout { + static xtype = "bi.flex_horizontal_adapt"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-f-h-c", - horizontalAlign: BI.HorizontalAlign.Center, - verticalAlign: BI.VerticalAlign.Top, + horizontalAlign: HorizontalAlign.Center, + verticalAlign: VerticalAlign.Top, rowSize: [], scrolly: false, hgap: 0, @@ -17,15 +25,17 @@ BI.FlexHorizontalCenter = BI.inherit(BI.Layout, { 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.flex_vertical", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, horizontalAlign: o.horizontalAlign, verticalAlign: o.verticalAlign, @@ -40,17 +50,20 @@ BI.FlexHorizontalCenter = BI.inherit(BI.Layout, { bgap: o.bgap, innerHgap: o.innerHgap, innerVgap: o.innerVgap, - items: o.items + items: o.items, }; - }, + } - resize: function () { + resize() { this.layout.resize(); - }, + } - populate: function (items) { + populate(items) { this.layout.populate(items); } -}); -BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter); -BI.shortcut("bi.flex_horizontal_center_adapt", BI.FlexHorizontalCenter); +} + +@shortcut() +export class FlexHorizontalCenterAdapt extends FlexHorizontalCenter { + static xtype = "bi.flex_horizontal_center_adapt"; +} diff --git a/src/core/wrapper/layout/flex/flex.horizontal.js b/src/core/wrapper/layout/flex/flex.horizontal.js index 75326335b..7489d30a7 100644 --- a/src/core/wrapper/layout/flex/flex.horizontal.js +++ b/src/core/wrapper/layout/flex/flex.horizontal.js @@ -1,16 +1,24 @@ +import { shortcut } from "@/core/decorator"; +import { extend, isFunction, some } from "@/core/2.base"; +import { HorizontalAlign, VerticalAlign } from "@/core/constant"; +import { Layout } from "../../layout"; + /** *自适应水平和垂直方向都居中容器 * Created by GUY on 2016/12/2. * - * @class BI.FlexHorizontalLayout - * @extends BI.Layout + * @class FlexHorizontalLayout + * @extends Layout */ -BI.FlexHorizontalLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class FlexHorizontalLayout extends Layout { + static xtype = "bi.flex_horizontal"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-f-h", - verticalAlign: BI.VerticalAlign.Top, - horizontalAlign: BI.HorizontalAlign.Left, // 如果只有一个子元素且想让该子元素横向撑满，设置成Stretch + verticalAlign: VerticalAlign.Top, + horizontalAlign: HorizontalAlign.Left, // 如果只有一个子元素且想让该子元素横向撑满，设置成Stretch columnSize: [], scrollx: true, hgap: 0, @@ -18,52 +26,54 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, { lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, - render: function () { - BI.FlexHorizontalLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign); + } + + render() { + super.render(...arguments); + const o = this.options; + this.element.addClass(`v-${o.verticalAlign}`).addClass(`h-${o.horizontalAlign}`); if (o.scrollable === true || o.scrollx === true) { this.element.addClass("f-scroll-x"); } if (o.scrollable === true || o.scrolly === true) { this.element.addClass("f-scroll-y"); } - 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 || o.columnSize.indexOf("auto") >= 0; } - return BI.some(o.items, function (i, item) { + + return some(o.items, (i, item) => { if (item.width === "fill" || item.width === "auto") { return true; } }); - }, + } - _addElement: function (i, item) { - var o = this.options; - var w = BI.FlexHorizontalLayout.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; } } w.element.css({ - position: "relative" + position: "relative", }); if (columnSize !== "auto") { if (columnSize === "fill" || columnSize === "") { - if (o.horizontalAlign !== BI.HorizontalAlign.Stretch) { + if (o.horizontalAlign !== HorizontalAlign.Stretch) { if (o.scrollable === true || o.scrollx === true) { w.element.addClass("f-s-n"); } @@ -93,12 +103,12 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, { w.element.addClass("l-c"); } this._handleGap(w, item, i); + return w; - }, + } - populate: function (items) { - BI.FlexHorizontalLayout.superclass.populate.apply(this, arguments); + populate(...args) { + super.populate(...args); this._mount(); } -}); -BI.shortcut("bi.flex_horizontal", BI.FlexHorizontalLayout); +} diff --git a/src/core/wrapper/layout/flex/flex.leftrightvertical.center.js b/src/core/wrapper/layout/flex/flex.leftrightvertical.center.js index b52b1e456..db2aeadc7 100644 --- a/src/core/wrapper/layout/flex/flex.leftrightvertical.center.js +++ b/src/core/wrapper/layout/flex/flex.leftrightvertical.center.js @@ -1,6 +1,13 @@ -BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FlexLeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), { +import { shortcut } from "@/core/decorator"; +import { extend, isArray, each, map, stripEL } from "@/core/2.base"; +import { Layout } from "../../layout"; + +@shortcut() +export class FlexLeftRightVerticalAdaptLayout extends Layout { + static xtype = "bi.flex_left_right_vertical_adapt"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-f-lr-v-c", columnSize: [], items: {}, @@ -15,33 +22,35 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { rhgap: 0, rtgap: 0, rbgap: 0, - rvgap: 0 + rvgap: 0, }); - }, - render: function () { - var o = this.options, self = this; - BI.FlexLeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments); - var items = this._formatItems(o.items); + } + + render() { + const o = this.options; + super.render(...arguments); + const items = this._formatItems(o.items); + return { type: "bi.flex_vertical_adapt", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, columnSize: o.columnSize.slice(0, (o.items.left || []).length).concat((o.items.right || []).length > 0 ? [""] : []), - items: items, + items, scrollx: o.scrollx, scrolly: o.scrolly, scrollable: o.scrollable, innerHgap: o.innerHgap, - innerVgap: o.innerVgap + innerVgap: o.innerVgap, }; - }, + } - _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; } @@ -50,32 +59,34 @@ BI.FlexLeftRightVerticalAdaptLayout = 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) + let leftItems = left || items.left || []; + const rightItems = right || items.right || []; + leftItems = map(leftItems, (i, item) => { + const json = { + el: stripEL(item), }; - 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; }); + return leftItems.concat({ el: { type: "bi.flex_vertical_adapt", columnSize: o.columnSize.slice(leftItems.length), css: { - "margin-left": "auto" + "margin-left": "auto", }, hgap: o.rhgap, vgap: o.rvgap, @@ -83,22 +94,21 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { rgap: o.rrgap, tgap: o.rtgap, bgap: o.rbgap, - items: rightItems - } + items: 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.flex_left_right_vertical_adapt", BI.FlexLeftRightVerticalAdaptLayout); +} diff --git a/src/core/wrapper/layout/flex/flex.vertical.center.js b/src/core/wrapper/layout/flex/flex.vertical.center.js index cf2e55077..a4a830862 100644 --- a/src/core/wrapper/layout/flex/flex.vertical.center.js +++ b/src/core/wrapper/layout/flex/flex.vertical.center.js @@ -1,16 +1,24 @@ +import { shortcut } from "@/core/decorator"; +import { extend } from "@/core/2.base"; +import { HorizontalAlign, VerticalAlign } from "@/core/constant"; +import { Layout } from "../../layout"; + /** *自适应水平和垂直方向都居中容器 * Created by GUY on 2016/12/2. * - * @class BI.FlexVerticalCenter - * @extends BI.Layout + * @class FlexVerticalCenter + * @extends Layout */ -BI.FlexVerticalCenter = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), { +@shortcut() +export class FlexVerticalCenter extends Layout { + static xtype = "bi.flex_vertical_adapt"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-f-v-c", - horizontalAlign: BI.HorizontalAlign.Left, - verticalAlign: BI.VerticalAlign.Middle, + horizontalAlign: HorizontalAlign.Left, + verticalAlign: VerticalAlign.Middle, columnSize: [], scrollx: false, hgap: 0, @@ -18,15 +26,17 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, { 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.flex_horizontal", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, verticalAlign: o.verticalAlign, horizontalAlign: o.horizontalAlign, @@ -41,17 +51,20 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, { hgap: o.hgap, innerHgap: o.innerHgap, innerVgap: o.innerVgap, - items: o.items + items: o.items, }; - }, + } - resize: function () { + resize() { this.layout.resize(); - }, + } - populate: function (items) { + populate(items) { this.layout.populate(items); } -}); -BI.shortcut("bi.flex_vertical_adapt", BI.FlexVerticalCenter); -BI.shortcut("bi.flex_vertical_center_adapt", BI.FlexVerticalCenter); +} + +@shortcut() +export class FlexVerticalCenterAdapt extends FlexVerticalCenter { + static xtype = "bi.flex_vertical_center_adapt" +} diff --git a/src/core/wrapper/layout/flex/flex.vertical.js b/src/core/wrapper/layout/flex/flex.vertical.js index 1c56586cc..7847d7009 100644 --- a/src/core/wrapper/layout/flex/flex.vertical.js +++ b/src/core/wrapper/layout/flex/flex.vertical.js @@ -1,15 +1,21 @@ +import { shortcut } from "@/core/decorator"; +import { extend, isFunction, some } from "@/core/2.base"; +import { HorizontalAlign, VerticalAlign } from "@/core/constant"; +import { Layout } from "../../layout"; + /** * Created by GUY on 2016/12/2. * - * @class BI.FlexVerticalLayout - * @extends BI.Layout + * @class FlexVerticalLayout + * @extends Layout */ -BI.FlexVerticalLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FlexVerticalLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class FlexVerticalLayout extends Layout { + props() { + return extend(super.props(...arguments), { baseCls: "bi-f-v", - horizontalAlign: BI.HorizontalAlign.Left, - verticalAlign: BI.VerticalAlign.Top, + horizontalAlign: HorizontalAlign.Left, + verticalAlign: VerticalAlign.Top, rowSize: [], scrolly: true, hgap: 0, @@ -17,52 +23,54 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, { lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, - render: function () { - BI.FlexVerticalLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign); + } + + render() { + super.render(...arguments); + const self = this, o = this.options; + this.element.addClass(`h-${o.horizontalAlign}`).addClass(`v-${o.verticalAlign}`); if (o.scrollable === true || o.scrollx === true) { this.element.addClass("f-scroll-x"); } if (o.scrollable === true || o.scrolly === true) { this.element.addClass("f-scroll-y"); } - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { + const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { self.populate(newValue); }) : o.items; this.populate(items); - }, + } - _hasFill: function () { - var o = this.options; + _hasFill() { + const o = this.options; if (o.rowSize.length > 0) { return o.rowSize.indexOf("fill") >= 0 || o.rowSize.indexOf("auto") >= 0; } - return BI.some(o.items, function (i, item) { + + return some(o.items, (i, item) => { if (item.height === "fill" || item.height === "auto") { return true; } }); - }, + } - _addElement: function (i, item) { - var o = this.options; - var w = BI.FlexVerticalLayout.superclass._addElement.apply(this, arguments); - var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; + _addElement(i, item) { + const o = this.options; + const w = super._addElement.apply(this, arguments); + 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 = null; } } w.element.css({ - position: "relative" + position: "relative", }); if (rowSize !== "auto") { if (rowSize === "fill" || rowSize === "") { - if (o.verticalAlign !== BI.VerticalAlign.Stretch) { + if (o.verticalAlign !== VerticalAlign.Stretch) { if (o.scrollable === true || o.scrolly === true) { w.element.addClass("f-s-n"); } @@ -92,12 +100,12 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, { w.element.addClass("l-c"); } this._handleGap(w, item, null, i); + return w; - }, + } - populate: function (items) { - BI.FlexVerticalLayout.superclass.populate.apply(this, arguments); + populate(items) { + super.populate.apply(this, arguments); this._mount(); } -}); -BI.shortcut("bi.flex_vertical", BI.FlexVerticalLayout); +} diff --git a/src/core/wrapper/layout/flex/index.js b/src/core/wrapper/layout/flex/index.js new file mode 100644 index 000000000..1625f8ad0 --- /dev/null +++ b/src/core/wrapper/layout/flex/index.js @@ -0,0 +1,7 @@ +export { FlexCenterLayout } from "./flex.center"; +export { FlexHorizontalCenter, FlexHorizontalCenterAdapt } from "./flex.horizontal.center"; +export { FlexHorizontalLayout } from "./flex.horizontal"; +export { FlexLeftRightVerticalAdaptLayout } from "./flex.leftrightvertical.center"; +export { FlexVerticalCenter, FlexVerticalCenterAdapt } from "./flex.vertical.center"; +export { FlexVerticalLayout } from "./flex.vertical"; +export * from "./wrapper"; diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js index ee44e9823..347ab62a9 100644 --- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js +++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js @@ -1,16 +1,24 @@ +import { shortcut } from "@/core/decorator"; +import { extend } from "@/core/2.base"; +import { HorizontalAlign, VerticalAlign } from "@/core/constant"; +import { Layout } from "@/core/wrapper/layout"; + /** *自适应水平和垂直方向都居中容器 * Created by GUY on 2016/12/2. * - * @class BI.FlexWrapperCenterLayout - * @extends BI.Layout + * @class FlexWrapperCenterLayout + * @extends Layout */ -BI.FlexWrapperCenterLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FlexWrapperCenterLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class FlexWrapperCenterLayout extends Layout { + static xtype = "bi.flex_scrollable_center_adapt"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-f-s-c", - horizontalAlign: BI.HorizontalAlign.Center, - verticalAlign: BI.VerticalAlign.Middle, + horizontalAlign: HorizontalAlign.Center, + verticalAlign: VerticalAlign.Middle, columnSize: [], scrollx: false, scrollable: true, @@ -19,15 +27,17 @@ BI.FlexWrapperCenterLayout = BI.inherit(BI.Layout, { 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.flex_scrollable_horizontal", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, horizontalAlign: o.horizontalAlign, verticalAlign: o.verticalAlign, @@ -40,16 +50,15 @@ BI.FlexWrapperCenterLayout = BI.inherit(BI.Layout, { vgap: o.vgap, lgap: o.lgap, rgap: o.rgap, - items: o.items + items: o.items, }; - }, + } - resize: function () { + resize() { this.layout.resize(); - }, + } - populate: function (items) { + populate(items) { this.layout.populate(items); } -}); -BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexWrapperCenterLayout); +} diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.center.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.center.js index 1735c25ff..c15e28369 100644 --- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.center.js +++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.center.js @@ -1,16 +1,24 @@ +import { shortcut } from "@/core/decorator"; +import { extend } from "@/core/2.base"; +import { HorizontalAlign, VerticalAlign } from "@/core/constant"; +import { Layout } from "@/core/wrapper/layout"; + /** *自适应水平和垂直方向都居中容器 * Created by GUY on 2016/12/2. * - * @class BI.FlexVerticalCenter - * @extends BI.Layout + * @class FlexVerticalCenter + * @extends Layout */ -BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FlexWrapperHorizontalCenter.superclass.props.apply(this, arguments), { +@shortcut() +export class FlexWrapperHorizontalCenter extends Layout { + static xtype = "bi.flex_scrollable_horizontal_adapt"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-f-s-v-c", - horizontalAlign: BI.HorizontalAlign.Center, - verticalAlign: BI.VerticalAlign.Top, + horizontalAlign: HorizontalAlign.Center, + verticalAlign: VerticalAlign.Top, rowSize: [], scrollable: true, scrolly: false, @@ -19,15 +27,17 @@ BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, { 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.flex_scrollable_vertical", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, horizontalAlign: o.horizontalAlign, verticalAlign: o.verticalAlign, @@ -40,17 +50,20 @@ BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, { vgap: o.vgap, tgap: o.tgap, bgap: o.bgap, - items: o.items + items: o.items, }; - }, + } - resize: function () { + resize() { this.layout.resize(); - }, + } - populate: function (items) { + populate(items) { this.layout.populate(items); } -}); -BI.shortcut("bi.flex_scrollable_horizontal_adapt", BI.FlexWrapperHorizontalCenter); -BI.shortcut("bi.flex_scrollable_horizontal_center_adapt", BI.FlexWrapperHorizontalCenter); +} + +@shortcut() +export class FlexWrapperHorizontalCenterAdapt extends FlexWrapperHorizontalCenter { + static xtype = "bi.flex_scrollable_horizontal_center_adapt"; +} diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js index fa90b0543..4e3cee14a 100644 --- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js +++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js @@ -1,16 +1,25 @@ +import { shortcut } from "@/core/decorator"; +import { extend, isFunction, some } from "@/core/2.base"; +import { Widget } from "@/core/4.widget"; +import { HorizontalAlign, VerticalAlign } from "@/core/constant"; +import { Layout } from "@/core/wrapper/layout"; + /** *自适应水平和垂直方向都居中容器 * Created by GUY on 2016/12/2. * - * @class BI.FlexHorizontalLayout - * @extends BI.Layout + * @class FlexHorizontalLayout + * @extends Layout */ -BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class FlexWrapperHorizontalLayout extends Layout { + static xtype = "bi.flex_scrollable_horizontal"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-f-s-h", - verticalAlign: BI.VerticalAlign.Top, - horizontalAlign: BI.HorizontalAlign.Left, + verticalAlign: VerticalAlign.Top, + horizontalAlign: HorizontalAlign.Left, columnSize: [], scrollable: null, scrollx: true, @@ -19,47 +28,49 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, { lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, - render: function () { - BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign); - this.$wrapper = BI.Widget._renderEngine.createElement("
").addClass("f-s-h-w v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign); - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); + } + + render() { + super.render(...arguments); + const o = this.options; + this.element.addClass(`v-${o.verticalAlign}`).addClass(`h-${o.horizontalAlign}`); + this.$wrapper = Widget._renderEngine.createElement("
").addClass(`f-s-h-w v-${o.verticalAlign}`).addClass(`h-${o.horizontalAlign}`); + 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 || o.columnSize.indexOf("auto") >= 0; } - return BI.some(o.items, function (i, item) { + + return some(o.items, (i, item) => { if (item.width === "fill" || item.width === "auto") { return true; } }); - }, + } - _addElement: function (i, item) { - var o = this.options; - var w = BI.FlexWrapperHorizontalLayout.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; } } w.element.css({ - position: "relative" + position: "relative", }); if (columnSize !== "auto") { if (columnSize === "fill" || columnSize === "") { - if (o.horizontalAlign !== BI.HorizontalAlign.Stretch) { + if (o.horizontalAlign !== HorizontalAlign.Stretch) { if (o.scrollable === true || o.scrollx === true) { w.element.addClass("f-s-n"); } @@ -91,21 +102,21 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, { w.element.addClass("l-c"); } this._handleGap(w, item, i); + return w; - }, + } - appendFragment: function (frag) { + appendFragment(frag) { this.$wrapper.append(frag); this.element.append(this.$wrapper); - }, + } - _getWrapper: function () { + _getWrapper() { return this.$wrapper; - }, + } - populate: function (items) { - BI.FlexWrapperHorizontalLayout.superclass.populate.apply(this, arguments); + populate(items) { + super.populate(...arguments); this._mount(); } -}); -BI.shortcut("bi.flex_scrollable_horizontal", BI.FlexWrapperHorizontalLayout); +} diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js index 5b9e7e11d..98c340452 100644 --- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js +++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js @@ -1,16 +1,24 @@ +import { shortcut } from "@/core/decorator"; +import { extend } from "@/core/2.base"; +import { HorizontalAlign, VerticalAlign } from "@/core/constant"; +import { Layout } from "@/core/wrapper/layout"; + /** *自适应水平和垂直方向都居中容器 * Created by GUY on 2016/12/2. * - * @class BI.FlexVerticalCenter - * @extends BI.Layout + * @class FlexVerticalCenter + * @extends Layout */ -BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FlexWrapperVerticalCenter.superclass.props.apply(this, arguments), { +@shortcut() +export class FlexWrapperVerticalCenter extends Layout { + static xtype = "bi.flex_scrollable_vertical_adapt"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-f-s-v-c", - horizontalAlign: BI.HorizontalAlign.Left, - verticalAlign: BI.VerticalAlign.Middle, + horizontalAlign: HorizontalAlign.Left, + verticalAlign: VerticalAlign.Middle, columnSize: [], scrollx: false, scrollable: true, @@ -19,15 +27,17 @@ BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, { 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.flex_scrollable_horizontal", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, verticalAlign: o.verticalAlign, horizontalAlign: o.horizontalAlign, @@ -40,17 +50,20 @@ BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, { vgap: o.vgap, lgap: o.lgap, rgap: o.rgap, - items: o.items + items: o.items, }; - }, + } - resize: function () { + resize() { this.layout.resize(); - }, + } - populate: function (items) { + populate(items) { this.layout.populate(items); } -}); -BI.shortcut("bi.flex_scrollable_vertical_adapt", BI.FlexWrapperVerticalCenter); -BI.shortcut("bi.flex_scrollable_vertical_center_adapt", BI.FlexWrapperVerticalCenter); +} + +@shortcut() +export class FlexWrapperVerticalCenterAdapt extends FlexWrapperVerticalCenter { + static xtype = "bi.flex_scrollable_vertical_center_adapt"; +} diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js index 76beeb601..f557ba543 100644 --- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js +++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js @@ -1,16 +1,25 @@ +import { shortcut } from "@/core/decorator"; +import { extend, isFunction, some } from "@/core/2.base"; +import { Widget } from "@/core/4.widget"; +import { HorizontalAlign, VerticalAlign } from "@/core/constant"; +import { Layout } from "@/core/wrapper/layout"; + /** *自适应水平和垂直方向都居中容器 * Created by GUY on 2016/12/2. * - * @class BI.FlexWrapperVerticalLayout - * @extends BI.Layout + * @class FlexWrapperVerticalLayout + * @extends Layout */ -BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FlexWrapperVerticalLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class FlexWrapperVerticalLayout extends Layout { + static xtype = "bi.flex_scrollable_vertical"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-f-s-v", - horizontalAlign: BI.HorizontalAlign.Left, - verticalAlign: BI.VerticalAlign.Top, + horizontalAlign: HorizontalAlign.Left, + verticalAlign: VerticalAlign.Top, rowSize: [], scrollable: null, scrolly: true, @@ -19,47 +28,49 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, { lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, - render: function () { - BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign); - this.$wrapper = BI.Widget._renderEngine.createElement("
").addClass("f-s-v-w h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign); - var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); + } + + render() { + super.render(...arguments); + const o = this.options; + this.element.addClass(`v-${o.verticalAlign}`).addClass(`h-${o.horizontalAlign}`); + this.$wrapper = Widget._renderEngine.createElement("
").addClass(`f-s-v-w h-${o.horizontalAlign}`).addClass(`v-${o.verticalAlign}`); + 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.rowSize.length > 0) { return o.rowSize.indexOf("fill") >= 0 || o.rowSize.indexOf("auto") >= 0; } - return BI.some(o.items, function (i, item) { + + return some(o.items, (i, item) => { if (item.height === "fill" || item.height === "auto") { return true; } }); - }, + } - _addElement: function (i, item) { - var o = this.options; - var w = BI.FlexWrapperVerticalLayout.superclass._addElement.apply(this, arguments); - var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; + _addElement(i, item) { + const o = this.options; + const w = super._addElement(...arguments); + 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 = null; } } w.element.css({ - position: "relative" + position: "relative", }); if (rowSize !== "auto") { if (rowSize === "fill" || rowSize === "") { - if (o.verticalAlign !== BI.VerticalAlign.Stretch) { + if (o.verticalAlign !== VerticalAlign.Stretch) { if (o.scrollable === true || o.scrolly === true) { w.element.addClass("f-s-n"); } @@ -91,21 +102,21 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, { w.element.addClass("l-c"); } this._handleGap(w, item, null, i); + return w; - }, + } - appendFragment: function (frag) { + appendFragment(frag) { this.$wrapper.append(frag); this.element.append(this.$wrapper); - }, + } - _getWrapper: function () { + _getWrapper() { return this.$wrapper; - }, + } - populate: function (items) { - BI.FlexWrapperVerticalLayout.superclass.populate.apply(this, arguments); + populate(items) { + super.populate(...arguments); this._mount(); } -}); -BI.shortcut("bi.flex_scrollable_vertical", BI.FlexWrapperVerticalLayout); +} diff --git a/src/core/wrapper/layout/flex/wrapper/index.js b/src/core/wrapper/layout/flex/wrapper/index.js new file mode 100644 index 000000000..5257a1b70 --- /dev/null +++ b/src/core/wrapper/layout/flex/wrapper/index.js @@ -0,0 +1,5 @@ +export { FlexWrapperCenterLayout } from "./flex.wrapper.center"; +export { FlexWrapperHorizontalCenter, FlexWrapperHorizontalCenterAdapt } from "./flex.wrapper.horizontal.center"; +export { FlexWrapperHorizontalLayout } from "./flex.wrapper.horizontal"; +export { FlexWrapperVerticalCenter, FlexWrapperVerticalCenterAdapt } from "./flex.wrapper.vertical.center"; +export { FlexWrapperVerticalLayout } from "./flex.wrapper.vertical"; diff --git a/src/core/wrapper/layout/float/float.absolute.center.js b/src/core/wrapper/layout/float/float.absolute.center.js index 08cc5b326..6aefbc1ac 100644 --- a/src/core/wrapper/layout/float/float.absolute.center.js +++ b/src/core/wrapper/layout/float/float.absolute.center.js @@ -1,36 +1,42 @@ +import { shortcut } from "@/core/decorator"; +import { extend, isFunction } from "@/core/2.base"; +import { Layout } from "../../layout"; + /** * absolute实现的居中布局 - * @class BI.FloatAbsoluteCenterLayout - * @extends BI.Layout + * @class FloatAbsoluteCenterLayout + * @extends Layout */ -BI.FloatAbsoluteCenterLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FloatAbsoluteCenterLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class FloatAbsoluteCenterLayout extends Layout { + static xtype = "bi.absolute_center_float"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-abs-c-fl", }); - }, + } - render: function () { - BI.FloatAbsoluteCenterLayout.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.FloatAbsoluteCenterLayout.superclass._addElement.apply(this, arguments); + _addElement(i, item) { + const w = super._addElement(...arguments); w.element.addClass("bi-abs-c-item").css({ position: "absolute", }); + return w; - }, + } - populate: function (items) { - BI.FloatAbsoluteCenterLayout.superclass.populate.apply(this, arguments); + populate(items) { + super.populate(...arguments); this._mount(); } -}); -BI.shortcut("bi.absolute_center_float", BI.FloatAbsoluteCenterLayout); +} diff --git a/src/core/wrapper/layout/float/float.absolute.horizontal.js b/src/core/wrapper/layout/float/float.absolute.horizontal.js index b9aae3708..8d2757217 100644 --- a/src/core/wrapper/layout/float/float.absolute.horizontal.js +++ b/src/core/wrapper/layout/float/float.absolute.horizontal.js @@ -1,23 +1,32 @@ +import { shortcut } from "@/core/decorator"; +import { extend, map, isEmptyObject, stripEL, isWidget } from "@/core/2.base"; +import { HorizontalAlign } from "@/core/constant"; +import { Layout } from "../../layout"; + /** * absolute实现的居中布局 - * @class BI.FloatAbsoluteHorizontalLayout - * @extends BI.Layout + * @class FloatAbsoluteHorizontalLayout + * @extends Layout */ -BI.FloatAbsoluteHorizontalLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FloatAbsoluteHorizontalLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class FloatAbsoluteHorizontalLayout extends Layout { + static xtype = "bi.absolute_horizontal_float"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-abs-h-fl", - horizontalAlign: BI.HorizontalAlign.Center, + horizontalAlign: HorizontalAlign.Center, rowSize: [], vgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, + } - render: function () { - var self = this, o = this.options; - BI.FloatAbsoluteHorizontalLayout.superclass.render.apply(this, arguments); + render() { + const o = this.options; + super.render(...arguments); + return { type: "bi.vtape", horizontalAlign: o.horizontalAlign, @@ -26,8 +35,8 @@ BI.FloatAbsoluteHorizontalLayout = 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: "50%", vgap: o.vgap, @@ -39,34 +48,35 @@ BI.FloatAbsoluteHorizontalLayout = BI.inherit(BI.Layout, { innerHgap: o.innerHgap, innerVgap: o.innerVgap, }; - }, + } - _formatItems: function (items) { - var o = this.options; - if (o.horizontalAlign === BI.HorizontalAlign.Left) { + _formatItems(items) { + const o = this.options; + if (o.horizontalAlign === HorizontalAlign.Left) { return items; } - var cls = o.horizontalAlign === BI.HorizontalAlign.Right ? "bi-abs-r-x-item" : "bi-abs-c-x-item"; - return BI.map(items, function (i, item) { - if (!item || BI.isEmptyObject(item)) { + const cls = o.horizontalAlign === HorizontalAlign.Right ? "bi-abs-r-x-item" : "bi-abs-c-x-item"; + + return map(items, (i, item) => { + if (!item || isEmptyObject(item)) { return item; } - var el = BI.stripEL(item); - if (BI.isWidget(el)) { + const el = stripEL(item); + if (isWidget(el)) { el.element.addClass(cls); } else { el.cls = (el.cls || "") + cls; } + return item; }); - }, + } - resize: function () { + resize() { this.layout.stroke(this._formatItems(this.options.items)); - }, + } - populate: function (items) { + populate(items) { this.layout.populate(this._formatItems(items)); } -}); -BI.shortcut("bi.absolute_horizontal_float", BI.FloatAbsoluteHorizontalLayout); +} diff --git a/src/core/wrapper/layout/float/float.absolute.leftrightvertical.js b/src/core/wrapper/layout/float/float.absolute.leftrightvertical.js index 9de105651..0b545c822 100644 --- a/src/core/wrapper/layout/float/float.absolute.leftrightvertical.js +++ b/src/core/wrapper/layout/float/float.absolute.leftrightvertical.js @@ -1,8 +1,16 @@ -BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FloatAbsoluteLeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), { +import { shortcut } from "@/core/decorator"; +import { extend, map, isEmptyObject, stripEL, isWidget, isArray, each } from "@/core/2.base"; +import { VerticalAlign } from "@/core/constant"; +import { Layout } from "../../layout"; + +@shortcut() +export class FloatAbsoluteLeftRightVerticalAdaptLayout extends Layout { + static xtype = "bi.absolute_left_right_vertical_float"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-abs-lr-v-fl", - verticalAlign: BI.VerticalAlign.Middle, + verticalAlign: VerticalAlign.Middle, items: {}, llgap: 0, lrgap: 0, @@ -15,16 +23,18 @@ BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { rhgap: 0, rtgap: 0, rbgap: 0, - rvgap: 0 + rvgap: 0, }); - }, - render: function () { - var o = this.options, self = this; - BI.FloatAbsoluteLeftRightVerticalAdaptLayout.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: this._formatItems(o.items), @@ -33,15 +43,15 @@ BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { innerVgap: o.innerVgap, 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; } @@ -50,98 +60,105 @@ BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { } }); } - var leftItems = left || items.left || []; - var rightItems = right || items.right || []; - leftItems = BI.map(leftItems, function (i, item) { - var el = BI.stripEL(item); - if (o.verticalAlign === BI.VerticalAlign.Middle) { - if (BI.isWidget(el)) { + let leftItems = left || items.left || []; + let rightItems = right || items.right || []; + leftItems = map(leftItems, (i, item) => { + const el = stripEL(item); + if (o.verticalAlign === VerticalAlign.Middle) { + if (isWidget(el)) { el.element.addClass("bi-abs-c-y-item"); } else { - el.cls = (el.cls || "") + "bi-abs-c-y-item"; + el.cls = `${el.cls || ""}bi-abs-c-y-item`; } } - var json = { - el: el, - width: item.width + const json = { + el, + width: item.width, }; // if (o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { // json.tgap = o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0); // } - 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 + (item.bgap || 0) + (item.vgap || 0) !== 0) { // json.bgap = o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0); // } + return json; }); - rightItems = BI.map(rightItems, function (i, item) { - var el = BI.stripEL(item); - if (o.verticalAlign === BI.VerticalAlign.Middle) { - if (BI.isWidget(el)) { + rightItems = map(rightItems, (i, item) => { + const el = stripEL(item); + if (o.verticalAlign === VerticalAlign.Middle) { + if (isWidget(el)) { el.element.addClass("bi-abs-c-y-item"); } else { - el.cls = (el.cls || "") + "bi-abs-c-y-item"; + el.cls = `${el.cls || ""}bi-abs-c-y-item`; } } - var json = { - el: el, - width: item.width + const json = { + el, + width: item.width, }; // if (o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { // json.tgap = o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 0); // } - 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 + (item.bgap || 0) + (item.vgap || 0) !== 0) { // json.bgap = o.rvgap + o.rbgap + (item.bgap || 0) + (item.vgap || 0); // } + 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_float", BI.FloatAbsoluteLeftRightVerticalAdaptLayout); +} + +@shortcut() +export class FloatAbsoluteRightVerticalAdaptLayout extends Layout { + static xtype = "bi.absolute_right_vertical_float"; -BI.FloatAbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FloatAbsoluteRightVerticalAdaptLayout.superclass.props.apply(this, arguments), { + props() { + return extend(super.props(...arguments), { baseCls: "bi-abs-r-v-fl", - verticalAlign: BI.VerticalAlign.Middle, + verticalAlign: VerticalAlign.Middle, items: [], lgap: 0, rgap: 0, - hgap: 0 + hgap: 0, }); - }, - render: function () { - var o = this.options, self = this; - BI.FloatAbsoluteRightVerticalAdaptLayout.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(this._formatItems(o.items)), @@ -151,39 +168,40 @@ BI.FloatAbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, { vgap: "50%", scrollx: o.scrollx, scrolly: o.scrolly, - scrollable: o.scrollable + scrollable: o.scrollable, }; - }, + } - _formatItems: function (items) { - if (this.options.verticalAlign !== BI.VerticalAlign.Middle) { + _formatItems(items) { + if (this.options.verticalAlign !== VerticalAlign.Middle) { return items; } - return BI.map(items, function (i, item) { - if (!item || BI.isEmptyObject(item)) { + + return map(items, (i, item) => { + if (!item || isEmptyObject(item)) { return item; } - var el = BI.stripEL(item); - if (BI.isWidget(el)) { + const el = stripEL(item); + if (isWidget(el)) { el.element.addClass("bi-abs-c-y-item"); } else { - el.cls = (el.cls || "") + "bi-abs-c-y-item"; + el.cls = `${el.cls || ""}bi-abs-c-y-item`; } + return item; }); - }, + } - resize: function () { + resize() { this.layout.stroke([{}].concat(this._formatItems(this.options.items))); - }, + } - addItem: function () { + addItem() { // do nothing throw new Error("不能添加子组件"); - }, + } - populate: function (items) { + populate(items) { this.layout.populate([{}].concat(this._formatItems(items))); } -}); -BI.shortcut("bi.absolute_right_vertical_float", BI.FloatAbsoluteRightVerticalAdaptLayout); +} diff --git a/src/core/wrapper/layout/float/float.absolute.vertical.js b/src/core/wrapper/layout/float/float.absolute.vertical.js index 01b949b06..d55dba779 100644 --- a/src/core/wrapper/layout/float/float.absolute.vertical.js +++ b/src/core/wrapper/layout/float/float.absolute.vertical.js @@ -1,23 +1,32 @@ +import { shortcut } from "@/core/decorator"; +import { extend, map, isEmptyObject, stripEL, isWidget } from "@/core/2.base"; +import { VerticalAlign } from "@/core/constant"; +import { Layout } from "../../layout"; + /** * absolute实现的居中布局 - * @class BI.FloatAbsoluteVerticalLayout - * @extends BI.Layout + * @class FloatAbsoluteVerticalLayout + * @extends Layout */ -BI.FloatAbsoluteVerticalLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FloatAbsoluteVerticalLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class FloatAbsoluteVerticalLayout extends Layout { + static xtype = "bi.absolute_vertical_float"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-abs-h-fl", - verticalAlign: BI.VerticalAlign.Middle, + verticalAlign: VerticalAlign.Middle, columnSize: [], hgap: 0, lgap: 0, - rgap: 0 + rgap: 0, }); - }, + } - render: function () { - var self = this, o = this.options; - BI.FloatAbsoluteVerticalLayout.superclass.render.apply(this, arguments); + render() { + const o = this.options; + super.render(...arguments); + return { type: "bi.htape", verticalAlign: o.verticalAlign, @@ -26,8 +35,8 @@ BI.FloatAbsoluteVerticalLayout = BI.inherit(BI.Layout, { scrollx: o.scrollx, scrolly: o.scrolly, scrollable: o.scrollable, - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, vgap: "50%", hgap: o.hgap, @@ -39,34 +48,35 @@ BI.FloatAbsoluteVerticalLayout = BI.inherit(BI.Layout, { innerHgap: o.innerHgap, innerVgap: o.innerVgap, }; - }, + } - _formatItems: function (items) { - var o = this.options; - if (o.verticalAlign === BI.VerticalAlign.Top) { + _formatItems(items) { + const o = this.options; + if (o.verticalAlign === VerticalAlign.Top) { return items; } - var cls = o.verticalAlign === BI.VerticalAlign.Bottom ? "bi-abs-b-y-item" : "bi-abs-c-y-item"; - return BI.map(items, function (i, item) { - if (!item || BI.isEmptyObject(item)) { + const cls = o.verticalAlign === VerticalAlign.Bottom ? "bi-abs-b-y-item" : "bi-abs-c-y-item"; + + return map(items, (i, item) => { + if (!item || isEmptyObject(item)) { return item; } - var el = BI.stripEL(item); - if (BI.isWidget(el)) { + const el = stripEL(item); + if (isWidget(el)) { el.element.addClass(cls); } else { el.cls = (el.cls || "") + cls; } + return item; }); - }, + } - resize: function () { + resize() { this.layout.stroke(this._formatItems(this.options.items)); - }, + } - populate: function (items) { + populate(items) { this.layout.populate(this._formatItems(items)); } -}); -BI.shortcut("bi.absolute_vertical_float", BI.FloatAbsoluteVerticalLayout); +} diff --git a/src/core/wrapper/layout/float/float.horizontal.js b/src/core/wrapper/layout/float/float.horizontal.js index 97ac66b49..9b3da1f9d 100644 --- a/src/core/wrapper/layout/float/float.horizontal.js +++ b/src/core/wrapper/layout/float/float.horizontal.js @@ -1,30 +1,37 @@ +import { shortcut } from "@/core/decorator"; +import { extend, map } from "@/core/2.base"; +import { VerticalAlign, HorizontalAlign } from "@/core/constant"; +import { Layout } from "../../layout"; + /** * 浮动的水平居中布局 */ -BI.FloatHorizontalLayout = BI.inherit(BI.Layout, { +@shortcut() +export class FloatHorizontalLayout extends Layout { + static xtype = "bi.horizontal_float"; - props: function () { - return BI.extend(BI.InlineHorizontalAdaptLayout.superclass.props.apply(this, arguments), { + props() { + return extend(super.props(...arguments), { baseCls: "bi-h-fl", - horizontalAlign: BI.HorizontalAlign.Center, - verticalAlign: BI.VerticalAlign.Top, + horizontalAlign: HorizontalAlign.Center, + verticalAlign: VerticalAlign.Top, rowSize: [], hgap: 0, vgap: 0, lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, + } - render: function () { - var self = this, o = this.options; - if (o.verticalAlign === BI.VerticalAlign.Top) { + render() { + const o = this.options; + if (o.verticalAlign === VerticalAlign.Top) { return { type: "bi.vertical", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, items: this._formatItems(o.items), vgap: o.vgap, @@ -32,22 +39,23 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, { bgap: o.bgap, scrollx: o.scrollx, scrolly: o.scrolly, - scrollable: o.scrollable + scrollable: o.scrollable, }; } + return { type: "bi.inline", items: [{ el: { type: "bi.vertical", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, items: this._formatItems(o.items), vgap: o.vgap, tgap: o.tgap, - bgap: o.bgap - } + bgap: o.bgap, + }, }], horizontalAlign: o.horizontalAlign, verticalAlign: o.verticalAlign, @@ -55,13 +63,14 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, { innerVgap: o.innerVgap, scrollx: o.scrollx, scrolly: o.scrolly, - scrollable: o.scrollable + scrollable: o.scrollable, }; - }, + } - _formatItems: function (items) { - var o = this.options; - return BI.map(items, function (i, item) { + _formatItems(items) { + const o = this.options; + + return map(items, (i, item) => { return { el: { type: "bi.inline_horizontal_adapt", @@ -69,18 +78,17 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, { items: [item], hgap: o.hgap, lgap: o.lgap, - rgap: o.rgap - } + rgap: o.rgap, + }, }; }); - }, + } - resize: function () { + resize() { this.layout.stroke(this._formatItems(this.options.items)); - }, + } - populate: function (items) { + populate(items) { this.layout.populate(this._formatItems(items)); } -}); -BI.shortcut("bi.horizontal_float", BI.FloatHorizontalLayout); +} diff --git a/src/core/wrapper/layout/float/index.js b/src/core/wrapper/layout/float/index.js new file mode 100644 index 000000000..97d5b1ff2 --- /dev/null +++ b/src/core/wrapper/layout/float/index.js @@ -0,0 +1,5 @@ +export { FloatAbsoluteCenterLayout } from "./float.absolute.center"; +export { FloatAbsoluteHorizontalLayout } from "./float.absolute.horizontal"; +export { FloatAbsoluteLeftRightVerticalAdaptLayout, FloatAbsoluteRightVerticalAdaptLayout } from "./float.absolute.leftrightvertical"; +export { FloatAbsoluteVerticalLayout } from "./float.absolute.vertical"; +export { FloatHorizontalLayout } from "./float.horizontal"; diff --git a/src/core/wrapper/layout/index.js b/src/core/wrapper/layout/index.js index 03bd1cf74..9fd652878 100644 --- a/src/core/wrapper/layout/index.js +++ b/src/core/wrapper/layout/index.js @@ -15,3 +15,9 @@ export { TdLayout } from "./layout.td"; export { VerticalLayout } from "./layout.vertical"; export { WindowLayout } from "./layout.window"; export * from "./adapt"; +export * from "./fill"; +export * from "./flex"; +export * from "./float"; +export * from "./middle"; +export * from "./responsive"; +export * from "./sticky"; diff --git a/src/core/wrapper/layout/middle/index.js b/src/core/wrapper/layout/middle/index.js new file mode 100644 index 000000000..c564fe1a6 --- /dev/null +++ b/src/core/wrapper/layout/middle/index.js @@ -0,0 +1,4 @@ +export { CenterLayout } from "./middle.center"; +export { FloatCenterLayout } from "./middle.float.center"; +export { HorizontalCenterLayout } from "./middle.horizontal"; +export { VerticalCenterLayout } from "./middle.vertical"; diff --git a/src/core/wrapper/layout/middle/middle.center.js b/src/core/wrapper/layout/middle/middle.center.js index 9d80a094f..039d90a19 100644 --- a/src/core/wrapper/layout/middle/middle.center.js +++ b/src/core/wrapper/layout/middle/middle.center.js @@ -1,72 +1,80 @@ +import { shortcut } from "@/core/decorator"; +import { extend, each } from "@/core/2.base"; +import { _lazyCreateWidget } from "@/core/5.inject"; +import { Layout } from "../../layout"; + /** * 水平和垂直方向都居中容器, 非自适应，用于宽度高度固定的面板 - * @class BI.CenterLayout - * @extends BI.Layout + * @class CenterLayout + * @extends Layout */ -BI.CenterLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.CenterLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class CenterLayout extends Layout { + static xtype = "bi.center"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-center", hgap: 0, vgap: 0, lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, + } - render: function () { - BI.CenterLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options; - var list = [], items = o.items; - BI.each(items, function (i) { + render() { + super.render(...arguments); + const o = this.options; + const list = [], items = o.items; + each(items, i => { list.push({ column: i, row: 0, - el: BI._lazyCreateWidget({ + el: _lazyCreateWidget({ type: "bi.default", - cls: "center-element " + (i === 0 ? "first-element " : "") + (i === items.length - 1 ? "last-element" : "") - }) + cls: `center-element ${i === 0 ? "first-element " : ""}${i === items.length - 1 ? "last-element" : ""}`, + }), }); }); - BI.each(items, function (i, item) { + each(items, (i, item) => { if (item) { - var w = BI._lazyCreateWidget(item); + const w = _lazyCreateWidget(item); w.element.css({ position: "absolute", - left: self._optimiseGap(o.hgap + o.lgap), - right: self._optimiseGap(o.hgap + o.rgap), - top: self._optimiseGap(o.vgap + o.tgap), - bottom: self._optimiseGap(o.vgap + o.bgap), + left: this._optimiseGap(o.hgap + o.lgap), + right: this._optimiseGap(o.hgap + o.rgap), + top: this._optimiseGap(o.vgap + o.tgap), + bottom: this._optimiseGap(o.vgap + o.bgap), width: "auto", - height: "auto" + height: "auto", }); list[i].el.addItem(w); } }); + return { type: "bi.grid", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, columns: list.length, rows: 1, - items: list + items: list, }; - }, + } - resize: function () { + resize() { // console.log("center布局不需要resize"); - }, + } - addItem: function (item) { + addItem(item) { // do nothing throw new Error("不能添加子组件"); - }, + } - populate: function (items) { - this.layout.populate.apply(this.layout, arguments); + populate(items) { + this.layout.populate(...arguments); } -}); -BI.shortcut("bi.center", BI.CenterLayout); +} diff --git a/src/core/wrapper/layout/middle/middle.float.center.js b/src/core/wrapper/layout/middle/middle.float.center.js index d1e2a4695..63b6f157d 100644 --- a/src/core/wrapper/layout/middle/middle.float.center.js +++ b/src/core/wrapper/layout/middle/middle.float.center.js @@ -1,71 +1,80 @@ +import { shortcut } from "@/core/decorator"; +import { extend, each } from "@/core/2.base"; +import { _lazyCreateWidget } from "@/core/5.inject"; +import { Layout } from "../../layout"; + /** * 浮动布局实现的居中容器 - * @class BI.FloatCenterLayout - * @extends BI.Layout + * @class FloatCenterLayout + * @extends Layout */ -BI.FloatCenterLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FloatCenterLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class FloatCenterLayout extends Layout { + static xtype = "bi.float_center"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-float-center", hgap: 0, vgap: 0, lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, - render: function () { - BI.FloatCenterLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options, items = o.items; - var list = [], width = 100 / items.length; - BI.each(items, function (i) { - var widget = BI._lazyCreateWidget({ - type: "bi.default" + } + + render() { + super.render(...arguments); + const o = this.options, items = o.items; + const list = [], width = 100 / items.length; + each(items, i => { + const widget = _lazyCreateWidget({ + type: "bi.default", }); - widget.element.addClass("center-element " + (i === 0 ? "first-element " : "") + (i === items.length - 1 ? "last-element" : "")).css({ - width: width + "%", - height: "100%" + widget.element.addClass(`center-element ${i === 0 ? "first-element " : ""}${i === items.length - 1 ? "last-element" : ""}`).css({ + width: `${width}%`, + height: "100%", }); list.push({ - el: widget + el: widget, }); }); - BI.each(items, function (i, item) { + each(items, (i, item) => { if (item) { - var w = BI._lazyCreateWidget(item); + const w = _lazyCreateWidget(item); w.element.css({ position: "absolute", - left: self._optimiseGap(o.hgap + o.lgap), - right: self._optimiseGap(o.hgap + o.rgap), - top: self._optimiseGap(o.vgap + o.tgap), - bottom: self._optimiseGap(o.vgap + o.bgap), + left: this._optimiseGap(o.hgap + o.lgap), + right: this._optimiseGap(o.hgap + o.rgap), + top: this._optimiseGap(o.vgap + o.tgap), + bottom: this._optimiseGap(o.vgap + o.bgap), width: "auto", - height: "auto" + height: "auto", }); list[i].el.addItem(w); } }); + return { type: "bi.left", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, - items: list + items: list, }; - }, + } - resize: function () { + resize() { // console.log("floatcenter布局不需要resize"); - }, + } - addItem: function (item) { + addItem(item) { // do nothing throw new Error("不能添加子组件"); - }, + } - populate: function (items) { - this.layout.populate.apply(this.layout, arguments); + populate(items) { + this.layout.populate(...arguments); } -}); -BI.shortcut("bi.float_center", BI.FloatCenterLayout); +} diff --git a/src/core/wrapper/layout/middle/middle.horizontal.js b/src/core/wrapper/layout/middle/middle.horizontal.js index c42fde9c0..b6fff379c 100644 --- a/src/core/wrapper/layout/middle/middle.horizontal.js +++ b/src/core/wrapper/layout/middle/middle.horizontal.js @@ -1,70 +1,79 @@ +import { shortcut } from "@/core/decorator"; +import { extend, each } from "@/core/2.base"; +import { _lazyCreateWidget } from "@/core/5.inject"; +import { Layout } from "../../layout"; + /** * 水平和垂直方向都居中容器, 非自适应，用于宽度高度固定的面板 - * @class BI.HorizontalCenterLayout - * @extends BI.Layout + * @class HorizontalCenterLayout + * @extends Layout */ -BI.HorizontalCenterLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.HorizontalCenterLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class HorizontalCenterLayout extends Layout { + static xtype = "bi.horizontal_center"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-h-center", hgap: 0, vgap: 0, lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, - render: function () { - BI.HorizontalCenterLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options, items = o.items; - var list = []; - BI.each(items, function (i) { + } + + render() { + super.render(...arguments); + const o = this.options, items = o.items; + const list = []; + each(items, i => { list.push({ column: i, row: 0, - el: BI._lazyCreateWidget({ + el: _lazyCreateWidget({ type: "bi.default", - cls: "center-element " + (i === 0 ? "first-element " : "") + (i === items.length - 1 ? "last-element" : "") - }) + cls: `center-element ${i === 0 ? "first-element " : ""}${i === items.length - 1 ? "last-element" : ""}`, + }), }); }); - BI.each(items, function (i, item) { + each(items, (i, item) => { if (item) { - var w = BI._lazyCreateWidget(item); + const w = _lazyCreateWidget(item); w.element.css({ position: "absolute", - left: self._optimiseGap(o.hgap + o.lgap), - right: self._optimiseGap(o.hgap + o.rgap), - top: self._optimiseGap(o.vgap + o.tgap), - bottom: self._optimiseGap(o.vgap + o.bgap), - width: "auto" + left: this._optimiseGap(o.hgap + o.lgap), + right: this._optimiseGap(o.hgap + o.rgap), + top: this._optimiseGap(o.vgap + o.tgap), + bottom: this._optimiseGap(o.vgap + o.bgap), + width: "auto", }); list[i].el.addItem(w); } }); + return { type: "bi.grid", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, columns: list.length, rows: 1, - items: list + items: list, }; - }, + } - resize: function () { + resize() { // console.log("horizontal_center布局不需要resize"); - }, + } - addItem: function (item) { + addItem(item) { // do nothing throw new Error("不能添加子组件"); - }, + } - populate: function (items) { - this.layout.populate.apply(this.layout, arguments); + populate(items) { + this.layout.populate(...arguments); } -}); -BI.shortcut("bi.horizontal_center", BI.HorizontalCenterLayout); +} diff --git a/src/core/wrapper/layout/middle/middle.vertical.js b/src/core/wrapper/layout/middle/middle.vertical.js index b835bc4f6..a203e205f 100644 --- a/src/core/wrapper/layout/middle/middle.vertical.js +++ b/src/core/wrapper/layout/middle/middle.vertical.js @@ -1,71 +1,79 @@ +import { shortcut } from "@/core/decorator"; +import { extend, each } from "@/core/2.base"; +import { _lazyCreateWidget } from "@/core/5.inject"; +import { Layout } from "../../layout"; + /** * 垂直方向都居中容器, 非自适应，用于高度不固定的面板 - * @class BI.VerticalCenterLayout - * @extends BI.Layout + * @class VerticalCenterLayout + * @extends Layout */ -BI.VerticalCenterLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.VerticalCenterLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class VerticalCenterLayout extends Layout { + static xtype = "bi.vertical_center"; + + props() { + return extend(super.props(...arguments), { baseCls: "bi-v-center", hgap: 0, vgap: 0, lgap: 0, rgap: 0, tgap: 0, - bgap: 0 + bgap: 0, }); - }, + } - render: function () { - BI.VerticalCenterLayout.superclass.render.apply(this, arguments); - var self = this, o = this.options, items = o.items; - var list = []; - BI.each(items, function (i) { + render() { + super.render(...arguments); + const self = this, o = this.options, items = o.items; + const list = []; + each(items, i => { list.push({ column: 0, row: i, - el: BI._lazyCreateWidget({ + el: _lazyCreateWidget({ type: "bi.default", - cls: "center-element " + (i === 0 ? "first-element " : "") + (i === items.length - 1 ? "last-element" : "") - }) + cls: `center-element ${i === 0 ? "first-element " : ""}${i === items.length - 1 ? "last-element" : ""}`, + }), }); }); - BI.each(items, function (i, item) { + each(items, (i, item) => { if (item) { - var w = BI._lazyCreateWidget(item); + const w = _lazyCreateWidget(item); w.element.css({ position: "absolute", left: self._optimiseGap(o.hgap + o.lgap), right: self._optimiseGap(o.hgap + o.rgap), top: self._optimiseGap(o.vgap + o.tgap), bottom: self._optimiseGap(o.vgap + o.bgap), - height: "auto" + height: "auto", }); list[i].el.addItem(w); } }); + return { type: "bi.grid", - ref: function (_ref) { - self.layout = _ref; + ref: _ref => { + this.layout = _ref; }, columns: 1, rows: list.length, - items: list + items: list, }; - }, + } - resize: function () { + resize() { // console.log("vertical_center布局不需要resize"); - }, + } - addItem: function (item) { + addItem(item) { // do nothing throw new Error("不能添加子组件"); - }, + } - populate: function (items) { - this.layout.populate.apply(this.layout, arguments); + populate(items) { + this.layout.populate(...arguments); } -}); -BI.shortcut("bi.vertical_center", BI.VerticalCenterLayout); +} diff --git a/src/core/wrapper/layout/responsive/index.js b/src/core/wrapper/layout/responsive/index.js new file mode 100644 index 000000000..89f0bb09d --- /dev/null +++ b/src/core/wrapper/layout/responsive/index.js @@ -0,0 +1,3 @@ +export { ResponsiveFlexHorizontalLayout } from "./responsive.flex.horizontal"; +export { ResponsiveFlexWrapperHorizontalLayout } from "./responsive.flex.wrapper.horizontal"; +export { ResponsiveInlineLayout } from "./responsive.inline"; diff --git a/src/core/wrapper/layout/responsive/responsive.flex.horizontal.js b/src/core/wrapper/layout/responsive/responsive.flex.horizontal.js index 592d50641..7cfceede4 100644 --- a/src/core/wrapper/layout/responsive/responsive.flex.horizontal.js +++ b/src/core/wrapper/layout/responsive/responsive.flex.horizontal.js @@ -1,57 +1,59 @@ +import { shortcut } from "@/core/decorator"; +import { each } from "@/core/2.base"; +import { HorizontalAlign } from "@/core/constant"; +import { Resizers } from "@/base"; +import { FlexHorizontalLayout } from "../flex"; + /** * 横向响应式布局 * Created by GUY on 2016/12/2. * - * @class BI.ResponsiveFlexHorizontalLayout - * @extends BI.FlexHorizontalLayout + * @class ResponsiveFlexHorizontalLayout + * @extends FlexHorizontalLayout */ -BI.ResponsiveFlexHorizontalLayout = BI.inherit(BI.FlexHorizontalLayout, { - // props: function () { - // return BI.extend(BI.ResponsiveFlexHorizontalLayout.superclass.props.apply(this, arguments), { - // // extraCls: "bi-responsive-f-h" - // }); - // }, +@shortcut() +export class ResponsiveFlexHorizontalLayout extends FlexHorizontalLayout { + static xtype = "bi.responsive_flex_horizontal"; - mounted: function () { - var self = this, o = this.options; - if (o.horizontalAlign !== BI.HorizontalAlign.Center){ + mounted() { + const o = this.options; + if (o.horizontalAlign !== HorizontalAlign.Center) { return; } - var defaultResize = function () { + const defaultResize = () => { if (o.scrollable !== true && o.scrollx !== true) { - var clientWidth = document.body.clientWidth; - if(self.element.width() > 2/3 * clientWidth){ + const clientWidth = document.body.clientWidth; + if (this.element.width() > 2 / 3 * clientWidth) { if (clientWidth <= 768) { - BI.each(self._children, function (i, child) { - self._clearGap(child); - self._handleReverseGap(child, o.items[i], i | 0); + each(this._children, (i, child) => { + this._clearGap(child); + this._handleReverseGap(child, o.items[i], i | 0); }); - self.element.css("flex-direction", "column"); + this.element.css("flex-direction", "column"); } } } - } - var resize = function () { + }; + const resize = () => { defaultResize(); if (o.scrollable !== true && o.scrollx !== true) { - var clientWidth = document.body.clientWidth; - if(self.element.width() > 2/3 * clientWidth){ + const clientWidth = document.body.clientWidth; + if (this.element.width() > 2 / 3 * clientWidth) { if (clientWidth > 768) { - BI.each(self._children, function (i, child) { - self._clearGap(child); - }) - self.resize(); - self.element.css("flex-direction", "row"); + each(this._children, (i, child) => { + this._clearGap(child); + }); + this.resize(); + this.element.css("flex-direction", "row"); } } } - } - this.unResize = BI.Resizers.add(this.getName(), resize); + }; + this.unResize = Resizers.add(this.getName(), resize); defaultResize(); - }, + } - destroyed: function () { + destroyed() { this.unResize?.(); } -}); -BI.shortcut("bi.responsive_flex_horizontal", BI.ResponsiveFlexHorizontalLayout); +} diff --git a/src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js b/src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js index 5e8fcfd95..90677598a 100644 --- a/src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js +++ b/src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js @@ -1,59 +1,61 @@ +import { shortcut } from "@/core/decorator"; +import { each } from "@/core/2.base"; +import { HorizontalAlign } from "@/core/constant"; +import { Resizers } from "@/base"; +import { FlexWrapperHorizontalLayout } from "../flex"; + /** * 横向响应式布局 * Created by GUY on 2016/12/2. * - * @class BI.ResponsiveFlexWrapperHorizontalLayout - * @extends BI.FlexWrapperHorizontalLayout + * @class ResponsiveFlexWrapperHorizontalLayout + * @extends FlexWrapperHorizontalLayout */ -BI.ResponsiveFlexWrapperHorizontalLayout = BI.inherit(BI.FlexWrapperHorizontalLayout, { - // props: function () { - // return BI.extend(BI.ResponsiveFlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), { - // extraCls: "bi-responsive-f-h" - // }); - // }, +@shortcut() +export class ResponsiveFlexWrapperHorizontalLayout extends FlexWrapperHorizontalLayout { + static xtype = "bi.responsive_flex_scrollable_horizontal"; - mounted: function () { - var self = this, o = this.options; - if (o.horizontalAlign !== BI.HorizontalAlign.Center){ + mounted() { + const o = this.options; + if (o.horizontalAlign !== HorizontalAlign.Center) { return; } - var defaultResize = function () { + const defaultResize = () => { if (o.scrollable !== true && o.scrollx !== true) { - var clientWidth = document.body.clientWidth; - if(self.element.width() > 2/3 * clientWidth){ + const clientWidth = document.body.clientWidth; + if (this.element.width() > 2 / 3 * clientWidth) { if (clientWidth <= 768) { - BI.each(self._children, function (i, child) { - self._clearGap(child); - self._handleReverseGap(child, o.items[i], i | 0); + each(this._children, (i, child) => { + this._clearGap(child); + this._handleReverseGap(child, o.items[i], i | 0); }); - self.element.css("flex-direction", "column"); - self.$wrapper.element.css("flex-direction", "column"); + this.element.css("flex-direction", "column"); + this.$wrapper.element.css("flex-direction", "column"); } } } - } - var resize = function () { + }; + const resize = () => { defaultResize(); if (o.scrollable !== true && o.scrollx !== true) { - var clientWidth = document.body.clientWidth; - if(self.element.width() > 2/3 * clientWidth){ + const clientWidth = document.body.clientWidth; + if (this.element.width() > 2 / 3 * clientWidth) { if (clientWidth > 768) { - BI.each(self._children, function (i, child) { - self._clearGap(child); - }) - self.resize(); - self.element.css("flex-direction", "row"); - self.$wrapper.element.css("flex-direction", "row"); + each(this._children, (i, child) => { + this._clearGap(child); + }); + this.resize(); + this.element.css("flex-direction", "row"); + this.$wrapper.element.css("flex-direction", "row"); } } } - } - this.unResize = BI.Resizers.add(this.getName(), resize); + }; + this.unResize = Resizers.add(this.getName(), resize); defaultResize(); - }, + } - destroyed: function () { + destroyed() { this.unResize(); } -}); -BI.shortcut("bi.responsive_flex_scrollable_horizontal", BI.ResponsiveFlexWrapperHorizontalLayout); +} diff --git a/src/core/wrapper/layout/responsive/responsive.inline..js b/src/core/wrapper/layout/responsive/responsive.inline..js deleted file mode 100644 index 08f27fcfc..000000000 --- a/src/core/wrapper/layout/responsive/responsive.inline..js +++ /dev/null @@ -1,50 +0,0 @@ -/** - * 横向响应式布局 - * Created by GUY on 2016/12/2. - * - * @class BI.ResponsiveInlineLayout - * @extends BI.InlineLayout - */ -BI.ResponsiveInlineLayout = BI.inherit(BI.InlineLayout, { - mounted: function () { - var self = this, o = this.options; - if (o.horizontalAlign !== BI.HorizontalAlign.Center){ - return; - } - var defaultResize = function () { - if (o.scrollable !== true && o.scrollx !== true) { - var clientWidth = document.body.clientWidth; - if(self.element.width() > 2/3 * clientWidth){ - if (clientWidth <= 768) { - BI.each(self._children, function (i, child) { - self._clearGap(child); - self._handleReverseGap(child, o.items[i], i | 0); - child.elemenet.css("display", ""); - }); - } - } - } - } - var resize = function () { - defaultResize(); - if (o.scrollable !== true && o.scrollx !== true) { - var clientWidth = document.body.clientWidth; - if(self.element.width() > 2/3 * clientWidth){ - if (clientWidth > 768) { - BI.each(self._children, function (i, child) { - self._clearGap(child); - }) - self.resize(); - } - } - } - } - this.unResize = BI.Resizers.add(this.getName(), resize); - defaultResize(); - }, - - destroyed: function () { - this.unResize(); - } -}); -BI.shortcut("bi.responsive_inline", BI.ResponsiveInlineLayout); diff --git a/src/core/wrapper/layout/responsive/responsive.inline.js b/src/core/wrapper/layout/responsive/responsive.inline.js new file mode 100644 index 000000000..747a9d9cf --- /dev/null +++ b/src/core/wrapper/layout/responsive/responsive.inline.js @@ -0,0 +1,58 @@ +import { shortcut } from "@/core/decorator"; +import { each } from "@/core/2.base"; +import { HorizontalAlign } from "@/core/constant"; +import { Resizers } from "@/base"; +import { InlineLayout } from "../layout.inline"; + +/** + * 横向响应式布局 + * Created by GUY on 2016/12/2. + * + * @class ResponsiveInlineLayout + * @extends InlineLayout + */ +@shortcut() +export class ResponsiveInlineLayout extends InlineLayout { + static xtype = "bi.responsive_inline"; + + mounted() { + const o = this.options; + if (o.horizontalAlign !== HorizontalAlign.Center) { + return; + } + const defaultResize = () => { + if (o.scrollable !== true && o.scrollx !== true) { + const clientWidth = document.body.clientWidth; + if (this.element.width() > 2 / 3 * clientWidth) { + if (clientWidth <= 768) { + each(this._children, (i, child) => { + this._clearGap(child); + this._handleReverseGap(child, o.items[i], i | 0); + child.element.css("display", ""); + }); + } + } + } + }; + const resize = () => { + defaultResize(); + if (o.scrollable !== true && o.scrollx !== true) { + const clientWidth = document.body.clientWidth; + if (this.element.width() > 2 / 3 * clientWidth) { + if (clientWidth > 768) { + each(this._children, (i, child) => { + this._clearGap(child); + }); + this.resize(); + } + } + } + }; + this.unResize = Resizers.add(this.getName(), resize); + defaultResize(); + } + + destroyed() { + this.unResize(); + } +} diff --git a/src/core/wrapper/layout/sticky/index.js b/src/core/wrapper/layout/sticky/index.js new file mode 100644 index 000000000..e4d9a91be --- /dev/null +++ b/src/core/wrapper/layout/sticky/index.js @@ -0,0 +1,2 @@ +export { HorizontalStickyLayout } from "./sticky.horizontal"; +export { VerticalStickyLayout } from "./sticky.vertical"; diff --git a/src/core/wrapper/layout/sticky/sticky.horizontal.js b/src/core/wrapper/layout/sticky/sticky.horizontal.js index d88f28b6d..d4b15cd66 100644 --- a/src/core/wrapper/layout/sticky/sticky.horizontal.js +++ b/src/core/wrapper/layout/sticky/sticky.horizontal.js @@ -1,29 +1,37 @@ +import { shortcut } from "@/core/decorator"; +import { extend, count, isNotNull } from "@/core/2.base"; +import { VerticalAlign } from "@/core/constant"; +import { FlexHorizontalLayout } from "../flex"; + /** * 横向黏性布局 */ -BI.HorizontalStickyLayout = BI.inherit(BI.FlexHorizontalLayout, { - props: function () { - return BI.extend(BI.HorizontalStickyLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class HorizontalStickyLayout extends FlexHorizontalLayout { + static xtype = "bi.horizontal_sticky"; + + props() { + return extend(super.props(...arguments), { extraCls: "bi-h-sticky", scrollx: true, - // horizontalAlign: BI.HorizontalAlign.Stretch, - verticalAlign: BI.VerticalAlign.Stretch + // horizontalAlign: HorizontalAlign.Stretch, + verticalAlign: VerticalAlign.Stretch, }); - }, + } - _addElement: function (i, item) { - var o = this.options; - var w = BI.HorizontalStickyLayout.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 !== "fill") { - var fillIndex; - BI.count(0, o.items.length, index => { - if (BI.isNotNull(fillIndex)) { + let fillIndex; + count(0, o.items.length, index => { + if (isNotNull(fillIndex)) { return; } if ((o.columnSize[index] === "fill" || o.items[index].width === "fill")) { @@ -41,15 +49,15 @@ BI.HorizontalStickyLayout = BI.inherit(BI.FlexHorizontalLayout, { w.element.css({ position: "sticky", zIndex: 1, - right: 0 + right: 0, }); } } else { w.element.css({ - overflow: "" + overflow: "", }); } + return w; } -}); -BI.shortcut("bi.horizontal_sticky", BI.HorizontalStickyLayout); +} diff --git a/src/core/wrapper/layout/sticky/sticky.vertical.js b/src/core/wrapper/layout/sticky/sticky.vertical.js index 71dc3ed8c..7a05bb78b 100644 --- a/src/core/wrapper/layout/sticky/sticky.vertical.js +++ b/src/core/wrapper/layout/sticky/sticky.vertical.js @@ -1,29 +1,37 @@ +import { shortcut } from "@/core/decorator"; +import { extend, count, isNotNull } from "@/core/2.base"; +import { HorizontalAlign } from "@/core/constant"; +import { FlexVerticalLayout } from "../flex"; + /** * 纵向黏性布局 */ -BI.VerticalStickyLayout = BI.inherit(BI.FlexVerticalLayout, { - props: function () { - return BI.extend(BI.VerticalStickyLayout.superclass.props.apply(this, arguments), { +@shortcut() +export class VerticalStickyLayout extends FlexVerticalLayout { + static xtype = "bi.vertical_sticky"; + + props() { + return extend(super.props(...arguments), { extraCls: "bi-v-sticky", scrolly: true, - horizontalAlign: BI.HorizontalAlign.Stretch, - // verticalAlign: BI.VerticalAlign.Stretch + horizontalAlign: HorizontalAlign.Stretch, + // verticalAlign: VerticalAlign.Stretch }); - }, + } - _addElement: function (i, item) { - var o = this.options; - var w = BI.VerticalStickyLayout.superclass._addElement.apply(this, arguments); - var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; + _addElement(i, item) { + const o = this.options; + const w = super._addElement(...arguments); + 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 = null; } } if (rowSize !== "fill") { - var fillIndex; - BI.count(0, o.items.length, index => { - if (BI.isNotNull(fillIndex)) { + let fillIndex; + count(0, o.items.length, index => { + if (isNotNull(fillIndex)) { return; } if ((o.rowSize[index] === "fill" || o.items[index].height === "fill")) { @@ -41,15 +49,15 @@ BI.VerticalStickyLayout = BI.inherit(BI.FlexVerticalLayout, { w.element.css({ position: "sticky", zIndex: 1, - bottom: 0 + bottom: 0, }); } } else { w.element.css({ - overflow: "" + overflow: "", }); } + return w; } -}); -BI.shortcut("bi.vertical_sticky", BI.VerticalStickyLayout); +}