Merge pull request #427 from ThibG/glitch-soc/fixes/scroll-behavior
Improve ScrollableList behavior
This commit is contained in:
commit
125e8c7f5a
3 changed files with 66 additions and 27 deletions
|
@ -34,7 +34,7 @@ export default class ScrollableList extends PureComponent {
|
|||
};
|
||||
|
||||
state = {
|
||||
lastMouseMove: null,
|
||||
fullscreen: null,
|
||||
};
|
||||
|
||||
intersectionObserverWrapper = new IntersectionObserverWrapper();
|
||||
|
@ -43,7 +43,6 @@ export default class ScrollableList extends PureComponent {
|
|||
if (this.node) {
|
||||
const { scrollTop, scrollHeight, clientHeight } = this.node;
|
||||
const offset = scrollHeight - scrollTop - clientHeight;
|
||||
this._oldScrollPosition = scrollHeight - scrollTop;
|
||||
|
||||
if (400 > offset && this.props.onScrollToBottom && !this.props.isLoading) {
|
||||
this.props.onScrollToBottom();
|
||||
|
@ -57,14 +56,6 @@ export default class ScrollableList extends PureComponent {
|
|||
trailing: true,
|
||||
});
|
||||
|
||||
handleMouseMove = throttle(() => {
|
||||
this._lastMouseMove = new Date();
|
||||
}, 300);
|
||||
|
||||
handleMouseLeave = () => {
|
||||
this._lastMouseMove = null;
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
this.attachScrollListener();
|
||||
this.attachIntersectionObserver();
|
||||
|
@ -74,22 +65,37 @@ export default class ScrollableList extends PureComponent {
|
|||
this.handleScroll();
|
||||
}
|
||||
|
||||
componentDidUpdate (prevProps) {
|
||||
const someItemInserted = React.Children.count(prevProps.children) > 0 &&
|
||||
React.Children.count(prevProps.children) < React.Children.count(this.props.children) &&
|
||||
this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props);
|
||||
getScrollPosition = () => {
|
||||
if (this.node && this.node.scrollTop > 0) {
|
||||
return {height: this.node.scrollHeight, top: this.node.scrollTop};
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// 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.
|
||||
if (someItemInserted && this._oldScrollPosition && this.node.scrollTop > 0) {
|
||||
const newScrollTop = this.node.scrollHeight - this._oldScrollPosition;
|
||||
updateScrollBottom = (snapshot) => {
|
||||
const newScrollTop = this.node.scrollHeight - snapshot;
|
||||
|
||||
if (this.node.scrollTop !== newScrollTop) {
|
||||
this.node.scrollTop = newScrollTop;
|
||||
}
|
||||
} else {
|
||||
this._oldScrollPosition = this.node.scrollHeight - this.node.scrollTop;
|
||||
}
|
||||
|
||||
getSnapshotBeforeUpdate (prevProps, prevState) {
|
||||
const someItemInserted = React.Children.count(prevProps.children) > 0 &&
|
||||
React.Children.count(prevProps.children) < React.Children.count(this.props.children) &&
|
||||
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
|
||||
// jerk the scrollbar around if you're already scrolled down the page.
|
||||
if (snapshot !== null) this.updateScrollBottom(snapshot);
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
|
@ -141,10 +147,6 @@ export default class ScrollableList extends PureComponent {
|
|||
this.props.onScrollToBottom();
|
||||
}
|
||||
|
||||
_recentlyMoved () {
|
||||
return this._lastMouseMove !== null && ((new Date()) - this._lastMouseMove < 600);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { children, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, emptyMessage } = this.props;
|
||||
const { fullscreen } = this.state;
|
||||
|
@ -155,7 +157,7 @@ export default class ScrollableList extends PureComponent {
|
|||
|
||||
if (isLoading || childrenCount > 0 || !emptyMessage) {
|
||||
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'>
|
||||
{prepend}
|
||||
|
||||
|
@ -168,7 +170,7 @@ export default class ScrollableList extends PureComponent {
|
|||
intersectionObserverWrapper={this.intersectionObserverWrapper}
|
||||
saveHeightKey={trackScroll ? `${this.context.router.route.location.key}:${scrollKey}` : null}
|
||||
>
|
||||
{child}
|
||||
{React.cloneElement(child, {getScrollPosition: this.getScrollPosition, updateScrollBottom: this.updateScrollBottom})}
|
||||
</IntersectionObserverArticleContainer>
|
||||
))}
|
||||
|
||||
|
|
|
@ -45,10 +45,13 @@ export default class Status extends ImmutablePureComponent {
|
|||
withDismiss: PropTypes.bool,
|
||||
onMoveUp: PropTypes.func,
|
||||
onMoveDown: PropTypes.func,
|
||||
getScrollPosition: PropTypes.func,
|
||||
updateScrollBottom: PropTypes.func,
|
||||
};
|
||||
|
||||
state = {
|
||||
isExpanded: null,
|
||||
autoCollapsed: false,
|
||||
}
|
||||
|
||||
// Avoid checking props that are functions (and whose equality will always
|
||||
|
@ -134,7 +137,31 @@ export default class Status extends ImmutablePureComponent {
|
|||
default:
|
||||
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
|
||||
|
|
|
@ -16,6 +16,8 @@ export default class Notification extends ImmutablePureComponent {
|
|||
onMoveUp: PropTypes.func.isRequired,
|
||||
onMoveDown: PropTypes.func.isRequired,
|
||||
onMention: PropTypes.func.isRequired,
|
||||
getScrollPosition: PropTypes.func,
|
||||
updateScrollBottom: PropTypes.func,
|
||||
};
|
||||
|
||||
render () {
|
||||
|
@ -25,6 +27,8 @@ export default class Notification extends ImmutablePureComponent {
|
|||
onMoveDown,
|
||||
onMoveUp,
|
||||
onMention,
|
||||
getScrollPosition,
|
||||
updateScrollBottom,
|
||||
} = this.props;
|
||||
|
||||
switch(notification.get('type')) {
|
||||
|
@ -50,6 +54,8 @@ export default class Notification extends ImmutablePureComponent {
|
|||
onMoveDown={onMoveDown}
|
||||
onMoveUp={onMoveUp}
|
||||
onMention={onMention}
|
||||
getScrollPosition={getScrollPosition}
|
||||
updateScrollBottom={updateScrollBottom}
|
||||
withDismiss
|
||||
/>
|
||||
);
|
||||
|
@ -66,6 +72,8 @@ export default class Notification extends ImmutablePureComponent {
|
|||
onMoveDown={onMoveDown}
|
||||
onMoveUp={onMoveUp}
|
||||
onMention={onMention}
|
||||
getScrollPosition={getScrollPosition}
|
||||
updateScrollBottom={updateScrollBottom}
|
||||
withDismiss
|
||||
/>
|
||||
);
|
||||
|
@ -82,6 +90,8 @@ export default class Notification extends ImmutablePureComponent {
|
|||
onMoveDown={onMoveDown}
|
||||
onMoveUp={onMoveUp}
|
||||
onMention={onMention}
|
||||
getScrollPosition={getScrollPosition}
|
||||
updateScrollBottom={updateScrollBottom}
|
||||
withDismiss
|
||||
/>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue