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
Unified 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. 389
      src/base/layer/layer.drawer.js
  4. 483
      src/base/layer/layer.popover.js
  5. 794
      src/base/layer/layer.popup.js
  6. 213
      src/base/layer/layer.searcher.js
  7. 250
      src/base/list/listview.js
  8. 353
      src/base/list/virtualgrouplist.js
  9. 357
      src/base/list/virtuallist.js
  10. 153
      src/base/pager/pager.js
  11. 49
      src/base/single/a/a.js
  12. 28
      src/base/single/tip/0.tip.js
  13. 216
      src/base/single/tip/tip.toast.js
  14. 120
      src/base/single/tip/tip.tooltip.js

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

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

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

@ -3,238 +3,235 @@
* @class BI.Popover * @class BI.Popover
* @extends BI.Widget * @extends BI.Widget
*/ */
BI.Drawer = BI.inherit(BI.Widget, {
SIZE: {
SMALL: "small",
NORMAL: "normal",
BIG: "big",
},
props: {
baseCls: "bi-drawer bi-card",
size: "normal",
placement: "right", // top/bottom/left/right
header: null,
headerHeight: 40,
body: null,
closable: true, // BI-40839 是否显示右上角的关闭按钮
bodyHgap: 20,
bodyTgap: 10,
bodyBgap: 10,
},
render: function () { import { Widget, shortcut } from "../../core";
var self = this; @shortcut()
var o = this.options; export default class Drawer extends Widget {
var items = [{ SIZE = {
el: { SMALL: "small",
type: "bi.htape", NORMAL: "normal",
cls: "bi-message-title bi-header-background", BIG: "big",
}
props = {
baseCls: "bi-drawer bi-card",
size: "normal",
placement: "right", // top/bottom/left/right
header: null,
headerHeight: 40,
body: null,
closable: true, // BI-40839 是否显示右上角的关闭按钮
bodyHgap: 20,
bodyTgap: 10,
bodyBgap: 10,
}
static xtype = "bi.drawer";
static EVENT_CLOSE = "EVENT_CLOSE";
static EVENT_OPEN = "EVENT_OPEN";
_getSuitableSize() {
const { size, height, placement, width } = this.options;
let sizeValue = 0;
switch (size) {
case "big":
sizeValue = 736;
break;
case "small":
sizeValue = 200;
break;
case "normal":
default:
sizeValue = 378;
break;
}
if (placement === "top" || placement === "bottom") {
return {
height: height || sizeValue,
};
}
if (placement === "left" || placement === "right") {
return {
width: width || sizeValue,
};
}
}
render() {
const { header, headerHeight, closable, body, bodyHgap, bodyTgap, bodyBgap } = this.options;
const items = [{
el: {
type: "bi.htape",
cls: "bi-message-title bi-header-background",
items: [{
type: "bi.absolute",
items: [{ items: [{
type: "bi.absolute", el: BI.isPlainObject(header) ? BI.extend({}, header, {
items: [{ extraCls: "bi-font-bold",
el: BI.isPlainObject(o.header) ? BI.extend({}, o.header, { }) : {
extraCls: "bi-font-bold", type: "bi.label",
}) : { cls: "bi-font-bold",
type: "bi.label", height: headerHeight,
cls: "bi-font-bold", text: header,
height: o.headerHeight, title: header,
text: o.header, textAlign: "left",
title: o.header,
textAlign: "left",
},
left: 20,
top: 0,
right: 0,
bottom: 0,
}],
}, {
el: o.closable ? {
type: "bi.icon_button",
cls: "bi-message-close close-font",
height: o.headerHeight,
handler: function () {
self.close();
},
} : {
type: "bi.layout",
}, },
width: 56, left: 20,
top: 0,
right: 0,
bottom: 0,
}], }],
height: o.headerHeight, }, {
}, el: closable ? {
height: o.headerHeight, type: "bi.icon_button",
}, { cls: "bi-message-close close-font",
el: { height: headerHeight,
type: "bi.vertical", handler: () => {
scrolly: true, this.close();
cls: "drawer-body", },
ref: function () { } : {
self.body = this; type: "bi.layout",
}, },
items: [{ width: 56,
el: o.body, }],
}], height: headerHeight,
},
height: headerHeight,
}, {
el: {
type: "bi.vertical",
scrolly: true,
cls: "drawer-body",
ref: (_ref) => {
this.body = _ref;
}, },
hgap: o.bodyHgap, items: [{
tgap: o.bodyTgap, el: body,
bgap: o.bodyBgap, }],
}]; },
hgap: bodyHgap,
tgap: bodyTgap,
bgap: bodyBgap,
}];
return BI.extend({ return BI.extend({
type: "bi.vtape", type: "bi.vtape",
items: items, items: items,
}, this._getSuitableSize()); }, this._getSuitableSize());
}, }
mounted() {
const { placement } = this.options;
switch (placement) {
case "right":
this.element.css({
top: 0,
left: "100%",
bottom: 0,
});
break;
case "left":
this.element.css({
top: 0,
right: "100%",
bottom: 0,
});
break;
case "top":
this.element.css({
left: 0,
right: 0,
bottom: "100%",
});
break;
case "bottom":
this.element.css({
left: 0,
right: 0,
top: "100%",
});
break;
default:
break;
}
}
_getSuitableSize: function () { show(callback) {
var o = this.options; const { placement } = this.options;
var size = 0; requestAnimationFrame(() => {
switch (o.size) { const size = this._getSuitableSize();
case "big": switch (placement) {
size = 736; case "right":
this.element.css({
left: "calc(100% - " + size.width + "px)",
});
break; break;
case "small": case "left":
size = 200; this.element.css({
right: "calc(100% - " + size.width + "px)",
});
break;
case "top":
this.element.css({
bottom: "calc(100% - " + size.height + "px)",
});
break;
case "bottom":
this.element.css({
top: "calc(100% - " + size.height + "px)",
});
break; break;
case "normal":
default: default:
size = 378;
break; break;
} }
if (o.placement === "top" || o.placement === "bottom") { callback && callback();
return { });
height: o.height || size, }
};
}
if (o.placement === "left" || o.placement === "right") {
return {
width: o.width || size,
};
}
},
mounted: function () { hide(callback) {
var self = this, o = this.options; const { placement } = this.options;
switch (o.placement) { requestAnimationFrame(() => {
switch (placement) {
case "right": case "right":
self.element.css({ this.element.css({
top: 0,
left: "100%", left: "100%",
bottom: 0,
}); });
break; break;
case "left": case "left":
self.element.css({ this.element.css({
top: 0,
right: "100%", right: "100%",
bottom: 0,
}); });
break; break;
case "top": case "top":
self.element.css({ this.element.css({
left: 0,
right: 0,
bottom: "100%", bottom: "100%",
}); });
break; break;
case "bottom": case "bottom":
self.element.css({ this.element.css({
left: 0,
right: 0,
top: "100%", top: "100%",
}); });
break; break;
default: default:
break; break;
} }
}, setTimeout(callback, 300);
});
show: function (callback) { }
var self = this, o = this.options;
requestAnimationFrame(function () {
var size = self._getSuitableSize();
switch (o.placement) {
case "right":
self.element.css({
left: "calc(100% - " + size.width + "px)",
});
break;
case "left":
self.element.css({
right: "calc(100% - " + size.width + "px)",
});
break;
case "top":
self.element.css({
bottom: "calc(100% - " + size.height + "px)",
});
break;
case "bottom":
self.element.css({
top: "calc(100% - " + size.height + "px)",
});
break;
default:
break;
}
callback && callback();
});
},
hide: function (callback) {
var self = this, o = this.options;
requestAnimationFrame(function () {
switch (o.placement) {
case "right":
self.element.css({
left: "100%",
});
break;
case "left":
self.element.css({
right: "100%",
});
break;
case "top":
self.element.css({
bottom: "100%",
});
break;
case "bottom":
self.element.css({
top: "100%",
});
break;
default:
break;
}
setTimeout(callback, 300);
});
},
open: function () { open() {
var self = this; this.show(() => {
this.show(function () { this.fireEvent(Drawer.EVENT_OPEN);
self.fireEvent(BI.Drawer.EVENT_OPEN); });
}); }
},
close: function () { close() {
var self = this; this.hide(() => {
this.hide(function () { this.fireEvent(Drawer.EVENT_CLOSE);
self.fireEvent(BI.Drawer.EVENT_CLOSE); });
}); }
},
setZindex: function (zindex) { setZindex(zindex) {
this.element.css({ "z-index": 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";

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

@ -3,276 +3,277 @@
* @class BI.Popover * @class BI.Popover
* @extends BI.Widget * @extends BI.Widget
*/ */
BI.Popover = BI.inherit(BI.Widget, {
_constant: {
SIZE: {
SMALL: "small",
NORMAL: "normal",
BIG: "big",
},
MAX_HEIGHT: 600,
},
props: function () { import { Widget, shortcut } from "../../core";
return { @shortcut()
baseCls: "bi-popover bi-card bi-border-radius", export class Popover extends Widget {
size: "normal", // small, normal, big _constant = {
logic: { SIZE: {
dynamic: false, SMALL: "small",
}, NORMAL: "normal",
header: null, BIG: "big",
headerHeight: 40, },
body: null, MAX_HEIGHT: 600,
footer: null, }
footerHeight: 44,
closable: true, // BI-40839 是否显示右上角的关闭按钮
bodyHgap: BI.SIZE_CONSANTS.H_GAP_SIZE,
bodyTgap: BI.SIZE_CONSANTS.V_GAP_SIZE,
};
},
render: function () { props() {
var self = this; return {
var o = this.options; baseCls: "bi-popover bi-card bi-border-radius",
var c = this._constant; size: "normal", // small, normal, big
this.startX = 0; logic: {
this.startY = 0; dynamic: false,
var size = this._calculateSize(); },
this.tracker = new BI.MouseMoveTracker(function (deltaX, deltaY) { header: null,
var W = BI.Widget._renderEngine.createElement("body").width(); headerHeight: 40,
var H = BI.Widget._renderEngine.createElement("body").height(); body: null,
self.startX += deltaX; footer: null,
self.startY += deltaY; footerHeight: 44,
self.element.css({ closable: true, // BI-40839 是否显示右上角的关闭按钮
left: BI.clamp(self.startX, 0, W - self.element.width()) + "px", bodyHgap: BI.SIZE_CONSANTS.H_GAP_SIZE,
top: BI.clamp(self.startY, 0, H - self.element.height()) + "px", bodyTgap: BI.SIZE_CONSANTS.V_GAP_SIZE,
}); };
// BI-12134 没有什么特别好的方法 }
BI.Resizers._resize({
target: self.element[0], static xtype = "bi.popover";
}); static EVENT_CLOSE = "EVENT_CLOSE";
}, function () { static EVENT_OPEN = "EVENT_OPEN";
self.tracker.releaseMouseMoves(); static EVENT_CANCEL = "EVENT_CANCEL";
}, _global); static EVENT_CONFIRM = "EVENT_CONFIRM";
var items = [{
el: { render() {
type: "bi.htape", // var self = this;
cls: "bi-message-title bi-header-background", const { header, headerHeight, closable, logic, footer, footerHeight, body, bodyTgap, bodyHgap } = this.options;
items: [{ const c = this._constant;
el: { this.startX = 0;
type: "bi.absolute", this.startY = 0;
ref: function (_ref) { const size = this._calculateSize();
self.dragger = _ref; this.tracker = new BI.MouseMoveTracker((deltaX, deltaY) => {
}, const W = BI.Widget._renderEngine.createElement("body").width();
items: [{ const H = BI.Widget._renderEngine.createElement("body").height();
el: BI.isPlainObject(o.header) ? BI.extend({}, o.header, { this.startX += deltaX;
extraCls: "bi-font-bold", this.startY += deltaY;
}) : { this.element.css({
type: "bi.label", left: BI.clamp(this.startX, 0, W - this.element.width()) + "px",
cls: "bi-font-bold", top: BI.clamp(this.startY, 0, H - this.element.height()) + "px",
height: o.headerHeight, });
text: o.header, // BI-12134 没有什么特别好的方法
title: o.header, BI.Resizers._resize({
textAlign: "left", target: this.element[0],
}, });
top: 0, }, () => {
bottom: 0, this.tracker.releaseMouseMoves();
left: BI.SIZE_CONSANTS.H_GAP_SIZE, }, _global);
right: o.closable ? 0 : BI.SIZE_CONSANTS.H_GAP_SIZE, const items = [{
}], el: {
type: "bi.htape",
cls: "bi-message-title bi-header-background",
items: [{
el: {
type: "bi.absolute",
ref: (_ref) => {
this.dragger = _ref;
}, },
}, o.closable ? { items: [{
el: { el: BI.isPlainObject(header) ? BI.extend({}, header, {
type: "bi.icon_button", extraCls: "bi-font-bold",
cls: "bi-message-close close-font", }) : {
height: o.headerHeight, type: "bi.label",
handler: function () { cls: "bi-font-bold",
self.close(); height: headerHeight,
text: header,
title: header,
textAlign: "left",
}, },
}, top: 0,
width: 56, bottom: 0,
} : null], left: BI.SIZE_CONSANTS.H_GAP_SIZE,
height: o.headerHeight, right: closable ? 0 : BI.SIZE_CONSANTS.H_GAP_SIZE,
}, }],
height: o.headerHeight,
}, o.logic.dynamic ? {
el: {
type: "bi.vertical",
scrolly: true,
cls: "popover-body",
ref: function () {
self.body = this;
}, },
css: { }, closable ? {
"max-height": this._getSuitableBodyHeight(c.MAX_HEIGHT - o.headerHeight - (o.footer ? o.footerHeight : 0) - o.bodyTgap), el: {
"min-height": this._getSuitableBodyHeight(size.height - o.headerHeight - (o.footer ? o.footerHeight : 0) - o.bodyTgap), type: "bi.icon_button",
cls: "bi-message-close close-font",
height: headerHeight,
handler: () => {
this.close();
},
}, },
items: [{ width: 56,
el: o.body, } : null],
}], height: headerHeight,
hgap: o.bodyHgap, },
tgap: o.bodyTgap, height: headerHeight,
}, logic.dynamic ? {
el: {
type: "bi.vertical",
scrolly: true,
cls: "popover-body",
ref: (_ref) => {
this.body = _ref;
},
css: {
"max-height": this._getSuitableBodyHeight(c.MAX_HEIGHT - headerHeight - (footer ? footerHeight : 0) - bodyTgap),
"min-height": this._getSuitableBodyHeight(size.height - headerHeight - (footer ? footerHeight : 0) - bodyTgap),
}, },
} : { items: [{
el: body,
}],
hgap: bodyHgap,
tgap: bodyTgap,
},
} : {
el: {
type: "bi.absolute",
items: [{
el: body,
left: bodyHgap,
top: bodyTgap,
right: bodyHgap,
bottom: 0,
}],
},
}];
if (footer) {
items.push({
el: { el: {
type: "bi.absolute", type: "bi.absolute",
items: [{ items: [{
el: o.body, el: footer,
left: o.bodyHgap, left: BI.SIZE_CONSANTS.H_GAP_SIZE,
top: o.bodyTgap, top: 0,
right: o.bodyHgap, right: BI.SIZE_CONSANTS.H_GAP_SIZE,
bottom: 0, bottom: 0,
}], }],
height: footerHeight,
}, },
}]; height: footerHeight,
if (o.footer) {
items.push({
el: {
type: "bi.absolute",
items: [{
el: o.footer,
left: BI.SIZE_CONSANTS.H_GAP_SIZE,
top: 0,
right: BI.SIZE_CONSANTS.H_GAP_SIZE,
bottom: 0,
}],
height: o.footerHeight,
},
height: o.footerHeight,
});
}
return BI.extend({
items: items,
width: this._getSuitableWidth(size.width),
}, o.logic.dynamic ? {
type: "bi.vertical",
scrolly: false,
} : {
type: "bi.vtape",
height: this._getSuitableHeight(size.height),
}); });
}, }
// mounted之后绑定事件 return BI.extend({
mounted: function () { items: items,
var self = this; width: this._getSuitableWidth(size.width),
this.dragger.element.mousedown(function (e) { }, logic.dynamic ? {
if (self.options.draggable !== false) { type: "bi.vertical",
self.startX = self.element[0].offsetLeft; scrolly: false,
self.startY = self.element[0].offsetTop; } : {
self.tracker.captureMouseMoves(e); type: "bi.vtape",
} height: this._getSuitableHeight(size.height),
}); });
}, }
// mounted之后绑定事件
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) { _getSuitableBodyHeight(height) {
var o = this.options; 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); 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()); return BI.clamp(width, 0, BI.Widget._renderEngine.createElement("body").width());
}, }
_calculateSize: function () { _calculateSize() {
var o = this.options; const { size, width, height } = this.options;
var size = {}; const sizeValue = {};
if (BI.isNotNull(o.size)) { if (BI.isNotNull(size)) {
switch (o.size) { switch (size) {
case this._constant.SIZE.SMALL: case this._constant.SIZE.SMALL:
size.width = 450; sizeValue.width = 450;
size.height = 200; sizeValue.height = 200;
size.type = "small"; sizeValue.type = "small";
break; break;
case this._constant.SIZE.BIG: case this._constant.SIZE.BIG:
size.width = 900; sizeValue.width = 900;
size.height = 500; sizeValue.height = 500;
size.type = "big"; sizeValue.type = "big";
break; break;
default: default:
size.width = 550; sizeValue.width = 550;
size.height = 500; sizeValue.height = 500;
size.type = "default"; sizeValue.type = "default";
}
} }
}
return { return {
width: o.width || size.width, width: width || sizeValue.width,
height: o.height || size.height, height: height || sizeValue.height,
type: size.type || "default", type: sizeValue.type || "default",
}; };
}, }
setDraggable(b) {
this.options.draggable = b;
}
setDraggable: function (b) { hide() {
this.options.draggable = b;
},
hide: function () { }
}, open() {
this.show();
this.fireEvent(Popover.EVENT_OPEN, arguments);
}
open: function () { close() {
this.show(); this.hide();
this.fireEvent(BI.Popover.EVENT_OPEN, arguments); this.fireEvent(Popover.EVENT_CLOSE, arguments);
}, }
close: function () { setZindex(zindex) {
this.hide(); this.element.css({ "z-index": zindex });
this.fireEvent(BI.Popover.EVENT_CLOSE, arguments); }
}, }
setZindex: function (zindex) { @shortcut()
this.element.css({ "z-index": zindex }); export class BarPopover extends Popover {
}, static xtype = "bi.bar_popover";
});
BI.shortcut("bi.popover", BI.Popover); _defaultConfig() {
return BI.extend(super._defaultConfig(arguments), {
btns: [BI.i18nText("BI-Basic_OK"), BI.i18nText("BI-Basic_Cancel")],
});
}
BI.BarPopover = BI.inherit(BI.Popover, { beforeCreate() {
_defaultConfig: function () { const { footer, warningTitle } = this.options;
return BI.extend(BI.BarPopover.superclass._defaultConfig.apply(this, arguments), { footer || (this.options.footer = {
btns: [BI.i18nText("BI-Basic_OK"), BI.i18nText("BI-Basic_Cancel")], type: "bi.right_vertical_adapt",
}); lgap: 10,
}, items: [{
type: "bi.button",
beforeCreate: function () { text: this.options.btns[1],
var self = this; value: 1,
var o = this.options; level: "ignore",
o.footer || (o.footer = { handler: (v) => {
type: "bi.right_vertical_adapt", this.fireEvent(Popover.EVENT_CANCEL, v);
lgap: 10, this.close(v);
items: [{ },
type: "bi.button", }, {
text: this.options.btns[1], type: "bi.button",
value: 1, text: this.options.btns[0],
level: "ignore", warningTitle: warningTitle,
handler: function (v) { value: 0,
self.fireEvent(BI.Popover.EVENT_CANCEL, v); handler: (v) => {
self.close(v); this.fireEvent(Popover.EVENT_CONFIRM, v);
}, this.close(v);
}, { },
type: "bi.button", }],
text: this.options.btns[0], });
warningTitle: o.warningTitle, }
value: 0, }
handler: function (v) {
self.fireEvent(BI.Popover.EVENT_CONFIRM, v);
self.close(v);
},
}],
});
},
});
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";

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

@ -3,425 +3,431 @@
* @class BI.PopupView * @class BI.PopupView
* @extends BI.Widget * @extends BI.Widget
*/ */
BI.PopupView = BI.inherit(BI.Widget, {
_const: {
TRIANGLE_LENGTH: 12,
},
_defaultConfig: function (props) {
return BI.extend(BI.PopupView.superclass._defaultConfig.apply(this, arguments), {
_baseCls: "bi-popup-view" + (props.primary ? " bi-primary" : ""),
// 品牌色
primary: false,
maxWidth: "auto",
minWidth: 100,
// maxHeight: 200,
minHeight: 24,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0,
vgap: 0,
hgap: 0,
innerVgap: 0,
innerHgap: 0,
showArrow: false,
direction: BI.Direction.Top, // 工具栏的方向
stopEvent: false, // 是否停止mousedown、mouseup事件
stopPropagation: false, // 是否停止mousedown、mouseup向上冒泡
logic: {
dynamic: true,
},
tool: false, // 自定义工具栏 import { Widget, shortcut } from "../../core";
tabs: [], // 导航栏 @shortcut()
buttons: [], // toolbar栏 export default class PopupView extends Widget {
_const = {
TRIANGLE_LENGTH: 12,
}
el: { static xtype = "bi.popup_view";
type: "bi.button_group", static EVENT_CHANGE = "EVENT_CHANGE";
items: [],
chooseType: 0,
behaviors: {},
layouts: [{
type: "bi.vertical",
}],
},
});
},
render: function () { _defaultConfig(props) {
var self = this, o = this.options; return BI.extend(super._defaultConfig(arguments), {
function fn (e) { _baseCls: "bi-popup-view" + (props.primary ? " bi-primary" : ""),
e.stopPropagation(); // 品牌色
} primary: false,
function stop (e) { maxWidth: "auto",
e.stopEvent(); minWidth: 100,
// maxHeight: 200,
minHeight: 24,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0,
vgap: 0,
hgap: 0,
innerVgap: 0,
innerHgap: 0,
showArrow: false,
direction: BI.Direction.Top, // 工具栏的方向
stopEvent: false, // 是否停止mousedown、mouseup事件
stopPropagation: false, // 是否停止mousedown、mouseup向上冒泡
logic: {
dynamic: true,
},
return false; tool: false, // 自定义工具栏
} tabs: [], // 导航栏
this.element.css({ buttons: [], // toolbar栏
"z-index": BI.zIndex_popup,
"min-width": BI.pixFormat(o.minWidth),
"max-width": BI.pixFormat(o.maxWidth),
}).bind({ click: fn });
this.element.bind("mousewheel", fn); el: {
type: "bi.button_group",
items: [],
chooseType: 0,
behaviors: {},
layouts: [{
type: "bi.vertical",
}],
},
});
}
render() {
const { minWidth, maxWidth, stopPropagation, stopEvent,
direction, logic, lgap, rgap, tgap, bgap, vgap, hgap, primary, showArrow } = this.options;
function fn (e) {
e.stopPropagation();
}
function stop (e) {
e.stopEvent();
o.stopPropagation && this.element.bind({ mousedown: fn, mouseup: fn, mouseover: fn }); return false;
o.stopEvent && this.element.bind({ mousedown: stop, mouseup: stop, mouseover: stop }); }
this.tool = this._createTool(); this.element.css({
this.tab = this._createTab(); "z-index": BI.zIndex_popup,
this.view = this._createView(); "min-width": BI.pixFormat(minWidth),
this.toolbar = this._createToolBar(); "max-width": BI.pixFormat(maxWidth),
}).bind({ click: fn });
this.view.on(BI.Controller.EVENT_CHANGE, function (type) { this.element.bind("mousewheel", fn);
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
if (type === BI.Events.CLICK) {
self.fireEvent(BI.PopupView.EVENT_CHANGE);
}
});
BI.createWidget(BI.extend({ stopPropagation && this.element.bind({ mousedown: fn, mouseup: fn, mouseover: fn });
element: this, stopEvent && this.element.bind({ mousedown: stop, mouseup: stop, mouseover: stop });
}, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({}, o.logic, { this.tool = this._createTool();
scrolly: false, this.tab = this._createTab();
lgap: o.lgap, this.view = this._createView();
rgap: o.rgap, this.toolbar = this._createToolBar();
tgap: o.tgap,
bgap: o.bgap, this.view.on(BI.Controller.EVENT_CHANGE, (type, ...args) => {
vgap: o.vgap, this.fireEvent.apply(this, [BI.Controller.EVENT_CHANGE, type, ...args]);
hgap: o.hgap, if (type === BI.Events.CLICK) {
items: BI.LogicFactory.createLogicItemsByDirection(o.direction, BI.extend({ this.fireEvent(PopupView.EVENT_CHANGE);
cls: "list-view-outer bi-card list-view-shadow" + (o.primary ? " bi-primary" : ""),
}, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({}, o.logic, {
items: BI.LogicFactory.createLogicItemsByDirection(o.direction, this.tool, this.tab, this.view, this.toolbar),
})))
),
}))));
if (o.showArrow) {
this.arrow = BI.createWidget({
type: "bi.absolute",
cls: "bi-bubble-arrow",
items: [{
type: "bi.layout",
cls: "bubble-arrow",
}],
});
this.arrowWrapper = BI.createWidget({
type: "bi.absolute",
cls: "bi-bubble-arrow-wrapper",
items: [{
el: this.arrow,
}],
});
// 因为三角符号的原因位置变大了，需要占位
this.placeholder = BI.createWidget({
type: "bi.layout",
});
BI.createWidget({
type: "bi.absolute",
element: this,
items: [{
el: this.arrowWrapper,
left: 0,
top: 0,
}, {
el: this.placeholder,
}],
});
} }
}, });
_createView: function () { BI.createWidget(BI.extend({
var o = this.options; element: this,
this.button_group = BI.createWidget(o.el, { type: "bi.button_group", value: o.value }); }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(direction), BI.extend({}, logic, {
this.button_group.element.css({ scrolly: false,
"min-height": BI.pixFormat(o.minHeight), lgap,
"padding-top": BI.pixFormat(o.innerVgap), rgap,
"padding-bottom": BI.pixFormat(o.innerVgap), tgap,
"padding-left": BI.pixFormat(o.innerHgap), bgap,
"padding-right": BI.pixFormat(o.innerHgap), vgap,
hgap,
items: BI.LogicFactory.createLogicItemsByDirection(direction, BI.extend({
cls: "list-view-outer bi-card list-view-shadow" + (primary ? " bi-primary" : ""),
}, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(direction), BI.extend({}, logic, {
items: BI.LogicFactory.createLogicItemsByDirection(direction, this.tool, this.tab, this.view, this.toolbar),
})))
),
}))));
if (showArrow) {
this.arrow = BI.createWidget({
type: "bi.absolute",
cls: "bi-bubble-arrow",
items: [{
type: "bi.layout",
cls: "bubble-arrow",
}],
});
this.arrowWrapper = BI.createWidget({
type: "bi.absolute",
cls: "bi-bubble-arrow-wrapper",
items: [{
el: this.arrow,
}],
});
// 因为三角符号的原因位置变大了，需要占位
this.placeholder = BI.createWidget({
type: "bi.layout",
});
BI.createWidget({
type: "bi.absolute",
element: this,
items: [{
el: this.arrowWrapper,
left: 0,
top: 0,
}, {
el: this.placeholder,
}],
}); });
}
}
_createView() {
const { el, value, minHeight, innerVgap, innerHgap } = this.options;
this.button_group = BI.createWidget(el, { type: "bi.button_group", value: value });
this.button_group.element.css({
"min-height": BI.pixFormat(minHeight),
"padding-top": BI.pixFormat(innerVgap),
"padding-bottom": BI.pixFormat(innerVgap),
"padding-left": BI.pixFormat(innerHgap),
"padding-right": BI.pixFormat(innerHgap),
});
return this.button_group; return this.button_group;
}, }
_createTool: function () { _createTool() {
var o = this.options; const { tool } = this.options;
if (false === o.tool) { if (false === tool) {
return; return;
} }
return BI.createWidget(o.tool); return BI.createWidget(tool);
}, }
_createTab: function () { _createTab() {
var o = this.options; const { tabs, value } = this.options;
if (o.tabs.length === 0) { if (tabs.length === 0) {
return; return;
} }
return BI.createWidget({ return BI.createWidget({
type: "bi.center", type: "bi.center",
cls: "list-view-tab", cls: "list-view-tab",
height: 25, height: 25,
items: o.tabs, items: tabs,
value: o.value, value: value,
}); });
}, }
_createToolBar: function () { _createToolBar() {
var o = this.options; const { buttons } = this.options;
if (o.buttons.length === 0) { if (buttons.length === 0) {
return; return;
} }
return BI.createWidget({ return BI.createWidget({
type: "bi.center", type: "bi.center",
cls: "list-view-toolbar bi-high-light bi-split-top", cls: "list-view-toolbar bi-high-light bi-split-top",
height: 24, height: 24,
items: BI.createItems(o.buttons, { items: BI.createItems(buttons, {
once: false, once: false,
shadow: true, shadow: true,
isShadowShowingOnSelected: true, isShadowShowingOnSelected: true,
}), }),
}); });
}, }
setDirection: function (direction, position) { setDirection(direction, position) {
var o = this.options; const { showArrow, tgap, vgap, bgap, rgap, hgap, lgap } = this.options;
if (o.showArrow) { if (showArrow) {
var style = {}, wrapperStyle = {}, placeholderStyle = {}; let style = {}, wrapperStyle = {}, placeholderStyle = {};
var adjustXOffset = position.adjustXOffset || 0; const adjustXOffset = position.adjustXOffset || 0;
var adjustYOffset = position.adjustYOffset || 0; const adjustYOffset = position.adjustYOffset || 0;
var bodyBounds = BI.Widget._renderEngine.createElement("body").bounds(); const bodyBounds = BI.Widget._renderEngine.createElement("body").bounds();
var bodyWidth = bodyBounds.width; const bodyWidth = bodyBounds.width;
var bodyHeight = bodyBounds.height; const bodyHeight = bodyBounds.height;
var popupWidth = this.element.outerWidth(); const popupWidth = this.element.outerWidth();
var popupHeight = this.element.outerHeight(); const popupHeight = this.element.outerHeight();
var offset = position.offset; const offset = position.offset;
var offsetStyle = position.offsetStyle; const offsetStyle = position.offsetStyle;
var middle = offsetStyle === "center" || offsetStyle === "middle"; const middle = offsetStyle === "center" || offsetStyle === "middle";
var minLeft = Math.max(4, offset.left + 4 + popupWidth - bodyWidth); const minLeft = Math.max(4, offset.left + 4 + popupWidth - bodyWidth);
var minRight = Math.max(4, popupWidth - (offset.left + 4)); const minRight = Math.max(4, popupWidth - (offset.left + 4));
var minTop = Math.max(4, offset.top + 4 + popupHeight - bodyHeight); const minTop = Math.max(4, offset.top + 4 + popupHeight - bodyHeight);
var minBottom = Math.max(4, popupHeight - (offset.top + 4)); const minBottom = Math.max(4, popupHeight - (offset.top + 4));
var maxLeft = Math.min(popupWidth - 16 - 4, offset.left + position.width - 16 - 4); const 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)); const 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); const 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 maxBottom = Math.min(popupHeight - 16 - 4, bodyHeight - (offset.top + position.height - 16 - 4));
switch (direction) { switch (direction) {
case "bottom": case "bottom":
case "bottom,right": case "bottom,right":
direction = "bottom"; direction = "bottom";
style = { style = {
// 5表示留出一定的空间 // 5表示留出一定的空间
left: BI.clamp(((middle ? popupWidth : position.width) - adjustXOffset) / 2 - 8, minLeft, maxLeft), left: BI.clamp(((middle ? popupWidth : position.width) - adjustXOffset) / 2 - 8, minLeft, maxLeft),
}; };
wrapperStyle = { wrapperStyle = {
top: o.tgap + o.vgap, top: tgap + vgap,
left: 0, left: 0,
right: "", right: "",
bottom: "", bottom: "",
}; };
placeholderStyle = { placeholderStyle = {
left: 0, left: 0,
right: 0, right: 0,
height: this._const.TRIANGLE_LENGTH, height: this._const.TRIANGLE_LENGTH,
top: -this._const.TRIANGLE_LENGTH, top: -this._const.TRIANGLE_LENGTH,
bottom: "", bottom: "",
}; };
break; break;
case "bottom,left": case "bottom,left":
direction = "bottom"; direction = "bottom";
style = { style = {
right: BI.clamp(((middle ? popupWidth : position.width) + adjustXOffset) / 2 - 8, minRight, maxRight), right: BI.clamp(((middle ? popupWidth : position.width) + adjustXOffset) / 2 - 8, minRight, maxRight),
}; };
wrapperStyle = { wrapperStyle = {
top: o.bgap + o.vgap, top: bgap + vgap,
left: "", left: "",
right: 0, right: 0,
bottom: "", bottom: "",
}; };
placeholderStyle = { placeholderStyle = {
left: 0, left: 0,
right: 0, right: 0,
height: this._const.TRIANGLE_LENGTH, height: this._const.TRIANGLE_LENGTH,
top: -this._const.TRIANGLE_LENGTH, top: -this._const.TRIANGLE_LENGTH,
bottom: "", bottom: "",
}; };
break; break;
case "top": case "top":
case "top,right": case "top,right":
direction = "top"; direction = "top";
style = { style = {
left: BI.clamp(((middle ? popupWidth : position.width) - adjustXOffset) / 2 - 8, minLeft, maxLeft), left: BI.clamp(((middle ? popupWidth : position.width) - adjustXOffset) / 2 - 8, minLeft, maxLeft),
}; };
wrapperStyle = { wrapperStyle = {
bottom: o.bgap + o.vgap, bottom: bgap + vgap,
left: 0, left: 0,
right: "", right: "",
top: "", top: "",
}; };
placeholderStyle = { placeholderStyle = {
left: 0, left: 0,
right: 0, right: 0,
height: this._const.TRIANGLE_LENGTH, height: this._const.TRIANGLE_LENGTH,
top: "", top: "",
bottom: -this._const.TRIANGLE_LENGTH, bottom: -this._const.TRIANGLE_LENGTH,
}; };
break; break;
case "top,left": case "top,left":
direction = "top"; direction = "top";
style = { style = {
right: BI.clamp(((middle ? popupWidth : position.width) + adjustXOffset) / 2 - 8, minRight, maxRight), right: BI.clamp(((middle ? popupWidth : position.width) + adjustXOffset) / 2 - 8, minRight, maxRight),
}; };
wrapperStyle = { wrapperStyle = {
bottom: o.bgap + o.vgap, bottom: bgap + vgap,
right: 0, right: 0,
left: "", left: "",
top: "", top: "",
}; };
placeholderStyle = { placeholderStyle = {
left: 0, left: 0,
right: 0, right: 0,
height: this._const.TRIANGLE_LENGTH, height: this._const.TRIANGLE_LENGTH,
top: "", top: "",
bottom: -this._const.TRIANGLE_LENGTH, bottom: -this._const.TRIANGLE_LENGTH,
}; };
break; break;
case "left": case "left":
case "left,bottom": case "left,bottom":
direction = "left"; direction = "left";
style = { style = {
top: BI.clamp(((middle ? popupHeight : position.height) - adjustYOffset) / 2 - 8, minTop, maxTop), top: BI.clamp(((middle ? popupHeight : position.height) - adjustYOffset) / 2 - 8, minTop, maxTop),
}; };
wrapperStyle = { wrapperStyle = {
right: o.rgap + o.hgap, right: rgap + hgap,
top: 0, top: 0,
bottom: "", bottom: "",
left: "", left: "",
}; };
placeholderStyle = { placeholderStyle = {
top: 0, top: 0,
bottom: 0, bottom: 0,
width: this._const.TRIANGLE_LENGTH, width: this._const.TRIANGLE_LENGTH,
right: -this._const.TRIANGLE_LENGTH, right: -this._const.TRIANGLE_LENGTH,
left: "", left: "",
}; };
break; break;
case "left,top": case "left,top":
direction = "left"; direction = "left";
style = { style = {
bottom: BI.clamp(((middle ? popupHeight : position.height) + adjustYOffset) / 2 - 8, minBottom, maxBottom), bottom: BI.clamp(((middle ? popupHeight : position.height) + adjustYOffset) / 2 - 8, minBottom, maxBottom),
}; };
wrapperStyle = { wrapperStyle = {
right: o.rgap + o.hgap, right: rgap + hgap,
bottom: 0, bottom: 0,
top: "", top: "",
left: "", left: "",
}; };
placeholderStyle = { placeholderStyle = {
top: 0, top: 0,
bottom: 0, bottom: 0,
width: this._const.TRIANGLE_LENGTH, width: this._const.TRIANGLE_LENGTH,
right: -this._const.TRIANGLE_LENGTH, right: -this._const.TRIANGLE_LENGTH,
left: "", left: "",
}; };
break; break;
case "right": case "right":
case "right,bottom": case "right,bottom":
direction = "right"; direction = "right";
style = { style = {
top: BI.clamp(((middle ? popupHeight : position.height) - adjustYOffset) / 2 - 8, minTop, maxTop), top: BI.clamp(((middle ? popupHeight : position.height) - adjustYOffset) / 2 - 8, minTop, maxTop),
}; };
wrapperStyle = { wrapperStyle = {
left: o.lgap + o.hgap, left: lgap + hgap,
top: 0, top: 0,
bottom: "", bottom: "",
right: "", right: "",
}; };
placeholderStyle = { placeholderStyle = {
top: 0, top: 0,
bottom: 0, bottom: 0,
width: this._const.TRIANGLE_LENGTH, width: this._const.TRIANGLE_LENGTH,
left: -this._const.TRIANGLE_LENGTH, left: -this._const.TRIANGLE_LENGTH,
right: "", right: "",
}; };
break; break;
case "right,top": case "right,top":
direction = "right"; direction = "right";
style = { style = {
bottom: BI.clamp(((middle ? popupHeight : position.height) + adjustYOffset) / 2 - 8, minBottom, maxBottom), bottom: BI.clamp(((middle ? popupHeight : position.height) + adjustYOffset) / 2 - 8, minBottom, maxBottom),
}; };
wrapperStyle = { wrapperStyle = {
left: o.lgap + o.hgap, left: lgap + hgap,
bottom: 0, bottom: 0,
top: "", top: "",
right: "", right: "",
}; };
placeholderStyle = { placeholderStyle = {
top: 0, top: 0,
bottom: 0, bottom: 0,
width: this._const.TRIANGLE_LENGTH, width: this._const.TRIANGLE_LENGTH,
left: -this._const.TRIANGLE_LENGTH, left: -this._const.TRIANGLE_LENGTH,
right: "", right: "",
}; };
break; break;
case "right,innerRight": case "right,innerRight":
break; break;
case "right,innerLeft": case "right,innerLeft":
break; break;
case "innerRight": case "innerRight":
break; break;
case "innerLeft": case "innerLeft":
break; break;
default: default:
break; break;
}
this.element
.removeClass("left")
.removeClass("right")
.removeClass("top")
.removeClass("bottom")
.addClass(direction);
this.arrow.element.css(style);
this.arrowWrapper.element.css(wrapperStyle);
this.placeholder.element.css(placeholderStyle);
} }
}, this.element
.removeClass("left")
.removeClass("right")
.removeClass("top")
.removeClass("bottom")
.addClass(direction);
this.arrow.element.css(style);
this.arrowWrapper.element.css(wrapperStyle);
this.placeholder.element.css(placeholderStyle);
}
}
getView() {
return this.view;
}
populate(items) {
this.view.populate.apply(this.view, arguments);
}
getView: function () { resetWidth(w) {
return this.view; this.options.width = w;
}, this.element.width(w);
}
populate: function (items) { resetHeight(h) {
this.view.populate.apply(this.view, arguments); const tbHeight = this.toolbar ? (this.toolbar.attr("height") || 24) : 0,
}, tabHeight = this.tab ? (this.tab.attr("height") || 24) : 0,
toolHeight = ((this.tool && this.tool.attr("height")) || 24) * ((this.tool && this.tool.isVisible()) ? 1 : 0);
const resetHeight = h - tbHeight - tabHeight - toolHeight - 2 * this.options.innerVgap;
this.view.resetHeight ? this.view.resetHeight(resetHeight) :
this.view.element.css({ "max-height": BI.pixFormat(resetHeight) });
}
resetWidth: function (w) { setValue(selectedValues) {
this.options.width = w; this.tab && this.tab.setValue(selectedValues);
this.element.width(w); this.view.setValue(selectedValues);
}, }
resetHeight: function (h) { getValue() {
var tbHeight = this.toolbar ? (this.toolbar.attr("height") || 24) : 0, return this.view.getValue();
tabHeight = this.tab ? (this.tab.attr("height") || 24) : 0, }
toolHeight = ((this.tool && this.tool.attr("height")) || 24) * ((this.tool && this.tool.isVisible()) ? 1 : 0);
var resetHeight = h - tbHeight - tabHeight - toolHeight - 2 * this.options.innerVgap;
this.view.resetHeight ? this.view.resetHeight(resetHeight) :
this.view.element.css({ "max-height": BI.pixFormat(resetHeight) });
},
setValue: function (selectedValues) { }
this.tab && this.tab.setValue(selectedValues);
this.view.setValue(selectedValues);
},
getValue: function () {
return this.view.getValue();
},
});
BI.PopupView.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.popup_view", BI.PopupView);

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

@ -6,136 +6,141 @@
* @extends BI.Pane * @extends BI.Pane
*/ */
BI.SearcherView = BI.inherit(BI.Pane, { import { shortcut } from "../../core";
_defaultConfig: function () { import Pane from "../1.pane";
var conf = BI.SearcherView.superclass._defaultConfig.apply(this, arguments);
return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-searcher-view bi-card",
tipText: BI.i18nText("BI-No_Select"),
chooseType: BI.Selection.Single,
matcher: { // 完全匹配的构造器
type: "bi.button_group",
behaviors: {
redmark: function () {
return true;
},
},
items: [],
layouts: [{
type: "bi.vertical",
}],
},
searcher: {
type: "bi.button_group",
behaviors: {
redmark: function () {
return true;
},
},
items: [],
layouts: [{
type: "bi.vertical",
}],
},
});
},
render: function () { @shortcut()
var self = this, o = this.options; export default class SearcherView extends Pane {
this.matcher = BI.createWidget(o.matcher, { 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",
tipText: BI.i18nText("BI-No_Select"),
chooseType: BI.Selection.Single,
matcher: { // 完全匹配的构造器
type: "bi.button_group", type: "bi.button_group",
chooseType: o.chooseType,
behaviors: { behaviors: {
redmark: function () { redmark: () => {
return true; return true;
}, },
}, },
items: [],
layouts: [{ layouts: [{
type: "bi.vertical", type: "bi.vertical",
}], }],
value: o.value, },
}); searcher: {
this.matcher.on(BI.Controller.EVENT_CHANGE, function (type, val, ob) {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
if (type === BI.Events.CLICK) {
self.fireEvent(BI.SearcherView.EVENT_CHANGE, val, ob);
}
});
this.spliter = BI.createWidget({
type: "bi.vertical",
height: 1,
hgap: 10,
items: [{
type: "bi.layout",
height: 1,
cls: "searcher-view-spliter bi-background",
}],
});
this.searcher = BI.createWidget(o.searcher, {
type: "bi.button_group", type: "bi.button_group",
chooseType: o.chooseType,
behaviors: { behaviors: {
redmark: function () { redmark: () => {
return true; return true;
}, },
}, },
items: [],
layouts: [{ layouts: [{
type: "bi.vertical", type: "bi.vertical",
}], }],
value: o.value, },
}); });
this.searcher.on(BI.Controller.EVENT_CHANGE, function (type, val, ob) { }
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); render() {
if (type === BI.Events.CLICK) { const { matcher, chooseType, value, searcher } = this.options;
self.fireEvent(BI.SearcherView.EVENT_CHANGE, val, ob);
} this.matcher = BI.createWidget(matcher, {
}); type: "bi.button_group",
chooseType,
BI.createWidget({ behaviors: {
redmark: () => {
return true;
},
},
layouts: [{
type: "bi.vertical", type: "bi.vertical",
element: this, }],
items: [this.matcher, this.spliter, this.searcher], value,
}); });
}, this.matcher.on(BI.Controller.EVENT_CHANGE, (type, val, ob, ...args) => {
this.fireEvent.apply(this, [BI.Controller.EVENT_CHANGE, type, val, ob, ...args]);
if (type === BI.Events.CLICK) {
this.fireEvent(SearcherView.EVENT_CHANGE, val, ob);
}
});
this.spliter = BI.createWidget({
type: "bi.vertical",
height: 1,
hgap: 10,
items: [{
type: "bi.layout",
height: 1,
cls: "searcher-view-spliter bi-background",
}],
});
this.searcher = BI.createWidget(searcher, {
type: "bi.button_group",
chooseType,
behaviors: {
redmark: () => {
return true;
},
},
layouts: [{
type: "bi.vertical",
}],
value,
});
this.searcher.on(BI.Controller.EVENT_CHANGE, (type, val, ob, ...args) => {
this.fireEvent.apply(this, [BI.Controller.EVENT_CHANGE, type, val, ob, ...args]);
if (type === BI.Events.CLICK) {
this.fireEvent(BI.SearcherView.EVENT_CHANGE, val, ob);
}
});
BI.createWidget({
type: "bi.vertical",
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.matcher.setValue(v);
this.searcher.setValue(v); this.searcher.setValue(v);
}, }
getValue: function () { getValue() {
return this.matcher.getValue().concat(this.searcher.getValue()); return this.matcher.getValue().concat(this.searcher.getValue());
}, }
populate: function (searchResult, matchResult, keyword) { populate(searchResult, matchResult, keyword) {
searchResult || (searchResult = []); searchResult || (searchResult = []);
matchResult || (matchResult = []); matchResult || (matchResult = []);
this.setTipVisible(searchResult.length + matchResult.length === 0); this.setTipVisible(searchResult.length + matchResult.length === 0);
this.spliter.setVisible(BI.isNotEmptyArray(matchResult) && BI.isNotEmptyArray(searchResult)); this.spliter.setVisible(BI.isNotEmptyArray(matchResult) && BI.isNotEmptyArray(searchResult));
this.matcher.populate(matchResult, keyword); this.matcher.populate(matchResult, keyword);
this.searcher.populate(searchResult, keyword); this.searcher.populate(searchResult, keyword);
}, }
empty: function () { empty() {
this.searcher.empty(); this.searcher.empty();
this.matcher.empty(); this.matcher.empty();
}, }
hasMatched: function () { hasMatched() {
return this.matcher.getAllButtons().length > 0; return this.matcher.getAllButtons().length > 0;
}, }
}); }
BI.SearcherView.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.searcher_view", BI.SearcherView);

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

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

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

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

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

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

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

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

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

@ -6,29 +6,32 @@
* @extends BI.Text * @extends BI.Text
* @abstract * @abstract
*/ */
BI.A = BI.inherit(BI.Text, { import { shortcut } from "../../../core";
_defaultConfig: function () { import Text from "../1.text";
var conf = BI.A.superclass._defaultConfig.apply(this, arguments); @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: "",
target: "_blank",
el: null,
tagName: "a",
});
}
return BI.extend(conf, { render() {
baseCls: (conf.baseCls || "") + " bi-a display-block", const { href, target, el} = this.options;
href: "", super.render();
target: "_blank", this.element.attr({ href, target });
el: null, if (el) {
tagName: "a", BI.createWidget(el, {
element: this,
}); });
}, }
}
render: function () { }
var o = this.options;
BI.A.superclass.render.apply(this, arguments);
this.element.attr({ href: o.href, target: o.target });
if (o.el) {
BI.createWidget(o.el, {
element: this,
});
}
},
});
BI.shortcut("bi.a", BI.A);

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

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

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

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

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

@ -5,85 +5,89 @@
* @class BI.Tooltip * @class BI.Tooltip
* @extends BI.Tip * @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, hgap: 8,
vgap: 4, vgap: 4,
}, }
static xtype = "bi.tooltip";
_defaultConfig() {
return BI.extend(super._defaultConfig(arguments), {
extraCls: "bi-tooltip",
text: "",
level: "success", // success或warning
stopEvent: false,
stopPropagation: false,
textAlign: "left",
});
}
_defaultConfig: function () { render () {
return BI.extend(BI.Tooltip.superclass._defaultConfig.apply(this, arguments), { const { level, stopPropagation, stopEvent, text, textAlign } = this.options;
extraCls: "bi-tooltip", this.element.addClass("tooltip-" + level);
text: "", function fn(e) {
level: "success", // success或warning stopPropagation && e.stopPropagation();
stopEvent: false, stopEvent && e.stopEvent();
stopPropagation: false, }
textAlign: "left", this.element.bind({
}); click: fn,
}, mousedown: fn,
mouseup: fn,
mouseover: fn,
mouseenter: fn,
mouseleave: fn,
mousemove: fn,
});
render: function () { const texts = (text + "").split("\n");
var o = this.options; if (texts.length > 1) {
this.element.addClass("tooltip-" + o.level); BI.createWidget({
function fn(e) { type: "bi.vertical",
o.stopPropagation && e.stopPropagation(); element: this,
o.stopEvent && e.stopEvent(); hgap: this._const.hgap,
} innerVgap: this._const.vgap,
this.element.bind({ items: BI.map(texts, (i, text) => {
click: fn, return {
mousedown: fn, type: "bi.label",
mouseup: fn, textAlign: textAlign,
mouseover: fn, whiteSpace: "normal",
mouseenter: fn, text: text,
mouseleave: fn, textHeight: 18,
mousemove: fn, title: null,
};
}),
}); });
var texts = (o.text + "").split("\n");
if (texts.length > 1) {
BI.createWidget({
type: "bi.vertical",
element: this,
hgap: this._const.hgap,
innerVgap: this._const.vgap,
items: BI.map(texts, function (i, text) {
return {
type: "bi.label",
textAlign: o.textAlign,
whiteSpace: "normal",
text: text,
textHeight: 18,
title: null,
};
}),
});
} else { } else {
this.text = BI.createWidget({ this.text = BI.createWidget({
type: "bi.label", type: "bi.label",
element: this, element: this,
textAlign: o.textAlign, textAlign: textAlign,
whiteSpace: "normal", whiteSpace: "normal",
text: o.text, text: text,
title: null, title: null,
textHeight: 18, textHeight: 18,
hgap: this._const.hgap, hgap: this._const.hgap,
vgap: this._const.vgap, vgap: this._const.vgap,
}); });
} }
}, }
setWidth: function (width) { setWidth(width) {
this.element.width(BI.pixFormat(width - 2 * this._const.hgap)); this.element.width(BI.pixFormat(width - 2 * this._const.hgap));
}, }
setText: function (text) { setText(text) {
this.text && this.text.setText(text); this.text && this.text.setText(text);
}, }
setLevel: function (level) { setLevel(level) {
this.element.removeClass("tooltip-success").removeClass("tooltip-warning"); this.element.removeClass("tooltip-success").removeClass("tooltip-warning");
this.element.addClass("tooltip-" + level); this.element.addClass("tooltip-" + level);
}, }
});
BI.shortcut("bi.tooltip", BI.Tooltip); }

Write Preview
Loading…
Cancel
Save