ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Message List: Fix history scrolling on short list

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-06-18 14:13:26 +02:00
parent 15557c6dc7
commit abde05413d
2 changed files with 24 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/middle/MessageListContent.tsx
View File

@ -93,6 +93,7 @@ const MessageListContent: FC<OwnProps> = ({
} = useMessageObservers(type, containerRef, memoFirstUnreadIdRef, onPinnedIntersectionChange, chatId); } = useMessageObservers(type, containerRef, memoFirstUnreadIdRef, onPinnedIntersectionChange, chatId);
const { const {
withHistoryTriggers,
backwardsTriggerRef, backwardsTriggerRef,
forwardsTriggerRef, forwardsTriggerRef,
fabTriggerRef, fabTriggerRef,
@ -273,16 +274,18 @@ const MessageListContent: FC<OwnProps> = ({
return ( return (
<div className="messages-container" teactFastList> <div className="messages-container" teactFastList>
<div ref={backwardsTriggerRef} key="backwards-trigger" className="backwards-trigger" /> {withHistoryTriggers && <div ref={backwardsTriggerRef} key="backwards-trigger" className="backwards-trigger" />}
{dateGroups.flat()} {dateGroups.flat()}
{!isCurrentUserPremium && isViewportNewest && ( {!isCurrentUserPremium && isViewportNewest && (
<SponsoredMessage key={chatId} chatId={chatId} containerRef={containerRef} /> <SponsoredMessage key={chatId} chatId={chatId} containerRef={containerRef} />
)} )}
<div {withHistoryTriggers && (
ref={forwardsTriggerRef} <div
key="forwards-trigger" ref={forwardsTriggerRef}
className="forwards-trigger" key="forwards-trigger"
/> className="forwards-trigger"
/>
)}
<div <div
ref={fabTriggerRef} ref={fabTriggerRef}
key="fab-trigger" key="fab-trigger"

25
src/components/middle/hooks/useScrollHooks.ts
View File

@ -14,7 +14,6 @@ import { isLocalMessageId } from '../../../global/helpers';
import useLastCallback from '../../../hooks/useLastCallback'; import useLastCallback from '../../../hooks/useLastCallback';
import { useIntersectionObserver, useOnIntersect } from '../../../hooks/useIntersectionObserver'; import { useIntersectionObserver, useOnIntersect } from '../../../hooks/useIntersectionObserver';
import useSyncEffect from '../../../hooks/useSyncEffect'; import useSyncEffect from '../../../hooks/useSyncEffect';
import { useStateRef } from '../../../hooks/useStateRef';
import { useSignalEffect } from '../../../hooks/useSignalEffect'; import { useSignalEffect } from '../../../hooks/useSignalEffect';
import { useDebouncedSignal } from '../../../hooks/useAsyncResolvers'; import { useDebouncedSignal } from '../../../hooks/useAsyncResolvers';
@ -52,10 +51,10 @@ export default function useScrollHooks(
// eslint-disable-next-line no-null/no-null // eslint-disable-next-line no-null/no-null
const fabTriggerRef = useRef<HTMLDivElement>(null); const fabTriggerRef = useRef<HTMLDivElement>(null);
function toggleScrollTools() { const toggleScrollTools = useLastCallback(() => {
if (!isReady) return; if (!isReady) return;
if (!messageIds || !messageIds.length) { if (!messageIds?.length) {
onFabToggle(false); onFabToggle(false);
onNotchToggle(false); onNotchToggle(false);
return; return;
@ -81,7 +80,7 @@ export default function useScrollHooks(
onFabToggle(isUnread ? !isAtBottom : !isNearBottom); onFabToggle(isUnread ? !isAtBottom : !isNearBottom);
onNotchToggle(!isAtBottom); onNotchToggle(!isAtBottom);
} });
const { const {
observe: observeIntersection, observe: observeIntersection,
@ -113,8 +112,10 @@ export default function useScrollHooks(
} }
}); });
useOnIntersect(backwardsTriggerRef, observeIntersection); const withHistoryTriggers = messageIds && messageIds.length > 1;
useOnIntersect(forwardsTriggerRef, observeIntersection);
useOnIntersect(backwardsTriggerRef, withHistoryTriggers ? observeIntersection : undefined);
useOnIntersect(forwardsTriggerRef, withHistoryTriggers ? observeIntersection : undefined);
const { const {
observe: observeIntersectionForFab, observe: observeIntersectionForFab,
@ -140,12 +141,11 @@ export default function useScrollHooks(
useOnIntersect(fabTriggerRef, observeIntersectionForNotch); useOnIntersect(fabTriggerRef, observeIntersectionForNotch);
const toggleScrollToolsRef = useStateRef(toggleScrollTools);
useEffect(() => { useEffect(() => {
if (isReady) { if (isReady) {
toggleScrollToolsRef.current!(); toggleScrollTools();
} }
}, [isReady, toggleScrollToolsRef]); }, [isReady, toggleScrollTools]);
const freezeShortly = useLastCallback(() => { const freezeShortly = useLastCallback(() => {
freezeForFab(); freezeForFab();
@ -164,5 +164,10 @@ export default function useScrollHooks(
const getContainerHeightDebounced = useDebouncedSignal(getContainerHeight, CONTAINER_HEIGHT_DEBOUNCE); const getContainerHeightDebounced = useDebouncedSignal(getContainerHeight, CONTAINER_HEIGHT_DEBOUNCE);
useSignalEffect(freezeShortly, [freezeShortly, getContainerHeightDebounced]); useSignalEffect(freezeShortly, [freezeShortly, getContainerHeightDebounced]);
return { backwardsTriggerRef, forwardsTriggerRef, fabTriggerRef }; return {
withHistoryTriggers,
backwardsTriggerRef,
forwardsTriggerRef,
fabTriggerRef,
};
} }