diff options
Diffstat (limited to 'FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx')
-rw-r--r-- | FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx | 86 |
1 files changed, 15 insertions, 71 deletions
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx index 41246175..0d0951ee 100644 --- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx +++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx @@ -1,10 +1,9 @@ import React from "react"; import { useTranslation } from "react-i18next"; -import { fromEvent } from "rxjs"; import { Spinner } from "react-bootstrap"; import { getAlertHost } from "@/services/alert"; -import { useEventEmiiter, I18nText, convertI18nText } from "@/common"; +import { I18nText, convertI18nText } from "@/common"; import { TimelineInfo } from "@/services/timeline"; import Timeline, { TimelinePostInfoEx } from "./Timeline"; @@ -25,20 +24,20 @@ export interface TimelineCardComponentProps<TManageItems> { className?: string; } +export interface TimelinePageTemplateData<TManageItems> { + timeline: TimelineInfo; + posts?: TimelinePostInfoEx[] | "forbid"; + operations: { + onManage?: (item: TManageItems | "property") => void; + onMember: () => void; + onBookmark?: () => void; + onHighlight?: () => void; + onPost?: TimelinePostSendCallback; + }; +} + export interface TimelinePageTemplateUIProps<TManageItems> { - data?: - | { - timeline: TimelineInfo; - posts?: TimelinePostInfoEx[] | "forbid"; - operations: { - onManage?: (item: TManageItems | "property") => void; - onMember: () => void; - onBookmark?: () => void; - onHighlight?: () => void; - onPost?: TimelinePostSendCallback; - }; - } - | I18nText; + data?: TimelinePageTemplateData<TManageItems> | I18nText; syncStatus: TimelineSyncStatus; CardComponent: React.ComponentType<TimelineCardComponentProps<TManageItems>>; } @@ -69,60 +68,9 @@ export default function TimelinePageTemplateUI<TManageItems>( const timelineRef = React.useRef<HTMLDivElement | null>(null); - const [getResizeEvent, triggerResizeEvent] = useEventEmiiter(); - const timelineName: string | null = typeof data === "object" && "timeline" in data ? data.timeline.name : null; - React.useEffect(() => { - const { current: timelineElement } = timelineRef; - if (timelineElement != null) { - let loadingScrollToBottom = true; - let pinBottom = false; - - const isAtBottom = (): boolean => - window.innerHeight + window.scrollY + 10 >= document.body.scrollHeight; - - const disableLoadingScrollToBottom = (): void => { - loadingScrollToBottom = false; - if (isAtBottom()) pinBottom = true; - }; - - const checkAndScrollToBottom = (): void => { - if (loadingScrollToBottom || pinBottom) { - window.scrollTo(0, document.body.scrollHeight); - } - }; - - const subscriptions = [ - fromEvent(timelineElement, "wheel").subscribe( - disableLoadingScrollToBottom - ), - fromEvent(timelineElement, "pointerdown").subscribe( - disableLoadingScrollToBottom - ), - fromEvent(timelineElement, "keydown").subscribe( - disableLoadingScrollToBottom - ), - fromEvent(window, "scroll").subscribe(() => { - if (loadingScrollToBottom) return; - - if (isAtBottom()) { - pinBottom = true; - } else { - pinBottom = false; - } - }), - fromEvent(window, "resize").subscribe(checkAndScrollToBottom), - getResizeEvent().subscribe(checkAndScrollToBottom), - ]; - - return () => { - subscriptions.forEach((s) => s.unsubscribe()); - }; - } - }, [getResizeEvent, triggerResizeEvent, timelineName]); - const cardCollapseLocalStorageKey = timelineName != null ? `timeline.${timelineName}.cardCollapse` : null; @@ -173,11 +121,7 @@ export default function TimelinePageTemplateUI<TManageItems>( className="timeline-container" style={{ minHeight: `calc(100vh - ${56 + bottomSpaceHeight}px)` }} > - <Timeline - containerRef={timelineRef} - posts={posts} - onResize={triggerResizeEvent} - /> + <Timeline containerRef={timelineRef} posts={posts} /> </div> ) ) : ( |