xref: /MusicFree/src/pages/home/components/drawer/index.tsx (revision b882a19d884fffa32f7c8cef31652b909dceaa0f) 
1import React from 'react';
2import {BackHandler, StyleSheet, View} from 'react-native';
3import rpx from '@/utils/rpx';
4import {DrawerContentScrollView} from '@react-navigation/drawer';
5import {Button, Card} from 'react-native-paper';
6import MusicQueue from '@/core/musicQueue';
7import ListItem from '@/components/base/listItem';
8import {useNavigation} from '@react-navigation/native';
9import {ROUTE_PATH} from '@/entry/router';
10import ThemeText from '@/components/base/themeText';
11import PageBackground from '@/components/base/pageBackground';
12import DeviceInfo from 'react-native-device-info';
13
14export default function HomeDrawer(props: any) {
15    const navigation = useNavigation<any>();
16    function navigateToSetting(settingType: string) {
17        navigation.navigate(ROUTE_PATH.SETTING, {
18            type: settingType,
19        });
20    }
21
22    const basicSetting = [
23        {
24            icon: 'cog-outline',
25            title: '基本设置',
26            onPress: () => {
27                navigateToSetting('basic');
28            },
29        },
30        {
31            icon: 'language-javascript',
32            title: '插件设置',
33            onPress: () => {
34                navigateToSetting('plugin');
35            },
36        },
37        {
38            icon: 'tshirt-v-outline',
39            title: '主题设置',
40            onPress: () => {
41                navigateToSetting('theme');
42            },
43        },
44        {
45            icon: 'backup-restore',
46            title: '备份与恢复',
47            onPress: () => {
48                navigateToSetting('backup');
49            },
50        },
51        {
52            icon: 'information-outline',
53            title: '关于',
54            onPress: () => {
55                navigateToSetting('about');
56            },
57        },
58    ] as const;
59
60    return (
61        <>
62            <PageBackground />
63            <DrawerContentScrollView {...[props]} style={style.scrollWrapper}>
64                <View style={style.header}>
65                    <ThemeText fontSize="appbar" fontWeight="bold">
66                        {DeviceInfo.getApplicationName()}
67                    </ThemeText>
68                    {/* <IconButton icon={'qrcode-scan'} size={rpx(36)} /> */}
69                </View>
70                <Card style={style.card}>
71                    <Card.Title
72                        title={
73                            <ThemeText fontSize="description">设置</ThemeText>
74                        }
75                    />
76                    <Card.Content style={style.cardContent}>
77                        {basicSetting.map(item => (
78                            <ListItem
79                                itemHeight={rpx(110)}
80                                key={item.title}
81                                left={{
82                                    icon: {
83                                        name: item.icon,
84                                        size: 'normal',
85                                        fontColor: 'normal',
86                                    },
87                                    width: rpx(48),
88                                }}
89                                title={item.title}
90                                onPress={item.onPress}
91                            />
92                        ))}
93                    </Card.Content>
94                </Card>
95                <View style={style.bottom}>
96                    <Button
97                        onPress={() => {
98                            MusicQueue.stop();
99                            BackHandler.exitApp();
100                        }}>
101                        退出
102                    </Button>
103                </View>
104            </DrawerContentScrollView>
105        </>
106    );
107}
108
109const style = StyleSheet.create({
110    wrapper: {
111        flex: 1,
112        backgroundColor: '#999999',
113    },
114    scrollWrapper: {
115        paddingHorizontal: rpx(24),
116        paddingTop: rpx(12),
117    },
118
119    header: {
120        height: rpx(100),
121        width: '100%',
122        flexDirection: 'row',
123        justifyContent: 'space-between',
124        alignItems: 'center',
125    },
126    card: {
127        backgroundColor: '#eeeeee22',
128    },
129    cardContent: {
130        paddingHorizontal: 0,
131    },
132    bottom: {
133        height: rpx(100),
134        flexDirection: 'row',
135        alignItems: 'center',
136        justifyContent: 'flex-end',
137    },
138});
139