this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Address lint warnings in List.web.tsx (#10046)

authored by

DS Boyce and committed by
GitHub
b8d60eb0 97fdd7c5

+45 -33
+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