Fix auto-collapsed toots making the TL jump (fixes #417)

This commit is contained in:
Thibaut Girka 2018-04-15 21:29:03 +02:00
parent 931a4d1ebf
commit 694337d9bb
3 changed files with 56 additions and 9 deletions

View file

@ -65,6 +65,22 @@ export default class ScrollableList extends PureComponent {
this.handleScroll();
}
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 &&
React.Children.count(prevProps.children) < React.Children.count(this.props.children) &&
@ -79,13 +95,7 @@ export default class ScrollableList extends PureComponent {
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) {
const newScrollTop = this.node.scrollHeight - snapshot;
if (this.node.scrollTop !== newScrollTop) {
this.node.scrollTop = newScrollTop;
}
}
if (snapshot !== null) this.updateScrollBottom(snapshot);
}
componentWillUnmount () {
@ -160,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>
))}

View file

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

View file

@ -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
/>
);