xref: /MusicFree/src/components/musicList/index.tsx (revision 2aa881935ca35b8fb1abc4206e0dc35149231456) 
1import React from 'react';
2import {FlatListProps, StyleSheet} from 'react-native';
3import rpx from '@/utils/rpx';
4import MusicQueue from '@/core/musicQueue';
5import {FlatList} from 'react-native-gesture-handler';
6
7import MusicItem from '../mediaItem/musicItem';
8import Empty from '../base/empty';
9
10interface IMusicListProps {
11    /** 顶部 */
12    Header?: FlatListProps<IMusic.IMusicItem>['ListHeaderComponent'];
13    /** 音乐列表 */
14    musicList?: IMusic.IMusicItem[];
15    /** 所在歌单 */
16    musicSheet?: IMusic.IMusicSheetItem;
17    /** 是否展示序号 */
18    showIndex?: boolean;
19    /** 点击 */
20    onItemPress?: (
21        musicItem: IMusic.IMusicItem,
22        musicList?: IMusic.IMusicItem[],
23    ) => void;
24}
25const ITEM_HEIGHT = rpx(120);
26
27/** 音乐列表 */
28export default function MusicList(props: IMusicListProps) {
29    const {Header, musicList, musicSheet, showIndex, onItemPress} = props;
30
31    return (
32        <FlatList
33            style={style.wrapper}
34            ListHeaderComponent={Header}
35            ListEmptyComponent={Empty}
36            data={musicList ?? []}
37            keyExtractor={musicItem =>
38                `ml-${musicItem.id}${musicItem.platform}`
39            }
40            getItemLayout={(_, index) => ({
41                length: ITEM_HEIGHT,
42                offset: ITEM_HEIGHT * index,
43                index,
44            })}
45            renderItem={({index, item: musicItem}) => {
46                return (
47                    <MusicItem
48                        musicItem={musicItem}
49                        index={showIndex ? index + 1 : undefined}
50                        onItemPress={() => {
51                            if (onItemPress) {
52                                onItemPress(musicItem, musicList);
53                            } else {
54                                MusicQueue.playWithReplaceQueue(
55                                    musicItem,
56                                    musicList ?? [],
57                                );
58                            }
59                        }}
60                        musicSheet={musicSheet}
61                    />
62                );
63            }}
64        />
65    );
66}
67
68const style = StyleSheet.create({
69    wrapper: {
70        width: rpx(750),
71    },
72});
73