Merge pull request #91 from crupest/scroll

Fix #90 .

4 files changed, 43 insertions, 14 deletions

diff --git a/Timeline/ClientApp/src/timeline/Timeline.tsx b/Timeline/ClientApp/src/timeline/Timeline.tsx
index acc3ba0a..f6ff8949 100644
--- a/Timeline/ClientApp/src/timeline/Timeline.tsx
+++ b/Timeline/ClientApp/src/timeline/Timeline.tsx
@@ -18,13 +18,14 @@ export interface TimelineProps {
   className?: string;

   posts: TimelinePostInfoEx[];

   onDelete: TimelineDeleteCallback;

+  onResize?: () => void;

 }

 

 const Timeline: React.FC<TimelineProps> = (props) => {

   const user = useUser();

   const avatarVersion = useAvatarVersion();

 

-  const { posts, onDelete } = props;

+  const { posts, onDelete, onResize } = props;

 

   const [indexShowDeleteButton, setIndexShowDeleteButton] = React.useState<

     number

@@ -83,6 +84,7 @@ const Timeline: React.FC<TimelineProps> = (props) => {
                 }

                 onClick={onItemClick}

                 avatarVersion={av}

+                onResize={onResize}

               />

             );

           });

diff --git a/Timeline/ClientApp/src/timeline/TimelineItem.tsx b/Timeline/ClientApp/src/timeline/TimelineItem.tsx
index 7d488826..215c7b12 100644
--- a/Timeline/ClientApp/src/timeline/TimelineItem.tsx
+++ b/Timeline/ClientApp/src/timeline/TimelineItem.tsx
@@ -55,6 +55,7 @@ export interface TimelineItemProps {
   };

   onClick?: () => void;

   avatarVersion?: number;

+  onResize?: () => void;

 }

 

 const TimelineItem: React.FC<TimelineItemProps> = (props) => {

@@ -62,7 +63,7 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
 

   const current = props.current === true;

 

-  const { more } = props;

+  const { more, onResize } = props;

 

   const avatarUrl = useAvatarUrlWithGivenVersion(

     props.avatarVersion,

@@ -117,7 +118,7 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
             className="float-right float-sm-left mx-2"

             to={'/users/' + props.post.author.username}

           >

-            <img src={avatarUrl} className="avatar rounded" />

+            <img onLoad={onResize} src={avatarUrl} className="avatar rounded" />

           </Link>

           {(() => {

             const { content } = props.post;

@@ -125,7 +126,11 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
               return content.text;

             } else {

               return (

-                <img src={content.url} className="timeline-content-image" />

+                <img

+                  onLoad={onResize}

+                  src={content.url}

+                  className="timeline-content-image"

+                />

               );

             }

           })()}

diff --git a/Timeline/ClientApp/src/timeline/TimelinePageTemplate.tsx b/Timeline/ClientApp/src/timeline/TimelinePageTemplate.tsx
index 2cfb4341..f8721985 100644
--- a/Timeline/ClientApp/src/timeline/TimelinePageTemplate.tsx
+++ b/Timeline/ClientApp/src/timeline/TimelinePageTemplate.tsx
@@ -114,15 +114,6 @@ export default function TimelinePageTemplate<
     };

   }, [name, service, user, t, props.dataVersion, props.notFoundI18nKey]);

 

-  React.useEffect(() => {

-    if (posts != null) {

-      window.scrollTo(

-        0,

-        document.body.scrollHeight || document.documentElement.scrollHeight

-      );

-    }

-  }, [posts]);

-

   const closeDialog = React.useCallback((): void => {

     setDialog(null);

   }, []);

diff --git a/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
index 6d834832..1cd772c2 100644
--- a/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
@@ -1,6 +1,7 @@
 import React from 'react';

 import { Spinner } from 'reactstrap';

 import { useTranslation } from 'react-i18next';

+import { Subject, fromEvent } from 'rxjs';

 

 import { getAlertHost } from '../common/alert-service';

 

@@ -67,6 +68,32 @@ export default function TimelinePageTemplateUI<
     }

   }, []);

 

+  const resizeSubject = React.useMemo(() => new Subject(), []);

+  const triggerResizeEvent = React.useCallback(() => {

+    resizeSubject.next(null);

+  }, [resizeSubject]);

+

+  React.useEffect(() => {

+    let scrollToBottom = true;

+    const disableScrollToBottom = (): void => {

+      scrollToBottom = false;

+    };

+

+    const subscriptions = [

+      fromEvent(window, 'wheel').subscribe(disableScrollToBottom),

+      fromEvent(window, 'pointerdown').subscribe(disableScrollToBottom),

+      resizeSubject.subscribe(() => {

+        if (scrollToBottom) {

+          window.scrollTo(0, document.body.scrollHeight);

+        }

+      }),

+    ];

+

+    return () => {

+      subscriptions.forEach((s) => s.unsubscribe());

+    };

+  }, [resizeSubject, timeline, props.posts]);

+

   const [cardHeight, setCardHeight] = React.useState<number>(0);

 

   const onCardHeightChange = React.useCallback((height: number) => {

@@ -104,7 +131,11 @@ export default function TimelinePageTemplateUI<
           );

         } else {

           timelineBody = (

-            <Timeline posts={props.posts} onDelete={props.onDelete} />

+            <Timeline

+              posts={props.posts}

+              onDelete={props.onDelete}

+              onResize={triggerResizeEvent}

+            />

           );

           if (props.onPost != null) {

             timelineBody = (