robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
A few `containWeb` List nits (#3877)
* use getters for returned values
* pass ref
* add log to `onScroll` in tester
* improve expect error
hailey.at
+60
-24
+52
-22
src/view/com/util/List.web.tsx
+52
-22
src/view/com/util/List.web.tsx
···
92
92
if (!element) return
93
93
94
94
return {
95
-
scrollWidth: element.scrollWidth,
96
-
scrollHeight: element.scrollHeight,
97
-
clientWidth: element.clientWidth,
98
-
clientHeight: element.clientHeight,
99
-
scrollY: element.scrollTop,
100
-
scrollX: element.scrollLeft,
95
+
get scrollWidth() {
96
+
return element.scrollWidth
97
+
},
98
+
get scrollHeight() {
99
+
return element.scrollHeight
100
+
},
101
+
get clientWidth() {
102
+
return element.clientWidth
103
+
},
104
+
get clientHeight() {
105
+
return element.clientHeight
106
+
},
107
+
get scrollY() {
108
+
return element.scrollTop
109
+
},
110
+
get scrollX() {
111
+
return element.scrollLeft
112
+
},
101
113
scrollTo(options?: ScrollToOptions) {
102
114
element.scrollTo(options)
103
115
},
···
113
125
}
114
126
} else {
115
127
return {
116
-
scrollWidth: document.documentElement.scrollWidth,
117
-
scrollHeight: document.documentElement.scrollHeight,
118
-
clientWidth: window.innerWidth,
119
-
clientHeight: window.innerHeight,
120
-
scrollY: window.scrollY,
121
-
scrollX: window.scrollX,
128
+
get scrollWidth() {
129
+
return document.documentElement.scrollWidth
130
+
},
131
+
get scrollHeight() {
132
+
return document.documentElement.scrollHeight
133
+
},
134
+
get clientWidth() {
135
+
return window.innerWidth
136
+
},
137
+
get clientHeight() {
138
+
return window.innerHeight
139
+
},
140
+
get scrollY() {
141
+
return window.scrollY
142
+
},
143
+
get scrollX() {
144
+
return window.scrollX
145
+
},
122
146
scrollTo(options: ScrollToOptions) {
123
147
window.scrollTo(options)
124
148
},
···
135
159
}
136
160
}, [containWeb])
137
161
138
-
const nativeRef = React.useRef(null)
162
+
const nativeRef = React.useRef<HTMLDivElement>(null)
139
163
React.useImperativeHandle(
140
164
ref,
141
165
() =>
···
257
281
return (
258
282
<View
259
283
{...props}
260
-
// @ts-ignore web only
261
-
style={[style, containWeb && {flex: 1, 'overflow-y': 'scroll'}]}
262
-
ref={nativeRef}>
284
+
style={[
285
+
style,
286
+
containWeb && {
287
+
flex: 1,
288
+
// @ts-expect-error web only
289
+
'overflow-y': 'scroll',
290
+
},
291
+
]}
292
+
ref={nativeRef as any}>
263
293
<Visibility
264
294
onVisibleChange={setIsInsideVisibleTree}
265
295
style={
···
277
307
pal.border,
278
308
]}>
279
309
<Visibility
280
-
root={containWeb ? nativeRef.current : null}
310
+
root={containWeb ? nativeRef : null}
281
311
onVisibleChange={handleAboveTheFoldVisibleChange}
282
312
style={[styles.aboveTheFoldDetector, {height: headerOffset}]}
283
313
/>
284
314
{onStartReached && (
285
315
<Visibility
286
-
root={containWeb ? nativeRef.current : null}
316
+
root={containWeb ? nativeRef : null}
287
317
onVisibleChange={onHeadVisibilityChange}
288
318
topMargin={(onStartReachedThreshold ?? 0) * 100 + '%'}
289
319
/>
···
300
330
))}
301
331
{onEndReached && (
302
332
<Visibility
303
-
root={containWeb ? nativeRef.current : null}
333
+
root={containWeb ? nativeRef : null}
304
334
onVisibleChange={onTailVisibilityChange}
305
335
bottomMargin={(onEndReachedThreshold ?? 0) * 100 + '%'}
306
336
/>
···
363
393
Row = React.memo(Row)
364
394
365
395
let Visibility = ({
366
-
root = null,
396
+
root,
367
397
topMargin = '0px',
368
398
bottomMargin = '0px',
369
399
onVisibleChange,
370
400
style,
371
401
}: {
372
-
root?: Element | null
402
+
root?: React.RefObject<HTMLDivElement> | null
373
403
topMargin?: string
374
404
bottomMargin?: string
375
405
onVisibleChange: (isVisible: boolean) => void
···
393
423
394
424
React.useEffect(() => {
395
425
const observer = new IntersectionObserver(handleIntersection, {
396
-
root,
426
+
root: root?.current ?? null,
397
427
rootMargin: `${topMargin} 0px ${bottomMargin} 0px`,
398
428
})
399
429
const tail: Element | null = tailRef.current!
+8
-2
src/view/screens/Storybook/ListContained.tsx
+8
-2
src/view/screens/Storybook/ListContained.tsx
···
22
22
<>
23
23
<View style={{width: '100%', height: 300}}>
24
24
<ScrollProvider
25
-
onScroll={() => {
25
+
onScroll={e => {
26
26
'worklet'
27
-
console.log('onScroll')
27
+
console.log(
28
+
JSON.stringify({
29
+
contentOffset: e.contentOffset,
30
+
layoutMeasurement: e.layoutMeasurement,
31
+
contentSize: e.contentSize,
32
+
}),
33
+
)
28
34
}}>
29
35
<List
30
36
data={data}