xref: /MusicFree/src/components/dialogs/components/editSheetDetail.tsx (revision 428a07232c590a64f321e5de380e0b764e4a2b5e) 
1import React, {useState} from 'react';
2import {Button, Dialog, TextInput} from 'react-native-paper';
3import useColors from '@/hooks/useColors';
4import rpx from '@/utils/rpx';
5import {StyleSheet, View} from 'react-native';
6import ThemeText from '@/components/base/themeText';
7import {ImgAsset} from '@/constants/assetsConst';
8import {TouchableOpacity} from 'react-native';
9import {launchImageLibrary} from 'react-native-image-picker';
10import pathConst from '@/constants/pathConst';
11import Image from '@/components/base/image';
12import {copyFile, exists, unlink} from 'react-native-fs';
13import MusicSheet from '@/core/musicSheet';
14import {addFileScheme, addRandomHash} from '@/utils/fileUtils';
15import Toast from '@/utils/toast';
16import {hideDialog} from '../useDialog';
17
18interface IEditSheetDetailProps {
19    musicSheet: IMusic.IMusicSheetItem;
20}
21export default function EditSheetDetailDialog(props: IEditSheetDetailProps) {
22    const {musicSheet} = props;
23    const colors = useColors();
24
25    const [coverImg, setCoverImg] = useState(musicSheet?.coverImg);
26    const [title, setTitle] = useState(musicSheet?.title);
27
28    // onCover
29
30    const onChangeCoverPress = async () => {
31        try {
32            const result = await launchImageLibrary({
33                mediaType: 'photo',
34            });
35            const uri = result.assets?.[0].uri;
36            if (!uri) {
37                return;
38            }
39            console.log(uri);
40            setCoverImg(uri);
41        } catch (e) {
42            console.log(e);
43        }
44    };
45
46    function onTitleChange(_: string) {
47        setTitle(_);
48    }
49
50    async function onConfirm() {
51        // 判断是否相同
52        if (coverImg === musicSheet?.coverImg && title === musicSheet?.title) {
53            hideDialog();
54            return;
55        }
56
57        let _coverImg = coverImg;
58        if (_coverImg && _coverImg !== musicSheet?.coverImg) {
59            _coverImg = addFileScheme(
60                `${pathConst.dataPath}sheet${
61                    musicSheet.id
62                }${_coverImg.substring(_coverImg.lastIndexOf('.'))}`,
63            );
64            try {
65                if (await exists(_coverImg)) {
66                    await unlink(_coverImg);
67                }
68                await copyFile(coverImg!, _coverImg);
69            } catch (e) {
70                console.log(e);
71            }
72        }
73        let _title = title;
74        if (!_title?.length) {
75            _title = musicSheet.title;
76        }
77        // 更新歌单信息
78        MusicSheet.updateAndSaveSheet(musicSheet.id, {
79            basic: {
80                coverImg: _coverImg ? addRandomHash(_coverImg) : undefined,
81                title: _title,
82            },
83        }).then(() => {
84            Toast.success('更新歌单信息成功~');
85        });
86        hideDialog();
87    }
88
89    return (
90        <Dialog
91            visible={true}
92            onDismiss={hideDialog}
93            style={{backgroundColor: colors.primary}}>
94            <Dialog.Content style={style.content}>
95                <View style={style.row}>
96                    <ThemeText fontSize="subTitle">封面</ThemeText>
97                    <TouchableOpacity
98                        onPress={onChangeCoverPress}
99                        onLongPress={() => {
100                            setCoverImg(undefined);
101                        }}>
102                        <Image
103                            style={style.coverImg}
104                            uri={coverImg}
105                            emptySrc={ImgAsset.albumDefault}
106                        />
107                    </TouchableOpacity>
108                </View>
109                <View style={style.row}>
110                    <ThemeText fontSize="subTitle">歌单名</ThemeText>
111                    <TextInput
112                        value={title}
113                        onChangeText={onTitleChange}
114                        mode="outlined"
115                        outlineColor="transparent"
116                        dense
117                        style={{
118                            includeFontPadding: false,
119                        }}
120                    />
121                </View>
122            </Dialog.Content>
123            <Dialog.Actions>
124                <Button color={colors.textHighlight} onPress={onConfirm}>
125                    确认
126                </Button>
127                <Button color={colors.text} onPress={hideDialog}>
128                    取消
129                </Button>
130            </Dialog.Actions>
131        </Dialog>
132    );
133}
134
135const style = StyleSheet.create({
136    content: {
137        height: rpx(450),
138    },
139    row: {
140        marginTop: rpx(28),
141        height: rpx(120),
142        flexDirection: 'row',
143        justifyContent: 'space-between',
144        alignItems: 'center',
145        paddingBottom: rpx(12),
146    },
147    coverImg: {
148        width: rpx(100),
149        height: rpx(100),
150        borderRadius: rpx(28),
151        marginRight: rpx(16),
152    },
153});
154