Fix lazylist

Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>
This commit is contained in:
RMidhunSuresh 2021-07-16 13:10:09 +05:30
parent 0e0976c7f5
commit 829830c0fa

View file

@ -126,8 +126,7 @@ export class LazyListView extends ListView {
this._root.style.paddingTop = `${paddingTop}px`; this._root.style.paddingTop = `${paddingTop}px`;
this._root.style.paddingBottom = `${paddingBottom}px`; this._root.style.paddingBottom = `${paddingBottom}px`;
for (const child of this._childInstances) { for (const child of this._childInstances) {
child.root().remove(); this._removeChild(child);
child.unmount();
} }
this._childInstances = []; this._childInstances = [];
const fragment = document.createDocumentFragment(); const fragment = document.createDocumentFragment();
@ -167,6 +166,10 @@ export class LazyListView extends ListView {
*/ */
} }
_removeChild(child) {
child.root().remove();
child.unmount();
}
// If size of the list changes, re-render // If size of the list changes, re-render
onAdd() { onAdd() {
@ -198,13 +201,14 @@ export class LazyListView extends ListView {
// Element is moved up the list, so render element from top boundary // Element is moved up the list, so render element from top boundary
const index = topCount; const index = topCount;
const child = childFromIndex(index); const child = childFromIndex(index);
// Modify childInstances here this._childInstances.unshift(child);
this._root.insertBefore(mountView(child, this._mountArgs), this._root.firstChild); this._root.insertBefore(mountView(child, this._mountArgs), this._root.firstChild);
} }
else { else {
// Element is moved down the list, so render element from bottom boundary // Element is moved down the list, so render element from bottom boundary
const index = topCount + renderCount - 1; const index = topCount + renderCount - 1;
const child = childFromIndex(index); const child = childFromIndex(index);
this._childInstances.push(child);
this._root.appendChild(mountView(child, this._mountArgs)); this._root.appendChild(mountView(child, this._mountArgs));
} }
} }
@ -212,10 +216,12 @@ export class LazyListView extends ListView {
_removeAdditionalElement(fromIdx, toIdx) { _removeAdditionalElement(fromIdx, toIdx) {
if (toIdx < fromIdx) { if (toIdx < fromIdx) {
// Element comes from the bottom, so remove element at bottom // Element comes from the bottom, so remove element at bottom
this._root.lastChild.remove(); const child = this._childInstances.pop();
this._removeChild(child);
} }
else { else {
this._root.firstChild.remove(); const child = this._childInstances.shift();
this._removeChild(child);
} }
} }
@ -230,7 +236,7 @@ export class LazyListView extends ListView {
else if (fromInRange && !toInRange) { else if (fromInRange && !toInRange) {
this.onBeforeListChanged(); this.onBeforeListChanged();
const [child] = this._childInstances.splice(normalizedFromIdx, 1); const [child] = this._childInstances.splice(normalizedFromIdx, 1);
child.root().remove(); this._removeChild(child);
this._renderAdditionalElement(fromIdx, toIdx); this._renderAdditionalElement(fromIdx, toIdx);
this.onListChanged(); this.onListChanged();
} }