FYP: fix scroll destination when collapsing

Since FYP is no longer always at the top, we can't use y=0 anymore.
This commit is contained in:
infinite-persistence 2022-03-22 09:42:38 +08:00 committed by infinite-persistence
parent f868e1a3db
commit fe227ba539

View file

@ -72,6 +72,8 @@ export default function RecommendedPersonal(props: Props) {
doSetClientSetting, doSetClientSetting,
doToast, doToast,
} = props; } = props;
const ref = React.useRef();
const [markedGid, setMarkedGid] = React.useState(''); const [markedGid, setMarkedGid] = React.useState('');
const [view, setView] = React.useState(VIEW.ALL_VISIBLE); const [view, setView] = React.useState(VIEW.ALL_VISIBLE);
const isLargeScreen = useIsLargeScreen(); const isLargeScreen = useIsLargeScreen();
@ -136,7 +138,7 @@ export default function RecommendedPersonal(props: Props) {
} }
return ( return (
<> <div ref={ref}>
<SectionHeader title={__('Recommended For You')} icon={ICONS.WEB} onHide={doHideFyp} /> <SectionHeader title={__('Recommended For You')} icon={ICONS.WEB} onHide={doHideFyp} />
<ClaimList <ClaimList
@ -157,12 +159,17 @@ export default function RecommendedPersonal(props: Props) {
setView(VIEW.EXPANDED); setView(VIEW.EXPANDED);
} else { } else {
setView(VIEW.COLLAPSED); setView(VIEW.COLLAPSED);
if (ref.current) {
ref.current.scrollIntoView({ block: 'start', behavior: 'smooth' });
} else {
// Unlikely to happen, but should have a fallback (just go all the way up)
window.scrollTo({ top: 0, behavior: 'smooth' }); window.scrollTo({ top: 0, behavior: 'smooth' });
} }
}
}} }}
/> />
</div> </div>
)} )}
</> </div>
); );
} }