tykayn/mastodon
1
0
Fork 0
mirror of https://framagit.org/tykayn/mastodon.git synced 2023-08-25 08:33:12 +02:00
Code Issues Projects Releases Wiki Activity

Fix scrolling behavior (#7151)

Browse Source 
* Update React.JS

* Use React's new lifecycles for scrollable lists

* Clean up dead code

* Make CodeClimate happy
This commit is contained in:
ThibG 2018-04-16 21:04:24 +02:00 committed by Eugen Rochko
parent 1c379b7ef4
commit 7e0aed398f
2 changed files with 14 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/javascript/mastodon/components/scrollable_list.js
View File

@ -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}

4
package.json
View File

@ -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",