forked from treehouse/mastodon
Fix auto-collapsed toots making the TL jump (fixes #417)
parent
931a4d1ebf
commit
694337d9bb
|
@ -65,6 +65,22 @@ export default class ScrollableList extends PureComponent {
|
||||||
this.handleScroll();
|
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) {
|
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) &&
|
||||||
|
@ -79,13 +95,7 @@ export default class ScrollableList extends PureComponent {
|
||||||
componentDidUpdate (prevProps, prevState, snapshot) {
|
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 (snapshot !== null) {
|
if (snapshot !== null) this.updateScrollBottom(snapshot);
|
||||||
const newScrollTop = this.node.scrollHeight - snapshot;
|
|
||||||
|
|
||||||
if (this.node.scrollTop !== newScrollTop) {
|
|
||||||
this.node.scrollTop = newScrollTop;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount () {
|
componentWillUnmount () {
|
||||||
|
@ -160,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>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue