diff options
author | dan <dan.abramov@gmail.com> | 2024-07-31 19:10:24 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2024-07-31 19:10:24 +0100 |
commit | 576cef88b550bacba26988a53c28fcc31bc9f8c5 (patch) | |
tree | af210c45f865bd728d401ef25eb0df5e89e4d711 | |
parent | c75bb65bef1671e493f10e06b51ee4d0cda98d83 (diff) | |
download | voidsky-576cef88b550bacba26988a53c28fcc31bc9f8c5.tar.zst |
[Web] Retrigger onEndReached if needed when content height changes (#4859)
* Extract EdgeVisibility * Key Visibility by container height instead of item count
-rw-r--r-- | src/view/com/util/List.web.tsx | 35 |
1 files changed, 32 insertions, 3 deletions
diff --git a/src/view/com/util/List.web.tsx b/src/view/com/util/List.web.tsx index 12d223db0..5aa699356 100644 --- a/src/view/com/util/List.web.tsx +++ b/src/view/com/util/List.web.tsx @@ -344,10 +344,11 @@ function ListImpl<ItemT>( style={[styles.aboveTheFoldDetector, {height: headerOffset}]} /> {onStartReached && !isEmpty && ( - <Visibility + <EdgeVisibility root={disableFullWindowScroll ? nativeRef : null} onVisibleChange={onHeadVisibilityChange} topMargin={(onStartReachedThreshold ?? 0) * 100 + '%'} + containerRef={containerRef} /> )} {headerComponent} @@ -368,11 +369,11 @@ function ListImpl<ItemT>( ) })} {onEndReached && !isEmpty && ( - <Visibility + <EdgeVisibility root={disableFullWindowScroll ? nativeRef : null} onVisibleChange={onTailVisibilityChange} bottomMargin={(onEndReachedThreshold ?? 0) * 100 + '%'} - key={data?.length} + containerRef={containerRef} /> )} {footerComponent} @@ -381,6 +382,34 @@ function ListImpl<ItemT>( ) } +function EdgeVisibility({ + root, + topMargin, + bottomMargin, + containerRef, + onVisibleChange, +}: { + root?: React.RefObject<HTMLDivElement> | null + topMargin?: string + bottomMargin?: string + containerRef: React.RefObject<Element> + onVisibleChange: (isVisible: boolean) => void +}) { + const [containerHeight, setContainerHeight] = React.useState(0) + useResizeObserver(containerRef, (w, h) => { + setContainerHeight(h) + }) + return ( + <Visibility + key={containerHeight} + root={root} + topMargin={topMargin} + bottomMargin={bottomMargin} + onVisibleChange={onVisibleChange} + /> + ) +} + function useResizeObserver( ref: React.RefObject<Element>, onResize: undefined | ((w: number, h: number) => void), |