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

Improve ScrollableList behavior

app/javascript/flavours/glitch/components/scrollable_list.js

@@ -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,24 +65,39 @@ export default class ScrollableList extends PureComponent {
     this.handleScroll();
   }
 
-  componentDidUpdate (prevProps) {
+  getScrollPosition = () => {
-    const someItemInserted = React.Children.count(prevProps.children) > 0 &&
+    if (this.node && this.node.scrollTop > 0) {
-      React.Children.count(prevProps.children) < React.Children.count(this.props.children) &&
+      return {height: this.node.scrollHeight, top: this.node.scrollTop};
-      this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props);
+    } else {
+      return null;
+    }
+  }
 
-    // Reset the scroll position when a new child comes in in order not to
+  updateScrollBottom = (snapshot) => {
-    // jerk the scrollbar around if you're already scrolled down the page.
+    const newScrollTop = this.node.scrollHeight - snapshot;
-    if (someItemInserted && this._oldScrollPosition && this.node.scrollTop > 0) {
-      const newScrollTop = this.node.scrollHeight - this._oldScrollPosition;
 
     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) &&
+      this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props);
+    if (someItemInserted && this.node.scrollTop > 0) {
+      return this.node.scrollHeight - this.node.scrollTop;
     } else {
-      this._oldScrollPosition = this.node.scrollHeight - this.node.scrollTop;
+      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 () {
     this.detachScrollListener();
     this.detachIntersectionObserver();
@@ -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>
             ))}
 

app/javascript/flavours/glitch/components/status.js

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

app/javascript/flavours/glitch/features/notifications/components/notification.js

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