diff --git a/src/base/collection/collection.js b/src/base/collection/collection.js index f45437627..0cd227204 100644 --- a/src/base/collection/collection.js +++ b/src/base/collection/collection.js @@ -5,9 +5,11 @@ * @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 +19,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 +128,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 +242,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 +259,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 +275,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 +299,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 +317,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 +342,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 +423,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..6e65a52e0 100644 --- a/src/base/grid/grid.js +++ b/src/base/grid/grid.js @@ -5,11 +5,11 @@ * @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 +19,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 +44,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 +63,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 +76,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 +103,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 +138,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 +149,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 +186,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 +195,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 +214,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 +234,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 +250,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 +265,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 +281,7 @@ export default class GridView extends Widget { if (scrollable === true || scrollable === "xy" || scrollable === "x") { return true; } + return false; } @@ -298,6 +298,7 @@ export default class GridView extends Widget { if (scrollable === true || scrollable === "xy" || scrollable === "y") { return true; } + return false; } @@ -342,7 +343,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 +354,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 +371,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 +380,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 +419,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/button/button.basic.js b/src/base/single/button/button.basic.js index f2f09216c..ce2d1dfa8 100644 --- a/src/base/single/button/button.basic.js +++ b/src/base/single/button/button.basic.js @@ -439,7 +439,7 @@ export class BasicButton extends Single { } _setEnable(enable) { - super._setEnable.apply(this, arguments); + super._setEnable(...arguments); if (enable === true) { this.element.removeClass("base-disabled disabled"); } else if (enable === false) { @@ -454,7 +454,7 @@ export class BasicButton extends Single { empty() { Widget._renderEngine.createElement(document).unbind(`mouseup.${this.getName()}`); - super.empty.apply(this, arguments); + super.empty(...arguments); } } diff --git a/src/base/single/button/button.node.js b/src/base/single/button/button.node.js index 7b8cc4632..d48bab2fb 100644 --- a/src/base/single/button/button.node.js +++ b/src/base/single/button/button.node.js @@ -27,11 +27,11 @@ export class NodeButton extends BasicButton { if (this.isOpened()) { this.setOpened(this.isOpened()); } - super._initRef.apply(this, arguments); + super._initRef(...arguments); } doClick() { - super.doClick.apply(this, arguments); + super.doClick(...arguments); this.setOpened(!this.isOpened()); } diff --git a/src/base/single/button/buttons/button.icon.js b/src/base/single/button/buttons/button.icon.js index 9e8228a55..5f3100a9b 100644 --- a/src/base/single/button/buttons/button.icon.js +++ b/src/base/single/button/buttons/button.icon.js @@ -8,7 +8,6 @@ import { shortcut, extend, isNumber, createWidget, isNull } from "../../../../co */ @shortcut() export class IconButton extends BasicButton { - static EVENT_CHANGE = "EVENT_CHANGE"; static xtype = "bi.icon_button"; @@ -16,7 +15,7 @@ export class IconButton extends BasicButton { const conf = super._defaultConfig(arguments); return extend(conf, { - _baseCls: (conf._baseCls || "") + " bi-icon-button horizon-center", + _baseCls: `${conf._baseCls || ""} bi-icon-button horizon-center`, hgap: 0, vgap: 0, tgap: 0, @@ -68,7 +67,7 @@ export class IconButton extends BasicButton { } doClick() { - super.doClick.apply(this, arguments); + super.doClick(...arguments); if (this.isValid()) { this.fireEvent(IconButton.EVENT_CHANGE, this); } diff --git a/src/base/single/button/buttons/button.image.js b/src/base/single/button/buttons/button.image.js index c6486e359..e8fcf6ede 100644 --- a/src/base/single/button/buttons/button.image.js +++ b/src/base/single/button/buttons/button.image.js @@ -50,12 +50,12 @@ export class ImageButton extends BasicButton { } setWidth(w) { - super.setWidth.apply(this, arguments); + super.setWidth(...arguments); this.options.width = w; } setHeight(h) { - super.setHeight.apply(this, arguments); + super.setHeight(...arguments); this.options.height = h; } @@ -85,7 +85,7 @@ export class ImageButton extends BasicButton { } doClick() { - super.doClick.apply(this, arguments); + super.doClick(...arguments); if (this.isValid()) { this.fireEvent(ImageButton.EVENT_CHANGE, this); } diff --git a/src/base/single/button/buttons/button.js b/src/base/single/button/buttons/button.js index 674400853..edc4cf32d 100644 --- a/src/base/single/button/buttons/button.js +++ b/src/base/single/button/buttons/button.js @@ -188,14 +188,14 @@ export class Button extends BasicButton { } doClick() { - super.doClick.apply(this, arguments); + super.doClick(...arguments); if (this.isValid()) { this.fireEvent(Button.EVENT_CHANGE, this); } } _setEnable(enable) { - super._setEnable.apply(this, arguments); + super._setEnable(...arguments); if (enable === true) { this.element.attr("tabIndex", 1); } else if (enable === false) { @@ -236,12 +236,12 @@ export class Button extends BasicButton { } setText(text) { - super.setText.apply(this, arguments); + super.setText(...arguments); this.text.setText(text); } setValue(text) { - super.setValue.apply(this, arguments); + super.setValue(...arguments); if (!this.isReadOnly()) { this.text.setValue(text); } diff --git a/src/base/single/button/buttons/button.text.js b/src/base/single/button/buttons/button.text.js index 281047b55..107a8ba38 100644 --- a/src/base/single/button/buttons/button.text.js +++ b/src/base/single/button/buttons/button.text.js @@ -1,5 +1,5 @@ import { BasicButton } from "../button.basic"; -import { shortcut, extend, createWidget } from "../../../../core"; +import { shortcut, extend, createWidget, isArray } from "../../../../core"; /** * guy @@ -53,9 +53,9 @@ export class TextButton extends BasicButton { } doClick() { - super.doClick.apply(this, arguments); + super.doClick(...arguments); if (this.isValid()) { - this.fireEvent(BI.TextButton.EVENT_CHANGE, this.getValue(), this); + this.fireEvent(TextButton.EVENT_CHANGE, this.getValue(), this); } } @@ -76,8 +76,8 @@ export class TextButton extends BasicButton { } setText(text) { - super.setText.apply(this, arguments); - text = BI.isArray(text) ? text.join(",") : text; + super.setText(...arguments); + text = isArray(text) ? text.join(",") : text; this.text.setText(text); } @@ -86,9 +86,9 @@ export class TextButton extends BasicButton { } setValue(text) { - super.setValue.apply(this, arguments); + super.setValue(...arguments); if (!this.isReadOnly()) { - text = BI.isArray(text) ? text.join(",") : text; + text = isArray(text) ? text.join(",") : text; this.text.setValue(text); } } diff --git a/src/base/single/button/listitem/blankiconicontextitem.js b/src/base/single/button/listitem/blankiconicontextitem.js index 2a471e7b7..d57267110 100644 --- a/src/base/single/button/listitem/blankiconicontextitem.js +++ b/src/base/single/button/listitem/blankiconicontextitem.js @@ -1,5 +1,5 @@ import { BasicButton } from "../button.basic"; -import { shortcut } from "../../../../core"; +import { shortcut, extend } from "../../../../core"; /** * 带有一个占位 @@ -16,7 +16,7 @@ export class BlankIconIconTextItem extends BasicButton { _defaultConfig() { const conf = super._defaultConfig(arguments); - return BI.extend(conf, { + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-blank-icon-icon-text-item`, iconCls1: "", iconCls2: "", @@ -74,14 +74,14 @@ export class BlankIconIconTextItem extends BasicButton { } doClick() { - super.doClick.apply(this, arguments); + super.doClick(...arguments); if (this.isValid()) { this.fireEvent(BlankIconIconTextItem.EVENT_CHANGE, this.getValue(), this); } } setSelected(b) { - super.setSelected.apply(this, arguments); + super.setSelected(...arguments); this.icon1.setSelected(b); this.icon2.setSelected(b); } diff --git a/src/base/single/button/listitem/blankicontexticonitem.js b/src/base/single/button/listitem/blankicontexticonitem.js index 217906da8..1880cdcb3 100644 --- a/src/base/single/button/listitem/blankicontexticonitem.js +++ b/src/base/single/button/listitem/blankicontexticonitem.js @@ -75,7 +75,7 @@ export class BlankIconTextIconItem extends BasicButton { } doClick() { - super.doClick.apply(this, arguments); + super.doClick(...arguments); if (this.isValid()) { this.fireEvent(BI.BlankIconTextIconItem.EVENT_CHANGE, this.getValue(), this); } diff --git a/src/base/single/button/listitem/blankicontextitem.js b/src/base/single/button/listitem/blankicontextitem.js index fd2b34d32..30be259d2 100644 --- a/src/base/single/button/listitem/blankicontextitem.js +++ b/src/base/single/button/listitem/blankicontextitem.js @@ -67,7 +67,7 @@ export class BlankIconTextItem extends BasicButton { } doClick() { - super.doClick.apply(this, arguments); + super.doClick(...arguments); if (this.isValid()) { this.fireEvent(BlankIconTextItem.EVENT_CHANGE, this.getValue(), this); } diff --git a/src/base/single/button/listitem/icontexticonitem.js b/src/base/single/button/listitem/icontexticonitem.js index 1209e8054..3d95eac4e 100644 --- a/src/base/single/button/listitem/icontexticonitem.js +++ b/src/base/single/button/listitem/icontexticonitem.js @@ -72,7 +72,7 @@ export class IconTextIconItem extends BasicButton { } doClick() { - super.doClick.apply(this, arguments); + super.doClick(...arguments); if (this.isValid()) { this.fireEvent(IconTextIconItem.EVENT_CHANGE, this.getValue(), this); } diff --git a/src/base/single/button/listitem/icontextitem.js b/src/base/single/button/listitem/icontextitem.js index 70ce49654..b906cc6e7 100644 --- a/src/base/single/button/listitem/icontextitem.js +++ b/src/base/single/button/listitem/icontextitem.js @@ -65,9 +65,9 @@ export class IconTextItem extends BasicButton { } doClick() { - super.doClick.apply(this, arguments); + super.doClick(...arguments); if (this.isValid()) { - this.fireEvent(BI.IconTextItem.EVENT_CHANGE, this.getValue(), this); + this.fireEvent(IconTextItem.EVENT_CHANGE, this.getValue(), this); } } diff --git a/src/base/single/button/listitem/texticonitem.js b/src/base/single/button/listitem/texticonitem.js index db9b30478..c17811c92 100644 --- a/src/base/single/button/listitem/texticonitem.js +++ b/src/base/single/button/listitem/texticonitem.js @@ -39,8 +39,8 @@ export class TextIconItem extends BasicButton { items: [{ el: { type: "bi.label", - ref (_ref) { - self.text = _ref; + ref: _ref => { + this.text = _ref; }, cls: "list-item-text", textAlign: "left", @@ -65,7 +65,7 @@ export class TextIconItem extends BasicButton { } doClick() { - super.doClick.apply(this, arguments); + super.doClick(...arguments); if (this.isValid()) { this.fireEvent(TextIconItem.EVENT_CHANGE, this.getValue(), this); } diff --git a/src/base/single/button/listitem/textitem.js b/src/base/single/button/listitem/textitem.js index a1bb719b5..29546ad02 100644 --- a/src/base/single/button/listitem/textitem.js +++ b/src/base/single/button/listitem/textitem.js @@ -1,5 +1,5 @@ import { BasicButton } from "../button.basic"; -import { extend, shortcut } from "../../../../core"; +import { extend, shortcut, createWidget } from "../../../../core"; /** * guy @@ -9,7 +9,7 @@ import { extend, shortcut } from "../../../../core"; * @class TextItem * @extends BasicButton */ -@shortcut +@shortcut() export class TextItem extends BasicButton { static xtype = "bi.text_item"; static EVENT_CHANGE = "EVENT_CHANGE"; @@ -30,7 +30,7 @@ export class TextItem extends BasicButton { render() { const o = this.options; - this.text = BI.createWidget({ + this.text = createWidget({ type: "bi.label", element: this, textAlign: o.textAlign, @@ -49,9 +49,9 @@ export class TextItem extends BasicButton { } doClick() { - super.doClick.apply(this, arguments); + super.doClick(...arguments); if (this.isValid()) { - this.fireEvent(BI.TextItem.EVENT_CHANGE, this.getValue(), this); + this.fireEvent(TextItem.EVENT_CHANGE, this.getValue(), this); } } diff --git a/src/base/single/button/node/icontexticonnode.js b/src/base/single/button/node/icontexticonnode.js index a08b63c8d..77a737b48 100644 --- a/src/base/single/button/node/icontexticonnode.js +++ b/src/base/single/button/node/icontexticonnode.js @@ -69,7 +69,7 @@ export class IconTextIconNode extends NodeButton { } doClick() { - super.doClick.apply(this, arguments); + super.doClick(...arguments); if (this.isValid()) { this.fireEvent(IconTextIconNode.EVENT_CHANGE, this.getValue(), this); } diff --git a/src/base/single/button/node/icontextnode.js b/src/base/single/button/node/icontextnode.js index 5135030db..54c2b60bf 100644 --- a/src/base/single/button/node/icontextnode.js +++ b/src/base/single/button/node/icontextnode.js @@ -62,9 +62,9 @@ export class IconTextNode extends NodeButton { } doClick() { - super.doClick.apply(this, arguments); + super.doClick(...arguments); if (this.isValid()) { - this.fireEvent(BI.IconTextNode.EVENT_CHANGE, this.getValue(), this); + this.fireEvent(IconTextNode.EVENT_CHANGE, this.getValue(), this); } } diff --git a/src/base/single/button/node/texticonnode.js b/src/base/single/button/node/texticonnode.js index cc3f2dea8..e4ca824a1 100644 --- a/src/base/single/button/node/texticonnode.js +++ b/src/base/single/button/node/texticonnode.js @@ -61,7 +61,7 @@ export default class TextIconNode extends NodeButton { } doClick() { - super.doClick.apply(this, arguments); + super.doClick(...arguments); if (this.isValid()) { this.fireEvent(TextIconNode.EVENT_CHANGE, this.getValue(), this); } diff --git a/src/base/single/button/node/textnode.js b/src/base/single/button/node/textnode.js index e6e990cf7..c7b56766d 100644 --- a/src/base/single/button/node/textnode.js +++ b/src/base/single/button/node/textnode.js @@ -1,5 +1,5 @@ import { NodeButton } from "../button.node"; -import { extend, shortcut } from "../../../../core"; +import { extend, shortcut, createWidget } from "../../../../core"; /** * guy @@ -31,7 +31,7 @@ export class TextNode extends NodeButton { render() { const o = this.options; - this.text = BI.createWidget({ + this.text = createWidget({ type: "bi.label", element: this, textAlign: o.textAlign, @@ -50,7 +50,7 @@ export class TextNode extends NodeButton { } doClick() { - super.doClick.apply(this, arguments); + super.doClick(...arguments); if (this.isValid()) { this.fireEvent(TextNode.EVENT_CHANGE, this.getValue(), 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..2e231cd4a 100644 --- a/src/base/tree/customtree.js +++ b/src/base/tree/customtree.js @@ -6,9 +6,14 @@ * @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 +23,7 @@ BI.CustomTree = BI.inherit(BI.Widget, { }, items: [], - itemsCreator: BI.emptyFn, + itemsCreator: emptyFn, el: { type: "bi.button_tree", @@ -28,50 +33,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 +83,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/case/button/icon/icon.change.js b/src/case/button/icon/icon.change.js index 3e5ad6c46..f477373e5 100644 --- a/src/case/button/icon/icon.change.js +++ b/src/case/button/icon/icon.change.js @@ -45,7 +45,7 @@ export class IconChangeButton extends Single { o.iconCls = isFunction(o.iconCls) ? this.__watch(o.iconCls, (context, newValue) => { this.setIcon(newValue); }) : o.iconCls; - super._init.apply(this, arguments); + super._init(...arguments); this.button = createWidget({ type: "bi.icon_button", element: this, @@ -69,10 +69,10 @@ export class IconChangeButton extends Single { }); this.button.on(Controller.EVENT_CHANGE, (...args) => { - this.fireEvent(Controller.EVENT_CHANGE, args); + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); this.button.on(IconButton.EVENT_CHANGE, (...args) => { - this.fireEvent(IconChangeButton.EVENT_CHANGE, args); + this.fireEvent(IconChangeButton.EVENT_CHANGE, ...args); }); } diff --git a/src/case/button/icon/icon.trigger.js b/src/case/button/icon/icon.trigger.js index 1c799edd4..a9afa3d8a 100644 --- a/src/case/button/icon/icon.trigger.js +++ b/src/case/button/icon/icon.trigger.js @@ -11,7 +11,7 @@ import { shortcut, extend } from "../../../core"; @shortcut() export class TriggerIconButton extends IconButton { static xtype = "bi.trigger_icon_button"; - EVENT_CHANGE = IconButton.EVENT_CHANGE; + static EVENT_CHANGE = IconButton.EVENT_CHANGE; _defaultConfig() { const conf = super._defaultConfig(arguments); diff --git a/src/case/button/icon/iconhalf/icon.half.js b/src/case/button/icon/iconhalf/icon.half.js index 1efe6c110..7a72e5823 100644 --- a/src/case/button/icon/iconhalf/icon.half.js +++ b/src/case/button/icon/iconhalf/icon.half.js @@ -38,7 +38,7 @@ export class HalfButton extends BasicButton { } doClick() { - super.doClick.apply(this, arguments); + super.doClick(...arguments); if (this.isValid()) { this.fireEvent(HalfButton.EVENT_CHANGE); } diff --git a/src/case/button/item.multiselect.js b/src/case/button/item.multiselect.js index df74642c9..dd5548f4a 100644 --- a/src/case/button/item.multiselect.js +++ b/src/case/button/item.multiselect.js @@ -77,14 +77,14 @@ export class MultiSelectItem extends BasicButton { } doClick() { - BI.MultiSelectItem.superclass.doClick.apply(this, arguments); + super.doClick(...arguments); if (this.isValid()) { - this.fireEvent(BI.MultiSelectItem.EVENT_CHANGE, this.getValue(), this); + this.fireEvent(MultiSelectItem.EVENT_CHANGE, this.getValue(), this); } } setSelected(v) { - BI.MultiSelectItem.superclass.setSelected.apply(this, arguments); + super.setSelected(...arguments); this.checkbox.setSelected(v); } } diff --git a/src/case/button/item.singleselect.icontext.js b/src/case/button/item.singleselect.icontext.js index d92f59050..c32fc6b5a 100644 --- a/src/case/button/item.singleselect.icontext.js +++ b/src/case/button/item.singleselect.icontext.js @@ -43,13 +43,13 @@ export class SingleSelectIconTextItem extends Single { value: o.value, py: o.py, }); - this.text.on(Controller.EVENT_CHANGE, function () { - self.fireEvent(Controller.EVENT_CHANGE, arguments); + this.text.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); } _setEnable(enable) { - super._setEnable.apply(this, arguments); + super._setEnable(...arguments); if (enable === true) { this.element.attr("tabIndex", 1); } else if (enable === false) { diff --git a/src/case/button/item.singleselect.js b/src/case/button/item.singleselect.js index 9b3e682c7..e06f1c4a9 100644 --- a/src/case/button/item.singleselect.js +++ b/src/case/button/item.singleselect.js @@ -39,7 +39,7 @@ export class SingleSelectItem extends BasicButton { } _setEnable(enable) { - super._setEnable.apply(this, arguments); + super._setEnable(...arguments); if (enable === true) { this.element.attr("tabIndex", 1); } else if (enable === false) { @@ -56,14 +56,14 @@ export class SingleSelectItem extends BasicButton { } doClick() { - super.doClick.apply(this, arguments); + super.doClick(...arguments); if (this.isValid()) { this.fireEvent(SingleSelectItem.EVENT_CHANGE, this.isSelected(), this); } } setSelected(v) { - super.setSelected.apply(this, arguments); + super.setSelected(...arguments); } } diff --git a/src/case/button/item.singleselect.radio.js b/src/case/button/item.singleselect.radio.js index 19a04f120..8a314165d 100644 --- a/src/case/button/item.singleselect.radio.js +++ b/src/case/button/item.singleselect.radio.js @@ -62,7 +62,7 @@ export class SingleSelectRadioItem extends BasicButton { } _setEnable(enable) { - super._setEnable.apply(this, arguments); + super._setEnable(...arguments); if (enable === true) { this.element.attr("tabIndex", 1); } else if (enable === false) { @@ -79,14 +79,14 @@ export class SingleSelectRadioItem extends BasicButton { } doClick() { - BI.SingleSelectRadioItem.superclass.doClick.apply(this, arguments); + super.doClick(...arguments); if (this.isValid()) { - this.fireEvent(BI.SingleSelectRadioItem.EVENT_CHANGE, this.isSelected(), this); + this.fireEvent(SingleSelectRadioItem.EVENT_CHANGE, this.isSelected(), this); } } setSelected(v) { - BI.SingleSelectRadioItem.superclass.setSelected.apply(this, arguments); + super.setSelected(...arguments); this.radio.setSelected(v); } } diff --git a/src/case/button/node/node.arrow.js b/src/case/button/node/node.arrow.js index 08cc58605..aac112417 100644 --- a/src/case/button/node/node.arrow.js +++ b/src/case/button/node/node.arrow.js @@ -64,17 +64,17 @@ export class ArrowNode extends NodeButton { } doClick() { - super.doClick.apply(this, arguments); + super.doClick(...arguments); this.checkbox.setSelected(this.isOpened()); } setText(text) { - super.setText.apply(this, arguments); + super.setText(...arguments); this.text.setText(text); } setOpened(v) { - super.setOpened.apply(this, arguments); + super.setOpened(...arguments); this.checkbox.setSelected(v); } } diff --git a/src/case/button/node/node.first.plus.js b/src/case/button/node/node.first.plus.js index 60a266d49..5202c77ee 100644 --- a/src/case/button/node/node.first.plus.js +++ b/src/case/button/node/node.first.plus.js @@ -78,12 +78,12 @@ export class FirstPlusGroupNode extends NodeButton { } doClick() { - super.doClick.apply(this, arguments); + super.doClick(...arguments); this.checkbox.setSelected(this.isSelected()); } setOpened(v) { - super.setOpened.apply(this, arguments); + super.setOpened(...arguments); if (BI.isNotNull(this.checkbox)) { this.checkbox.setSelected(v); } diff --git a/src/case/button/node/node.icon.arrow.js b/src/case/button/node/node.icon.arrow.js index 2aa910a9b..c779795ec 100644 --- a/src/case/button/node/node.icon.arrow.js +++ b/src/case/button/node/node.icon.arrow.js @@ -1,5 +1,5 @@ import { NodeButton } from "../../../base/single/button/button.node"; -import { shortcut, extend, createWidget, Controller } from "../../../core"; +import { shortcut, extend, createWidget, Controller, isNotNull } from "../../../core"; /** * Created by User on 2016/3/31. @@ -96,13 +96,13 @@ export class IconArrowNode extends NodeButton { } doClick() { - BI.IconArrowNode.superclass.doClick.apply(this, arguments); + super.doClick(...arguments); this.checkbox.setSelected(this.isSelected()); } setOpened(v) { - BI.IconArrowNode.superclass.setOpened.apply(this, arguments); - if (BI.isNotNull(this.checkbox)) { + super.setOpened(...arguments); + if (isNotNull(this.checkbox)) { this.checkbox.setSelected(v); } } diff --git a/src/case/button/node/node.last.plus.js b/src/case/button/node/node.last.plus.js index 0dba75eaf..2f273f1d8 100644 --- a/src/case/button/node/node.last.plus.js +++ b/src/case/button/node/node.last.plus.js @@ -1,5 +1,5 @@ import { NodeButton } from "../../../base/single/button/button.node"; -import { shortcut, extend, createWidget, isNotNull } from "../../../core"; +import { shortcut, extend, createWidget, isNotNull, Controller } from "../../../core"; /** * 加号表示的组节点 @@ -46,7 +46,7 @@ export class LastPlusGroupNode extends NodeButton { py: o.py, keyword: o.keyword, }); - this.checkbox.on(BI.Controller.EVENT_CHANGE, type => { + this.checkbox.on(Controller.EVENT_CHANGE, type => { if (type === BI.Events.CLICK) { if (this.checkbox.isSelected()) { this.triggerExpand(); @@ -76,12 +76,12 @@ export class LastPlusGroupNode extends NodeButton { } doClick() { - super.doClick.apply(this, arguments); + super.doClick(...arguments); this.checkbox.setSelected(this.isSelected()); } setOpened(v) { - super.setOpened.apply(this, arguments); + super.setOpened(...arguments); if (isNotNull(this.checkbox)) { this.checkbox.setSelected(v); } diff --git a/src/case/button/node/node.mid.plus.js b/src/case/button/node/node.mid.plus.js index 94ce8b1b9..116a73a48 100644 --- a/src/case/button/node/node.mid.plus.js +++ b/src/case/button/node/node.mid.plus.js @@ -27,7 +27,7 @@ export class MidPlusGroupNode extends NodeButton { } _init() { - super._init.apply(this, arguments); + super._init(...arguments); const o = this.options; this.checkbox = createWidget({ type: "bi.mid_tree_node_checkbox", @@ -77,12 +77,12 @@ export class MidPlusGroupNode extends NodeButton { } doClick() { - super.doClick.apply(this, arguments); + super.doClick(...arguments); this.checkbox.setSelected(this.isSelected()); } setOpened(v) { - BI.MidPlusGroupNode.superclass.setOpened.apply(this, arguments); + super.setOpened(...arguments); if (BI.isNotNull(this.checkbox)) { this.checkbox.setSelected(v); } diff --git a/src/case/button/node/node.multilayer.icon.arrow.js b/src/case/button/node/node.multilayer.icon.arrow.js index c1a9b35da..958e88b79 100644 --- a/src/case/button/node/node.multilayer.icon.arrow.js +++ b/src/case/button/node/node.multilayer.icon.arrow.js @@ -1,5 +1,5 @@ import { NodeButton } from "../../../base/single/button/button.node"; -import { shortcut, extend, createWidget, Controller, count } from "../../../core"; +import { shortcut, extend, createWidget, Controller, count, makeArray } from "../../../core"; @shortcut() export class MultiLayerIconArrowNode extends NodeButton { @@ -22,7 +22,7 @@ export class MultiLayerIconArrowNode extends NodeButton { } _init() { - super._init.apply(this, arguments); + super._init(...arguments); const o = this.options; this.node = createWidget({ type: "bi.icon_arrow_node", @@ -42,7 +42,7 @@ export class MultiLayerIconArrowNode extends NodeButton { }); this.node.on(Controller.EVENT_CHANGE, (...args) => { this.setSelected(this.isSelected()); - this.fireEvent(Controller.EVENT_CHANGE, args); + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); const items = []; @@ -57,7 +57,7 @@ export class MultiLayerIconArrowNode extends NodeButton { createWidget({ type: "bi.horizontal_adapt", element: this, - columnSize: BI.makeArray(o.layer, 15), + columnSize: makeArray(o.layer, 15), items, }); } @@ -79,17 +79,17 @@ export class MultiLayerIconArrowNode extends NodeButton { } setSelected(b) { - super.setSelected.apply(this, arguments); + super.setSelected(...arguments); this.node.setSelected(b); } doClick() { - super.doClick.apply(this, arguments); + super.doClick(...arguments); this.node.setSelected(this.isSelected()); } setOpened(v) { - super.setOpened.apply(this, arguments); + super.setOpened(...arguments); this.node.setOpened(v); } } diff --git a/src/case/button/node/node.plus.js b/src/case/button/node/node.plus.js index f3f08b0cf..b04624456 100644 --- a/src/case/button/node/node.plus.js +++ b/src/case/button/node/node.plus.js @@ -73,12 +73,12 @@ export class PlusGroupNode extends NodeButton { } doClick() { - super.doClick.apply(this, arguments); + super.doClick(...arguments); this.checkbox.setSelected(this.isSelected()); } setOpened(v) { - super.setOpened.apply(this, arguments); + super.setOpened(...arguments); if (this.checkbox) { this.checkbox.setSelected(v); } diff --git a/src/case/button/node/siwtcher.tree.node.js b/src/case/button/node/siwtcher.tree.node.js index 46519ecb5..fe89b6569 100644 --- a/src/case/button/node/siwtcher.tree.node.js +++ b/src/case/button/node/siwtcher.tree.node.js @@ -46,7 +46,7 @@ export class TreeNodeSwitcher extends NodeButton { } setOpened(b) { - super.setOpened.apply(this, arguments); + super.setOpened(...arguments); const [collapse, expand] = this.getIconCls(); if (b) { this.element.addClass(expand).removeClass(collapse); @@ -56,7 +56,7 @@ export class TreeNodeSwitcher extends NodeButton { } doClick() { - super.doClick.apply(this, arguments); + super.doClick(...arguments); this.fireEvent(TreeNodeSwitcher.EVENT_CHANGE, this); } } diff --git a/src/case/button/node/treenode.js b/src/case/button/node/treenode.js index b2977e50a..e0a931e7d 100644 --- a/src/case/button/node/treenode.js +++ b/src/case/button/node/treenode.js @@ -28,7 +28,7 @@ export class BasicTreeNode extends NodeButton { const checkbox = { type: "bi.tree_node_switcher", - __ref: _ref => { + ref: _ref => { this.switcher = _ref; }, iconHeight: o.height, @@ -97,16 +97,16 @@ export class BasicTreeNode extends NodeButton { if (this.options.selectable) { return; } - super.doClick.apply(this, arguments); + super.doClick(...arguments); } setOpened(v) { - super.setOpened.apply(this, arguments); + super.setOpened(...arguments); this.switcher.setOpened(v); } setValue() { - super.setValue.apply(this, arguments); + super.setValue(...arguments); } } diff --git a/src/case/button/switch.js b/src/case/button/switch.js index c05baa832..f40cf3cf4 100644 --- a/src/case/button/switch.js +++ b/src/case/button/switch.js @@ -72,7 +72,7 @@ export class Switch extends BasicButton { } _setEnable(enable) { - super._setEnable.apply(this, arguments); + super._setEnable(...arguments); if (enable === true) { this.element.attr("tabIndex", 1); } else if (enable === false) { @@ -81,7 +81,7 @@ export class Switch extends BasicButton { } setSelected(v) { - super.setSelected.apply(this, arguments); + super.setSelected(...arguments); this.layout.attr("items")[0].left = v ? 28 : 4; this.layout.resize(); this.options.showTip && this.openTip.setVisible(v); @@ -89,7 +89,7 @@ export class Switch extends BasicButton { } doClick() { - super.doClick.apply(this, arguments); + super.doClick(...arguments); this.fireEvent(Switch.EVENT_CHANGE, this.isSelected()); } } diff --git a/src/case/button/treeitem/item.first.treeleaf.js b/src/case/button/treeitem/item.first.treeleaf.js index d09376bc0..f379f65c0 100644 --- a/src/case/button/treeitem/item.first.treeleaf.js +++ b/src/case/button/treeitem/item.first.treeleaf.js @@ -19,7 +19,7 @@ export class FirstTreeLeafItem extends BasicButton { } _init() { - super._init.apply(this, arguments); + super._init(...arguments); const o = this.options; this.text = createWidget({ type: "bi.label", @@ -55,7 +55,7 @@ export class FirstTreeLeafItem extends BasicButton { }); createWidget(extend({ element: this, - }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, { + }, BI.LogicFactory.createLogic(type, extend(o.logic, { items, })))); } diff --git a/src/case/button/treeitem/item.icon.treeleaf.js b/src/case/button/treeitem/item.icon.treeleaf.js index 280270774..56b94723b 100644 --- a/src/case/button/treeitem/item.icon.treeleaf.js +++ b/src/case/button/treeitem/item.icon.treeleaf.js @@ -19,7 +19,7 @@ export class IconTreeLeafItem extends BasicButton { } _init() { - super._init.apply(this, arguments); + super._init(...arguments); const o = this.options; const icon = createWidget({ @@ -52,9 +52,9 @@ export class IconTreeLeafItem extends BasicButton { }, { el: this.text, }); - createWidget(BI.extend({ + createWidget(extend({ element: this, - }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, { + }, BI.LogicFactory.createLogic(type, extend(o.logic, { items, hgap: 5, })))); diff --git a/src/case/button/treeitem/item.last.treeleaf.js b/src/case/button/treeitem/item.last.treeleaf.js index 887b95a2f..e8317f892 100644 --- a/src/case/button/treeitem/item.last.treeleaf.js +++ b/src/case/button/treeitem/item.last.treeleaf.js @@ -19,7 +19,7 @@ export class LastTreeLeafItem extends BasicButton { } _init() { - super._init.apply(this, arguments); + super._init(...arguments); const o = this.options; this.text = createWidget({ type: "bi.label", @@ -53,7 +53,7 @@ export class LastTreeLeafItem extends BasicButton { }, { el: this.text, }); - createWidget(BI.extend({ + createWidget(extend({ element: this, }, BI.LogicFactory.createLogic(type, extend(o.logic, { items, diff --git a/src/case/button/treeitem/item.mid.treeleaf.js b/src/case/button/treeitem/item.mid.treeleaf.js index 69e7bee6b..dfc00d4db 100644 --- a/src/case/button/treeitem/item.mid.treeleaf.js +++ b/src/case/button/treeitem/item.mid.treeleaf.js @@ -19,7 +19,7 @@ export class MidTreeLeafItem extends BasicButton { } _init() { - super._init.apply(this, arguments); + super._init(...arguments); const o = this.options; this.text = createWidget({ type: "bi.label", diff --git a/src/case/button/treeitem/item.multilayer.icon.treeleaf.js b/src/case/button/treeitem/item.multilayer.icon.treeleaf.js index 2d5e043fb..b39108611 100644 --- a/src/case/button/treeitem/item.multilayer.icon.treeleaf.js +++ b/src/case/button/treeitem/item.multilayer.icon.treeleaf.js @@ -1,5 +1,5 @@ import { BasicButton } from "../../../base/single/button/button.basic"; -import { shortcut, extend, createWidget, Controller, makeArray } from "../../../core"; +import { shortcut, extend, createWidget, Controller, makeArray, count } from "../../../core"; /** * @class BI.MultiLayerIconTreeLeafItem @@ -21,7 +21,7 @@ export class MultiLayerIconTreeLeafItem extends BasicButton { } _init() { - super._init.apply(this, arguments); + super._init(...arguments); const o = this.options; this.item = createWidget({ type: "bi.icon_tree_leaf_item", @@ -44,11 +44,11 @@ export class MultiLayerIconTreeLeafItem extends BasicButton { if (type === BI.Events.CLICK) {// 本身实现click功能 return; } - this.fireEvent(Controller.EVENT_CHANGE, args); + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); const items = []; - BI.count(0, o.layer, () => { + count(0, o.layer, () => { items.push({ type: "bi.layout", width: 15, @@ -89,12 +89,12 @@ export class MultiLayerIconTreeLeafItem extends BasicButton { } doClick () { - BI.MultiLayerIconTreeLeafItem.superclass.doClick.apply(this, arguments); + super.doClick(...arguments); this.item.setSelected(this.isSelected()); } setSelected(v) { - BI.MultiLayerIconTreeLeafItem.superclass.setSelected.apply(this, arguments); + super.setSelected(...arguments); this.item.setSelected(v); } diff --git a/src/case/button/treeitem/item.treetextleaf.js b/src/case/button/treeitem/item.treetextleaf.js index 2dca402e8..7bc273210 100644 --- a/src/case/button/treeitem/item.treetextleaf.js +++ b/src/case/button/treeitem/item.treetextleaf.js @@ -24,7 +24,7 @@ export class TreeTextLeafItem extends BasicButton { } _init() { - super._init.apply(this, arguments); + super._init(...arguments); const o = this.options; this.text = createWidget({ type: "bi.label",