mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-22 09:15:33 +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 [heroInView, setHeroInView] = useState(true);
const onView = useDebouncedCallback(setHeroInView, 100);
const heroPointer = useMemo(() => {
// get top offset of heroStatus
if (!heroStatusRef.current || heroInView) return null;
@ -652,10 +651,11 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
}
});
const { nearReachStart } = useScroll({
scrollableRef,
distanceFromStartPx: 16,
});
const [reachTopPost, setReachTopPost] = useState(false);
// const { nearReachStart } = useScroll({
// scrollableRef,
// distanceFromStartPx: 16,
// });
const initialPageState = useRef(showMedia ? 'media+status' : 'status');
@ -693,7 +693,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
}, [mediaStatusID, showMedia]);
const renderStatus = useCallback(
(status) => {
(status, i) => {
const {
id: statusID,
ancestor,
@ -735,7 +735,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
<>
<InView
threshold={0.1}
onChange={onView}
onChange={setHeroInView}
class="status-focus"
tabIndex={0}
>
@ -810,15 +810,21 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
resetScrollPosition(statusID);
}}
>
<Status
statusID={statusID}
instance={instance}
withinContext
size={thread || ancestor ? 'm' : 's'}
enableTranslate
onMediaClick={handleMediaClick}
onStatusLinkClick={handleStatusLinkClick}
/>
<InView
skip={i !== 0 || !ancestor}
threshold={0.5}
onChange={setReachTopPost}
>
<Status
statusID={statusID}
instance={instance}
withinContext
size={thread || ancestor ? 'm' : 's'}
enableTranslate
onMediaClick={handleMediaClick}
onStatusLinkClick={handleStatusLinkClick}
/>
</InView>
{ancestor && repliesCount > 1 && (
<div class="replies-link">
<Icon icon="comment2" />{' '}
@ -1011,7 +1017,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
behavior: 'smooth',
});
}}
hidden={!ancestors.length || nearReachStart}
hidden={!ancestors.length || reachTopPost}
title={`${ancestors.length} posts above ‒ Go to top`}
>
<Icon icon="arrow-up" />