From 9f397fcee1936fb310b6d391dc72b77a18345c03 Mon Sep 17 00:00:00 2001 From: Treecat Date: Tue, 10 Jan 2023 17:12:47 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E6=97=A0jira=20feat:=20es6=E5=8C=96?= =?UTF-8?q?=E8=84=9A=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- es6.js | 106 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 106 insertions(+) create mode 100644 es6.js diff --git a/es6.js b/es6.js new file mode 100644 index 000000000..665270440 --- /dev/null +++ b/es6.js @@ -0,0 +1,106 @@ +const fs = require("fs"); + +const srcName = process.argv[2]; + +const sourceCode = fs.readFileSync(srcName).toString(); + +const clzName = /BI\.(.*?)\s\=\sBI\.inherit\(/.exec(sourceCode)[1]; + +const superName = /inherit\(BI\.(.*?),/.exec(sourceCode)[1]; + +// const xtype = /BI.shortcut\(\"(.*?)\"/.exec(sourceCode)[1]; + +const collection = { + static: {} +}; + +const BI = { + inherit(_, options) { + collection.methods = Object.keys(options).map((key) => options[key]); + return collection.static; + }, + shortcut(xtype) { + collection.xtype = xtype; + } +}; + +eval(sourceCode); + +let M = ""; +let E = ""; +let I = ""; + +const coreImport = { + shortcut: true +}; + +if (superName === "Widget") { + coreImport.Widget = true; +} + +// 静态方法 +Object.keys(collection.static).forEach((key) => { + E += `\tstatic ${key} = "${collection.static[key]}"\n`; +}); + +// 对函数进行替换 +collection.methods.forEach((el) => { + let f = el.toString().replace(/^function/, el.name) + "\n"; + + + // 换 BI.Button.superclass + f = f.replace(`BI.${clzName}.superclass`, "super"); + // 换 super._defaultConfig + f = f.replace( + `super\._defaultConfig\.apply\(this\,\sarguments\)`, + "super._defaultConfig(arguments)" + ); + // 换 super.xxx.apply + f = f.replace(/super\.(.*?)\.apply\(this\,\sarguments\)/, (a) => { + const f = /super\.(.*?)\.apply\(this\,\sarguments\)/.exec(a); + return `super.${f[1]}(...arguments)`; + }); + + const target = [ + "isNull", + "toPix", + "isKey", + "isObject", + "map", + "extend", + "isFunction", + "isEmptyArray", + "isArray" + ]; + + target.forEach((t) => { + const arr = f.split(`BI.${t}`); + // nodejs 低版本没有 replaceAll + if (arr.length > 1) { + coreImport[t] = true; + f = arr.join(t); + } + + }); + + M += f; +}); + +Object.keys(coreImport).forEach((el) => { + I += `${el},`; +}); + +const outputCode = ` +import {${I}} from "@/core" + +@shortcut() +export class ${clzName} extends ${superName} { +\tstatic xtype = "${collection.xtype}" + +${E} + +${M} +} +`; + +fs.writeFileSync(srcName + ".js", outputCode); From bda879d580613b74ed998f34d07e89332bc257ef Mon Sep 17 00:00:00 2001 From: Treecat Date: Tue, 10 Jan 2023 20:41:28 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E6=97=A0jira=20fix:es6=E8=84=9A=E6=9C=AC?= =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=B8=80=E4=BA=9B=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- es6.js | 52 ++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 36 insertions(+), 16 deletions(-) diff --git a/es6.js b/es6.js index 665270440..d2be104d0 100644 --- a/es6.js +++ b/es6.js @@ -11,17 +11,26 @@ const superName = /inherit\(BI\.(.*?),/.exec(sourceCode)[1]; // const xtype = /BI.shortcut\(\"(.*?)\"/.exec(sourceCode)[1]; const collection = { - static: {} + "static": {}, + attr: {}, }; const BI = { inherit(_, options) { - collection.methods = Object.keys(options).map((key) => options[key]); + collection.methods = Object.keys(options) + .filter(key => typeof options[key] === "function") + .map(key => options[key]); + Object.keys(options) + .filter(key => typeof options[key] !== "function") + .forEach(key => { + collection.attr[key] = options[key]; + }); + return collection.static; }, shortcut(xtype) { collection.xtype = xtype; - } + }, }; eval(sourceCode); @@ -29,24 +38,28 @@ eval(sourceCode); let M = ""; let E = ""; let I = ""; +let A = ""; const coreImport = { - shortcut: true + shortcut: true, }; if (superName === "Widget") { coreImport.Widget = true; } +Object.keys(collection.attr).forEach(key => { + A = `${key} = ${JSON.stringify(collection.attr[key])};`; +}); + // 静态方法 -Object.keys(collection.static).forEach((key) => { +Object.keys(collection.static).forEach(key => { E += `\tstatic ${key} = "${collection.static[key]}"\n`; }); // 对函数进行替换 -collection.methods.forEach((el) => { - let f = el.toString().replace(/^function/, el.name) + "\n"; - +collection.methods.forEach(el => { + let f = `${el.toString().replace(/^function/, el.name)}\n`; // 换 BI.Button.superclass f = f.replace(`BI.${clzName}.superclass`, "super"); @@ -56,8 +69,9 @@ collection.methods.forEach((el) => { "super._defaultConfig(arguments)" ); // 换 super.xxx.apply - f = f.replace(/super\.(.*?)\.apply\(this\,\sarguments\)/, (a) => { + f = f.replace(/super\.(.*?)\.apply\(this\,\sarguments\)/, a => { const f = /super\.(.*?)\.apply\(this\,\sarguments\)/.exec(a); + return `super.${f[1]}(...arguments)`; }); @@ -70,23 +84,26 @@ collection.methods.forEach((el) => { "extend", "isFunction", "isEmptyArray", - "isArray" + "isArray", + "Controller", + clzName, + "createWidget", + "Events", ]; - target.forEach((t) => { + target.forEach(t => { const arr = f.split(`BI.${t}`); // nodejs 低版本没有 replaceAll if (arr.length > 1) { - coreImport[t] = true; + if (t !== clzName) coreImport[t] = true; f = arr.join(t); } - }); - M += f; + M += `${f}\n`; }); -Object.keys(coreImport).forEach((el) => { +Object.keys(coreImport).forEach(el => { I += `${el},`; }); @@ -97,10 +114,13 @@ import {${I}} from "@/core" export class ${clzName} extends ${superName} { \tstatic xtype = "${collection.xtype}" +${A} + ${E} ${M} } `; -fs.writeFileSync(srcName + ".js", outputCode); +// fs.writeFileSync(`${srcName}.js.raw`, sourceCode); +fs.writeFileSync(srcName, outputCode); From 2aefcaac8b8a6d9ad2787dd2e4215d0184f514ae Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Tue, 10 Jan 2023 20:47:52 +0800 Subject: [PATCH 3/4] =?UTF-8?q?KERNEL-14035=20refactor:=20=E5=89=A9?= =?UTF-8?q?=E4=BD=99=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); +} From 99b19a440b283e7ad8ae12a22077ed7c0bb0fc04 Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Tue, 10 Jan 2023 22:01:11 +0800 Subject: [PATCH 4/4] =?UTF-8?q?KERNEL-14073=20refactor:=20case/editor?= =?UTF-8?q?=E7=9A=84es6=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- es6.js | 8 + src/case/editor/editor.clear.js | 230 +++++++-------- src/case/editor/editor.defaulttext.js | 304 ++++++++++---------- src/case/editor/editor.shelter.js | 352 ++++++++++++----------- src/case/editor/editor.sign.js | 315 ++++++++++---------- src/case/editor/editor.state.js | 384 +++++++++++++------------ src/case/editor/editor.state.simple.js | 312 ++++++++++---------- src/case/editor/index.js | 6 + src/case/index.js | 3 + 9 files changed, 978 insertions(+), 936 deletions(-) create mode 100644 src/case/editor/index.js diff --git a/es6.js b/es6.js index d2be104d0..9c0b18bf4 100644 --- a/es6.js +++ b/es6.js @@ -89,6 +89,14 @@ collection.methods.forEach(el => { clzName, "createWidget", "Events", + "emptyFn", + "nextTick", + "bind", + "i18nText", + "isNotNull", + "isString", + "isNumber", + "isEmpty", ]; target.forEach(t => { diff --git a/src/case/editor/editor.clear.js b/src/case/editor/editor.clear.js index e18ab9599..c536e3ec1 100644 --- a/src/case/editor/editor.clear.js +++ b/src/case/editor/editor.clear.js @@ -1,28 +1,56 @@ +import { shortcut, Widget, extend, emptyFn, isKey, isFunction, createWidget, Controller, Events } from "@/core"; +import { Editor, IconButton } from "@/base"; + /** - * 有清楚按钮的文本框 + * 有清除按钮的文本框 * Created by GUY on 2015/9/29. - * @class BI.SmallTextEditor - * @extends BI.SearchEditor + * @class ClearEditor + * @extends Widget */ -BI.ClearEditor = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.ClearEditor.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { +@shortcut() +export class ClearEditor extends Widget { + static xtype = "bi.clear_editor" + + static EVENT_CHANGE = "EVENT_CHANGE" + static EVENT_FOCUS = "EVENT_FOCUS" + static EVENT_BLUR = "EVENT_BLUR" + static EVENT_CLICK = "EVENT_CLICK" + static EVENT_KEY_DOWN = "EVENT_KEY_DOWN" + static EVENT_SPACE = "EVENT_SPACE" + static EVENT_BACKSPACE = "EVENT_BACKSPACE" + static EVENT_CLEAR = "EVENT_CLEAR" + static EVENT_START = "EVENT_START" + static EVENT_PAUSE = "EVENT_PAUSE" + static EVENT_STOP = "EVENT_STOP" + static EVENT_CONFIRM = "EVENT_CONFIRM" + static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM" + static EVENT_VALID = "EVENT_VALID" + static EVENT_ERROR = "EVENT_ERROR" + static EVENT_ENTER = "EVENT_ENTER" + static EVENT_RESTRICT = "EVENT_RESTRICT" + static EVENT_REMOVE = "EVENT_REMOVE" + static EVENT_EMPTY = "EVENT_EMPTY" + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { baseCls: "bi-clear-editor", height: 24, errorText: "", watermark: "", - validationChecker: BI.emptyFn, - quitChecker: BI.emptyFn - }); - }, - _init: function () { - var self = this, o = this.options; - o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) { - self.setValue(newValue); + validationChecker: emptyFn, + quitChecker: emptyFn, + }); + } + + _init() { + const o = this.options; + o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => { + this.setValue(newValue); }) : o.value; - BI.ClearEditor.superclass._init.apply(this, arguments); - this.editor = BI.createWidget({ + super._init(...arguments); + this.editor = createWidget({ type: "bi.editor", simple: o.simple, height: o.height, @@ -34,150 +62,128 @@ BI.ClearEditor = BI.inherit(BI.Widget, { value: o.value, autoTrim: o.autoTrim, }); - this.clear = BI.createWidget({ + this.clear = createWidget({ type: "bi.icon_button", stopEvent: true, - invisible: !BI.isKey(o.value), - cls: "search-close-h-font" + invisible: !isKey(o.value), + cls: "search-close-h-font", }); - this.clear.on(BI.IconButton.EVENT_CHANGE, function () { - self.setValue(""); - self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.STOPEDIT); - self.fireEvent(BI.ClearEditor.EVENT_CLEAR); + this.clear.on(IconButton.EVENT_CHANGE, () => { + this.setValue(""); + this.fireEvent(Controller.EVENT_CHANGE, Events.STOPEDIT); + this.fireEvent(ClearEditor.EVENT_CLEAR); }); - BI.createWidget({ + createWidget({ element: this, type: "bi.htape", - items: [ - { - el: this.editor - }, - { - el: this.clear, - width: 24 - } - ] - }); - this.editor.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + items: [{ + el: this.editor, + }, + { + el: this.clear, + width: 24, + } + ], + }); + this.editor.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_FOCUS, function () { - self.fireEvent(BI.ClearEditor.EVENT_FOCUS); + this.editor.on(Editor.EVENT_FOCUS, () => { + this.fireEvent(ClearEditor.EVENT_FOCUS); }); - this.editor.on(BI.Editor.EVENT_BLUR, function () { - self.fireEvent(BI.ClearEditor.EVENT_BLUR); + this.editor.on(Editor.EVENT_BLUR, () => { + this.fireEvent(ClearEditor.EVENT_BLUR); }); - this.editor.on(BI.Editor.EVENT_CLICK, function () { - self.fireEvent(BI.ClearEditor.EVENT_CLICK); + this.editor.on(Editor.EVENT_CLICK, () => { + this.fireEvent(ClearEditor.EVENT_CLICK); }); - this.editor.on(BI.Editor.EVENT_CHANGE, function () { - self._checkClear(); - self.fireEvent(BI.ClearEditor.EVENT_CHANGE); + this.editor.on(Editor.EVENT_CHANGE, () => { + this._checkClear(); + this.fireEvent(ClearEditor.EVENT_CHANGE); }); - this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) { - self.fireEvent(BI.ClearEditor.EVENT_KEY_DOWN, v); + this.editor.on(Editor.EVENT_KEY_DOWN, v => { + this.fireEvent(ClearEditor.EVENT_KEY_DOWN, v); }); - this.editor.on(BI.Editor.EVENT_SPACE, function () { - self.fireEvent(BI.ClearEditor.EVENT_SPACE); + this.editor.on(Editor.EVENT_SPACE, () => { + this.fireEvent(ClearEditor.EVENT_SPACE); }); - this.editor.on(BI.Editor.EVENT_BACKSPACE, function () { - self.fireEvent(BI.ClearEditor.EVENT_BACKSPACE); + this.editor.on(Editor.EVENT_BACKSPACE, () => { + this.fireEvent(ClearEditor.EVENT_BACKSPACE); }); - this.editor.on(BI.Editor.EVENT_VALID, function () { - self.fireEvent(BI.ClearEditor.EVENT_VALID); + this.editor.on(Editor.EVENT_VALID, () => { + this.fireEvent(ClearEditor.EVENT_VALID); }); - this.editor.on(BI.Editor.EVENT_ERROR, function () { - self.fireEvent(BI.ClearEditor.EVENT_ERROR); + this.editor.on(Editor.EVENT_ERROR, () => { + this.fireEvent(ClearEditor.EVENT_ERROR); }); - this.editor.on(BI.Editor.EVENT_ENTER, function () { - self.fireEvent(BI.ClearEditor.EVENT_ENTER); + this.editor.on(Editor.EVENT_ENTER, () => { + this.fireEvent(ClearEditor.EVENT_ENTER); }); - this.editor.on(BI.Editor.EVENT_RESTRICT, function () { - self.fireEvent(BI.ClearEditor.EVENT_RESTRICT); + this.editor.on(Editor.EVENT_RESTRICT, () => { + this.fireEvent(ClearEditor.EVENT_RESTRICT); }); - this.editor.on(BI.Editor.EVENT_EMPTY, function () { - self._checkClear(); - self.fireEvent(BI.ClearEditor.EVENT_EMPTY); + this.editor.on(Editor.EVENT_EMPTY, () => { + this._checkClear(); + this.fireEvent(ClearEditor.EVENT_EMPTY); }); - this.editor.on(BI.Editor.EVENT_REMOVE, function () { - self.fireEvent(BI.ClearEditor.EVENT_REMOVE); + this.editor.on(Editor.EVENT_REMOVE, () => { + this.fireEvent(ClearEditor.EVENT_REMOVE); }); - this.editor.on(BI.Editor.EVENT_CONFIRM, function () { - self.fireEvent(BI.ClearEditor.EVENT_CONFIRM); + this.editor.on(Editor.EVENT_CONFIRM, () => { + this.fireEvent(ClearEditor.EVENT_CONFIRM); }); - this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { - self.fireEvent(BI.ClearEditor.EVENT_CHANGE_CONFIRM); + this.editor.on(Editor.EVENT_CHANGE_CONFIRM, () => { + this.fireEvent(ClearEditor.EVENT_CHANGE_CONFIRM); }); - this.editor.on(BI.Editor.EVENT_START, function () { - self.fireEvent(BI.ClearEditor.EVENT_START); + this.editor.on(Editor.EVENT_START, () => { + this.fireEvent(ClearEditor.EVENT_START); }); - this.editor.on(BI.Editor.EVENT_PAUSE, function () { - self.fireEvent(BI.ClearEditor.EVENT_PAUSE); + this.editor.on(Editor.EVENT_PAUSE, () => { + this.fireEvent(ClearEditor.EVENT_PAUSE); }); - this.editor.on(BI.Editor.EVENT_STOP, function () { - self.fireEvent(BI.ClearEditor.EVENT_STOP); + this.editor.on(Editor.EVENT_STOP, () => { + this.fireEvent(ClearEditor.EVENT_STOP); }); - }, + } - _checkClear: function () { + _checkClear() { if (!this.getValue()) { this.clear.invisible(); } else { this.clear.visible(); } - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.options.watermark = v; this.editor.setWaterMark(v); - }, + } - focus: function () { + focus() { this.editor.focus(); - }, + } - blur: function () { + blur() { this.editor.blur(); - }, + } - getValue: function () { + getValue() { if (this.isValid()) { return this.editor.getValue(); } - }, + } - setValue: function (v) { + setValue(v) { this.editor.setValue(v); - if (BI.isKey(v)) { + if (isKey(v)) { this.clear.visible(); } - }, + } - isValid: function () { + isValid() { return this.editor.isValid(); } -}); -BI.ClearEditor.EVENT_CHANGE = "EVENT_CHANGE"; -BI.ClearEditor.EVENT_FOCUS = "EVENT_FOCUS"; -BI.ClearEditor.EVENT_BLUR = "EVENT_BLUR"; -BI.ClearEditor.EVENT_CLICK = "EVENT_CLICK"; -BI.ClearEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; -BI.ClearEditor.EVENT_SPACE = "EVENT_SPACE"; -BI.ClearEditor.EVENT_BACKSPACE = "EVENT_BACKSPACE"; -BI.ClearEditor.EVENT_CLEAR = "EVENT_CLEAR"; - -BI.ClearEditor.EVENT_START = "EVENT_START"; -BI.ClearEditor.EVENT_PAUSE = "EVENT_PAUSE"; -BI.ClearEditor.EVENT_STOP = "EVENT_STOP"; -BI.ClearEditor.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.ClearEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; -BI.ClearEditor.EVENT_VALID = "EVENT_VALID"; -BI.ClearEditor.EVENT_ERROR = "EVENT_ERROR"; -BI.ClearEditor.EVENT_ENTER = "EVENT_ENTER"; -BI.ClearEditor.EVENT_RESTRICT = "EVENT_RESTRICT"; -BI.ClearEditor.EVENT_REMOVE = "EVENT_REMOVE"; -BI.ClearEditor.EVENT_EMPTY = "EVENT_EMPTY"; -BI.shortcut("bi.clear_editor", BI.ClearEditor); +} diff --git a/src/case/editor/editor.defaulttext.js b/src/case/editor/editor.defaulttext.js index fe88d27bb..7597347d7 100644 --- a/src/case/editor/editor.defaulttext.js +++ b/src/case/editor/editor.defaulttext.js @@ -1,11 +1,36 @@ + +import { shortcut, Widget, emptyFn, isKey, isFunction, createWidget, nextTick, Controller } from "@/core"; +import { Editor, TextButton } from "@/base"; + /** * dailer * 有默认提示文字的输入框 - * @class BI.DefaultTextEditor - * @extends BI.Widget + * @class DefaultTextEditor + * @extends Widget */ -BI.DefaultTextEditor = BI.inherit(BI.Widget, { - props: function () { +@shortcut() +export class DefaultTextEditor extends Widget { + static xtype = "bi.default_text_editor" + + static EVENT_CHANGE = "EVENT_CHANGE" + static EVENT_FOCUS = "EVENT_FOCUS" + static EVENT_BLUR = "EVENT_BLUR" + static EVENT_CLICK = "EVENT_CLICK" + static EVENT_KEY_DOWN = "EVENT_KEY_DOWN" + static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL" + static EVENT_START = "EVENT_START" + static EVENT_PAUSE = "EVENT_PAUSE" + static EVENT_STOP = "EVENT_STOP" + static EVENT_CONFIRM = "EVENT_CONFIRM" + static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM" + static EVENT_VALID = "EVENT_VALID" + static EVENT_ERROR = "EVENT_ERROR" + static EVENT_ENTER = "EVENT_ENTER" + static EVENT_RESTRICT = "EVENT_RESTRICT" + static EVENT_SPACE = "EVENT_SPACE" + static EVENT_EMPTY = "EVENT_EMPTY" + + props() { return { baseCls: "bi-default-text-editor", hgap: 4, @@ -14,21 +39,21 @@ BI.DefaultTextEditor = BI.inherit(BI.Widget, { rgap: 0, tgap: 0, bgap: 0, - validationChecker: BI.emptyFn, - quitChecker: BI.emptyFn, + validationChecker: emptyFn, + quitChecker: emptyFn, allowBlank: true, watermark: "", errorText: "", height: 24, defaultText: "", // 默认显示值，默认显示值与显示值的区别是默认显示值标记灰色 text: "", // 显示值 - el: {} + el: {}, }; - }, + } - render: function () { - var self = this, o = this.options; - this.editor = BI.createWidget(o.el, { + render() { + const o = this.options; + this.editor = createWidget(o.el, { type: "bi.editor", simple: o.simple, height: o.height, @@ -48,239 +73,218 @@ BI.DefaultTextEditor = BI.inherit(BI.Widget, { autoTrim: o.autoTrim, }); - var showText = BI.isFunction(o.text) ? o.text() : o.text; + const showText = isFunction(o.text) ? o.text() : o.text; - this.text = BI.createWidget({ + this.text = createWidget({ type: "bi.text_button", - cls: BI.isKey(showText) ? "tip-text-style" : "bi-water-mark tip-text-style", + cls: isKey(showText) ? "tip-text-style" : "bi-water-mark tip-text-style", textAlign: "left", height: o.height, text: showText || o.defaultText, hgap: o.hgap + 2, - handler: function () { - self._showInput(); - self.editor.focus(); - self.editor.setValue(""); + handler: () => { + this._showInput(); + this.editor.focus(); + this.editor.setValue(""); }, title: o.title, warningTitle: o.warningTitle, - tipType: o.tipType + tipType: o.tipType, }); - this.text.on(BI.TextButton.EVENT_CHANGE, function () { - BI.nextTick(function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_CLICK_LABEL); + this.text.on(TextButton.EVENT_CHANGE, () => { + nextTick(() => { + this.fireEvent(DefaultTextEditor.EVENT_CLICK_LABEL); }); }); - this.editor.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.editor.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_FOCUS, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_FOCUS, arguments); + this.editor.on(Editor.EVENT_FOCUS, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_FOCUS, ...args); }); - this.editor.on(BI.Editor.EVENT_BLUR, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_BLUR, arguments); + this.editor.on(Editor.EVENT_BLUR, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_BLUR, ...args); }); - this.editor.on(BI.Editor.EVENT_CLICK, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_CLICK, arguments); + this.editor.on(Editor.EVENT_CLICK, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_CLICK, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_CHANGE, arguments); + this.editor.on(Editor.EVENT_CHANGE, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) { - self.fireEvent(BI.DefaultTextEditor.EVENT_KEY_DOWN, arguments); + this.editor.on(Editor.EVENT_KEY_DOWN, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_KEY_DOWN, ...args); }); - this.editor.on(BI.Editor.EVENT_VALID, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_VALID, arguments); + this.editor.on(Editor.EVENT_VALID, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_VALID, ...args); }); - this.editor.on(BI.Editor.EVENT_CONFIRM, function () { - self._showHint(); - self.fireEvent(BI.DefaultTextEditor.EVENT_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CONFIRM, (...args) => { + this._showHint(); + this.fireEvent(DefaultTextEditor.EVENT_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { - self._showHint(); - self.fireEvent(BI.DefaultTextEditor.EVENT_CHANGE_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => { + this._showHint(); + this.fireEvent(DefaultTextEditor.EVENT_CHANGE_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_START, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_START, arguments); + this.editor.on(Editor.EVENT_START, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_START, ...args); }); - this.editor.on(BI.Editor.EVENT_PAUSE, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_PAUSE, arguments); + this.editor.on(Editor.EVENT_PAUSE, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_PAUSE, ...args); }); - this.editor.on(BI.Editor.EVENT_STOP, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_STOP, arguments); + this.editor.on(Editor.EVENT_STOP, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_STOP, ...args); }); - this.editor.on(BI.Editor.EVENT_SPACE, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_SPACE, arguments); + this.editor.on(Editor.EVENT_SPACE, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_SPACE, ...args); }); - this.editor.on(BI.Editor.EVENT_ERROR, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_ERROR, arguments); + this.editor.on(Editor.EVENT_ERROR, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_ERROR, ...args); }); - this.editor.on(BI.Editor.EVENT_ENTER, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_ENTER, arguments); + this.editor.on(Editor.EVENT_ENTER, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_ENTER, ...args); }); - this.editor.on(BI.Editor.EVENT_RESTRICT, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_RESTRICT, arguments); + this.editor.on(Editor.EVENT_RESTRICT, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_RESTRICT, ...args); }); - this.editor.on(BI.Editor.EVENT_EMPTY, function () { - self.fireEvent(BI.DefaultTextEditor.EVENT_EMPTY, arguments); + this.editor.on(Editor.EVENT_EMPTY, (...args) => { + this.fireEvent(DefaultTextEditor.EVENT_EMPTY, ...args); }); return { type: "bi.absolute", - items: [ - { - el: this.editor, - left: 0, - right: 0, - top: 0, - bottom: 0 - }, { - el: this.text, - left: 0, - right: 0, - top: 0, - bottom: 0 - } - ] + items: [{ + el: this.editor, + left: 0, + right: 0, + top: 0, + bottom: 0, + }, { + el: this.text, + left: 0, + right: 0, + top: 0, + bottom: 0, + }], }; - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.options.watermark = v; this.editor.setWaterMark(v); - }, + } - setTitle: function (title) { + setTitle(title) { this.text.setTitle(title); - }, + } - setWarningTitle: function (title) { + setWarningTitle(title) { this.text.setWarningTitle(title); - }, + } - doRedMark: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + doRedMark() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doRedMark.apply(this.text, arguments); - }, + this.text.doRedMark(...arguments); + } - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, + unRedMark() { + this.text.unRedMark(...arguments); + } - doHighLight: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + doHighLight() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doHighLight.apply(this.text, arguments); - }, + this.text.doHighLight(...arguments); + } - unHighLight: function () { - this.text.unHighLight.apply(this.text, arguments); - }, + unHighLight() { + this.text.unHighLight(...arguments); + } - focus: function () { + focus() { if (this.options.disabled === false) { this._showInput(); this.editor.focus(); } - }, + } - blur: function () { + blur() { this.editor.blur(); this._showHint(); - }, + } - _showInput: function () { + _showInput() { this.editor.visible(); this.text.invisible(); - }, + } - _showHint: function () { + _showHint() { this.editor.invisible(); this.text.visible(); - }, + } - _setText: function (v) { + _setText(v) { this.text.setText(v); this.text.setTitle(v); - }, + } - isValid: function () { + isValid() { return this.editor.isValid(); - }, + } - setErrorText: function (text) { + setErrorText(text) { this.editor.setErrorText(text); - }, + } - getErrorText: function () { + getErrorText() { return this.editor.getErrorText(); - }, + } - isEditing: function () { + isEditing() { return this.editor.isEditing(); - }, + } - getLastValidValue: function () { + getLastValidValue() { return this.editor.getLastValidValue(); - }, + } - getLastChangedValue: function () { + getLastChangedValue() { return this.editor.getLastChangedValue(); - }, + } - setValue: function (k) { + setValue(k) { this.editor.setValue(k); - }, + } - getValue: function () { + getValue() { return this.editor.getValue(); - }, + } - getState: function () { + getState() { return this.text.getValue(); - }, + } - setState: function (v) { - var o = this.options; - if (BI.isKey(v)) { + setState(v) { + const o = this.options; + if (isKey(v)) { this.text.setText(v); this.text.element.removeClass("bi-water-mark"); + return; } this.text.setText(o.defaultText); this.text.element.addClass("bi-water-mark"); - }, + } - setTipType: function (v) { + setTipType(v) { this.text.options.tipType = v; - }, + } - getText: function () { + getText() { return this.text.getText(); } -}); -BI.DefaultTextEditor.EVENT_CHANGE = "EVENT_CHANGE"; -BI.DefaultTextEditor.EVENT_FOCUS = "EVENT_FOCUS"; -BI.DefaultTextEditor.EVENT_BLUR = "EVENT_BLUR"; -BI.DefaultTextEditor.EVENT_CLICK = "EVENT_CLICK"; -BI.DefaultTextEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; -BI.DefaultTextEditor.EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"; - -BI.DefaultTextEditor.EVENT_START = "EVENT_START"; -BI.DefaultTextEditor.EVENT_PAUSE = "EVENT_PAUSE"; -BI.DefaultTextEditor.EVENT_STOP = "EVENT_STOP"; -BI.DefaultTextEditor.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.DefaultTextEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; -BI.DefaultTextEditor.EVENT_VALID = "EVENT_VALID"; -BI.DefaultTextEditor.EVENT_ERROR = "EVENT_ERROR"; -BI.DefaultTextEditor.EVENT_ENTER = "EVENT_ENTER"; -BI.DefaultTextEditor.EVENT_RESTRICT = "EVENT_RESTRICT"; -BI.DefaultTextEditor.EVENT_SPACE = "EVENT_SPACE"; -BI.DefaultTextEditor.EVENT_EMPTY = "EVENT_EMPTY"; - -BI.shortcut("bi.default_text_editor", BI.DefaultTextEditor); +} diff --git a/src/case/editor/editor.shelter.js b/src/case/editor/editor.shelter.js index 4cb8e4d75..7517c6320 100644 --- a/src/case/editor/editor.shelter.js +++ b/src/case/editor/editor.shelter.js @@ -1,37 +1,62 @@ +import { shortcut, Widget, extend, emptyFn, isFunction, createWidget, Controller, isKey, nextTick, bind } from "@/core"; +import { Editor, TextButton } from "@/base"; + /** * 带标记的文本框 * Created by GUY on 2016/1/25. - * @class BI.ShelterEditor - * @extends BI.Widget + * @class ShelterEditor + * @extends Widget */ -BI.ShelterEditor = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.ShelterEditor.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-shelter-editor", +@shortcut() +export class ShelterEditor extends Widget { + static xtype = "bi.shelter_editor" + + static EVENT_CHANGE = "EVENT_CHANGE" + static EVENT_FOCUS = "EVENT_FOCUS" + static EVENT_BLUR = "EVENT_BLUR" + static EVENT_CLICK = "EVENT_CLICK" + static EVENT_KEY_DOWN = "EVENT_KEY_DOWN" + static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL" + static EVENT_START = "EVENT_START" + static EVENT_PAUSE = "EVENT_PAUSE" + static EVENT_STOP = "EVENT_STOP" + static EVENT_CONFIRM = "EVENT_CONFIRM" + static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM" + static EVENT_VALID = "EVENT_VALID" + static EVENT_ERROR = "EVENT_ERROR" + static EVENT_ENTER = "EVENT_ENTER" + static EVENT_RESTRICT = "EVENT_RESTRICT" + static EVENT_SPACE = "EVENT_SPACE" + static EVENT_EMPTY = "EVENT_EMPTY" + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: `${conf.baseCls || ""} bi-shelter-editor`, hgap: 4, vgap: 2, lgap: 0, rgap: 0, tgap: 0, bgap: 0, - validationChecker: BI.emptyFn, - quitChecker: BI.emptyFn, + validationChecker: emptyFn, + quitChecker: emptyFn, allowBlank: true, watermark: "", errorText: "", height: 24, - textAlign: "left" + textAlign: "left", }); - }, - - _init: function () { - var self = this, o = this.options; - o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) { - self.setValue(newValue); + } + + _init() { + const o = this.options; + o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => { + this.setValue(newValue); }) : o.value; - BI.ShelterEditor.superclass._init.apply(this, arguments); - this.editor = BI.createWidget({ + super._init(...arguments); + this.editor = createWidget({ type: "bi.editor", simple: o.simple, height: o.height, @@ -49,7 +74,7 @@ BI.ShelterEditor = BI.inherit(BI.Widget, { errorText: o.errorText, autoTrim: o.autoTrim, }); - this.text = BI.createWidget({ + this.text = createWidget({ type: "bi.text_button", cls: "shelter-editor-text", title: o.title, @@ -57,92 +82,90 @@ BI.ShelterEditor = BI.inherit(BI.Widget, { tipType: o.tipType, textAlign: o.textAlign, height: o.height, - hgap: o.hgap + 2 + hgap: o.hgap + 2, }); - this.text.on(BI.Controller.EVENT_CHANGE, function () { - arguments[2] = self; - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.text.on(Controller.EVENT_CHANGE, (...args) => { + args[2] = this; + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - this.text.on(BI.TextButton.EVENT_CHANGE, function () { - self.fireEvent(BI.ShelterEditor.EVENT_CLICK_LABEL); + this.text.on(TextButton.EVENT_CHANGE, () => { + this.fireEvent(ShelterEditor.EVENT_CLICK_LABEL); }); - this.editor.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.editor.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_FOCUS, function () { - self.fireEvent(BI.ShelterEditor.EVENT_FOCUS, arguments); + this.editor.on(Editor.EVENT_FOCUS, (...args) => { + this.fireEvent(ShelterEditor.EVENT_FOCUS, ...args); }); - this.editor.on(BI.Editor.EVENT_BLUR, function () { - self.fireEvent(BI.ShelterEditor.EVENT_BLUR, arguments); + this.editor.on(Editor.EVENT_BLUR, (...args) => { + this.fireEvent(ShelterEditor.EVENT_BLUR, ...args); }); - this.editor.on(BI.Editor.EVENT_CLICK, function () { - self.fireEvent(BI.ShelterEditor.EVENT_CLICK, arguments); + this.editor.on(Editor.EVENT_CLICK, (...args) => { + this.fireEvent(ShelterEditor.EVENT_CLICK, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE, function () { - self.fireEvent(BI.ShelterEditor.EVENT_CHANGE, arguments); + this.editor.on(Editor.EVENT_CHANGE, (...args) => { + this.fireEvent(ShelterEditor.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) { - self.fireEvent(BI.ShelterEditor.EVENT_KEY_DOWN, arguments); + this.editor.on(Editor.EVENT_KEY_DOWN, (...args) => { + this.fireEvent(ShelterEditor.EVENT_KEY_DOWN, ...args); }); - this.editor.on(BI.Editor.EVENT_VALID, function () { - self.fireEvent(BI.ShelterEditor.EVENT_VALID, arguments); + this.editor.on(Editor.EVENT_VALID, (...args) => { + this.fireEvent(ShelterEditor.EVENT_VALID, ...args); }); - this.editor.on(BI.Editor.EVENT_CONFIRM, function () { - self._showHint(); - self._checkText(); - self.fireEvent(BI.ShelterEditor.EVENT_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CONFIRM, (...args) => { + this._showHint(); + this._checkText(); + this.fireEvent(ShelterEditor.EVENT_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { - self._showHint(); - self._checkText(); - self.fireEvent(BI.ShelterEditor.EVENT_CHANGE_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => { + this._showHint(); + this._checkText(); + this.fireEvent(ShelterEditor.EVENT_CHANGE_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_START, function () { - self.fireEvent(BI.ShelterEditor.EVENT_START, arguments); + this.editor.on(Editor.EVENT_START, (...args) => { + this.fireEvent(ShelterEditor.EVENT_START, ...args); }); - this.editor.on(BI.Editor.EVENT_PAUSE, function () { - self.fireEvent(BI.ShelterEditor.EVENT_PAUSE, arguments); + this.editor.on(Editor.EVENT_PAUSE, (...args) => { + this.fireEvent(ShelterEditor.EVENT_PAUSE, ...args); }); - this.editor.on(BI.Editor.EVENT_STOP, function () { - self.fireEvent(BI.ShelterEditor.EVENT_STOP, arguments); + this.editor.on(Editor.EVENT_STOP, (...args) => { + this.fireEvent(ShelterEditor.EVENT_STOP, ...args); }); - this.editor.on(BI.Editor.EVENT_SPACE, function () { - self.fireEvent(BI.ShelterEditor.EVENT_SPACE, arguments); + this.editor.on(Editor.EVENT_SPACE, (...args) => { + this.fireEvent(ShelterEditor.EVENT_SPACE, ...args); }); - this.editor.on(BI.Editor.EVENT_ERROR, function () { - self._checkText(); - self.fireEvent(BI.ShelterEditor.EVENT_ERROR, arguments); + this.editor.on(Editor.EVENT_ERROR, (...args) => { + this._checkText(); + this.fireEvent(ShelterEditor.EVENT_ERROR, ...args); }); - this.editor.on(BI.Editor.EVENT_ENTER, function () { - self.fireEvent(BI.ShelterEditor.EVENT_ENTER, arguments); + this.editor.on(Editor.EVENT_ENTER, (...args) => { + this.fireEvent(ShelterEditor.EVENT_ENTER, ...args); }); - this.editor.on(BI.Editor.EVENT_RESTRICT, function () { - self.fireEvent(BI.ShelterEditor.EVENT_RESTRICT, arguments); + this.editor.on(Editor.EVENT_RESTRICT, (...args) => { + this.fireEvent(ShelterEditor.EVENT_RESTRICT, ...args); }); - this.editor.on(BI.Editor.EVENT_EMPTY, function () { - self.fireEvent(BI.ShelterEditor.EVENT_EMPTY, arguments); + this.editor.on(Editor.EVENT_EMPTY, (...args) => { + this.fireEvent(ShelterEditor.EVENT_EMPTY, ...args); }); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, - items: [ - { - el: this.text, - inset: 0, - }, { - el: this.editor, - inset: 0, - } - ] + items: [{ + el: this.text, + inset: 0, + }, { + el: this.editor, + inset: 0, + }], }); this._showHint(); - self._checkText(); - }, - - _checkText: function () { - var o = this.options; - BI.nextTick(BI.bind(function () { + this._checkText(); + } + + _checkText() { + const o = this.options; + nextTick(bind(function () { if (this.editor.getValue() === "") { this.text.setValue(o.watermark || ""); this.text.element.addClass("bi-water-mark"); @@ -150,130 +173,109 @@ BI.ShelterEditor = BI.inherit(BI.Widget, { this.text.setValue(this.editor.getValue()); this.text.element.removeClass("bi-water-mark"); } - BI.isKey(o.keyword) && this.text.doRedMark(o.keyword); + isKey(o.keyword) && this.text.doRedMark(o.keyword); }, this)); - }, - - _showInput: function () { + } + + _showInput() { this.editor.visible(); this.text.invisible(); - }, - - _showHint: function () { + } + + _showHint() { this.editor.invisible(); this.text.visible(); - }, - - setWaterMark: function (v) { + } + + setWaterMark(v) { this.options.watermark = v; this.editor.setWaterMark(v); - }, - - setTitle: function (title) { + } + + setTitle(title) { this.text.setTitle(title); - }, - - setWarningTitle: function (title) { + } + + setWarningTitle(title) { this.text.setWarningTitle(title); - }, - - focus: function () { + } + + focus() { this._showInput(); this.editor.focus(); - }, - - blur: function () { + } + + blur() { this.editor.blur(); this._showHint(); this._checkText(); - }, - - doRedMark: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + } + + doRedMark() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doRedMark.apply(this.text, arguments); - }, - - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, - - doHighLight: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + this.text.doRedMark(...arguments); + } + + unRedMark() { + this.text.unRedMark(...arguments); + } + + doHighLight() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doHighLight.apply(this.text, arguments); - }, - - unHighLight: function () { - this.text.unHighLight.apply(this.text, arguments); - }, - - isValid: function () { + this.text.doHighLight(...arguments); + } + + unHighLight() { + this.text.unHighLight(...arguments); + } + + isValid() { return this.editor.isValid(); - }, - - setErrorText: function (text) { + } + + setErrorText(text) { this.editor.setErrorText(text); - }, - - getErrorText: function () { + } + + getErrorText() { return this.editor.getErrorText(); - }, - - isEditing: function () { + } + + isEditing() { return this.editor.isEditing(); - }, - - getLastValidValue: function () { + } + + getLastValidValue() { return this.editor.getLastValidValue(); - }, - - getLastChangedValue: function () { + } + + getLastChangedValue() { return this.editor.getLastChangedValue(); - }, - - setTextStyle: function (style) { + } + + setTextStyle(style) { this.text.setStyle(style); - }, - - setValue: function (k) { - var o = this.options; + } + + setValue(k) { this.editor.setValue(k); this._checkText(); - }, - - getValue: function () { + } + + getValue() { return this.editor.getValue(); - }, - - getState: function () { + } + + getState() { return this.text.getValue(); - }, - - setState: function (v) { + } + + setState(v) { this._showHint(); this.text.setValue(v); } -}); -BI.ShelterEditor.EVENT_CHANGE = "EVENT_CHANGE"; -BI.ShelterEditor.EVENT_FOCUS = "EVENT_FOCUS"; -BI.ShelterEditor.EVENT_BLUR = "EVENT_BLUR"; -BI.ShelterEditor.EVENT_CLICK = "EVENT_CLICK"; -BI.ShelterEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; -BI.ShelterEditor.EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"; - -BI.ShelterEditor.EVENT_START = "EVENT_START"; -BI.ShelterEditor.EVENT_PAUSE = "EVENT_PAUSE"; -BI.ShelterEditor.EVENT_STOP = "EVENT_STOP"; -BI.ShelterEditor.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.ShelterEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; -BI.ShelterEditor.EVENT_VALID = "EVENT_VALID"; -BI.ShelterEditor.EVENT_ERROR = "EVENT_ERROR"; -BI.ShelterEditor.EVENT_ENTER = "EVENT_ENTER"; -BI.ShelterEditor.EVENT_RESTRICT = "EVENT_RESTRICT"; -BI.ShelterEditor.EVENT_SPACE = "EVENT_SPACE"; -BI.ShelterEditor.EVENT_EMPTY = "EVENT_EMPTY"; - -BI.shortcut("bi.shelter_editor", BI.ShelterEditor); +} diff --git a/src/case/editor/editor.sign.js b/src/case/editor/editor.sign.js index a624d78a2..08feca088 100644 --- a/src/case/editor/editor.sign.js +++ b/src/case/editor/editor.sign.js @@ -1,37 +1,63 @@ +import { shortcut, Widget, extend, emptyFn, isFunction, createWidget, nextTick, isKey, bind, Controller } from "@/core"; +import { Editor, TextButton } from "@/base"; + /** * 带标记的文本框 * Created by GUY on 2015/8/28. - * @class BI.SignEditor - * @extends BI.Widget + * @class SignEditor + * @extends Widget */ -BI.SignEditor = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.SignEditor.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-sign-editor", +@shortcut() +export class SignEditor extends Widget { + static xtype = "bi.sign_editor" + + static EVENT_CHANGE = "EVENT_CHANGE" + static EVENT_FOCUS = "EVENT_FOCUS" + static EVENT_BLUR = "EVENT_BLUR" + static EVENT_CLICK = "EVENT_CLICK" + static EVENT_KEY_DOWN = "EVENT_KEY_DOWN" + static EVENT_QUICK_DOWN = "EVENT_QUICK_DOWN" + static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL" + static EVENT_START = "EVENT_START" + static EVENT_PAUSE = "EVENT_PAUSE" + static EVENT_STOP = "EVENT_STOP" + static EVENT_CONFIRM = "EVENT_CONFIRM" + static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM" + static EVENT_VALID = "EVENT_VALID" + static EVENT_ERROR = "EVENT_ERROR" + static EVENT_ENTER = "EVENT_ENTER" + static EVENT_RESTRICT = "EVENT_RESTRICT" + static EVENT_SPACE = "EVENT_SPACE" + static EVENT_EMPTY = "EVENT_EMPTY" + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: `${conf.baseCls || ""} bi-sign-editor`, hgap: 4, vgap: 2, lgap: 0, rgap: 0, tgap: 0, bgap: 0, - validationChecker: BI.emptyFn, - quitChecker: BI.emptyFn, + validationChecker: emptyFn, + quitChecker: emptyFn, allowBlank: true, watermark: "", errorText: "", textAlign: "left", - height: 24 + height: 24, }); - }, + } - _init: function () { - var self = this, o = this.options; - o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) { - self.setValue(newValue); + _init() { + const o = this.options; + o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => { + this.setValue(newValue); }) : o.value; - BI.SignEditor.superclass._init.apply(this, arguments); - this.editor = BI.createWidget({ + super._init(...arguments); + this.editor = createWidget({ type: "bi.editor", simple: o.simple, height: o.height, @@ -49,7 +75,7 @@ BI.SignEditor = BI.inherit(BI.Widget, { errorText: o.errorText, autoTrim: o.autoTrim, }); - this.text = BI.createWidget({ + this.text = createWidget({ type: "bi.text_button", cls: "sign-editor-text", title: o.title, @@ -58,229 +84,206 @@ BI.SignEditor = BI.inherit(BI.Widget, { textAlign: o.textAlign, height: o.height, hgap: o.hgap + 2, - handler: function () { - self._showInput(); - self.editor.focus(); - self.editor.selectAll(); - } + handler: () => { + this._showInput(); + this.editor.focus(); + this.editor.selectAll(); + }, }); - this.text.on(BI.TextButton.EVENT_CHANGE, function () { - BI.nextTick(function () { - self.fireEvent(BI.SignEditor.EVENT_CLICK_LABEL); + this.text.on(TextButton.EVENT_CHANGE, () => { + nextTick(() => { + this.fireEvent(SignEditor.EVENT_CLICK_LABEL); }); }); - this.editor.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.editor.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_FOCUS, function () { - self.fireEvent(BI.SignEditor.EVENT_FOCUS, arguments); + this.editor.on(Editor.EVENT_FOCUS, (...args) => { + this.fireEvent(SignEditor.EVENT_FOCUS, ...args); }); - this.editor.on(BI.Editor.EVENT_BLUR, function () { - self.fireEvent(BI.SignEditor.EVENT_BLUR, arguments); + this.editor.on(Editor.EVENT_BLUR, (...args) => { + this.fireEvent(SignEditor.EVENT_BLUR, ...args); }); - this.editor.on(BI.Editor.EVENT_CLICK, function () { - self.fireEvent(BI.SignEditor.EVENT_CLICK, arguments); + this.editor.on(Editor.EVENT_CLICK, (...args) => { + this.fireEvent(SignEditor.EVENT_CLICK, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE, function () { - self.fireEvent(BI.SignEditor.EVENT_CHANGE, arguments); + this.editor.on(Editor.EVENT_CHANGE, (...args) => { + this.fireEvent(SignEditor.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) { - self.fireEvent(BI.SignEditor.EVENT_KEY_DOWN, arguments); + this.editor.on(Editor.EVENT_KEY_DOWN, (...args) => { + this.fireEvent(SignEditor.EVENT_KEY_DOWN, ...args); }); - this.editor.on(BI.Editor.EVENT_QUICK_DOWN, function () { - self.fireEvent(BI.SignEditor.EVENT_QUICK_DOWN, arguments); + this.editor.on(Editor.EVENT_QUICK_DOWN, (...args) => { + this.fireEvent(SignEditor.EVENT_QUICK_DOWN, ...args); }); - this.editor.on(BI.Editor.EVENT_VALID, function () { - self.fireEvent(BI.SignEditor.EVENT_VALID, arguments); + this.editor.on(Editor.EVENT_VALID, (...args) => { + this.fireEvent(SignEditor.EVENT_VALID, ...args); }); - this.editor.on(BI.Editor.EVENT_CONFIRM, function () { - self._showHint(); - self._checkText(); - self.fireEvent(BI.SignEditor.EVENT_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CONFIRM, (...args) => { + this._showHint(); + this._checkText(); + this.fireEvent(SignEditor.EVENT_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { - self._showHint(); - self._checkText(); - self.fireEvent(BI.SignEditor.EVENT_CHANGE_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => { + this._showHint(); + this._checkText(); + this.fireEvent(SignEditor.EVENT_CHANGE_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_START, function () { - self.fireEvent(BI.SignEditor.EVENT_START, arguments); + this.editor.on(Editor.EVENT_START, (...args) => { + this.fireEvent(SignEditor.EVENT_START, ...args); }); - this.editor.on(BI.Editor.EVENT_PAUSE, function () { - self.fireEvent(BI.SignEditor.EVENT_PAUSE, arguments); + this.editor.on(Editor.EVENT_PAUSE, (...args) => { + this.fireEvent(SignEditor.EVENT_PAUSE, ...args); }); - this.editor.on(BI.Editor.EVENT_STOP, function () { - self.fireEvent(BI.SignEditor.EVENT_STOP, arguments); + this.editor.on(Editor.EVENT_STOP, (...args) => { + this.fireEvent(SignEditor.EVENT_STOP, ...args); }); - this.editor.on(BI.Editor.EVENT_SPACE, function () { - self.fireEvent(BI.SignEditor.EVENT_SPACE, arguments); + this.editor.on(Editor.EVENT_SPACE, (...args) => { + this.fireEvent(SignEditor.EVENT_SPACE, ...args); }); - this.editor.on(BI.Editor.EVENT_ERROR, function () { - self._checkText(); - self.fireEvent(BI.SignEditor.EVENT_ERROR, arguments); + this.editor.on(Editor.EVENT_ERROR, (...args) => { + this._checkText(); + this.fireEvent(SignEditor.EVENT_ERROR, ...args); }); - this.editor.on(BI.Editor.EVENT_ENTER, function () { - self.fireEvent(BI.SignEditor.EVENT_ENTER, arguments); + this.editor.on(Editor.EVENT_ENTER, (...args) => { + this.fireEvent(SignEditor.EVENT_ENTER, ...args); }); - this.editor.on(BI.Editor.EVENT_RESTRICT, function () { - self.fireEvent(BI.SignEditor.EVENT_RESTRICT, arguments); + this.editor.on(Editor.EVENT_RESTRICT, (...args) => { + this.fireEvent(SignEditor.EVENT_RESTRICT, ...args); }); - this.editor.on(BI.Editor.EVENT_EMPTY, function () { - self.fireEvent(BI.SignEditor.EVENT_EMPTY, arguments); + this.editor.on(Editor.EVENT_EMPTY, (...args) => { + this.fireEvent(SignEditor.EVENT_EMPTY, ...args); }); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, - items: [ - { - el: this.text, - inset: 0, - }, { - el: this.editor, - inset: 0, - } - ] + items: [{ + el: this.text, + inset: 0, + }, { + el: this.editor, + inset: 0, + }], }); this._showHint(); - self._checkText(); - }, + this._checkText(); + } - _checkText: function () { - var o = this.options; - BI.nextTick(BI.bind(function () { + _checkText() { + const o = this.options; + nextTick(bind(function () { if (this.editor.getValue() === "") { this.text.setValue(o.watermark || ""); this.text.element.addClass("bi-water-mark"); } else { this.text.setValue(this.editor.getValue()); this.text.element.removeClass("bi-water-mark"); - BI.isKey(o.keyword) && this.text.doRedMark(o.keyword); + isKey(o.keyword) && this.text.doRedMark(o.keyword); } }, this)); - }, + } - _showInput: function () { + _showInput() { this.editor.visible(); this.text.invisible(); - }, + } - _showHint: function () { + _showHint() { this.editor.invisible(); this.text.visible(); - }, + } - setTitle: function (title) { + setTitle(title) { this.text.setTitle(title); - }, + } - setTipType: function (v) { + setTipType(v) { this.text.setTipType(v); - }, + } - setWarningTitle: function (title) { + setWarningTitle(title) { this.text.setWarningTitle(title); - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.options.watermark = v; this._checkText(); this.editor.setWaterMark(v); - }, + } - focus: function () { + focus() { this._showInput(); this.editor.focus(); - }, + } - blur: function () { + blur() { this.editor.blur(); this._showHint(); this._checkText(); - }, + } - doRedMark: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + doRedMark() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doRedMark.apply(this.text, arguments); - }, + this.text.doRedMark(...arguments); + } - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, + unRedMark() { + this.text.unRedMark(...arguments); + } - doHighLight: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + doHighLight() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doHighLight.apply(this.text, arguments); - }, + this.text.doHighLight(...arguments); + } - unHighLight: function () { - this.text.unHighLight.apply(this.text, arguments); - }, + unHighLight() { + this.text.unHighLight(...arguments); + } - isValid: function () { + isValid() { return this.editor.isValid(); - }, + } - setErrorText: function (text) { + setErrorText(text) { this.editor.setErrorText(text); - }, + } - getErrorText: function () { + getErrorText() { return this.editor.getErrorText(); - }, - - isEditing: function () { + } + + isEditing() { return this.editor.isEditing(); - }, + } - getLastValidValue: function () { + getLastValidValue() { return this.editor.getLastValidValue(); - }, + } - getLastChangedValue: function () { + getLastChangedValue() { return this.editor.getLastChangedValue(); - }, + } - setValue: function (k) { + setValue(k) { this.editor.setValue(k); this._checkText(); - }, + } - getValue: function () { + getValue() { return this.editor.getValue(); - }, + } - getState: function () { + getState() { return this.text.getValue(); - }, + } - setState: function (v) { + setState(v) { this._showHint(); this.text.setValue(v); } -}); -BI.SignEditor.EVENT_CHANGE = "EVENT_CHANGE"; -BI.SignEditor.EVENT_FOCUS = "EVENT_FOCUS"; -BI.SignEditor.EVENT_BLUR = "EVENT_BLUR"; -BI.SignEditor.EVENT_CLICK = "EVENT_CLICK"; -BI.SignEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; -BI.SignEditor.EVENT_QUICK_DOWN = "EVENT_QUICK_DOWN"; -BI.SignEditor.EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"; - -BI.SignEditor.EVENT_START = "EVENT_START"; -BI.SignEditor.EVENT_PAUSE = "EVENT_PAUSE"; -BI.SignEditor.EVENT_STOP = "EVENT_STOP"; -BI.SignEditor.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.SignEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; -BI.SignEditor.EVENT_VALID = "EVENT_VALID"; -BI.SignEditor.EVENT_ERROR = "EVENT_ERROR"; -BI.SignEditor.EVENT_ENTER = "EVENT_ENTER"; -BI.SignEditor.EVENT_RESTRICT = "EVENT_RESTRICT"; -BI.SignEditor.EVENT_SPACE = "EVENT_SPACE"; -BI.SignEditor.EVENT_EMPTY = "EVENT_EMPTY"; - -BI.shortcut("bi.sign_editor", BI.SignEditor); +} diff --git a/src/case/editor/editor.state.js b/src/case/editor/editor.state.js index 9c3f340f9..d11dc059d 100644 --- a/src/case/editor/editor.state.js +++ b/src/case/editor/editor.state.js @@ -1,36 +1,61 @@ +import { shortcut, Widget, extend, emptyFn, i18nText, isArray, createWidget, nextTick, Controller, isNotNull, isString, isKey, isFunction, isNumber, isEmpty } from "@/core"; +import { TextButton, Editor } from "@/base"; + /** * guy * 记录状态的输入框 - * @class BI.StateEditor - * @extends BI.Single + * @class StateEditor + * @extends Single */ -BI.StateEditor = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.StateEditor.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-state-editor", +@shortcut() +export class StateEditor extends Widget { + static xtype = "bi.state_editor" + + static EVENT_CHANGE = "EVENT_CHANGE" + static EVENT_FOCUS = "EVENT_FOCUS" + static EVENT_BLUR = "EVENT_BLUR" + static EVENT_CLICK = "EVENT_CLICK" + static EVENT_KEY_DOWN = "EVENT_KEY_DOWN" + static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL" + static EVENT_START = "EVENT_START" + static EVENT_PAUSE = "EVENT_PAUSE" + static EVENT_STOP = "EVENT_STOP" + static EVENT_CONFIRM = "EVENT_CONFIRM" + static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM" + static EVENT_VALID = "EVENT_VALID" + static EVENT_ERROR = "EVENT_ERROR" + static EVENT_ENTER = "EVENT_ENTER" + static EVENT_RESTRICT = "EVENT_RESTRICT" + static EVENT_SPACE = "EVENT_SPACE" + static EVENT_EMPTY = "EVENT_EMPTY" + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: `${conf.baseCls || ""} bi-state-editor`, hgap: 4, vgap: 2, lgap: 0, rgap: 0, tgap: 0, bgap: 0, - validationChecker: BI.emptyFn, - quitChecker: BI.emptyFn, + validationChecker: emptyFn, + quitChecker: emptyFn, allowBlank: true, watermark: "", errorText: "", height: 24, - defaultText: BI.i18nText("BI-Basic_Unrestricted"), // 默认显示值，默认显示值与显示值的区别是默认显示值标记灰色 + defaultText: i18nText("BI-Basic_Unrestricted"), // 默认显示值，默认显示值与显示值的区别是默认显示值标记灰色 text: "", // 显示值 - el: {} + el: {}, }); - }, - - _init: function () { - BI.StateEditor.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.editor = BI.createWidget(o.el, { + } + + _init() { + super._init(...arguments); + const o = this.options; + this.editor = createWidget(o.el, { type: "bi.editor", simple: o.simple, height: o.height, @@ -48,262 +73,243 @@ BI.StateEditor = BI.inherit(BI.Widget, { errorText: o.errorText, autoTrim: o.autoTrim, }); - this.text = BI.createWidget({ + this.text = createWidget({ type: "bi.text_button", cls: "bi-water-mark tip-text-style", textAlign: "left", height: o.height, text: o.text, hgap: o.hgap + 2, - handler: function () { - self._showInput(); - self.editor.focus(); - self.editor.setValue(""); + handler: () => { + this._showInput(); + this.editor.focus(); + this.editor.setValue(""); }, - title: BI.isNotNull(o.tipText) ? o.tipText : function () { - var title = ""; - if (BI.isString(self.stateValue)) { - title = self.stateValue; + title: isNotNull(o.tipText) ? o.tipText : () => { + let title = ""; + if (isString(this.stateValue)) { + title = this.stateValue; } - if (BI.isArray(self.stateValue) && self.stateValue.length === 1) { - title = self.stateValue[0]; + if (isArray(this.stateValue) && this.stateValue.length === 1) { + title = this.stateValue[0]; } + return title; }, warningTitle: o.warningTitle, - tipType: o.tipType + tipType: o.tipType, }); - this.text.on(BI.TextButton.EVENT_CHANGE, function () { - BI.nextTick(function () { - self.fireEvent(BI.StateEditor.EVENT_CLICK_LABEL); + this.text.on(TextButton.EVENT_CHANGE, () => { + nextTick(() => { + this.fireEvent(StateEditor.EVENT_CLICK_LABEL); }); }); - this.editor.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.editor.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_FOCUS, function () { - self.fireEvent(BI.StateEditor.EVENT_FOCUS, arguments); + this.editor.on(Editor.EVENT_FOCUS, (...args) => { + this.fireEvent(StateEditor.EVENT_FOCUS, ...args); }); - this.editor.on(BI.Editor.EVENT_BLUR, function () { - self.fireEvent(BI.StateEditor.EVENT_BLUR, arguments); + this.editor.on(Editor.EVENT_BLUR, (...args) => { + this.fireEvent(StateEditor.EVENT_BLUR, ...args); }); - this.editor.on(BI.Editor.EVENT_CLICK, function () { - self.fireEvent(BI.StateEditor.EVENT_CLICK, arguments); + this.editor.on(Editor.EVENT_CLICK, (...args) => { + this.fireEvent(StateEditor.EVENT_CLICK, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE, function () { - self.fireEvent(BI.StateEditor.EVENT_CHANGE, arguments); + this.editor.on(Editor.EVENT_CHANGE, (...args) => { + this.fireEvent(StateEditor.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) { - self.fireEvent(BI.StateEditor.EVENT_KEY_DOWN, arguments); + this.editor.on(Editor.EVENT_KEY_DOWN, (...args) => { + this.fireEvent(StateEditor.EVENT_KEY_DOWN, ...args); }); - this.editor.on(BI.Editor.EVENT_VALID, function () { - self.fireEvent(BI.StateEditor.EVENT_VALID, arguments); + this.editor.on(Editor.EVENT_VALID, (...args) => { + this.fireEvent(StateEditor.EVENT_VALID, ...args); }); - this.editor.on(BI.Editor.EVENT_CONFIRM, function () { - self._showHint(); - self.fireEvent(BI.StateEditor.EVENT_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CONFIRM, (...args) => { + this._showHint(); + this.fireEvent(StateEditor.EVENT_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { - self._showHint(); - self.fireEvent(BI.StateEditor.EVENT_CHANGE_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => { + this._showHint(); + this.fireEvent(StateEditor.EVENT_CHANGE_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_START, function () { - self.fireEvent(BI.StateEditor.EVENT_START, arguments); + this.editor.on(Editor.EVENT_START, (...args) => { + this.fireEvent(StateEditor.EVENT_START, ...args); }); - this.editor.on(BI.Editor.EVENT_PAUSE, function () { - self.fireEvent(BI.StateEditor.EVENT_PAUSE, arguments); + this.editor.on(Editor.EVENT_PAUSE, (...args) => { + this.fireEvent(StateEditor.EVENT_PAUSE, ...args); }); - this.editor.on(BI.Editor.EVENT_STOP, function () { - self.fireEvent(BI.StateEditor.EVENT_STOP, arguments); + this.editor.on(Editor.EVENT_STOP, (...args) => { + this.fireEvent(StateEditor.EVENT_STOP, ...args); }); - this.editor.on(BI.Editor.EVENT_SPACE, function () { - self.fireEvent(BI.StateEditor.EVENT_SPACE, arguments); + this.editor.on(Editor.EVENT_SPACE, (...args) => { + this.fireEvent(StateEditor.EVENT_SPACE, ...args); }); - this.editor.on(BI.Editor.EVENT_ERROR, function () { - self.fireEvent(BI.StateEditor.EVENT_ERROR, arguments); + this.editor.on(Editor.EVENT_ERROR, (...args) => { + this.fireEvent(StateEditor.EVENT_ERROR, ...args); }); - this.editor.on(BI.Editor.EVENT_ENTER, function () { - self.fireEvent(BI.StateEditor.EVENT_ENTER, arguments); + this.editor.on(Editor.EVENT_ENTER, (...args) => { + this.fireEvent(StateEditor.EVENT_ENTER, ...args); }); - this.editor.on(BI.Editor.EVENT_RESTRICT, function () { - self.fireEvent(BI.StateEditor.EVENT_RESTRICT, arguments); + this.editor.on(Editor.EVENT_RESTRICT, (...args) => { + this.fireEvent(StateEditor.EVENT_RESTRICT, ...args); }); - this.editor.on(BI.Editor.EVENT_EMPTY, function () { - self.fireEvent(BI.StateEditor.EVENT_EMPTY, arguments); + this.editor.on(Editor.EVENT_EMPTY, (...args) => { + this.fireEvent(StateEditor.EVENT_EMPTY, ...args); }); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, - items: [ - { - el: this.text, - inset: 0, - }, { - el: this.editor, - inset: 0, - } - ] + items: [{ + el: this.text, + inset: 0, + }, { + el: this.editor, + inset: 0, + }], }); this._showHint(); - if (BI.isNotNull(o.text)) { + if (isNotNull(o.text)) { this.setState(o.text); } - }, - - setWaterMark: function (v) { + } + + setWaterMark(v) { this.options.watermark = v; this.editor.setWaterMark(v); - }, - - doRedMark: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + } + + doRedMark() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doRedMark.apply(this.text, arguments); - }, - - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, - - doHighLight: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + this.text.doRedMark(...arguments); + } + + unRedMark() { + this.text.unRedMark(...arguments); + } + + doHighLight() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doHighLight.apply(this.text, arguments); - }, - - unHighLight: function () { - this.text.unHighLight.apply(this.text, arguments); - }, - - focus: function () { + this.text.doHighLight(...arguments); + } + + unHighLight() { + this.text.unHighLight(...arguments); + } + + focus() { if (this.options.disabled === false) { this._showInput(); this.editor.focus(); } - }, - - blur: function () { + } + + blur() { this.editor.blur(); this._showHint(); - }, - - _showInput: function () { + } + + _showInput() { this.editor.visible(); this.text.invisible(); - }, - - _showHint: function () { + } + + _showHint() { this.editor.invisible(); this.text.visible(); - }, - - _setText: function (v) { + } + + _setText(v) { this.text.setText(v); this.text.setTitle(v); - }, - - isValid: function () { + } + + isValid() { return this.editor.isValid(); - }, - - setErrorText: function (text) { + } + + setErrorText(text) { this.editor.setErrorText(text); - }, - - getErrorText: function () { + } + + getErrorText() { return this.editor.getErrorText(); - }, - - isEditing: function () { + } + + isEditing() { return this.editor.isEditing(); - }, - - getLastValidValue: function () { + } + + getLastValidValue() { return this.editor.getLastValidValue(); - }, - - getLastChangedValue: function () { + } + + getLastChangedValue() { return this.editor.getLastChangedValue(); - }, - - setValue: function (k) { + } + + setValue(k) { this.editor.setValue(k); - }, - - getValue: function () { + } + + getValue() { return this.editor.getValue(); - }, - - getState: function () { + } + + getState() { return this.editor.getValue().match(/[^\s]+/g); - }, - - setState: function (v) { - var o = this.options; - var defaultText = BI.isFunction(o.defaultText) ? o.defaultText() : o.defaultText; - BI.StateEditor.superclass.setValue.apply(this, arguments); + } + + setState(v) { + const o = this.options; + const defaultText = isFunction(o.defaultText) ? o.defaultText() : o.defaultText; + super.setValue(...arguments); this.stateValue = v; - if (BI.isNumber(v)) { - if (v === BI.Selection.All) { - this._setText(BI.i18nText("BI-Select_All")); + if (isNumber(v)) { + if (v === Selection.All) { + this._setText(i18nText("BI-Select_All")); this.text.element.removeClass("bi-water-mark"); - } else if (v === BI.Selection.Multi) { - this._setText(BI.i18nText("BI-Select_Part")); + } else if (v === Selection.Multi) { + this._setText(i18nText("BI-Select_Part")); this.text.element.removeClass("bi-water-mark"); } else { - this._setText(BI.isKey(defaultText) ? defaultText : o.text); - BI.isKey(defaultText) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark"); + this._setText(isKey(defaultText) ? defaultText : o.text); + isKey(defaultText) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark"); } + return; } - if (BI.isString(v)) { + if (isString(v)) { this._setText(v); // 配置了defaultText才判断标灰，其他情况不标灰 - (BI.isKey(defaultText) && defaultText === v) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark"); + (isKey(defaultText) && defaultText === v) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark"); + return; } - if (BI.isArray(v)) { - if (BI.isEmpty(v)) { - this._setText(BI.isKey(defaultText) ? defaultText : o.text); - BI.isKey(defaultText) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark"); + if (isArray(v)) { + if (isEmpty(v)) { + this._setText(isKey(defaultText) ? defaultText : o.text); + isKey(defaultText) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark"); } else if (v.length === 1) { this._setText(v[0]); this.text.element.removeClass("bi-water-mark"); } else { - this._setText(BI.i18nText("BI-Select_Part")); + this._setText(i18nText("BI-Select_Part")); this.text.element.removeClass("bi-water-mark"); } } - }, - - setTipType: function (v) { + } + + setTipType(v) { this.text.options.tipType = v; - }, - - getText: function () { + } + + getText() { return this.text.getText(); } -}); -BI.StateEditor.EVENT_CHANGE = "EVENT_CHANGE"; -BI.StateEditor.EVENT_FOCUS = "EVENT_FOCUS"; -BI.StateEditor.EVENT_BLUR = "EVENT_BLUR"; -BI.StateEditor.EVENT_CLICK = "EVENT_CLICK"; -BI.StateEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; -BI.StateEditor.EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"; - -BI.StateEditor.EVENT_START = "EVENT_START"; -BI.StateEditor.EVENT_PAUSE = "EVENT_PAUSE"; -BI.StateEditor.EVENT_STOP = "EVENT_STOP"; -BI.StateEditor.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.StateEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; -BI.StateEditor.EVENT_VALID = "EVENT_VALID"; -BI.StateEditor.EVENT_ERROR = "EVENT_ERROR"; -BI.StateEditor.EVENT_ENTER = "EVENT_ENTER"; -BI.StateEditor.EVENT_RESTRICT = "EVENT_RESTRICT"; -BI.StateEditor.EVENT_SPACE = "EVENT_SPACE"; -BI.StateEditor.EVENT_EMPTY = "EVENT_EMPTY"; - -BI.shortcut("bi.state_editor", BI.StateEditor); +} diff --git a/src/case/editor/editor.state.simple.js b/src/case/editor/editor.state.simple.js index 96be87aa1..807a8c158 100644 --- a/src/case/editor/editor.state.simple.js +++ b/src/case/editor/editor.state.simple.js @@ -1,36 +1,61 @@ +import { shortcut, Widget, extend, emptyFn, i18nText, Controller, createWidget, nextTick, isNotNull, isKey, isFunction, isArray, isNumber, isEmpty } from "@/core"; +import { Editor, TextButton } from "@/base"; + /** * 无限制-已选择状态输入框 * Created by GUY on 2016/5/18. - * @class BI.SimpleStateEditor - * @extends BI.Single + * @class SimpleStateEditor + * @extends Single */ -BI.SimpleStateEditor = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.SimpleStateEditor.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-simple-state-editor", +@shortcut() +export class SimpleStateEditor extends Widget { + static xtype = "bi.simple_state_editor" + + static EVENT_CHANGE = "EVENT_CHANGE" + static EVENT_FOCUS = "EVENT_FOCUS" + static EVENT_BLUR = "EVENT_BLUR" + static EVENT_CLICK = "EVENT_CLICK" + static EVENT_KEY_DOWN = "EVENT_KEY_DOWN" + static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL" + static EVENT_START = "EVENT_START" + static EVENT_PAUSE = "EVENT_PAUSE" + static EVENT_STOP = "EVENT_STOP" + static EVENT_CONFIRM = "EVENT_CONFIRM" + static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM" + static EVENT_VALID = "EVENT_VALID" + static EVENT_ERROR = "EVENT_ERROR" + static EVENT_ENTER = "EVENT_ENTER" + static EVENT_RESTRICT = "EVENT_RESTRICT" + static EVENT_SPACE = "EVENT_SPACE" + static EVENT_EMPTY = "EVENT_EMPTY" + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: `${conf.baseCls || ""} bi-simple-state-editor`, hgap: 4, vgap: 2, lgap: 0, rgap: 0, tgap: 0, bgap: 0, - validationChecker: BI.emptyFn, - quitChecker: BI.emptyFn, + validationChecker: emptyFn, + quitChecker: emptyFn, mouseOut: false, allowBlank: true, watermark: "", errorText: "", height: 24, text: "", - defaultText: BI.i18nText("BI-Basic_Unrestricted"), + defaultText: i18nText("BI-Basic_Unrestricted"), }); - }, + } - _init: function () { - BI.SimpleStateEditor.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.editor = BI.createWidget({ + _init() { + super._init(...arguments); + const o = this.options; + this.editor = createWidget({ type: "bi.editor", simple: o.simple, height: o.height, @@ -48,241 +73,220 @@ BI.SimpleStateEditor = BI.inherit(BI.Widget, { errorText: o.errorText, autoTrim: o.autoTrim, }); - this.text = BI.createWidget({ + this.text = createWidget({ type: "bi.text_button", cls: "bi-water-mark", textAlign: "left", text: o.text, height: o.height, hgap: o.hgap + 2, - handler: function () { - self._showInput(); - self.editor.focus(); - self.editor.setValue(""); - } + handler: () => { + this._showInput(); + this.editor.focus(); + this.editor.setValue(""); + }, }); - this.text.on(BI.TextButton.EVENT_CHANGE, function () { - BI.nextTick(function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_CLICK_LABEL); + this.text.on(TextButton.EVENT_CHANGE, () => { + nextTick(() => { + this.fireEvent(SimpleStateEditor.EVENT_CLICK_LABEL); }); }); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, - items: [ - { - el: this.text, - left: 0, - right: 0, - top: 0, - bottom: 0 - } - ] + items: [{ + el: this.text, + left: 0, + right: 0, + top: 0, + bottom: 0, + }], }); - this.editor.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.editor.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_FOCUS, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_FOCUS, arguments); + this.editor.on(Editor.EVENT_FOCUS, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_FOCUS, ...args); }); - this.editor.on(BI.Editor.EVENT_BLUR, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_BLUR, arguments); + this.editor.on(Editor.EVENT_BLUR, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_BLUR, ...args); }); - this.editor.on(BI.Editor.EVENT_CLICK, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_CLICK, arguments); + this.editor.on(Editor.EVENT_CLICK, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_CLICK, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_CHANGE, arguments); + this.editor.on(Editor.EVENT_CHANGE, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) { - self.fireEvent(BI.SimpleStateEditor.EVENT_KEY_DOWN, arguments); + this.editor.on(Editor.EVENT_KEY_DOWN, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_KEY_DOWN, ...args); }); - this.editor.on(BI.Editor.EVENT_VALID, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_VALID, arguments); + this.editor.on(Editor.EVENT_VALID, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_VALID, ...args); }); - this.editor.on(BI.Editor.EVENT_CONFIRM, function () { - self._showHint(); - self.fireEvent(BI.SimpleStateEditor.EVENT_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CONFIRM, (...args) => { + this._showHint(); + this.fireEvent(SimpleStateEditor.EVENT_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { - self._showHint(); - self.fireEvent(BI.SimpleStateEditor.EVENT_CHANGE_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => { + this._showHint(); + this.fireEvent(SimpleStateEditor.EVENT_CHANGE_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_START, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_START, arguments); + this.editor.on(Editor.EVENT_START, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_START, ...args); }); - this.editor.on(BI.Editor.EVENT_PAUSE, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_PAUSE, arguments); + this.editor.on(Editor.EVENT_PAUSE, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_PAUSE, ...args); }); - this.editor.on(BI.Editor.EVENT_STOP, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_STOP, arguments); + this.editor.on(Editor.EVENT_STOP, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_STOP, ...args); }); - this.editor.on(BI.Editor.EVENT_SPACE, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_SPACE, arguments); + this.editor.on(Editor.EVENT_SPACE, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_SPACE, ...args); }); - this.editor.on(BI.Editor.EVENT_ERROR, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_ERROR, arguments); + this.editor.on(Editor.EVENT_ERROR, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_ERROR, ...args); }); - this.editor.on(BI.Editor.EVENT_ENTER, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_ENTER, arguments); + this.editor.on(Editor.EVENT_ENTER, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_ENTER, ...args); }); - this.editor.on(BI.Editor.EVENT_RESTRICT, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_RESTRICT, arguments); + this.editor.on(Editor.EVENT_RESTRICT, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_RESTRICT, ...args); }); - this.editor.on(BI.Editor.EVENT_EMPTY, function () { - self.fireEvent(BI.SimpleStateEditor.EVENT_EMPTY, arguments); + this.editor.on(Editor.EVENT_EMPTY, (...args) => { + this.fireEvent(SimpleStateEditor.EVENT_EMPTY, ...args); }); - BI.createWidget({ + createWidget({ type: "bi.vertical", scrolly: false, element: this, - items: [this.editor] + items: [this.editor], }); this._showHint(); - if (BI.isNotNull(o.text)) { + if (isNotNull(o.text)) { this.setState(o.text); } - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.options.watermark = v; this.editor.setWaterMark(v); - }, + } - doRedMark: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + doRedMark() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doRedMark.apply(this.text, arguments); - }, + this.text.doRedMark(...arguments); + } - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, + unRedMark() { + this.text.unRedMark(...arguments); + } - doHighLight: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + doHighLight() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doHighLight.apply(this.text, arguments); - }, + this.text.doHighLight(...arguments); + } - unHighLight: function () { - this.text.unHighLight.apply(this.text, arguments); - }, + unHighLight() { + this.text.unHighLight(...arguments); + } - focus: function () { + focus() { this._showInput(); this.editor.focus(); - }, + } - blur: function () { + blur() { this.editor.blur(); this._showHint(); - }, + } - _showInput: function () { + _showInput() { this.editor.visible(); this.text.invisible(); - }, + } - _showHint: function () { + _showHint() { this.editor.invisible(); this.text.visible(); - }, + } - _setText: function (v) { + _setText(v) { this.text.setText(v); this.text.setTitle(v); - }, + } - isValid: function () { + isValid() { return this.editor.isValid(); - }, + } - setErrorText: function (text) { + setErrorText(text) { this.editor.setErrorText(text); - }, + } - getErrorText: function () { + getErrorText() { return this.editor.getErrorText(); - }, + } - isEditing: function () { + isEditing() { return this.editor.isEditing(); - }, + } - getLastValidValue: function () { + getLastValidValue() { return this.editor.getLastValidValue(); - }, + } - getLastChangedValue: function () { + getLastChangedValue() { return this.editor.getLastChangedValue(); - }, + } - setValue: function (k) { + setValue(k) { this.editor.setValue(k); - }, + } - getValue: function () { + getValue() { return this.editor.getValue(); - }, + } - getState: function () { + getState() { return this.editor.getValue().match(/[^\s]+/g); - }, + } - setState: function (v) { - var o = this.options; - BI.SimpleStateEditor.superclass.setValue.apply(this, arguments); - var defaultText = BI.isFunction(o.defaultText) ? o.defaultText() : o.defaultText; - if (BI.isNumber(v)) { - if (v === BI.Selection.All) { - this._setText(BI.i18nText("BI-Already_Selected")); + setState(v) { + const o = this.options; + super.setValue(...arguments); + const defaultText = isFunction(o.defaultText) ? o.defaultText() : o.defaultText; + if (isNumber(v)) { + if (v === Selection.All) { + this._setText(i18nText("BI-Already_Selected")); this.text.element.removeClass("bi-water-mark"); - } else if (v === BI.Selection.Multi) { - this._setText(BI.i18nText("BI-Already_Selected")); + } else if (v === Selection.Multi) { + this._setText(i18nText("BI-Already_Selected")); this.text.element.removeClass("bi-water-mark"); } else { - this._setText(BI.isKey(defaultText) ? defaultText : o.text); + this._setText(isKey(defaultText) ? defaultText : o.text); this.text.element.addClass("bi-water-mark"); } + return; } - if (!BI.isArray(v) || v.length === 1) { + if (!isArray(v) || v.length === 1) { this._setText(v); this.text.element.removeClass("bi-water-mark"); - } else if (BI.isEmpty(v)) { + } else if (isEmpty(v)) { this._setText(o.text); this.text.element.addClass("bi-water-mark"); } else { - this._setText(BI.i18nText("BI-Already_Selected")); + this._setText(i18nText("BI-Already_Selected")); this.text.element.removeClass("bi-water-mark"); } - }, + } - getText: function () { + getText() { return this.text.getText(); } -}); -BI.SimpleStateEditor.EVENT_CHANGE = "EVENT_CHANGE"; -BI.SimpleStateEditor.EVENT_FOCUS = "EVENT_FOCUS"; -BI.SimpleStateEditor.EVENT_BLUR = "EVENT_BLUR"; -BI.SimpleStateEditor.EVENT_CLICK = "EVENT_CLICK"; -BI.SimpleStateEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; -BI.SimpleStateEditor.EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"; - -BI.SimpleStateEditor.EVENT_START = "EVENT_START"; -BI.SimpleStateEditor.EVENT_PAUSE = "EVENT_PAUSE"; -BI.SimpleStateEditor.EVENT_STOP = "EVENT_STOP"; -BI.SimpleStateEditor.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.SimpleStateEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; -BI.SimpleStateEditor.EVENT_VALID = "EVENT_VALID"; -BI.SimpleStateEditor.EVENT_ERROR = "EVENT_ERROR"; -BI.SimpleStateEditor.EVENT_ENTER = "EVENT_ENTER"; -BI.SimpleStateEditor.EVENT_RESTRICT = "EVENT_RESTRICT"; -BI.SimpleStateEditor.EVENT_SPACE = "EVENT_SPACE"; -BI.SimpleStateEditor.EVENT_EMPTY = "EVENT_EMPTY"; - -BI.shortcut("bi.simple_state_editor", BI.SimpleStateEditor); +} diff --git a/src/case/editor/index.js b/src/case/editor/index.js new file mode 100644 index 000000000..487c0f3f6 --- /dev/null +++ b/src/case/editor/index.js @@ -0,0 +1,6 @@ +export { ClearEditor } from "./editor.clear"; +export { DefaultTextEditor } from "./editor.defaulttext"; +export { ShelterEditor } from "./editor.shelter"; +export { SignEditor } from "./editor.sign"; +export { StateEditor } from "./editor.state"; +export { SimpleStateEditor } from "./editor.state.simple"; diff --git a/src/case/index.js b/src/case/index.js index 5e8b11baf..33f250645 100644 --- a/src/case/index.js +++ b/src/case/index.js @@ -1,7 +1,10 @@ import * as button from "./button"; +import * as editor from "./editor"; Object.assign(BI, { ...button, + ...editor, }); export * from "./button"; +export * from "./editor";