1import React from 'react'; 2import {StyleSheet, Text, View} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import ListItem, {ILeftProps} from '../base/listItem'; 5import Download from '@/core/download'; 6import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; 7import MusicQueue from '@/core/musicQueue'; 8import IconButton from '../base/iconButton'; 9import usePanel from '../panels/usePanel'; 10 11interface IMusicItemProps { 12 index?: string | number; 13 left?: ILeftProps; 14 musicItem: IMusic.IMusicItem; 15 musicSheet?: IMusic.IMusicSheetItem; 16 onItemPress?: (musicItem: IMusic.IMusicItem) => void; 17} 18const ITEM_HEIGHT = rpx(120); 19export default function MusicItem(props: IMusicItemProps) { 20 const {musicItem, index, left, onItemPress, musicSheet} = props; 21 const {showPanel} = usePanel(); 22 23 return ( 24 <ListItem 25 itemHeight={ITEM_HEIGHT} 26 left={index !== undefined ? {index: index, width: rpx(56)} : left} 27 title={musicItem.title} 28 desc={ 29 <> 30 {Download.isDownloaded(musicItem) && ( 31 <Icon color="#11659a" name="check-circle" size={rpx(22)}></Icon> 32 )} 33 <Text> 34 {musicItem.artist} - {musicItem.album} 35 </Text> 36 </> 37 } 38 tag={musicItem.platform} 39 onPress={() => { 40 if (onItemPress) { 41 onItemPress(musicItem); 42 } else { 43 MusicQueue.play(musicItem); 44 } 45 }} 46 right={() => ( 47 <IconButton 48 name="dots-vertical" 49 size="normal" 50 fontColor="normal" 51 onPress={() => { 52 showPanel('MusicItemOptions', {musicItem, musicSheet}); 53 }}></IconButton> 54 )}></ListItem> 55 ); 56} 57