From 50db461708aa7f1d42fd1fe0aad12afd63b1c5f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joker=2EWang-=E7=8E=8B=E9=A1=BA?= Date: Fri, 6 Jan 2023 15:41:36 +0800 Subject: [PATCH] =?UTF-8?q?KERNEL-13972=20refactor:=20base/collection?= =?UTF-8?q?=E3=80=81base/tree=20es6=E5=8C=96=E5=92=8C=E4=BF=AE=E6=94=B9bi.?= =?UTF-8?q?xxx?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/collection/collection.js | 347 ++++++++-------- src/base/grid/grid.js | 90 ++-- src/base/index.js | 12 +- src/base/layer/index.js | 2 +- src/base/layer/layer.drawer.js | 361 ++++++++-------- src/base/layer/layer.popover.js | 358 ++++++++-------- src/base/layer/layer.popup.js | 639 ++++++++++++++--------------- src/base/layer/layer.searcher.js | 193 +++++---- src/base/list/index.js | 2 +- src/base/list/listview.js | 166 ++++---- src/base/list/virtualgrouplist.js | 285 +++++++------ src/base/list/virtuallist.js | 325 ++++++++------- src/base/pager/pager.js | 125 +++--- src/base/single/a/a.js | 36 +- src/base/single/index.js | 2 +- src/base/single/tip/0.tip.js | 24 +- src/base/single/tip/index.js | 2 +- src/base/single/tip/tip.toast.js | 181 ++++---- src/base/single/tip/tip.tooltip.js | 133 +++--- src/base/tree/customtree.js | 137 ++++--- src/core/index.js | 6 +- 21 files changed, 1704 insertions(+), 1722 deletions(-) diff --git a/src/base/collection/collection.js b/src/base/collection/collection.js index f45437627..2b57f9de3 100644 --- a/src/base/collection/collection.js +++ b/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); + } +} diff --git a/src/base/grid/grid.js b/src/base/grid/grid.js index 3798a8e46..150723808 100644 --- a/src/base/grid/grid.js +++ b/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(); diff --git a/src/base/index.js b/src/base/index.js index 1db6a6206..9188548ef 100644 --- a/src/base/index.js +++ b/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, -} \ No newline at end of file + CollectionView, + CustomTree +}; diff --git a/src/base/layer/index.js b/src/base/layer/index.js index 8f04625d9..3f2423948 100644 --- a/src/base/layer/index.js +++ b/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"; \ No newline at end of file +export { SearcherView } from "./layer.searcher"; diff --git a/src/base/layer/layer.drawer.js b/src/base/layer/layer.drawer.js index 75ef6b04b..b8e6bf2b7 100644 --- a/src/base/layer/layer.drawer.js +++ b/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() { } - } diff --git a/src/base/layer/layer.popover.js b/src/base/layer/layer.popover.js index cd91db05e..5462b227f 100644 --- a/src/base/layer/layer.popover.js +++ b/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); + }, + }], + }); } } diff --git a/src/base/layer/layer.popup.js b/src/base/layer/layer.popup.js index fd79d015f..359ab2df0 100644 --- a/src/base/layer/layer.popup.js +++ b/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(); } - } diff --git a/src/base/layer/layer.searcher.js b/src/base/layer/layer.searcher.js index 9d4cfbb0e..2ef9d1cbb 100644 --- a/src/base/layer/layer.searcher.js +++ b/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; } } diff --git a/src/base/list/index.js b/src/base/list/index.js index 0a1c500cd..fac027df7 100644 --- a/src/base/list/index.js +++ b/src/base/list/index.js @@ -1,3 +1,3 @@ export { ListView } from "./listview"; export { VirtualGroupList } from "./virtualgrouplist"; -export { VirtualList } from "./virtuallist"; \ No newline at end of file +export { VirtualList } from "./virtuallist"; diff --git a/src/base/list/listview.js b/src/base/list/listview.js index ce2870e75..f890a4986 100644 --- a/src/base/list/listview.js +++ b/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(); } - } diff --git a/src/base/list/virtualgrouplist.js b/src/base/list/virtualgrouplist.js index d89cb32a0..cb5d23e42 100644 --- a/src/base/list/virtualgrouplist.js +++ b/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(); } } diff --git a/src/base/list/virtuallist.js b/src/base/list/virtuallist.js index d2ce62311..ec09f1b8d 100644 --- a/src/base/list/virtuallist.js +++ b/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(); - } } diff --git a/src/base/pager/pager.js b/src/base/pager/pager.js index 4eba409e6..359d83616 100644 --- a/src/base/pager/pager.js +++ b/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(); } -} \ No newline at end of file +} diff --git a/src/base/single/a/a.js b/src/base/single/a/a.js index c52006dd3..45a9c7846 100644 --- a/src/base/single/a/a.js +++ b/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, + }); + } } - } diff --git a/src/base/single/index.js b/src/base/single/index.js index 8fe2e22cc..15d1d54ce 100644 --- a/src/base/single/index.js +++ b/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"; diff --git a/src/base/single/tip/0.tip.js b/src/base/single/tip/0.tip.js index a4b93f4e5..f94b581ab 100644 --- a/src/base/single/tip/0.tip.js +++ b/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 }); + } } diff --git a/src/base/single/tip/index.js b/src/base/single/tip/index.js index 509c6be4c..cdbd3e751 100644 --- a/src/base/single/tip/index.js +++ b/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"; \ No newline at end of file +export { Tooltip } from "./tip.tooltip"; diff --git a/src/base/single/tip/tip.toast.js b/src/base/single/tip/tip.toast.js index 2dce887e5..e42347d44 100644 --- a/src/base/single/tip/tip.toast.js +++ b/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); } - } diff --git a/src/base/single/tip/tip.tooltip.js b/src/base/single/tip/tip.tooltip.js index d101bcab8..9c573e9fd 100644 --- a/src/base/single/tip/tip.tooltip.js +++ b/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}`); + } } diff --git a/src/base/tree/customtree.js b/src/base/tree/customtree.js index c20af875a..606e789ed 100644 --- a/src/base/tree/customtree.js +++ b/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); + } +} diff --git a/src/core/index.js b/src/core/index.js index b7cf86b47..ef4944722 100644 --- a/src/core/index.js +++ b/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";