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

Pull request #3291: KERNEL-13841 refactor:base文件es6化与import引入适配 

Merge in VISUAL/fineui from ~JOKER.WANG/fineui:es6 to es6

* commit '3db612aa389ee5386bcc7c05d8e7ff029ef7d337':
  KERNEL-13841 refactor:base文件es6化箭头函数和this代码优化
  KERNEL-13841 refactor:base文件es6化与import引入适配
  KERNEL-13891 refactor:base/layer文件夹es6化
  KERNEL-13883 refactor:base/single/tip文件夹es6化
  KERNEL-13846 refactor: 优化代码，采用解构方式引入变量
  feat: 删除无用代码
  feat: 删除todo提示
  feat: 还原demo修改
  feat: 修改bi.a
es6
Joker.Wang-王顺 2 years ago
parent
01d277c002 3db612aa38
commit
336d95fff8
14 changed files with 1917 additions and 1839 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. 309
      src/base/grid/grid.js
  2. 42
      src/base/index.js
  3. 195
      src/base/layer/layer.drawer.js
  4. 251
      src/base/layer/layer.popover.js
  5. 212
      src/base/layer/layer.popup.js
  6. 87
      src/base/layer/layer.searcher.js
  7. 122
      src/base/list/listview.js
  8. 185
      src/base/list/virtualgrouplist.js
  9. 167
      src/base/list/virtuallist.js
  10. 153
      src/base/pager/pager.js
  11. 29
      src/base/single/a/a.js
  12. 18
      src/base/single/tip/0.tip.js
  13. 74
      src/base/single/tip/tip.toast.js
  14. 54
      src/base/single/tip/tip.tooltip.js

309
src/base/grid/grid.js
Unescape View File

@ -5,9 +5,11 @@
* @class BI.GridView
* @extends BI.Widget
*/
BI.GridView = BI.inherit(BI.Widget, {
_defaultConfig: function () {
return BI.extend(BI.GridView.superclass._defaultConfig.apply(this, arguments), {
import { Widget, shortcut } from "../../core";
@shortcut()
export default class GridView extends Widget {
_defaultConfig() {
return BI.extend(super._defaultConfig(arguments), {
baseCls: "bi-grid-view",
// width: 400, //必设
// height: 300, //必设
@ -28,50 +30,54 @@ BI.GridView = BI.inherit(BI.Widget, {
scrollLeft: 0,
scrollTop: 0,
items: [],
itemFormatter: function (item, row, col) {
itemFormatter: (item, row, col) => {
return item;
},
});
},
}
static xtype = "bi.grid_view";
static EVENT_SCROLL = "EVENT_SCROLL";
render: function () {
var self = this, o = this.options;
render() {
const o = this.options;
const { overflowX, overflowY, el } = this.options;
this.renderedCells = [];
this.renderedKeys = [];
this.renderRange = {};
this._scrollLock = false;
this._debounceRelease = BI.debounce(function () {
self._scrollLock = false;
this._debounceRelease = BI.debounce(() => {
this._scrollLock = false;
}, 1000 / 60);
this.container = BI._lazyCreateWidget({
type: "bi.absolute",
});
this.element.scroll(function () {
if (self._scrollLock === true) {
this.element.scroll(() => {
if (this._scrollLock === true) {
return;
}
o.scrollLeft = self.element.scrollLeft();
o.scrollTop = self.element.scrollTop();
self._calculateChildrenToRender();
self.fireEvent(BI.GridView.EVENT_SCROLL, {
o.scrollLeft = this.element.scrollLeft();
o.scrollTop = this.element.scrollTop();
this._calculateChildrenToRender();
this.fireEvent(GridView.EVENT_SCROLL, {
scrollLeft: o.scrollLeft,
scrollTop: o.scrollTop,
});
});
// 兼容一下
var scrollable = o.scrollable, scrollx = o.scrollx, scrolly = o.scrolly;
if (o.overflowX === false) {
if (o.overflowY === false) {
let scrollable = o.scrollable, scrollx = o.scrollx, scrolly = o.scrolly;
if (overflowX === false) {
if (overflowY === false) {
scrollable = false;
} else {
scrollable = "y";
}
} else {
if (o.overflowY === false) {
if (overflowY === false) {
scrollable = "x";
}
}
BI._lazyCreateWidget(o.el, {
BI._lazyCreateWidget(el, {
type: "bi.vertical",
element: this,
scrollable: scrollable,
@ -79,111 +85,113 @@ BI.GridView = BI.inherit(BI.Widget, {
scrollx: scrollx,
items: [this.container],
});
o.items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
self.populate(newValue);
o.items = BI.isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items;
if (o.items.length > 0) {
this._calculateSizeAndPositionData();
this._populate();
}
},
}
// mounted之后绑定事件
mounted: function () {
var o = this.options;
if (o.scrollLeft !== 0 || o.scrollTop !== 0) {
this.element.scrollTop(o.scrollTop);
this.element.scrollLeft(o.scrollLeft);
mounted() {
const { scrollLeft, scrollTop } = this.options;
if (scrollLeft !== 0 || scrollTop !== 0) {
this.element.scrollTop(scrollTop);
this.element.scrollLeft(scrollLeft);
}
}
},
destroyed: function () {
BI.each(this.renderedCells, function(i, cell) {
destroyed() {
BI.each(this.renderedCells, (i, cell) => {
cell.el._destroy();
})
},
}
_calculateSizeAndPositionData: function () {
var o = this.options;
_calculateSizeAndPositionData() {
const { columnCount, items, rowCount, columnWidthGetter, estimatedColumnSize, rowHeightGetter, estimatedRowSize } = this.options;
this.rowCount = 0;
this.columnCount = 0;
if (BI.isNumber(o.columnCount)) {
this.columnCount = o.columnCount;
} else if (o.items.length > 0) {
this.columnCount = o.items[0].length;
if (BI.isNumber(columnCount)) {
this.columnCount = columnCount;
} else if (items.length > 0) {
this.columnCount = items[0].length;
}
if (BI.isNumber(o.rowCount)) {
this.rowCount = o.rowCount;
if (BI.isNumber(rowCount)) {
this.rowCount = rowCount;
} else {
this.rowCount = o.items.length;
this.rowCount = items.length;
}
this._columnSizeAndPositionManager = new BI.ScalingCellSizeAndPositionManager(this.columnCount, columnWidthGetter, estimatedColumnSize);
this._rowSizeAndPositionManager = new BI.ScalingCellSizeAndPositionManager(this.rowCount, rowHeightGetter, estimatedRowSize);
}
this._columnSizeAndPositionManager = new BI.ScalingCellSizeAndPositionManager(this.columnCount, o.columnWidthGetter, o.estimatedColumnSize);
this._rowSizeAndPositionManager = new BI.ScalingCellSizeAndPositionManager(this.rowCount, o.rowHeightGetter, o.estimatedRowSize);
},
_getOverscanIndices: function (cellCount, overscanCellsCount, startIndex, stopIndex) {
_getOverscanIndices(cellCount, overscanCellsCount, startIndex, stopIndex) {
return {
overscanStartIndex: Math.max(0, startIndex - overscanCellsCount),
overscanStopIndex: Math.min(cellCount - 1, stopIndex + overscanCellsCount),
};
},
}
_calculateChildrenToRender: function () {
var self = this, o = this.options;
_calculateChildrenToRender() {
const o = this.options;
var width = o.width, height = o.height, scrollLeft = BI.clamp(o.scrollLeft, 0, this._getMaxScrollLeft()),
const { itemFormatter, items } = this.options;
const width = o.width, height = o.height, scrollLeft = BI.clamp(o.scrollLeft, 0, this._getMaxScrollLeft()),
scrollTop = BI.clamp(o.scrollTop, 0, this._getMaxScrollTop()),
overscanColumnCount = o.overscanColumnCount, overscanRowCount = o.overscanRowCount;
if (height > 0 && width > 0) {
var visibleColumnIndices = this._columnSizeAndPositionManager.getVisibleCellRange(width, scrollLeft);
var visibleRowIndices = this._rowSizeAndPositionManager.getVisibleCellRange(height, scrollTop);
const visibleColumnIndices = this._columnSizeAndPositionManager.getVisibleCellRange(width, scrollLeft);
const visibleRowIndices = this._rowSizeAndPositionManager.getVisibleCellRange(height, scrollTop);
var renderedCells = [], renderedKeys = {}, renderedWidgets = {};
const renderedCells = [], renderedKeys = {}, renderedWidgets = {};
let minX = this._getMaxScrollLeft(), minY = this._getMaxScrollTop(), maxX = 0, maxY = 0;
// 没有可见的单元格就干掉所有渲染过的
if (!BI.isEmpty(visibleColumnIndices) && !BI.isEmpty(visibleRowIndices)) {
var horizontalOffsetAdjustment = this._columnSizeAndPositionManager.getOffsetAdjustment(width, scrollLeft);
var verticalOffsetAdjustment = this._rowSizeAndPositionManager.getOffsetAdjustment(height, scrollTop);
const horizontalOffsetAdjustment = this._columnSizeAndPositionManager.getOffsetAdjustment(width, scrollLeft);
const verticalOffsetAdjustment = this._rowSizeAndPositionManager.getOffsetAdjustment(height, scrollTop);
this._renderedColumnStartIndex = visibleColumnIndices.start;
this._renderedColumnStopIndex = visibleColumnIndices.stop;
this._renderedRowStartIndex = visibleRowIndices.start;
this._renderedRowStopIndex = visibleRowIndices.stop;
var overscanColumnIndices = this._getOverscanIndices(this.columnCount, overscanColumnCount, this._renderedColumnStartIndex, this._renderedColumnStopIndex);
const overscanColumnIndices = this._getOverscanIndices(this.columnCount, overscanColumnCount, this._renderedColumnStartIndex, this._renderedColumnStopIndex);
var overscanRowIndices = this._getOverscanIndices(this.rowCount, overscanRowCount, this._renderedRowStartIndex, this._renderedRowStopIndex);
const overscanRowIndices = this._getOverscanIndices(this.rowCount, overscanRowCount, this._renderedRowStartIndex, this._renderedRowStopIndex);
var columnStartIndex = overscanColumnIndices.overscanStartIndex;
var columnStopIndex = overscanColumnIndices.overscanStopIndex;
var rowStartIndex = overscanRowIndices.overscanStartIndex;
var rowStopIndex = overscanRowIndices.overscanStopIndex;
const columnStartIndex = overscanColumnIndices.overscanStartIndex;
const columnStopIndex = overscanColumnIndices.overscanStopIndex;
const rowStartIndex = overscanRowIndices.overscanStartIndex;
const rowStopIndex = overscanRowIndices.overscanStopIndex;
// 算区间size
var minRowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowStartIndex);
var minColumnDatum = this._columnSizeAndPositionManager.getSizeAndPositionOfCell(columnStartIndex);
var maxRowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowStopIndex);
var maxColumnDatum = this._columnSizeAndPositionManager.getSizeAndPositionOfCell(columnStopIndex);
var top = minRowDatum.offset + verticalOffsetAdjustment;
var left = minColumnDatum.offset + horizontalOffsetAdjustment;
var bottom = maxRowDatum.offset + verticalOffsetAdjustment + maxRowDatum.size;
var right = maxColumnDatum.offset + horizontalOffsetAdjustment + maxColumnDatum.size;
const minRowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowStartIndex);
const minColumnDatum = this._columnSizeAndPositionManager.getSizeAndPositionOfCell(columnStartIndex);
const maxRowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowStopIndex);
const maxColumnDatum = this._columnSizeAndPositionManager.getSizeAndPositionOfCell(columnStopIndex);
const top = minRowDatum.offset + verticalOffsetAdjustment;
const left = minColumnDatum.offset + horizontalOffsetAdjustment;
const bottom = maxRowDatum.offset + verticalOffsetAdjustment + maxRowDatum.size;
const right = maxColumnDatum.offset + horizontalOffsetAdjustment + maxColumnDatum.size;
// 如果滚动的区间并没有超出渲染的范围
if (top >= this.renderRange.minY && bottom <= this.renderRange.maxY && left >= this.renderRange.minX && right <= this.renderRange.maxX) {
return;
}
var minX = this._getMaxScrollLeft(), minY = this._getMaxScrollTop(), maxX = 0, maxY = 0;
var count = 0;
for (var rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) {
var rowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowIndex);
let count = 0;
for (let rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) {
const rowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowIndex);
for (var columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) {
var key = rowIndex + "-" + columnIndex;
var columnDatum = this._columnSizeAndPositionManager.getSizeAndPositionOfCell(columnIndex);
for (let columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) {
const key = rowIndex + "-" + columnIndex;
const columnDatum = this._columnSizeAndPositionManager.getSizeAndPositionOfCell(columnIndex);
var index = this.renderedKeys[key] && this.renderedKeys[key][2];
var child;
const index = this.renderedKeys[key] && this.renderedKeys[key][2];
let child;
if (index >= 0) {
this.renderedCells[index].el.setWidth(columnDatum.size);
this.renderedCells[index].el.setHeight(rowDatum.size);
@ -193,7 +201,7 @@ BI.GridView = BI.inherit(BI.Widget, {
child = this.renderedCells[index].el;
renderedCells.push(this.renderedCells[index]);
} else {
var item = o.itemFormatter(o.items[rowIndex][columnIndex], rowIndex, columnIndex);
const item = itemFormatter(items[rowIndex][columnIndex], rowIndex, columnIndex);
child = BI._lazyCreateWidget(BI.extend({
type: "bi.label",
width: columnDatum.size,
@ -226,15 +234,15 @@ BI.GridView = BI.inherit(BI.Widget, {
}
}
// 已存在的， 需要添加的和需要删除的
var existSet = {}, addSet = {}, deleteArray = [];
BI.each(renderedKeys, function (i, key) {
if (self.renderedKeys[i]) {
const existSet = {}, addSet = {}, deleteArray = [];
BI.each(renderedKeys, (i, key) => {
if (this.renderedKeys[i]) {
existSet[i] = key;
} else {
addSet[i] = key;
}
});
BI.each(this.renderedKeys, function (i, key) {
BI.each(this.renderedKeys, (i, key) => {
if (existSet[i]) {
return;
}
@ -243,12 +251,12 @@ BI.GridView = BI.inherit(BI.Widget, {
}
deleteArray.push(key[2]);
});
BI.each(deleteArray, function (i, index) {
BI.each(deleteArray, (i, index) => {
// 性能优化，不调用destroy方法防止触发destroy事件
self.renderedCells[index].el._destroy();
this.renderedCells[index].el._destroy();
});
var addedItems = [];
BI.each(addSet, function (index, key) {
const addedItems = [];
BI.each(addSet, (index, key) => {
addedItems.push(renderedCells[key[2]]);
});
// 与listview一样, 给上下文
@ -260,13 +268,12 @@ BI.GridView = BI.inherit(BI.Widget, {
this.renderedKeys = renderedKeys;
this.renderRange = { minX: minX, minY: minY, maxX: maxX, maxY: maxY };
}
},
}
_isOverflowX: function () {
var o = this.options;
_isOverflowX() {
const { scrollable, scrollx, overflowX } = this.options;
// 兼容一下
var scrollable = o.scrollable, scrollx = o.scrollx;
if (o.overflowX === false) {
if (overflowX === false) {
return false;
}
if (scrollx) {
@ -276,13 +283,13 @@ BI.GridView = BI.inherit(BI.Widget, {
return true;
}
return false;
},
}
_isOverflowY: function () {
var o = this.options;
_isOverflowY() {
const { scrollable, scrolly, overflowX } = this.options;
// 兼容一下
var scrollable = o.scrollable, scrolly = o.scrolly;
if (o.overflowX === false) {
// var scrollable = o.scrollable, scrolly = o.scrolly;
if (overflowX === false) {
return false;
}
if (scrolly) {
@ -292,26 +299,26 @@ BI.GridView = BI.inherit(BI.Widget, {
return true;
}
return false;
},
}
_getMaxScrollLeft: function () {
_getMaxScrollLeft() {
return Math.max(0, this._getContainerWidth() - this.options.width + (this._isOverflowX() ? BI.DOM.getScrollWidth() : 0));
},
}
_getMaxScrollTop: function () {
_getMaxScrollTop() {
return Math.max(0, this._getContainerHeight() - this.options.height + (this._isOverflowY() ? BI.DOM.getScrollWidth() : 0));
},
}
_getContainerWidth: function () {
_getContainerWidth() {
return this.columnCount * this.options.estimatedColumnSize;
},
}
_getContainerHeight: function () {
_getContainerHeight() {
return this.rowCount * this.options.estimatedRowSize;
},
}
_populate: function (items) {
var o = this.options;
_populate(items) {
const { scrollTop, scrollLeft } = this.options;
this._reRange();
if (items && items !== this.options.items) {
this.options.items = items;
@ -323,14 +330,14 @@ BI.GridView = BI.inherit(BI.Widget, {
// 元素未挂载时不能设置scrollTop
this._debounceRelease();
try {
this.element.scrollTop(o.scrollTop);
this.element.scrollLeft(o.scrollLeft);
this.element.scrollTop(scrollTop);
this.element.scrollLeft(scrollLeft);
} catch (e) {
}
this._calculateChildrenToRender();
},
}
setScrollLeft: function (scrollLeft) {
setScrollLeft(scrollLeft) {
if (this.options.scrollLeft === scrollLeft) {
return;
}
@ -339,9 +346,9 @@ BI.GridView = BI.inherit(BI.Widget, {
this._debounceRelease();
this.element.scrollLeft(this.options.scrollLeft);
this._calculateChildrenToRender();
},
}
setScrollTop: function (scrollTop) {
setScrollTop(scrollTop) {
if (this.options.scrollTop === scrollTop) {
return;
}
@ -350,72 +357,68 @@ BI.GridView = BI.inherit(BI.Widget, {
this._debounceRelease();
this.element.scrollTop(this.options.scrollTop);
this._calculateChildrenToRender();
},
}
setColumnCount: function (columnCount) {
setColumnCount(columnCount) {
this.options.columnCount = columnCount;
},
}
setRowCount: function (rowCount) {
setRowCount(rowCount) {
this.options.rowCount = rowCount;
},
}
setOverflowX: function (b) {
var self = this;
setOverflowX(b) {
if (this.options.overflowX !== !!b) {
this.options.overflowX = !!b;
BI.nextTick(function () {
self.element.css({ overflowX: b ? "auto" : "hidden" });
BI.nextTick(() => {
this.element.css({ overflowX: b ? "auto" : "hidden" });
});
}
},
}
setOverflowY: function (b) {
var self = this;
setOverflowY(b) {
if (this.options.overflowY !== !!b) {
this.options.overflowY = !!b;
BI.nextTick(function () {
self.element.css({ overflowY: b ? "auto" : "hidden" });
BI.nextTick(() => {
this.element.css({ overflowY: b ? "auto" : "hidden" });
});
}
},
}
getScrollLeft: function () {
getScrollLeft() {
return this.options.scrollLeft;
},
getScrollTop: function () {
}
getScrollTop() {
return this.options.scrollTop;
},
}
getMaxScrollLeft: function () {
getMaxScrollLeft() {
return this._getMaxScrollLeft();
},
}
getMaxScrollTop: function () {
getMaxScrollTop() {
return this._getMaxScrollTop();
},
}
setEstimatedColumnSize: function (width) {
setEstimatedColumnSize(width) {
this.options.estimatedColumnSize = width;
},
}
setEstimatedRowSize: function (height) {
setEstimatedRowSize(height) {
this.options.estimatedRowSize = height;
},
}
// 重新计算children
_reRange: function () {
_reRange() {
this.renderRange = {};
},
}
_clearChildren: function () {
_clearChildren() {
this.container._children = {};
this.container.attr("items", []);
},
}
restore: function () {
BI.each(this.renderedCells, function (i, cell) {
restore() {
BI.each(this.renderedCells, (i, cell) => {
cell.el._destroy();
});
this._clearChildren();
@ -423,14 +426,12 @@ BI.GridView = BI.inherit(BI.Widget, {
this.renderedKeys = [];
this.renderRange = {};
this._scrollLock = false;
},
}
populate: function (items) {
populate(items) {
if (items && items !== this.options.items) {
this.restore();
}
this._populate(items);
},
});
BI.GridView.EVENT_SCROLL = "EVENT_SCROLL";
BI.shortcut("bi.grid_view", BI.GridView);
}
}

42
src/base/index.js
Unescape View File

@ -1,15 +1,57 @@
import Pane from "./1.pane";
import Single from "./single/0.single";
import Text from "./single/1.text";
import A from "./single/a/a";
import Tip from "./single/tip/0.tip";
import Toast from "./single/tip/tip.toast";
import Tooltip from "./single/tip/tip.tooltip";
import Drawer from "./layer/layer.drawer";
import { Popover, BarPopover } from "./layer/layer.popover";
import PopupView from "./layer/layer.popup";
import SearcherView from "./layer/layer.searcher";
import ListView from "./list/listview";
import VirtualGroupList from "./list/virtualgrouplist";
import VirtualList from "./list/virtuallist";
import GridView from "./grid/grid";
import Pager from "./pager/pager";
BI.extend(BI, {
Pane,
Single,
Text,
A,
Tip,
Toast,
Tooltip,
Drawer,
Popover,
BarPopover,
PopupView,
SearcherView,
ListView,
VirtualGroupList,
VirtualList,
GridView,
Pager,
});
export {
Pane,
Single,
Text,
A,
Tip,
Toast,
Tooltip,
Drawer,
Popover,
BarPopover,
PopupView,
SearcherView,
ListView,
VirtualGroupList,
VirtualList,
GridView,
Pager,
}

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

@ -3,13 +3,16 @@
* @class BI.Popover
* @extends BI.Widget
*/
BI.Drawer = BI.inherit(BI.Widget, {
SIZE: {
import { Widget, shortcut } from "../../core";
@shortcut()
export default class Drawer extends Widget {
SIZE = {
SMALL: "small",
NORMAL: "normal",
BIG: "big",
},
props: {
}
props = {
baseCls: "bi-drawer bi-card",
size: "normal",
placement: "right", // top/bottom/left/right
@ -20,26 +23,53 @@ BI.Drawer = BI.inherit(BI.Widget, {
bodyHgap: 20,
bodyTgap: 10,
bodyBgap: 10,
},
render: function () {
var self = this;
var o = this.options;
var items = [{
}
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: [{
el: BI.isPlainObject(o.header) ? BI.extend({}, o.header, {
el: BI.isPlainObject(header) ? BI.extend({}, header, {
extraCls: "bi-font-bold",
}) : {
type: "bi.label",
cls: "bi-font-bold",
height: o.headerHeight,
text: o.header,
title: o.header,
height: headerHeight,
text: header,
title: header,
textAlign: "left",
},
left: 20,
@ -48,97 +78,69 @@ BI.Drawer = BI.inherit(BI.Widget, {
bottom: 0,
}],
}, {
el: o.closable ? {
el: closable ? {
type: "bi.icon_button",
cls: "bi-message-close close-font",
height: o.headerHeight,
handler: function () {
self.close();
height: headerHeight,
handler: () => {
this.close();
},
} : {
type: "bi.layout",
},
width: 56,
}],
height: o.headerHeight,
height: headerHeight,
},
height: o.headerHeight,
height: headerHeight,
}, {
el: {
type: "bi.vertical",
scrolly: true,
cls: "drawer-body",
ref: function () {
self.body = this;
ref: (_ref) => {
this.body = _ref;
},
items: [{
el: o.body,
el: body,
}],
},
hgap: o.bodyHgap,
tgap: o.bodyTgap,
bgap: o.bodyBgap,
hgap: bodyHgap,
tgap: bodyTgap,
bgap: bodyBgap,
}];
return BI.extend({
type: "bi.vtape",
items: items,
}, this._getSuitableSize());
},
_getSuitableSize: function () {
var o = this.options;
var size = 0;
switch (o.size) {
case "big":
size = 736;
break;
case "small":
size = 200;
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,
};
}
},
mounted: function () {
var self = this, o = this.options;
switch (o.placement) {
mounted() {
const { placement } = this.options;
switch (placement) {
case "right":
self.element.css({
this.element.css({
top: 0,
left: "100%",
bottom: 0,
});
break;
case "left":
self.element.css({
this.element.css({
top: 0,
right: "100%",
bottom: 0,
});
break;
case "top":
self.element.css({
this.element.css({
left: 0,
right: 0,
bottom: "100%",
});
break;
case "bottom":
self.element.css({
this.element.css({
left: 0,
right: 0,
top: "100%",
@ -147,30 +149,30 @@ BI.Drawer = BI.inherit(BI.Widget, {
default:
break;
}
},
}
show: function (callback) {
var self = this, o = this.options;
requestAnimationFrame(function () {
var size = self._getSuitableSize();
switch (o.placement) {
show(callback) {
const { placement } = this.options;
requestAnimationFrame(() => {
const size = this._getSuitableSize();
switch (placement) {
case "right":
self.element.css({
this.element.css({
left: "calc(100% - " + size.width + "px)",
});
break;
case "left":
self.element.css({
this.element.css({
right: "calc(100% - " + size.width + "px)",
});
break;
case "top":
self.element.css({
this.element.css({
bottom: "calc(100% - " + size.height + "px)",
});
break;
case "bottom":
self.element.css({
this.element.css({
top: "calc(100% - " + size.height + "px)",
});
break;
@ -179,29 +181,29 @@ BI.Drawer = BI.inherit(BI.Widget, {
}
callback && callback();
});
},
}
hide: function (callback) {
var self = this, o = this.options;
requestAnimationFrame(function () {
switch (o.placement) {
hide(callback) {
const { placement } = this.options;
requestAnimationFrame(() => {
switch (placement) {
case "right":
self.element.css({
this.element.css({
left: "100%",
});
break;
case "left":
self.element.css({
this.element.css({
right: "100%",
});
break;
case "top":
self.element.css({
this.element.css({
bottom: "100%",
});
break;
case "bottom":
self.element.css({
this.element.css({
top: "100%",
});
break;
@ -210,31 +212,26 @@ BI.Drawer = BI.inherit(BI.Widget, {
}
setTimeout(callback, 300);
});
},
}
open: function () {
var self = this;
this.show(function () {
self.fireEvent(BI.Drawer.EVENT_OPEN);
open() {
this.show(() => {
this.fireEvent(Drawer.EVENT_OPEN);
});
},
}
close: function () {
var self = this;
this.hide(function () {
self.fireEvent(BI.Drawer.EVENT_CLOSE);
close() {
this.hide(() => {
this.fireEvent(Drawer.EVENT_CLOSE);
});
},
}
setZindex: function (zindex) {
setZindex(zindex) {
this.element.css({ "z-index": zindex });
},
}
destroyed: function () {
},
});
destroyed() {
}
BI.shortcut("bi.drawer", BI.Drawer);
}
BI.Drawer.EVENT_CLOSE = "EVENT_CLOSE";
BI.Drawer.EVENT_OPEN = "EVENT_OPEN";

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

@ -3,17 +3,20 @@
* @class BI.Popover
* @extends BI.Widget
*/
BI.Popover = BI.inherit(BI.Widget, {
_constant: {
import { Widget, shortcut } from "../../core";
@shortcut()
export class Popover extends Widget {
_constant = {
SIZE: {
SMALL: "small",
NORMAL: "normal",
BIG: "big",
},
MAX_HEIGHT: 600,
},
}
props: function () {
props() {
return {
baseCls: "bi-popover bi-card bi-border-radius",
size: "normal", // small, normal, big
@ -29,222 +32,225 @@ BI.Popover = BI.inherit(BI.Widget, {
bodyHgap: BI.SIZE_CONSANTS.H_GAP_SIZE,
bodyTgap: BI.SIZE_CONSANTS.V_GAP_SIZE,
};
},
}
render: function () {
var self = this;
var o = this.options;
var c = this._constant;
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;
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",
const size = this._calculateSize();
this.tracker = new BI.MouseMoveTracker((deltaX, deltaY) => {
const W = BI.Widget._renderEngine.createElement("body").width();
const H = BI.Widget._renderEngine.createElement("body").height();
this.startX += deltaX;
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: self.element[0],
target: this.element[0],
});
}, function () {
self.tracker.releaseMouseMoves();
}, () => {
this.tracker.releaseMouseMoves();
}, _global);
var items = [{
const items = [{
el: {
type: "bi.htape",
cls: "bi-message-title bi-header-background",
items: [{
el: {
type: "bi.absolute",
ref: function (_ref) {
self.dragger = _ref;
ref: (_ref) => {
this.dragger = _ref;
},
items: [{
el: BI.isPlainObject(o.header) ? BI.extend({}, o.header, {
el: BI.isPlainObject(header) ? BI.extend({}, header, {
extraCls: "bi-font-bold",
}) : {
type: "bi.label",
cls: "bi-font-bold",
height: o.headerHeight,
text: o.header,
title: o.header,
height: headerHeight,
text: header,
title: header,
textAlign: "left",
},
top: 0,
bottom: 0,
left: BI.SIZE_CONSANTS.H_GAP_SIZE,
right: o.closable ? 0 : BI.SIZE_CONSANTS.H_GAP_SIZE,
right: closable ? 0 : BI.SIZE_CONSANTS.H_GAP_SIZE,
}],
},
}, o.closable ? {
}, closable ? {
el: {
type: "bi.icon_button",
cls: "bi-message-close close-font",
height: o.headerHeight,
handler: function () {
self.close();
height: headerHeight,
handler: () => {
this.close();
},
},
width: 56,
} : null],
height: o.headerHeight,
height: headerHeight,
},
height: o.headerHeight,
}, o.logic.dynamic ? {
height: headerHeight,
}, logic.dynamic ? {
el: {
type: "bi.vertical",
scrolly: true,
cls: "popover-body",
ref: function () {
self.body = this;
ref: (_ref) => {
this.body = _ref;
},
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),
"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: o.body,
el: body,
}],
hgap: o.bodyHgap,
tgap: o.bodyTgap,
hgap: bodyHgap,
tgap: bodyTgap,
},
} : {
el: {
type: "bi.absolute",
items: [{
el: o.body,
left: o.bodyHgap,
top: o.bodyTgap,
right: o.bodyHgap,
el: body,
left: bodyHgap,
top: bodyTgap,
right: bodyHgap,
bottom: 0,
}],
},
}];
if (o.footer) {
if (footer) {
items.push({
el: {
type: "bi.absolute",
items: [{
el: o.footer,
el: footer,
left: BI.SIZE_CONSANTS.H_GAP_SIZE,
top: 0,
right: BI.SIZE_CONSANTS.H_GAP_SIZE,
bottom: 0,
}],
height: o.footerHeight,
height: footerHeight,
},
height: o.footerHeight,
height: footerHeight,
});
}
return BI.extend({
items: items,
width: this._getSuitableWidth(size.width),
}, o.logic.dynamic ? {
}, logic.dynamic ? {
type: "bi.vertical",
scrolly: false,
} : {
type: "bi.vtape",
height: this._getSuitableHeight(size.height),
});
},
}
// 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);
mounted() {
this.dragger.element.mousedown((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) {
_getSuitableHeight(height) {
return BI.clamp(height, 0, BI.Widget._renderEngine.createElement("body")[0].clientHeight);
},
}
_getSuitableWidth: function (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) {
_calculateSize() {
const { size, width, height } = this.options;
const sizeValue = {};
if (BI.isNotNull(size)) {
switch (size) {
case this._constant.SIZE.SMALL:
size.width = 450;
size.height = 200;
size.type = "small";
sizeValue.width = 450;
sizeValue.height = 200;
sizeValue.type = "small";
break;
case this._constant.SIZE.BIG:
size.width = 900;
size.height = 500;
size.type = "big";
sizeValue.width = 900;
sizeValue.height = 500;
sizeValue.type = "big";
break;
default:
size.width = 550;
size.height = 500;
size.type = "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",
width: width || sizeValue.width,
height: height || sizeValue.height,
type: sizeValue.type || "default",
};
},
setDraggable: function (b) {
}
setDraggable(b) {
this.options.draggable = b;
},
}
hide: function () {
hide() {
},
}
open: function () {
open() {
this.show();
this.fireEvent(BI.Popover.EVENT_OPEN, arguments);
},
this.fireEvent(Popover.EVENT_OPEN, arguments);
}
close: function () {
close() {
this.hide();
this.fireEvent(BI.Popover.EVENT_CLOSE, arguments);
},
this.fireEvent(Popover.EVENT_CLOSE, arguments);
}
setZindex: function (zindex) {
setZindex(zindex) {
this.element.css({ "z-index": zindex });
},
});
}
}
BI.shortcut("bi.popover", BI.Popover);
@shortcut()
export class BarPopover extends Popover {
static xtype = "bi.bar_popover";
BI.BarPopover = BI.inherit(BI.Popover, {
_defaultConfig: function () {
return BI.extend(BI.BarPopover.superclass._defaultConfig.apply(this, arguments), {
_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 = {
beforeCreate() {
const { footer, warningTitle } = this.options;
footer || (this.options.footer = {
type: "bi.right_vertical_adapt",
lgap: 10,
items: [{
@ -252,27 +258,22 @@ BI.BarPopover = BI.inherit(BI.Popover, {
text: this.options.btns[1],
value: 1,
level: "ignore",
handler: function (v) {
self.fireEvent(BI.Popover.EVENT_CANCEL, v);
self.close(v);
handler: (v) => {
this.fireEvent(Popover.EVENT_CANCEL, v);
this.close(v);
},
}, {
type: "bi.button",
text: this.options.btns[0],
warningTitle: o.warningTitle,
warningTitle: warningTitle,
value: 0,
handler: function (v) {
self.fireEvent(BI.Popover.EVENT_CONFIRM, v);
self.close(v);
handler: (v) => {
this.fireEvent(Popover.EVENT_CONFIRM, v);
this.close(v);
},
}],
});
},
});
}
}
BI.shortcut("bi.bar_popover", 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";

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

@ -3,12 +3,19 @@
* @class BI.PopupView
* @extends BI.Widget
*/
BI.PopupView = BI.inherit(BI.Widget, {
_const: {
import { Widget, shortcut } from "../../core";
@shortcut()
export default class PopupView extends Widget {
_const = {
TRIANGLE_LENGTH: 12,
},
_defaultConfig: function (props) {
return BI.extend(BI.PopupView.superclass._defaultConfig.apply(this, arguments), {
}
static xtype = "bi.popup_view";
static EVENT_CHANGE = "EVENT_CHANGE";
_defaultConfig(props) {
return BI.extend(super._defaultConfig(arguments), {
_baseCls: "bi-popup-view" + (props.primary ? " bi-primary" : ""),
// 品牌色
primary: false,
@ -46,10 +53,10 @@ BI.PopupView = BI.inherit(BI.Widget, {
}],
},
});
},
render: function () {
var self = this, o = this.options;
}
render() {
const { minWidth, maxWidth, stopPropagation, stopEvent,
direction, logic, lgap, rgap, tgap, bgap, vgap, hgap, primary, showArrow } = this.options;
function fn (e) {
e.stopPropagation();
}
@ -60,44 +67,44 @@ BI.PopupView = BI.inherit(BI.Widget, {
}
this.element.css({
"z-index": BI.zIndex_popup,
"min-width": BI.pixFormat(o.minWidth),
"max-width": BI.pixFormat(o.maxWidth),
"min-width": BI.pixFormat(minWidth),
"max-width": BI.pixFormat(maxWidth),
}).bind({ click: fn });
this.element.bind("mousewheel", fn);
o.stopPropagation && this.element.bind({ mousedown: fn, mouseup: fn, mouseover: fn });
o.stopEvent && this.element.bind({ mousedown: stop, mouseup: stop, mouseover: stop });
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();
this.view.on(BI.Controller.EVENT_CHANGE, function (type) {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
this.view.on(BI.Controller.EVENT_CHANGE, (type, ...args) => {
this.fireEvent.apply(this, [BI.Controller.EVENT_CHANGE, type, ...args]);
if (type === BI.Events.CLICK) {
self.fireEvent(BI.PopupView.EVENT_CHANGE);
this.fireEvent(PopupView.EVENT_CHANGE);
}
});
BI.createWidget(BI.extend({
element: this,
}, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({}, o.logic, {
}, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(direction), BI.extend({}, 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),
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 (o.showArrow) {
if (showArrow) {
this.arrow = BI.createWidget({
type: "bi.absolute",
cls: "bi-bubble-arrow",
@ -129,34 +136,33 @@ BI.PopupView = BI.inherit(BI.Widget, {
}],
});
}
},
_createView: function () {
var o = this.options;
this.button_group = BI.createWidget(o.el, { type: "bi.button_group", value: o.value });
}
_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(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),
"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;
},
}
_createTool: function () {
var o = this.options;
if (false === o.tool) {
_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) {
_createTab() {
const { tabs, value } = this.options;
if (tabs.length === 0) {
return;
}
@ -164,14 +170,14 @@ BI.PopupView = BI.inherit(BI.Widget, {
type: "bi.center",
cls: "list-view-tab",
height: 25,
items: o.tabs,
value: o.value,
items: tabs,
value: value,
});
},
}
_createToolBar: function () {
var o = this.options;
if (o.buttons.length === 0) {
_createToolBar() {
const { buttons } = this.options;
if (buttons.length === 0) {
return;
}
@ -179,38 +185,38 @@ BI.PopupView = BI.inherit(BI.Widget, {
type: "bi.center",
cls: "list-view-toolbar bi-high-light bi-split-top",
height: 24,
items: BI.createItems(o.buttons, {
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));
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":
@ -220,7 +226,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
left: BI.clamp(((middle ? popupWidth : position.width) - adjustXOffset) / 2 - 8, minLeft, maxLeft),
};
wrapperStyle = {
top: o.tgap + o.vgap,
top: tgap + vgap,
left: 0,
right: "",
bottom: "",
@ -239,7 +245,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
right: BI.clamp(((middle ? popupWidth : position.width) + adjustXOffset) / 2 - 8, minRight, maxRight),
};
wrapperStyle = {
top: o.bgap + o.vgap,
top: bgap + vgap,
left: "",
right: 0,
bottom: "",
@ -259,7 +265,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
left: BI.clamp(((middle ? popupWidth : position.width) - adjustXOffset) / 2 - 8, minLeft, maxLeft),
};
wrapperStyle = {
bottom: o.bgap + o.vgap,
bottom: bgap + vgap,
left: 0,
right: "",
top: "",
@ -278,7 +284,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
right: BI.clamp(((middle ? popupWidth : position.width) + adjustXOffset) / 2 - 8, minRight, maxRight),
};
wrapperStyle = {
bottom: o.bgap + o.vgap,
bottom: bgap + vgap,
right: 0,
left: "",
top: "",
@ -298,7 +304,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
top: BI.clamp(((middle ? popupHeight : position.height) - adjustYOffset) / 2 - 8, minTop, maxTop),
};
wrapperStyle = {
right: o.rgap + o.hgap,
right: rgap + hgap,
top: 0,
bottom: "",
left: "",
@ -317,7 +323,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
bottom: BI.clamp(((middle ? popupHeight : position.height) + adjustYOffset) / 2 - 8, minBottom, maxBottom),
};
wrapperStyle = {
right: o.rgap + o.hgap,
right: rgap + hgap,
bottom: 0,
top: "",
left: "",
@ -337,7 +343,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
top: BI.clamp(((middle ? popupHeight : position.height) - adjustYOffset) / 2 - 8, minTop, maxTop),
};
wrapperStyle = {
left: o.lgap + o.hgap,
left: lgap + hgap,
top: 0,
bottom: "",
right: "",
@ -356,7 +362,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
bottom: BI.clamp(((middle ? popupHeight : position.height) + adjustYOffset) / 2 - 8, minBottom, maxBottom),
};
wrapperStyle = {
left: o.lgap + o.hgap,
left: lgap + hgap,
bottom: 0,
top: "",
right: "",
@ -390,38 +396,38 @@ BI.PopupView = BI.inherit(BI.Widget, {
this.arrowWrapper.element.css(wrapperStyle);
this.placeholder.element.css(placeholderStyle);
}
},
}
getView: function () {
getView() {
return this.view;
},
}
populate: function (items) {
populate(items) {
this.view.populate.apply(this.view, arguments);
},
}
resetWidth: function (w) {
resetWidth(w) {
this.options.width = w;
this.element.width(w);
},
}
resetHeight: function (h) {
var tbHeight = this.toolbar ? (this.toolbar.attr("height") || 24) : 0,
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);
var resetHeight = h - tbHeight - tabHeight - toolHeight - 2 * this.options.innerVgap;
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) });
},
}
setValue: function (selectedValues) {
setValue(selectedValues) {
this.tab && this.tab.setValue(selectedValues);
this.view.setValue(selectedValues);
},
}
getValue: function () {
getValue() {
return this.view.getValue();
},
});
BI.PopupView.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.popup_view", BI.PopupView);
}
}

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

@ -6,9 +6,17 @@
* @extends BI.Pane
*/
BI.SearcherView = BI.inherit(BI.Pane, {
_defaultConfig: function () {
var conf = BI.SearcherView.superclass._defaultConfig.apply(this, arguments);
import { shortcut } from "../../core";
import Pane from "../1.pane";
@shortcut()
export default class SearcherView extends Pane {
static xtype = "bi.searcher_view";
static EVENT_CHANGE = "EVENT_CHANGE";
_defaultConfig() {
const conf = super._defaultConfig(arguments);
return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-searcher-view bi-card",
@ -18,7 +26,7 @@ BI.SearcherView = BI.inherit(BI.Pane, {
matcher: { // 完全匹配的构造器
type: "bi.button_group",
behaviors: {
redmark: function () {
redmark: () => {
return true;
},
},
@ -30,7 +38,7 @@ BI.SearcherView = BI.inherit(BI.Pane, {
searcher: {
type: "bi.button_group",
behaviors: {
redmark: function () {
redmark: () => {
return true;
},
},
@ -40,28 +48,27 @@ BI.SearcherView = BI.inherit(BI.Pane, {
}],
},
});
},
render: function () {
var self = this, o = this.options;
}
render() {
const { matcher, chooseType, value, searcher } = this.options;
this.matcher = BI.createWidget(o.matcher, {
this.matcher = BI.createWidget(matcher, {
type: "bi.button_group",
chooseType: o.chooseType,
chooseType,
behaviors: {
redmark: function () {
redmark: () => {
return true;
},
},
layouts: [{
type: "bi.vertical",
}],
value: o.value,
value,
});
this.matcher.on(BI.Controller.EVENT_CHANGE, function (type, val, ob) {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
this.matcher.on(BI.Controller.EVENT_CHANGE, (type, val, ob, ...args) => {
this.fireEvent.apply(this, [BI.Controller.EVENT_CHANGE, type, val, ob, ...args]);
if (type === BI.Events.CLICK) {
self.fireEvent(BI.SearcherView.EVENT_CHANGE, val, ob);
this.fireEvent(SearcherView.EVENT_CHANGE, val, ob);
}
});
this.spliter = BI.createWidget({
@ -74,23 +81,23 @@ BI.SearcherView = BI.inherit(BI.Pane, {
cls: "searcher-view-spliter bi-background",
}],
});
this.searcher = BI.createWidget(o.searcher, {
this.searcher = BI.createWidget(searcher, {
type: "bi.button_group",
chooseType: o.chooseType,
chooseType,
behaviors: {
redmark: function () {
redmark: () => {
return true;
},
},
layouts: [{
type: "bi.vertical",
}],
value: o.value,
value,
});
this.searcher.on(BI.Controller.EVENT_CHANGE, function (type, val, ob) {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
this.searcher.on(BI.Controller.EVENT_CHANGE, (type, val, ob, ...args) => {
this.fireEvent.apply(this, [BI.Controller.EVENT_CHANGE, type, val, ob, ...args]);
if (type === BI.Events.CLICK) {
self.fireEvent(BI.SearcherView.EVENT_CHANGE, val, ob);
this.fireEvent(BI.SearcherView.EVENT_CHANGE, val, ob);
}
});
@ -99,43 +106,41 @@ BI.SearcherView = BI.inherit(BI.Pane, {
element: this,
items: [this.matcher, this.spliter, this.searcher],
});
},
}
startSearch: function () {
startSearch() {
},
}
stopSearch: function () {
stopSearch() {
},
}
setValue: function (v) {
setValue(v) {
this.matcher.setValue(v);
this.searcher.setValue(v);
},
}
getValue: function () {
getValue() {
return this.matcher.getValue().concat(this.searcher.getValue());
},
}
populate: function (searchResult, matchResult, 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 () {
empty() {
this.searcher.empty();
this.matcher.empty();
},
}
hasMatched: function () {
hasMatched() {
return this.matcher.getAllButtons().length > 0;
},
});
BI.SearcherView.EVENT_CHANGE = "EVENT_CHANGE";
}
}
BI.shortcut("bi.searcher_view", BI.SearcherView);

122
src/base/list/listview.js
Unescape View File

@ -5,8 +5,10 @@
* @class BI.ListView
* @extends BI.Widget
*/
BI.ListView = BI.inherit(BI.Widget, {
props: function () {
import { Widget, shortcut } from "../../core";
@shortcut()
export default class ListView extends Widget {
props() {
return {
baseCls: "bi-list-view",
overscanHeight: 100,
@ -14,79 +16,82 @@ BI.ListView = BI.inherit(BI.Widget, {
scrollTop: 0,
el: {},
items: [],
itemFormatter: function (item, index) {
itemFormatter: (item, index) => {
return item;
},
};
},
}
init: function () {
init() {
this.renderedIndex = -1;
this.cache = {};
},
}
render: function () {
var self = this, o = this.options;
static xtype = "bi.list_view";
render() {
const { el } = this.options;
return {
type: "bi.vertical",
items: [BI.extend({
type: "bi.vertical",
scrolly: false,
ref: function (_ref) {
self.container = _ref;
ref: (_ref) => {
this.container = _ref;
},
}, o.el)],
}, el)],
element: this,
};
},
}
// mounted之后绑定事件
mounted: function () {
var self = this, o = this.options;
o.items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
self.populate(newValue);
mounted() {
const o = this.options;
// 这里无法进行结构，因为存在赋值操作，如果使用结构则this.options的值不会跟随变化
o.items = BI.isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items;
this._populate();
this.element.scroll(function (e) {
o.scrollTop = self.element.scrollTop();
self._calculateBlocksToRender();
this.element.scroll((e) => {
o.scrollTop = this.element.scrollTop();
this._calculateBlocksToRender();
});
var lastWidth = this.element.width(),
let lastWidth = this.element.width(),
lastHeight = this.element.height();
BI.ResizeDetector.addResizeListener(this, function () {
if (!self.element.is(":visible")) {
BI.ResizeDetector.addResizeListener(this, () => {
if (!this.element.is(":visible")) {
return;
}
var width = self.element.width(),
height = self.element.height();
const width = this.element.width(),
height = this.element.height();
if (width !== lastWidth || height !== lastHeight) {
lastWidth = width;
lastHeight = height;
self._calculateBlocksToRender();
this._calculateBlocksToRender();
}
});
},
}
_renderMoreIf: function () {
var self = this, o = this.options;
var height = this.element.height();
var minContentHeight = o.scrollTop + height + o.overscanHeight;
var index = (this.cache[this.renderedIndex] && (this.cache[this.renderedIndex].index + o.blockSize)) || 0;
var cnt = this.renderedIndex + 1;
var lastHeight;
_renderMoreIf() {
const { scrollTop, overscanHeight, blockSize, items, itemFormatter } = this.options;
const height = this.element.height();
const minContentHeight = scrollTop + height + overscanHeight;
let index = (this.cache[this.renderedIndex] && (this.cache[this.renderedIndex].index + blockSize)) || 0;
let cnt = this.renderedIndex + 1;
let lastHeight;
function getElementHeight() {
return self.container.element.height();
const getElementHeight = () => {
return this.container.element.height();
}
lastHeight = getElementHeight();
while ((lastHeight) < minContentHeight && index < o.items.length) {
var items = o.items.slice(index, index + o.blockSize);
this.container.addItems(items.map(function (item, i) {
return o.itemFormatter(item, index + i);
while ((lastHeight) < minContentHeight && index < items.length) {
const itemsArr = items.slice(index, index + blockSize);
this.container.addItems(itemsArr.map((item, i) => {
return itemFormatter(item, index + i);
}), this);
var addedHeight = getElementHeight() - lastHeight;
const addedHeight = getElementHeight() - lastHeight;
this.cache[cnt] = {
index: index,
scrollTop: lastHeight,
@ -94,52 +99,51 @@ BI.ListView = BI.inherit(BI.Widget, {
};
this.renderedIndex = cnt;
cnt++;
index += o.blockSize;
index += blockSize;
lastHeight = getElementHeight();
}
},
_calculateBlocksToRender: function () {
}
_calculateBlocksToRender() {
// BI-115750 不可见状态下依赖元素实际尺寸构造的线段树会分段错误，所以不进行后续计算和线段树的初始化。
// 这样从不可见状态变为可见状态能够重新触发线段树初始化
if (!this.element.is(":visible")) {
return;
}
this._renderMoreIf();
},
}
_populate: function (items) {
var o = this.options;
_populate(items) {
const { scrollTop } = this.options;
if (items && this.options.items !== items) {
this.options.items = items;
}
this._calculateBlocksToRender();
this.element.scrollTop(o.scrollTop);
},
this.element.scrollTop(scrollTop);
}
restore: function () {
restore() {
this.renderedIndex = -1;
this.container.empty();
this.cache = {};
},
}
scrollTo: function (scrollTop) {
scrollTo(scrollTop) {
this.options.scrollTop = scrollTop;
this._calculateBlocksToRender();
this.element.scrollTop(scrollTop);
},
}
populate: function (items) {
populate(items) {
if (items && this.options.items !== items) {
this.restore();
}
this._populate(items);
},
}
beforeDestroy: function () {
beforeDestroy() {
BI.ResizeDetector.removeResizeListener(this);
this.restore();
},
});
BI.shortcut("bi.list_view", BI.ListView);
}
}

185
src/base/list/virtualgrouplist.js
Unescape View File

@ -5,8 +5,11 @@
* @class BI.VirtualList
* @extends BI.Widget
*/
BI.VirtualGroupList = BI.inherit(BI.Widget, {
props: function () {
import { Widget, shortcut } from "../../core";
@shortcut()
export default class VirtualGroupList extends Widget {
props() {
return {
baseCls: "bi-virtual-group-list",
overscanHeight: 100,
@ -15,184 +18,184 @@ BI.VirtualGroupList = BI.inherit(BI.Widget, {
rowHeight: "auto",
items: [],
el: {},
itemFormatter: function (item, index) {
itemFormatter: (item, index) => {
return item;
},
};
},
}
init: function () {
init() {
this.renderedIndex = -1;
},
}
render: function () {
var self = this, o = this.options;
static xtype = "bi.virtual_group_list";
render() {
const { rowHeight, items, el } = this.options;
return {
type: "bi.vertical",
items: [{
type: "bi.layout",
ref: function () {
self.topBlank = this;
ref: () => {
this.topBlank = this;
},
}, {
type: "bi.virtual_group",
height: o.rowHeight * o.items.length,
ref: function () {
self.container = this;
height: rowHeight * items.length,
ref: () => {
this.container = this;
},
layouts: [BI.extend({
type: "bi.vertical",
scrolly: false,
}, o.el)],
}, el)],
}, {
type: "bi.layout",
ref: function () {
self.bottomBlank = this;
ref: () => {
this.bottomBlank = this;
},
}],
element: this,
};
},
}
// mounted之后绑定事件
mounted: function () {
var self = this, o = this.options;
o.items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
self.populate(newValue);
mounted() {
// 这里无法进行结构，因为存在赋值操作，如果使用结构则this.options的值不会跟随变化
const o = this.options;
o.items = BI.isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items;
this._populate();
this.ticking = false;
this.element.scroll(function () {
o.scrollTop = self.element.scrollTop();
if (!self.ticking) {
requestAnimationFrame(function () {
self._calculateBlocksToRender();
self.ticking = false;
this.element.scroll(() => {
o.scrollTop = this.element.scrollTop();
if (!this.ticking) {
requestAnimationFrame(() => {
this._calculateBlocksToRender();
this.ticking = false;
});
self.ticking = true;
this.ticking = true;
}
});
BI.ResizeDetector.addResizeListener(this, function () {
if (self.element.is(":visible")) {
self._calculateBlocksToRender();
BI.ResizeDetector.addResizeListener(this, () => {
if (this.element.is(":visible")) {
this._calculateBlocksToRender();
}
});
},
}
_isAutoHeight: function () {
_isAutoHeight() {
return !BI.isNumber(this.options.rowHeight);
},
}
_renderMoreIf: function () {
var self = this, o = this.options;
var height = this.element.height();
var minContentHeight = o.scrollTop + height + o.overscanHeight;
var index = (this.renderedIndex + 1) * o.blockSize, cnt = this.renderedIndex + 1;
var lastHeight;
function getElementHeight () {
return self.container.element.height() + self.topBlank.element.height() + self.bottomBlank.element.height();
_renderMoreIf() {
const { scrollTop, overscanHeight, blockSize, items, itemFormatter } = this.options;
const height = this.element.height();
const minContentHeight = scrollTop + height + overscanHeight;
let index = (this.renderedIndex + 1) * blockSize, cnt = this.renderedIndex + 1;
let lastHeight;
const getElementHeight = () => {
return this.container.element.height() + this.topBlank.element.height() + this.bottomBlank.element.height();
}
lastHeight = this.renderedIndex === -1 ? 0 : getElementHeight();
while (lastHeight < minContentHeight && index < o.items.length) {
var items = o.items.slice(index, index + o.blockSize);
this.container[self.renderedIndex === -1 ? "populate" : "addItems"](items.map(function (item, i) {
return o.itemFormatter(item, index + i);
while (lastHeight < minContentHeight && index < items.length) {
const itemsArr = items.slice(index, index + blockSize);
this.container[this.renderedIndex === -1 ? "populate" : "addItems"](itemsArr.map((item, i) => {
return itemFormatter(item, index + i);
}), this);
var elementHeight = getElementHeight();
var addedHeight = elementHeight - lastHeight;
const elementHeight = getElementHeight();
const addedHeight = elementHeight - lastHeight;
this.tree.set(cnt, addedHeight);
this.renderedIndex = cnt;
cnt++;
index += o.blockSize;
index += blockSize;
lastHeight = this.renderedIndex === -1 ? 0 : elementHeight;
}
},
}
_calculateBlocksToRender: function () {
_calculateBlocksToRender() {
// BI-115750 不可见状态下依赖元素实际尺寸构造的线段树会分段错误，所以不进行后续计算和线段树的初始化。
// 这样从不可见状态变为可见状态能够重新触发线段树初始化
if (!this.element.is(":visible")) {
return;
}
var o = this.options;
const { scrollTop, overscanHeight, blockSize, items, itemFormatter, rowHeight } = this.options;
this._isAutoHeight() && this._renderMoreIf();
var height = this.element.height();
var minContentHeightFrom = o.scrollTop - o.overscanHeight;
var minContentHeightTo = o.scrollTop + height + o.overscanHeight;
var start = this.tree.greatestLowerBound(minContentHeightFrom);
var end = this.tree.leastUpperBound(minContentHeightTo);
var items = [];
var topHeight = this.tree.sumTo(Math.max(-1, start - 1));
const height = this.element.height();
const minContentHeightFrom = scrollTop - overscanHeight;
const minContentHeightTo = scrollTop + height + overscanHeight;
const start = this.tree.greatestLowerBound(minContentHeightFrom);
const end = this.tree.leastUpperBound(minContentHeightTo);
const itemsArr = [];
const topHeight = this.tree.sumTo(Math.max(-1, start - 1));
this.topBlank.setHeight(topHeight + "px");
if (this._isAutoHeight()) {
for (var i = (start < 0 ? 0 : start); i <= end && i <= this.renderedIndex; i++) {
var index = i * o.blockSize;
for (var j = index; j < index + o.blockSize && j < o.items.length; j++) {
items.push(o.items[j]);
for (let i = (start < 0 ? 0 : start); i <= end && i <= this.renderedIndex; i++) {
const index = i * blockSize;
for (let j = index; j < index + blockSize && j < items.length; j++) {
itemsArr.push(items[j]);
}
}
this.bottomBlank.setHeight(this.tree.sumTo(this.renderedIndex) - this.tree.sumTo(Math.min(end, this.renderedIndex)) + "px");
this.container.populate(items.map(function (item, i) {
return o.itemFormatter(item, (start < 0 ? 0 : start) * o.blockSize + i);
this.container.populate(itemsArr.map((item, i) => {
return itemFormatter(item, (start < 0 ? 0 : start) * blockSize + i);
}));
} else {
for (var i = (start < 0 ? 0 : start); i <= end; i++) {
var index = i * o.blockSize;
for (var j = index; j < index + o.blockSize && j < o.items.length; j++) {
items.push(o.items[j]);
for (let i = (start < 0 ? 0 : start); i <= end; i++) {
const index = i * blockSize;
for (let j = index; j < index + blockSize && j < items.length; j++) {
itemsArr.push(items[j]);
}
}
this.container.element.height(o.rowHeight * o.items.length - topHeight);
this.container.populate(items.map(function (item, i) {
return o.itemFormatter(item, (start < 0 ? 0 : start) * o.blockSize + i);
this.container.element.height(rowHeight * items.length - topHeight);
this.container.populate(itemsArr.map((item, i) => {
return itemFormatter(item, (start < 0 ? 0 : start) * blockSize + i);
}));
}
},
_populate: function (items) {
var o = this.options;
}
_populate(items) {
const { blockSize, rowHeight, scrollTop } = this.options;
if (items && this.options.items !== items) {
// 重新populate一组items,需要重新对线段树分块
this.options.items = items;
this._restore();
}
this.tree = BI.PrefixIntervalTree.uniform(Math.ceil(o.items.length / o.blockSize), this._isAutoHeight() ? 0 : o.rowHeight * o.blockSize);
this.tree = BI.PrefixIntervalTree.uniform(Math.ceil(this.options.items.length / blockSize), this._isAutoHeight() ? 0 : rowHeight * blockSize);
this._calculateBlocksToRender();
try {
this.element.scrollTop(o.scrollTop);
this.element.scrollTop(scrollTop);
} catch (e) {
}
},
}
_restore: function () {
_restore() {
this.renderedIndex = -1;
// 依赖于cache的占位元素也要初始化
this.topBlank.setHeight(0);
this.bottomBlank.setHeight(0);
},
}
// 暂时只支持固定行高的场景
scrollTo: function (scrollTop) {
scrollTo(scrollTop) {
this.options.scrollTop = scrollTop;
this._calculateBlocksToRender();
this.element.scrollTop(scrollTop);
},
}
restore: function () {
restore() {
this.options.scrollTop = 0;
this._restore();
},
}
populate: function (items) {
populate(items) {
this._populate(items);
},
}
beforeDestroy: function () {
beforeDestroy() {
BI.ResizeDetector.removeResizeListener(this);
this.restore();
}
});
BI.shortcut("bi.virtual_group_list", BI.VirtualGroupList);
}

167
src/base/list/virtuallist.js
Unescape View File

@ -5,137 +5,140 @@
* @class BI.VirtualList
* @extends BI.Widget
*/
BI.VirtualList = BI.inherit(BI.Widget, {
props: function () {
import { Widget, shortcut } from "../../core";
@shortcut()
export default class VirtualList extends Widget {
props() {
return {
baseCls: "bi-virtual-list",
overscanHeight: 100,
blockSize: 10,
scrollTop: 0,
items: [],
itemFormatter: function (item, index) {
itemFormatter: (item, index) => {
return item;
},
};
},
}
init: function () {
init() {
this.renderedIndex = -1;
this.cache = {};
},
}
render: function () {
var self = this;
static xtype = "bi.virtual_list";
render() {
return {
type: "bi.vertical",
items: [{
type: "bi.layout",
ref: function () {
self.topBlank = this;
ref: (_ref) => {
this.topBlank = _ref;
},
}, {
type: "bi.vertical",
scrolly: false,
ref: function () {
self.container = this;
ref: (_ref) => {
this.container = _ref;
},
}, {
type: "bi.layout",
ref: function () {
self.bottomBlank = this;
ref: (_ref) => {
this.bottomBlank = _ref;
},
}],
};
},
}
// mounted之后绑定事件
mounted: function () {
var self = this, o = this.options;
o.items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
self.populate(newValue);
mounted() {
// 这里无法进行结构，因为存在赋值操作，如果使用结构则this.options的值不会跟随变化
const o = this.options;
o.items = BI.isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items;
this._populate();
this.element.scroll(function (e) {
o.scrollTop = self.element.scrollTop();
self._calculateBlocksToRender();
this.element.scroll((e) => {
o.scrollTop = this.element.scrollTop();
this._calculateBlocksToRender();
});
BI.ResizeDetector.addResizeListener(this, function () {
if (self.element.is(":visible")) {
self._calculateBlocksToRender();
BI.ResizeDetector.addResizeListener(this, () => {
if (this.element.is(":visible")) {
this._calculateBlocksToRender();
}
});
},
}
_renderMoreIf: function () {
var self = this, o = this.options;
var height = this.element.height();
var minContentHeight = o.scrollTop + height + o.overscanHeight;
var index = (this.renderedIndex + 1) * o.blockSize, cnt = this.renderedIndex + 1;
var lastHeight;
function getElementHeight() {
return self.container.element.height() + self.topBlank.element.height() + self.bottomBlank.element.height();
_renderMoreIf() {
const { scrollTop, overscanHeight, blockSize, items, itemFormatter } = this.options;
const height = this.element.height();
const minContentHeight = scrollTop + height + overscanHeight;
let index = (this.renderedIndex + 1) * blockSize, cnt = this.renderedIndex + 1;
let lastHeight;
const getElementHeight = () => {
return this.container.element.height() + this.topBlank.element.height() + this.bottomBlank.element.height();
}
lastHeight = getElementHeight();
while (lastHeight < minContentHeight && index < o.items.length) {
var items = o.items.slice(index, index + o.blockSize);
this.container.addItems(items.map(function (item, i) {
return o.itemFormatter(item, index + i);
while (lastHeight < minContentHeight && index < items.length) {
const itemsArr = items.slice(index, index + blockSize);
this.container.addItems(itemsArr.map((item, i) => {
return itemFormatter(item, index + i);
}), this);
var addedHeight = getElementHeight() - lastHeight;
const addedHeight = getElementHeight() - lastHeight;
this.tree.set(cnt, addedHeight);
this.renderedIndex = cnt;
cnt++;
index += o.blockSize;
index += blockSize;
lastHeight = getElementHeight();
}
},
}
_calculateBlocksToRender: function () {
var o = this.options;
_calculateBlocksToRender() {
const { scrollTop, overscanHeight, blockSize, items, itemFormatter } = this.options;
// BI-115750 不可见状态下依赖元素实际尺寸构造的线段树会分段错误，所以不进行后续计算和线段树的初始化。
// 这样从不可见状态变为可见状态能够重新触发线段树初始化
if (!this.element.is(":visible")) {
return;
}
this._renderMoreIf();
var height = this.element.height();
var minContentHeightFrom = o.scrollTop - o.overscanHeight;
var minContentHeightTo = o.scrollTop + height + o.overscanHeight;
var start = this.tree.greatestLowerBound(minContentHeightFrom);
var end = this.tree.leastUpperBound(minContentHeightTo);
var needDestroyed = [], needMount = [];
for (var i = 0; i < start; i++) {
var index = i * o.blockSize;
const height = this.element.height();
const minContentHeightFrom = scrollTop - overscanHeight;
const minContentHeightTo = scrollTop + height + overscanHeight;
const start = this.tree.greatestLowerBound(minContentHeightFrom);
const end = this.tree.leastUpperBound(minContentHeightTo);
const needDestroyed = [], needMount = [];
for (let i = 0; i < start; i++) {
let index = i * blockSize;
if (!this.cache[i]) {
this.cache[i] = {};
}
if (!this.cache[i].destroyed) {
for (var j = index; j < index + o.blockSize && j < o.items.length; j++) {
for (let j = index; j < index + blockSize && j < items.length; j++) {
needDestroyed.push(this.container._children[j]);
this.container._children[j] = null;
}
this.cache[i].destroyed = true;
}
}
for (var i = end + 1; i <= this.renderedIndex; i++) {
var index = i * o.blockSize;
for (let i = end + 1; i <= this.renderedIndex; i++) {
let index = i * blockSize;
if (!this.cache[i]) {
this.cache[i] = {};
}
if (!this.cache[i].destroyed) {
for (var j = index; j < index + o.blockSize && j < o.items.length; j++) {
for (let j = index; j < index + blockSize && j < items.length; j++) {
needDestroyed.push(this.container._children[j]);
this.container._children[j] = null;
}
this.cache[i].destroyed = true;
}
}
var firstFragment = BI.Widget._renderEngine.createFragment(),
const firstFragment = BI.Widget._renderEngine.createFragment(),
lastFragment = BI.Widget._renderEngine.createFragment();
var currentFragment = firstFragment;
for (var i = (start < 0 ? 0 : start); i <= end && i <= this.renderedIndex; i++) {
var index = i * o.blockSize;
let currentFragment = firstFragment;
for (let i = (start < 0 ? 0 : start); i <= end && i <= this.renderedIndex; i++) {
const index = i * blockSize;
if (!this.cache[i]) {
this.cache[i] = {};
}
@ -143,8 +146,8 @@ BI.VirtualList = BI.inherit(BI.Widget, {
currentFragment = lastFragment;
}
if (this.cache[i].destroyed === true) {
for (var j = index; j < index + o.blockSize && j < o.items.length; j++) {
var w = this.container._addElement(j, o.itemFormatter(o.items[j], j), this);
for (let j = index; j < index + blockSize && j < items.length; j++) {
const w = this.container._addElement(j, itemFormatter(items[j], j), this);
needMount.push(w);
currentFragment.appendChild(w.element[0]);
}
@ -155,43 +158,42 @@ BI.VirtualList = BI.inherit(BI.Widget, {
this.container.element.append(lastFragment);
this.topBlank.setHeight(this.tree.sumTo(Math.max(-1, start - 1)) + "px");
this.bottomBlank.setHeight(this.tree.sumTo(this.renderedIndex) - this.tree.sumTo(Math.min(end, this.renderedIndex)) + "px");
BI.each(needMount, function (i, child) {
BI.each(needMount, (i, child) => {
child && child._mount();
});
BI.each(needDestroyed, function (i, child) {
BI.each(needDestroyed, (i, child) => {
child && child._destroy();
});
},
_populate: function (items) {
var o = this.options;
}
_populate(items) {
const { blockSize, scrollTop } = this.options;
if (items && this.options.items !== items) {
this.options.items = items;
}
this.tree = BI.PrefixIntervalTree.empty(Math.ceil(o.items.length / o.blockSize));
this.tree = BI.PrefixIntervalTree.empty(Math.ceil(this.options.items.length / blockSize));
this._calculateBlocksToRender();
try {
this.element.scrollTop(o.scrollTop);
this.element.scrollTop(scrollTop);
} catch (e) {
}
},
}
_clearChildren: function () {
BI.each(this.container._children, function (i, cell) {
_clearChildren() {
BI.each(this.container._children, (i, cell) => {
cell && cell._destroy();
});
this.container._children = {};
this.container.attr("items", []);
},
}
scrollTo: function (scrollTop) {
scrollTo(scrollTop) {
this.options.scrollTop = scrollTop;
this._calculateBlocksToRender();
this.element.scrollTop(scrollTop);
},
}
restore: function () {
restore() {
this.renderedIndex = -1;
this._clearChildren();
this.cache = {};
@ -199,19 +201,18 @@ BI.VirtualList = BI.inherit(BI.Widget, {
// 依赖于cache的占位元素也要初始化
this.topBlank.setHeight(0);
this.bottomBlank.setHeight(0);
},
}
populate: function (items) {
populate(items) {
if (items && this.options.items !== items) {
this.restore();
}
this._populate(items);
},
}
beforeDestroy: function () {
beforeDestroy() {
BI.ResizeDetector.removeResizeListener(this);
this.restore();
}
});
BI.shortcut("bi.virtual_list", BI.VirtualList);
}

153
src/base/pager/pager.js
Unescape View File

@ -5,9 +5,11 @@
* @class BI.Pager
* @extends BI.Widget
*/
BI.Pager = BI.inherit(BI.Widget, {
_defaultConfig: function () {
return BI.extend(BI.Pager.superclass._defaultConfig.apply(this, arguments), {
import { Widget, shortcut } from "../../core";
@shortcut()
export default class Pager extends Widget {
_defaultConfig() {
return BI.extend(super._defaultConfig(arguments), {
baseCls: "bi-pager",
behaviors: {},
layouts: [{
@ -21,7 +23,7 @@ BI.Pager = BI.inherit(BI.Widget, {
dynamicShowFirstLast: false, // 是否动态显示首页、尾页
dynamicShowPrevNext: false, // 是否动态显示上一页、下一页
pages: false, // 总页数
curr: function () {
curr: () => {
return 1;
}, // 初始化当前页
groups: 0, // 连续显示分页数
@ -32,15 +34,18 @@ BI.Pager = BI.inherit(BI.Widget, {
next: "下一页",
firstPage: 1,
lastPage: function () { // 在万不得已时才会调用这个函数获取最后一页的页码, 主要作用于setValue方法
lastPage: () => { // 在万不得已时才会调用这个函数获取最后一页的页码, 主要作用于setValue方法
return 1;
},
hasPrev: BI.emptyFn, // pages不可用时有效
hasNext: BI.emptyFn, // pages不可用时有效
});
},
}
render: function () {
static xtype = "bi.pager";
static EVENT_CHANGE = "EVENT_CHANGE";
static EVENT_AFTER_POPULATE = "EVENT_AFTER_POPULATE";
render() {
this.currPage = BI.result(this.options, "curr");
// 翻页太灵敏
// this._lock = false;
@ -48,18 +53,19 @@ BI.Pager = BI.inherit(BI.Widget, {
// self._lock = false;
// }, 300);
this._populate();
},
}
_populate: function () {
var self = this, o = this.options, view = [], dict = {};
_populate() {
const o = this.options, view = [], dict = {};
const { dynamicShow, dynamicShowPrevNext, hasPrev, dynamicShowFirstLast, hasNext, behaviors, layouts, jump } = this.options;
this.empty();
var pages = BI.result(o, "pages");
var curr = BI.result(this, "currPage");
var groups = BI.result(o, "groups");
var first = BI.result(o, "first");
var last = BI.result(o, "last");
var prev = BI.result(o, "prev");
var next = BI.result(o, "next");
const pages = BI.result(o, "pages");
const curr = BI.result(this, "currPage");
let groups = BI.result(o, "groups");
let first = BI.result(o, "first");
let last = BI.result(o, "last");
const prev = BI.result(o, "prev");
const next = BI.result(o, "next");
if (pages === false) {
groups = 0;
@ -73,24 +79,24 @@ BI.Pager = BI.inherit(BI.Widget, {
dict.index = Math.ceil((curr + ((groups > 1 && groups !== pages) ? 1 : 0)) / (groups === 0 ? 1 : groups));
// 当前页非首页，则输出上一页
if (((!o.dynamicShow && !o.dynamicShowPrevNext) || curr > 1) && prev !== false) {
if (((!dynamicShow && !dynamicShowPrevNext) || curr > 1) && prev !== false) {
if (BI.isKey(prev)) {
view.push({
text: prev,
value: "prev",
disabled: pages === false ? o.hasPrev(curr) === false : !(curr > 1 && prev !== false),
disabled: pages === false ? hasPrev(curr) === false : !(curr > 1 && prev !== false),
});
} else {
view.push({
el: BI.extend({
disabled: pages === false ? o.hasPrev(curr) === false : !(curr > 1 && prev !== false),
disabled: pages === false ? hasPrev(curr) === false : !(curr > 1 && prev !== false),
}, prev),
});
}
}
// 当前组非首组，则输出首页
if (((!o.dynamicShow && !o.dynamicShowFirstLast) || (dict.index > 1 && groups !== 0)) && first) {
if (((!dynamicShow && !dynamicShowFirstLast) || (dict.index > 1 && groups !== 0)) && first) {
view.push({
text: first,
value: "first",
@ -109,14 +115,14 @@ BI.Pager = BI.inherit(BI.Widget, {
dict.poor = Math.floor((groups - 1) / 2);
dict.start = dict.index > 1 ? curr - dict.poor : 1;
dict.end = dict.index > 1 ? (function () {
var max = curr + (groups - dict.poor - 1);
const max = curr + (groups - dict.poor - 1);
return max > pages ? pages : max;
}()) : groups;
if (dict.end - dict.start < groups - 1) { // 最后一组状态
dict.start = dict.end - groups + 1;
}
var s = dict.start, e = dict.end;
let s = dict.start, e = dict.end;
if (first && last && (dict.index > 1 && groups !== 0) && (pages > groups && dict.end < pages && groups !== 0)) {
s++;
e--;
@ -137,7 +143,7 @@ BI.Pager = BI.inherit(BI.Widget, {
}
// 总页数大于连续分页数，且当前组最大页小于总页，输出尾页
if (((!o.dynamicShow && !o.dynamicShowFirstLast) || (pages > groups && dict.end < pages && groups !== 0)) && last) {
if (((!dynamicShow && !dynamicShowFirstLast) || (pages > groups && dict.end < pages && groups !== 0)) && last) {
if (pages > groups && dict.end < pages && groups !== 0 && groups !== pages - 1) {
view.push({
type: "bi.label",
@ -154,11 +160,11 @@ BI.Pager = BI.inherit(BI.Widget, {
// 当前页不为尾页时，输出下一页
dict.flow = !prev && groups === 0;
if (((!o.dynamicShow && !o.dynamicShowPrevNext) && next) || (curr !== pages && next || dict.flow)) {
if (((!dynamicShow && !dynamicShowPrevNext) && next) || (curr !== pages && next || dict.flow)) {
view.push((function () {
if (BI.isKey(next)) {
if (pages === false) {
return { text: next, value: "next", disabled: o.hasNext(curr) === false };
return { text: next, value: "next", disabled: hasNext(curr) === false };
}
return (dict.flow && curr === pages)
@ -170,7 +176,7 @@ BI.Pager = BI.inherit(BI.Widget, {
return {
el: BI.extend({
disabled: pages === false ? o.hasNext(curr) === false : !(curr !== pages && next || dict.flow),
disabled: pages === false ? hasNext(curr) === false : !(curr !== pages && next || dict.flow),
}, next),
};
}()));
@ -179,7 +185,7 @@ BI.Pager = BI.inherit(BI.Widget, {
this.button_group = BI.createWidget({
type: "bi.button_group",
element: this,
items: BI.map(view, function (idx, v) {
items: BI.map(view, (idx, v) => {
v = BI.extend({
cls: "bi-list-item-select bi-border-radius",
height: 23,
@ -189,87 +195,85 @@ BI.Pager = BI.inherit(BI.Widget, {
return BI.formatEL(v);
}),
behaviors: o.behaviors,
layouts: o.layouts,
behaviors,
layouts,
});
this.button_group.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
this.button_group.on(BI.Controller.EVENT_CHANGE, (type, value, obj, ...args) => {
// if (self._lock === true) {
// return;
// }
// self._lock = true;
// self._debouce();
if (type === BI.Events.CLICK) {
var v = self.button_group.getValue()[0];
var v = this.button_group.getValue()[0];
switch (v) {
case "first":
self.currPage = 1;
this.currPage = 1;
break;
case "last":
self.currPage = pages;
this.currPage = pages;
break;
case "prev":
self.currPage--;
this.currPage--;
break;
case "next":
self.currPage++;
this.currPage++;
break;
default:
self.currPage = v;
this.currPage = v;
break;
}
o.jump.apply(self, [{
jump.apply(this, [{
pages: pages,
curr: self.currPage,
curr: this.currPage,
}]);
self._populate();
self.fireEvent(BI.Pager.EVENT_CHANGE, obj);
this._populate();
this.fireEvent(Pager.EVENT_CHANGE, obj);
}
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
this.fireEvent.apply(this, [BI.Controller.EVENT_CHANGE, type, value, obj, ...args]);
});
this.fireEvent(BI.Pager.EVENT_AFTER_POPULATE);
},
this.fireEvent(Pager.EVENT_AFTER_POPULATE);
}
getCurrentPage: function () {
getCurrentPage() {
return this.currPage;
},
}
setAllPages: function (pages) {
setAllPages(pages) {
this.options.pages = pages;
this._populate();
},
}
hasPrev: function (v) {
hasPrev(v) {
v || (v = 1);
var o = this.options;
var pages = this.options.pages;
const { pages, hasPrev } = this.options;
return pages === false ? o.hasPrev(v) : v > 1;
},
return pages === false ? hasPrev(v) : v > 1;
}
hasNext: function (v) {
hasNext(v) {
v || (v = 1);
var o = this.options;
var pages = this.options.pages;
return pages === false ? o.hasNext(v) : v < pages;
},
const { pages, hasNext } = this.options;
return pages === false ? hasNext(v) : v < pages;
}
setValue: function (v) {
var o = this.options;
setValue(v) {
const o = this.options;
const { pages } = this.options;
v = v || 0;
v = v < 1 ? 1 : v;
if (o.pages === false) {
if (pages === false) {
var lastPage = BI.result(o, "lastPage"), firstPage = 1;
this.currPage = v > lastPage ? lastPage : ((firstPage = BI.result(o, "firstPage")), (v < firstPage ? firstPage : v));
} else {
v = v > o.pages ? o.pages : v;
v = v > pages ? pages : v;
this.currPage = v;
}
this._populate();
},
}
getValue: function () {
var val = this.button_group.getValue()[0];
getValue() {
const val = this.button_group.getValue()[0];
switch (val) {
case "prev":
return -1;
@ -282,19 +286,16 @@ BI.Pager = BI.inherit(BI.Widget, {
default:
return val;
}
},
}
attr: function (key, value) {
BI.Pager.superclass.attr.apply(this, arguments);
attr(key, value) {
super.attr(arguments);
if (key === "curr") {
this.currPage = BI.result(this.options, "curr");
}
},
}
populate: function () {
populate() {
this._populate();
},
});
BI.Pager.EVENT_CHANGE = "EVENT_CHANGE";
BI.Pager.EVENT_AFTER_POPULATE = "EVENT_AFTER_POPULATE";
BI.shortcut("bi.pager", BI.Pager);
}
}

29
src/base/single/a/a.js
Unescape View File

@ -6,10 +6,14 @@
* @extends BI.Text
* @abstract
*/
BI.A = BI.inherit(BI.Text, {
_defaultConfig: function () {
var conf = BI.A.superclass._defaultConfig.apply(this, arguments);
import { shortcut } from "../../../core";
import Text from "../1.text";
@shortcut()
export default class A extends Text {
static xtype = "bi.a";
_defaultConfig() {
const conf = super._defaultConfig(arguments);
return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-a display-block",
href: "",
@ -17,18 +21,17 @@ BI.A = BI.inherit(BI.Text, {
el: null,
tagName: "a",
});
},
}
render: function () {
var o = this.options;
BI.A.superclass.render.apply(this, arguments);
this.element.attr({ href: o.href, target: o.target });
if (o.el) {
BI.createWidget(o.el, {
render() {
const { href, target, el} = this.options;
super.render();
this.element.attr({ href, target });
if (el) {
BI.createWidget(el, {
element: this,
});
}
},
});
}
BI.shortcut("bi.a", BI.A);
}

18
src/base/single/tip/0.tip.js
Unescape View File

@ -6,18 +6,20 @@
* @extends BI.Single
* @abstract
*/
BI.Tip = BI.inherit(BI.Single, {
_defaultConfig: function () {
var conf = BI.Tip.superclass._defaultConfig.apply(this, arguments);
import Single from "../0.single";
export default class Tip extends Single {
_defaultConfig() {
const conf = super._defaultConfig(arguments);
return BI.extend(conf, {
_baseCls: (conf._baseCls || "") + " bi-tip",
zIndex: BI.zIndex_tip,
});
},
}
_init: function () {
BI.Tip.superclass._init.apply(this, arguments);
_init() {
super._init();
this.element.css({ zIndex: this.options.zIndex });
},
});
}
}

74
src/base/single/tip/tip.toast.js
Unescape View File

@ -5,16 +5,23 @@
* @class BI.Toast
* @extends BI.Tip
*/
BI.Toast = BI.inherit(BI.Tip, {
_const: {
import { shortcut } from "../../../core";
import Tip from "./0.tip";
@shortcut()
export default class Toast extends Tip {
_const= {
closableMinWidth: 146,
minWidth: 100,
closableMaxWidth: 410,
maxWidth: 400,
},
}
static EVENT_DESTORY = "EVENT_DESTORY";
static xtype = "bi.toast";
_defaultConfig: function () {
return BI.extend(BI.Toast.superclass._defaultConfig.apply(this, arguments), {
_defaultConfig() {
return BI.extend(super._defaultConfig(arguments), {
extraCls: "bi-toast",
text: "",
level: "success", // success或warning
@ -25,15 +32,16 @@ BI.Toast = BI.inherit(BI.Tip, {
innerHgap: 4,
hgap: 8,
});
},
}
render: function () {
var self = this, o = this.options, c = this._const;
render() {
const { closable, level, autoClose, textHeight, text, hgap, vgap, innerHgap } = this.options;
const { closableMinWidth, minWidth, maxWidth, closableMaxWidth } = this._const;
this.element.css({
minWidth: BI.pixFormat(o.closable ? c.closableMinWidth : c.minWidth),
maxWidth: BI.pixFormat(o.closable ? c.closableMaxWidth : c.maxWidth),
minWidth: BI.pixFormat(closable ? closableMinWidth : minWidth),
maxWidth: BI.pixFormat(closable ? closableMaxWidth : maxWidth),
});
this.element.addClass("toast-" + o.level);
this.element.addClass("toast-" + level);
function fn(e) {
e.stopPropagation();
e.stopEvent();
@ -49,8 +57,8 @@ BI.Toast = BI.inherit(BI.Tip, {
mouseleave: fn,
mousemove: fn,
});
var cls;
switch (o.level) {
let cls;
switch (level) {
case "success":
cls = "toast-success-font";
break;
@ -70,32 +78,32 @@ BI.Toast = BI.inherit(BI.Tip, {
}
function hasCloseIcon() {
return o.closable === true || (o.closable === null && o.autoClose === false);
return closable === true || (closable === null && autoClose === false);
}
var items = [{
const items = [{
type: "bi.icon_label",
cls: cls + " toast-icon",
height: o.textHeight,
height: textHeight,
}, {
el: BI.isPlainObject(o.text) ? o.text : {
el: BI.isPlainObject(text) ? text : {
type: "bi.label",
whiteSpace: "normal",
text: o.text,
textHeight: o.textHeight,
text: text,
textHeight: textHeight,
textAlign: "left",
},
}];
var columnSize = ["", "fill"];
const columnSize = ["", "fill"];
if (hasCloseIcon()) {
items.push({
type: "bi.icon_button",
cls: "close-font toast-icon",
handler: function () {
self.destroy();
handler: () => {
this.destroy();
},
height: o.textHeight,
height: textHeight,
});
columnSize.push("");
}
@ -104,16 +112,16 @@ BI.Toast = BI.inherit(BI.Tip, {
type: "bi.horizontal",
horizontalAlign: BI.HorizontalAlign.Stretch,
items: items,
hgap: o.hgap,
vgap: o.vgap,
innerHgap: o.innerHgap,
hgap: hgap,
vgap: vgap,
innerHgap: innerHgap,
columnSize: columnSize,
};
},
}
beforeDestroy() {
this.fireEvent(Toast.EVENT_DESTORY);
}
}
beforeDestroy: function () {
this.fireEvent(BI.Toast.EVENT_DESTORY);
},
});
BI.Toast.EVENT_DESTORY = "EVENT_DESTORY";
BI.shortcut("bi.toast", BI.Toast);

54
src/base/single/tip/tip.tooltip.js
Unescape View File

@ -5,14 +5,19 @@
* @class BI.Tooltip
* @extends BI.Tip
*/
BI.Tooltip = BI.inherit(BI.Tip, {
_const: {
import { shortcut } from "../../../core";
import Tip from "./0.tip";
@shortcut()
export default class Tooltip extends Tip {
_const = {
hgap: 8,
vgap: 4,
},
}
static xtype = "bi.tooltip";
_defaultConfig: function () {
return BI.extend(BI.Tooltip.superclass._defaultConfig.apply(this, arguments), {
_defaultConfig() {
return BI.extend(super._defaultConfig(arguments), {
extraCls: "bi-tooltip",
text: "",
level: "success", // success或warning
@ -20,14 +25,14 @@ BI.Tooltip = BI.inherit(BI.Tip, {
stopPropagation: false,
textAlign: "left",
});
},
}
render: function () {
var o = this.options;
this.element.addClass("tooltip-" + o.level);
render () {
const { level, stopPropagation, stopEvent, text, textAlign } = this.options;
this.element.addClass("tooltip-" + level);
function fn(e) {
o.stopPropagation && e.stopPropagation();
o.stopEvent && e.stopEvent();
stopPropagation && e.stopPropagation();
stopEvent && e.stopEvent();
}
this.element.bind({
click: fn,
@ -39,17 +44,17 @@ BI.Tooltip = BI.inherit(BI.Tip, {
mousemove: fn,
});
var texts = (o.text + "").split("\n");
const texts = (text + "").split("\n");
if (texts.length > 1) {
BI.createWidget({
type: "bi.vertical",
element: this,
hgap: this._const.hgap,
innerVgap: this._const.vgap,
items: BI.map(texts, function (i, text) {
items: BI.map(texts, (i, text) => {
return {
type: "bi.label",
textAlign: o.textAlign,
textAlign: textAlign,
whiteSpace: "normal",
text: text,
textHeight: 18,
@ -61,29 +66,28 @@ BI.Tooltip = BI.inherit(BI.Tip, {
this.text = BI.createWidget({
type: "bi.label",
element: this,
textAlign: o.textAlign,
textAlign: textAlign,
whiteSpace: "normal",
text: o.text,
text: text,
title: null,
textHeight: 18,
hgap: this._const.hgap,
vgap: this._const.vgap,
});
}
},
}
setWidth: function (width) {
setWidth(width) {
this.element.width(BI.pixFormat(width - 2 * this._const.hgap));
},
}
setText: function (text) {
setText(text) {
this.text && this.text.setText(text);
},
}
setLevel: function (level) {
setLevel(level) {
this.element.removeClass("tooltip-success").removeClass("tooltip-warning");
this.element.addClass("tooltip-" + level);
},
});
}
BI.shortcut("bi.tooltip", BI.Tooltip);
}

Write Preview
Loading…
Cancel
Save