Fix scrolling behavior (#7151)
* Update React.JS * Use React's new lifecycles for scrollable lists * Clean up dead code * Make CodeClimate happygh/stable
parent
1c379b7ef4
commit
7e0aed398f
|
@ -34,7 +34,7 @@ export default class ScrollableList extends PureComponent {
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
lastMouseMove: null,
|
fullscreen: null,
|
||||||
};
|
};
|
||||||
|
|
||||||
intersectionObserverWrapper = new IntersectionObserverWrapper();
|
intersectionObserverWrapper = new IntersectionObserverWrapper();
|
||||||
|
@ -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.onLoadMore && !this.props.isLoading) {
|
if (400 > offset && this.props.onLoadMore && !this.props.isLoading) {
|
||||||
this.props.onLoadMore();
|
this.props.onLoadMore();
|
||||||
|
@ -59,14 +58,6 @@ export default class ScrollableList extends PureComponent {
|
||||||
trailing: true,
|
trailing: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
handleMouseMove = throttle(() => {
|
|
||||||
this._lastMouseMove = new Date();
|
|
||||||
}, 300);
|
|
||||||
|
|
||||||
handleMouseLeave = () => {
|
|
||||||
this._lastMouseMove = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount () {
|
componentDidMount () {
|
||||||
this.attachScrollListener();
|
this.attachScrollListener();
|
||||||
this.attachIntersectionObserver();
|
this.attachIntersectionObserver();
|
||||||
|
@ -76,21 +67,26 @@ export default class ScrollableList extends PureComponent {
|
||||||
this.handleScroll();
|
this.handleScroll();
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidUpdate (prevProps) {
|
getSnapshotBeforeUpdate (prevProps) {
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -143,10 +139,6 @@ export default class ScrollableList extends PureComponent {
|
||||||
this.props.onLoadMore();
|
this.props.onLoadMore();
|
||||||
}
|
}
|
||||||
|
|
||||||
_recentlyMoved () {
|
|
||||||
return this._lastMouseMove !== null && ((new Date()) - this._lastMouseMove < 600);
|
|
||||||
}
|
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { children, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, emptyMessage, onLoadMore } = this.props;
|
const { children, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, emptyMessage, onLoadMore } = this.props;
|
||||||
const { fullscreen } = this.state;
|
const { fullscreen } = this.state;
|
||||||
|
@ -157,7 +149,7 @@ export default class ScrollableList extends PureComponent {
|
||||||
|
|
||||||
if (isLoading || childrenCount > 0 || !emptyMessage) {
|
if (isLoading || childrenCount > 0 || !emptyMessage) {
|
||||||
scrollableArea = (
|
scrollableArea = (
|
||||||
<div className={classNames('scrollable', { fullscreen })} ref={this.setRef} onMouseMove={this.handleMouseMove} onMouseLeave={this.handleMouseLeave}>
|
<div className={classNames('scrollable', { fullscreen })} ref={this.setRef}>
|
||||||
<div role='feed' className='item-list'>
|
<div role='feed' className='item-list'>
|
||||||
{prepend}
|
{prepend}
|
||||||
|
|
||||||
|
|
|
@ -83,8 +83,8 @@
|
||||||
"prop-types": "^15.5.10",
|
"prop-types": "^15.5.10",
|
||||||
"punycode": "^2.1.0",
|
"punycode": "^2.1.0",
|
||||||
"rails-ujs": "^5.1.2",
|
"rails-ujs": "^5.1.2",
|
||||||
"react": "^16.2.0",
|
"react": "^16.3.0",
|
||||||
"react-dom": "^16.2.0",
|
"react-dom": "^16.3.0",
|
||||||
"react-hotkeys": "^0.10.0",
|
"react-hotkeys": "^0.10.0",
|
||||||
"react-immutable-proptypes": "^2.1.0",
|
"react-immutable-proptypes": "^2.1.0",
|
||||||
"react-immutable-pure-component": "^1.1.1",
|
"react-immutable-pure-component": "^1.1.1",
|
||||||
|
|
Reference in New Issue