xref: /MusicFree/src/pages/home/components/drawer/index.tsx (revision cf2d630eca034addcb92030a5268105bce30ef82) 
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, IconButton} 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    ] as const;
52
53    return (
54        <>
55            <PageBackground />
56            <DrawerContentScrollView {...[props]} style={style.scrollWrapper}>
57                <View style={style.header}>
58                    <ThemeText fontSize="appbar" fontWeight="bold">
59                        {DeviceInfo.getApplicationName()}
60                        {DeviceInfo.getVersion()}
61                    </ThemeText>
62                    <IconButton icon={'qrcode-scan'} size={rpx(36)} />
63                </View>
64                <Card style={style.card}>
65                    <Card.Title
66                        title={
67                            <ThemeText fontSize="description">设置</ThemeText>
68                        }
69                    />
70                    <Card.Content style={style.cardContent}>
71                        {basicSetting.map(item => (
72                            <ListItem
73                                itemHeight={rpx(110)}
74                                key={item.title}
75                                left={{
76                                    icon: {
77                                        name: item.icon,
78                                        size: 'normal',
79                                        fontColor: 'normal',
80                                    },
81                                    width: rpx(48),
82                                }}
83                                title={item.title}
84                                onPress={item.onPress}
85                            />
86                        ))}
87                    </Card.Content>
88                </Card>
89                <View style={style.bottom}>
90                    <Button
91                        onPress={() => {
92                            MusicQueue.stop();
93                            BackHandler.exitApp();
94                        }}>
95                        退出
96                    </Button>
97                </View>
98            </DrawerContentScrollView>
99        </>
100    );
101}
102
103const style = StyleSheet.create({
104    wrapper: {
105        flex: 1,
106        backgroundColor: '#999999',
107    },
108    scrollWrapper: {
109        paddingHorizontal: rpx(24),
110        paddingTop: rpx(12),
111    },
112
113    header: {
114        height: rpx(100),
115        width: '100%',
116        flexDirection: 'row',
117        justifyContent: 'space-between',
118        alignItems: 'center',
119    },
120    card: {
121        backgroundColor: '#eeeeee22',
122    },
123    cardContent: {
124        paddingHorizontal: 0,
125    },
126    bottom: {
127        height: rpx(100),
128        flexDirection: 'row',
129        alignItems: 'center',
130        justifyContent: 'flex-end',
131    },
132});
133