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