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);
const {
withHistoryTriggers,
backwardsTriggerRef,
forwardsTriggerRef,
fabTriggerRef,
@ -273,16 +274,18 @@ const MessageListContent: FC<OwnProps> = ({
return (
<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()}
{!isCurrentUserPremium && isViewportNewest && (
<SponsoredMessage key={chatId} chatId={chatId} containerRef={containerRef} />
)}
<div
ref={forwardsTriggerRef}
key="forwards-trigger"
className="forwards-trigger"
/>
{withHistoryTriggers && (
<div
ref={forwardsTriggerRef}
key="forwards-trigger"
className="forwards-trigger"
/>
)}
<div
ref={fabTriggerRef}
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 { useIntersectionObserver, useOnIntersect } from '../../../hooks/useIntersectionObserver';
import useSyncEffect from '../../../hooks/useSyncEffect';
import { useStateRef } from '../../../hooks/useStateRef';
import { useSignalEffect } from '../../../hooks/useSignalEffect';
import { useDebouncedSignal } from '../../../hooks/useAsyncResolvers';
@ -52,10 +51,10 @@ export default function useScrollHooks(
// eslint-disable-next-line no-null/no-null
const fabTriggerRef = useRef<HTMLDivElement>(null);
function toggleScrollTools() {
const toggleScrollTools = useLastCallback(() => {
if (!isReady) return;
if (!messageIds || !messageIds.length) {
if (!messageIds?.length) {
onFabToggle(false);
onNotchToggle(false);
return;
@ -81,7 +80,7 @@ export default function useScrollHooks(
onFabToggle(isUnread ? !isAtBottom : !isNearBottom);
onNotchToggle(!isAtBottom);
}
});
const {
observe: observeIntersection,
@ -113,8 +112,10 @@ export default function useScrollHooks(
}
});
useOnIntersect(backwardsTriggerRef, observeIntersection);
useOnIntersect(forwardsTriggerRef, observeIntersection);
const withHistoryTriggers = messageIds && messageIds.length > 1;
useOnIntersect(backwardsTriggerRef, withHistoryTriggers ? observeIntersection : undefined);
useOnIntersect(forwardsTriggerRef, withHistoryTriggers ? observeIntersection : undefined);
const {
observe: observeIntersectionForFab,
@ -140,12 +141,11 @@ export default function useScrollHooks(
useOnIntersect(fabTriggerRef, observeIntersectionForNotch);
const toggleScrollToolsRef = useStateRef(toggleScrollTools);
useEffect(() => {
if (isReady) {
toggleScrollToolsRef.current!();
toggleScrollTools();
}
}, [isReady, toggleScrollToolsRef]);
}, [isReady, toggleScrollTools]);
const freezeShortly = useLastCallback(() => {
freezeForFab();
@ -164,5 +164,10 @@ export default function useScrollHooks(
const getContainerHeightDebounced = useDebouncedSignal(getContainerHeight, CONTAINER_HEIGHT_DEBOUNCE);
useSignalEffect(freezeShortly, [freezeShortly, getContainerHeightDebounced]);
return { backwardsTriggerRef, forwardsTriggerRef, fabTriggerRef };
return {
withHistoryTriggers,
backwardsTriggerRef,
forwardsTriggerRef,
fabTriggerRef,
};
}