this repo has no description
Address lint warnings in List.web.tsx (#10046)
+45
-33
+45
-33
src/view/com/util/List.web.tsx
+45
-33
src/view/com/util/List.web.tsx
···
1
-
import React, {
1
+
import {
2
+
forwardRef,
2
3
isValidElement,
3
-
type JSX,
4
4
memo,
5
5
startTransition,
6
+
useCallback,
7
+
useEffect,
8
+
useImperativeHandle,
6
9
useRef,
10
+
useState,
7
11
} from 'react'
8
12
import {
9
13
type FlatListProps,
···
39
43
*/
40
44
sideBorders?: boolean
41
45
}
42
-
export type ListRef = React.MutableRefObject<any | null> // TODO: Better types.
46
+
export type ListRef = React.RefObject<View>
43
47
44
48
const ON_ITEM_SEEN_WAIT_DURATION = 0.5e3 // when we consider post to be "seen"
45
49
const ON_ITEM_SEEN_INTERSECTION_OPTS = {
···
77
81
78
82
const isEmpty = !data || data.length === 0
79
83
80
-
let headerComponent: JSX.Element | null = null
84
+
let headerComponent: React.JSX.Element | null = null
81
85
if (ListHeaderComponent != null) {
82
86
if (isValidElement(ListHeaderComponent)) {
83
87
headerComponent = ListHeaderComponent
···
87
91
}
88
92
}
89
93
90
-
let footerComponent: JSX.Element | null = null
94
+
let footerComponent: React.JSX.Element | null = null
91
95
if (ListFooterComponent != null) {
92
96
if (isValidElement(ListFooterComponent)) {
93
97
footerComponent = ListFooterComponent
···
97
101
}
98
102
}
99
103
100
-
let emptyComponent: JSX.Element | null = null
104
+
let emptyComponent: React.JSX.Element | null = null
101
105
if (ListEmptyComponent != null) {
102
106
if (isValidElement(ListEmptyComponent)) {
103
107
emptyComponent = ListEmptyComponent
···
113
117
})
114
118
}
115
119
116
-
const getScrollableNode = React.useCallback(() => {
120
+
const getScrollableNode = useCallback(() => {
117
121
if (disableFullWindowScroll) {
118
-
const element = nativeRef.current as HTMLDivElement | null
122
+
const element = nativeRef.current
119
123
if (!element) return
120
124
121
125
return {
···
186
190
}
187
191
}, [disableFullWindowScroll])
188
192
189
-
const nativeRef = React.useRef<HTMLDivElement>(null)
190
-
React.useImperativeHandle(
193
+
const nativeRef = useRef<HTMLDivElement>(null)
194
+
useImperativeHandle(
191
195
ref,
192
196
() =>
193
197
({
···
226
230
useResizeObserver(containerRef, onContentSizeChange)
227
231
228
232
// --- onScroll ---
229
-
const [isInsideVisibleTree, setIsInsideVisibleTree] = React.useState(false)
233
+
const [isInsideVisibleTree, setIsInsideVisibleTree] = useState(false)
230
234
const handleScroll = useNonReactiveCallback(() => {
231
235
if (!isInsideVisibleTree) return
232
236
···
257
261
)
258
262
})
259
263
260
-
React.useEffect(() => {
264
+
useEffect(() => {
261
265
if (!isInsideVisibleTree) {
262
266
// Prevents hidden tabs from firing scroll events.
263
267
// Only one list is expected to be firing these at a time.
···
395
399
containerRef: React.RefObject<Element | null>
396
400
onVisibleChange: (isVisible: boolean) => void
397
401
}) {
398
-
const [containerHeight, setContainerHeight] = React.useState(0)
402
+
const [containerHeight, setContainerHeight] = useState(0)
399
403
useResizeObserver(containerRef, (w, h) => {
400
404
setContainerHeight(h)
401
405
})
···
416
420
) {
417
421
const handleResize = useNonReactiveCallback(onResize ?? (() => {}))
418
422
const isActive = !!onResize
419
-
React.useEffect(() => {
423
+
useEffect(() => {
420
424
if (!isActive) {
421
425
return
422
426
}
···
452
456
extraData: any
453
457
onItemSeen: ((item: any) => void) | undefined
454
458
}): React.ReactNode {
455
-
const rowRef = React.useRef(null)
456
-
const intersectionTimeout = React.useRef<
457
-
ReturnType<typeof setTimeout> | undefined
458
-
>(undefined)
459
+
const rowRef = useRef(null)
460
+
const intersectionTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(
461
+
undefined,
462
+
)
459
463
460
464
const handleIntersection = useNonReactiveCallback(
461
465
(entries: IntersectionObserverEntry[]) => {
···
468
472
if (!intersectionTimeout.current) {
469
473
intersectionTimeout.current = setTimeout(() => {
470
474
intersectionTimeout.current = undefined
471
-
onItemSeen!(item)
475
+
onItemSeen(item)
472
476
}, ON_ITEM_SEEN_WAIT_DURATION)
473
477
}
474
478
} else {
475
479
if (intersectionTimeout.current) {
476
-
clearTimeout(intersectionTimeout.current as NodeJS.Timeout)
480
+
clearTimeout(intersectionTimeout.current)
477
481
intersectionTimeout.current = undefined
478
482
}
479
483
}
···
482
486
},
483
487
)
484
488
485
-
React.useEffect(() => {
489
+
useEffect(() => {
486
490
if (!onItemSeen) {
487
491
return
488
492
}
···
490
494
handleIntersection,
491
495
ON_ITEM_SEEN_INTERSECTION_OPTS,
492
496
)
493
-
const row: Element | null = rowRef.current!
494
-
observer.observe(row)
497
+
const row: Element | null = rowRef.current
498
+
if (row) {
499
+
observer.observe(row)
500
+
}
495
501
return () => {
496
-
observer.unobserve(row)
502
+
if (row) {
503
+
observer.unobserve(row)
504
+
}
497
505
}
498
506
}, [handleIntersection, onItemSeen])
499
507
···
507
515
</View>
508
516
)
509
517
}
510
-
Row = React.memo(Row)
518
+
Row = memo(Row)
511
519
512
520
let Visibility = ({
513
521
root,
···
522
530
onVisibleChange: (isVisible: boolean) => void
523
531
style?: ViewProps['style']
524
532
}): React.ReactNode => {
525
-
const tailRef = React.useRef(null)
526
-
const isIntersecting = React.useRef(false)
533
+
const tailRef = useRef(null)
534
+
const isIntersecting = useRef(false)
527
535
528
536
const handleIntersection = useNonReactiveCallback(
529
537
(entries: IntersectionObserverEntry[]) => {
···
538
546
},
539
547
)
540
548
541
-
React.useEffect(() => {
549
+
useEffect(() => {
542
550
const observer = new IntersectionObserver(handleIntersection, {
543
551
root: root?.current ?? null,
544
552
rootMargin: `${topMargin} 0px ${bottomMargin} 0px`,
545
553
})
546
-
const tail: Element | null = tailRef.current!
547
-
observer.observe(tail)
554
+
const tail: Element | null = tailRef.current
555
+
if (tail) {
556
+
observer.observe(tail)
557
+
}
548
558
return () => {
549
-
observer.unobserve(tail)
559
+
if (tail) {
560
+
observer.unobserve(tail)
561
+
}
550
562
}
551
563
}, [bottomMargin, handleIntersection, topMargin, root])
552
564
···
554
566
<View ref={tailRef} style={addStyle(styles.visibilityDetector, style)} />
555
567
)
556
568
}
557
-
Visibility = React.memo(Visibility)
569
+
Visibility = memo(Visibility)
558
570
559
-
export const List = memo(React.forwardRef(ListImpl)) as <ItemT>(
571
+
export const List = memo(forwardRef(ListImpl)) as <ItemT>(
560
572
props: ListProps<ItemT> & {ref?: React.Ref<ListMethods>},
561
573
) => React.ReactElement<any>
562
574