Merge branch 'master' of github.com:GetStream/stream-chat-react

Author: Jaap

src/components/InfiniteScrollPaginator/InfiniteScroll.js

@@ -78,21 +78,24 @@ const InfiniteScroll = ({
         el.scrollHeight - parentElement.scrollTop - parentElement.clientHeight;
       reverseOffset = parentElement.scrollTop;
     }
-    if (listenToScroll) listenToScroll(offset, reverseOffset);
+    if (listenToScroll) {
+      listenToScroll(offset, reverseOffset, threshold);
+    }
 
     // Here we make sure the element is visible as well as checking the offset
     if (
       (isReverse ? reverseOffset : offset) < Number(threshold) &&
       el.offsetParent !== null &&
-      typeof loadMore === 'function'
+      typeof loadMore === 'function' &&
+      hasMore
     ) {
       loadMore();
     }
-  }, [useWindow, isReverse, threshold, listenToScroll, loadMore]);
+  }, [hasMore, useWindow, isReverse, threshold, listenToScroll, loadMore]);
 
   useEffect(() => {
     const scrollEl = useWindow ? window : scrollComponent.current?.parentNode;
-    if (!hasMore || isLoading || !scrollEl) {
+    if (isLoading || !scrollEl) {
       return () => {};
     }
 
@@ -107,7 +110,7 @@ const InfiniteScroll = ({
       scrollEl.removeEventListener('scroll', scrollListener, useCapture);
       scrollEl.removeEventListener('resize', scrollListener, useCapture);
     };
-  }, [hasMore, initialLoad, isLoading, scrollListener, useCapture, useWindow]);
+  }, [initialLoad, isLoading, scrollListener, useCapture, useWindow]);
 
   useEffect(() => {
     const scrollEl = useWindow ? window : scrollComponent.current?.parentNode;

src/components/MessageList/MessageList.js

@@ -165,10 +165,11 @@ class MessageList extends PureComponent {
     this.setState({ newMessagesNotification: false });
   };
 
-  userScrolledUp = () => this.scrollOffset > 310;
+  userScrolledUp = () => this.scrollOffset > 200;
 
-  listenToScroll = (offset) => {
+  listenToScroll = (offset, reverseOffset, threshold) => {
     this.scrollOffset = offset;
+    this.closeToTop = reverseOffset < threshold;
     if (this.state.newMessagesNotification && !this.userScrolledUp()) {
       this.setState({ newMessagesNotification: false });
     }
@@ -206,7 +207,7 @@ class MessageList extends PureComponent {
   onMessageLoadCaptured = () => {
     // A load event (emitted by e.g. an <img>) was captured on a message.
     // In some cases, the loaded asset is larger than the placeholder, which means we have to scroll down.
-    if (!this.userScrolledUp()) {
+    if (!this.userScrolledUp() && !this.closeToTop) {
       this.scrollToBottom();
     }
   };

src/styles/DateSeparator.scss

@@ -1,6 +1,6 @@
 .str-chat__date-separator {
   display: flex;
-  margin: 40px;
+  padding: 40px;
   align-items: center;
 
   &-date {
@@ -25,7 +25,7 @@
 
 .commerce.str-chat {
   .str-chat__date-separator {
-    margin: 40px 0;
+    padding: 40px 0;
   }
 }
 

src/styles/MessageList.scss

@@ -3,7 +3,10 @@
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch; /* enable smooth scrolling on ios */
-  padding: 75px 0 0 0;
+  padding: 0 0 0 0;
+  .str-chat__reverse-infinite-scroll {
+    padding-top: 75px;
+  }
 
   &-wrapper {
     flex: 1;
@@ -30,9 +33,6 @@
   margin: 0;
 }
 
-.str-chat__reverse-infinite-scroll {
-}
-
 .str-chat__custom-notification {
   border-radius: 4px;
   font-size: 12px;
@@ -76,9 +76,11 @@
   &.str-chat {
     .str-chat {
       &__list {
-        padding: 55px 40px 0;
+        padding: 0 40px 0;
         background: white;
-
+        .str-chat__reverse-infinite-scroll {
+          padding-top: 55px;
+        }
         &-notifications {
           background: white;
         }
@@ -87,7 +89,10 @@
     @media screen and (max-width: 960px) {
       .str-chat {
         &__list {
-          padding: 55px 10px 0;
+          padding: 0 10px 0;
+          .str-chat__reverse-infinite-scroll {
+            padding-top: 55px;
+          }
           &-notifications {
             padding: 0 10px;
           }
@@ -109,7 +114,10 @@
   &.str-chat {
     .str-chat {
       &__list {
-        padding: 55px 10px;
+        padding: 0 10px;
+        .str-chat__reverse-infinite-scroll {
+          padding-top: 55px;
+        }
       }
     }
   }
@@ -119,7 +127,10 @@
   &.str-chat {
     .str-chat {
       &__list {
-        padding: 75px 20px 0;
+        padding: 0 20px 0;
+        .str-chat__reverse-infinite-scroll {
+          padding-top: 75px;
+        }
         &-notifications {
           padding-left: 22px;
           padding-right: 22px;

types/index.d.ts

@@ -1071,7 +1071,11 @@ export interface InfiniteScrollProps {
   loader?: React.ReactNode;
   threshold?: number;
   children?: any;
-  listenToScroll?: (offset: number, reverseOffset: number) => void;
+  listenToScroll?: (
+    offset: number,
+    reverseOffset: number,
+    threshold: number,
+  ) => void;
 }
 
 export interface ModalImageProps {