Merge pull request #427 from ThibG/glitch-soc/fixes/scroll-behavior

Improve ScrollableList behavior
remotes/1727458204337373841/tmp_refs/heads/signup-info-prompt
beatrix 2018-04-22 12:09:52 -04:00 committed by GitHub
commit 125e8c7f5a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 66 additions and 27 deletions

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.onScrollToBottom && !this.props.isLoading) { if (400 > offset && this.props.onScrollToBottom && !this.props.isLoading) {
this.props.onScrollToBottom(); this.props.onScrollToBottom();
@ -57,14 +56,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();
@ -74,22 +65,37 @@ export default class ScrollableList extends PureComponent {
this.handleScroll(); this.handleScroll();
} }
componentDidUpdate (prevProps) { getScrollPosition = () => {
if (this.node && this.node.scrollTop > 0) {
return {height: this.node.scrollHeight, top: this.node.scrollTop};
} else {
return null;
}
}
updateScrollBottom = (snapshot) => {
const newScrollTop = this.node.scrollHeight - snapshot;
if (this.node.scrollTop !== newScrollTop) {
this.node.scrollTop = newScrollTop;
}
}
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) this.updateScrollBottom(snapshot);
const newScrollTop = this.node.scrollHeight - this._oldScrollPosition;
if (this.node.scrollTop !== newScrollTop) {
this.node.scrollTop = newScrollTop;
}
} else {
this._oldScrollPosition = this.node.scrollHeight - this.node.scrollTop;
}
} }
componentWillUnmount () { componentWillUnmount () {
@ -141,10 +147,6 @@ export default class ScrollableList extends PureComponent {
this.props.onScrollToBottom(); this.props.onScrollToBottom();
} }
_recentlyMoved () {
return this._lastMouseMove !== null && ((new Date()) - this._lastMouseMove < 600);
}
render () { render () {
const { children, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, emptyMessage } = this.props; const { children, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, emptyMessage } = this.props;
const { fullscreen } = this.state; const { fullscreen } = this.state;
@ -155,7 +157,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}
@ -168,7 +170,7 @@ export default class ScrollableList extends PureComponent {
intersectionObserverWrapper={this.intersectionObserverWrapper} intersectionObserverWrapper={this.intersectionObserverWrapper}
saveHeightKey={trackScroll ? `${this.context.router.route.location.key}:${scrollKey}` : null} saveHeightKey={trackScroll ? `${this.context.router.route.location.key}:${scrollKey}` : null}
> >
{child} {React.cloneElement(child, {getScrollPosition: this.getScrollPosition, updateScrollBottom: this.updateScrollBottom})}
</IntersectionObserverArticleContainer> </IntersectionObserverArticleContainer>
))} ))}

View File

@ -45,10 +45,13 @@ export default class Status extends ImmutablePureComponent {
withDismiss: PropTypes.bool, withDismiss: PropTypes.bool,
onMoveUp: PropTypes.func, onMoveUp: PropTypes.func,
onMoveDown: PropTypes.func, onMoveDown: PropTypes.func,
getScrollPosition: PropTypes.func,
updateScrollBottom: PropTypes.func,
}; };
state = { state = {
isExpanded: null, isExpanded: null,
autoCollapsed: false,
} }
// Avoid checking props that are functions (and whose equality will always // Avoid checking props that are functions (and whose equality will always
@ -134,7 +137,31 @@ export default class Status extends ImmutablePureComponent {
default: default:
return false; return false;
} }
}()) this.setExpansion(false); }()) {
this.setExpansion(false);
// Hack to fix timeline jumps on second rendering when auto-collapsing
this.setState({ autoCollapsed: true });
}
}
getSnapshotBeforeUpdate (prevProps, prevState) {
if (this.props.getScrollPosition) {
return this.props.getScrollPosition();
} else {
return null;
}
}
// Hack to fix timeline jumps on second rendering when auto-collapsing
componentDidUpdate (prevProps, prevState, snapshot) {
if (this.state.autoCollapsed) {
this.setState({ autoCollapsed: false });
if (snapshot !== null && this.props.updateScrollBottom) {
if (this.node.offsetTop < snapshot.top) {
this.props.updateScrollBottom(snapshot.height - snapshot.top);
}
}
}
} }
// `setExpansion()` sets the value of `isExpanded` in our state. It takes // `setExpansion()` sets the value of `isExpanded` in our state. It takes

View File

@ -16,6 +16,8 @@ export default class Notification extends ImmutablePureComponent {
onMoveUp: PropTypes.func.isRequired, onMoveUp: PropTypes.func.isRequired,
onMoveDown: PropTypes.func.isRequired, onMoveDown: PropTypes.func.isRequired,
onMention: PropTypes.func.isRequired, onMention: PropTypes.func.isRequired,
getScrollPosition: PropTypes.func,
updateScrollBottom: PropTypes.func,
}; };
render () { render () {
@ -25,6 +27,8 @@ export default class Notification extends ImmutablePureComponent {
onMoveDown, onMoveDown,
onMoveUp, onMoveUp,
onMention, onMention,
getScrollPosition,
updateScrollBottom,
} = this.props; } = this.props;
switch(notification.get('type')) { switch(notification.get('type')) {
@ -50,6 +54,8 @@ export default class Notification extends ImmutablePureComponent {
onMoveDown={onMoveDown} onMoveDown={onMoveDown}
onMoveUp={onMoveUp} onMoveUp={onMoveUp}
onMention={onMention} onMention={onMention}
getScrollPosition={getScrollPosition}
updateScrollBottom={updateScrollBottom}
withDismiss withDismiss
/> />
); );
@ -66,6 +72,8 @@ export default class Notification extends ImmutablePureComponent {
onMoveDown={onMoveDown} onMoveDown={onMoveDown}
onMoveUp={onMoveUp} onMoveUp={onMoveUp}
onMention={onMention} onMention={onMention}
getScrollPosition={getScrollPosition}
updateScrollBottom={updateScrollBottom}
withDismiss withDismiss
/> />
); );
@ -82,6 +90,8 @@ export default class Notification extends ImmutablePureComponent {
onMoveDown={onMoveDown} onMoveDown={onMoveDown}
onMoveUp={onMoveUp} onMoveUp={onMoveUp}
onMention={onMention} onMention={onMention}
getScrollPosition={getScrollPosition}
updateScrollBottom={updateScrollBottom}
withDismiss withDismiss
/> />
); );