monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use React's new lifecycles for scrollable lists

This commit is contained in:
Thibaut Girka 2018-04-15 18:23:11 +02:00
parent d55ab8e3e8
commit 8f8b71a278
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/javascript/flavours/glitch/components/scrollable_list.js
View File

@ -43,7 +43,6 @@ export default class ScrollableList extends PureComponent {
if (this.node) { if (this.node) {
const { scrollTop, scrollHeight, clientHeight } = this.node; const { scrollTop, scrollHeight, clientHeight } = this.node;
const offset = scrollHeight - scrollTop - clientHeight; const offset = scrollHeight - scrollTop - clientHeight;
this._oldScrollPosition = scrollHeight - scrollTop;
if (400 > offset && this.props.onScrollToBottom && !this.props.isLoading) { if (400 > offset && this.props.onScrollToBottom && !this.props.isLoading) {
this.props.onScrollToBottom(); this.props.onScrollToBottom();
@ -74,21 +73,26 @@ export default class ScrollableList extends PureComponent {
this.handleScroll(); this.handleScroll();
} }
componentDidUpdate (prevProps) { getSnapshotBeforeUpdate (prevProps, prevState) {
const someItemInserted = React.Children.count(prevProps.children) > 0 && const someItemInserted = React.Children.count(prevProps.children) > 0 &&
React.Children.count(prevProps.children) < React.Children.count(this.props.children) && React.Children.count(prevProps.children) < React.Children.count(this.props.children) &&
this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props); this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props);
if (someItemInserted && this.node.scrollTop > 0) {
return this.node.scrollHeight - this.node.scrollTop;
} else {
return null;
}
}
componentDidUpdate (prevProps, prevState, snapshot) {
// Reset the scroll position when a new child comes in in order not to // Reset the scroll position when a new child comes in in order not to
// jerk the scrollbar around if you're already scrolled down the page. // jerk the scrollbar around if you're already scrolled down the page.
if (someItemInserted && this._oldScrollPosition && this.node.scrollTop > 0) { if (snapshot !== null) {
const newScrollTop = this.node.scrollHeight - this._oldScrollPosition; const newScrollTop = this.node.scrollHeight - snapshot;
if (this.node.scrollTop !== newScrollTop) { if (this.node.scrollTop !== newScrollTop) {
this.node.scrollTop = newScrollTop; this.node.scrollTop = newScrollTop;
} }
} else {
this._oldScrollPosition = this.node.scrollHeight - this.node.scrollTop;
} }
} }