xref: /MusicFree/src/components/dialogs/components/editSheetDetail.tsx (revision 7a69a1e83a1ae1029095827886a4dec5b5219764) 
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 useDialog from '../useDialog';
7import ThemeText from '@/components/base/themeText';
8import {ImgAsset} from '@/constants/assetsConst';
9import {TouchableOpacity} from 'react-native-gesture-handler';
10import {launchImageLibrary} from 'react-native-image-picker';
11import pathConst from '@/constants/pathConst';
12import Image from '@/components/base/image';
13import {copyFile} from 'react-native-fs';
14import MusicSheet from '@/core/musicSheet';
15import {addFileScheme} from '@/utils/fileUtils';
16
17interface IEditSheetDetailProps {
18    musicSheet: IMusic.IMusicSheetItem;
19}
20export default function EditSheetDetailDialog(props: IEditSheetDetailProps) {
21    const {musicSheet} = props;
22    const colors = useColors();
23    const {hideDialog} = useDialog();
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) {
59            _coverImg = addFileScheme(
60                `${pathConst.dataPath}sheet${
61                    musicSheet.id
62                }${_coverImg.substring(_coverImg.lastIndexOf('.'))}`,
63            );
64            await copyFile(coverImg!, _coverImg);
65        }
66        let _title = title;
67        if (!title?.length) {
68            _title = musicSheet.title;
69        }
70        // 更新歌单信息
71        MusicSheet.updateAndSaveSheet(musicSheet.id, {
72            basic: {
73                coverImg: _coverImg,
74                title: _title,
75            },
76        });
77        hideDialog();
78    }
79
80    return (
81        <Dialog
82            visible={true}
83            onDismiss={hideDialog}
84            style={{backgroundColor: colors.primary}}>
85            <Dialog.Content style={style.content}>
86                <View style={style.row}>
87                    <ThemeText fontSize="subTitle">封面</ThemeText>
88                    <TouchableOpacity
89                        onPress={onChangeCoverPress}
90                        onLongPress={() => {
91                            setCoverImg(undefined);
92                        }}>
93                        <Image
94                            style={style.coverImg}
95                            uri={coverImg}
96                            emptySrc={ImgAsset.albumDefault}
97                        />
98                    </TouchableOpacity>
99                </View>
100                <View style={style.row}>
101                    <ThemeText fontSize="subTitle">歌单名</ThemeText>
102                    <TextInput
103                        value={title}
104                        onChangeText={onTitleChange}
105                        mode="outlined"
106                        outlineColor="transparent"
107                        dense
108                        style={{
109                            includeFontPadding: false,
110                        }}
111                    />
112                </View>
113            </Dialog.Content>
114            <Dialog.Actions>
115                <Button color={colors.textHighlight} onPress={onConfirm}>
116                    确认
117                </Button>
118                <Button color={colors.text} onPress={hideDialog}>
119                    取消
120                </Button>
121            </Dialog.Actions>
122        </Dialog>
123    );
124}
125
126const style = StyleSheet.create({
127    content: {
128        height: rpx(450),
129    },
130    row: {
131        marginTop: rpx(28),
132        height: rpx(120),
133        flexDirection: 'row',
134        justifyContent: 'space-between',
135        alignItems: 'center',
136        paddingBottom: rpx(12),
137    },
138    coverImg: {
139        width: rpx(100),
140        height: rpx(100),
141        borderRadius: rpx(28),
142        marginRight: rpx(16),
143    },
144});
145