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