simono41/phanpy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use InView to replace nearReachStart

Browse source
This commit is contained in:
Lim Chee Aun 2024-01-02 12:25:01 +08:00
parent 0ebbc5b34e
commit df393ae959
1 changed files with 23 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/pages/status.jsx
View file

@ -545,7 +545,6 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
const ancestors = statuses.filter((s) => s.ancestor); const ancestors = statuses.filter((s) => s.ancestor);
const [heroInView, setHeroInView] = useState(true); const [heroInView, setHeroInView] = useState(true);
const onView = useDebouncedCallback(setHeroInView, 100);
const heroPointer = useMemo(() => { const heroPointer = useMemo(() => {
// get top offset of heroStatus // get top offset of heroStatus
if (!heroStatusRef.current || heroInView) return null; if (!heroStatusRef.current || heroInView) return null;
@ -652,10 +651,11 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
} }
}); });
const { nearReachStart } = useScroll({ const [reachTopPost, setReachTopPost] = useState(false);
scrollableRef, // const { nearReachStart } = useScroll({
distanceFromStartPx: 16, // scrollableRef,
}); // distanceFromStartPx: 16,
// });
const initialPageState = useRef(showMedia ? 'media+status' : 'status'); const initialPageState = useRef(showMedia ? 'media+status' : 'status');
@ -693,7 +693,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
}, [mediaStatusID, showMedia]); }, [mediaStatusID, showMedia]);
const renderStatus = useCallback( const renderStatus = useCallback(
(status) => { (status, i) => {
const { const {
id: statusID, id: statusID,
ancestor, ancestor,
@ -735,7 +735,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
<> <>
<InView <InView
threshold={0.1} threshold={0.1}
onChange={onView} onChange={setHeroInView}
class="status-focus" class="status-focus"
tabIndex={0} tabIndex={0}
> >
@ -809,6 +809,11 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
onClick={() => { onClick={() => {
resetScrollPosition(statusID); resetScrollPosition(statusID);
}} }}
>
<InView
skip={i !== 0 || !ancestor}
threshold={0.5}
onChange={setReachTopPost}
> >
<Status <Status
statusID={statusID} statusID={statusID}
@ -819,6 +824,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
onMediaClick={handleMediaClick} onMediaClick={handleMediaClick}
onStatusLinkClick={handleStatusLinkClick} onStatusLinkClick={handleStatusLinkClick}
/> />
</InView>
{ancestor && repliesCount > 1 && ( {ancestor && repliesCount > 1 && (
<div class="replies-link"> <div class="replies-link">
<Icon icon="comment2" />{' '} <Icon icon="comment2" />{' '}
@ -1011,7 +1017,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
behavior: 'smooth', behavior: 'smooth',
}); });
}} }}
hidden={!ancestors.length || nearReachStart} hidden={!ancestors.length || reachTopPost}
title={`${ancestors.length} posts above ‒ Go to top`} title={`${ancestors.length} posts above ‒ Go to top`}
> >
<Icon icon="arrow-up" /> <Icon icon="arrow-up" />