xref: /MusicFree/src/components/panels/types/addToMusicSheet.tsx (revision 740e39476f71e0e17304d812ac0a4c4cdc183ed1) 
1import React from 'react';
2import {StyleSheet, View} from 'react-native';
3import rpx, {vmax} from '@/utils/rpx';
4import ListItem from '@/components/base/listItem';
5import {ImgAsset} from '@/constants/assetsConst';
6import Toast from '@/utils/toast';
7
8import {useSafeAreaInsets} from 'react-native-safe-area-context';
9import PanelBase from '../base/panelBase';
10import {FlatList} from 'react-native-gesture-handler';
11import {hidePanel, showPanel} from '../usePanel';
12import PanelHeader from '../base/panelHeader';
13import MusicSheet from '@/core/musicSheet';
14
15interface IAddToMusicSheetProps {
16    musicItem: IMusic.IMusicItem | IMusic.IMusicItem[];
17    // 如果是新建歌单，可以传入一个默认的名称
18    newSheetDefaultName?: string;
19}
20
21export default function AddToMusicSheet(props: IAddToMusicSheetProps) {
22    const sheets = MusicSheet.useSheetsBase();
23
24    const {musicItem = [], newSheetDefaultName} = props ?? {};
25    const safeAreaInsets = useSafeAreaInsets();
26
27    return (
28        <PanelBase
29            renderBody={() => (
30                <>
31                    <PanelHeader
32                        hideButtons
33                        title={`添加到歌单 (${
34                            Array.isArray(musicItem) ? musicItem.length : 1
35                        }首) `}
36                    />
37                    <View style={style.wrapper}>
38                        <FlatList
39                            data={sheets ?? []}
40                            keyExtractor={sheet => sheet.id}
41                            style={{
42                                marginBottom: safeAreaInsets.bottom,
43                            }}
44                            ListHeaderComponent={
45                                <ListItem
46                                    withHorizontalPadding
47                                    key="new"
48                                    onPress={() => {
49                                        showPanel('CreateMusicSheet', {
50                                            defaultName: newSheetDefaultName,
51                                            async onSheetCreated(sheetId) {
52                                                try {
53                                                    await MusicSheet.addMusic(
54                                                        sheetId,
55                                                        musicItem,
56                                                    );
57                                                    Toast.success(
58                                                        '添加到歌单成功',
59                                                    );
60                                                } catch {
61                                                    Toast.warn(
62                                                        '添加到歌单失败',
63                                                    );
64                                                }
65                                            },
66                                            onCancel() {
67                                                showPanel('AddToMusicSheet', {
68                                                    musicItem: musicItem,
69                                                    newSheetDefaultName,
70                                                });
71                                            },
72                                        });
73                                    }}>
74                                    <ListItem.ListItemImage
75                                        fallbackImg={ImgAsset.add}
76                                    />
77                                    <ListItem.Content title="新建歌单" />
78                                </ListItem>
79                            }
80                            renderItem={({item: sheet}) => (
81                                <ListItem
82                                    withHorizontalPadding
83                                    key={`${sheet.id}`}
84                                    onPress={async () => {
85                                        try {
86                                            await MusicSheet.addMusic(
87                                                sheet.id,
88                                                musicItem,
89                                            );
90                                            hidePanel();
91                                            Toast.success('添加到歌单成功');
92                                        } catch {
93                                            Toast.warn('添加到歌单失败');
94                                        }
95                                    }}>
96                                    <ListItem.ListItemImage
97                                        uri={sheet.coverImg}
98                                        fallbackImg={ImgAsset.albumDefault}
99                                    />
100                                    <ListItem.Content
101                                        title={sheet.title}
102                                        description={`${
103                                            sheet.worksNum ?? '-'
104                                        }首`}
105                                    />
106                                </ListItem>
107                            )}
108                        />
109                    </View>
110                </>
111            )}
112            height={vmax(70)}
113        />
114    );
115}
116
117const style = StyleSheet.create({
118    wrapper: {
119        width: '100%',
120        flex: 1,
121    },
122    header: {
123        paddingHorizontal: rpx(24),
124        marginTop: rpx(36),
125        marginBottom: rpx(36),
126    },
127});
128