|
| 1 | +import { FC } from 'react' |
| 2 | + |
| 3 | +import { FlashList } from '@shopify/flash-list' |
| 4 | + |
| 5 | +import { LoadingScreen } from '../../displays' |
| 6 | +import View from '../View' |
| 7 | +import { styles } from './styles' |
| 8 | +import { InfiniteScrollerViewProps } from './types' |
| 9 | + |
| 10 | +/** |
| 11 | + * InfiniteScrollerView Component |
| 12 | + * |
| 13 | + * @description |
| 14 | + * This is a **BaseApp** feature. |
| 15 | + * |
| 16 | + * If you believe your changes should be in the BaseApp, please read the **CONTRIBUTING.md** guide. |
| 17 | + * |
| 18 | + * The `InfiniteScrollerView` component provides an infinite scrolling view by wrapping Shopify's FlashList. |
| 19 | + * It handles a footer loading state based on the "isLoading" prop if no custom ListFooterComponent is provided. |
| 20 | + * |
| 21 | + * When ListFooterComponent is not passed, "isLoading" is required and will display a default loading indicator. |
| 22 | + * If a custom ListFooterComponent is provided, the "isLoading" prop is omitted. |
| 23 | + * |
| 24 | + * @param {InfiniteScrollerViewProps<T>} props - The props for configuring the infinite scrolling behavior. |
| 25 | + * @param {boolean} [props.isLoading] - Indicates if the list is currently loading more items (required if ListFooterComponent is not provided). |
| 26 | + * @param {number} [props.estimatedItemSize=200] - The estimated size per list item. |
| 27 | + * @param {React.ComponentType<any> | React.ReactNode} [props.ListFooterComponent] - A custom component to display as the list footer. |
| 28 | + * @param {...any} props - Additional properties are passed down to the underlying FlashList component, all of FlashList's props are supported. |
| 29 | + * |
| 30 | + * @example |
| 31 | + * // Using the default footer loading state: |
| 32 | + * <InfiniteScrollerView |
| 33 | + * data={data} |
| 34 | + * renderItem={({ item }) => <ItemComponent item={item} />} |
| 35 | + * estimatedItemSize={134} |
| 36 | + * onEndReached={() => { |
| 37 | + * if (hasNext) { |
| 38 | + * loadNext(5) |
| 39 | + * } |
| 40 | + * }} |
| 41 | + * isLoading={isLoadingNext} |
| 42 | + * /> |
| 43 | + * |
| 44 | + * @example |
| 45 | + * // Using a custom footer component: |
| 46 | + * <InfiniteScrollerView |
| 47 | + * data={data} |
| 48 | + * renderItem={({ item }) => <ItemComponent item={item} />} |
| 49 | + * estimatedItemSize={134} |
| 50 | + * onEndReached={() => { |
| 51 | + * if (hasNext) { |
| 52 | + * loadNext(5) |
| 53 | + * } |
| 54 | + * }} |
| 55 | + * ListFooterComponent={<CustomFooter />} |
| 56 | + * /> |
| 57 | + * |
| 58 | + * @returns {JSX.Element} A container wrapping a FlashList with infinite scrolling functionality. |
| 59 | + */ |
| 60 | + |
| 61 | +// TODO: There is a ref error that will be fixed on the next version of flash-list we need to update to this new version to fix this issue https://github.com/Shopify/flash-list/issues/1559 |
| 62 | +const InfiniteScrollerView: FC<InfiniteScrollerViewProps<any>> = ({ |
| 63 | + isLoading, |
| 64 | + estimatedItemSize = 200, |
| 65 | + ListFooterComponent, |
| 66 | + ...props |
| 67 | +}) => { |
| 68 | + const renderFooterLoadingState = () => { |
| 69 | + if (!isLoading) return <View style={{ paddingTop: 24 }} /> |
| 70 | + |
| 71 | + return <LoadingScreen size="small" /> |
| 72 | + } |
| 73 | + |
| 74 | + return ( |
| 75 | + <View style={styles.container}> |
| 76 | + <FlashList |
| 77 | + estimatedItemSize={estimatedItemSize} |
| 78 | + ListFooterComponent={ListFooterComponent ?? renderFooterLoadingState} |
| 79 | + {...props} |
| 80 | + /> |
| 81 | + </View> |
| 82 | + ) |
| 83 | +} |
| 84 | + |
| 85 | +export default InfiniteScrollerView |
0 commit comments