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] =?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 });