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 topListData: IPluginTopListResult; 13} 14function BoardPanel(props: IBoardPanelProps) { 15 const {topListData} = props ?? {}; 16 17 const renderItem: SectionListProps<IMusic.IMusicTopListItem>['renderItem'] = 18 ({item}) => { 19 return <TopListItem topListItem={item} />; 20 }; 21 22 const renderSectionHeader: SectionListProps<IMusic.IMusicTopListItem>['renderSectionHeader'] = 23 ({section: {title}}) => { 24 return ( 25 <View style={style.sectionHeader}> 26 <ThemeText fontWeight="bold" fontSize="title"> 27 {title} 28 </ThemeText> 29 </View> 30 ); 31 }; 32 33 return topListData?.state !== RequestStateCode.FINISHED ? ( 34 <Loading /> 35 ) : ( 36 <SectionList 37 renderItem={renderItem} 38 renderSectionHeader={renderSectionHeader} 39 ListEmptyComponent={<Empty />} 40 sections={topListData.data ?? []} 41 /> 42 ); 43} 44 45export default memo( 46 BoardPanel, 47 (prev, curr) => prev.topListData === curr.topListData, 48); 49 50const style = StyleSheet.create({ 51 wrapper: { 52 width: rpx(750), 53 }, 54 sectionHeader: { 55 marginTop: rpx(28), 56 marginBottom: rpx(24), 57 marginLeft: rpx(24), 58 }, 59}); 60