56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import React, {useCallback} from 'react'
|
|
import {View} from 'react-native'
|
|
|
|
import {useBottomBarOffset} from 'lib/hooks/useBottomBarOffset'
|
|
import {isNative} from 'platform/detection'
|
|
import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard'
|
|
import {List, ListRef} from 'view/com/util/List'
|
|
import {SectionRef} from '#/screens/Profile/Sections/types'
|
|
|
|
function renderItem({item}: {item: string}) {
|
|
return <FeedSourceCard feedUri={item} />
|
|
}
|
|
|
|
function keyExtractor(item: string) {
|
|
return item
|
|
}
|
|
|
|
interface ProfilesListProps {
|
|
feeds: string[]
|
|
headerHeight: number
|
|
scrollElRef: ListRef
|
|
}
|
|
|
|
export const FeedsList = React.forwardRef<SectionRef, ProfilesListProps>(
|
|
function FeedsListImpl({feeds, headerHeight, scrollElRef}, ref) {
|
|
const [initialHeaderHeight] = React.useState(headerHeight)
|
|
const bottomBarOffset = useBottomBarOffset(20)
|
|
|
|
const onScrollToTop = useCallback(() => {
|
|
scrollElRef.current?.scrollToOffset({
|
|
animated: isNative,
|
|
offset: -headerHeight,
|
|
})
|
|
}, [scrollElRef, headerHeight])
|
|
|
|
React.useImperativeHandle(ref, () => ({
|
|
scrollToTop: onScrollToTop,
|
|
}))
|
|
|
|
return (
|
|
<List
|
|
data={feeds}
|
|
renderItem={renderItem}
|
|
keyExtractor={keyExtractor}
|
|
ref={scrollElRef}
|
|
headerOffset={headerHeight}
|
|
ListFooterComponent={
|
|
<View style={[{height: initialHeaderHeight + bottomBarOffset}]} />
|
|
}
|
|
showsVerticalScrollIndicator={false}
|
|
desktopFixedHeight={true}
|
|
/>
|
|
)
|
|
},
|
|
)
|