1import React, {memo} 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 return ( 27 <FlashList 28 ListEmptyComponent={status !== 'loading' ? Empty : null} 29 ListFooterComponent={ 30 status === 'loading' ? ( 31 <ListLoading /> 32 ) : status === 'done' ? ( 33 <ListReachEnd /> 34 ) : ( 35 <></> 36 ) 37 } 38 onEndReached={() => { 39 query(); 40 }} 41 onEndReachedThreshold={0.1} 42 estimatedItemSize={rpx(306)} 43 numColumns={orientation === 'vertical' ? 3 : 4} 44 renderItem={renderItem} 45 data={sheets} 46 /> 47 ); 48} 49 50export default memo( 51 SheetList, 52 (prev, curr) => 53 prev.tag.id === curr.tag.id && prev.pluginHash === curr.pluginHash, 54); 55