Browse Source

KERNEL-13972 refactor: base/collection、base/tree es6化和修改bi.xxx

es6
Joker.Wang-王顺 2 years ago
parent
commit
50db461708
  1. 347
      src/base/collection/collection.js
  2. 90
      src/base/grid/grid.js
  3. 12
      src/base/index.js
  4. 2
      src/base/layer/index.js
  5. 361
      src/base/layer/layer.drawer.js
  6. 358
      src/base/layer/layer.popover.js
  7. 639
      src/base/layer/layer.popup.js
  8. 193
      src/base/layer/layer.searcher.js
  9. 2
      src/base/list/index.js
  10. 166
      src/base/list/listview.js
  11. 285
      src/base/list/virtualgrouplist.js
  12. 325
      src/base/list/virtuallist.js
  13. 125
      src/base/pager/pager.js
  14. 36
      src/base/single/a/a.js
  15. 2
      src/base/single/index.js
  16. 24
      src/base/single/tip/0.tip.js
  17. 2
      src/base/single/tip/index.js
  18. 181
      src/base/single/tip/tip.toast.js
  19. 133
      src/base/single/tip/tip.tooltip.js
  20. 137
      src/base/tree/customtree.js
  21. 6
      src/core/index.js

347
src/base/collection/collection.js

@ -5,9 +5,12 @@
* @class BI.CollectionView
* @extends BI.Widget
*/
BI.CollectionView = BI.inherit(BI.Widget, {
_defaultConfig: function () {
return BI.extend(BI.CollectionView.superclass._defaultConfig.apply(this, arguments), {
import { Widget, shortcut, extend, emptyFn, debounce, _lazyCreateWidget, isFunction, SectionManager,
isNull, each, clamp, toArray, invert, min, max, nextTick } from "../../core";
@shortcut()
export class CollectionView extends Widget {
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-collection",
// width: 400, //必设
// height: 300, //必设
@ -17,97 +20,100 @@ BI.CollectionView = BI.inherit(BI.Widget, {
overflowX: true,
overflowY: true,
el: {
type: "bi.vertical"
type: "bi.vertical",
},
cellSizeAndPositionGetter: BI.emptyFn,
cellSizeAndPositionGetter: emptyFn,
horizontalOverscanSize: 0,
verticalOverscanSize: 0,
scrollLeft: 0,
scrollTop: 0,
items: [],
itemFormatter: function (item, index) {
return item;
},
itemFormatter: (item, index) => item,
});
},
}
static EVENT_SCROLL = "EVENT_SCROLL";
static xtype = "bi.collection_view";
render: function () {
var self = this, o = this.options;
render() {
const o = this.options;
const { overflowX, overflowY, el } = this.options;
this.renderedCells = [];
this.renderedKeys = [];
this.renderRange = {};
this._scrollLock = false;
this._debounceRelease = BI.debounce(function () {
self._scrollLock = false;
this._debounceRelease = debounce(() => {
this._scrollLock = false;
}, 1000 / 60);
this.container = BI._lazyCreateWidget({
this.container = _lazyCreateWidget({
type: "bi.absolute",
});
this.element.scroll(function () {
if (self._scrollLock === true) {
this.element.scroll(() => {
if (this._scrollLock === true) {
return;
}
o.scrollLeft = self.element.scrollLeft();
o.scrollTop = self.element.scrollTop();
self._calculateChildrenToRender();
self.fireEvent(BI.CollectionView.EVENT_SCROLL, {
o.scrollLeft = this.element.scrollLeft();
o.scrollTop = this.element.scrollTop();
this._calculateChildrenToRender();
this.fireEvent(CollectionView.EVENT_SCROLL, {
scrollLeft: o.scrollLeft,
scrollTop: o.scrollTop,
});
});
// 兼容一下
var scrollable = o.scrollable, scrollx = o.scrollx, scrolly = o.scrolly;
if (o.overflowX === false) {
if (o.overflowY === false) {
let scrollable = o.scrollable;
const scrollx = o.scrollx, scrolly = o.scrolly;
if (overflowX === false) {
if (overflowY === false) {
scrollable = false;
} else {
scrollable = "y";
}
} else {
if (o.overflowY === false) {
if (overflowY === false) {
scrollable = "x";
}
}
BI._lazyCreateWidget(o.el, {
_lazyCreateWidget(el, {
type: "bi.vertical",
element: this,
scrollable: scrollable,
scrolly: scrolly,
scrollx: scrollx,
scrollable,
scrolly,
scrollx,
items: [this.container],
});
o.items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
self.populate(newValue);
o.items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items;
if (o.items.length > 0) {
this._calculateSizeAndPositionData();
this._populate();
}
},
}
// mounted之后绑定事件
mounted: function () {
var o = this.options;
if (o.scrollLeft !== 0 || o.scrollTop !== 0) {
this.element.scrollTop(o.scrollTop);
this.element.scrollLeft(o.scrollLeft);
mounted() {
const { scrollLeft, scrollTop } = this.options;
if (scrollLeft !== 0 || scrollTop !== 0) {
this.element.scrollTop(scrollTop);
this.element.scrollLeft(scrollLeft);
}
},
_calculateSizeAndPositionData: function () {
var o = this.options;
var cellMetadata = [];
var sectionManager = new BI.SectionManager();
var height = 0;
var width = 0;
for (var index = 0, len = o.items.length; index < len; index++) {
var cellMetadatum = o.cellSizeAndPositionGetter(index);
if (BI.isNull(cellMetadatum.height) || isNaN(cellMetadatum.height) ||
BI.isNull(cellMetadatum.width) || isNaN(cellMetadatum.width) ||
BI.isNull(cellMetadatum.x) || isNaN(cellMetadatum.x) ||
BI.isNull(cellMetadatum.y) || isNaN(cellMetadatum.y)) {
}
_calculateSizeAndPositionData() {
const { items, cellSizeAndPositionGetter } = this.options;
const cellMetadata = [];
const sectionManager = new SectionManager();
let height = 0;
let width = 0;
for (let index = 0, len = items.length; index < len; index++) {
const cellMetadatum = cellSizeAndPositionGetter(index);
if (isNull(cellMetadatum.height) || isNaN(cellMetadatum.height) ||
isNull(cellMetadatum.width) || isNaN(cellMetadatum.width) ||
isNull(cellMetadatum.x) || isNaN(cellMetadatum.x) ||
isNull(cellMetadatum.y) || isNaN(cellMetadatum.y)) {
throw Error();
}
@ -123,110 +129,110 @@ BI.CollectionView = BI.inherit(BI.Widget, {
this._sectionManager = sectionManager;
this._height = height;
this._width = width;
},
}
_cellRenderers: function (height, width, x, y) {
_cellRenderers(height, width, x, y) {
this._lastRenderedCellIndices = this._sectionManager.getCellIndices(height, width, x, y);
return this._cellGroupRenderer();
},
}
_cellGroupRenderer: function () {
var self = this;
var rendered = [];
BI.each(this._lastRenderedCellIndices, function (i, index) {
var cellMetadata = self._sectionManager.getCellMetadata(index);
_cellGroupRenderer() {
const rendered = [];
each(this._lastRenderedCellIndices, (i, index) => {
const cellMetadata = this._sectionManager.getCellMetadata(index);
rendered.push(cellMetadata);
});
return rendered;
},
_calculateChildrenToRender: function () {
var self = this, o = this.options;
var scrollLeft = BI.clamp(o.scrollLeft, 0, this._getMaxScrollLeft());
var scrollTop = BI.clamp(o.scrollTop, 0, this._getMaxScrollTop());
var left = Math.max(0, scrollLeft - o.horizontalOverscanSize);
var top = Math.max(0, scrollTop - o.verticalOverscanSize);
var right = Math.min(this._width, scrollLeft + o.width + o.horizontalOverscanSize);
var bottom = Math.min(this._height, scrollTop + o.height + o.verticalOverscanSize);
}
_calculateChildrenToRender() {
const o = this.options;
const { horizontalOverscanSize, verticalOverscanSize, width, height, itemFormatter, items } = this.options;
const scrollLeft = clamp(o.scrollLeft, 0, this._getMaxScrollLeft());
const scrollTop = clamp(o.scrollTop, 0, this._getMaxScrollTop());
const left = Math.max(0, scrollLeft - horizontalOverscanSize);
const top = Math.max(0, scrollTop - verticalOverscanSize);
const right = Math.min(this._width, scrollLeft + width + horizontalOverscanSize);
const bottom = Math.min(this._height, scrollTop + height + verticalOverscanSize);
if (right > 0 && bottom > 0) {
// 如果滚动的区间并没有超出渲染的范围
if (top >= this.renderRange.minY && bottom <= this.renderRange.maxY && left >= this.renderRange.minX && right <= this.renderRange.maxX) {
return;
}
var childrenToDisplay = this._cellRenderers(bottom - top, right - left, left, top);
var renderedCells = [], renderedKeys = {}, renderedWidgets = {};
const childrenToDisplay = this._cellRenderers(bottom - top, right - left, left, top);
const renderedCells = [], renderedKeys = {}, renderedWidgets = {};
// 存储所有的left和top
var lefts = {}, tops = {};
for (var i = 0, len = childrenToDisplay.length; i < len; i++) {
var datum = childrenToDisplay[i];
let lefts = {}, tops = {};
for (let i = 0, len = childrenToDisplay.length; i < len; i++) {
const datum = childrenToDisplay[i];
lefts[datum.x] = datum.x;
lefts[datum.x + datum.width] = datum.x + datum.width;
tops[datum.y] = datum.y;
tops[datum.y + datum.height] = datum.y + datum.height;
}
lefts = BI.toArray(lefts);
tops = BI.toArray(tops);
var leftMap = BI.invert(lefts);
var topMap = BI.invert(tops);
lefts = toArray(lefts);
tops = toArray(tops);
const leftMap = invert(lefts);
const topMap = invert(tops);
// 存储上下左右四个边界
var leftBorder = {}, rightBorder = {}, topBorder = {}, bottomBorder = {};
const leftBorder = {}, rightBorder = {}, topBorder = {}, bottomBorder = {};
function assertMinBorder(border, offset) {
if (BI.isNull(border[offset])) {
if (isNull(border[offset])) {
border[offset] = Number.MAX_VALUE;
}
}
function assertMaxBorder(border, offset) {
if (BI.isNull(border[offset])) {
if (isNull(border[offset])) {
border[offset] = 0;
}
}
for (var i = 0, len = childrenToDisplay.length; i < len; i++) {
var datum = childrenToDisplay[i];
var index = this.renderedKeys[datum.index] && this.renderedKeys[datum.index][1];
var child;
for (let i = 0, len = childrenToDisplay.length; i < len; i++) {
const datum = childrenToDisplay[i];
const index = this.renderedKeys[datum.index] && this.renderedKeys[datum.index][1];
let child;
if (index >= 0) {
this.renderedCells[index].el.setWidth(datum.width);
this.renderedCells[index].el.setHeight(datum.height);
// 这里只使用px
this.renderedCells[index].el.element.css("left", datum.x + "px");
this.renderedCells[index].el.element.css("top", datum.y + "px");
this.renderedCells[index].el.element.css("left", `${datum.x}px`);
this.renderedCells[index].el.element.css("top", `${datum.y}px`);
renderedCells.push(child = this.renderedCells[index]);
} else {
var item = o.itemFormatter(o.items[datum.index], datum.index);
child = BI._lazyCreateWidget(BI.extend({
const item = itemFormatter(items[datum.index], datum.index);
child = _lazyCreateWidget(extend({
type: "bi.label",
width: datum.width,
height: datum.height,
}, item, {
cls: (item.cls || "") + " collection-cell" + (datum.y === 0 ? " first-row" : "") + (datum.x === 0 ? " first-col" : ""),
cls: `${item.cls || ""} collection-cell${datum.y === 0 ? " first-row" : ""}${datum.x === 0 ? " first-col" : ""}`,
_left: datum.x,
_top: datum.y,
}));
renderedCells.push({
el: child,
left: datum.x + "px",
top: datum.y + "px",
left: `${datum.x}px`,
top: `${datum.y}px`,
_left: datum.x,
_top: datum.y,
// _width: datum.width,
// _height: datum.height
});
}
var startTopIndex = topMap[datum.y] | 0;
var endTopIndex = topMap[datum.y + datum.height] | 0;
for (var k = startTopIndex; k <= endTopIndex; k++) {
var t = tops[k];
const startTopIndex = topMap[datum.y] | 0;
const endTopIndex = topMap[datum.y + datum.height] | 0;
for (let k = startTopIndex; k <= endTopIndex; k++) {
const t = tops[k];
assertMinBorder(leftBorder, t);
assertMaxBorder(rightBorder, t);
leftBorder[t] = Math.min(leftBorder[t], datum.x);
rightBorder[t] = Math.max(rightBorder[t], datum.x + datum.width);
}
var startLeftIndex = leftMap[datum.x] | 0;
var endLeftIndex = leftMap[datum.x + datum.width] | 0;
for (var k = startLeftIndex; k <= endLeftIndex; k++) {
var l = lefts[k];
const startLeftIndex = leftMap[datum.x] | 0;
const endLeftIndex = leftMap[datum.x + datum.width] | 0;
for (let k = startLeftIndex; k <= endLeftIndex; k++) {
const l = lefts[k];
assertMinBorder(topBorder, l);
assertMaxBorder(bottomBorder, l);
topBorder[l] = Math.min(topBorder[l], datum.y);
@ -237,15 +243,15 @@ BI.CollectionView = BI.inherit(BI.Widget, {
renderedWidgets[i] = child;
}
// 已存在的, 需要添加的和需要删除的
var existSet = {}, addSet = {}, deleteArray = [];
BI.each(renderedKeys, function (i, key) {
if (self.renderedKeys[i]) {
const existSet = {}, addSet = {}, deleteArray = [];
each(renderedKeys, (i, key) => {
if (this.renderedKeys[i]) {
existSet[i] = key;
} else {
addSet[i] = key;
}
});
BI.each(this.renderedKeys, function (i, key) {
each(this.renderedKeys, (i, key) => {
if (existSet[i]) {
return;
}
@ -254,12 +260,12 @@ BI.CollectionView = BI.inherit(BI.Widget, {
}
deleteArray.push(key[1]);
});
BI.each(deleteArray, function (i, index) {
each(deleteArray, (i, index) => {
// 性能优化,不调用destroy方法防止触发destroy事件
self.renderedCells[index].el._destroy();
this.renderedCells[index].el._destroy();
});
var addedItems = [];
BI.each(addSet, function (index, key) {
const addedItems = [];
each(addSet, (index, key) => {
addedItems.push(renderedCells[key[1]]);
});
this.container.addItems(addedItems);
@ -270,21 +276,22 @@ BI.CollectionView = BI.inherit(BI.Widget, {
this.renderedKeys = renderedKeys;
// Todo 左右比较特殊
var minX = BI.min(leftBorder);
var maxX = BI.max(rightBorder);
const minX = min(leftBorder);
const maxX = max(rightBorder);
var minY = BI.max(topBorder);
var maxY = BI.min(bottomBorder);
const minY = max(topBorder);
const maxY = min(bottomBorder);
this.renderRange = { minX: minX, minY: minY, maxX: maxX, maxY: maxY };
this.renderRange = { minX, minY, maxX, maxY };
}
},
}
_isOverflowX: function () {
var o = this.options;
_isOverflowX() {
const o = this.options;
const { overflowX } = this.options;
// 兼容一下
var scrollable = o.scrollable, scrollx = o.scrollx;
if (o.overflowX === false) {
const scrollable = o.scrollable, scrollx = o.scrollx;
if (overflowX === false) {
return false;
}
if (scrollx) {
@ -293,14 +300,16 @@ BI.CollectionView = BI.inherit(BI.Widget, {
if (scrollable === true || scrollable === "xy" || scrollable === "x") {
return true;
}
return false;
},
}
_isOverflowY: function () {
var o = this.options;
_isOverflowY() {
const o = this.options;
const { overflowX } = this.options;
// 兼容一下
var scrollable = o.scrollable, scrolly = o.scrolly;
if (o.overflowX === false) {
const scrollable = o.scrollable, scrolly = o.scrolly;
if (overflowX === false) {
return false;
}
if (scrolly) {
@ -309,19 +318,20 @@ BI.CollectionView = BI.inherit(BI.Widget, {
if (scrollable === true || scrollable === "xy" || scrollable === "y") {
return true;
}
return false;
},
}
_getMaxScrollLeft: function () {
_getMaxScrollLeft() {
return Math.max(0, this._width - this.options.width + (this._isOverflowX() ? BI.DOM.getScrollWidth() : 0));
},
}
_getMaxScrollTop: function () {
_getMaxScrollTop() {
return Math.max(0, this._height - this.options.height + (this._isOverflowY() ? BI.DOM.getScrollWidth() : 0));
},
}
_populate: function (items) {
var o = this.options;
_populate(items) {
const { scrollTop, scrollLeft } = this.options;
this._reRange();
if (items && items !== this.options.items) {
this.options.items = items;
@ -333,83 +343,80 @@ BI.CollectionView = BI.inherit(BI.Widget, {
this._debounceRelease();
// 元素未挂载时不能设置scrollTop
try {
this.element.scrollTop(o.scrollTop);
this.element.scrollLeft(o.scrollLeft);
this.element.scrollTop(scrollTop);
this.element.scrollLeft(scrollLeft);
} catch (e) {
}
this._calculateChildrenToRender();
},
setScrollLeft: function (scrollLeft) {
}
setScrollLeft(scrollLeft) {
if (this.options.scrollLeft === scrollLeft) {
return;
}
this._scrollLock = true;
this.options.scrollLeft = BI.clamp(scrollLeft || 0, 0, this._getMaxScrollLeft());
this.options.scrollLeft = clamp(scrollLeft || 0, 0, this._getMaxScrollLeft());
this._debounceRelease();
this.element.scrollLeft(this.options.scrollLeft);
this._calculateChildrenToRender();
},
}
setScrollTop: function (scrollTop) {
setScrollTop(scrollTop) {
if (this.options.scrollTop === scrollTop) {
return;
}
this._scrollLock = true;
this.options.scrollTop = BI.clamp(scrollTop || 0, 0, this._getMaxScrollTop());
this.options.scrollTop = clamp(scrollTop || 0, 0, this._getMaxScrollTop());
this._debounceRelease();
this.element.scrollTop(this.options.scrollTop);
this._calculateChildrenToRender();
},
}
setOverflowX: function (b) {
var self = this;
setOverflowX(b) {
if (this.options.overflowX !== !!b) {
this.options.overflowX = !!b;
BI.nextTick(function () {
self.element.css({ overflowX: b ? "auto" : "hidden" });
nextTick(() => {
this.element.css({ overflowX: b ? "auto" : "hidden" });
});
}
},
}
setOverflowY: function (b) {
var self = this;
setOverflowY(b) {
if (this.options.overflowY !== !!b) {
this.options.overflowY = !!b;
BI.nextTick(function () {
self.element.css({ overflowY: b ? "auto" : "hidden" });
nextTick(() => {
this.element.css({ overflowY: b ? "auto" : "hidden" });
});
}
},
}
getScrollLeft: function () {
getScrollLeft() {
return this.options.scrollLeft;
},
}
getScrollTop: function () {
getScrollTop() {
return this.options.scrollTop;
},
}
getMaxScrollLeft: function () {
getMaxScrollLeft() {
return this._getMaxScrollLeft();
},
}
getMaxScrollTop: function () {
getMaxScrollTop() {
return this._getMaxScrollTop();
},
}
// 重新计算children
_reRange: function () {
_reRange() {
this.renderRange = {};
},
}
_clearChildren: function () {
_clearChildren() {
this.container._children = {};
this.container.attr("items", []);
},
}
restore: function () {
BI.each(this.renderedCells, function (i, cell) {
restore() {
each(this.renderedCells, (i, cell) => {
cell.el._destroy();
});
this._clearChildren();
@ -417,14 +424,12 @@ BI.CollectionView = BI.inherit(BI.Widget, {
this.renderedKeys = [];
this.renderRange = {};
this._scrollLock = false;
},
}
populate: function (items) {
populate(items) {
if (items && items !== this.options.items) {
this.restore();
}
this._populate(items);
},
});
BI.CollectionView.EVENT_SCROLL = "EVENT_SCROLL";
BI.shortcut("bi.collection_view", BI.CollectionView);
}
}

90
src/base/grid/grid.js

@ -5,11 +5,12 @@
* @class BI.GridView
* @extends BI.Widget
*/
import { Widget, shortcut } from "../../core";
import { Widget, shortcut, extend, emptyFn, debounce, _lazyCreateWidget,
isFunction, each, isNumber, ScalingCellSizeAndPositionManager, clamp, isEmpty, nextTick } from "../../core";
@shortcut()
export default class GridView extends Widget {
export class GridView extends Widget {
_defaultConfig() {
return BI.extend(super._defaultConfig(arguments), {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-grid-view",
// width: 400, //必设
// height: 300, //必设
@ -19,20 +20,18 @@ export default class GridView extends Widget {
overflowX: true,
overflowY: true,
el: {
type: "bi.vertical"
type: "bi.vertical",
},
overscanColumnCount: 0,
overscanRowCount: 0,
rowHeightGetter: BI.emptyFn, // number类型或function类型
columnWidthGetter: BI.emptyFn, // number类型或function类型
rowHeightGetter: emptyFn, // number类型或function类型
columnWidthGetter: emptyFn, // number类型或function类型
// estimatedColumnSize: 100, //columnWidthGetter为function时必设
// estimatedRowSize: 30, //rowHeightGetter为function时必设
scrollLeft: 0,
scrollTop: 0,
items: [],
itemFormatter: (item, row, col) => {
return item;
},
itemFormatter: (item, row, col) => item,
});
}
@ -46,10 +45,10 @@ export default class GridView extends Widget {
this.renderedKeys = [];
this.renderRange = {};
this._scrollLock = false;
this._debounceRelease = BI.debounce(() => {
this._debounceRelease = debounce(() => {
this._scrollLock = false;
}, 1000 / 60);
this.container = BI._lazyCreateWidget({
this.container = _lazyCreateWidget({
type: "bi.absolute",
});
this.element.scroll(() => {
@ -65,7 +64,8 @@ export default class GridView extends Widget {
});
});
// 兼容一下
let scrollable = o.scrollable, scrollx = o.scrollx, scrolly = o.scrolly;
let scrollable = o.scrollable;
const scrollx = o.scrollx, scrolly = o.scrolly;
if (overflowX === false) {
if (overflowY === false) {
scrollable = false;
@ -77,15 +77,15 @@ export default class GridView extends Widget {
scrollable = "x";
}
}
BI._lazyCreateWidget(el, {
_lazyCreateWidget(el, {
type: "bi.vertical",
element: this,
scrollable: scrollable,
scrolly: scrolly,
scrollx: scrollx,
scrollable,
scrolly,
scrollx,
items: [this.container],
});
o.items = BI.isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
o.items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items;
if (o.items.length > 0) {
@ -104,27 +104,27 @@ export default class GridView extends Widget {
}
destroyed() {
BI.each(this.renderedCells, (i, cell) => {
each(this.renderedCells, (i, cell) => {
cell.el._destroy();
})
});
}
_calculateSizeAndPositionData() {
const { columnCount, items, rowCount, columnWidthGetter, estimatedColumnSize, rowHeightGetter, estimatedRowSize } = this.options;
this.rowCount = 0;
this.columnCount = 0;
if (BI.isNumber(columnCount)) {
if (isNumber(columnCount)) {
this.columnCount = columnCount;
} else if (items.length > 0) {
this.columnCount = items[0].length;
}
if (BI.isNumber(rowCount)) {
if (isNumber(rowCount)) {
this.rowCount = rowCount;
} else {
this.rowCount = items.length;
}
this._columnSizeAndPositionManager = new BI.ScalingCellSizeAndPositionManager(this.columnCount, columnWidthGetter, estimatedColumnSize);
this._rowSizeAndPositionManager = new BI.ScalingCellSizeAndPositionManager(this.rowCount, rowHeightGetter, estimatedRowSize);
this._columnSizeAndPositionManager = new ScalingCellSizeAndPositionManager(this.columnCount, columnWidthGetter, estimatedColumnSize);
this._rowSizeAndPositionManager = new ScalingCellSizeAndPositionManager(this.rowCount, rowHeightGetter, estimatedRowSize);
}
_getOverscanIndices(cellCount, overscanCellsCount, startIndex, stopIndex) {
@ -139,8 +139,8 @@ export default class GridView extends Widget {
const { itemFormatter, items } = this.options;
const width = o.width, height = o.height, scrollLeft = BI.clamp(o.scrollLeft, 0, this._getMaxScrollLeft()),
scrollTop = BI.clamp(o.scrollTop, 0, this._getMaxScrollTop()),
const width = o.width, height = o.height, scrollLeft = clamp(o.scrollLeft, 0, this._getMaxScrollLeft()),
scrollTop = clamp(o.scrollTop, 0, this._getMaxScrollTop()),
overscanColumnCount = o.overscanColumnCount, overscanRowCount = o.overscanRowCount;
if (height > 0 && width > 0) {
@ -150,7 +150,7 @@ export default class GridView extends Widget {
const renderedCells = [], renderedKeys = {}, renderedWidgets = {};
let minX = this._getMaxScrollLeft(), minY = this._getMaxScrollTop(), maxX = 0, maxY = 0;
// 没有可见的单元格就干掉所有渲染过的
if (!BI.isEmpty(visibleColumnIndices) && !BI.isEmpty(visibleRowIndices)) {
if (!isEmpty(visibleColumnIndices) && !isEmpty(visibleRowIndices)) {
const horizontalOffsetAdjustment = this._columnSizeAndPositionManager.getOffsetAdjustment(width, scrollLeft);
const verticalOffsetAdjustment = this._rowSizeAndPositionManager.getOffsetAdjustment(height, scrollTop);
@ -187,7 +187,7 @@ export default class GridView extends Widget {
const rowDatum = this._rowSizeAndPositionManager.getSizeAndPositionOfCell(rowIndex);
for (let columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) {
const key = rowIndex + "-" + columnIndex;
const key = `${rowIndex}-${columnIndex}`;
const columnDatum = this._columnSizeAndPositionManager.getSizeAndPositionOfCell(columnIndex);
const index = this.renderedKeys[key] && this.renderedKeys[key][2];
@ -196,18 +196,18 @@ export default class GridView extends Widget {
this.renderedCells[index].el.setWidth(columnDatum.size);
this.renderedCells[index].el.setHeight(rowDatum.size);
// 这里只使用px
this.renderedCells[index].el.element.css("left", columnDatum.offset + horizontalOffsetAdjustment + "px");
this.renderedCells[index].el.element.css("top", rowDatum.offset + verticalOffsetAdjustment + "px");
this.renderedCells[index].el.element.css("left", `${columnDatum.offset + horizontalOffsetAdjustment}px`);
this.renderedCells[index].el.element.css("top", `${rowDatum.offset + verticalOffsetAdjustment}px`);
child = this.renderedCells[index].el;
renderedCells.push(this.renderedCells[index]);
} else {
const item = itemFormatter(items[rowIndex][columnIndex], rowIndex, columnIndex);
child = BI._lazyCreateWidget(BI.extend({
child = _lazyCreateWidget(extend({
type: "bi.label",
width: columnDatum.size,
height: rowDatum.size,
}, item, {
cls: (item.cls || "") + " grid-cell" + (rowIndex === 0 ? " first-row" : "") + (columnIndex === 0 ? " first-col" : ""),
cls: `${item.cls || ""} grid-cell${rowIndex === 0 ? " first-row" : ""}${columnIndex === 0 ? " first-col" : ""}`,
_rowIndex: rowIndex,
_columnIndex: columnIndex,
_left: columnDatum.offset + horizontalOffsetAdjustment,
@ -215,8 +215,8 @@ export default class GridView extends Widget {
}), this);
renderedCells.push({
el: child,
left: columnDatum.offset + horizontalOffsetAdjustment + "px",
top: rowDatum.offset + verticalOffsetAdjustment + "px",
left: `${columnDatum.offset + horizontalOffsetAdjustment}px`,
top: `${rowDatum.offset + verticalOffsetAdjustment}px`,
_left: columnDatum.offset + horizontalOffsetAdjustment,
_top: rowDatum.offset + verticalOffsetAdjustment,
// _width: columnDatum.size,
@ -235,14 +235,14 @@ export default class GridView extends Widget {
}
// 已存在的, 需要添加的和需要删除的
const existSet = {}, addSet = {}, deleteArray = [];
BI.each(renderedKeys, (i, key) => {
each(renderedKeys, (i, key) => {
if (this.renderedKeys[i]) {
existSet[i] = key;
} else {
addSet[i] = key;
}
});
BI.each(this.renderedKeys, (i, key) => {
each(this.renderedKeys, (i, key) => {
if (existSet[i]) {
return;
}
@ -251,12 +251,12 @@ export default class GridView extends Widget {
}
deleteArray.push(key[2]);
});
BI.each(deleteArray, (i, index) => {
each(deleteArray, (i, index) => {
// 性能优化,不调用destroy方法防止触发destroy事件
this.renderedCells[index].el._destroy();
});
const addedItems = [];
BI.each(addSet, (index, key) => {
each(addSet, (index, key) => {
addedItems.push(renderedCells[key[2]]);
});
// 与listview一样, 给上下文
@ -266,12 +266,12 @@ export default class GridView extends Widget {
this.container.attr("items", renderedCells);
this.renderedCells = renderedCells;
this.renderedKeys = renderedKeys;
this.renderRange = { minX: minX, minY: minY, maxX: maxX, maxY: maxY };
this.renderRange = { minX, minY, maxX, maxY };
}
}
_isOverflowX() {
const { scrollable, scrollx, overflowX } = this.options;
const { scrollable, scrollx, overflowX } = this.options;
// 兼容一下
if (overflowX === false) {
return false;
@ -282,6 +282,7 @@ export default class GridView extends Widget {
if (scrollable === true || scrollable === "xy" || scrollable === "x") {
return true;
}
return false;
}
@ -298,6 +299,7 @@ export default class GridView extends Widget {
if (scrollable === true || scrollable === "xy" || scrollable === "y") {
return true;
}
return false;
}
@ -342,7 +344,7 @@ export default class GridView extends Widget {
return;
}
this._scrollLock = true;
this.options.scrollLeft = BI.clamp(scrollLeft || 0, 0, this._getMaxScrollLeft());
this.options.scrollLeft = clamp(scrollLeft || 0, 0, this._getMaxScrollLeft());
this._debounceRelease();
this.element.scrollLeft(this.options.scrollLeft);
this._calculateChildrenToRender();
@ -353,7 +355,7 @@ export default class GridView extends Widget {
return;
}
this._scrollLock = true;
this.options.scrollTop = BI.clamp(scrollTop || 0, 0, this._getMaxScrollTop());
this.options.scrollTop = clamp(scrollTop || 0, 0, this._getMaxScrollTop());
this._debounceRelease();
this.element.scrollTop(this.options.scrollTop);
this._calculateChildrenToRender();
@ -370,7 +372,7 @@ export default class GridView extends Widget {
setOverflowX(b) {
if (this.options.overflowX !== !!b) {
this.options.overflowX = !!b;
BI.nextTick(() => {
nextTick(() => {
this.element.css({ overflowX: b ? "auto" : "hidden" });
});
}
@ -379,7 +381,7 @@ export default class GridView extends Widget {
setOverflowY(b) {
if (this.options.overflowY !== !!b) {
this.options.overflowY = !!b;
BI.nextTick(() => {
nextTick(() => {
this.element.css({ overflowY: b ? "auto" : "hidden" });
});
}
@ -418,7 +420,7 @@ export default class GridView extends Widget {
}
restore() {
BI.each(this.renderedCells, (i, cell) => {
each(this.renderedCells, (i, cell) => {
cell.el._destroy();
});
this._clearChildren();

12
src/base/index.js

@ -2,11 +2,13 @@ import { Pane } from "./1.pane";
import * as single from "./single";
import * as layer from "./layer";
import * as list from "./list";
import GridView from "./grid/grid";
import Pager from "./pager/pager";
import { GridView } from "./grid/grid";
import { Pager } from "./pager/pager";
import * as combination from "./combination";
import { Msg } from "./foundation/message";
import * as base from "./0.base";
import { CollectionView } from "./collection/collection";
import { CustomTree } from "./tree/customtree";
Object.assign(BI, {
Pane,
@ -18,6 +20,8 @@ Object.assign(BI, {
...combination,
Msg,
...base,
CollectionView,
CustomTree,
});
export * from "./0.base";
@ -30,4 +34,6 @@ export {
GridView,
Pager,
Msg,
}
CollectionView,
CustomTree
};

2
src/base/layer/index.js

@ -1,4 +1,4 @@
export { Drawer } from "./layer.drawer";
export { Popover, BarPopover } from "./layer.popover";
export { PopupView } from "./layer.popup";
export { SearcherView } from "./layer.searcher";
export { SearcherView } from "./layer.searcher";

361
src/base/layer/layer.drawer.js

@ -4,13 +4,13 @@
* @extends BI.Widget
*/
import { Widget, shortcut } from "../../core";
import { Widget, shortcut, isPlainObject, extend } from "../../core";
@shortcut()
export class Drawer extends Widget {
SIZE = {
SMALL: "small",
NORMAL: "normal",
BIG: "big",
SMALL: "small",
NORMAL: "normal",
BIG: "big",
}
props = {
baseCls: "bi-drawer bi-card",
@ -28,202 +28,202 @@ export class Drawer extends Widget {
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":
const { size, height, placement, width } = this.options;
let sizeValue = 0;
switch (size) {
case "big":
sizeValue = 736;
break;
case "small":
break;
case "small":
sizeValue = 200;
break;
case "normal":
default:
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,
};
}
break;
}
if (placement === "top" || placement === "bottom") {
return {
height: height || sizeValue,
};
}
if (placement === "left" || placement === "right") {
return {
width: width || sizeValue,
};
}
}
render() {
const { header, headerHeight, closable, body, bodyHgap, bodyTgap, bodyBgap } = this.options;
const items = [{
el: {
type: "bi.htape",
cls: "bi-message-title bi-header-background",
items: [{
type: "bi.absolute",
items: [{
el: BI.isPlainObject(header) ? BI.extend({}, header, {
extraCls: "bi-font-bold",
}) : {
type: "bi.label",
cls: "bi-font-bold",
height: headerHeight,
text: header,
title: header,
textAlign: "left",
},
left: 20,
top: 0,
right: 0,
bottom: 0,
}],
}, {
el: closable ? {
type: "bi.icon_button",
cls: "bi-message-close close-font",
height: headerHeight,
handler: () => {
this.close();
},
} : {
type: "bi.layout",
},
width: 56,
}],
height: headerHeight,
},
height: headerHeight,
}, {
el: {
type: "bi.vertical",
scrolly: true,
cls: "drawer-body",
ref: (_ref) => {
this.body = _ref;
},
items: [{
el: body,
}],
},
hgap: bodyHgap,
tgap: bodyTgap,
bgap: bodyBgap,
}];
const { header, headerHeight, closable, body, bodyHgap, bodyTgap, bodyBgap } = this.options;
const items = [{
el: {
type: "bi.htape",
cls: "bi-message-title bi-header-background",
items: [{
type: "bi.absolute",
items: [{
el: isPlainObject(header) ? extend({}, header, {
extraCls: "bi-font-bold",
}) : {
type: "bi.label",
cls: "bi-font-bold",
height: headerHeight,
text: header,
title: header,
textAlign: "left",
},
left: 20,
top: 0,
right: 0,
bottom: 0,
}],
}, {
el: closable ? {
type: "bi.icon_button",
cls: "bi-message-close close-font",
height: headerHeight,
handler: () => {
this.close();
},
} : {
type: "bi.layout",
},
width: 56,
}],
height: headerHeight,
},
height: headerHeight,
}, {
el: {
type: "bi.vertical",
scrolly: true,
cls: "drawer-body",
ref: _ref => {
this.body = _ref;
},
items: [{
el: body,
}],
},
hgap: bodyHgap,
tgap: bodyTgap,
bgap: bodyBgap,
}];
return BI.extend({
type: "bi.vtape",
items: items,
}, this._getSuitableSize());
return extend({
type: "bi.vtape",
items,
}, this._getSuitableSize());
}
mounted() {
const { placement } = this.options;
switch (placement) {
case "right":
this.element.css({
top: 0,
left: "100%",
bottom: 0,
});
break;
case "left":
this.element.css({
top: 0,
right: "100%",
bottom: 0,
});
break;
case "top":
this.element.css({
left: 0,
right: 0,
bottom: "100%",
});
break;
case "bottom":
this.element.css({
left: 0,
right: 0,
top: "100%",
});
break;
default:
break;
}
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;
}
}
show(callback) {
const { placement } = this.options;
requestAnimationFrame(() => {
const size = this._getSuitableSize();
switch (placement) {
case "right":
this.element.css({
left: "calc(100% - " + size.width + "px)",
});
break;
case "left":
this.element.css({
right: "calc(100% - " + size.width + "px)",
});
break;
case "top":
this.element.css({
bottom: "calc(100% - " + size.height + "px)",
});
break;
case "bottom":
this.element.css({
top: "calc(100% - " + size.height + "px)",
});
break;
default:
break;
}
callback && callback();
});
const { placement } = this.options;
requestAnimationFrame(() => {
const size = this._getSuitableSize();
switch (placement) {
case "right":
this.element.css({
left: `calc(100% - ${size.width}px)`,
});
break;
case "left":
this.element.css({
right: `calc(100% - ${size.width}px)`,
});
break;
case "top":
this.element.css({
bottom: `calc(100% - ${size.height}px)`,
});
break;
case "bottom":
this.element.css({
top: `calc(100% - ${size.height}px)`,
});
break;
default:
break;
}
callback && callback();
});
}
hide(callback) {
const { placement } = this.options;
requestAnimationFrame(() => {
switch (placement) {
case "right":
this.element.css({
left: "100%",
});
break;
case "left":
this.element.css({
right: "100%",
});
break;
case "top":
this.element.css({
bottom: "100%",
});
break;
case "bottom":
this.element.css({
top: "100%",
});
break;
default:
break;
}
setTimeout(callback, 300);
});
const { placement } = this.options;
requestAnimationFrame(() => {
switch (placement) {
case "right":
this.element.css({
left: "100%",
});
break;
case "left":
this.element.css({
right: "100%",
});
break;
case "top":
this.element.css({
bottom: "100%",
});
break;
case "bottom":
this.element.css({
top: "100%",
});
break;
default:
break;
}
setTimeout(callback, 300);
});
}
open() {
this.show(() => {
this.fireEvent(Drawer.EVENT_OPEN);
});
this.show(() => {
this.fireEvent(Drawer.EVENT_OPEN);
});
}
close() {
this.hide(() => {
this.fireEvent(Drawer.EVENT_CLOSE);
});
this.hide(() => {
this.fireEvent(Drawer.EVENT_CLOSE);
});
}
setZindex(zindex) {
@ -232,6 +232,5 @@ export class Drawer extends Widget {
destroyed() {
}
}

358
src/base/layer/layer.popover.js

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

639
src/base/layer/layer.popup.js

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

193
src/base/layer/layer.searcher.js

@ -6,106 +6,97 @@
* @extends BI.Pane
*/
import { shortcut } from "../../core";
import { shortcut, extend, createWidget, Controller, isNotEmptyArray } from "../../core";
import { Pane } from "../1.pane";
@shortcut()
export class SearcherView extends Pane {
static xtype = "bi.searcher_view";
static EVENT_CHANGE = "EVENT_CHANGE";
_defaultConfig() {
const conf = super._defaultConfig(arguments);
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",
behaviors: {
redmark: () => {
return true;
},
},
items: [],
layouts: [{
type: "bi.vertical",
}],
},
searcher: {
type: "bi.button_group",
behaviors: {
redmark: () => {
return true;
},
},
items: [],
layouts: [{
type: "bi.vertical",
}],
},
});
return 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: () => true,
},
items: [],
layouts: [{
type: "bi.vertical",
}],
},
searcher: {
type: "bi.button_group",
behaviors: {
redmark: () => true,
},
items: [],
layouts: [{
type: "bi.vertical",
}],
},
});
}
render() {
const { matcher, chooseType, value, searcher } = this.options;
this.matcher = BI.createWidget(matcher, {
type: "bi.button_group",
chooseType,
behaviors: {
redmark: () => {
return true;
},
},
layouts: [{
type: "bi.vertical",
}],
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],
});
const { matcher, chooseType, value, searcher } = this.options;
this.matcher = createWidget(matcher, {
type: "bi.button_group",
chooseType,
behaviors: {
redmark: () => true,
},
layouts: [{
type: "bi.vertical",
}],
value,
});
this.matcher.on(Controller.EVENT_CHANGE, (type, val, ob, ...args) => {
this.fireEvent(Controller.EVENT_CHANGE, type, val, ob, ...args);
if (type === BI.Events.CLICK) {
this.fireEvent(SearcherView.EVENT_CHANGE, val, ob);
}
});
this.spliter = createWidget({
type: "bi.vertical",
height: 1,
hgap: 10,
items: [{
type: "bi.layout",
height: 1,
cls: "searcher-view-spliter bi-background",
}],
});
this.searcher = createWidget(searcher, {
type: "bi.button_group",
chooseType,
behaviors: {
redmark: () => true,
},
layouts: [{
type: "bi.vertical",
}],
value,
});
this.searcher.on(Controller.EVENT_CHANGE, (type, val, ob, ...args) => {
this.fireEvent(Controller.EVENT_CHANGE, type, val, ob, ...args);
if (type === BI.Events.CLICK) {
this.fireEvent(BI.SearcherView.EVENT_CHANGE, val, ob);
}
});
createWidget({
type: "bi.vertical",
element: this,
items: [this.matcher, this.spliter, this.searcher],
});
}
startSearch() {
@ -117,30 +108,30 @@ export class SearcherView extends Pane {
}
setValue(v) {
this.matcher.setValue(v);
this.searcher.setValue(v);
this.matcher.setValue(v);
this.searcher.setValue(v);
}
getValue() {
return this.matcher.getValue().concat(this.searcher.getValue());
return this.matcher.getValue().concat(this.searcher.getValue());
}
populate(searchResult, matchResult, keyword) {
searchResult || (searchResult = []);
matchResult || (matchResult = []);
this.setTipVisible(searchResult.length + matchResult.length === 0);
this.spliter.setVisible(BI.isNotEmptyArray(matchResult) && BI.isNotEmptyArray(searchResult));
this.matcher.populate(matchResult, keyword);
this.searcher.populate(searchResult, keyword);
searchResult || (searchResult = []);
matchResult || (matchResult = []);
this.setTipVisible(searchResult.length + matchResult.length === 0);
this.spliter.setVisible(isNotEmptyArray(matchResult) && isNotEmptyArray(searchResult));
this.matcher.populate(matchResult, keyword);
this.searcher.populate(searchResult, keyword);
}
empty() {
this.searcher.empty();
this.matcher.empty();
this.searcher.empty();
this.matcher.empty();
}
hasMatched() {
return this.matcher.getAllButtons().length > 0;
return this.matcher.getAllButtons().length > 0;
}
}

2
src/base/list/index.js

@ -1,3 +1,3 @@
export { ListView } from "./listview";
export { VirtualGroupList } from "./virtualgrouplist";
export { VirtualList } from "./virtuallist";
export { VirtualList } from "./virtuallist";

166
src/base/list/listview.js

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

285
src/base/list/virtualgrouplist.js

@ -6,196 +6,187 @@
* @extends BI.Widget
*/
import { Widget, shortcut } from "../../core";
import { Widget, shortcut, extend, isFunction, isNumber, PrefixIntervalTree } from "../../core";
@shortcut()
export 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;
},
};
}
props() {
return {
baseCls: "bi-virtual-group-list",
overscanHeight: 100,
blockSize: 10,
scrollTop: 0,
rowHeight: "auto",
items: [],
el: {},
itemFormatter: (item, index) => item,
};
}
init() {
this.renderedIndex = -1;
}
init() {
this.renderedIndex = -1;
}
static xtype = "bi.virtual_group_list";
render() {
const { rowHeight, items, el } = this.options;
const { rowHeight, items, el } = this.options;
return {
type: "bi.vertical",
items: [{
type: "bi.layout",
ref: () => {
this.topBlank = this;
},
}, {
type: "bi.virtual_group",
height: rowHeight * items.length,
ref: () => {
this.container = this;
},
layouts: [BI.extend({
type: "bi.vertical",
scrolly: false,
}, el)],
}, {
type: "bi.layout",
ref: () => {
this.bottomBlank = this;
},
}],
element: this,
};
return {
type: "bi.vertical",
items: [{
type: "bi.layout",
ref: () => {
this.topBlank = this;
},
}, {
type: "bi.virtual_group",
height: rowHeight * items.length,
ref: () => {
this.container = this;
},
layouts: [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.options的值不会跟随变化
const o = this.options;
o.items = 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;
}
});
BI.ResizeDetector.addResizeListener(this, () => {
if (this.element.is(":visible")) {
this._calculateBlocksToRender();
this.ticking = false;
});
this.ticking = true;
}
});
BI.ResizeDetector.addResizeListener(this, () => {
if (this.element.is(":visible")) {
this._calculateBlocksToRender();
}
});
}
});
}
_isAutoHeight() {
return !BI.isNumber(this.options.rowHeight);
return !isNumber(this.options.rowHeight);
}
_renderMoreIf() {
const { scrollTop, overscanHeight, blockSize, items, itemFormatter } = this.options;
const height = this.element.height();
const minContentHeight = scrollTop + height + overscanHeight;
let index = (this.renderedIndex + 1) * blockSize, cnt = this.renderedIndex + 1;
let lastHeight;
const getElementHeight = () => {
return this.container.element.height() + this.topBlank.element.height() + this.bottomBlank.element.height();
}
lastHeight = this.renderedIndex === -1 ? 0 : getElementHeight();
while (lastHeight < minContentHeight && index < 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;
}
const { scrollTop, overscanHeight, blockSize, items, itemFormatter } = this.options;
const height = this.element.height();
const minContentHeight = scrollTop + height + overscanHeight;
let index = (this.renderedIndex + 1) * blockSize, cnt = this.renderedIndex + 1;
let lastHeight;
const getElementHeight = () => 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);
// eslint-disable-next-line no-loop-func
this.container[this.renderedIndex === -1 ? "populate" : "addItems"](itemsArr.map((item, i) => 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;
}
}
_calculateBlocksToRender() {
// BI-115750 不可见状态下依赖元素实际尺寸构造的线段树会分段错误,所以不进行后续计算和线段树的初始化。
// 这样从不可见状态变为可见状态能够重新触发线段树初始化
if (!this.element.is(":visible")) {
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]);
}
// BI-115750 不可见状态下依赖元素实际尺寸构造的线段树会分段错误,所以不进行后续计算和线段树的初始化。
// 这样从不可见状态变为可见状态能够重新触发线段树初始化
if (!this.element.is(":visible")) {
return;
}
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]);
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) => 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) => itemFormatter(item, (start < 0 ? 0 : start) * blockSize + i)));
}
this.container.element.height(rowHeight * items.length - topHeight);
this.container.populate(itemsArr.map((item, i) => {
return itemFormatter(item, (start < 0 ? 0 : start) * blockSize + i);
}));
}
}
_populate(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);
const { blockSize, rowHeight, scrollTop } = this.options;
if (items && this.options.items !== items) {
// 重新populate一组items,需要重新对线段树分块
this.options.items = items;
this._restore();
}
this.tree = PrefixIntervalTree.uniform(Math.ceil(this.options.items.length / blockSize), this._isAutoHeight() ? 0 : rowHeight * blockSize);
this._calculateBlocksToRender();
try {
this.element.scrollTop(scrollTop);
} catch (e) {
}
this._calculateBlocksToRender();
try {
this.element.scrollTop(scrollTop);
} catch (e) {
}
}
_restore() {
this.renderedIndex = -1;
// 依赖于cache的占位元素也要初始化
this.topBlank.setHeight(0);
this.bottomBlank.setHeight(0);
this.renderedIndex = -1;
// 依赖于cache的占位元素也要初始化
this.topBlank.setHeight(0);
this.bottomBlank.setHeight(0);
}
// 暂时只支持固定行高的场景
scrollTo(scrollTop) {
this.options.scrollTop = scrollTop;
this._calculateBlocksToRender();
this.element.scrollTop(scrollTop);
this.options.scrollTop = scrollTop;
this._calculateBlocksToRender();
this.element.scrollTop(scrollTop);
}
restore() {
this.options.scrollTop = 0;
this._restore();
this.options.scrollTop = 0;
this._restore();
}
populate(items) {
this._populate(items);
this._populate(items);
}
beforeDestroy() {
BI.ResizeDetector.removeResizeListener(this);
this.restore();
BI.ResizeDetector.removeResizeListener(this);
this.restore();
}
}

325
src/base/list/virtuallist.js

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

125
src/base/pager/pager.js

@ -5,11 +5,11 @@
* @class BI.Pager
* @extends BI.Widget
*/
import { Widget, shortcut } from "../../core";
import { Widget, shortcut, extend, emptyFn, result, isKey, createWidget, map, stripEL, formatEL, Controller } from "../../core";
@shortcut()
export default class Pager extends Widget {
export class Pager extends Widget {
_defaultConfig() {
return BI.extend(super._defaultConfig(arguments), {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-pager",
behaviors: {},
layouts: [{
@ -23,22 +23,19 @@ export default class Pager extends Widget {
dynamicShowFirstLast: false, // 是否动态显示首页、尾页
dynamicShowPrevNext: false, // 是否动态显示上一页、下一页
pages: false, // 总页数
curr: () => {
return 1;
}, // 初始化当前页
curr: () => 1, // 初始化当前页
groups: 0, // 连续显示分页数
jump: BI.emptyFn, // 分页的回调函数
jump: emptyFn, // 分页的回调函数
first: false, // 是否显示首页
last: false, // 是否显示尾页
prev: "上一页",
next: "下一页",
firstPage: 1,
lastPage: () => { // 在万不得已时才会调用这个函数获取最后一页的页码, 主要作用于setValue方法
return 1;
},
hasPrev: BI.emptyFn, // pages不可用时有效
hasNext: BI.emptyFn, // pages不可用时有效
lastPage: () => // 在万不得已时才会调用这个函数获取最后一页的页码, 主要作用于setValue方法
1,
hasPrev: emptyFn, // pages不可用时有效
hasNext: emptyFn, // pages不可用时有效
});
}
@ -46,7 +43,7 @@ export default class Pager extends Widget {
static EVENT_CHANGE = "EVENT_CHANGE";
static EVENT_AFTER_POPULATE = "EVENT_AFTER_POPULATE";
render() {
this.currPage = BI.result(this.options, "curr");
this.currPage = result(this.options, "curr");
// 翻页太灵敏
// this._lock = false;
// this._debouce = BI.debounce(function () {
@ -59,13 +56,13 @@ export default class Pager extends Widget {
const o = this.options, view = [], dict = {};
const { dynamicShow, dynamicShowPrevNext, hasPrev, dynamicShowFirstLast, hasNext, behaviors, layouts, jump } = this.options;
this.empty();
const pages = BI.result(o, "pages");
const curr = BI.result(this, "currPage");
let groups = BI.result(o, "groups");
let first = BI.result(o, "first");
let last = BI.result(o, "last");
const prev = BI.result(o, "prev");
const next = BI.result(o, "next");
const pages = result(o, "pages");
const curr = result(this, "currPage");
let groups = result(o, "groups");
let first = result(o, "first");
let last = result(o, "last");
const prev = result(o, "prev");
const next = result(o, "next");
if (pages === false) {
groups = 0;
@ -80,7 +77,7 @@ export default class Pager extends Widget {
// 当前页非首页,则输出上一页
if (((!dynamicShow && !dynamicShowPrevNext) || curr > 1) && prev !== false) {
if (BI.isKey(prev)) {
if (isKey(prev)) {
view.push({
text: prev,
value: "prev",
@ -88,7 +85,7 @@ export default class Pager extends Widget {
});
} else {
view.push({
el: BI.extend({
el: extend({
disabled: pages === false ? hasPrev(curr) === false : !(curr > 1 && prev !== false),
}, prev),
});
@ -162,7 +159,7 @@ export default class Pager extends Widget {
dict.flow = !prev && groups === 0;
if (((!dynamicShow && !dynamicShowPrevNext) && next) || (curr !== pages && next || dict.flow)) {
view.push((function () {
if (BI.isKey(next)) {
if (isKey(next)) {
if (pages === false) {
return { text: next, value: "next", disabled: hasNext(curr) === false };
}
@ -175,62 +172,62 @@ export default class Pager extends Widget {
}
return {
el: BI.extend({
el: extend({
disabled: pages === false ? hasNext(curr) === false : !(curr !== pages && next || dict.flow),
}, next),
};
}()));
}
this.button_group = BI.createWidget({
this.button_group = createWidget({
type: "bi.button_group",
element: this,
items: BI.map(view, (idx, v) => {
v = BI.extend({
items: map(view, (idx, v) => {
v = extend({
cls: "bi-list-item-select bi-border-radius",
height: 23,
hgap: v.el ? 0 : 10,
stopPropagation: true,
}, BI.stripEL(v));
}, stripEL(v));
return BI.formatEL(v);
return formatEL(v);
}),
behaviors,
layouts,
});
this.button_group.on(BI.Controller.EVENT_CHANGE, (type, value, obj, ...args) => {
this.button_group.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => {
// if (self._lock === true) {
// return;
// }
// self._lock = true;
// self._debouce();
if (type === BI.Events.CLICK) {
var v = this.button_group.getValue()[0];
const v = this.button_group.getValue()[0];
switch (v) {
case "first":
this.currPage = 1;
break;
case "last":
this.currPage = pages;
break;
case "prev":
this.currPage--;
break;
case "next":
this.currPage++;
break;
default:
this.currPage = v;
break;
case "first":
this.currPage = 1;
break;
case "last":
this.currPage = pages;
break;
case "prev":
this.currPage--;
break;
case "next":
this.currPage++;
break;
default:
this.currPage = v;
break;
}
jump.apply(this, [{
pages: pages,
pages,
curr: this.currPage,
}]);
this._populate();
this.fireEvent(Pager.EVENT_CHANGE, obj);
}
this.fireEvent.apply(this, [BI.Controller.EVENT_CHANGE, type, value, obj, ...args]);
this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
});
this.fireEvent(Pager.EVENT_AFTER_POPULATE);
}
@ -254,6 +251,7 @@ export default class Pager extends Widget {
hasNext(v) {
v || (v = 1);
const { pages, hasNext } = this.options;
return pages === false ? hasNext(v) : v < pages;
}
@ -263,8 +261,9 @@ export default class Pager extends Widget {
v = v || 0;
v = v < 1 ? 1 : v;
if (pages === false) {
var lastPage = BI.result(o, "lastPage"), firstPage = 1;
this.currPage = v > lastPage ? lastPage : ((firstPage = BI.result(o, "firstPage")), (v < firstPage ? firstPage : v));
const lastPage = result(o, "lastPage");
let firstPage = 1;
this.currPage = v > lastPage ? lastPage : ((firstPage = result(o, "firstPage")), (v < firstPage ? firstPage : v));
} else {
v = v > pages ? pages : v;
this.currPage = v;
@ -275,27 +274,27 @@ export default class Pager extends Widget {
getValue() {
const val = this.button_group.getValue()[0];
switch (val) {
case "prev":
return -1;
case "next":
return 1;
case "first":
return BI.MIN;
case "last":
return BI.MAX;
default:
return val;
case "prev":
return -1;
case "next":
return 1;
case "first":
return BI.MIN;
case "last":
return BI.MAX;
default:
return val;
}
}
attr(key, value) {
super.attr(arguments);
super.attr(...arguments);
if (key === "curr") {
this.currPage = BI.result(this.options, "curr");
this.currPage = result(this.options, "curr");
}
}
populate() {
this._populate();
}
}
}

36
src/base/single/a/a.js

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

2
src/base/single/index.js

@ -8,4 +8,4 @@ export * from "./tip";
export * from "./label";
export * from "./input";
export * from "./editor";
export * from "./button"
export * from "./button";

24
src/base/single/tip/0.tip.js

@ -8,18 +8,20 @@
*/
import { Single } from "../0.single";
import { extend } from "../../../core";
export class Tip extends Single {
_defaultConfig() {
const conf = super._defaultConfig(arguments);
return BI.extend(conf, {
_baseCls: (conf._baseCls || "") + " bi-tip",
zIndex: BI.zIndex_tip,
});
}
_defaultConfig() {
const conf = super._defaultConfig(arguments);
return extend(conf, {
_baseCls: `${conf._baseCls || ""} bi-tip`,
zIndex: BI.zIndex_tip,
});
}
_init() {
super._init();
this.element.css({ zIndex: this.options.zIndex });
}
_init() {
super._init();
this.element.css({ zIndex: this.options.zIndex });
}
}

2
src/base/single/tip/index.js

@ -1,3 +1,3 @@
export { Tip } from "./0.tip";
export { Toast } from "./tip.toast";
export { Tooltip } from "./tip.tooltip";
export { Tooltip } from "./tip.tooltip";

181
src/base/single/tip/tip.toast.js

@ -6,7 +6,7 @@
* @extends BI.Tip
*/
import { shortcut } from "../../../core";
import { shortcut, extend, isPlainObject } from "../../../core";
import { Tip } from "./0.tip";
@shortcut()
export class Toast extends Tip {
@ -21,107 +21,106 @@ export class Toast extends Tip {
static xtype = "bi.toast";
_defaultConfig() {
return BI.extend(super._defaultConfig(arguments), {
extraCls: "bi-toast",
text: "",
level: "success", // success或warning
autoClose: true,
closable: null,
textHeight: 20,
vgap: 10,
innerHgap: 4,
hgap: 8,
});
return extend(super._defaultConfig(arguments), {
extraCls: "bi-toast",
text: "",
level: "success", // success或warning
autoClose: true,
closable: null,
textHeight: 20,
vgap: 10,
innerHgap: 4,
hgap: 8,
});
}
render() {
const { closable, level, autoClose, textHeight, text, hgap, vgap, innerHgap } = this.options;
const { closableMinWidth, minWidth, maxWidth, closableMaxWidth } = this._const;
this.element.css({
minWidth: BI.pixFormat(closable ? closableMinWidth : minWidth),
maxWidth: BI.pixFormat(closable ? closableMaxWidth : maxWidth),
});
this.element.addClass("toast-" + level);
function fn(e) {
e.stopPropagation();
e.stopEvent();
const { closable, level, autoClose, textHeight, text, hgap, vgap, innerHgap } = this.options;
const { closableMinWidth, minWidth, maxWidth, closableMaxWidth } = this._const;
this.element.css({
minWidth: BI.pixFormat(closable ? closableMinWidth : minWidth),
maxWidth: BI.pixFormat(closable ? closableMaxWidth : maxWidth),
});
this.element.addClass(`toast-${level}`);
function fn(e) {
e.stopPropagation();
e.stopEvent();
return false;
}
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;
}
return false;
}
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",
},
}];
function hasCloseIcon() {
return closable === true || (closable === null && autoClose === false);
}
const items = [{
type: "bi.icon_label",
cls: `${cls} toast-icon`,
height: textHeight,
}, {
el: isPlainObject(text) ? text : {
type: "bi.label",
whiteSpace: "normal",
text,
textHeight,
textAlign: "left",
},
}];
const columnSize = ["", "fill"];
const columnSize = ["", "fill"];
if (hasCloseIcon()) {
items.push({
type: "bi.icon_button",
cls: "close-font toast-icon",
handler: () => {
this.destroy();
},
height: textHeight,
});
columnSize.push("");
}
if (hasCloseIcon()) {
items.push({
type: "bi.icon_button",
cls: "close-font toast-icon",
handler: () => {
this.destroy();
},
height: textHeight,
});
columnSize.push("");
}
return {
type: "bi.horizontal",
horizontalAlign: BI.HorizontalAlign.Stretch,
items: items,
hgap: hgap,
vgap: vgap,
innerHgap: innerHgap,
columnSize: columnSize,
};
return {
type: "bi.horizontal",
horizontalAlign: BI.HorizontalAlign.Stretch,
items,
hgap,
vgap,
innerHgap,
columnSize,
};
}
beforeDestroy() {
this.fireEvent(Toast.EVENT_DESTORY);
this.fireEvent(Toast.EVENT_DESTORY);
}
}

133
src/base/single/tip/tip.tooltip.js

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

137
src/base/tree/customtree.js

@ -6,9 +6,15 @@
* @class BI.CustomTree
* @extends BI.Single
*/
BI.CustomTree = BI.inherit(BI.Widget, {
_defaultConfig: function () {
return BI.extend(BI.CustomTree.superclass._defaultConfig.apply(this, arguments), {
import { Widget, shortcut, extend, emptyFn, Tree, each, isNotEmptyArray, deepClone, stripEL, isWidget,
clone, isNotNull, isNull, createWidget, Controller } from "../../core";
@shortcut()
export class CustomTree extends Widget {
static xtype = "bi.custom_tree";
static EVENT_CHANGE = "EVENT_CHANGE";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-custom-tree",
expander: {
el: {},
@ -18,7 +24,7 @@ BI.CustomTree = BI.inherit(BI.Widget, {
},
items: [],
itemsCreator: BI.emptyFn,
itemsCreator: emptyFn,
el: {
type: "bi.button_tree",
@ -28,50 +34,49 @@ BI.CustomTree = BI.inherit(BI.Widget, {
}],
},
});
},
_init: function () {
BI.CustomTree.superclass._init.apply(this, arguments);
}
_init() {
super._init(...arguments);
this.initTree(this.options.items);
},
}
_formatItems: function (nodes) {
var self = this, o = this.options;
nodes = BI.Tree.transformToTreeFormat(nodes);
_formatItems(nodes) {
const { expander, itemsCreator } = this.options;
nodes = Tree.transformToTreeFormat(nodes);
var items = [];
BI.each(nodes, function (i, node) {
if (BI.isNotEmptyArray(node.children) || node.isParent === true) {
var item = BI.extend({
const items = [];
each(nodes, (i, node) => {
if (isNotEmptyArray(node.children) || node.isParent === true) {
const item = extend({
type: "bi.expander",
el: {
value: node.value,
},
popup: { type: "bi.custom_tree" },
}, BI.deepClone(o.expander), {
}, deepClone(expander), {
id: node.id,
pId: node.pId,
});
var el = BI.stripEL(node);
if (!BI.isWidget(el)) {
el = BI.clone(el);
let el = stripEL(node);
if (!isWidget(el)) {
el = clone(el);
delete el.children;
BI.extend(item.el, el);
extend(item.el, el);
} else {
item.el = el;
}
item.popup.expander = BI.deepClone(o.expander);
item.popup.expander = deepClone(expander);
item.items = item.popup.items = node.children;
item.itemsCreator = item.popup.itemsCreator = function (op) {
if (BI.isNotNull(op.node)) {// 从子节点传过来的itemsCreator直接向上传递
return o.itemsCreator.apply(self, arguments);
item.itemsCreator = item.popup.itemsCreator = (op, ...arg) => {
if (isNotNull(op.node)) {// 从子节点传过来的itemsCreator直接向上传递
return itemsCreator(op, ...arg);
}
var args = Array.prototype.slice.call(arguments, 0);
const args = Array.prototype.slice.call([op, ...arg], 0);
args[0].node = node;
return o.itemsCreator.apply(self, args);
return itemsCreator.apply(this, args);
};
BI.isNull(item.popup.el) && (item.popup.el = BI.deepClone(o.el));
isNull(item.popup.el) && (item.popup.el = deepClone(this.options.el));
items.push(item);
} else {
items.push(node);
@ -79,72 +84,68 @@ BI.CustomTree = BI.inherit(BI.Widget, {
});
return items;
},
}
// 构造树结构,
initTree: function (nodes) {
var self = this, o = this.options;
this.tree = BI.createWidget(o.el, {
initTree(nodes) {
const { el, itemsCreator, value } = this.options;
this.tree = createWidget(el, {
element: this,
items: this._formatItems(nodes),
itemsCreator: function (op, callback) {
o.itemsCreator.apply(this, [op, function (items) {
var args = Array.prototype.slice.call(arguments, 0);
args[0] = self._formatItems(items);
callback.apply(null, args);
itemsCreator: (op, callback) => {
itemsCreator.apply(this, [op, items => {
const args = Array.prototype.slice.call(arguments, 0);
args[0] = this._formatItems(items);
callback(...args);
}]);
},
value: o.value,
value,
});
this.tree.on(BI.Controller.EVENT_CHANGE, function (type, val, obj) {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
this.tree.on(Controller.EVENT_CHANGE, (type, val, obj, ...args) => {
this.fireEvent(Controller.EVENT_CHANGE, type, val, obj, ...args);
if (type === BI.Events.CLICK) {
self.fireEvent(BI.CustomTree.EVENT_CHANGE, val, obj);
this.fireEvent(CustomTree.EVENT_CHANGE, val, obj);
}
});
},
}
// 生成树方法
stroke: function (nodes) {
this.populate.apply(this, arguments);
},
stroke(nodes) {
this.populate(...arguments);
}
populate: function (nodes) {
var args = Array.prototype.slice.call(arguments, 0);
populate(nodes) {
const args = Array.prototype.slice.call(arguments, 0);
if (arguments.length > 0) {
args[0] = this._formatItems(nodes);
}
this.tree.populate.apply(this.tree, args);
},
this.tree.populate(...args);
}
setValue: function (v) {
setValue(v) {
this.tree && this.tree.setValue(v);
},
}
getValue: function () {
getValue() {
return this.tree ? this.tree.getValue() : [];
},
}
getAllButtons: function () {
getAllButtons() {
return this.tree ? this.tree.getAllButtons() : [];
},
}
getAllLeaves: function () {
getAllLeaves() {
return this.tree ? this.tree.getAllLeaves() : [];
},
}
getNodeById: function (id) {
getNodeById(id) {
return this.tree && this.tree.getNodeById(id);
},
}
getNodeByValue: function (id) {
getNodeByValue(id) {
return this.tree && this.tree.getNodeByValue(id);
},
}
empty: function () {
empty() {
this.tree.empty();
},
});
BI.CustomTree.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.custom_tree", BI.CustomTree);
}
}

6
src/core/index.js

@ -7,10 +7,10 @@ import * as behavior from "./behavior";
import * as controllers from "./controller";
import * as func from "./func";
import * as structure from "./structure";
import {StyleLoaderManager} from "./loader/loader.style";
import { StyleLoaderManager } from "./loader/loader.style";
import "./h";
import {ShowListener} from "./listener/listener.show";
import {shortcut} from "./decorator";
import { ShowListener } from "./listener/listener.show";
import { shortcut } from "./decorator";
export * from "./2.base";
export * from "./3.ob";

Loading…
Cancel
Save