fix(react messages): consider scrollMessagesOnEdge when scrolling

nolimits4web · nolimits4web · commit 05dba19f42a0 · 2021-06-25T19:12:29.000+03:00
fixes #3908
diff --git a/src/core/components/messages/messages-class.js b/src/core/components/messages/messages-class.js
@@ -340,6 +340,24 @@ class Messages extends Framework7Class {
     return m.addMessages([messageToAdd], animate, method);
   }
 
+  setScrollData() {
+    const m = this;
+    // Define scroll positions before new messages added
+    const scrollHeightBefore = m.pageContentEl.scrollHeight;
+    const heightBefore = m.pageContentEl.offsetHeight;
+    const scrollBefore = m.pageContentEl.scrollTop;
+    m.scrollData = {
+      scrollHeightBefore,
+      heightBefore,
+      scrollBefore,
+    };
+    return {
+      scrollHeightBefore,
+      heightBefore,
+      scrollBefore,
+    };
+  }
+
   addMessages(...args) {
     const m = this;
     let messagesToAdd;
@@ -357,10 +375,7 @@ class Messages extends Framework7Class {
       method = m.params.newMessagesFirst ? 'prepend' : 'append';
     }
 
-    // Define scroll positions before new messages added
-    const scrollHeightBefore = m.pageContentEl.scrollHeight;
-    const heightBefore = m.pageContentEl.offsetHeight;
-    const scrollBefore = m.pageContentEl.scrollTop;
+    const { scrollHeightBefore, scrollBefore } = m.setScrollData();
 
     // Add message to DOM and data
     let messagesHTML = '';
@@ -409,21 +424,7 @@ class Messages extends Framework7Class {
       ((method === 'append' && !m.params.newMessagesFirst) ||
         (method === 'prepend' && m.params.newMessagesFirst && !typingMessage))
     ) {
-      if (m.params.scrollMessagesOnEdge) {
-        let onEdge = false;
-        if (m.params.newMessagesFirst && scrollBefore === 0) {
-          onEdge = true;
-        }
-        if (
-          !m.params.newMessagesFirst &&
-          scrollBefore - (scrollHeightBefore - heightBefore) >= -10
-        ) {
-          onEdge = true;
-        }
-        if (onEdge) m.scroll(animate ? undefined : 0);
-      } else {
-        m.scroll(animate ? undefined : 0);
-      }
+      m.scrollWithEdgeCheck(animate);
     }
 
     return m;
@@ -469,6 +470,23 @@ class Messages extends Framework7Class {
     return m;
   }
 
+  scrollWithEdgeCheck(animate) {
+    const m = this;
+    const { scrollBefore, scrollHeightBefore, heightBefore } = m.scrollData;
+    if (m.params.scrollMessagesOnEdge) {
+      let onEdge = false;
+      if (m.params.newMessagesFirst && scrollBefore === 0) {
+        onEdge = true;
+      }
+      if (!m.params.newMessagesFirst && scrollBefore - (scrollHeightBefore - heightBefore) >= -10) {
+        onEdge = true;
+      }
+      if (onEdge) m.scroll(animate ? undefined : 0);
+    } else {
+      m.scroll(animate ? undefined : 0);
+    }
+  }
+
   scroll(duration = 300, scrollTop) {
     const m = this;
     const currentScroll = m.pageContentEl.scrollTop;
diff --git a/src/react/components/messages.jsx b/src/react/components/messages.jsx
@@ -62,6 +62,7 @@ const Messages = forwardRef((props, ref) => {
 
   const elRef = useRef(null);
   const childrenBeforeUpdated = useRef(null);
+  const reactChildrenBefore = useRef(children ? React.Children.count(children) : 0);
 
   useImperativeHandle(ref, () => ({
     el: elRef.current,
@@ -107,6 +108,15 @@ const Messages = forwardRef((props, ref) => {
     return onDestroy;
   }, []);
 
+  const currentChildrenLength = children ? React.Children.count(children) : 0;
+  if (f7Messages.current && scrollMessages) {
+    const beforeChildrenLength = reactChildrenBefore.current || 0;
+    if (currentChildrenLength !== beforeChildrenLength) {
+      f7Messages.current.setScrollData();
+    }
+  }
+  reactChildrenBefore.current = currentChildrenLength;
+
   useIsomorphicLayoutEffect(() => {
     const wasMounted = mounted.current;
     mounted.current = true;
@@ -135,11 +145,13 @@ const Messages = forwardRef((props, ref) => {
       if (
         childrenBeforeUpdated.current !== childrenAfterUpdated &&
         f7Messages.current.scroll &&
+        f7Messages.current.scrollData &&
         scrollMessages
       ) {
-        f7Messages.current.scroll();
+        f7Messages.current.scrollWithEdgeCheck(true);
       }
     }
+
     childrenBeforeUpdated.current = childrenAfterUpdated;
   });
 
