Browse Source

BI-16736 popover优化——加入size属性&fineui demo中加入简单的搜索

es6
Young 7 years ago
parent
commit
48cce58cd9
  1. 68
      demo/js/core/popup/demo.popover.js
  2. 41
      demo/js/west.js
  3. 48
      dist/base.js
  4. 50
      dist/bundle.js
  5. 2
      dist/core.js
  6. 109
      dist/demo.js
  7. 48
      src/base/layer/layer.popover.js
  8. 2
      utils/utils.js

68
demo/js/core/popup/demo.popover.js

@ -12,12 +12,13 @@ Demo.Func = BI.inherit(BI.Widget, {
vgap: 10, vgap: 10,
items: [{ items: [{
type: "bi.text_button", type: "bi.text_button",
text: "点击弹出Popover", text: "点击弹出Popover(normal size)",
height: 30, height: 30,
handler: function () { handler: function () {
BI.Popovers.remove(id); BI.Popovers.remove(id);
BI.Popovers.create(id, { BI.Popovers.create(id, {
type: "bi.bar_popover", type: "bi.bar_popover",
size: "big",
header: { header: {
type: "bi.label", type: "bi.label",
text: "这个是header" text: "这个是header"
@ -26,10 +27,67 @@ Demo.Func = BI.inherit(BI.Widget, {
type: "bi.label", type: "bi.label",
text: "这个是body" text: "这个是body"
} }
// footer: { }).open(id);
// type: "bi.label", }
// text: "这个是footer" }, {
// } type: "bi.text_button",
text: "点击弹出Popover(small size)",
height: 30,
handler: function () {
BI.Popovers.remove(id);
BI.Popovers.create(id, {
type: "bi.bar_popover",
size: "small",
header: {
type: "bi.label",
text: "这个是header"
},
body: {
type: "bi.label",
text: "这个是body"
}
}).open(id);
}
}, {
type: "bi.text_button",
text: "点击弹出Popover(big size)",
height: 30,
handler: function () {
BI.Popovers.remove(id);
BI.Popovers.create(id, {
type: "bi.bar_popover",
size: "big",
header: {
type: "bi.label",
text: "这个是header"
},
body: {
type: "bi.label",
text: "这个是body"
}
}).open(id);
}
}, {
type: "bi.text_button",
text: "点击弹出Popover(custom)",
height: 30,
handler: function () {
BI.Popovers.remove(id);
BI.Popovers.create(id, {
width: 400,
height: 300,
header: {
type: "bi.label",
text: "这个是header"
},
body: {
type: "bi.label",
text: "这个是body"
},
footer: {
type: "bi.label",
text: "这个是footer"
}
}).open(id); }).open(id);
} }
}] }]

41
demo/js/west.js

@ -2,11 +2,45 @@ Demo.West = BI.inherit(BI.Widget, {
props: { props: {
baseCls: "demo-west bi-border-right bi-card" baseCls: "demo-west bi-border-right bi-card"
}, },
mounted: function () {
this.searcher.setAdapter(this.tree);
},
render: function () { render: function () {
var self = this; var self = this;
return { return {
type: "bi.vertical", type: "bi.vtape",
items: [{ items: [{
type: "bi.center_adapt",
items: [{
type: "bi.searcher",
el: {
type: "bi.search_editor",
watermark: "简单搜索"
},
width: 200,
isAutoSearch: false,
isAutoSync: false,
ref: function (ref) {
self.searcher = ref;
},
popup: {
type: "bi.multilayer_single_level_tree",
cls: "bi-card",
listeners: [{
eventName: BI.MultiLayerSingleLevelTree.EVENT_CHANGE,
action: function (v) {
self.fireEvent(Demo.West.EVENT_VALUE_CHANGE, v);
}
}]
},
onSearch: function (op, callback) {
var result = BI.Func.getSearchResult(Demo.CONFIG, op.keyword, "text");
var items = result.match.concat(result.find);
callback(items);
}
}],
height: 40
}, {
type: "bi.multilayer_single_level_tree", type: "bi.multilayer_single_level_tree",
listeners: [{ listeners: [{
eventName: BI.MultiLayerSingleLevelTree.EVENT_CHANGE, eventName: BI.MultiLayerSingleLevelTree.EVENT_CHANGE,
@ -14,7 +48,10 @@ Demo.West = BI.inherit(BI.Widget, {
self.fireEvent(Demo.West.EVENT_VALUE_CHANGE, v); self.fireEvent(Demo.West.EVENT_VALUE_CHANGE, v);
} }
}], }],
items: Demo.CONFIG items: Demo.CONFIG,
ref: function (ref) {
self.tree = ref;
}
}] }]
}; };
} }

48
dist/base.js vendored

@ -15307,11 +15307,20 @@ BI.shortcut("bi.grid_view", BI.GridView);/**
* @extends BI.Widget * @extends BI.Widget
*/ */
BI.Popover = BI.inherit(BI.Widget, { BI.Popover = BI.inherit(BI.Widget, {
_constant: {
SIZE: {
SMALL: "small",
NORMAL: "normal",
BIG: "big"
}
},
_defaultConfig: function () { _defaultConfig: function () {
return BI.extend(BI.Popover.superclass._defaultConfig.apply(this, arguments), { return BI.extend(BI.Popover.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-popover bi-card", baseCls: "bi-popover bi-card",
width: 600, // width: 600,
height: 500, // height: 500,
size: "normal", // small, normal, big
header: null, header: null,
body: null, body: null,
footer: null footer: null
@ -15401,15 +15410,38 @@ BI.Popover = BI.inherit(BI.Widget, {
}; };
} }
BI.createWidget({ var size = this._calculateSize();
return {
type: "bi.border", type: "bi.border",
element: this, items: items,
items: items width: size.width,
}); height: size.height
};
}, },
show: function () { _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 = 220;
break;
case this._constant.SIZE.BIG:
size.width = 900;
size.height = 500;
break;
default:
size.width = 550;
size.height = 500;
}
}
return {
width: o.width || size.width,
height: o.height || size.height
};
}, },
hide: function () { hide: function () {

50
dist/bundle.js vendored

@ -19488,7 +19488,7 @@ if (!window.BI) {
}); });
// 集合相关方法 // 集合相关方法
_.each(["where", "findWhere", "contains", "invoke", "pluck", "shuffle", "sample", "toArray", "size"], function (name) { _.each(["where", "findWhere", "invoke", "pluck", "shuffle", "sample", "toArray", "size"], function (name) {
BI[name] = _apply(name); BI[name] = _apply(name);
}); });
_.each(["get", "each", "map", "reduce", "reduceRight", "find", "filter", "reject", "every", "all", "some", "any", "max", "min", _.each(["get", "each", "map", "reduce", "reduceRight", "find", "filter", "reject", "every", "all", "some", "any", "max", "min",
@ -49134,11 +49134,20 @@ BI.shortcut("bi.grid_view", BI.GridView);/**
* @extends BI.Widget * @extends BI.Widget
*/ */
BI.Popover = BI.inherit(BI.Widget, { BI.Popover = BI.inherit(BI.Widget, {
_constant: {
SIZE: {
SMALL: "small",
NORMAL: "normal",
BIG: "big"
}
},
_defaultConfig: function () { _defaultConfig: function () {
return BI.extend(BI.Popover.superclass._defaultConfig.apply(this, arguments), { return BI.extend(BI.Popover.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-popover bi-card", baseCls: "bi-popover bi-card",
width: 600, // width: 600,
height: 500, // height: 500,
size: "normal", // small, normal, big
header: null, header: null,
body: null, body: null,
footer: null footer: null
@ -49228,15 +49237,38 @@ BI.Popover = BI.inherit(BI.Widget, {
}; };
} }
BI.createWidget({ var size = this._calculateSize();
return {
type: "bi.border", type: "bi.border",
element: this, items: items,
items: items width: size.width,
}); height: size.height
};
}, },
show: function () { _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 = 220;
break;
case this._constant.SIZE.BIG:
size.width = 900;
size.height = 500;
break;
default:
size.width = 550;
size.height = 500;
}
}
return {
width: o.width || size.width,
height: o.height || size.height
};
}, },
hide: function () { hide: function () {

2
dist/core.js vendored

@ -19488,7 +19488,7 @@ if (!window.BI) {
}); });
// 集合相关方法 // 集合相关方法
_.each(["where", "findWhere", "contains", "invoke", "pluck", "shuffle", "sample", "toArray", "size"], function (name) { _.each(["where", "findWhere", "invoke", "pluck", "shuffle", "sample", "toArray", "size"], function (name) {
BI[name] = _apply(name); BI[name] = _apply(name);
}); });
_.each(["get", "each", "map", "reduce", "reduceRight", "find", "filter", "reject", "every", "all", "some", "any", "max", "min", _.each(["get", "each", "map", "reduce", "reduceRight", "find", "filter", "reject", "every", "all", "some", "any", "max", "min",

109
dist/demo.js vendored

@ -8543,12 +8543,13 @@ Demo.Func = BI.inherit(BI.Widget, {
vgap: 10, vgap: 10,
items: [{ items: [{
type: "bi.text_button", type: "bi.text_button",
text: "点击弹出Popover", text: "点击弹出Popover(normal size)",
height: 30, height: 30,
handler: function () { handler: function () {
BI.Popovers.remove(id); BI.Popovers.remove(id);
BI.Popovers.create(id, { BI.Popovers.create(id, {
type: "bi.bar_popover", type: "bi.bar_popover",
size: "big",
header: { header: {
type: "bi.label", type: "bi.label",
text: "这个是header" text: "这个是header"
@ -8557,10 +8558,67 @@ Demo.Func = BI.inherit(BI.Widget, {
type: "bi.label", type: "bi.label",
text: "这个是body" text: "这个是body"
} }
// footer: { }).open(id);
// type: "bi.label", }
// text: "这个是footer" }, {
// } type: "bi.text_button",
text: "点击弹出Popover(small size)",
height: 30,
handler: function () {
BI.Popovers.remove(id);
BI.Popovers.create(id, {
type: "bi.bar_popover",
size: "small",
header: {
type: "bi.label",
text: "这个是header"
},
body: {
type: "bi.label",
text: "这个是body"
}
}).open(id);
}
}, {
type: "bi.text_button",
text: "点击弹出Popover(big size)",
height: 30,
handler: function () {
BI.Popovers.remove(id);
BI.Popovers.create(id, {
type: "bi.bar_popover",
size: "big",
header: {
type: "bi.label",
text: "这个是header"
},
body: {
type: "bi.label",
text: "这个是body"
}
}).open(id);
}
}, {
type: "bi.text_button",
text: "点击弹出Popover(custom)",
height: 30,
handler: function () {
BI.Popovers.remove(id);
BI.Popovers.create(id, {
width: 400,
height: 300,
header: {
type: "bi.label",
text: "这个是header"
},
body: {
type: "bi.label",
text: "这个是body"
},
footer: {
type: "bi.label",
text: "这个是footer"
}
}).open(id); }).open(id);
} }
}] }]
@ -11605,11 +11663,45 @@ BI.shortcut("demo.preview", Demo.Preview);Demo.West = BI.inherit(BI.Widget, {
props: { props: {
baseCls: "demo-west bi-border-right bi-card" baseCls: "demo-west bi-border-right bi-card"
}, },
mounted: function () {
this.searcher.setAdapter(this.tree);
},
render: function () { render: function () {
var self = this; var self = this;
return { return {
type: "bi.vertical", type: "bi.vtape",
items: [{ items: [{
type: "bi.center_adapt",
items: [{
type: "bi.searcher",
el: {
type: "bi.search_editor",
watermark: "简单搜索"
},
width: 200,
isAutoSearch: false,
isAutoSync: false,
ref: function (ref) {
self.searcher = ref;
},
popup: {
type: "bi.multilayer_single_level_tree",
cls: "bi-card",
listeners: [{
eventName: BI.MultiLayerSingleLevelTree.EVENT_CHANGE,
action: function (v) {
self.fireEvent(Demo.West.EVENT_VALUE_CHANGE, v);
}
}]
},
onSearch: function (op, callback) {
var result = BI.Func.getSearchResult(Demo.CONFIG, op.keyword, "text");
var items = result.match.concat(result.find);
callback(items);
}
}],
height: 40
}, {
type: "bi.multilayer_single_level_tree", type: "bi.multilayer_single_level_tree",
listeners: [{ listeners: [{
eventName: BI.MultiLayerSingleLevelTree.EVENT_CHANGE, eventName: BI.MultiLayerSingleLevelTree.EVENT_CHANGE,
@ -11617,7 +11709,10 @@ BI.shortcut("demo.preview", Demo.Preview);Demo.West = BI.inherit(BI.Widget, {
self.fireEvent(Demo.West.EVENT_VALUE_CHANGE, v); self.fireEvent(Demo.West.EVENT_VALUE_CHANGE, v);
} }
}], }],
items: Demo.CONFIG items: Demo.CONFIG,
ref: function (ref) {
self.tree = ref;
}
}] }]
}; };
} }

48
src/base/layer/layer.popover.js

@ -4,11 +4,20 @@
* @extends BI.Widget * @extends BI.Widget
*/ */
BI.Popover = BI.inherit(BI.Widget, { BI.Popover = BI.inherit(BI.Widget, {
_constant: {
SIZE: {
SMALL: "small",
NORMAL: "normal",
BIG: "big"
}
},
_defaultConfig: function () { _defaultConfig: function () {
return BI.extend(BI.Popover.superclass._defaultConfig.apply(this, arguments), { return BI.extend(BI.Popover.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-popover bi-card", baseCls: "bi-popover bi-card",
width: 600, // width: 600,
height: 500, // height: 500,
size: "normal", // small, normal, big
header: null, header: null,
body: null, body: null,
footer: null footer: null
@ -98,15 +107,38 @@ BI.Popover = BI.inherit(BI.Widget, {
}; };
} }
BI.createWidget({ var size = this._calculateSize();
return {
type: "bi.border", type: "bi.border",
element: this, items: items,
items: items width: size.width,
}); height: size.height
};
}, },
show: function () { _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 = 220;
break;
case this._constant.SIZE.BIG:
size.width = 900;
size.height = 500;
break;
default:
size.width = 550;
size.height = 500;
}
}
return {
width: o.width || size.width,
height: o.height || size.height
};
}, },
hide: function () { hide: function () {

2
utils/utils.js

@ -10696,7 +10696,7 @@ if (!window.BI) {
}); });
// 集合相关方法 // 集合相关方法
_.each(["where", "findWhere", "contains", "invoke", "pluck", "shuffle", "sample", "toArray", "size"], function (name) { _.each(["where", "findWhere", "invoke", "pluck", "shuffle", "sample", "toArray", "size"], function (name) {
BI[name] = _apply(name); BI[name] = _apply(name);
}); });
_.each(["get", "each", "map", "reduce", "reduceRight", "find", "filter", "reject", "every", "all", "some", "any", "max", "min", _.each(["get", "each", "map", "reduce", "reduceRight", "find", "filter", "reject", "every", "all", "some", "any", "max", "min",

Loading…
Cancel
Save