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