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