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

Profile: Fix scroll on opening (#4877)

Browse Source
This commit is contained in:
Alexander Zinchuk 2024-08-29 15:52:18 +02:00
parent 729e4ad791
commit 73fb1fd2cf
2 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/right/Profile.tsx
View File

@ -63,6 +63,7 @@ import { getSenderName } from '../left/search/helpers/getSenderName';
import usePeerStoriesPolling from '../../hooks/polling/usePeerStoriesPolling'; import usePeerStoriesPolling from '../../hooks/polling/usePeerStoriesPolling';
import useCacheBuster from '../../hooks/useCacheBuster'; import useCacheBuster from '../../hooks/useCacheBuster';
import useEffectWithPrevDeps from '../../hooks/useEffectWithPrevDeps'; import useEffectWithPrevDeps from '../../hooks/useEffectWithPrevDeps';
import useFlag from '../../hooks/useFlag';
import { useIntersectionObserver } from '../../hooks/useIntersectionObserver'; import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
import useLastCallback from '../../hooks/useLastCallback'; import useLastCallback from '../../hooks/useLastCallback';
import useOldLang from '../../hooks/useOldLang'; import useOldLang from '../../hooks/useOldLang';
@ -256,6 +257,8 @@ const Profile: FC<OwnProps & StateProps> = ({
return index === -1 ? 0 : index; return index === -1 ? 0 : index;
}, [nextProfileTab, tabs]); }, [nextProfileTab, tabs]);
const [allowAutoScrollToTabs, startAutoScrollToTabsIfNeeded, stopAutoScrollToTabs] = useFlag(false);
const [activeTab, setActiveTab] = useState(initialTab); const [activeTab, setActiveTab] = useState(initialTab);
useEffect(() => { useEffect(() => {
@ -266,6 +269,11 @@ const Profile: FC<OwnProps & StateProps> = ({
setActiveTab(index); setActiveTab(index);
}, [nextProfileTab, tabs]); }, [nextProfileTab, tabs]);
const handleSwitchTab = useCallback((index: number) => {
startAutoScrollToTabsIfNeeded();
setActiveTab(index);
}, []);
useEffect(() => { useEffect(() => {
if (isChannel && !similarChannels) { if (isChannel && !similarChannels) {
loadChannelRecommendations({ chatId }); loadChannelRecommendations({ chatId });
@ -310,12 +318,18 @@ const Profile: FC<OwnProps & StateProps> = ({
usePeerStoriesPolling(resultType === 'members' ? viewportIds as string[] : undefined); usePeerStoriesPolling(resultType === 'members' ? viewportIds as string[] : undefined);
const handleStopAutoScrollToTabs = useLastCallback(() => {
stopAutoScrollToTabs();
});
const { handleScroll } = useProfileState( const { handleScroll } = useProfileState(
containerRef, containerRef,
resultType, resultType,
profileState, profileState,
onProfileStateChange, onProfileStateChange,
forceScrollProfileTab, forceScrollProfileTab,
allowAutoScrollToTabs,
handleStopAutoScrollToTabs,
); );
const { applyTransitionFix, releaseTransitionFix } = useTransitionFixes(containerRef); const { applyTransitionFix, releaseTransitionFix } = useTransitionFixes(containerRef);
@ -649,7 +663,7 @@ const Profile: FC<OwnProps & StateProps> = ({
> >
{renderContent()} {renderContent()}
</Transition> </Transition>
<TabList big activeTab={renderingActiveTab} tabs={tabs} onSwitchTab={setActiveTab} /> <TabList big activeTab={renderingActiveTab} tabs={tabs} onSwitchTab={handleSwitchTab} />
</div> </div>
)} )}

8
src/components/right/hooks/useProfileState.ts
View File

@ -21,12 +21,15 @@ export default function useProfileState(
profileState: ProfileState, profileState: ProfileState,
onProfileStateChange: (state: ProfileState) => void, onProfileStateChange: (state: ProfileState) => void,
forceScrollProfileTab = false, forceScrollProfileTab = false,
allowAutoScrollToTabs = false,
handleStopAutoScrollToTabs: () => void,
) { ) {
// Scroll to tabs if needed // Scroll to tabs if needed
useEffectWithPrevDeps(([prevTabType]) => { useEffectWithPrevDeps(([prevTabType]) => {
if ((prevTabType && prevTabType !== tabType) || (tabType && forceScrollProfileTab)) { if ((prevTabType && prevTabType !== tabType && allowAutoScrollToTabs) || (tabType && forceScrollProfileTab)) {
const container = containerRef.current!; const container = containerRef.current!;
const tabsEl = container.querySelector<HTMLDivElement>('.TabList')!; const tabsEl = container.querySelector<HTMLDivElement>('.TabList')!;
handleStopAutoScrollToTabs();
if (container.scrollTop < tabsEl.offsetTop) { if (container.scrollTop < tabsEl.offsetTop) {
onProfileStateChange(getStateFromTabType(tabType)); onProfileStateChange(getStateFromTabType(tabType));
isScrollingProgrammatically = true; isScrollingProgrammatically = true;
@ -36,7 +39,8 @@ export default function useProfileState(
}, PROGRAMMATIC_SCROLL_TIMEOUT_MS); }, PROGRAMMATIC_SCROLL_TIMEOUT_MS);
} }
} }
}, [tabType, onProfileStateChange, containerRef, forceScrollProfileTab]); }, [tabType, onProfileStateChange, containerRef, forceScrollProfileTab,
allowAutoScrollToTabs, handleStopAutoScrollToTabs]);
// Scroll to top // Scroll to top
useEffectWithPrevDeps(([prevProfileState]) => { useEffectWithPrevDeps(([prevProfileState]) => {