fanruan
/
fineui
4
1
Fork 3
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

KERNEL-13891 refactor:base/layer文件夹es6化

es6
Joker.Wang-王顺 2 years ago
parent
b00440694d
commit
b561bf5d85
4 changed files with 949 additions and 934 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 391
      src/base/layer/layer.drawer.js
  2. 484
      src/base/layer/layer.popover.js
  3. 798
      src/base/layer/layer.popup.js
  4. 230
      src/base/layer/layer.searcher.js

391
src/base/layer/layer.drawer.js
Unescape View File

@ -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 });

484
src/base/layer/layer.popover.js
Unescape View File

@ -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";

798
src/base/layer/layer.popup.js
Unescape View File

@ -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 });

230
src/base/layer/layer.searcher.js
Unescape View File

@ -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 {
static xtype = "bi.searcher_view";
static EVENT_CHANGE = "EVENT_CHANGE";
_defaultConfig() {
const conf = super._defaultConfig(arguments);
render: function () {
var self = this, o = this.options;
return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-searcher-view bi-card",
tipText: BI.i18nText("BI-No_Select"),
chooseType: BI.Selection.Single,
this.matcher = BI.createWidget(o.matcher, {
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],
});
},
startSearch: function () {
},
stopSearch: function () {
},
setValue: function (v) {
this.matcher.setValue(v);
this.searcher.setValue(v);
},
getValue: function () {
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);
},
empty: function () {
this.searcher.empty();
this.matcher.empty();
},
hasMatched: function () {
return this.matcher.getAllButtons().length > 0;
},
});
BI.SearcherView.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.searcher_view", BI.SearcherView);
}],
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() {
}
stopSearch() {
}
setValue(v) {
this.matcher.setValue(v);
this.searcher.setValue(v);
}
getValue() {
return this.matcher.getValue().concat(this.searcher.getValue());
}
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() {
this.searcher.empty();
this.matcher.empty();
}
hasMatched() {
return this.matcher.getAllButtons().length > 0;
}
}
BI.extend(BI, { SearcherView });

Write Preview
Loading…
Cancel
Save