A few `containWeb` List nits (#3877)

* use getters for returned values

* pass ref

* add log to `onScroll` in tester

* improve expect error
zio/stable
Hailey 2024-05-06 13:45:14 -07:00 committed by GitHub
parent 0b6ace990e
commit 99f3f10fe7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 60 additions and 24 deletions

View File

@ -92,12 +92,24 @@ function ListImpl<ItemT>(
if (!element) return
return {
scrollWidth: element.scrollWidth,
scrollHeight: element.scrollHeight,
clientWidth: element.clientWidth,
clientHeight: element.clientHeight,
scrollY: element.scrollTop,
scrollX: element.scrollLeft,
get scrollWidth() {
return element.scrollWidth
},
get scrollHeight() {
return element.scrollHeight
},
get clientWidth() {
return element.clientWidth
},
get clientHeight() {
return element.clientHeight
},
get scrollY() {
return element.scrollTop
},
get scrollX() {
return element.scrollLeft
},
scrollTo(options?: ScrollToOptions) {
element.scrollTo(options)
},
@ -113,12 +125,24 @@ function ListImpl<ItemT>(
}
} else {
return {
scrollWidth: document.documentElement.scrollWidth,
scrollHeight: document.documentElement.scrollHeight,
clientWidth: window.innerWidth,
clientHeight: window.innerHeight,
scrollY: window.scrollY,
scrollX: window.scrollX,
get scrollWidth() {
return document.documentElement.scrollWidth
},
get scrollHeight() {
return document.documentElement.scrollHeight
},
get clientWidth() {
return window.innerWidth
},
get clientHeight() {
return window.innerHeight
},
get scrollY() {
return window.scrollY
},
get scrollX() {
return window.scrollX
},
scrollTo(options: ScrollToOptions) {
window.scrollTo(options)
},
@ -135,7 +159,7 @@ function ListImpl<ItemT>(
}
}, [containWeb])
const nativeRef = React.useRef(null)
const nativeRef = React.useRef<HTMLDivElement>(null)
React.useImperativeHandle(
ref,
() =>
@ -257,9 +281,15 @@ function ListImpl<ItemT>(
return (
<View
{...props}
// @ts-ignore web only
style={[style, containWeb && {flex: 1, 'overflow-y': 'scroll'}]}
ref={nativeRef}>
style={[
style,
containWeb && {
flex: 1,
// @ts-expect-error web only
'overflow-y': 'scroll',
},
]}
ref={nativeRef as any}>
<Visibility
onVisibleChange={setIsInsideVisibleTree}
style={
@ -277,13 +307,13 @@ function ListImpl<ItemT>(
pal.border,
]}>
<Visibility
root={containWeb ? nativeRef.current : null}
root={containWeb ? nativeRef : null}
onVisibleChange={handleAboveTheFoldVisibleChange}
style={[styles.aboveTheFoldDetector, {height: headerOffset}]}
/>
{onStartReached && (
<Visibility
root={containWeb ? nativeRef.current : null}
root={containWeb ? nativeRef : null}
onVisibleChange={onHeadVisibilityChange}
topMargin={(onStartReachedThreshold ?? 0) * 100 + '%'}
/>
@ -300,7 +330,7 @@ function ListImpl<ItemT>(
))}
{onEndReached && (
<Visibility
root={containWeb ? nativeRef.current : null}
root={containWeb ? nativeRef : null}
onVisibleChange={onTailVisibilityChange}
bottomMargin={(onEndReachedThreshold ?? 0) * 100 + '%'}
/>
@ -363,13 +393,13 @@ let Row = function RowImpl<ItemT>({
Row = React.memo(Row)
let Visibility = ({
root = null,
root,
topMargin = '0px',
bottomMargin = '0px',
onVisibleChange,
style,
}: {
root?: Element | null
root?: React.RefObject<HTMLDivElement> | null
topMargin?: string
bottomMargin?: string
onVisibleChange: (isVisible: boolean) => void
@ -393,7 +423,7 @@ let Visibility = ({
React.useEffect(() => {
const observer = new IntersectionObserver(handleIntersection, {
root,
root: root?.current ?? null,
rootMargin: `${topMargin} 0px ${bottomMargin} 0px`,
})
const tail: Element | null = tailRef.current!

View File

@ -22,9 +22,15 @@ export function ListContained() {
<>
<View style={{width: '100%', height: 300}}>
<ScrollProvider
onScroll={() => {
onScroll={e => {
'worklet'
console.log('onScroll')
console.log(
JSON.stringify({
contentOffset: e.contentOffset,
layoutMeasurement: e.layoutMeasurement,
contentSize: e.contentSize,
}),
)
}}>
<List
data={data}