1import React, {memo, useCallback} from 'react'; 2import rpx from '@/utils/rpx'; 3import {FlashList} from '@shopify/flash-list'; 4import useRecommendSheets from '../../hooks/useRecommendSheets'; 5import Empty from '@/components/base/empty'; 6import ListLoading from '@/components/base/listLoading'; 7import ListReachEnd from '@/components/base/listReachEnd'; 8import SheetItem from '@/components/mediaItem/sheetItem'; 9import useOrientation from '@/hooks/useOrientation'; 10 11interface ISheetListProps { 12 tag: ICommon.IUnique; 13 pluginHash: string; 14} 15 16function SheetList(props: ISheetListProps) { 17 const {tag, pluginHash} = props ?? {}; 18 19 const [query, sheets, status] = useRecommendSheets(pluginHash, tag); 20 21 function renderItem({item}: {item: IMusic.IMusicSheetItemBase}) { 22 return <SheetItem sheetInfo={item} pluginHash={pluginHash} />; 23 } 24 const orientation = useOrientation(); 25 26 const keyExtractor = useCallback( 27 (item: any, i: number) => `${i}-${item.platform}-${item.id}`, 28 [], 29 ); 30 31 return ( 32 <FlashList 33 ListEmptyComponent={status !== 'loading' ? Empty : null} 34 ListFooterComponent={ 35 status === 'loading' ? ( 36 <ListLoading /> 37 ) : status === 'done' ? ( 38 <ListReachEnd /> 39 ) : ( 40 <></> 41 ) 42 } 43 onEndReached={() => { 44 query(); 45 }} 46 onEndReachedThreshold={0.1} 47 estimatedItemSize={rpx(306)} 48 numColumns={orientation === 'vertical' ? 3 : 4} 49 renderItem={renderItem} 50 data={sheets} 51 keyExtractor={keyExtractor} 52 /> 53 ); 54} 55 56export default memo( 57 SheetList, 58 (prev, curr) => 59 prev.tag.id === curr.tag.id && prev.pluginHash === curr.pluginHash, 60); 61