From b6f291ae780313d4b95f7c21500cc8711fb0cfd8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joker=2EWang-=E7=8E=8B=E9=A1=BA?= Date: Wed, 14 Dec 2022 11:40:59 +0800 Subject: [PATCH 1/9] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9bi.a?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/js/core/abstract/demo.button_group.js | 103 +++++++++++---------- src/base/single/a/a.js | 51 +++++----- 2 files changed, 85 insertions(+), 69 deletions(-) diff --git a/demo/js/core/abstract/demo.button_group.js b/demo/js/core/abstract/demo.button_group.js index 21652ad58..059b97847 100644 --- a/demo/js/core/abstract/demo.button_group.js +++ b/demo/js/core/abstract/demo.button_group.js @@ -7,54 +7,63 @@ Demo.Func = BI.inherit(BI.Widget, { return { type: "bi.vertical", items: [{ - type: "bi.button_group", - ref: function (_ref) { - ref = _ref; + type: "bi.a", + el: { + type: "bi.label", + text: "这就是一个百度超链" }, - chooseType: BI.ButtonGroup.CHOOSE_TYPE_NONE, - layouts: [{ - type: "bi.vertical", - items: [{ - type: "bi.vtape", - height: 200 - }] - }], - items: [{ - el: { - type: "bi.label", - text: "button_group是一类具有相同属性或相似属性的抽象, 本案例实现的是布局的嵌套(vertical布局下内嵌center_adapt布局)" - }, - height: 150 - }, { - el: { - type: "bi.button", - text: "1" - } - }] - }, { - type: "bi.button", - text: "populate", - handler: function () { - ref.populate([{ - el: { - type: "bi.label", - text: "1" - }, - height: 50 - }, { - el: { - type: "bi.button", - text: "2" - }, - height: 50 - }, { - el: { - type: "bi.label", - text: "3" - } - }]); - } - }] + href: "https://www.baidu.com" + }], + // type: "bi.vertical", + // items: [{ + // type: "bi.button_group", + // ref: function (_ref) { + // ref = _ref; + // }, + // chooseType: BI.ButtonGroup.CHOOSE_TYPE_NONE, + // layouts: [{ + // type: "bi.vertical", + // items: [{ + // type: "bi.vtape", + // height: 200 + // }] + // }], + // items: [{ + // el: { + // type: "bi.label", + // text: "button_group是一类具有相同属性或相似属性的抽象, 本案例实现的是布局的嵌套(vertical布局下内嵌center_adapt布局)" + // }, + // height: 150 + // }, { + // el: { + // type: "bi.button", + // text: "1" + // } + // }] + // }, { + // type: "bi.button", + // text: "populate", + // handler: function () { + // ref.populate([{ + // el: { + // type: "bi.label", + // text: "1" + // }, + // height: 50 + // }, { + // el: { + // type: "bi.button", + // text: "2" + // }, + // height: 50 + // }, { + // el: { + // type: "bi.label", + // text: "3" + // } + // }]); + // } + // }] }; } diff --git a/src/base/single/a/a.js b/src/base/single/a/a.js index 9159f0a46..a11e0f91b 100644 --- a/src/base/single/a/a.js +++ b/src/base/single/a/a.js @@ -6,29 +6,36 @@ * @extends BI.Text * @abstract */ -BI.A = BI.inherit(BI.Text, { - _defaultConfig: function () { - var conf = BI.A.superclass._defaultConfig.apply(this, arguments); +import { shortcut } from "../../../core/decorator"; +@shortcut() +export class A extends BI.Text { + static xtype = "bi.a"; + constructor() { + super(); + } + // TODO:这里如何修改有问题 + _defaultConfig() { + var conf = super._defaultConfig(arguments); + return BI.extend(conf, { + baseCls: (conf.baseCls || "") + " bi-a display-block", + href: "", + target: "_blank", + el: null, + tagName: "a", + }); + } - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-a display-block", - href: "", - target: "_blank", - el: null, - tagName: "a", + render() { + var o = this.options; + super.render(); + this.element.attr({ href: o.href, target: o.target }); + if (o.el) { + BI.createWidget(o.el, { + element: this, }); - }, + } + } - render: function () { - var o = this.options; - BI.A.superclass.render.apply(this, arguments); - this.element.attr({ href: o.href, target: o.target }); - if (o.el) { - BI.createWidget(o.el, { - element: this, - }); - } - }, -}); +} -BI.shortcut("bi.a", BI.A); +BI.extend(BI, { A }); From 4818b99ec3dd75bb77591d63cb4411fcf9aa18c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joker=2EWang-=E7=8E=8B=E9=A1=BA?= Date: Wed, 14 Dec 2022 12:16:56 +0800 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20=E8=BF=98=E5=8E=9Fdemo=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/js/core/abstract/demo.button_group.js | 103 ++++++++++----------- 1 file changed, 47 insertions(+), 56 deletions(-) diff --git a/demo/js/core/abstract/demo.button_group.js b/demo/js/core/abstract/demo.button_group.js index 059b97847..21652ad58 100644 --- a/demo/js/core/abstract/demo.button_group.js +++ b/demo/js/core/abstract/demo.button_group.js @@ -7,63 +7,54 @@ Demo.Func = BI.inherit(BI.Widget, { return { type: "bi.vertical", items: [{ - type: "bi.a", - el: { - type: "bi.label", - text: "这就是一个百度超链" + type: "bi.button_group", + ref: function (_ref) { + ref = _ref; }, - href: "https://www.baidu.com" - }], - // type: "bi.vertical", - // items: [{ - // type: "bi.button_group", - // ref: function (_ref) { - // ref = _ref; - // }, - // chooseType: BI.ButtonGroup.CHOOSE_TYPE_NONE, - // layouts: [{ - // type: "bi.vertical", - // items: [{ - // type: "bi.vtape", - // height: 200 - // }] - // }], - // items: [{ - // el: { - // type: "bi.label", - // text: "button_group是一类具有相同属性或相似属性的抽象, 本案例实现的是布局的嵌套(vertical布局下内嵌center_adapt布局)" - // }, - // height: 150 - // }, { - // el: { - // type: "bi.button", - // text: "1" - // } - // }] - // }, { - // type: "bi.button", - // text: "populate", - // handler: function () { - // ref.populate([{ - // el: { - // type: "bi.label", - // text: "1" - // }, - // height: 50 - // }, { - // el: { - // type: "bi.button", - // text: "2" - // }, - // height: 50 - // }, { - // el: { - // type: "bi.label", - // text: "3" - // } - // }]); - // } - // }] + chooseType: BI.ButtonGroup.CHOOSE_TYPE_NONE, + layouts: [{ + type: "bi.vertical", + items: [{ + type: "bi.vtape", + height: 200 + }] + }], + items: [{ + el: { + type: "bi.label", + text: "button_group是一类具有相同属性或相似属性的抽象, 本案例实现的是布局的嵌套(vertical布局下内嵌center_adapt布局)" + }, + height: 150 + }, { + el: { + type: "bi.button", + text: "1" + } + }] + }, { + type: "bi.button", + text: "populate", + handler: function () { + ref.populate([{ + el: { + type: "bi.label", + text: "1" + }, + height: 50 + }, { + el: { + type: "bi.button", + text: "2" + }, + height: 50 + }, { + el: { + type: "bi.label", + text: "3" + } + }]); + } + }] }; } From dd275132fb063dd7eba136ccacd30926bc41aa81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joker=2EWang-=E7=8E=8B=E9=A1=BA?= Date: Wed, 14 Dec 2022 12:18:40 +0800 Subject: [PATCH 3/9] =?UTF-8?q?feat:=20=E5=88=A0=E9=99=A4todo=E6=8F=90?= =?UTF-8?q?=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/single/a/a.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/base/single/a/a.js b/src/base/single/a/a.js index a11e0f91b..2acbb2e2c 100644 --- a/src/base/single/a/a.js +++ b/src/base/single/a/a.js @@ -13,7 +13,6 @@ export class A extends BI.Text { constructor() { super(); } - // TODO:这里如何修改有问题 _defaultConfig() { var conf = super._defaultConfig(arguments); return BI.extend(conf, { From 19a5fe5298d95758b3c72913febe42aa78ac51a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joker=2EWang-=E7=8E=8B=E9=A1=BA?= Date: Wed, 14 Dec 2022 14:18:01 +0800 Subject: [PATCH 4/9] =?UTF-8?q?feat:=20=E5=88=A0=E9=99=A4=E6=97=A0?= =?UTF-8?q?=E7=94=A8=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/single/a/a.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/base/single/a/a.js b/src/base/single/a/a.js index 2acbb2e2c..9b419c67b 100644 --- a/src/base/single/a/a.js +++ b/src/base/single/a/a.js @@ -10,9 +10,7 @@ import { shortcut } from "../../../core/decorator"; @shortcut() export class A extends BI.Text { static xtype = "bi.a"; - constructor() { - super(); - } + _defaultConfig() { var conf = super._defaultConfig(arguments); return BI.extend(conf, { From 1222710076641a879d1ec7eb3616c628884909a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joker=2EWang-=E7=8E=8B=E9=A1=BA?= Date: Wed, 14 Dec 2022 16:07:57 +0800 Subject: [PATCH 5/9] =?UTF-8?q?KERNEL-13846=20refactor:=20=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E4=BB=A3=E7=A0=81=EF=BC=8C=E9=87=87=E7=94=A8=E8=A7=A3?= =?UTF-8?q?=E6=9E=84=E6=96=B9=E5=BC=8F=E5=BC=95=E5=85=A5=E5=8F=98=E9=87=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/single/a/a.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/base/single/a/a.js b/src/base/single/a/a.js index 9b419c67b..313e050ba 100644 --- a/src/base/single/a/a.js +++ b/src/base/single/a/a.js @@ -12,7 +12,7 @@ export class A extends BI.Text { static xtype = "bi.a"; _defaultConfig() { - var conf = super._defaultConfig(arguments); + const conf = super._defaultConfig(arguments); return BI.extend(conf, { baseCls: (conf.baseCls || "") + " bi-a display-block", href: "", @@ -23,11 +23,11 @@ export class A extends BI.Text { } render() { - var o = this.options; + const { href, target, el} = this.options; super.render(); - this.element.attr({ href: o.href, target: o.target }); - if (o.el) { - BI.createWidget(o.el, { + this.element.attr({ href, target }); + if (el) { + BI.createWidget(el, { element: this, }); } From b00440694d700725609b04c77d14cb6da254a077 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joker=2EWang-=E7=8E=8B=E9=A1=BA?= Date: Fri, 16 Dec 2022 10:03:18 +0800 Subject: [PATCH 6/9] =?UTF-8?q?KERNEL-13883=20refactor:base/single/tip?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E5=A4=B9es6=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/single/tip/0.tip.js | 27 ++-- src/base/single/tip/tip.toast.js | 216 +++++++++++++++-------------- src/base/single/tip/tip.tooltip.js | 121 ++++++++-------- 3 files changed, 189 insertions(+), 175 deletions(-) diff --git a/src/base/single/tip/0.tip.js b/src/base/single/tip/0.tip.js index a13240d8b..21cd96deb 100644 --- a/src/base/single/tip/0.tip.js +++ b/src/base/single/tip/0.tip.js @@ -6,18 +6,19 @@ * @extends BI.Single * @abstract */ -BI.Tip = BI.inherit(BI.Single, { - _defaultConfig: function () { - var conf = BI.Tip.superclass._defaultConfig.apply(this, arguments); +export class Tip extends BI.Single { + _defaultConfig() { + const conf = super._defaultConfig(arguments); + return BI.extend(conf, { + _baseCls: (conf._baseCls || "") + " bi-tip", + zIndex: BI.zIndex_tip, + }); + } - return BI.extend(conf, { - _baseCls: (conf._baseCls || "") + " bi-tip", - zIndex: BI.zIndex_tip, - }); - }, + _init() { + super._init(); + this.element.css({ zIndex: this.options.zIndex }); + } +} - _init: function () { - BI.Tip.superclass._init.apply(this, arguments); - this.element.css({ zIndex: this.options.zIndex }); - }, -}); +BI.extend(BI, { Tip }); diff --git a/src/base/single/tip/tip.toast.js b/src/base/single/tip/tip.toast.js index e347ae062..124cf6af0 100644 --- a/src/base/single/tip/tip.toast.js +++ b/src/base/single/tip/tip.toast.js @@ -5,115 +5,123 @@ * @class BI.Toast * @extends BI.Tip */ -BI.Toast = BI.inherit(BI.Tip, { - _const: { - closableMinWidth: 146, - minWidth: 100, - closableMaxWidth: 410, - maxWidth: 400, - }, - _defaultConfig: function () { - return BI.extend(BI.Toast.superclass._defaultConfig.apply(this, arguments), { - extraCls: "bi-toast", - text: "", - level: "success", // success或warning - autoClose: true, - closable: null, - textHeight: 20, - vgap: 10, - innerHgap: 4, - hgap: 8, - }); - }, +import { shortcut } from "../../../core/decorator"; +@shortcut() +export class Toast extends BI.Tip { + _const= { + closableMinWidth: 146, + minWidth: 100, + closableMaxWidth: 410, + maxWidth: 400, + } - render: function () { - var self = this, o = this.options, c = this._const; - this.element.css({ - minWidth: BI.pixFormat(o.closable ? c.closableMinWidth : c.minWidth), - maxWidth: BI.pixFormat(o.closable ? c.closableMaxWidth : c.maxWidth), - }); - this.element.addClass("toast-" + o.level); - function fn(e) { - e.stopPropagation(); - e.stopEvent(); - - return false; - } - this.element.bind({ - click: fn, - mousedown: fn, - mouseup: fn, - mouseover: fn, - mouseenter: fn, - mouseleave: fn, - mousemove: fn, - }); - var cls; - switch (o.level) { - case "success": - cls = "toast-success-font"; - break; - case "error": - cls = "toast-error-font"; - break; - case "warning": - cls = "toast-warning-font"; - break; - case "loading": - cls = "toast-loading-font anim-rotate"; - break; - case "normal": - default: - cls = "toast-message-font"; - break; - } + static EVENT_DESTORY = "EVENT_DESTORY"; + static xtype = "bi.toast"; + + _defaultConfig() { + return BI.extend(super._defaultConfig(arguments), { + extraCls: "bi-toast", + text: "", + level: "success", // success或warning + autoClose: true, + closable: null, + textHeight: 20, + vgap: 10, + innerHgap: 4, + hgap: 8, + }); + } - function hasCloseIcon() { - return o.closable === true || (o.closable === null && o.autoClose === false); - } - var items = [{ - type: "bi.icon_label", - cls: cls + " toast-icon", - height: o.textHeight, - }, { - el: BI.isPlainObject(o.text) ? o.text : { - type: "bi.label", - whiteSpace: "normal", - text: o.text, - textHeight: o.textHeight, - textAlign: "left", + render() { + const { closable, level, autoClose, textHeight, text, hgap, vgap, innerHgap } = this.options; + const { closableMinWidth, minWidth, maxWidth, closableMaxWidth } = this._const; + this.element.css({ + minWidth: BI.pixFormat(closable ? closableMinWidth : minWidth), + maxWidth: BI.pixFormat(closable ? closableMaxWidth : maxWidth), + }); + this.element.addClass("toast-" + level); + function fn(e) { + e.stopPropagation(); + e.stopEvent(); + + return false; + } + this.element.bind({ + click: fn, + mousedown: fn, + mouseup: fn, + mouseover: fn, + mouseenter: fn, + mouseleave: fn, + mousemove: fn, + }); + let cls; + switch (level) { + case "success": + cls = "toast-success-font"; + break; + case "error": + cls = "toast-error-font"; + break; + case "warning": + cls = "toast-warning-font"; + break; + case "loading": + cls = "toast-loading-font anim-rotate"; + break; + case "normal": + default: + cls = "toast-message-font"; + break; + } + + function hasCloseIcon() { + return closable === true || (closable === null && autoClose === false); + } + const items = [{ + type: "bi.icon_label", + cls: cls + " toast-icon", + height: textHeight, + }, { + el: BI.isPlainObject(text) ? text : { + type: "bi.label", + whiteSpace: "normal", + text: text, + textHeight: textHeight, + textAlign: "left", + }, + }]; + + const columnSize = ["", "fill"]; + + if (hasCloseIcon()) { + items.push({ + type: "bi.icon_button", + cls: "close-font toast-icon", + handler: ()=> { + this.destroy(); }, - }]; + height: textHeight, + }); + columnSize.push(""); + } - var columnSize = ["", "fill"]; + return { + type: "bi.horizontal", + horizontalAlign: BI.HorizontalAlign.Stretch, + items: items, + hgap: hgap, + vgap: vgap, + innerHgap: innerHgap, + columnSize: columnSize, + }; + } - if (hasCloseIcon()) { - items.push({ - type: "bi.icon_button", - cls: "close-font toast-icon", - handler: function () { - self.destroy(); - }, - height: o.textHeight, - }); - columnSize.push(""); - } + beforeDestroy() { + this.fireEvent(Toast.EVENT_DESTORY); + } - return { - type: "bi.horizontal", - horizontalAlign: BI.HorizontalAlign.Stretch, - items: items, - hgap: o.hgap, - vgap: o.vgap, - innerHgap: o.innerHgap, - columnSize: columnSize, - }; - }, +} - beforeDestroy: function () { - this.fireEvent(BI.Toast.EVENT_DESTORY); - }, -}); -BI.Toast.EVENT_DESTORY = "EVENT_DESTORY"; -BI.shortcut("bi.toast", BI.Toast); +BI.extend(BI, { Toast }); diff --git a/src/base/single/tip/tip.tooltip.js b/src/base/single/tip/tip.tooltip.js index aae6d8e86..3d4f77382 100644 --- a/src/base/single/tip/tip.tooltip.js +++ b/src/base/single/tip/tip.tooltip.js @@ -5,85 +5,90 @@ * @class BI.Tooltip * @extends BI.Tip */ -BI.Tooltip = BI.inherit(BI.Tip, { - _const: { + +import { shortcut } from "../../../core/decorator"; +@shortcut() +export class Tooltip extends BI.Tip { + _const = { hgap: 8, vgap: 4, - }, + } + static xtype = "bi.tooltip"; + + _defaultConfig() { + return BI.extend(super._defaultConfig(arguments), { + extraCls: "bi-tooltip", + text: "", + level: "success", // success或warning + stopEvent: false, + stopPropagation: false, + textAlign: "left", + }); + } - _defaultConfig: function () { - return BI.extend(BI.Tooltip.superclass._defaultConfig.apply(this, arguments), { - extraCls: "bi-tooltip", - text: "", - level: "success", // success或warning - stopEvent: false, - stopPropagation: false, - textAlign: "left", - }); - }, + render () { + const { level, stopPropagation, stopEvent, text, textAlign } = this.options; + this.element.addClass("tooltip-" + level); + function fn(e) { + stopPropagation && e.stopPropagation(); + stopEvent && e.stopEvent(); + } + this.element.bind({ + click: fn, + mousedown: fn, + mouseup: fn, + mouseover: fn, + mouseenter: fn, + mouseleave: fn, + mousemove: fn, + }); - render: function () { - var o = this.options; - this.element.addClass("tooltip-" + o.level); - function fn(e) { - o.stopPropagation && e.stopPropagation(); - o.stopEvent && e.stopEvent(); - } - this.element.bind({ - click: fn, - mousedown: fn, - mouseup: fn, - mouseover: fn, - mouseenter: fn, - mouseleave: fn, - mousemove: fn, + const texts = (text + "").split("\n"); + if (texts.length > 1) { + BI.createWidget({ + type: "bi.vertical", + element: this, + hgap: this._const.hgap, + innerVgap: this._const.vgap, + items: BI.map(texts, function (i, text) { + return { + type: "bi.label", + textAlign: textAlign, + whiteSpace: "normal", + text: text, + textHeight: 18, + title: null, + }; + }), }); - - var texts = (o.text + "").split("\n"); - if (texts.length > 1) { - BI.createWidget({ - type: "bi.vertical", - element: this, - hgap: this._const.hgap, - innerVgap: this._const.vgap, - items: BI.map(texts, function (i, text) { - return { - type: "bi.label", - textAlign: o.textAlign, - whiteSpace: "normal", - text: text, - textHeight: 18, - title: null, - }; - }), - }); } else { this.text = BI.createWidget({ type: "bi.label", element: this, - textAlign: o.textAlign, + textAlign: textAlign, whiteSpace: "normal", - text: o.text, + text: text, title: null, textHeight: 18, hgap: this._const.hgap, vgap: this._const.vgap, }); } - }, + } - setWidth: function (width) { + setWidth(width) { this.element.width(BI.pixFormat(width - 2 * this._const.hgap)); - }, + } - setText: function (text) { + setText(text) { this.text && this.text.setText(text); - }, + } - setLevel: function (level) { + setLevel(level) { this.element.removeClass("tooltip-success").removeClass("tooltip-warning"); this.element.addClass("tooltip-" + level); - }, -}); + } + +} -BI.shortcut("bi.tooltip", BI.Tooltip); +BI.extend(BI, { Tooltip }); From b561bf5d852d5119208d4154d3128ba08b83b740 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joker=2EWang-=E7=8E=8B=E9=A1=BA?= Date: Tue, 20 Dec 2022 14:14:14 +0800 Subject: [PATCH 7/9] =?UTF-8?q?KERNEL-13891=20refactor:base/layer=E6=96=87?= =?UTF-8?q?=E4=BB=B6=E5=A4=B9es6=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/layer/layer.drawer.js | 391 ++++++++------- src/base/layer/layer.popover.js | 484 +++++++++---------- src/base/layer/layer.popup.js | 798 ++++++++++++++++--------------- src/base/layer/layer.searcher.js | 210 ++++---- 4 files changed, 949 insertions(+), 934 deletions(-) diff --git a/src/base/layer/layer.drawer.js b/src/base/layer/layer.drawer.js index 23ef8b8c5..1c2e26a24 100644 --- a/src/base/layer/layer.drawer.js +++ b/src/base/layer/layer.drawer.js @@ -3,238 +3,235 @@ * @class BI.Popover * @extends BI.Widget */ -BI.Drawer = BI.inherit(BI.Widget, { - SIZE: { - SMALL: "small", - NORMAL: "normal", - BIG: "big", - }, - props: { - baseCls: "bi-drawer bi-card", - size: "normal", - placement: "right", // top/bottom/left/right - header: null, - headerHeight: 40, - body: null, - closable: true, // BI-40839 是否显示右上角的关闭按钮 - bodyHgap: 20, - bodyTgap: 10, - bodyBgap: 10, - }, - render: function () { - var self = this; - var o = this.options; - var items = [{ - el: { - type: "bi.htape", - cls: "bi-message-title bi-header-background", +import { shortcut } from "../../core/decorator"; +@shortcut() +export class Drawer extends BI.Widget { + SIZE = { + SMALL: "small", + NORMAL: "normal", + BIG: "big", + } + props = { + baseCls: "bi-drawer bi-card", + size: "normal", + placement: "right", // top/bottom/left/right + header: null, + headerHeight: 40, + body: null, + closable: true, // BI-40839 是否显示右上角的关闭按钮 + bodyHgap: 20, + bodyTgap: 10, + bodyBgap: 10, + } + static xtype = "bi.drawer"; + static EVENT_CLOSE = "EVENT_CLOSE"; + static EVENT_OPEN = "EVENT_OPEN"; + _getSuitableSize() { + const { size, height, placement, width } = this.options; + let sizeValue = 0; + switch (size) { + case "big": + sizeValue = 736; + break; + case "small": + sizeValue = 200; + break; + case "normal": + default: + sizeValue = 378; + break; + } + if (placement === "top" || placement === "bottom") { + return { + height: height || sizeValue, + }; + } + if (placement === "left" || placement === "right") { + return { + width: width || sizeValue, + }; + } + } + render() { + const { header, headerHeight, closable, body, bodyHgap, bodyTgap, bodyBgap } = this.options; + const items = [{ + el: { + type: "bi.htape", + cls: "bi-message-title bi-header-background", + items: [{ + type: "bi.absolute", items: [{ - type: "bi.absolute", - items: [{ - el: BI.isPlainObject(o.header) ? BI.extend({}, o.header, { - extraCls: "bi-font-bold", - }) : { - type: "bi.label", - cls: "bi-font-bold", - height: o.headerHeight, - text: o.header, - title: o.header, - textAlign: "left", - }, - left: 20, - top: 0, - right: 0, - bottom: 0, - }], - }, { - el: o.closable ? { - type: "bi.icon_button", - cls: "bi-message-close close-font", - height: o.headerHeight, - handler: function () { - self.close(); - }, - } : { - type: "bi.layout", + el: BI.isPlainObject(header) ? BI.extend({}, header, { + extraCls: "bi-font-bold", + }) : { + type: "bi.label", + cls: "bi-font-bold", + height: headerHeight, + text: header, + title: header, + textAlign: "left", }, - width: 56, + left: 20, + top: 0, + right: 0, + bottom: 0, }], - height: o.headerHeight, - }, - height: o.headerHeight, - }, { - el: { - type: "bi.vertical", - scrolly: true, - cls: "drawer-body", - ref: function () { - self.body = this; + }, { + el: closable ? { + type: "bi.icon_button", + cls: "bi-message-close close-font", + height: headerHeight, + handler: ()=> { + this.close(); + }, + } : { + type: "bi.layout", }, - items: [{ - el: o.body, - }], + width: 56, + }], + height: headerHeight, + }, + height: headerHeight, + }, { + el: { + type: "bi.vertical", + scrolly: true, + cls: "drawer-body", + ref: (_ref)=> { + this.body = _ref; }, - hgap: o.bodyHgap, - tgap: o.bodyTgap, - bgap: o.bodyBgap, - }]; + items: [{ + el: body, + }], + }, + hgap: bodyHgap, + tgap: bodyTgap, + bgap: bodyBgap, + }]; - return BI.extend({ - type: "bi.vtape", - items: items, - }, this._getSuitableSize()); - }, + return BI.extend({ + type: "bi.vtape", + items: items, + }, this._getSuitableSize()); + } + mounted() { + const { placement } = this.options; + switch (placement) { + case "right": + this.element.css({ + top: 0, + left: "100%", + bottom: 0, + }); + break; + case "left": + this.element.css({ + top: 0, + right: "100%", + bottom: 0, + }); + break; + case "top": + this.element.css({ + left: 0, + right: 0, + bottom: "100%", + }); + break; + case "bottom": + this.element.css({ + left: 0, + right: 0, + top: "100%", + }); + break; + default: + break; + } + } - _getSuitableSize: function () { - var o = this.options; - var size = 0; - switch (o.size) { - case "big": - size = 736; + show(callback) { + const { placement } = this.options; + requestAnimationFrame(()=> { + const size = this._getSuitableSize(); + switch (placement) { + case "right": + this.element.css({ + left: "calc(100% - " + size.width + "px)", + }); + break; + case "left": + this.element.css({ + right: "calc(100% - " + size.width + "px)", + }); + break; + case "top": + this.element.css({ + bottom: "calc(100% - " + size.height + "px)", + }); break; - case "small": - size = 200; + case "bottom": + this.element.css({ + top: "calc(100% - " + size.height + "px)", + }); break; - case "normal": default: - size = 378; break; } - if (o.placement === "top" || o.placement === "bottom") { - return { - height: o.height || size, - }; - } - if (o.placement === "left" || o.placement === "right") { - return { - width: o.width || size, - }; - } - }, + callback && callback(); + }); + } - mounted: function () { - var self = this, o = this.options; - switch (o.placement) { + hide(callback) { + const { placement } = this.options; + requestAnimationFrame(()=> { + switch (placement) { case "right": - self.element.css({ - top: 0, + this.element.css({ left: "100%", - bottom: 0, }); break; case "left": - self.element.css({ - top: 0, + this.element.css({ right: "100%", - bottom: 0, }); break; case "top": - self.element.css({ - left: 0, - right: 0, + this.element.css({ bottom: "100%", }); break; case "bottom": - self.element.css({ - left: 0, - right: 0, + this.element.css({ top: "100%", }); break; default: break; } - }, - - show: function (callback) { - var self = this, o = this.options; - requestAnimationFrame(function () { - var size = self._getSuitableSize(); - switch (o.placement) { - case "right": - self.element.css({ - left: "calc(100% - " + size.width + "px)", - }); - break; - case "left": - self.element.css({ - right: "calc(100% - " + size.width + "px)", - }); - break; - case "top": - self.element.css({ - bottom: "calc(100% - " + size.height + "px)", - }); - break; - case "bottom": - self.element.css({ - top: "calc(100% - " + size.height + "px)", - }); - break; - default: - break; - } - callback && callback(); - }); - }, - - hide: function (callback) { - var self = this, o = this.options; - requestAnimationFrame(function () { - switch (o.placement) { - case "right": - self.element.css({ - left: "100%", - }); - break; - case "left": - self.element.css({ - right: "100%", - }); - break; - case "top": - self.element.css({ - bottom: "100%", - }); - break; - case "bottom": - self.element.css({ - top: "100%", - }); - break; - default: - break; - } - setTimeout(callback, 300); - }); - }, - - open: function () { - var self = this; - this.show(function () { - self.fireEvent(BI.Drawer.EVENT_OPEN); - }); - }, + setTimeout(callback, 300); + }); + } - close: function () { - var self = this; - this.hide(function () { - self.fireEvent(BI.Drawer.EVENT_CLOSE); - }); - }, + open() { + this.show(()=> { + this.fireEvent(Drawer.EVENT_OPEN); + }); + } - setZindex: function (zindex) { - this.element.css({ "z-index": zindex }); - }, + close() { + this.hide(()=> { + this.fireEvent(Drawer.EVENT_CLOSE); + }); + } - destroyed: function () { - }, -}); + setZindex(zindex) { + this.element.css({ "z-index": zindex }); + } -BI.shortcut("bi.drawer", BI.Drawer); + destroyed() { + } -BI.Drawer.EVENT_CLOSE = "EVENT_CLOSE"; -BI.Drawer.EVENT_OPEN = "EVENT_OPEN"; +} +BI.extend(BI, { Drawer }); diff --git a/src/base/layer/layer.popover.js b/src/base/layer/layer.popover.js index 4244a1efb..802bd73bd 100644 --- a/src/base/layer/layer.popover.js +++ b/src/base/layer/layer.popover.js @@ -3,276 +3,280 @@ * @class BI.Popover * @extends BI.Widget */ -BI.Popover = BI.inherit(BI.Widget, { - _constant: { - SIZE: { - SMALL: "small", - NORMAL: "normal", - BIG: "big", - }, - MAX_HEIGHT: 600, - }, - props: function () { - return { - baseCls: "bi-popover bi-card bi-border-radius", - size: "normal", // small, normal, big - logic: { - dynamic: false, - }, - header: null, - headerHeight: 40, - body: null, - footer: null, - footerHeight: 44, - closable: true, // BI-40839 是否显示右上角的关闭按钮 - bodyHgap: BI.SIZE_CONSANTS.H_GAP_SIZE, - bodyTgap: BI.SIZE_CONSANTS.V_GAP_SIZE, - }; - }, +import { shortcut } from "../../core/decorator"; +@shortcut() +export class Popover extends BI.Widget { + _constant = { + SIZE: { + SMALL: "small", + NORMAL: "normal", + BIG: "big", + }, + MAX_HEIGHT: 600, + } - render: function () { - var self = this; - var o = this.options; - var c = this._constant; - this.startX = 0; - this.startY = 0; - var size = this._calculateSize(); - this.tracker = new BI.MouseMoveTracker(function (deltaX, deltaY) { - var W = BI.Widget._renderEngine.createElement("body").width(); - var H = BI.Widget._renderEngine.createElement("body").height(); - self.startX += deltaX; - self.startY += deltaY; - self.element.css({ - left: BI.clamp(self.startX, 0, W - self.element.width()) + "px", - top: BI.clamp(self.startY, 0, H - self.element.height()) + "px", - }); - // BI-12134 没有什么特别好的方法 - BI.Resizers._resize({ - target: self.element[0], - }); - }, function () { - self.tracker.releaseMouseMoves(); - }, _global); - var items = [{ - el: { - type: "bi.htape", - cls: "bi-message-title bi-header-background", - items: [{ - el: { - type: "bi.absolute", - ref: function (_ref) { - self.dragger = _ref; - }, - items: [{ - el: BI.isPlainObject(o.header) ? BI.extend({}, o.header, { - extraCls: "bi-font-bold", - }) : { - type: "bi.label", - cls: "bi-font-bold", - height: o.headerHeight, - text: o.header, - title: o.header, - textAlign: "left", - }, - top: 0, - bottom: 0, - left: BI.SIZE_CONSANTS.H_GAP_SIZE, - right: o.closable ? 0 : BI.SIZE_CONSANTS.H_GAP_SIZE, - }], + props() { + return { + baseCls: "bi-popover bi-card bi-border-radius", + size: "normal", // small, normal, big + logic: { + dynamic: false, + }, + header: null, + headerHeight: 40, + body: null, + footer: null, + footerHeight: 44, + closable: true, // BI-40839 是否显示右上角的关闭按钮 + bodyHgap: BI.SIZE_CONSANTS.H_GAP_SIZE, + bodyTgap: BI.SIZE_CONSANTS.V_GAP_SIZE, + }; + } + + static xtype = "bi.popover"; + static EVENT_CLOSE = "EVENT_CLOSE"; + static EVENT_OPEN = "EVENT_OPEN"; + static EVENT_CANCEL = "EVENT_CANCEL"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + + render() { + // var self = this; + const { header, headerHeight, closable, logic, footer, footerHeight, body, bodyTgap, bodyHgap } = this.options; + const c = this._constant; + this.startX = 0; + this.startY = 0; + const size = this._calculateSize(); + this.tracker = new BI.MouseMoveTracker(function (deltaX, deltaY) { + const W = BI.Widget._renderEngine.createElement("body").width(); + const H = BI.Widget._renderEngine.createElement("body").height(); + this.startX += deltaX; + this.startY += deltaY; + this.element.css({ + left: BI.clamp(this.startX, 0, W - this.element.width()) + "px", + top: BI.clamp(this.startY, 0, H - this.element.height()) + "px", + }); + // BI-12134 没有什么特别好的方法 + BI.Resizers._resize({ + target: this.element[0], + }); + }, ()=> { + this.tracker.releaseMouseMoves(); + }, _global); + const items = [{ + el: { + type: "bi.htape", + cls: "bi-message-title bi-header-background", + items: [{ + el: { + type: "bi.absolute", + ref: (_ref)=> { + this.dragger = _ref; }, - }, o.closable ? { - el: { - type: "bi.icon_button", - cls: "bi-message-close close-font", - height: o.headerHeight, - handler: function () { - self.close(); + items: [{ + el: BI.isPlainObject(header) ? BI.extend({}, header, { + extraCls: "bi-font-bold", + }) : { + type: "bi.label", + cls: "bi-font-bold", + height: headerHeight, + text: header, + title: header, + textAlign: "left", }, - }, - width: 56, - } : null], - height: o.headerHeight, - }, - height: o.headerHeight, - }, o.logic.dynamic ? { - el: { - type: "bi.vertical", - scrolly: true, - cls: "popover-body", - ref: function () { - self.body = this; + top: 0, + bottom: 0, + left: BI.SIZE_CONSANTS.H_GAP_SIZE, + right: closable ? 0 : BI.SIZE_CONSANTS.H_GAP_SIZE, + }], }, - css: { - "max-height": this._getSuitableBodyHeight(c.MAX_HEIGHT - o.headerHeight - (o.footer ? o.footerHeight : 0) - o.bodyTgap), - "min-height": this._getSuitableBodyHeight(size.height - o.headerHeight - (o.footer ? o.footerHeight : 0) - o.bodyTgap), + }, closable ? { + el: { + type: "bi.icon_button", + cls: "bi-message-close close-font", + height: headerHeight, + handler: ()=> { + this.close(); + }, }, - items: [{ - el: o.body, - }], - hgap: o.bodyHgap, - tgap: o.bodyTgap, + width: 56, + } : null], + height: headerHeight, + }, + height: headerHeight, + }, logic.dynamic ? { + el: { + type: "bi.vertical", + scrolly: true, + cls: "popover-body", + ref: (_ref)=> { + this.body = _ref; + }, + css: { + "max-height": this._getSuitableBodyHeight(c.MAX_HEIGHT - headerHeight - (footer ? footerHeight : 0) - bodyTgap), + "min-height": this._getSuitableBodyHeight(size.height - headerHeight - (footer ? footerHeight : 0) - bodyTgap), }, - } : { + items: [{ + el: body, + }], + hgap: bodyHgap, + tgap: bodyTgap, + }, + } : { + el: { + type: "bi.absolute", + items: [{ + el: body, + left: bodyHgap, + top: bodyTgap, + right: bodyHgap, + bottom: 0, + }], + }, + }]; + if (footer) { + items.push({ el: { type: "bi.absolute", items: [{ - el: o.body, - left: o.bodyHgap, - top: o.bodyTgap, - right: o.bodyHgap, + el: footer, + left: BI.SIZE_CONSANTS.H_GAP_SIZE, + top: 0, + right: BI.SIZE_CONSANTS.H_GAP_SIZE, bottom: 0, }], + height: footerHeight, }, - }]; - if (o.footer) { - items.push({ - el: { - type: "bi.absolute", - items: [{ - el: o.footer, - left: BI.SIZE_CONSANTS.H_GAP_SIZE, - top: 0, - right: BI.SIZE_CONSANTS.H_GAP_SIZE, - bottom: 0, - }], - height: o.footerHeight, - }, - height: o.footerHeight, - }); - } - - return BI.extend({ - items: items, - width: this._getSuitableWidth(size.width), - }, o.logic.dynamic ? { - type: "bi.vertical", - scrolly: false, - } : { - type: "bi.vtape", - height: this._getSuitableHeight(size.height), + height: footerHeight, }); - }, + } - // mounted之后绑定事件 - mounted: function () { - var self = this; - this.dragger.element.mousedown(function (e) { - if (self.options.draggable !== false) { - self.startX = self.element[0].offsetLeft; - self.startY = self.element[0].offsetTop; - self.tracker.captureMouseMoves(e); - } - }); - }, + return BI.extend({ + items: items, + width: this._getSuitableWidth(size.width), + }, logic.dynamic ? { + type: "bi.vertical", + scrolly: false, + } : { + type: "bi.vtape", + height: this._getSuitableHeight(size.height), + }); + } + // mounted之后绑定事件 + mounted() { + this.dragger.element.mousedown(function (e) { + if (this.options.draggable !== false) { + this.startX = this.element[0].offsetLeft; + this.startY = this.element[0].offsetTop; + this.tracker.captureMouseMoves(e); + } + }); + } - _getSuitableBodyHeight: function (height) { - var o = this.options; + _getSuitableBodyHeight(height) { + const { headerHeight, footer, footerHeight, bodyTgap } = this.options; - return BI.clamp(height, 0, BI.Widget._renderEngine.createElement("body")[0].clientHeight - o.headerHeight - (o.footer ? o.footerHeight : 0) - o.bodyTgap); - }, + return BI.clamp(height, 0, BI.Widget._renderEngine.createElement("body")[0].clientHeight - headerHeight - (footer ? footerHeight : 0) - bodyTgap); + } - _getSuitableHeight: function (height) { - return BI.clamp(height, 0, BI.Widget._renderEngine.createElement("body")[0].clientHeight); - }, + _getSuitableHeight(height) { + return BI.clamp(height, 0, BI.Widget._renderEngine.createElement("body")[0].clientHeight); + } - _getSuitableWidth: function (width) { - return BI.clamp(width, 0, BI.Widget._renderEngine.createElement("body").width()); - }, + _getSuitableWidth(width) { + return BI.clamp(width, 0, BI.Widget._renderEngine.createElement("body").width()); + } - _calculateSize: function () { - var o = this.options; - var size = {}; - if (BI.isNotNull(o.size)) { - switch (o.size) { - case this._constant.SIZE.SMALL: - size.width = 450; - size.height = 200; - size.type = "small"; - break; - case this._constant.SIZE.BIG: - size.width = 900; - size.height = 500; - size.type = "big"; - break; - default: - size.width = 550; - size.height = 500; - size.type = "default"; - } + _calculateSize() { + const { size, width, height } = this.options; + const sizeValue = {}; + if (BI.isNotNull(size)) { + switch (size) { + case this._constant.SIZE.SMALL: + sizeValue.width = 450; + sizeValue.height = 200; + sizeValue.type = "small"; + break; + case this._constant.SIZE.BIG: + sizeValue.width = 900; + sizeValue.height = 500; + sizeValue.type = "big"; + break; + default: + sizeValue.width = 550; + sizeValue.height = 500; + sizeValue.type = "default"; } + } - return { - width: o.width || size.width, - height: o.height || size.height, - type: size.type || "default", - }; - }, + return { + width: width || sizeValue.width, + height: height || sizeValue.height, + type: sizeValue.type || "default", + }; + } + setDraggable(b) { + this.options.draggable = b; + } - setDraggable: function (b) { - this.options.draggable = b; - }, + hide() { - hide: function () { + } - }, + open() { + this.show(); + this.fireEvent(Popover.EVENT_OPEN, arguments); + } - open: function () { - this.show(); - this.fireEvent(BI.Popover.EVENT_OPEN, arguments); - }, + close() { + this.hide(); + this.fireEvent(Popover.EVENT_CLOSE, arguments); + } - close: function () { - this.hide(); - this.fireEvent(BI.Popover.EVENT_CLOSE, arguments); - }, + setZindex(zindex) { + this.element.css({ "z-index": zindex }); + } +} - setZindex: function (zindex) { - this.element.css({ "z-index": zindex }); - }, -}); +BI.extend(BI, { Popover }); -BI.shortcut("bi.popover", BI.Popover); +@shortcut() +export class BarPopover extends BI.Popover { + static xtype = "bi.bar_popover"; -BI.BarPopover = BI.inherit(BI.Popover, { - _defaultConfig: function () { - return BI.extend(BI.BarPopover.superclass._defaultConfig.apply(this, arguments), { - btns: [BI.i18nText("BI-Basic_OK"), BI.i18nText("BI-Basic_Cancel")], - }); - }, + _defaultConfig() { + return BI.extend(super._defaultConfig(arguments), { + btns: [BI.i18nText("BI-Basic_OK"), BI.i18nText("BI-Basic_Cancel")], + }); + } - beforeCreate: function () { - var self = this; - var o = this.options; - o.footer || (o.footer = { - type: "bi.right_vertical_adapt", - lgap: 10, - items: [{ - type: "bi.button", - text: this.options.btns[1], - value: 1, - level: "ignore", - handler: function (v) { - self.fireEvent(BI.Popover.EVENT_CANCEL, v); - self.close(v); - }, - }, { - type: "bi.button", - text: this.options.btns[0], - warningTitle: o.warningTitle, - value: 0, - handler: function (v) { - self.fireEvent(BI.Popover.EVENT_CONFIRM, v); - self.close(v); - }, - }], - }); - }, -}); + beforeCreate() { + const { footer, warningTitle } = this.options; + footer || (this.options.footer = { + type: "bi.right_vertical_adapt", + lgap: 10, + items: [{ + type: "bi.button", + text: this.options.btns[1], + value: 1, + level: "ignore", + handler: (v)=> { + this.fireEvent(Popover.EVENT_CANCEL, v); + this.close(v); + }, + }, { + type: "bi.button", + text: this.options.btns[0], + warningTitle: warningTitle, + value: 0, + handler: (v)=> { + this.fireEvent(Popover.EVENT_CONFIRM, v); + this.close(v); + }, + }], + }); + } +} -BI.shortcut("bi.bar_popover", BI.BarPopover); +BI.extend(BI, { BarPopover }); -BI.Popover.EVENT_CLOSE = "EVENT_CLOSE"; -BI.Popover.EVENT_OPEN = "EVENT_OPEN"; -BI.Popover.EVENT_CANCEL = "EVENT_CANCEL"; -BI.Popover.EVENT_CONFIRM = "EVENT_CONFIRM"; diff --git a/src/base/layer/layer.popup.js b/src/base/layer/layer.popup.js index dbeb7e8fe..43f8c4908 100644 --- a/src/base/layer/layer.popup.js +++ b/src/base/layer/layer.popup.js @@ -3,425 +3,435 @@ * @class BI.PopupView * @extends BI.Widget */ -BI.PopupView = BI.inherit(BI.Widget, { - _const: { - TRIANGLE_LENGTH: 12, - }, - _defaultConfig: function (props) { - return BI.extend(BI.PopupView.superclass._defaultConfig.apply(this, arguments), { - _baseCls: "bi-popup-view" + (props.primary ? " bi-primary" : ""), - // 品牌色 - primary: false, - maxWidth: "auto", - minWidth: 100, - // maxHeight: 200, - minHeight: 24, - lgap: 0, - rgap: 0, - tgap: 0, - bgap: 0, - vgap: 0, - hgap: 0, - innerVgap: 0, - innerHgap: 0, - showArrow: false, - direction: BI.Direction.Top, // 工具栏的方向 - stopEvent: false, // 是否停止mousedown、mouseup事件 - stopPropagation: false, // 是否停止mousedown、mouseup向上冒泡 - logic: { - dynamic: true, - }, - tool: false, // 自定义工具栏 - tabs: [], // 导航栏 - buttons: [], // toolbar栏 +import { shortcut } from "../../core/decorator"; +@shortcut() +export class PopupView extends BI.Widget { + _const = { + TRIANGLE_LENGTH: 12, + } - el: { - type: "bi.button_group", - items: [], - chooseType: 0, - behaviors: {}, - layouts: [{ - type: "bi.vertical", - }], - }, - }); - }, + static xtype = "bi.popup_view"; + static EVENT_CHANGE = "EVENT_CHANGE"; - render: function () { - var self = this, o = this.options; - function fn (e) { - e.stopPropagation(); - } - function stop (e) { - e.stopEvent(); + _defaultConfig(props) { + return BI.extend(super._defaultConfig(arguments), { + _baseCls: "bi-popup-view" + (props.primary ? " bi-primary" : ""), + // 品牌色 + primary: false, + maxWidth: "auto", + minWidth: 100, + // maxHeight: 200, + minHeight: 24, + lgap: 0, + rgap: 0, + tgap: 0, + bgap: 0, + vgap: 0, + hgap: 0, + innerVgap: 0, + innerHgap: 0, + showArrow: false, + direction: BI.Direction.Top, // 工具栏的方向 + stopEvent: false, // 是否停止mousedown、mouseup事件 + stopPropagation: false, // 是否停止mousedown、mouseup向上冒泡 + logic: { + dynamic: true, + }, - return false; - } - this.element.css({ - "z-index": BI.zIndex_popup, - "min-width": BI.pixFormat(o.minWidth), - "max-width": BI.pixFormat(o.maxWidth), - }).bind({ click: fn }); + tool: false, // 自定义工具栏 + tabs: [], // 导航栏 + buttons: [], // toolbar栏 - this.element.bind("mousewheel", fn); + el: { + type: "bi.button_group", + items: [], + chooseType: 0, + behaviors: {}, + layouts: [{ + type: "bi.vertical", + }], + }, + }); + } + render() { + const { minWidth, maxWidth, stopPropagation, stopEvent, + direction, logic, lgap, rgap, tgap, bgap, vgap, hgap, primary, showArrow } = this.options; + function fn (e) { + e.stopPropagation(); + } + function stop (e) { + e.stopEvent(); - o.stopPropagation && this.element.bind({ mousedown: fn, mouseup: fn, mouseover: fn }); - o.stopEvent && this.element.bind({ mousedown: stop, mouseup: stop, mouseover: stop }); - this.tool = this._createTool(); - this.tab = this._createTab(); - this.view = this._createView(); - this.toolbar = this._createToolBar(); + return false; + } + this.element.css({ + "z-index": BI.zIndex_popup, + "min-width": BI.pixFormat(minWidth), + "max-width": BI.pixFormat(maxWidth), + }).bind({ click: fn }); - this.view.on(BI.Controller.EVENT_CHANGE, function (type) { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - if (type === BI.Events.CLICK) { - self.fireEvent(BI.PopupView.EVENT_CHANGE); - } - }); + this.element.bind("mousewheel", fn); - BI.createWidget(BI.extend({ - element: this, - }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({}, o.logic, { - scrolly: false, - lgap: o.lgap, - rgap: o.rgap, - tgap: o.tgap, - bgap: o.bgap, - vgap: o.vgap, - hgap: o.hgap, - items: BI.LogicFactory.createLogicItemsByDirection(o.direction, BI.extend({ - cls: "list-view-outer bi-card list-view-shadow" + (o.primary ? " bi-primary" : ""), - }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({}, o.logic, { - items: BI.LogicFactory.createLogicItemsByDirection(o.direction, this.tool, this.tab, this.view, this.toolbar), - }))) - ), - })))); - if (o.showArrow) { - this.arrow = BI.createWidget({ - type: "bi.absolute", - cls: "bi-bubble-arrow", - items: [{ - type: "bi.layout", - cls: "bubble-arrow", - }], - }); - this.arrowWrapper = BI.createWidget({ - type: "bi.absolute", - cls: "bi-bubble-arrow-wrapper", - items: [{ - el: this.arrow, - }], - }); - // 因为三角符号的原因位置变大了，需要占位 - this.placeholder = BI.createWidget({ - type: "bi.layout", - }); - BI.createWidget({ - type: "bi.absolute", - element: this, - items: [{ - el: this.arrowWrapper, - left: 0, - top: 0, - }, { - el: this.placeholder, - }], - }); + stopPropagation && this.element.bind({ mousedown: fn, mouseup: fn, mouseover: fn }); + stopEvent && this.element.bind({ mousedown: stop, mouseup: stop, mouseover: stop }); + this.tool = this._createTool(); + this.tab = this._createTab(); + this.view = this._createView(); + this.toolbar = this._createToolBar(); + + const self = this; + // TODO:这里需要调整转化方式,仍然采用原来的self + this.view.on(BI.Controller.EVENT_CHANGE, function (type) { + // 箭头函数没有自己的arguments，只会获取外层的，若要获取自己的，需通过剩余参数写法，但这样得到的仍然不是类数组 + self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + if (type === BI.Events.CLICK) { + self.fireEvent(PopupView.EVENT_CHANGE); } - }, + }); - _createView: function () { - var o = this.options; - this.button_group = BI.createWidget(o.el, { type: "bi.button_group", value: o.value }); - this.button_group.element.css({ - "min-height": BI.pixFormat(o.minHeight), - "padding-top": BI.pixFormat(o.innerVgap), - "padding-bottom": BI.pixFormat(o.innerVgap), - "padding-left": BI.pixFormat(o.innerHgap), - "padding-right": BI.pixFormat(o.innerHgap), + BI.createWidget(BI.extend({ + element: this, + }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(direction), BI.extend({}, logic, { + scrolly: false, + lgap, + rgap, + tgap, + bgap, + vgap, + hgap, + items: BI.LogicFactory.createLogicItemsByDirection(direction, BI.extend({ + cls: "list-view-outer bi-card list-view-shadow" + (primary ? " bi-primary" : ""), + }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(direction), BI.extend({}, logic, { + items: BI.LogicFactory.createLogicItemsByDirection(direction, this.tool, this.tab, this.view, this.toolbar), + }))) + ), + })))); + if (showArrow) { + this.arrow = BI.createWidget({ + type: "bi.absolute", + cls: "bi-bubble-arrow", + items: [{ + type: "bi.layout", + cls: "bubble-arrow", + }], + }); + this.arrowWrapper = BI.createWidget({ + type: "bi.absolute", + cls: "bi-bubble-arrow-wrapper", + items: [{ + el: this.arrow, + }], + }); + // 因为三角符号的原因位置变大了，需要占位 + this.placeholder = BI.createWidget({ + type: "bi.layout", + }); + BI.createWidget({ + type: "bi.absolute", + element: this, + items: [{ + el: this.arrowWrapper, + left: 0, + top: 0, + }, { + el: this.placeholder, + }], }); + } + } + _createView() { + const { el, value, minHeight, innerVgap, innerHgap } = this.options; + this.button_group = BI.createWidget(el, { type: "bi.button_group", value: value }); + this.button_group.element.css({ + "min-height": BI.pixFormat(minHeight), + "padding-top": BI.pixFormat(innerVgap), + "padding-bottom": BI.pixFormat(innerVgap), + "padding-left": BI.pixFormat(innerHgap), + "padding-right": BI.pixFormat(innerHgap), + }); - return this.button_group; - }, + return this.button_group; + } - _createTool: function () { - var o = this.options; - if (false === o.tool) { - return; - } + _createTool() { + const { tool } = this.options; + if (false === tool) { + return; + } - return BI.createWidget(o.tool); - }, + return BI.createWidget(tool); + } - _createTab: function () { - var o = this.options; - if (o.tabs.length === 0) { - return; - } + _createTab() { + const { tabs, value } = this.options; + if (tabs.length === 0) { + return; + } - return BI.createWidget({ - type: "bi.center", - cls: "list-view-tab", - height: 25, - items: o.tabs, - value: o.value, - }); - }, + return BI.createWidget({ + type: "bi.center", + cls: "list-view-tab", + height: 25, + items: tabs, + value: value, + }); + } - _createToolBar: function () { - var o = this.options; - if (o.buttons.length === 0) { - return; - } + _createToolBar() { + const { buttons } = this.options; + if (buttons.length === 0) { + return; + } - return BI.createWidget({ - type: "bi.center", - cls: "list-view-toolbar bi-high-light bi-split-top", - height: 24, - items: BI.createItems(o.buttons, { - once: false, - shadow: true, - isShadowShowingOnSelected: true, - }), - }); - }, + return BI.createWidget({ + type: "bi.center", + cls: "list-view-toolbar bi-high-light bi-split-top", + height: 24, + items: BI.createItems(buttons, { + once: false, + shadow: true, + isShadowShowingOnSelected: true, + }), + }); + } - setDirection: function (direction, position) { - var o = this.options; - if (o.showArrow) { - var style = {}, wrapperStyle = {}, placeholderStyle = {}; - var adjustXOffset = position.adjustXOffset || 0; - var adjustYOffset = position.adjustYOffset || 0; - var bodyBounds = BI.Widget._renderEngine.createElement("body").bounds(); - var bodyWidth = bodyBounds.width; - var bodyHeight = bodyBounds.height; - var popupWidth = this.element.outerWidth(); - var popupHeight = this.element.outerHeight(); - var offset = position.offset; - var offsetStyle = position.offsetStyle; - var middle = offsetStyle === "center" || offsetStyle === "middle"; + setDirection(direction, position) { + const { showArrow, tgap, vgap, bgap, rgap, hgap, lgap } = this.options; + if (showArrow) { + let style = {}, wrapperStyle = {}, placeholderStyle = {}; + const adjustXOffset = position.adjustXOffset || 0; + const adjustYOffset = position.adjustYOffset || 0; + const bodyBounds = BI.Widget._renderEngine.createElement("body").bounds(); + const bodyWidth = bodyBounds.width; + const bodyHeight = bodyBounds.height; + const popupWidth = this.element.outerWidth(); + const popupHeight = this.element.outerHeight(); + const offset = position.offset; + const offsetStyle = position.offsetStyle; + const middle = offsetStyle === "center" || offsetStyle === "middle"; - var minLeft = Math.max(4, offset.left + 4 + popupWidth - bodyWidth); - var minRight = Math.max(4, popupWidth - (offset.left + 4)); - var minTop = Math.max(4, offset.top + 4 + popupHeight - bodyHeight); - var minBottom = Math.max(4, popupHeight - (offset.top + 4)); + const minLeft = Math.max(4, offset.left + 4 + popupWidth - bodyWidth); + const minRight = Math.max(4, popupWidth - (offset.left + 4)); + const minTop = Math.max(4, offset.top + 4 + popupHeight - bodyHeight); + const minBottom = Math.max(4, popupHeight - (offset.top + 4)); - var maxLeft = Math.min(popupWidth - 16 - 4, offset.left + position.width - 16 - 4); - var maxRight = Math.min(popupWidth - 16 - 4, bodyWidth - (offset.left + position.width - 16 - 4)); - var maxTop = Math.min(popupHeight - 16 - 4, offset.top + position.height - 16 - 4); - var maxBottom = Math.min(popupHeight - 16 - 4, bodyHeight - (offset.top + position.height - 16 - 4)); - switch (direction) { - case "bottom": - case "bottom,right": - direction = "bottom"; - style = { - // 5表示留出一定的空间 - left: BI.clamp(((middle ? popupWidth : position.width) - adjustXOffset) / 2 - 8, minLeft, maxLeft), - }; - wrapperStyle = { - top: o.tgap + o.vgap, - left: 0, - right: "", - bottom: "", - }; - placeholderStyle = { - left: 0, - right: 0, - height: this._const.TRIANGLE_LENGTH, - top: -this._const.TRIANGLE_LENGTH, - bottom: "", - }; - break; - case "bottom,left": - direction = "bottom"; - style = { - right: BI.clamp(((middle ? popupWidth : position.width) + adjustXOffset) / 2 - 8, minRight, maxRight), - }; - wrapperStyle = { - top: o.bgap + o.vgap, - left: "", - right: 0, - bottom: "", - }; - placeholderStyle = { - left: 0, - right: 0, - height: this._const.TRIANGLE_LENGTH, - top: -this._const.TRIANGLE_LENGTH, - bottom: "", - }; - break; - case "top": - case "top,right": - direction = "top"; - style = { - left: BI.clamp(((middle ? popupWidth : position.width) - adjustXOffset) / 2 - 8, minLeft, maxLeft), - }; - wrapperStyle = { - bottom: o.bgap + o.vgap, - left: 0, - right: "", - top: "", - }; - placeholderStyle = { - left: 0, - right: 0, - height: this._const.TRIANGLE_LENGTH, - top: "", - bottom: -this._const.TRIANGLE_LENGTH, - }; - break; - case "top,left": - direction = "top"; - style = { - right: BI.clamp(((middle ? popupWidth : position.width) + adjustXOffset) / 2 - 8, minRight, maxRight), - }; - wrapperStyle = { - bottom: o.bgap + o.vgap, - right: 0, - left: "", - top: "", - }; - placeholderStyle = { - left: 0, - right: 0, - height: this._const.TRIANGLE_LENGTH, - top: "", - bottom: -this._const.TRIANGLE_LENGTH, - }; - break; - case "left": - case "left,bottom": - direction = "left"; - style = { - top: BI.clamp(((middle ? popupHeight : position.height) - adjustYOffset) / 2 - 8, minTop, maxTop), - }; - wrapperStyle = { - right: o.rgap + o.hgap, - top: 0, - bottom: "", - left: "", - }; - placeholderStyle = { - top: 0, - bottom: 0, - width: this._const.TRIANGLE_LENGTH, - right: -this._const.TRIANGLE_LENGTH, - left: "", - }; - break; - case "left,top": - direction = "left"; - style = { - bottom: BI.clamp(((middle ? popupHeight : position.height) + adjustYOffset) / 2 - 8, minBottom, maxBottom), - }; - wrapperStyle = { - right: o.rgap + o.hgap, - bottom: 0, - top: "", - left: "", - }; - placeholderStyle = { - top: 0, - bottom: 0, - width: this._const.TRIANGLE_LENGTH, - right: -this._const.TRIANGLE_LENGTH, - left: "", - }; - break; - case "right": - case "right,bottom": - direction = "right"; - style = { - top: BI.clamp(((middle ? popupHeight : position.height) - adjustYOffset) / 2 - 8, minTop, maxTop), - }; - wrapperStyle = { - left: o.lgap + o.hgap, - top: 0, - bottom: "", - right: "", - }; - placeholderStyle = { - top: 0, - bottom: 0, - width: this._const.TRIANGLE_LENGTH, - left: -this._const.TRIANGLE_LENGTH, - right: "", - }; - break; - case "right,top": - direction = "right"; - style = { - bottom: BI.clamp(((middle ? popupHeight : position.height) + adjustYOffset) / 2 - 8, minBottom, maxBottom), - }; - wrapperStyle = { - left: o.lgap + o.hgap, - bottom: 0, - top: "", - right: "", - }; - placeholderStyle = { - top: 0, - bottom: 0, - width: this._const.TRIANGLE_LENGTH, - left: -this._const.TRIANGLE_LENGTH, - right: "", - }; - break; - case "right,innerRight": - break; - case "right,innerLeft": - break; - case "innerRight": - break; - case "innerLeft": - break; - default: - break; - } - this.element - .removeClass("left") - .removeClass("right") - .removeClass("top") - .removeClass("bottom") - .addClass(direction); - this.arrow.element.css(style); - this.arrowWrapper.element.css(wrapperStyle); - this.placeholder.element.css(placeholderStyle); + const maxLeft = Math.min(popupWidth - 16 - 4, offset.left + position.width - 16 - 4); + const maxRight = Math.min(popupWidth - 16 - 4, bodyWidth - (offset.left + position.width - 16 - 4)); + const maxTop = Math.min(popupHeight - 16 - 4, offset.top + position.height - 16 - 4); + const maxBottom = Math.min(popupHeight - 16 - 4, bodyHeight - (offset.top + position.height - 16 - 4)); + switch (direction) { + case "bottom": + case "bottom,right": + direction = "bottom"; + style = { + // 5表示留出一定的空间 + left: BI.clamp(((middle ? popupWidth : position.width) - adjustXOffset) / 2 - 8, minLeft, maxLeft), + }; + wrapperStyle = { + top: tgap + vgap, + left: 0, + right: "", + bottom: "", + }; + placeholderStyle = { + left: 0, + right: 0, + height: this._const.TRIANGLE_LENGTH, + top: -this._const.TRIANGLE_LENGTH, + bottom: "", + }; + break; + case "bottom,left": + direction = "bottom"; + style = { + right: BI.clamp(((middle ? popupWidth : position.width) + adjustXOffset) / 2 - 8, minRight, maxRight), + }; + wrapperStyle = { + top: bgap + vgap, + left: "", + right: 0, + bottom: "", + }; + placeholderStyle = { + left: 0, + right: 0, + height: this._const.TRIANGLE_LENGTH, + top: -this._const.TRIANGLE_LENGTH, + bottom: "", + }; + break; + case "top": + case "top,right": + direction = "top"; + style = { + left: BI.clamp(((middle ? popupWidth : position.width) - adjustXOffset) / 2 - 8, minLeft, maxLeft), + }; + wrapperStyle = { + bottom: bgap + vgap, + left: 0, + right: "", + top: "", + }; + placeholderStyle = { + left: 0, + right: 0, + height: this._const.TRIANGLE_LENGTH, + top: "", + bottom: -this._const.TRIANGLE_LENGTH, + }; + break; + case "top,left": + direction = "top"; + style = { + right: BI.clamp(((middle ? popupWidth : position.width) + adjustXOffset) / 2 - 8, minRight, maxRight), + }; + wrapperStyle = { + bottom: bgap + vgap, + right: 0, + left: "", + top: "", + }; + placeholderStyle = { + left: 0, + right: 0, + height: this._const.TRIANGLE_LENGTH, + top: "", + bottom: -this._const.TRIANGLE_LENGTH, + }; + break; + case "left": + case "left,bottom": + direction = "left"; + style = { + top: BI.clamp(((middle ? popupHeight : position.height) - adjustYOffset) / 2 - 8, minTop, maxTop), + }; + wrapperStyle = { + right: rgap + hgap, + top: 0, + bottom: "", + left: "", + }; + placeholderStyle = { + top: 0, + bottom: 0, + width: this._const.TRIANGLE_LENGTH, + right: -this._const.TRIANGLE_LENGTH, + left: "", + }; + break; + case "left,top": + direction = "left"; + style = { + bottom: BI.clamp(((middle ? popupHeight : position.height) + adjustYOffset) / 2 - 8, minBottom, maxBottom), + }; + wrapperStyle = { + right: rgap + hgap, + bottom: 0, + top: "", + left: "", + }; + placeholderStyle = { + top: 0, + bottom: 0, + width: this._const.TRIANGLE_LENGTH, + right: -this._const.TRIANGLE_LENGTH, + left: "", + }; + break; + case "right": + case "right,bottom": + direction = "right"; + style = { + top: BI.clamp(((middle ? popupHeight : position.height) - adjustYOffset) / 2 - 8, minTop, maxTop), + }; + wrapperStyle = { + left: lgap + hgap, + top: 0, + bottom: "", + right: "", + }; + placeholderStyle = { + top: 0, + bottom: 0, + width: this._const.TRIANGLE_LENGTH, + left: -this._const.TRIANGLE_LENGTH, + right: "", + }; + break; + case "right,top": + direction = "right"; + style = { + bottom: BI.clamp(((middle ? popupHeight : position.height) + adjustYOffset) / 2 - 8, minBottom, maxBottom), + }; + wrapperStyle = { + left: lgap + hgap, + bottom: 0, + top: "", + right: "", + }; + placeholderStyle = { + top: 0, + bottom: 0, + width: this._const.TRIANGLE_LENGTH, + left: -this._const.TRIANGLE_LENGTH, + right: "", + }; + break; + case "right,innerRight": + break; + case "right,innerLeft": + break; + case "innerRight": + break; + case "innerLeft": + break; + default: + break; } - }, + this.element + .removeClass("left") + .removeClass("right") + .removeClass("top") + .removeClass("bottom") + .addClass(direction); + this.arrow.element.css(style); + this.arrowWrapper.element.css(wrapperStyle); + this.placeholder.element.css(placeholderStyle); + } + } + + getView() { + return this.view; + } + + populate(items) { + this.view.populate.apply(this.view, arguments); + } - getView: function () { - return this.view; - }, + resetWidth(w) { + this.options.width = w; + this.element.width(w); + } - populate: function (items) { - this.view.populate.apply(this.view, arguments); - }, + resetHeight(h) { + const tbHeight = this.toolbar ? (this.toolbar.attr("height") || 24) : 0, + tabHeight = this.tab ? (this.tab.attr("height") || 24) : 0, + toolHeight = ((this.tool && this.tool.attr("height")) || 24) * ((this.tool && this.tool.isVisible()) ? 1 : 0); + const resetHeight = h - tbHeight - tabHeight - toolHeight - 2 * this.options.innerVgap; + this.view.resetHeight ? this.view.resetHeight(resetHeight) : + this.view.element.css({ "max-height": BI.pixFormat(resetHeight) }); + } - resetWidth: function (w) { - this.options.width = w; - this.element.width(w); - }, + setValue(selectedValues) { + this.tab && this.tab.setValue(selectedValues); + this.view.setValue(selectedValues); + } - resetHeight: function (h) { - var tbHeight = this.toolbar ? (this.toolbar.attr("height") || 24) : 0, - tabHeight = this.tab ? (this.tab.attr("height") || 24) : 0, - toolHeight = ((this.tool && this.tool.attr("height")) || 24) * ((this.tool && this.tool.isVisible()) ? 1 : 0); - var resetHeight = h - tbHeight - tabHeight - toolHeight - 2 * this.options.innerVgap; - this.view.resetHeight ? this.view.resetHeight(resetHeight) : - this.view.element.css({ "max-height": BI.pixFormat(resetHeight) }); - }, + getValue() { + return this.view.getValue(); + } - setValue: function (selectedValues) { - this.tab && this.tab.setValue(selectedValues); - this.view.setValue(selectedValues); - }, +} - getValue: function () { - return this.view.getValue(); - }, -}); -BI.PopupView.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.popup_view", BI.PopupView); +BI.extend(BI, { PopupView }); diff --git a/src/base/layer/layer.searcher.js b/src/base/layer/layer.searcher.js index b9d8d2b41..d80ffd90c 100644 --- a/src/base/layer/layer.searcher.js +++ b/src/base/layer/layer.searcher.js @@ -6,136 +6,140 @@ * @extends BI.Pane */ -BI.SearcherView = BI.inherit(BI.Pane, { - _defaultConfig: function () { - var conf = BI.SearcherView.superclass._defaultConfig.apply(this, arguments); - - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-searcher-view bi-card", - tipText: BI.i18nText("BI-No_Select"), - chooseType: BI.Selection.Single, - - matcher: { // 完全匹配的构造器 - type: "bi.button_group", - behaviors: { - redmark: function () { - return true; - }, - }, - items: [], - layouts: [{ - type: "bi.vertical", - }], - }, - searcher: { - type: "bi.button_group", - behaviors: { - redmark: function () { - return true; - }, - }, - items: [], - layouts: [{ - type: "bi.vertical", - }], - }, - }); - }, +import { shortcut } from "../../core/decorator"; +@shortcut() +export class SearcherView extends BI.Pane { - render: function () { - var self = this, o = this.options; + static xtype = "bi.searcher_view"; + static EVENT_CHANGE = "EVENT_CHANGE"; - this.matcher = BI.createWidget(o.matcher, { + _defaultConfig() { + const conf = super._defaultConfig(arguments); + + return BI.extend(conf, { + baseCls: (conf.baseCls || "") + " bi-searcher-view bi-card", + tipText: BI.i18nText("BI-No_Select"), + chooseType: BI.Selection.Single, + + matcher: { // 完全匹配的构造器 type: "bi.button_group", - chooseType: o.chooseType, behaviors: { - redmark: function () { + redmark: ()=> { return true; }, }, + items: [], layouts: [{ type: "bi.vertical", }], - value: o.value, - }); - this.matcher.on(BI.Controller.EVENT_CHANGE, function (type, val, ob) { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - if (type === BI.Events.CLICK) { - self.fireEvent(BI.SearcherView.EVENT_CHANGE, val, ob); - } - }); - this.spliter = BI.createWidget({ - type: "bi.vertical", - height: 1, - hgap: 10, - items: [{ - type: "bi.layout", - height: 1, - cls: "searcher-view-spliter bi-background", - }], - }); - this.searcher = BI.createWidget(o.searcher, { + }, + searcher: { type: "bi.button_group", - chooseType: o.chooseType, behaviors: { redmark: function () { return true; }, }, + items: [], layouts: [{ type: "bi.vertical", }], - value: o.value, - }); - this.searcher.on(BI.Controller.EVENT_CHANGE, function (type, val, ob) { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - if (type === BI.Events.CLICK) { - self.fireEvent(BI.SearcherView.EVENT_CHANGE, val, ob); - } - }); - - BI.createWidget({ + }, + }); + } + render() { + const { matcher, chooseType, value, searcher } = this.options; + + this.matcher = BI.createWidget(matcher, { + type: "bi.button_group", + chooseType, + behaviors: { + redmark: ()=> { + return true; + }, + }, + layouts: [{ type: "bi.vertical", - element: this, - items: [this.matcher, this.spliter, this.searcher], - }); - }, + }], + value, + }); + this.matcher.on(BI.Controller.EVENT_CHANGE, (type, val, ob)=> { + this.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + if (type === BI.Events.CLICK) { + this.fireEvent(SearcherView.EVENT_CHANGE, val, ob); + } + }); + this.spliter = BI.createWidget({ + type: "bi.vertical", + height: 1, + hgap: 10, + items: [{ + type: "bi.layout", + height: 1, + cls: "searcher-view-spliter bi-background", + }], + }); + this.searcher = BI.createWidget(searcher, { + type: "bi.button_group", + chooseType, + behaviors: { + redmark: ()=> { + return true; + }, + }, + layouts: [{ + type: "bi.vertical", + }], + value, + }); + this.searcher.on(BI.Controller.EVENT_CHANGE, (type, val, ob)=> { + this.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + if (type === BI.Events.CLICK) { + this.fireEvent(BI.SearcherView.EVENT_CHANGE, val, ob); + } + }); + + BI.createWidget({ + type: "bi.vertical", + element: this, + items: [this.matcher, this.spliter, this.searcher], + }); + } - startSearch: function () { + startSearch() { - }, + } - stopSearch: function () { + stopSearch() { - }, + } - setValue: function (v) { - this.matcher.setValue(v); - this.searcher.setValue(v); - }, + setValue(v) { + this.matcher.setValue(v); + this.searcher.setValue(v); + } - getValue: function () { - return this.matcher.getValue().concat(this.searcher.getValue()); - }, + getValue() { + return this.matcher.getValue().concat(this.searcher.getValue()); + } - populate: function (searchResult, matchResult, keyword) { - searchResult || (searchResult = []); - matchResult || (matchResult = []); - this.setTipVisible(searchResult.length + matchResult.length === 0); - this.spliter.setVisible(BI.isNotEmptyArray(matchResult) && BI.isNotEmptyArray(searchResult)); - this.matcher.populate(matchResult, keyword); - this.searcher.populate(searchResult, keyword); - }, + populate(searchResult, matchResult, keyword) { + searchResult || (searchResult = []); + matchResult || (matchResult = []); + this.setTipVisible(searchResult.length + matchResult.length === 0); + this.spliter.setVisible(BI.isNotEmptyArray(matchResult) && BI.isNotEmptyArray(searchResult)); + this.matcher.populate(matchResult, keyword); + this.searcher.populate(searchResult, keyword); + } - empty: function () { - this.searcher.empty(); - this.matcher.empty(); - }, + empty() { + this.searcher.empty(); + this.matcher.empty(); + } - hasMatched: function () { - return this.matcher.getAllButtons().length > 0; - }, -}); -BI.SearcherView.EVENT_CHANGE = "EVENT_CHANGE"; + hasMatched() { + return this.matcher.getAllButtons().length > 0; + } +} -BI.shortcut("bi.searcher_view", BI.SearcherView); +BI.extend(BI, { SearcherView }); From 3c98a6b4b8727586ddaa99565f775921e3d5478e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joker=2EWang-=E7=8E=8B=E9=A1=BA?= Date: Thu, 29 Dec 2022 14:00:25 +0800 Subject: [PATCH 8/9] =?UTF-8?q?KERNEL-13841=20refactor:base=E6=96=87?= =?UTF-8?q?=E4=BB=B6es6=E5=8C=96=E4=B8=8Eimport=E5=BC=95=E5=85=A5=E9=80=82?= =?UTF-8?q?=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/grid/grid.js | 305 ++++++++++++------------ src/base/index.js | 42 ++++ src/base/layer/layer.drawer.js | 6 +- src/base/layer/layer.popover.js | 9 +- src/base/layer/layer.popup.js | 14 +- src/base/layer/layer.searcher.js | 7 +- src/base/list/listview.js | 250 ++++++++++---------- src/base/list/virtualgrouplist.js | 353 ++++++++++++++-------------- src/base/list/virtuallist.js | 357 +++++++++++++++-------------- src/base/pager/pager.js | 151 ++++++------ src/base/single/a/a.js | 7 +- src/base/single/tip/0.tip.js | 5 +- src/base/single/tip/tip.toast.js | 6 +- src/base/single/tip/tip.tooltip.js | 7 +- 14 files changed, 782 insertions(+), 737 deletions(-) diff --git a/src/base/grid/grid.js b/src/base/grid/grid.js index 944a82d4a..4ee6e6332 100644 --- a/src/base/grid/grid.js +++ b/src/base/grid/grid.js @@ -5,9 +5,11 @@ * @class BI.GridView * @extends BI.Widget */ -BI.GridView = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.GridView.superclass._defaultConfig.apply(this, arguments), { +import { Widget, shortcut } from "../../core"; +@shortcut() +export default class GridView extends Widget { + _defaultConfig() { + return BI.extend(super._defaultConfig(arguments), { baseCls: "bi-grid-view", // width: 400, //必设 // height: 300, //必设 @@ -28,50 +30,54 @@ BI.GridView = BI.inherit(BI.Widget, { scrollLeft: 0, scrollTop: 0, items: [], - itemFormatter: function (item, row, col) { + itemFormatter: (item, row, col)=> { return item; }, }); - }, + } - render: function () { - var self = this, o = this.options; + static xtype = "bi.grid_view"; + static EVENT_SCROLL = "EVENT_SCROLL"; + + render() { + const o = this.options; + const { overflowX, overflowY, el } = this.options; this.renderedCells = []; this.renderedKeys = []; this.renderRange = {}; this._scrollLock = false; - this._debounceRelease = BI.debounce(function () { - self._scrollLock = false; + this._debounceRelease = BI.debounce(()=> { + this._scrollLock = false; }, 1000 / 60); this.container = BI._lazyCreateWidget({ type: "bi.absolute", }); - this.element.scroll(function () { - if (self._scrollLock === true) { + this.element.scroll(()=> { + if (this._scrollLock === true) { return; } - o.scrollLeft = self.element.scrollLeft(); - o.scrollTop = self.element.scrollTop(); - self._calculateChildrenToRender(); - self.fireEvent(BI.GridView.EVENT_SCROLL, { + o.scrollLeft = this.element.scrollLeft(); + o.scrollTop = this.element.scrollTop(); + this._calculateChildrenToRender(); + this.fireEvent(GridView.EVENT_SCROLL, { scrollLeft: o.scrollLeft, scrollTop: o.scrollTop, }); }); // 兼容一下 - var scrollable = o.scrollable, scrollx = o.scrollx, scrolly = o.scrolly; - if (o.overflowX === false) { - if (o.overflowY === false) { + let scrollable = o.scrollable, scrollx = o.scrollx, scrolly = o.scrolly; + if (overflowX === false) { + if (overflowY === false) { scrollable = false; } else { scrollable = "y"; } } else { - if (o.overflowY === false) { + if (overflowY === false) { scrollable = "x"; } } - BI._lazyCreateWidget(o.el, { + BI._lazyCreateWidget(el, { type: "bi.vertical", element: this, scrollable: scrollable, @@ -79,111 +85,113 @@ BI.GridView = BI.inherit(BI.Widget, { scrollx: scrollx, items: [this.container], }); - o.items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); + o.items = BI.isFunction(o.items) ? this.__watch(o.items, (context, newValue)=> { + this.populate(newValue); }) : o.items; if (o.items.length > 0) { this._calculateSizeAndPositionData(); this._populate(); } - }, + } // mounted之后绑定事件 - mounted: function () { - var o = this.options; - if (o.scrollLeft !== 0 || o.scrollTop !== 0) { - this.element.scrollTop(o.scrollTop); - this.element.scrollLeft(o.scrollLeft); + mounted() { + const { scrollLeft, scrollTop } = this.options; + if (scrollLeft !== 0 || scrollTop !== 0) { + this.element.scrollTop(scrollTop); + this.element.scrollLeft(scrollLeft); } - }, + } - destroyed: function () { - BI.each(this.renderedCells, function(i, cell) { + destroyed() { + BI.each(this.renderedCells, (i, cell)=> { cell.el._destroy(); }) - }, + } - _calculateSizeAndPositionData: function () { - var o = this.options; + _calculateSizeAndPositionData() { + const { columnCount, items, rowCount, columnWidthGetter, estimatedColumnSize, rowHeightGetter, estimatedRowSize } = this.options; this.rowCount = 0; this.columnCount = 0; - if (BI.isNumber(o.columnCount)) { - this.columnCount = o.columnCount; - } else if (o.items.length > 0) { - this.columnCount = o.items[0].length; + if (BI.isNumber(columnCount)) { + this.columnCount = columnCount; + } else if (items.length > 0) { + this.columnCount = items[0].length; } - if (BI.isNumber(o.rowCount)) { - this.rowCount = o.rowCount; + if (BI.isNumber(rowCount)) { + this.rowCount = rowCount; } else { - this.rowCount = o.items.length; + this.rowCount = items.length; } - this._columnSizeAndPositionManager = new BI.ScalingCellSizeAndPositionManager(this.columnCount, o.columnWidthGetter, o.estimatedColumnSize); - this._rowSizeAndPositionManager = new BI.ScalingCellSizeAndPositionManager(this.rowCount, o.rowHeightGetter, o.estimatedRowSize); - }, + this._columnSizeAndPositionManager = new BI.ScalingCellSizeAndPositionManager(this.columnCount, columnWidthGetter, estimatedColumnSize); + this._rowSizeAndPositionManager = new BI.ScalingCellSizeAndPositionManager(this.rowCount, rowHeightGetter, estimatedRowSize); + } - _getOverscanIndices: function (cellCount, overscanCellsCount, startIndex, stopIndex) { + _getOverscanIndices(cellCount, overscanCellsCount, startIndex, stopIndex) { return { overscanStartIndex: Math.max(0, startIndex - overscanCellsCount), overscanStopIndex: Math.min(cellCount - 1, stopIndex + overscanCellsCount), }; - }, + } + + _calculateChildrenToRender() { + const o = this.options; - _calculateChildrenToRender: function () { - var self = this, o = this.options; + const { itemFormatter, items } = this.options; - var width = o.width, height = o.height, scrollLeft = BI.clamp(o.scrollLeft, 0, this._getMaxScrollLeft()), + const width = o.width, height = o.height, scrollLeft = BI.clamp(o.scrollLeft, 0, this._getMaxScrollLeft()), scrollTop = BI.clamp(o.scrollTop, 0, this._getMaxScrollTop()), overscanColumnCount = o.overscanColumnCount, overscanRowCount = o.overscanRowCount; if (height > 0 && width > 0) { - var visibleColumnIndices = this._columnSizeAndPositionManager.getVisibleCellRange(width, scrollLeft); - var visibleRowIndices = this._rowSizeAndPositionManager.getVisibleCellRange(height, scrollTop); + const visibleColumnIndices = this._columnSizeAndPositionManager.getVisibleCellRange(width, scrollLeft); + const visibleRowIndices = this._rowSizeAndPositionManager.getVisibleCellRange(height, scrollTop); - var renderedCells = [], renderedKeys = {}, renderedWidgets = {}; + const renderedCells = [], renderedKeys = {}, renderedWidgets = {}; + let minX = this._getMaxScrollLeft(), minY = this._getMaxScrollTop(), maxX = 0, maxY = 0; // 没有可见的单元格就干掉所有渲染过的 if (!BI.isEmpty(visibleColumnIndices) && !BI.isEmpty(visibleRowIndices)) { - var horizontalOffsetAdjustment = this._columnSizeAndPositionManager.getOffsetAdjustment(width, scrollLeft); - var verticalOffsetAdjustment = this._rowSizeAndPositionManager.getOffsetAdjustment(height, scrollTop); + const horizontalOffsetAdjustment = this._columnSizeAndPositionManager.getOffsetAdjustment(width, scrollLeft); + const verticalOffsetAdjustment = this._rowSizeAndPositionManager.getOffsetAdjustment(height, scrollTop); this._renderedColumnStartIndex = visibleColumnIndices.start; this._renderedColumnStopIndex = visibleColumnIndices.stop; this._renderedRowStartIndex = visibleRowIndices.start; this._renderedRowStopIndex = visibleRowIndices.stop; - var overscanColumnIndices = this._getOverscanIndices(this.columnCount, overscanColumnCount, this._renderedColumnStartIndex, this._renderedColumnStopIndex); + const overscanColumnIndices = this._getOverscanIndices(this.columnCount, overscanColumnCount, this._renderedColumnStartIndex, this._renderedColumnStopIndex); - var overscanRowIndices = this._getOverscanIndices(this.rowCount, overscanRowCount, this._renderedRowStartIndex, this._renderedRowStopIndex); + const overscanRowIndices = this._getOverscanIndices(this.rowCount, overscanRowCount, this._renderedRowStartIndex, this._renderedRowStopIndex); - var columnStartIndex = overscanColumnIndices.overscanStartIndex; - var columnStopIndex = overscanColumnIndices.overscanStopIndex; - var rowStartIndex = overscanRowIndices.overscanStartIndex; - var rowStopIndex = overscanRowIndices.overscanStopIndex; + const columnStartIndex = overscanColumnIndices.overscanStartIndex; + const columnStopIndex = overscanColumnIndices.overscanStopIndex; + const rowStartIndex = overscanRowIndices.overscanStartIndex; + const rowStopIndex = overscanRowIndices.overscanStopIndex; // 算区间size - var minRowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowStartIndex); - var minColumnDatum = this._columnSizeAndPositionManager.getSizeAndPositionOfCell(columnStartIndex); - var maxRowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowStopIndex); - var maxColumnDatum = this._columnSizeAndPositionManager.getSizeAndPositionOfCell(columnStopIndex); - var top = minRowDatum.offset + verticalOffsetAdjustment; - var left = minColumnDatum.offset + horizontalOffsetAdjustment; - var bottom = maxRowDatum.offset + verticalOffsetAdjustment + maxRowDatum.size; - var right = maxColumnDatum.offset + horizontalOffsetAdjustment + maxColumnDatum.size; + const minRowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowStartIndex); + const minColumnDatum = this._columnSizeAndPositionManager.getSizeAndPositionOfCell(columnStartIndex); + const maxRowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowStopIndex); + const maxColumnDatum = this._columnSizeAndPositionManager.getSizeAndPositionOfCell(columnStopIndex); + const top = minRowDatum.offset + verticalOffsetAdjustment; + const left = minColumnDatum.offset + horizontalOffsetAdjustment; + const bottom = maxRowDatum.offset + verticalOffsetAdjustment + maxRowDatum.size; + const right = maxColumnDatum.offset + horizontalOffsetAdjustment + maxColumnDatum.size; // 如果滚动的区间并没有超出渲染的范围 if (top >= this.renderRange.minY && bottom <= this.renderRange.maxY && left >= this.renderRange.minX && right <= this.renderRange.maxX) { return; } - var minX = this._getMaxScrollLeft(), minY = this._getMaxScrollTop(), maxX = 0, maxY = 0; - var count = 0; - for (var rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) { - var rowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowIndex); + let count = 0; + for (let rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) { + const rowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowIndex); - for (var columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) { - var key = rowIndex + "-" + columnIndex; - var columnDatum = this._columnSizeAndPositionManager.getSizeAndPositionOfCell(columnIndex); + for (let columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) { + const key = rowIndex + "-" + columnIndex; + const columnDatum = this._columnSizeAndPositionManager.getSizeAndPositionOfCell(columnIndex); - var index = this.renderedKeys[key] && this.renderedKeys[key][2]; - var child; + const index = this.renderedKeys[key] && this.renderedKeys[key][2]; + let child; if (index >= 0) { this.renderedCells[index].el.setWidth(columnDatum.size); this.renderedCells[index].el.setHeight(rowDatum.size); @@ -193,7 +201,7 @@ BI.GridView = BI.inherit(BI.Widget, { child = this.renderedCells[index].el; renderedCells.push(this.renderedCells[index]); } else { - var item = o.itemFormatter(o.items[rowIndex][columnIndex], rowIndex, columnIndex); + const item = itemFormatter(items[rowIndex][columnIndex], rowIndex, columnIndex); child = BI._lazyCreateWidget(BI.extend({ type: "bi.label", width: columnDatum.size, @@ -226,9 +234,9 @@ BI.GridView = BI.inherit(BI.Widget, { } } // 已存在的， 需要添加的和需要删除的 - var existSet = {}, addSet = {}, deleteArray = []; - BI.each(renderedKeys, function (i, key) { - if (self.renderedKeys[i]) { + const existSet = {}, addSet = {}, deleteArray = []; + BI.each(renderedKeys, (i, key)=> { + if (this.renderedKeys[i]) { existSet[i] = key; } else { addSet[i] = key; @@ -243,11 +251,11 @@ BI.GridView = BI.inherit(BI.Widget, { } deleteArray.push(key[2]); }); - BI.each(deleteArray, function (i, index) { + BI.each(deleteArray, (i, index)=> { // 性能优化，不调用destroy方法防止触发destroy事件 - self.renderedCells[index].el._destroy(); + this.renderedCells[index].el._destroy(); }); - var addedItems = []; + const addedItems = []; BI.each(addSet, function (index, key) { addedItems.push(renderedCells[key[2]]); }); @@ -260,13 +268,12 @@ BI.GridView = BI.inherit(BI.Widget, { this.renderedKeys = renderedKeys; this.renderRange = { minX: minX, minY: minY, maxX: maxX, maxY: maxY }; } - }, + } - _isOverflowX: function () { - var o = this.options; + _isOverflowX() { + const { scrollable, scrollx, overflowX } = this.options; // 兼容一下 - var scrollable = o.scrollable, scrollx = o.scrollx; - if (o.overflowX === false) { + if (overflowX === false) { return false; } if (scrollx) { @@ -276,13 +283,13 @@ BI.GridView = BI.inherit(BI.Widget, { return true; } return false; - }, + } - _isOverflowY: function () { - var o = this.options; + _isOverflowY() { + const { scrollable, scrolly, overflowX } = this.options; // 兼容一下 - var scrollable = o.scrollable, scrolly = o.scrolly; - if (o.overflowX === false) { + // var scrollable = o.scrollable, scrolly = o.scrolly; + if (overflowX === false) { return false; } if (scrolly) { @@ -292,26 +299,26 @@ BI.GridView = BI.inherit(BI.Widget, { return true; } return false; - }, + } - _getMaxScrollLeft: function () { + _getMaxScrollLeft() { return Math.max(0, this._getContainerWidth() - this.options.width + (this._isOverflowX() ? BI.DOM.getScrollWidth() : 0)); - }, + } - _getMaxScrollTop: function () { + _getMaxScrollTop() { return Math.max(0, this._getContainerHeight() - this.options.height + (this._isOverflowY() ? BI.DOM.getScrollWidth() : 0)); - }, + } - _getContainerWidth: function () { + _getContainerWidth() { return this.columnCount * this.options.estimatedColumnSize; - }, + } - _getContainerHeight: function () { + _getContainerHeight() { return this.rowCount * this.options.estimatedRowSize; - }, + } - _populate: function (items) { - var o = this.options; + _populate(items) { + const { scrollTop, scrollLeft } = this.options; this._reRange(); if (items && items !== this.options.items) { this.options.items = items; @@ -323,14 +330,14 @@ BI.GridView = BI.inherit(BI.Widget, { // 元素未挂载时不能设置scrollTop this._debounceRelease(); try { - this.element.scrollTop(o.scrollTop); - this.element.scrollLeft(o.scrollLeft); + this.element.scrollTop(scrollTop); + this.element.scrollLeft(scrollLeft); } catch (e) { } this._calculateChildrenToRender(); - }, + } - setScrollLeft: function (scrollLeft) { + setScrollLeft(scrollLeft) { if (this.options.scrollLeft === scrollLeft) { return; } @@ -339,9 +346,9 @@ BI.GridView = BI.inherit(BI.Widget, { this._debounceRelease(); this.element.scrollLeft(this.options.scrollLeft); this._calculateChildrenToRender(); - }, + } - setScrollTop: function (scrollTop) { + setScrollTop(scrollTop) { if (this.options.scrollTop === scrollTop) { return; } @@ -350,72 +357,68 @@ BI.GridView = BI.inherit(BI.Widget, { this._debounceRelease(); this.element.scrollTop(this.options.scrollTop); this._calculateChildrenToRender(); - }, + } - setColumnCount: function (columnCount) { + setColumnCount(columnCount) { this.options.columnCount = columnCount; - }, + } - setRowCount: function (rowCount) { + setRowCount(rowCount) { this.options.rowCount = rowCount; - }, + } - setOverflowX: function (b) { - var self = this; + setOverflowX(b) { if (this.options.overflowX !== !!b) { this.options.overflowX = !!b; - BI.nextTick(function () { - self.element.css({ overflowX: b ? "auto" : "hidden" }); + BI.nextTick(()=> { + this.element.css({ overflowX: b ? "auto" : "hidden" }); }); } - }, + } - setOverflowY: function (b) { - var self = this; + setOverflowY(b) { if (this.options.overflowY !== !!b) { this.options.overflowY = !!b; - BI.nextTick(function () { - self.element.css({ overflowY: b ? "auto" : "hidden" }); + BI.nextTick(()=> { + this.element.css({ overflowY: b ? "auto" : "hidden" }); }); } - }, + } - getScrollLeft: function () { + getScrollLeft() { return this.options.scrollLeft; - }, - - getScrollTop: function () { + } + getScrollTop() { return this.options.scrollTop; - }, + } - getMaxScrollLeft: function () { + getMaxScrollLeft() { return this._getMaxScrollLeft(); - }, + } - getMaxScrollTop: function () { + getMaxScrollTop() { return this._getMaxScrollTop(); - }, + } - setEstimatedColumnSize: function (width) { + setEstimatedColumnSize(width) { this.options.estimatedColumnSize = width; - }, + } - setEstimatedRowSize: function (height) { + setEstimatedRowSize(height) { this.options.estimatedRowSize = height; - }, - + } // 重新计算children - _reRange: function () { + _reRange() { this.renderRange = {}; - }, + } - _clearChildren: function () { + _clearChildren() { this.container._children = {}; this.container.attr("items", []); - }, + } - restore: function () { - BI.each(this.renderedCells, function (i, cell) { + restore() { + BI.each(this.renderedCells, (i, cell)=> { cell.el._destroy(); }); this._clearChildren(); @@ -423,14 +426,12 @@ BI.GridView = BI.inherit(BI.Widget, { this.renderedKeys = []; this.renderRange = {}; this._scrollLock = false; - }, + } - populate: function (items) { + populate(items) { if (items && items !== this.options.items) { this.restore(); } this._populate(items); - }, -}); -BI.GridView.EVENT_SCROLL = "EVENT_SCROLL"; -BI.shortcut("bi.grid_view", BI.GridView); + } +} diff --git a/src/base/index.js b/src/base/index.js index b3a77f840..b5f9c4faa 100644 --- a/src/base/index.js +++ b/src/base/index.js @@ -1,15 +1,57 @@ import Pane from "./1.pane"; import Single from "./single/0.single"; import Text from "./single/1.text"; +import A from "./single/a/a"; +import Tip from "./single/tip/0.tip"; +import Toast from "./single/tip/tip.toast"; +import Tooltip from "./single/tip/tip.tooltip"; +import Drawer from "./layer/layer.drawer"; +import { Popover, BarPopover } from "./layer/layer.popover"; +import PopupView from "./layer/layer.popup"; +import SearcherView from "./layer/layer.searcher"; +import ListView from "./list/listview"; +import VirtualGroupList from "./list/virtualgrouplist"; +import VirtualList from "./list/virtuallist"; +import GridView from "./grid/grid"; +import Pager from "./pager/pager"; + BI.extend(BI, { Pane, Single, Text, + A, + Tip, + Toast, + Tooltip, + Drawer, + Popover, + BarPopover, + PopupView, + SearcherView, + ListView, + VirtualGroupList, + VirtualList, + GridView, + Pager, }); export { Pane, Single, Text, + A, + Tip, + Toast, + Tooltip, + Drawer, + Popover, + BarPopover, + PopupView, + SearcherView, + ListView, + VirtualGroupList, + VirtualList, + GridView, + Pager, } \ No newline at end of file diff --git a/src/base/layer/layer.drawer.js b/src/base/layer/layer.drawer.js index 1c2e26a24..5f0efd278 100644 --- a/src/base/layer/layer.drawer.js +++ b/src/base/layer/layer.drawer.js @@ -4,9 +4,9 @@ * @extends BI.Widget */ -import { shortcut } from "../../core/decorator"; +import { Widget, shortcut } from "../../core"; @shortcut() -export class Drawer extends BI.Widget { +export default class Drawer extends Widget { SIZE = { SMALL: "small", NORMAL: "normal", @@ -234,4 +234,4 @@ export class Drawer extends BI.Widget { } } -BI.extend(BI, { Drawer }); + diff --git a/src/base/layer/layer.popover.js b/src/base/layer/layer.popover.js index 802bd73bd..64f457d0b 100644 --- a/src/base/layer/layer.popover.js +++ b/src/base/layer/layer.popover.js @@ -4,9 +4,9 @@ * @extends BI.Widget */ -import { shortcut } from "../../core/decorator"; +import { Widget, shortcut } from "../../core"; @shortcut() -export class Popover extends BI.Widget { +export class Popover extends Widget { _constant = { SIZE: { SMALL: "small", @@ -238,10 +238,8 @@ export class Popover extends BI.Widget { } } -BI.extend(BI, { Popover }); - @shortcut() -export class BarPopover extends BI.Popover { +export class BarPopover extends Popover { static xtype = "bi.bar_popover"; _defaultConfig() { @@ -278,5 +276,4 @@ export class BarPopover extends BI.Popover { } } -BI.extend(BI, { BarPopover }); diff --git a/src/base/layer/layer.popup.js b/src/base/layer/layer.popup.js index 43f8c4908..93d7bee37 100644 --- a/src/base/layer/layer.popup.js +++ b/src/base/layer/layer.popup.js @@ -4,9 +4,9 @@ * @extends BI.Widget */ -import { shortcut } from "../../core/decorator"; +import { Widget, shortcut } from "../../core"; @shortcut() -export class PopupView extends BI.Widget { +export default class PopupView extends Widget { _const = { TRIANGLE_LENGTH: 12, } @@ -80,13 +80,10 @@ export class PopupView extends BI.Widget { this.view = this._createView(); this.toolbar = this._createToolBar(); - const self = this; - // TODO:这里需要调整转化方式,仍然采用原来的self - this.view.on(BI.Controller.EVENT_CHANGE, function (type) { - // 箭头函数没有自己的arguments，只会获取外层的，若要获取自己的，需通过剩余参数写法，但这样得到的仍然不是类数组 - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.view.on(BI.Controller.EVENT_CHANGE, (type, ...args)=> { + this.fireEvent.apply(this, [BI.Controller.EVENT_CHANGE, type, args]); if (type === BI.Events.CLICK) { - self.fireEvent(PopupView.EVENT_CHANGE); + this.fireEvent(PopupView.EVENT_CHANGE); } }); @@ -434,4 +431,3 @@ export class PopupView extends BI.Widget { } -BI.extend(BI, { PopupView }); diff --git a/src/base/layer/layer.searcher.js b/src/base/layer/layer.searcher.js index d80ffd90c..8b8d037f7 100644 --- a/src/base/layer/layer.searcher.js +++ b/src/base/layer/layer.searcher.js @@ -6,9 +6,11 @@ * @extends BI.Pane */ -import { shortcut } from "../../core/decorator"; +import { shortcut } from "../../core"; +import Pane from "../1.pane"; + @shortcut() -export class SearcherView extends BI.Pane { +export default class SearcherView extends Pane { static xtype = "bi.searcher_view"; static EVENT_CHANGE = "EVENT_CHANGE"; @@ -142,4 +144,3 @@ export class SearcherView extends BI.Pane { } } -BI.extend(BI, { SearcherView }); diff --git a/src/base/list/listview.js b/src/base/list/listview.js index 13a8895c7..03da49d3b 100644 --- a/src/base/list/listview.js +++ b/src/base/list/listview.js @@ -5,141 +5,145 @@ * @class BI.ListView * @extends BI.Widget */ -BI.ListView = BI.inherit(BI.Widget, { - props: function () { - return { - baseCls: "bi-list-view", - overscanHeight: 100, - blockSize: 10, - scrollTop: 0, - el: {}, - items: [], - itemFormatter: function (item, index) { - return item; - }, - }; - }, - - init: function () { - this.renderedIndex = -1; - this.cache = {}; - }, +import { Widget, shortcut } from "../../core"; +@shortcut() +export default class ListView extends Widget { + props() { + return { + baseCls: "bi-list-view", + overscanHeight: 100, + blockSize: 10, + scrollTop: 0, + el: {}, + items: [], + itemFormatter: (item, index)=> { + return item; + }, + }; + } - render: function () { - var self = this, o = this.options; + init() { + this.renderedIndex = -1; + this.cache = {}; + } - return { - type: "bi.vertical", - items: [BI.extend({ - type: "bi.vertical", - scrolly: false, - ref: function (_ref) { - self.container = _ref; - }, - }, o.el)], - element: this, - }; - }, + static xtype = "bi.list_view"; - // mounted之后绑定事件 - mounted: function () { - var self = this, o = this.options; - o.items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); - }) : o.items; - this._populate(); - this.element.scroll(function (e) { - o.scrollTop = self.element.scrollTop(); - self._calculateBlocksToRender(); - }); - var lastWidth = this.element.width(), - lastHeight = this.element.height(); - BI.ResizeDetector.addResizeListener(this, function () { - if (!self.element.is(":visible")) { - return; - } - var width = self.element.width(), - height = self.element.height(); - if (width !== lastWidth || height !== lastHeight) { - lastWidth = width; - lastHeight = height; - self._calculateBlocksToRender(); - } - }); - }, + render() { + const { el } = this.options; - _renderMoreIf: function () { - var self = this, o = this.options; - var height = this.element.height(); - var minContentHeight = o.scrollTop + height + o.overscanHeight; - var index = (this.cache[this.renderedIndex] && (this.cache[this.renderedIndex].index + o.blockSize)) || 0; - var cnt = this.renderedIndex + 1; - var lastHeight; + return { + type: "bi.vertical", + items: [BI.extend({ + type: "bi.vertical", + scrolly: false, + ref: (_ref)=> { + this.container = _ref; + }, + }, el)], + element: this, + }; + } - function getElementHeight() { - return self.container.element.height(); + // mounted之后绑定事件 + mounted() { + const o = this.options; + // 这里无法进行结构，因为存在赋值操作，如果使用结构则this.options的值不会跟随变化 + o.items = BI.isFunction(o.items) ? this.__watch(o.items, (context, newValue)=> { + this.populate(newValue); + }) : o.items; + this._populate(); + this.element.scroll((e)=> { + o.scrollTop = this.element.scrollTop(); + this._calculateBlocksToRender(); + }); + let lastWidth = this.element.width(), + lastHeight = this.element.height(); + BI.ResizeDetector.addResizeListener(this, ()=> { + if (!this.element.is(":visible")) { + return; + } + const width = this.element.width(), + height = this.element.height(); + if (width !== lastWidth || height !== lastHeight) { + lastWidth = width; + lastHeight = height; + this._calculateBlocksToRender(); } + }); + } + + _renderMoreIf() { + const { scrollTop, overscanHeight, blockSize, items, itemFormatter } = this.options; + const height = this.element.height(); + const minContentHeight = scrollTop + height + overscanHeight; + let index = (this.cache[this.renderedIndex] && (this.cache[this.renderedIndex].index + blockSize)) || 0; + let cnt = this.renderedIndex + 1; + let lastHeight; + + const getElementHeight = ()=> { + return this.container.element.height(); + } + lastHeight = getElementHeight(); + while ((lastHeight) < minContentHeight && index < items.length) { + const itemsArr = items.slice(index, index + blockSize); + this.container.addItems(itemsArr.map((item, i)=> { + return itemFormatter(item, index + i); + }), this); + const addedHeight = getElementHeight() - lastHeight; + this.cache[cnt] = { + index: index, + scrollTop: lastHeight, + height: addedHeight, + }; + this.renderedIndex = cnt; + cnt++; + index += blockSize; lastHeight = getElementHeight(); - while ((lastHeight) < minContentHeight && index < o.items.length) { - var items = o.items.slice(index, index + o.blockSize); - this.container.addItems(items.map(function (item, i) { - return o.itemFormatter(item, index + i); - }), this); - var addedHeight = getElementHeight() - lastHeight; - this.cache[cnt] = { - index: index, - scrollTop: lastHeight, - height: addedHeight, - }; - this.renderedIndex = cnt; - cnt++; - index += o.blockSize; - lastHeight = getElementHeight(); - } - }, + } + } + _calculateBlocksToRender() { + // BI-115750 不可见状态下依赖元素实际尺寸构造的线段树会分段错误，所以不进行后续计算和线段树的初始化。 + // 这样从不可见状态变为可见状态能够重新触发线段树初始化 + if (!this.element.is(":visible")) { + return; + } + this._renderMoreIf(); + } - _calculateBlocksToRender: function () { - // BI-115750 不可见状态下依赖元素实际尺寸构造的线段树会分段错误，所以不进行后续计算和线段树的初始化。 - // 这样从不可见状态变为可见状态能够重新触发线段树初始化 - if (!this.element.is(":visible")) { - return; - } - this._renderMoreIf(); - }, + _populate(items) { + const { scrollTop } = this.options; + if (items && this.options.items !== items) { + this.options.items = items; + } + this._calculateBlocksToRender(); + this.element.scrollTop(scrollTop); + } - _populate: function (items) { - var o = this.options; - if (items && this.options.items !== items) { - this.options.items = items; - } - this._calculateBlocksToRender(); - this.element.scrollTop(o.scrollTop); - }, + restore() { + this.renderedIndex = -1; + this.container.empty(); + this.cache = {}; + } - restore: function () { - this.renderedIndex = -1; - this.container.empty(); - this.cache = {}; - }, + scrollTo(scrollTop) { + this.options.scrollTop = scrollTop; + this._calculateBlocksToRender(); + this.element.scrollTop(scrollTop); + } - scrollTo: function (scrollTop) { - this.options.scrollTop = scrollTop; - this._calculateBlocksToRender(); - this.element.scrollTop(scrollTop); - }, + populate(items) { + if (items && this.options.items !== items) { + this.restore(); + } + this._populate(items); + } - populate: function (items) { - if (items && this.options.items !== items) { - this.restore(); - } - this._populate(items); - }, + beforeDestroy() { + BI.ResizeDetector.removeResizeListener(this); + this.restore(); + } - beforeDestroy: function () { - BI.ResizeDetector.removeResizeListener(this); - this.restore(); - }, -}); -BI.shortcut("bi.list_view", BI.ListView); +} diff --git a/src/base/list/virtualgrouplist.js b/src/base/list/virtualgrouplist.js index 95b5276bd..a9b113833 100644 --- a/src/base/list/virtualgrouplist.js +++ b/src/base/list/virtualgrouplist.js @@ -5,194 +5,197 @@ * @class BI.VirtualList * @extends BI.Widget */ -BI.VirtualGroupList = BI.inherit(BI.Widget, { - props: function () { - return { - baseCls: "bi-virtual-group-list", - overscanHeight: 100, - blockSize: 10, - scrollTop: 0, - rowHeight: "auto", - items: [], - el: {}, - itemFormatter: function (item, index) { - return item; - }, - }; - }, - init: function () { - this.renderedIndex = -1; - }, +import { Widget, shortcut } from "../../core"; +@shortcut() +export default class VirtualGroupList extends Widget { + props() { + return { + baseCls: "bi-virtual-group-list", + overscanHeight: 100, + blockSize: 10, + scrollTop: 0, + rowHeight: "auto", + items: [], + el: {}, + itemFormatter: (item, index)=> { + return item; + }, + }; + } - render: function () { - var self = this, o = this.options; + init() { + this.renderedIndex = -1; + } - return { - type: "bi.vertical", - items: [{ - type: "bi.layout", - ref: function () { - self.topBlank = this; - }, - }, { - type: "bi.virtual_group", - height: o.rowHeight * o.items.length, - ref: function () { - self.container = this; - }, - layouts: [BI.extend({ - type: "bi.vertical", - scrolly: false, - }, o.el)], - }, { - type: "bi.layout", - ref: function () { - self.bottomBlank = this; - }, - }], - element: this, - }; - }, + static xtype = "bi.virtual_group_list"; - // mounted之后绑定事件 - mounted: function () { - var self = this, o = this.options; - o.items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); - }) : o.items; - this._populate(); - this.ticking = false; - this.element.scroll(function () { - o.scrollTop = self.element.scrollTop(); - if (!self.ticking) { - requestAnimationFrame(function () { - self._calculateBlocksToRender(); - self.ticking = false; - }); - self.ticking = true; - } - }); - BI.ResizeDetector.addResizeListener(this, function () { - if (self.element.is(":visible")) { - self._calculateBlocksToRender(); - } - }); - }, + render() { + const { rowHeight, items, el } = this.options; - _isAutoHeight: function () { - return !BI.isNumber(this.options.rowHeight); - }, - - _renderMoreIf: function () { - var self = this, o = this.options; - var height = this.element.height(); - var minContentHeight = o.scrollTop + height + o.overscanHeight; - var index = (this.renderedIndex + 1) * o.blockSize, cnt = this.renderedIndex + 1; - var lastHeight; - function getElementHeight () { - return self.container.element.height() + self.topBlank.element.height() + self.bottomBlank.element.height(); + return { + type: "bi.vertical", + items: [{ + type: "bi.layout", + ref: ()=> { + this.topBlank = this; + }, + }, { + type: "bi.virtual_group", + height: rowHeight * items.length, + ref: ()=> { + this.container = this; + }, + layouts: [BI.extend({ + type: "bi.vertical", + scrolly: false, + }, el)], + }, { + type: "bi.layout", + ref: ()=> { + this.bottomBlank = this; + }, + }], + element: this, + }; + } + // mounted之后绑定事件 + mounted() { + // 这里无法进行结构，因为存在赋值操作，如果使用结构则this.options的值不会跟随变化 + const o = this.options; + o.items = BI.isFunction(o.items) ? this.__watch(o.items, (context, newValue)=> { + this.populate(newValue); + }) : o.items; + this._populate(); + this.ticking = false; + this.element.scroll(()=> { + o.scrollTop = this.element.scrollTop(); + if (!this.ticking) { + requestAnimationFrame(function () { + this._calculateBlocksToRender(); + this.ticking = false; + }); + this.ticking = true; } - lastHeight = this.renderedIndex === -1 ? 0 : getElementHeight(); - while (lastHeight < minContentHeight && index < o.items.length) { - var items = o.items.slice(index, index + o.blockSize); - this.container[self.renderedIndex === -1 ? "populate" : "addItems"](items.map(function (item, i) { - return o.itemFormatter(item, index + i); - }), this); - var elementHeight = getElementHeight(); - var addedHeight = elementHeight - lastHeight; - this.tree.set(cnt, addedHeight); - this.renderedIndex = cnt; - cnt++; - index += o.blockSize; - lastHeight = this.renderedIndex === -1 ? 0 : elementHeight; + }); + BI.ResizeDetector.addResizeListener(this, ()=> { + if (this.element.is(":visible")) { + this._calculateBlocksToRender(); } - }, + }); + } - _calculateBlocksToRender: function () { - // BI-115750 不可见状态下依赖元素实际尺寸构造的线段树会分段错误，所以不进行后续计算和线段树的初始化。 - // 这样从不可见状态变为可见状态能够重新触发线段树初始化 - if (!this.element.is(":visible")) { - return; - } - var o = this.options; - this._isAutoHeight() && this._renderMoreIf(); - var height = this.element.height(); - var minContentHeightFrom = o.scrollTop - o.overscanHeight; - var minContentHeightTo = o.scrollTop + height + o.overscanHeight; - var start = this.tree.greatestLowerBound(minContentHeightFrom); - var end = this.tree.leastUpperBound(minContentHeightTo); - var items = []; - var topHeight = this.tree.sumTo(Math.max(-1, start - 1)); - this.topBlank.setHeight(topHeight + "px"); - if (this._isAutoHeight()) { - for (var i = (start < 0 ? 0 : start); i <= end && i <= this.renderedIndex; i++) { - var index = i * o.blockSize; - for (var j = index; j < index + o.blockSize && j < o.items.length; j++) { - items.push(o.items[j]); - } - } - this.bottomBlank.setHeight(this.tree.sumTo(this.renderedIndex) - this.tree.sumTo(Math.min(end, this.renderedIndex)) + "px"); - this.container.populate(items.map(function (item, i) { - return o.itemFormatter(item, (start < 0 ? 0 : start) * o.blockSize + i); - })); - } else { - for (var i = (start < 0 ? 0 : start); i <= end; i++) { - var index = i * o.blockSize; - for (var j = index; j < index + o.blockSize && j < o.items.length; j++) { - items.push(o.items[j]); - } - } - this.container.element.height(o.rowHeight * o.items.length - topHeight); - this.container.populate(items.map(function (item, i) { - return o.itemFormatter(item, (start < 0 ? 0 : start) * o.blockSize + i); - })); - } - }, - - _populate: function (items) { - var o = this.options; - if (items && this.options.items !== items) { - // 重新populate一组items,需要重新对线段树分块 - this.options.items = items; - this._restore(); - } - this.tree = BI.PrefixIntervalTree.uniform(Math.ceil(o.items.length / o.blockSize), this._isAutoHeight() ? 0 : o.rowHeight * o.blockSize); + _isAutoHeight() { + return !BI.isNumber(this.options.rowHeight); + } - this._calculateBlocksToRender(); - try { - this.element.scrollTop(o.scrollTop); - } catch (e) { - } - }, + _renderMoreIf() { + const { scrollTop, overscanHeight, blockSize, items, itemFormatter } = this.options; + const height = this.element.height(); + const minContentHeight = scrollTop + height + overscanHeight; + let index = (this.renderedIndex + 1) * blockSize, cnt = this.renderedIndex + 1; + let lastHeight; + const getElementHeight = ()=> { + return this.container.element.height() + this.topBlank.element.height() + this.bottomBlank.element.height(); + } + lastHeight = this.renderedIndex === -1 ? 0 : getElementHeight(); + while (lastHeight < minContentHeight && index < items.length) { + const itemsArr = items.slice(index, index + blockSize); + this.container[this.renderedIndex === -1 ? "populate" : "addItems"](itemsArr.map((item, i)=> { + return itemFormatter(item, index + i); + }), this); + const elementHeight = getElementHeight(); + const addedHeight = elementHeight - lastHeight; + this.tree.set(cnt, addedHeight); + this.renderedIndex = cnt; + cnt++; + index += blockSize; + lastHeight = this.renderedIndex === -1 ? 0 : elementHeight; + } + } - _restore: function () { - this.renderedIndex = -1; - // 依赖于cache的占位元素也要初始化 - this.topBlank.setHeight(0); - this.bottomBlank.setHeight(0); - }, + _calculateBlocksToRender() { + // BI-115750 不可见状态下依赖元素实际尺寸构造的线段树会分段错误，所以不进行后续计算和线段树的初始化。 + // 这样从不可见状态变为可见状态能够重新触发线段树初始化 + if (!this.element.is(":visible")) { + return; + } + const { scrollTop, overscanHeight, blockSize, items, itemFormatter, rowHeight } = this.options; + this._isAutoHeight() && this._renderMoreIf(); + const height = this.element.height(); + const minContentHeightFrom = scrollTop - overscanHeight; + const minContentHeightTo = scrollTop + height + overscanHeight; + const start = this.tree.greatestLowerBound(minContentHeightFrom); + const end = this.tree.leastUpperBound(minContentHeightTo); + const itemsArr = []; + const topHeight = this.tree.sumTo(Math.max(-1, start - 1)); + this.topBlank.setHeight(topHeight + "px"); + if (this._isAutoHeight()) { + for (let i = (start < 0 ? 0 : start); i <= end && i <= this.renderedIndex; i++) { + const index = i * blockSize; + for (let j = index; j < index + blockSize && j < items.length; j++) { + itemsArr.push(items[j]); + } + } + this.bottomBlank.setHeight(this.tree.sumTo(this.renderedIndex) - this.tree.sumTo(Math.min(end, this.renderedIndex)) + "px"); + this.container.populate(itemsArr.map((item, i)=> { + return itemFormatter(item, (start < 0 ? 0 : start) * blockSize + i); + })); + } else { + for (let i = (start < 0 ? 0 : start); i <= end; i++) { + const index = i * blockSize; + for (let j = index; j < index + blockSize && j < items.length; j++) { + itemsArr.push(items[j]); + } + } + this.container.element.height(rowHeight * items.length - topHeight); + this.container.populate(itemsArr.map((item, i)=> { + return itemFormatter(item, (start < 0 ? 0 : start) * blockSize + i); + })); + } + } + _populate(items) { + const { blockSize, rowHeight, scrollTop } = this.options; + if (items && this.options.items !== items) { + // 重新populate一组items,需要重新对线段树分块 + this.options.items = items; + this._restore(); + } + this.tree = BI.PrefixIntervalTree.uniform(Math.ceil(this.options.items.length / blockSize), this._isAutoHeight() ? 0 : rowHeight * blockSize); - // 暂时只支持固定行高的场景 - scrollTo: function (scrollTop) { - this.options.scrollTop = scrollTop; - this._calculateBlocksToRender(); + this._calculateBlocksToRender(); + try { this.element.scrollTop(scrollTop); - }, + } catch (e) { + } + } - restore: function () { - this.options.scrollTop = 0; - this._restore(); - }, + _restore() { + this.renderedIndex = -1; + // 依赖于cache的占位元素也要初始化 + this.topBlank.setHeight(0); + this.bottomBlank.setHeight(0); + } - populate: function (items) { - this._populate(items); - }, + // 暂时只支持固定行高的场景 + scrollTo(scrollTop) { + this.options.scrollTop = scrollTop; + this._calculateBlocksToRender(); + this.element.scrollTop(scrollTop); + } - beforeDestroy: function () { - BI.ResizeDetector.removeResizeListener(this); - this.restore(); - } -}); -BI.shortcut("bi.virtual_group_list", BI.VirtualGroupList); + restore() { + this.options.scrollTop = 0; + this._restore(); + } + + populate(items) { + this._populate(items); + } + + beforeDestroy() { + BI.ResizeDetector.removeResizeListener(this); + this.restore(); + } +} diff --git a/src/base/list/virtuallist.js b/src/base/list/virtuallist.js index 618d66c2a..bf4cca217 100644 --- a/src/base/list/virtuallist.js +++ b/src/base/list/virtuallist.js @@ -5,213 +5,214 @@ * @class BI.VirtualList * @extends BI.Widget */ -BI.VirtualList = BI.inherit(BI.Widget, { - props: function () { + +import { Widget, shortcut } from "../../core"; +@shortcut() +export default class VirtualList extends Widget { + props() { return { baseCls: "bi-virtual-list", overscanHeight: 100, blockSize: 10, scrollTop: 0, items: [], - itemFormatter: function (item, index) { + itemFormatter: (item, index)=> { return item; }, }; - }, + } - init: function () { + init() { this.renderedIndex = -1; this.cache = {}; - }, - - render: function () { - var self = this; + } - return { - type: "bi.vertical", - items: [{ - type: "bi.layout", - ref: function () { - self.topBlank = this; - }, - }, { - type: "bi.vertical", - scrolly: false, - ref: function () { - self.container = this; - }, - }, { - type: "bi.layout", - ref: function () { - self.bottomBlank = this; - }, - }], - }; - }, + static xtype = "bi.virtual_list"; + render() { + return { + type: "bi.vertical", + items: [{ + type: "bi.layout", + ref: (_ref)=> { + this.topBlank = _ref; + }, + }, { + type: "bi.vertical", + scrolly: false, + ref: (_ref)=> { + this.container = _ref; + }, + }, { + type: "bi.layout", + ref: (_ref)=> { + this.bottomBlank = _ref; + }, + }], + }; + } // mounted之后绑定事件 - mounted: function () { - var self = this, o = this.options; - o.items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { - self.populate(newValue); - }) : o.items; - this._populate(); - this.element.scroll(function (e) { - o.scrollTop = self.element.scrollTop(); - self._calculateBlocksToRender(); - }); - BI.ResizeDetector.addResizeListener(this, function () { - if (self.element.is(":visible")) { - self._calculateBlocksToRender(); - } - }); - }, + mounted() { + // 这里无法进行结构，因为存在赋值操作，如果使用结构则this.options的值不会跟随变化 + const o = this.options; + o.items = BI.isFunction(o.items) ? this.__watch(o.items, (context, newValue)=> { + this.populate(newValue); + }) : o.items; + this._populate(); + this.element.scroll((e)=> { + o.scrollTop = this.element.scrollTop(); + this._calculateBlocksToRender(); + }); + BI.ResizeDetector.addResizeListener(this, ()=> { + if (this.element.is(":visible")) { + this._calculateBlocksToRender(); + } + }); + } - _renderMoreIf: function () { - var self = this, o = this.options; - var height = this.element.height(); - var minContentHeight = o.scrollTop + height + o.overscanHeight; - var index = (this.renderedIndex + 1) * o.blockSize, cnt = this.renderedIndex + 1; - var lastHeight; - function getElementHeight() { - return self.container.element.height() + self.topBlank.element.height() + self.bottomBlank.element.height(); - } - lastHeight = getElementHeight(); - while (lastHeight < minContentHeight && index < o.items.length) { - var items = o.items.slice(index, index + o.blockSize); - this.container.addItems(items.map(function (item, i) { - return o.itemFormatter(item, index + i); - }), this); - var addedHeight = getElementHeight() - lastHeight; - this.tree.set(cnt, addedHeight); - this.renderedIndex = cnt; - cnt++; - index += o.blockSize; - lastHeight = getElementHeight(); - } - }, + _renderMoreIf() { + const { scrollTop, overscanHeight, blockSize, items, itemFormatter } = this.options; + const height = this.element.height(); + const minContentHeight = scrollTop + height + overscanHeight; + let index = (this.renderedIndex + 1) * blockSize, cnt = this.renderedIndex + 1; + let lastHeight; + const getElementHeight = ()=> { + return this.container.element.height() + this.topBlank.element.height() + this.bottomBlank.element.height(); + } + lastHeight = getElementHeight(); + while (lastHeight < minContentHeight && index < items.length) { + const itemsArr = items.slice(index, index + blockSize); + this.container.addItems(itemsArr.map((item, i)=> { + return itemFormatter(item, index + i); + }), this); + const addedHeight = getElementHeight() - lastHeight; + this.tree.set(cnt, addedHeight); + this.renderedIndex = cnt; + cnt++; + index += blockSize; + lastHeight = getElementHeight(); + } + } - _calculateBlocksToRender: function () { - var o = this.options; - // BI-115750 不可见状态下依赖元素实际尺寸构造的线段树会分段错误，所以不进行后续计算和线段树的初始化。 - // 这样从不可见状态变为可见状态能够重新触发线段树初始化 - if (!this.element.is(":visible")) { - return; + _calculateBlocksToRender() { + const { scrollTop, overscanHeight, blockSize, items, itemFormatter } = this.options; + // BI-115750 不可见状态下依赖元素实际尺寸构造的线段树会分段错误，所以不进行后续计算和线段树的初始化。 + // 这样从不可见状态变为可见状态能够重新触发线段树初始化 + if (!this.element.is(":visible")) { + return; + } + this._renderMoreIf(); + const height = this.element.height(); + const minContentHeightFrom = scrollTop - overscanHeight; + const minContentHeightTo = scrollTop + height + overscanHeight; + const start = this.tree.greatestLowerBound(minContentHeightFrom); + const end = this.tree.leastUpperBound(minContentHeightTo); + const needDestroyed = [], needMount = []; + for (let i = 0; i < start; i++) { + let index = i * blockSize; + if (!this.cache[i]) { + this.cache[i] = {}; } - this._renderMoreIf(); - var height = this.element.height(); - var minContentHeightFrom = o.scrollTop - o.overscanHeight; - var minContentHeightTo = o.scrollTop + height + o.overscanHeight; - var start = this.tree.greatestLowerBound(minContentHeightFrom); - var end = this.tree.leastUpperBound(minContentHeightTo); - var needDestroyed = [], needMount = []; - for (var i = 0; i < start; i++) { - var index = i * o.blockSize; - if (!this.cache[i]) { - this.cache[i] = {}; - } - if (!this.cache[i].destroyed) { - for (var j = index; j < index + o.blockSize && j < o.items.length; j++) { - needDestroyed.push(this.container._children[j]); - this.container._children[j] = null; - } - this.cache[i].destroyed = true; + if (!this.cache[i].destroyed) { + for (let j = index; j < index + blockSize && j < items.length; j++) { + needDestroyed.push(this.container._children[j]); + this.container._children[j] = null; } + this.cache[i].destroyed = true; } - for (var i = end + 1; i <= this.renderedIndex; i++) { - var index = i * o.blockSize; - if (!this.cache[i]) { - this.cache[i] = {}; - } - if (!this.cache[i].destroyed) { - for (var j = index; j < index + o.blockSize && j < o.items.length; j++) { - needDestroyed.push(this.container._children[j]); - this.container._children[j] = null; - } - this.cache[i].destroyed = true; - } + } + for (let i = end + 1; i <= this.renderedIndex; i++) { + let index = i * blockSize; + if (!this.cache[i]) { + this.cache[i] = {}; + } + if (!this.cache[i].destroyed) { + for (let j = index; j < index + blockSize && j < items.length; j++) { + needDestroyed.push(this.container._children[j]); + this.container._children[j] = null; } - var firstFragment = BI.Widget._renderEngine.createFragment(), - lastFragment = BI.Widget._renderEngine.createFragment(); - var currentFragment = firstFragment; - for (var i = (start < 0 ? 0 : start); i <= end && i <= this.renderedIndex; i++) { - var index = i * o.blockSize; - if (!this.cache[i]) { - this.cache[i] = {}; - } - if (!this.cache[i].destroyed) { - currentFragment = lastFragment; - } - if (this.cache[i].destroyed === true) { - for (var j = index; j < index + o.blockSize && j < o.items.length; j++) { - var w = this.container._addElement(j, o.itemFormatter(o.items[j], j), this); - needMount.push(w); - currentFragment.appendChild(w.element[0]); - } - this.cache[i].destroyed = false; - } + this.cache[i].destroyed = true; + } + } + const firstFragment = BI.Widget._renderEngine.createFragment(), + lastFragment = BI.Widget._renderEngine.createFragment(); + let currentFragment = firstFragment; + for (let i = (start < 0 ? 0 : start); i <= end && i <= this.renderedIndex; i++) { + const index = i * blockSize; + if (!this.cache[i]) { + this.cache[i] = {}; } - this.container.element.prepend(firstFragment); - this.container.element.append(lastFragment); - this.topBlank.setHeight(this.tree.sumTo(Math.max(-1, start - 1)) + "px"); - this.bottomBlank.setHeight(this.tree.sumTo(this.renderedIndex) - this.tree.sumTo(Math.min(end, this.renderedIndex)) + "px"); - BI.each(needMount, function (i, child) { - child && child._mount(); - }); - BI.each(needDestroyed, function (i, child) { - child && child._destroy(); - }); - }, - - _populate: function (items) { - var o = this.options; - if (items && this.options.items !== items) { - this.options.items = items; + if (!this.cache[i].destroyed) { + currentFragment = lastFragment; } - this.tree = BI.PrefixIntervalTree.empty(Math.ceil(o.items.length / o.blockSize)); - - this._calculateBlocksToRender(); - try { - this.element.scrollTop(o.scrollTop); - } catch (e) { + if (this.cache[i].destroyed === true) { + for (let j = index; j < index + blockSize && j < items.length; j++) { + const w = this.container._addElement(j, itemFormatter(items[j], j), this); + needMount.push(w); + currentFragment.appendChild(w.element[0]); + } + this.cache[i].destroyed = false; } - }, - - _clearChildren: function () { - BI.each(this.container._children, function (i, cell) { - cell && cell._destroy(); - }); - this.container._children = {}; - this.container.attr("items", []); - }, + } + this.container.element.prepend(firstFragment); + this.container.element.append(lastFragment); + this.topBlank.setHeight(this.tree.sumTo(Math.max(-1, start - 1)) + "px"); + this.bottomBlank.setHeight(this.tree.sumTo(this.renderedIndex) - this.tree.sumTo(Math.min(end, this.renderedIndex)) + "px"); + BI.each(needMount, (i, child)=> { + child && child._mount(); + }); + BI.each(needDestroyed, (i, child)=> { + child && child._destroy(); + }); + } + _populate(items) { + const { blockSize, scrollTop } = this.options; + if (items && this.options.items !== items) { + this.options.items = items; + } + this.tree = BI.PrefixIntervalTree.empty(Math.ceil(this.options.items.length / blockSize)); - scrollTo: function (scrollTop) { - this.options.scrollTop = scrollTop; - this._calculateBlocksToRender(); + this._calculateBlocksToRender(); + try { this.element.scrollTop(scrollTop); - }, + } catch (e) { + } + } - restore: function () { - this.renderedIndex = -1; - this._clearChildren(); - this.cache = {}; - this.options.scrollTop = 0; - // 依赖于cache的占位元素也要初始化 - this.topBlank.setHeight(0); - this.bottomBlank.setHeight(0); - }, + _clearChildren() { + BI.each(this.container._children, (i, cell)=> { + cell && cell._destroy(); + }); + this.container._children = {}; + this.container.attr("items", []); + } - populate: function (items) { - if (items && this.options.items !== items) { - this.restore(); - } - this._populate(items); - }, + scrollTo(scrollTop) { + this.options.scrollTop = scrollTop; + this._calculateBlocksToRender(); + this.element.scrollTop(scrollTop); + } + + restore() { + this.renderedIndex = -1; + this._clearChildren(); + this.cache = {}; + this.options.scrollTop = 0; + // 依赖于cache的占位元素也要初始化 + this.topBlank.setHeight(0); + this.bottomBlank.setHeight(0); + } - beforeDestroy: function () { - BI.ResizeDetector.removeResizeListener(this); + populate(items) { + if (items && this.options.items !== items) { this.restore(); } -}); -BI.shortcut("bi.virtual_list", BI.VirtualList); + this._populate(items); + } + + beforeDestroy() { + BI.ResizeDetector.removeResizeListener(this); + this.restore(); + } +} diff --git a/src/base/pager/pager.js b/src/base/pager/pager.js index 06514fb99..a8b2d9418 100644 --- a/src/base/pager/pager.js +++ b/src/base/pager/pager.js @@ -5,9 +5,11 @@ * @class BI.Pager * @extends BI.Widget */ -BI.Pager = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.Pager.superclass._defaultConfig.apply(this, arguments), { +import { Widget, shortcut } from "../../core"; +@shortcut() +export default class Pager extends Widget { + _defaultConfig() { + return BI.extend(super._defaultConfig(arguments), { baseCls: "bi-pager", behaviors: {}, layouts: [{ @@ -32,15 +34,18 @@ BI.Pager = BI.inherit(BI.Widget, { next: "下一页", firstPage: 1, - lastPage: function () { // 在万不得已时才会调用这个函数获取最后一页的页码, 主要作用于setValue方法 + lastPage: ()=> { // 在万不得已时才会调用这个函数获取最后一页的页码, 主要作用于setValue方法 return 1; }, hasPrev: BI.emptyFn, // pages不可用时有效 hasNext: BI.emptyFn, // pages不可用时有效 }); - }, + } - render: function () { + static xtype = "bi.pager"; + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_AFTER_POPULATE = "EVENT_AFTER_POPULATE"; + render() { this.currPage = BI.result(this.options, "curr"); // 翻页太灵敏 // this._lock = false; @@ -48,18 +53,19 @@ BI.Pager = BI.inherit(BI.Widget, { // self._lock = false; // }, 300); this._populate(); - }, + } - _populate: function () { - var self = this, o = this.options, view = [], dict = {}; + _populate() { + const o = this.options, view = [], dict = {}; + const { dynamicShow, dynamicShowPrevNext, hasPrev, dynamicShowFirstLast, hasNext, behaviors, layouts, jump } = this.options; this.empty(); - var pages = BI.result(o, "pages"); - var curr = BI.result(this, "currPage"); - var groups = BI.result(o, "groups"); - var first = BI.result(o, "first"); - var last = BI.result(o, "last"); - var prev = BI.result(o, "prev"); - var next = BI.result(o, "next"); + const pages = BI.result(o, "pages"); + const curr = BI.result(this, "currPage"); + let groups = BI.result(o, "groups"); + let first = BI.result(o, "first"); + let last = BI.result(o, "last"); + const prev = BI.result(o, "prev"); + const next = BI.result(o, "next"); if (pages === false) { groups = 0; @@ -73,24 +79,24 @@ BI.Pager = BI.inherit(BI.Widget, { dict.index = Math.ceil((curr + ((groups > 1 && groups !== pages) ? 1 : 0)) / (groups === 0 ? 1 : groups)); // 当前页非首页，则输出上一页 - if (((!o.dynamicShow && !o.dynamicShowPrevNext) || curr > 1) && prev !== false) { + if (((!dynamicShow && !dynamicShowPrevNext) || curr > 1) && prev !== false) { if (BI.isKey(prev)) { view.push({ text: prev, value: "prev", - disabled: pages === false ? o.hasPrev(curr) === false : !(curr > 1 && prev !== false), + disabled: pages === false ? hasPrev(curr) === false : !(curr > 1 && prev !== false), }); } else { view.push({ el: BI.extend({ - disabled: pages === false ? o.hasPrev(curr) === false : !(curr > 1 && prev !== false), + disabled: pages === false ? hasPrev(curr) === false : !(curr > 1 && prev !== false), }, prev), }); } } // 当前组非首组，则输出首页 - if (((!o.dynamicShow && !o.dynamicShowFirstLast) || (dict.index > 1 && groups !== 0)) && first) { + if (((!dynamicShow && !dynamicShowFirstLast) || (dict.index > 1 && groups !== 0)) && first) { view.push({ text: first, value: "first", @@ -109,14 +115,14 @@ BI.Pager = BI.inherit(BI.Widget, { dict.poor = Math.floor((groups - 1) / 2); dict.start = dict.index > 1 ? curr - dict.poor : 1; dict.end = dict.index > 1 ? (function () { - var max = curr + (groups - dict.poor - 1); + const max = curr + (groups - dict.poor - 1); return max > pages ? pages : max; }()) : groups; if (dict.end - dict.start < groups - 1) { // 最后一组状态 dict.start = dict.end - groups + 1; } - var s = dict.start, e = dict.end; + let s = dict.start, e = dict.end; if (first && last && (dict.index > 1 && groups !== 0) && (pages > groups && dict.end < pages && groups !== 0)) { s++; e--; @@ -137,7 +143,7 @@ BI.Pager = BI.inherit(BI.Widget, { } // 总页数大于连续分页数，且当前组最大页小于总页，输出尾页 - if (((!o.dynamicShow && !o.dynamicShowFirstLast) || (pages > groups && dict.end < pages && groups !== 0)) && last) { + if (((!dynamicShow && !dynamicShowFirstLast) || (pages > groups && dict.end < pages && groups !== 0)) && last) { if (pages > groups && dict.end < pages && groups !== 0 && groups !== pages - 1) { view.push({ type: "bi.label", @@ -154,11 +160,11 @@ BI.Pager = BI.inherit(BI.Widget, { // 当前页不为尾页时，输出下一页 dict.flow = !prev && groups === 0; - if (((!o.dynamicShow && !o.dynamicShowPrevNext) && next) || (curr !== pages && next || dict.flow)) { + if (((!dynamicShow && !dynamicShowPrevNext) && next) || (curr !== pages && next || dict.flow)) { view.push((function () { if (BI.isKey(next)) { if (pages === false) { - return { text: next, value: "next", disabled: o.hasNext(curr) === false }; + return { text: next, value: "next", disabled: hasNext(curr) === false }; } return (dict.flow && curr === pages) @@ -170,7 +176,7 @@ BI.Pager = BI.inherit(BI.Widget, { return { el: BI.extend({ - disabled: pages === false ? o.hasNext(curr) === false : !(curr !== pages && next || dict.flow), + disabled: pages === false ? hasNext(curr) === false : !(curr !== pages && next || dict.flow), }, next), }; }())); @@ -179,7 +185,7 @@ BI.Pager = BI.inherit(BI.Widget, { this.button_group = BI.createWidget({ type: "bi.button_group", element: this, - items: BI.map(view, function (idx, v) { + items: BI.map(view, (idx, v)=> { v = BI.extend({ cls: "bi-list-item-select bi-border-radius", height: 23, @@ -189,87 +195,85 @@ BI.Pager = BI.inherit(BI.Widget, { return BI.formatEL(v); }), - behaviors: o.behaviors, - layouts: o.layouts, + behaviors, + layouts, }); - this.button_group.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) { + this.button_group.on(BI.Controller.EVENT_CHANGE, (type, value, obj, ...args)=> { // if (self._lock === true) { // return; // } // self._lock = true; // self._debouce(); if (type === BI.Events.CLICK) { - var v = self.button_group.getValue()[0]; + var v = this.button_group.getValue()[0]; switch (v) { case "first": - self.currPage = 1; + this.currPage = 1; break; case "last": - self.currPage = pages; + this.currPage = pages; break; case "prev": - self.currPage--; + this.currPage--; break; case "next": - self.currPage++; + this.currPage++; break; default: - self.currPage = v; + this.currPage = v; break; } - o.jump.apply(self, [{ + jump.apply(this, [{ pages: pages, - curr: self.currPage, + curr: this.currPage, }]); - self._populate(); - self.fireEvent(BI.Pager.EVENT_CHANGE, obj); + this._populate(); + this.fireEvent(Pager.EVENT_CHANGE, obj); } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.fireEvent.apply(this, [BI.Controller.EVENT_CHANGE, type, value, obj, args]); }); - this.fireEvent(BI.Pager.EVENT_AFTER_POPULATE); - }, + this.fireEvent(Pager.EVENT_AFTER_POPULATE); + } - getCurrentPage: function () { + getCurrentPage() { return this.currPage; - }, + } - setAllPages: function (pages) { + setAllPages(pages) { this.options.pages = pages; this._populate(); - }, + } - hasPrev: function (v) { + hasPrev(v) { v || (v = 1); - var o = this.options; - var pages = this.options.pages; + const { pages, hasPrev } = this.options; - return pages === false ? o.hasPrev(v) : v > 1; - }, + return pages === false ? hasPrev(v) : v > 1; + } - hasNext: function (v) { + hasNext(v) { v || (v = 1); - var o = this.options; - var pages = this.options.pages; + const { pages, hasNext } = this.options; + return pages === false ? hasNext(v) : v < pages; + } - return pages === false ? o.hasNext(v) : v < pages; - }, - - setValue: function (v) { - var o = this.options; + setValue(v) { + const o = this.options; + const { pages } = this.options; v = v || 0; v = v < 1 ? 1 : v; - if (o.pages === false) { + if (pages === false) { var lastPage = BI.result(o, "lastPage"), firstPage = 1; this.currPage = v > lastPage ? lastPage : ((firstPage = BI.result(o, "firstPage")), (v < firstPage ? firstPage : v)); } else { - v = v > o.pages ? o.pages : v; + v = v > pages ? pages : v; this.currPage = v; } this._populate(); - }, + } - getValue: function () { - var val = this.button_group.getValue()[0]; + getValue() { + const val = this.button_group.getValue()[0]; switch (val) { case "prev": return -1; @@ -282,19 +286,16 @@ BI.Pager = BI.inherit(BI.Widget, { default: return val; } - }, + } - attr: function (key, value) { - BI.Pager.superclass.attr.apply(this, arguments); + attr(key, value) { + super.attr(arguments); if (key === "curr") { this.currPage = BI.result(this.options, "curr"); } - }, + } - populate: function () { + populate() { this._populate(); - }, -}); -BI.Pager.EVENT_CHANGE = "EVENT_CHANGE"; -BI.Pager.EVENT_AFTER_POPULATE = "EVENT_AFTER_POPULATE"; -BI.shortcut("bi.pager", BI.Pager); + } +} \ No newline at end of file diff --git a/src/base/single/a/a.js b/src/base/single/a/a.js index 313e050ba..7acf03231 100644 --- a/src/base/single/a/a.js +++ b/src/base/single/a/a.js @@ -6,9 +6,10 @@ * @extends BI.Text * @abstract */ -import { shortcut } from "../../../core/decorator"; +import { shortcut } from "../../../core"; +import Text from "../1.text"; @shortcut() -export class A extends BI.Text { +export default class A extends Text { static xtype = "bi.a"; _defaultConfig() { @@ -34,5 +35,3 @@ export class A extends BI.Text { } } - -BI.extend(BI, { A }); diff --git a/src/base/single/tip/0.tip.js b/src/base/single/tip/0.tip.js index 21cd96deb..d9ac9fee7 100644 --- a/src/base/single/tip/0.tip.js +++ b/src/base/single/tip/0.tip.js @@ -6,7 +6,9 @@ * @extends BI.Single * @abstract */ -export class Tip extends BI.Single { + +import Single from "../0.single"; +export default class Tip extends Single { _defaultConfig() { const conf = super._defaultConfig(arguments); return BI.extend(conf, { @@ -21,4 +23,3 @@ export class Tip extends BI.Single { } } -BI.extend(BI, { Tip }); diff --git a/src/base/single/tip/tip.toast.js b/src/base/single/tip/tip.toast.js index 124cf6af0..1fa33187a 100644 --- a/src/base/single/tip/tip.toast.js +++ b/src/base/single/tip/tip.toast.js @@ -6,9 +6,10 @@ * @extends BI.Tip */ -import { shortcut } from "../../../core/decorator"; +import { shortcut } from "../../../core"; +import Tip from "./0.tip"; @shortcut() -export class Toast extends BI.Tip { +export default class Toast extends Tip { _const= { closableMinWidth: 146, minWidth: 100, @@ -124,4 +125,3 @@ export class Toast extends BI.Tip { } -BI.extend(BI, { Toast }); diff --git a/src/base/single/tip/tip.tooltip.js b/src/base/single/tip/tip.tooltip.js index 3d4f77382..ab95c113a 100644 --- a/src/base/single/tip/tip.tooltip.js +++ b/src/base/single/tip/tip.tooltip.js @@ -6,9 +6,10 @@ * @extends BI.Tip */ -import { shortcut } from "../../../core/decorator"; +import { shortcut } from "../../../core"; +import Tip from "./0.tip"; @shortcut() -export class Tooltip extends BI.Tip { +export default class Tooltip extends Tip { _const = { hgap: 8, vgap: 4, @@ -90,5 +91,3 @@ export class Tooltip extends BI.Tip { } } - -BI.extend(BI, { Tooltip }); From 3db612aa389ee5386bcc7c05d8e7ff029ef7d337 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joker=2EWang-=E7=8E=8B=E9=A1=BA?= Date: Thu, 29 Dec 2022 15:03:57 +0800 Subject: [PATCH 9/9] =?UTF-8?q?KERNEL-13841=20refactor:base=E6=96=87?= =?UTF-8?q?=E4=BB=B6es6=E5=8C=96=E7=AE=AD=E5=A4=B4=E5=87=BD=E6=95=B0?= =?UTF-8?q?=E5=92=8Cthis=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/grid/grid.js | 24 ++++++++++++------------ src/base/layer/layer.drawer.js | 12 ++++++------ src/base/layer/layer.popover.js | 16 ++++++++-------- src/base/layer/layer.popup.js | 4 ++-- src/base/layer/layer.searcher.js | 16 ++++++++-------- src/base/list/listview.js | 14 +++++++------- src/base/list/virtualgrouplist.js | 24 ++++++++++++------------ src/base/list/virtuallist.js | 24 ++++++++++++------------ src/base/pager/pager.js | 10 +++++----- src/base/single/tip/tip.toast.js | 2 +- src/base/single/tip/tip.tooltip.js | 2 +- 11 files changed, 74 insertions(+), 74 deletions(-) diff --git a/src/base/grid/grid.js b/src/base/grid/grid.js index 4ee6e6332..3798a8e46 100644 --- a/src/base/grid/grid.js +++ b/src/base/grid/grid.js @@ -30,7 +30,7 @@ export default class GridView extends Widget { scrollLeft: 0, scrollTop: 0, items: [], - itemFormatter: (item, row, col)=> { + itemFormatter: (item, row, col) => { return item; }, }); @@ -46,13 +46,13 @@ export default class GridView extends Widget { this.renderedKeys = []; this.renderRange = {}; this._scrollLock = false; - this._debounceRelease = BI.debounce(()=> { + this._debounceRelease = BI.debounce(() => { this._scrollLock = false; }, 1000 / 60); this.container = BI._lazyCreateWidget({ type: "bi.absolute", }); - this.element.scroll(()=> { + this.element.scroll(() => { if (this._scrollLock === true) { return; } @@ -85,7 +85,7 @@ export default class GridView extends Widget { scrollx: scrollx, items: [this.container], }); - o.items = BI.isFunction(o.items) ? this.__watch(o.items, (context, newValue)=> { + o.items = BI.isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { this.populate(newValue); }) : o.items; if (o.items.length > 0) { @@ -104,7 +104,7 @@ export default class GridView extends Widget { } destroyed() { - BI.each(this.renderedCells, (i, cell)=> { + BI.each(this.renderedCells, (i, cell) => { cell.el._destroy(); }) } @@ -235,14 +235,14 @@ export default class GridView extends Widget { } // 已存在的， 需要添加的和需要删除的 const existSet = {}, addSet = {}, deleteArray = []; - BI.each(renderedKeys, (i, key)=> { + BI.each(renderedKeys, (i, key) => { if (this.renderedKeys[i]) { existSet[i] = key; } else { addSet[i] = key; } }); - BI.each(this.renderedKeys, function (i, key) { + BI.each(this.renderedKeys, (i, key) => { if (existSet[i]) { return; } @@ -251,12 +251,12 @@ export default class GridView extends Widget { } deleteArray.push(key[2]); }); - BI.each(deleteArray, (i, index)=> { + BI.each(deleteArray, (i, index) => { // 性能优化，不调用destroy方法防止触发destroy事件 this.renderedCells[index].el._destroy(); }); const addedItems = []; - BI.each(addSet, function (index, key) { + BI.each(addSet, (index, key) => { addedItems.push(renderedCells[key[2]]); }); // 与listview一样, 给上下文 @@ -370,7 +370,7 @@ export default class GridView extends Widget { setOverflowX(b) { if (this.options.overflowX !== !!b) { this.options.overflowX = !!b; - BI.nextTick(()=> { + BI.nextTick(() => { this.element.css({ overflowX: b ? "auto" : "hidden" }); }); } @@ -379,7 +379,7 @@ export default class GridView extends Widget { setOverflowY(b) { if (this.options.overflowY !== !!b) { this.options.overflowY = !!b; - BI.nextTick(()=> { + BI.nextTick(() => { this.element.css({ overflowY: b ? "auto" : "hidden" }); }); } @@ -418,7 +418,7 @@ export default class GridView extends Widget { } restore() { - BI.each(this.renderedCells, (i, cell)=> { + BI.each(this.renderedCells, (i, cell) => { cell.el._destroy(); }); this._clearChildren(); diff --git a/src/base/layer/layer.drawer.js b/src/base/layer/layer.drawer.js index 5f0efd278..890981d0e 100644 --- a/src/base/layer/layer.drawer.js +++ b/src/base/layer/layer.drawer.js @@ -82,7 +82,7 @@ export default class Drawer extends Widget { type: "bi.icon_button", cls: "bi-message-close close-font", height: headerHeight, - handler: ()=> { + handler: () => { this.close(); }, } : { @@ -98,7 +98,7 @@ export default class Drawer extends Widget { type: "bi.vertical", scrolly: true, cls: "drawer-body", - ref: (_ref)=> { + ref: (_ref) => { this.body = _ref; }, items: [{ @@ -153,7 +153,7 @@ export default class Drawer extends Widget { show(callback) { const { placement } = this.options; - requestAnimationFrame(()=> { + requestAnimationFrame(() => { const size = this._getSuitableSize(); switch (placement) { case "right": @@ -185,7 +185,7 @@ export default class Drawer extends Widget { hide(callback) { const { placement } = this.options; - requestAnimationFrame(()=> { + requestAnimationFrame(() => { switch (placement) { case "right": this.element.css({ @@ -215,13 +215,13 @@ export default class Drawer extends Widget { } open() { - this.show(()=> { + this.show(() => { this.fireEvent(Drawer.EVENT_OPEN); }); } close() { - this.hide(()=> { + this.hide(() => { this.fireEvent(Drawer.EVENT_CLOSE); }); } diff --git a/src/base/layer/layer.popover.js b/src/base/layer/layer.popover.js index 64f457d0b..cd91db05e 100644 --- a/src/base/layer/layer.popover.js +++ b/src/base/layer/layer.popover.js @@ -47,7 +47,7 @@ export class Popover extends Widget { this.startX = 0; this.startY = 0; const size = this._calculateSize(); - this.tracker = new BI.MouseMoveTracker(function (deltaX, deltaY) { + this.tracker = new BI.MouseMoveTracker((deltaX, deltaY) => { const W = BI.Widget._renderEngine.createElement("body").width(); const H = BI.Widget._renderEngine.createElement("body").height(); this.startX += deltaX; @@ -60,7 +60,7 @@ export class Popover extends Widget { BI.Resizers._resize({ target: this.element[0], }); - }, ()=> { + }, () => { this.tracker.releaseMouseMoves(); }, _global); const items = [{ @@ -70,7 +70,7 @@ export class Popover extends Widget { items: [{ el: { type: "bi.absolute", - ref: (_ref)=> { + ref: (_ref) => { this.dragger = _ref; }, items: [{ @@ -95,7 +95,7 @@ export class Popover extends Widget { type: "bi.icon_button", cls: "bi-message-close close-font", height: headerHeight, - handler: ()=> { + handler: () => { this.close(); }, }, @@ -109,7 +109,7 @@ export class Popover extends Widget { type: "bi.vertical", scrolly: true, cls: "popover-body", - ref: (_ref)=> { + ref: (_ref) => { this.body = _ref; }, css: { @@ -164,7 +164,7 @@ export class Popover extends Widget { } // mounted之后绑定事件 mounted() { - this.dragger.element.mousedown(function (e) { + this.dragger.element.mousedown((e) => { if (this.options.draggable !== false) { this.startX = this.element[0].offsetLeft; this.startY = this.element[0].offsetTop; @@ -258,7 +258,7 @@ export class BarPopover extends Popover { text: this.options.btns[1], value: 1, level: "ignore", - handler: (v)=> { + handler: (v) => { this.fireEvent(Popover.EVENT_CANCEL, v); this.close(v); }, @@ -267,7 +267,7 @@ export class BarPopover extends Popover { text: this.options.btns[0], warningTitle: warningTitle, value: 0, - handler: (v)=> { + handler: (v) => { this.fireEvent(Popover.EVENT_CONFIRM, v); this.close(v); }, diff --git a/src/base/layer/layer.popup.js b/src/base/layer/layer.popup.js index 93d7bee37..ea4a35196 100644 --- a/src/base/layer/layer.popup.js +++ b/src/base/layer/layer.popup.js @@ -80,8 +80,8 @@ export default class PopupView extends Widget { this.view = this._createView(); this.toolbar = this._createToolBar(); - this.view.on(BI.Controller.EVENT_CHANGE, (type, ...args)=> { - this.fireEvent.apply(this, [BI.Controller.EVENT_CHANGE, type, args]); + this.view.on(BI.Controller.EVENT_CHANGE, (type, ...args) => { + this.fireEvent.apply(this, [BI.Controller.EVENT_CHANGE, type, ...args]); if (type === BI.Events.CLICK) { this.fireEvent(PopupView.EVENT_CHANGE); } diff --git a/src/base/layer/layer.searcher.js b/src/base/layer/layer.searcher.js index 8b8d037f7..f76aa7a17 100644 --- a/src/base/layer/layer.searcher.js +++ b/src/base/layer/layer.searcher.js @@ -26,7 +26,7 @@ export default class SearcherView extends Pane { matcher: { // 完全匹配的构造器 type: "bi.button_group", behaviors: { - redmark: ()=> { + redmark: () => { return true; }, }, @@ -38,7 +38,7 @@ export default class SearcherView extends Pane { searcher: { type: "bi.button_group", behaviors: { - redmark: function () { + redmark: () => { return true; }, }, @@ -56,7 +56,7 @@ export default class SearcherView extends Pane { type: "bi.button_group", chooseType, behaviors: { - redmark: ()=> { + redmark: () => { return true; }, }, @@ -65,8 +65,8 @@ export default class SearcherView extends Pane { }], value, }); - this.matcher.on(BI.Controller.EVENT_CHANGE, (type, val, ob)=> { - this.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.matcher.on(BI.Controller.EVENT_CHANGE, (type, val, ob, ...args) => { + this.fireEvent.apply(this, [BI.Controller.EVENT_CHANGE, type, val, ob, ...args]); if (type === BI.Events.CLICK) { this.fireEvent(SearcherView.EVENT_CHANGE, val, ob); } @@ -85,7 +85,7 @@ export default class SearcherView extends Pane { type: "bi.button_group", chooseType, behaviors: { - redmark: ()=> { + redmark: () => { return true; }, }, @@ -94,8 +94,8 @@ export default class SearcherView extends Pane { }], value, }); - this.searcher.on(BI.Controller.EVENT_CHANGE, (type, val, ob)=> { - this.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.searcher.on(BI.Controller.EVENT_CHANGE, (type, val, ob, ...args) => { + this.fireEvent.apply(this, [BI.Controller.EVENT_CHANGE, type, val, ob, ...args]); if (type === BI.Events.CLICK) { this.fireEvent(BI.SearcherView.EVENT_CHANGE, val, ob); } diff --git a/src/base/list/listview.js b/src/base/list/listview.js index 03da49d3b..3ec9dc162 100644 --- a/src/base/list/listview.js +++ b/src/base/list/listview.js @@ -16,7 +16,7 @@ export default class ListView extends Widget { scrollTop: 0, el: {}, items: [], - itemFormatter: (item, index)=> { + itemFormatter: (item, index) => { return item; }, }; @@ -37,7 +37,7 @@ export default class ListView extends Widget { items: [BI.extend({ type: "bi.vertical", scrolly: false, - ref: (_ref)=> { + ref: (_ref) => { this.container = _ref; }, }, el)], @@ -49,17 +49,17 @@ export default class ListView extends Widget { mounted() { const o = this.options; // 这里无法进行结构，因为存在赋值操作，如果使用结构则this.options的值不会跟随变化 - o.items = BI.isFunction(o.items) ? this.__watch(o.items, (context, newValue)=> { + o.items = BI.isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { this.populate(newValue); }) : o.items; this._populate(); - this.element.scroll((e)=> { + this.element.scroll((e) => { o.scrollTop = this.element.scrollTop(); this._calculateBlocksToRender(); }); let lastWidth = this.element.width(), lastHeight = this.element.height(); - BI.ResizeDetector.addResizeListener(this, ()=> { + BI.ResizeDetector.addResizeListener(this, () => { if (!this.element.is(":visible")) { return; } @@ -81,14 +81,14 @@ export default class ListView extends Widget { let cnt = this.renderedIndex + 1; let lastHeight; - const getElementHeight = ()=> { + const getElementHeight = () => { return this.container.element.height(); } lastHeight = getElementHeight(); while ((lastHeight) < minContentHeight && index < items.length) { const itemsArr = items.slice(index, index + blockSize); - this.container.addItems(itemsArr.map((item, i)=> { + this.container.addItems(itemsArr.map((item, i) => { return itemFormatter(item, index + i); }), this); const addedHeight = getElementHeight() - lastHeight; diff --git a/src/base/list/virtualgrouplist.js b/src/base/list/virtualgrouplist.js index a9b113833..be9845cc1 100644 --- a/src/base/list/virtualgrouplist.js +++ b/src/base/list/virtualgrouplist.js @@ -18,7 +18,7 @@ export default class VirtualGroupList extends Widget { rowHeight: "auto", items: [], el: {}, - itemFormatter: (item, index)=> { + itemFormatter: (item, index) => { return item; }, }; @@ -37,13 +37,13 @@ export default class VirtualGroupList extends Widget { type: "bi.vertical", items: [{ type: "bi.layout", - ref: ()=> { + ref: () => { this.topBlank = this; }, }, { type: "bi.virtual_group", height: rowHeight * items.length, - ref: ()=> { + ref: () => { this.container = this; }, layouts: [BI.extend({ @@ -52,7 +52,7 @@ export default class VirtualGroupList extends Widget { }, el)], }, { type: "bi.layout", - ref: ()=> { + ref: () => { this.bottomBlank = this; }, }], @@ -63,22 +63,22 @@ export default class VirtualGroupList extends Widget { mounted() { // 这里无法进行结构，因为存在赋值操作，如果使用结构则this.options的值不会跟随变化 const o = this.options; - o.items = BI.isFunction(o.items) ? this.__watch(o.items, (context, newValue)=> { + o.items = BI.isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { this.populate(newValue); }) : o.items; this._populate(); this.ticking = false; - this.element.scroll(()=> { + this.element.scroll(() => { o.scrollTop = this.element.scrollTop(); if (!this.ticking) { - requestAnimationFrame(function () { + requestAnimationFrame(() => { this._calculateBlocksToRender(); this.ticking = false; }); this.ticking = true; } }); - BI.ResizeDetector.addResizeListener(this, ()=> { + BI.ResizeDetector.addResizeListener(this, () => { if (this.element.is(":visible")) { this._calculateBlocksToRender(); } @@ -95,13 +95,13 @@ export default class VirtualGroupList extends Widget { const minContentHeight = scrollTop + height + overscanHeight; let index = (this.renderedIndex + 1) * blockSize, cnt = this.renderedIndex + 1; let lastHeight; - const getElementHeight = ()=> { + const getElementHeight = () => { return this.container.element.height() + this.topBlank.element.height() + this.bottomBlank.element.height(); } lastHeight = this.renderedIndex === -1 ? 0 : getElementHeight(); while (lastHeight < minContentHeight && index < items.length) { const itemsArr = items.slice(index, index + blockSize); - this.container[this.renderedIndex === -1 ? "populate" : "addItems"](itemsArr.map((item, i)=> { + this.container[this.renderedIndex === -1 ? "populate" : "addItems"](itemsArr.map((item, i) => { return itemFormatter(item, index + i); }), this); const elementHeight = getElementHeight(); @@ -138,7 +138,7 @@ export default class VirtualGroupList extends Widget { } } this.bottomBlank.setHeight(this.tree.sumTo(this.renderedIndex) - this.tree.sumTo(Math.min(end, this.renderedIndex)) + "px"); - this.container.populate(itemsArr.map((item, i)=> { + this.container.populate(itemsArr.map((item, i) => { return itemFormatter(item, (start < 0 ? 0 : start) * blockSize + i); })); } else { @@ -149,7 +149,7 @@ export default class VirtualGroupList extends Widget { } } this.container.element.height(rowHeight * items.length - topHeight); - this.container.populate(itemsArr.map((item, i)=> { + this.container.populate(itemsArr.map((item, i) => { return itemFormatter(item, (start < 0 ? 0 : start) * blockSize + i); })); } diff --git a/src/base/list/virtuallist.js b/src/base/list/virtuallist.js index bf4cca217..ed788acdd 100644 --- a/src/base/list/virtuallist.js +++ b/src/base/list/virtuallist.js @@ -16,7 +16,7 @@ export default class VirtualList extends Widget { blockSize: 10, scrollTop: 0, items: [], - itemFormatter: (item, index)=> { + itemFormatter: (item, index) => { return item; }, }; @@ -34,18 +34,18 @@ export default class VirtualList extends Widget { type: "bi.vertical", items: [{ type: "bi.layout", - ref: (_ref)=> { + ref: (_ref) => { this.topBlank = _ref; }, }, { type: "bi.vertical", scrolly: false, - ref: (_ref)=> { + ref: (_ref) => { this.container = _ref; }, }, { type: "bi.layout", - ref: (_ref)=> { + ref: (_ref) => { this.bottomBlank = _ref; }, }], @@ -55,15 +55,15 @@ export default class VirtualList extends Widget { mounted() { // 这里无法进行结构，因为存在赋值操作，如果使用结构则this.options的值不会跟随变化 const o = this.options; - o.items = BI.isFunction(o.items) ? this.__watch(o.items, (context, newValue)=> { + o.items = BI.isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { this.populate(newValue); }) : o.items; this._populate(); - this.element.scroll((e)=> { + this.element.scroll((e) => { o.scrollTop = this.element.scrollTop(); this._calculateBlocksToRender(); }); - BI.ResizeDetector.addResizeListener(this, ()=> { + BI.ResizeDetector.addResizeListener(this, () => { if (this.element.is(":visible")) { this._calculateBlocksToRender(); } @@ -76,13 +76,13 @@ export default class VirtualList extends Widget { const minContentHeight = scrollTop + height + overscanHeight; let index = (this.renderedIndex + 1) * blockSize, cnt = this.renderedIndex + 1; let lastHeight; - const getElementHeight = ()=> { + const getElementHeight = () => { return this.container.element.height() + this.topBlank.element.height() + this.bottomBlank.element.height(); } lastHeight = getElementHeight(); while (lastHeight < minContentHeight && index < items.length) { const itemsArr = items.slice(index, index + blockSize); - this.container.addItems(itemsArr.map((item, i)=> { + this.container.addItems(itemsArr.map((item, i) => { return itemFormatter(item, index + i); }), this); const addedHeight = getElementHeight() - lastHeight; @@ -158,10 +158,10 @@ export default class VirtualList extends Widget { this.container.element.append(lastFragment); this.topBlank.setHeight(this.tree.sumTo(Math.max(-1, start - 1)) + "px"); this.bottomBlank.setHeight(this.tree.sumTo(this.renderedIndex) - this.tree.sumTo(Math.min(end, this.renderedIndex)) + "px"); - BI.each(needMount, (i, child)=> { + BI.each(needMount, (i, child) => { child && child._mount(); }); - BI.each(needDestroyed, (i, child)=> { + BI.each(needDestroyed, (i, child) => { child && child._destroy(); }); } @@ -180,7 +180,7 @@ export default class VirtualList extends Widget { } _clearChildren() { - BI.each(this.container._children, (i, cell)=> { + BI.each(this.container._children, (i, cell) => { cell && cell._destroy(); }); this.container._children = {}; diff --git a/src/base/pager/pager.js b/src/base/pager/pager.js index a8b2d9418..4eba409e6 100644 --- a/src/base/pager/pager.js +++ b/src/base/pager/pager.js @@ -23,7 +23,7 @@ export default class Pager extends Widget { dynamicShowFirstLast: false, // 是否动态显示首页、尾页 dynamicShowPrevNext: false, // 是否动态显示上一页、下一页 pages: false, // 总页数 - curr: function () { + curr: () => { return 1; }, // 初始化当前页 groups: 0, // 连续显示分页数 @@ -34,7 +34,7 @@ export default class Pager extends Widget { next: "下一页", firstPage: 1, - lastPage: ()=> { // 在万不得已时才会调用这个函数获取最后一页的页码, 主要作用于setValue方法 + lastPage: () => { // 在万不得已时才会调用这个函数获取最后一页的页码, 主要作用于setValue方法 return 1; }, hasPrev: BI.emptyFn, // pages不可用时有效 @@ -185,7 +185,7 @@ export default class Pager extends Widget { this.button_group = BI.createWidget({ type: "bi.button_group", element: this, - items: BI.map(view, (idx, v)=> { + items: BI.map(view, (idx, v) => { v = BI.extend({ cls: "bi-list-item-select bi-border-radius", height: 23, @@ -198,7 +198,7 @@ export default class Pager extends Widget { behaviors, layouts, }); - this.button_group.on(BI.Controller.EVENT_CHANGE, (type, value, obj, ...args)=> { + this.button_group.on(BI.Controller.EVENT_CHANGE, (type, value, obj, ...args) => { // if (self._lock === true) { // return; // } @@ -230,7 +230,7 @@ export default class Pager extends Widget { this._populate(); this.fireEvent(Pager.EVENT_CHANGE, obj); } - this.fireEvent.apply(this, [BI.Controller.EVENT_CHANGE, type, value, obj, args]); + this.fireEvent.apply(this, [BI.Controller.EVENT_CHANGE, type, value, obj, ...args]); }); this.fireEvent(Pager.EVENT_AFTER_POPULATE); } diff --git a/src/base/single/tip/tip.toast.js b/src/base/single/tip/tip.toast.js index 1fa33187a..e93b3627a 100644 --- a/src/base/single/tip/tip.toast.js +++ b/src/base/single/tip/tip.toast.js @@ -100,7 +100,7 @@ export default class Toast extends Tip { items.push({ type: "bi.icon_button", cls: "close-font toast-icon", - handler: ()=> { + handler: () => { this.destroy(); }, height: textHeight, diff --git a/src/base/single/tip/tip.tooltip.js b/src/base/single/tip/tip.tooltip.js index ab95c113a..d50a52c19 100644 --- a/src/base/single/tip/tip.tooltip.js +++ b/src/base/single/tip/tip.tooltip.js @@ -51,7 +51,7 @@ export default class Tooltip extends Tip { element: this, hgap: this._const.hgap, innerVgap: this._const.vgap, - items: BI.map(texts, function (i, text) { + items: BI.map(texts, (i, text) => { return { type: "bi.label", textAlign: textAlign,