keep track of current updateHeight request outside of method
it's only called from one place
This commit is contained in:
parent
2bcced72ad
commit
88f039fe44
1 changed files with 31 additions and 35 deletions
|
@ -578,7 +578,7 @@ module.exports = React.createClass({
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
_restoreSavedScrollState: function() {
|
_restoreSavedScrollState: async function() {
|
||||||
const scrollState = this.scrollState;
|
const scrollState = this.scrollState;
|
||||||
|
|
||||||
if (scrollState.stuckAtBottom) {
|
if (scrollState.stuckAtBottom) {
|
||||||
|
@ -598,48 +598,44 @@ module.exports = React.createClass({
|
||||||
}
|
}
|
||||||
// TODO: also call _updateHeight if not already in progress
|
// TODO: also call _updateHeight if not already in progress
|
||||||
if (!this._heightUpdateInProgress) {
|
if (!this._heightUpdateInProgress) {
|
||||||
const heightDiff = this._getMessagesHeight() - this._getListHeight();
|
this._heightUpdateInProgress = true;
|
||||||
if (heightDiff > 0) {
|
try {
|
||||||
this._updateHeight();
|
await this._updateHeight();
|
||||||
|
} finally {
|
||||||
|
this._heightUpdateInProgress = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// need a better name that also indicates this will change scrollTop? Rebalance height? Reveal content?
|
// need a better name that also indicates this will change scrollTop? Rebalance height? Reveal content?
|
||||||
async _updateHeight() {
|
async _updateHeight() {
|
||||||
if (this._heightUpdateInProgress) {
|
const startTs = Date.now();
|
||||||
return;
|
// wait until user has stopped scrolling
|
||||||
|
if (this._scrollTimeout.isRunning()) {
|
||||||
|
debuglog("xxx updateHeight waiting for scrolling to end ... ");
|
||||||
|
await this._scrollTimeout.finished();
|
||||||
}
|
}
|
||||||
this._heightUpdateInProgress = true;
|
|
||||||
try {
|
|
||||||
// wait until user has stopped scrolling
|
|
||||||
if (this._scrollTimeout.isRunning()) {
|
|
||||||
await this._scrollTimeout.finished();
|
|
||||||
}
|
|
||||||
|
|
||||||
const sn = this._getScrollNode();
|
const sn = this._getScrollNode();
|
||||||
const itemlist = this.refs.itemlist;
|
const itemlist = this.refs.itemlist;
|
||||||
const contentHeight = this._getMessagesHeight();
|
const contentHeight = this._getMessagesHeight();
|
||||||
const minHeight = sn.clientHeight;
|
const minHeight = sn.clientHeight;
|
||||||
const height = Math.max(minHeight, contentHeight);
|
const height = Math.max(minHeight, contentHeight);
|
||||||
this._pages = Math.ceil(height / PAGE_SIZE);
|
this._pages = Math.ceil(height / PAGE_SIZE);
|
||||||
this._bottomGrowth = 0;
|
this._bottomGrowth = 0;
|
||||||
const newHeight = this._getListHeight();
|
const newHeight = this._getListHeight();
|
||||||
|
|
||||||
if (this.scrollState.stuckAtBottom) {
|
if (this.scrollState.stuckAtBottom) {
|
||||||
itemlist.style.height = `${newHeight}px`;
|
itemlist.style.height = `${newHeight}px`;
|
||||||
sn.scrollTop = sn.scrollHeight;
|
sn.scrollTop = sn.scrollHeight;
|
||||||
debuglog("updateHeight to", newHeight);
|
debuglog("xxx updateHeight to", newHeight);
|
||||||
} else {
|
} else {
|
||||||
const trackedNode = this._getTrackedNode();
|
const trackedNode = this._getTrackedNode();
|
||||||
const oldTop = trackedNode.offsetTop;
|
const oldTop = trackedNode.offsetTop;
|
||||||
itemlist.style.height = `${newHeight}px`;
|
itemlist.style.height = `${newHeight}px`;
|
||||||
const newTop = trackedNode.offsetTop;
|
const newTop = trackedNode.offsetTop;
|
||||||
const topDiff = newTop - oldTop;
|
const topDiff = newTop - oldTop;
|
||||||
sn.scrollTop = sn.scrollTop + topDiff;
|
sn.scrollTop = sn.scrollTop + topDiff;
|
||||||
debuglog("updateHeight to", newHeight, topDiff);
|
debuglog("xxx updateHeight to", newHeight, topDiff, Date.now() - startTs);
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
this._heightUpdateInProgress = false;
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue