|
|
|
@ -1,4 +1,17 @@
|
|
|
|
|
import { isNull, isFunction, each, stripEL, keys, isArray, contains, isKey, isOdd, isWidget, isNotNull, has } from "../2.base"; |
|
|
|
|
import { |
|
|
|
|
isNull, |
|
|
|
|
isFunction, |
|
|
|
|
each, |
|
|
|
|
stripEL, |
|
|
|
|
keys, |
|
|
|
|
isArray, |
|
|
|
|
contains, |
|
|
|
|
isKey, |
|
|
|
|
isOdd, |
|
|
|
|
isWidget, |
|
|
|
|
isNotNull, |
|
|
|
|
has |
|
|
|
|
} from "../2.base"; |
|
|
|
|
import { Widget } from "../4.widget"; |
|
|
|
|
import { _lazyCreateWidget, Providers } from "../5.inject"; |
|
|
|
|
import { shortcut } from "../decorator"; |
|
|
|
@ -65,38 +78,38 @@ export class Layout extends Widget {
|
|
|
|
|
|
|
|
|
|
_init4Scroll() { |
|
|
|
|
switch (this.options.scrollable) { |
|
|
|
|
case true: |
|
|
|
|
case "xy": |
|
|
|
|
this.element.css("overflow", "auto"); |
|
|
|
|
|
|
|
|
|
return; |
|
|
|
|
case false: |
|
|
|
|
this.element.css("overflow", "hidden"); |
|
|
|
|
|
|
|
|
|
return; |
|
|
|
|
case "x": |
|
|
|
|
this.element.css({ |
|
|
|
|
"overflow-x": "auto", |
|
|
|
|
"overflow-y": "hidden", |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
return; |
|
|
|
|
case "y": |
|
|
|
|
this.element.css({ |
|
|
|
|
"overflow-x": "hidden", |
|
|
|
|
"overflow-y": "auto", |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
return; |
|
|
|
|
default : |
|
|
|
|
break; |
|
|
|
|
case true: |
|
|
|
|
case "xy": |
|
|
|
|
this.element.css("overflow", "auto"); |
|
|
|
|
|
|
|
|
|
return; |
|
|
|
|
case false: |
|
|
|
|
this.element.css("overflow", "hidden"); |
|
|
|
|
|
|
|
|
|
return; |
|
|
|
|
case "x": |
|
|
|
|
this.element.css({ |
|
|
|
|
"overflow-x": "auto", |
|
|
|
|
"overflow-y": "hidden", |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
return; |
|
|
|
|
case "y": |
|
|
|
|
this.element.css({ |
|
|
|
|
"overflow-x": "hidden", |
|
|
|
|
"overflow-y": "auto", |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
return; |
|
|
|
|
default : |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
if (this.options.scrollx) { |
|
|
|
|
this.element.css({ |
|
|
|
|
"overflow-x": "auto", |
|
|
|
|
"overflow-y": "hidden", |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
if (this.options.scrolly) { |
|
|
|
@ -149,7 +162,7 @@ export class Layout extends Widget {
|
|
|
|
|
} else { |
|
|
|
|
w = this.getWidgetByName(this._getChildName(i)); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return w; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -163,7 +176,7 @@ export class Layout extends Widget {
|
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return this._addElement(i, item, context, w); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -175,7 +188,7 @@ export class Layout extends Widget {
|
|
|
|
|
if (item instanceof Widget) { |
|
|
|
|
item = item.options; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return item; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -190,19 +203,19 @@ export class Layout extends Widget {
|
|
|
|
|
} |
|
|
|
|
const className = Object.prototype.toString.call(a); |
|
|
|
|
switch (className) { |
|
|
|
|
case "[object RegExp]": |
|
|
|
|
case "[object String]": |
|
|
|
|
return `${a}` === `${b}`; |
|
|
|
|
case "[object Number]": |
|
|
|
|
if (+a !== +a) { |
|
|
|
|
return +b !== +b; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return +a === 0 ? 1 / +a === 1 / b : +a === +b; |
|
|
|
|
case "[object Date]": |
|
|
|
|
case "[object Boolean]": |
|
|
|
|
return +a === +b; |
|
|
|
|
default: |
|
|
|
|
case "[object RegExp]": |
|
|
|
|
case "[object String]": |
|
|
|
|
return `${a}` === `${b}`; |
|
|
|
|
case "[object Number]": |
|
|
|
|
if (+a !== +a) { |
|
|
|
|
return +b !== +b; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return +a === 0 ? 1 / +a === 1 / b : +a === +b; |
|
|
|
|
case "[object Date]": |
|
|
|
|
case "[object Boolean]": |
|
|
|
|
return +a === +b; |
|
|
|
|
default: |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const areArrays = className === "[object Array]"; |
|
|
|
@ -252,10 +265,10 @@ export class Layout extends Widget {
|
|
|
|
|
} |
|
|
|
|
aStack.pop(); |
|
|
|
|
bStack.pop(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return true; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return eq(item1, item2); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -264,9 +277,9 @@ export class Layout extends Widget {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 不依赖于this.options.items进行更新
|
|
|
|
|
_updateItemAt(oldIndex, newIndex, item) { |
|
|
|
|
_updateItemAt(oldIndex, newIndex, item, context) { |
|
|
|
|
const del = this._children[this._getChildName(oldIndex)]; |
|
|
|
|
const w = this._newElement(newIndex, item); |
|
|
|
|
const w = this._newElement(newIndex, item, context); |
|
|
|
|
// 需要有个地方临时存一下新建的组件,否则如果直接使用newIndex的话,newIndex位置的元素可能会被用到
|
|
|
|
|
this._children[`${this._getChildName(newIndex)}-temp`] = w; |
|
|
|
|
const nextSibling = del.element.next(); |
|
|
|
@ -277,7 +290,7 @@ export class Layout extends Widget {
|
|
|
|
|
} |
|
|
|
|
del._destroy(); |
|
|
|
|
w._mount(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return true; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -314,42 +327,47 @@ export class Layout extends Widget {
|
|
|
|
|
if (Providers.getProvider(SystemProvider.xtype).getLayoutOptimize()) { |
|
|
|
|
return ((!item.type && item.el) ? ((item._lgap || 0) + (item.lgap || 0)) : item._lgap) || 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (item._lgap || 0) + (item.lgap || 0); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
_optimiseItemRgap(item) { |
|
|
|
|
if (Providers.getProvider(SystemProvider.xtype).getLayoutOptimize()) { |
|
|
|
|
return ((!item.type && item.el) ? ((item._rgap || 0) + (item.rgap || 0)) : item._rgap) || 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (item._rgap || 0) + (item.rgap || 0); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
_optimiseItemTgap(item) { |
|
|
|
|
if (Providers.getProvider(SystemProvider.xtype).getLayoutOptimize()) { |
|
|
|
|
return ((!item.type && item.el) ? ((item._tgap || 0) + (item.tgap || 0)) : item._tgap) || 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (item._tgap || 0) + (item.tgap || 0); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
_optimiseItemBgap(item) { |
|
|
|
|
if (Providers.getProvider(SystemProvider.xtype).getLayoutOptimize()) { |
|
|
|
|
return ((!item.type && item.el) ? ((item._bgap || 0) + (item.bgap || 0)) : item._bgap) || 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (item._bgap || 0) + (item.bgap || 0); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
_optimiseItemHgap(item) { |
|
|
|
|
if (Providers.getProvider(SystemProvider.xtype).getLayoutOptimize()) { |
|
|
|
|
return ((!item.type && item.el) ? ((item._hgap || 0) + (item.hgap || 0)) : item._hgap) || 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (item._hgap || 0) + (item.hgap || 0); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
_optimiseItemVgap(item) { |
|
|
|
|
if (Providers.getProvider(SystemProvider.xtype).getLayoutOptimize()) { |
|
|
|
|
return ((!item.type && item.el) ? ((item._vgap || 0) + (item.vgap || 0)) : item._vgap) || 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (item._vgap || 0) + (item.vgap || 0); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -450,7 +468,7 @@ export class Layout extends Widget {
|
|
|
|
|
w.element.prependTo(this._getWrapper()); |
|
|
|
|
} |
|
|
|
|
w._mount(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return w; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -479,7 +497,7 @@ export class Layout extends Widget {
|
|
|
|
|
if (!child || !child.shouldUpdate) { |
|
|
|
|
return null; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return child.shouldUpdate(this._getOptions(item)); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -532,7 +550,7 @@ export class Layout extends Widget {
|
|
|
|
|
value = value.concat(v); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return value; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -552,19 +570,19 @@ export class Layout extends Widget {
|
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
patchItem(oldVnode, vnode, oldIndex, newIndex) { |
|
|
|
|
patchItem(oldVnode, vnode, oldIndex, newIndex, context) { |
|
|
|
|
const shouldUpdate = this.shouldUpdateItem(oldIndex, vnode); |
|
|
|
|
const child = this._children[this._getChildName(oldIndex)]; |
|
|
|
|
if (shouldUpdate) { |
|
|
|
|
this._children[`${this._getChildName(newIndex)}-temp`] = child; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return child._update(this._getOptions(vnode), shouldUpdate); |
|
|
|
|
} |
|
|
|
|
if (shouldUpdate === null && !this._compare(oldVnode, vnode)) { |
|
|
|
|
// if (child.update) {
|
|
|
|
|
// return child.update(this._getOptions(vnode));
|
|
|
|
|
// }
|
|
|
|
|
return this._updateItemAt(oldIndex, newIndex, vnode); |
|
|
|
|
return this._updateItemAt(oldIndex, newIndex, vnode, context); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -647,7 +665,7 @@ export class Layout extends Widget {
|
|
|
|
|
findIndex = i; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return [found, findIndex]; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
@ -665,26 +683,26 @@ export class Layout extends Widget {
|
|
|
|
|
} else if (isNull(oldEndVnode)) { |
|
|
|
|
oldEndVnode = oldCh[--oldEndIdx]; |
|
|
|
|
} else if (sameVnode(oldStartVnode, newStartVnode, oldStartIdx, newStartIdx)) { |
|
|
|
|
const willUpdate = this.patchItem(oldStartVnode, newStartVnode, oldStartIdx, newStartIdx); |
|
|
|
|
const willUpdate = this.patchItem(oldStartVnode, newStartVnode, oldStartIdx, newStartIdx, context); |
|
|
|
|
updated = willUpdate || updated; |
|
|
|
|
children[isNull(oldStartVnode.key) ? oldStartIdx : oldStartVnode.key] = willUpdate ? this._children[`${this._getChildName(newStartIdx)}-temp`] : this._children[this._getChildName(oldStartIdx)]; |
|
|
|
|
oldStartVnode = oldCh[++oldStartIdx]; |
|
|
|
|
newStartVnode = newCh[++newStartIdx]; |
|
|
|
|
} else if (sameVnode(oldEndVnode, newEndVnode, oldEndIdx, newEndIdx)) { |
|
|
|
|
const willUpdate = this.patchItem(oldEndVnode, newEndVnode, oldEndIdx, newEndIdx); |
|
|
|
|
const willUpdate = this.patchItem(oldEndVnode, newEndVnode, oldEndIdx, newEndIdx, context); |
|
|
|
|
updated = willUpdate || updated; |
|
|
|
|
children[isNull(oldEndVnode.key) ? oldEndIdx : oldEndVnode.key] = willUpdate ? this._children[`${this._getChildName(newEndIdx)}-temp`] : this._children[this._getChildName(oldEndIdx)]; |
|
|
|
|
oldEndVnode = oldCh[--oldEndIdx]; |
|
|
|
|
newEndVnode = newCh[--newEndIdx]; |
|
|
|
|
} else if (sameVnode(oldStartVnode, newEndVnode)) { |
|
|
|
|
const willUpdate = this.patchItem(oldStartVnode, newEndVnode, oldStartIdx, newStartIdx); |
|
|
|
|
const willUpdate = this.patchItem(oldStartVnode, newEndVnode, oldStartIdx, newStartIdx, context); |
|
|
|
|
updated = willUpdate || updated; |
|
|
|
|
children[isNull(oldStartVnode.key) ? oldStartIdx : oldStartVnode.key] = willUpdate ? this._children[`${this._getChildName(newStartIdx)}-temp`] : this._children[this._getChildName(oldStartIdx)]; |
|
|
|
|
insertBefore(oldStartVnode, oldEndVnode, true); |
|
|
|
|
oldStartVnode = oldCh[++oldStartIdx]; |
|
|
|
|
newEndVnode = newCh[--newEndIdx]; |
|
|
|
|
} else if (sameVnode(oldEndVnode, newStartVnode)) { |
|
|
|
|
const willUpdate = this.patchItem(oldEndVnode, newStartVnode, oldEndIdx, newEndIdx); |
|
|
|
|
const willUpdate = this.patchItem(oldEndVnode, newStartVnode, oldEndIdx, newEndIdx, context); |
|
|
|
|
updated = willUpdate || updated; |
|
|
|
|
children[isNull(oldEndVnode) ? oldEndIdx : oldEndVnode.key] = willUpdate ? this._children[`${this._getChildName(newEndIdx)}-temp`] : this._children[this._getChildName(oldEndIdx)]; |
|
|
|
|
insertBefore(oldEndVnode, oldStartVnode); |
|
|
|
@ -697,7 +715,7 @@ export class Layout extends Widget {
|
|
|
|
|
insertBefore(node, oldStartVnode); |
|
|
|
|
} else { // 如果新节点在旧节点区间中存在就复用一下
|
|
|
|
|
const sameOldIndex = sameOldVnode[1]; |
|
|
|
|
const willUpdate = this.patchItem(sameOldVnode[0], newStartVnode, sameOldIndex, newStartIdx); |
|
|
|
|
const willUpdate = this.patchItem(sameOldVnode[0], newStartVnode, sameOldIndex, newStartIdx, context); |
|
|
|
|
updated = willUpdate || updated; |
|
|
|
|
children[isNull(sameOldVnode[0].key) ? newStartIdx : sameOldVnode[0].key] = willUpdate ? this._children[`${this._getChildName(newStartIdx)}-temp`] : this._children[this._getChildName(sameOldIndex)]; |
|
|
|
|
oldCh[sameOldIndex] = undefined; |
|
|
|
@ -744,7 +762,7 @@ export class Layout extends Widget {
|
|
|
|
|
const context = opt.context; |
|
|
|
|
const oldItems = o.items; |
|
|
|
|
this.options.items = items; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return this.updateChildren(oldItems, items, context); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -808,7 +826,7 @@ export class Layout extends Widget {
|
|
|
|
|
items, |
|
|
|
|
context: options.context, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
this.options.items = items; |
|
|
|
|