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