From 9020c3ba2ddf2a4cbf25df90d2668fde10ba2c3e Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 7 Dec 2023 22:32:53 +0000 Subject: [PATCH] Clean up 2 --- src/Navigation.tsx | 1 - src/view/com/util/Views.web.tsx | 167 +++++++++----------------------- 2 files changed, 44 insertions(+), 124 deletions(-) diff --git a/src/Navigation.tsx b/src/Navigation.tsx index b2d53df9a9..4a3acc8d46 100644 --- a/src/Navigation.tsx +++ b/src/Navigation.tsx @@ -30,7 +30,6 @@ import {colors} from 'lib/styles' import {isNative} from 'platform/detection' import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' import {router} from './routes' -import {s} from 'lib/styles' import {usePalette} from 'lib/hooks/usePalette' import {bskyTitle} from 'lib/strings/headings' import {JSX} from 'react/jsx-runtime' diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx index fcc234aa0c..25f05b484d 100644 --- a/src/view/com/util/Views.web.tsx +++ b/src/view/com/util/Views.web.tsx @@ -54,7 +54,6 @@ export const FlatList = React.forwardRef(function FlatListImpl( data, contentOffset, keyExtractor, - desktopFixedHeight, renderItem, style, contentContainerStyle, @@ -90,46 +89,28 @@ export const FlatList = React.forwardRef(function FlatListImpl( paddingTop: Math.abs(contentOffset.y), }) } - if (desktopFixedHeight) { - if (typeof desktopFixedHeight === 'number') { - // @ts-ignore Web only -prf - // style = addStyle(style, { - // height: `calc(100vh - ${desktopFixedHeight}px)`, - // }) - } else { - // style = addStyle(style, styles.fixedHeight) - } - if (!isMobile) { - // NOTE - // react native web produces *three* wrapping divs - // the first two use the `style` prop and the innermost uses the - // `contentContainerStyle`. Unfortunately the stable-gutter style - // needs to be applied to only the "middle" of these. To hack - // around this, we set data-stable-gutters which can then be - // styled in our external CSS. - // -prf - // @ts-ignore web only -prf - props.dataSet = props.dataSet || {} - // @ts-ignore web only -prf - props.dataSet.stableGutters = '1' - } - } - const nativeRef = React.useRef(null) React.useImperativeHandle( ref, - () => ({ - scrollToTop() { - window.scrollTo({top: 0}) - }, - scrollToOffset({animated, offset}) { - window.scrollTo({ - left: 0, - top: offset, - behavior: animated ? 'smooth' : 'instant', - }) - }, - }), + () => + ({ + scrollToTop() { + window.scrollTo({top: 0}) + }, + scrollToOffset({ + animated, + offset, + }: { + animated: boolean + offset: number + }) { + window.scrollTo({ + left: 0, + top: offset, + behavior: animated ? 'smooth' : 'instant', + }) + }, + } as any), // TODO: Types. [], ) @@ -137,8 +118,8 @@ export const FlatList = React.forwardRef(function FlatListImpl( if (!onScroll) { return } - function handleScroll(e) { - onScroll.current.worklet({ + function handleScroll(e: any) { + ;(onScroll as any).current?.worklet({ ...e.nativeEvent, eventName: 'onScroll', contentOffset: { @@ -152,24 +133,36 @@ export const FlatList = React.forwardRef(function FlatListImpl( }, [onScroll]) return ( - + - {data.map(item => ( - {renderItem({item})} + {(data as Array).map((item, index) => ( + + {renderItem!({item, index, separators: null as any})} + ))} {onEndReached && ( - + { + onEndReached({ + distanceFromEnd: onEndReachedThreshold || 0, + }) + }} + /> )} ) }) -function Tail({onVisible}) { +function Tail({ + threshold = 0, + onVisible, +}: { + threshold?: number | null | undefined + onVisible: () => void +}) { const tailRef = React.useRef(null) React.useEffect(() => { @@ -182,91 +175,19 @@ function Tail({onVisible}) { }) }, { - rootMargin: '200%', + rootMargin: (threshold || 0) * 100 + '%', }, ) - - const tail = tailRef.current + const tail: Element | null = tailRef.current! observer.observe(tail) - return () => { observer.unobserve(tail) } - }, [onVisible]) + }, [onVisible, threshold]) return
} -export const FlatListOld = React.forwardRef(function FlatListImpl( - { - contentContainerStyle, - style, - contentOffset, - desktopFixedHeight, - ...props - }: React.PropsWithChildren & AddedProps>, - ref: React.Ref>, -) { - const pal = usePalette('default') - const {isMobile} = useWebMediaQueries() - if (!isMobile) { - contentContainerStyle = addStyle( - contentContainerStyle, - styles.containerScroll, - ) - } - if (contentOffset && contentOffset?.y !== 0) { - // NOTE - // we use paddingTop & contentOffset to space around the floating header - // but reactnative web puts the paddingTop on the wrong element (style instead of the contentContainer) - // so we manually correct it here - // -prf - style = addStyle(style, { - paddingTop: 0, - }) - contentContainerStyle = addStyle(contentContainerStyle, { - paddingTop: Math.abs(contentOffset.y), - }) - } - if (desktopFixedHeight) { - if (typeof desktopFixedHeight === 'number') { - // @ts-ignore Web only -prf - style = addStyle(style, { - height: `calc(100vh - ${desktopFixedHeight}px)`, - }) - } else { - style = addStyle(style, styles.fixedHeight) - } - if (!isMobile) { - // NOTE - // react native web produces *three* wrapping divs - // the first two use the `style` prop and the innermost uses the - // `contentContainerStyle`. Unfortunately the stable-gutter style - // needs to be applied to only the "middle" of these. To hack - // around this, we set data-stable-gutters which can then be - // styled in our external CSS. - // -prf - // @ts-ignore web only -prf - props.dataSet = props.dataSet || {} - // @ts-ignore web only -prf - props.dataSet.stableGutters = '1' - } - } - return ( - - ) -}) - export const ScrollView = React.forwardRef(function ScrollViewImpl( {contentContainerStyle, ...props}: React.PropsWithChildren, ref: React.Ref,