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