diff options
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 = (
|