mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-16 23:31:19 +03:00
Code Issues Projects Releases Packages Wiki Activity

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

40
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}
> >
@ -810,15 +810,21 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
resetScrollPosition(statusID); resetScrollPosition(statusID);
}} }}
> >
<Status <InView
statusID={statusID} skip={i !== 0 || !ancestor}
instance={instance} threshold={0.5}
withinContext onChange={setReachTopPost}
size={thread || ancestor ? 'm' : 's'} >
enableTranslate <Status
onMediaClick={handleMediaClick} statusID={statusID}
onStatusLinkClick={handleStatusLinkClick} instance={instance}
/> withinContext
size={thread || ancestor ? 'm' : 's'}
enableTranslate
onMediaClick={handleMediaClick}
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" />