Fix scroll behavior and others on paused timeline (#4864)
Resolved: * Lot of redundant renders while mouse moving * Scroll jumping when timeline loaded * Scroll position isn't kept when statuses below the scrollTop was deleted then new status arrived Unresolved: * Scroll position isn't kept when statuses over the scrollTop was deleted then new status arrived -> It needs to know which statuses are over the scrollTop * New status indicator should be active when new statuses arrived while mouse moved recently -> It needs a) update indicator in ScrollableList, or b) set scrollTop status while mouse moving
This commit is contained in:
parent
c9d04f1c39
commit
c7908e2d09
|
@ -52,11 +52,11 @@ export default class ScrollableList extends PureComponent {
|
|||
});
|
||||
|
||||
handleMouseMove = throttle(() => {
|
||||
this.setState({ lastMouseMove: new Date() });
|
||||
this._lastMouseMove = new Date();
|
||||
}, 300);
|
||||
|
||||
handleMouseLeave = () => {
|
||||
this.setState({ lastMouseMove: null });
|
||||
this._lastMouseMove = null;
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
|
@ -68,18 +68,20 @@ export default class ScrollableList extends PureComponent {
|
|||
}
|
||||
|
||||
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);
|
||||
|
||||
// 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 (React.Children.count(prevProps.children) < React.Children.count(this.props.children) && this._oldScrollPosition && (this.node.scrollTop > 0 || this._recentlyMoved())) {
|
||||
if (this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props)) {
|
||||
const newScrollTop = this.node.scrollHeight - this._oldScrollPosition;
|
||||
if (someItemInserted && this._oldScrollPosition && (this.node.scrollTop > 0 || this._recentlyMoved())) {
|
||||
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;
|
||||
if (this.node.scrollTop !== newScrollTop) {
|
||||
this.node.scrollTop = newScrollTop;
|
||||
}
|
||||
} else {
|
||||
this._oldScrollPosition = this.node.scrollHeight - this.node.scrollTop;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -128,7 +130,7 @@ export default class ScrollableList extends PureComponent {
|
|||
}
|
||||
|
||||
_recentlyMoved () {
|
||||
return this.state.lastMouseMove === null || ((new Date()) - this.state.lastMouseMove < 600);
|
||||
return this._lastMouseMove !== null && ((new Date()) - this._lastMouseMove < 600);
|
||||
}
|
||||
|
||||
handleKeyDown = (e) => {
|
||||
|
|
Loading…
Reference in New Issue