1import React, {memo} from 'react'; 2import {SectionList, SectionListProps, StyleSheet, View} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import {IPluginTopListResult} from '../store/atoms'; 5import {RequestStateCode} from '@/constants/commonConst'; 6import Loading from '@/components/base/loading'; 7import Empty from '@/components/base/empty'; 8import TopListItem from '@/components/mediaItem/topListItem'; 9import ThemeText from '@/components/base/themeText'; 10 11interface IBoardPanelProps { 12 hash: string; 13 topListData: IPluginTopListResult; 14} 15function BoardPanel(props: IBoardPanelProps) { 16 const {hash, topListData} = props ?? {}; 17 18 const renderItem: SectionListProps<IMusic.IMusicSheetItemBase>['renderItem'] = 19 ({item}) => { 20 return <TopListItem topListItem={item} pluginHash={hash} />; 21 }; 22 23 const renderSectionHeader: SectionListProps<IMusic.IMusicSheetItemBase>['renderSectionHeader'] = 24 ({section: {title}}) => { 25 return ( 26 <View style={style.sectionHeader}> 27 <ThemeText fontWeight="bold" fontSize="title"> 28 {title} 29 </ThemeText> 30 </View> 31 ); 32 }; 33 34 return topListData?.state !== RequestStateCode.FINISHED ? ( 35 <Loading /> 36 ) : ( 37 <SectionList 38 renderItem={renderItem} 39 renderSectionHeader={renderSectionHeader} 40 ListEmptyComponent={<Empty />} 41 sections={topListData?.data || []} 42 /> 43 ); 44} 45 46export default memo( 47 BoardPanel, 48 (prev, curr) => prev.topListData === curr.topListData, 49); 50 51const style = StyleSheet.create({ 52 wrapper: { 53 width: rpx(750), 54 }, 55 sectionHeader: { 56 marginTop: rpx(28), 57 marginBottom: rpx(24), 58 marginLeft: rpx(24), 59 }, 60}); 61