xref: /MusicFree/src/pages/home/components/drawer/index.tsx (revision d84e0f28a520cbaefef752f0fc28e0378e11f72d) 
1import React from 'react';
2import {
3  BackHandler,
4  ImageBackground,
5  StyleSheet,
6  Text,
7  View,
8} from 'react-native';
9import rpx from '@/utils/rpx';
10import {DrawerContentScrollView} from '@react-navigation/drawer';
11import {Button, Card, IconButton} from 'react-native-paper';
12import MusicQueue from '@/common/musicQueue';
13import ListItem from '@/components/listItem';
14import {useNavigation} from '@react-navigation/native';
15import {ROUTE_PATH} from '@/entry/router';
16import {fontSizeConst, fontWeightConst} from '@/constants/uiConst';
17import ThemeText from '@/components/themeText';
18import {useConfig} from '@/common/localConfigManager';
19
20interface IDrawerProps {}
21
22export default function HomeDrawer(props: IDrawerProps) {
23  const navigation = useNavigation<any>();
24  const background = useConfig('setting.theme.background');
25  function navigateToSetting(settingType: string) {
26    navigation.navigate(ROUTE_PATH.SETTING, {
27      type: settingType,
28    });
29  }
30  return (
31    <ImageBackground
32      blurRadius={20}
33      source={
34        background
35          ? {
36              uri: background,
37            }
38          : require('@/assets/imgs/background.jpg')
39      }
40      style={style.wrapper}>
41      <DrawerContentScrollView {...props} style={style.scrollWrapper}>
42        <View style={style.header}>
43          <ThemeText style={style.title}>Music Free</ThemeText>
44          <IconButton icon={'qrcode-scan'} size={rpx(36)}></IconButton>
45        </View>
46        <Card style={style.card}>
47          <Card.Title
48            title={
49              <ThemeText style={style.cardTitle}>设置</ThemeText>
50            }></Card.Title>
51          <Card.Content>
52            <ListItem
53              icon="cog-outline"
54              title="基本设置"
55              onPress={() => {
56                navigateToSetting('basic');
57              }}></ListItem>
58            <ListItem
59              icon="language-javascript"
60              title="插件设置"
61              onPress={() => {
62                navigateToSetting('plugin');
63              }}></ListItem>
64            <ListItem
65              icon="tshirt-v-outline"
66              title="主题设置"
67              onPress={() => {
68                navigateToSetting('theme');
69              }}></ListItem>
70            <ListItem icon="backup-restore" title="备份与恢复"></ListItem>
71          </Card.Content>
72        </Card>
73        <View style={style.bottom}>
74          <Button
75            onPress={() => {
76              MusicQueue.stop();
77              BackHandler.exitApp();
78            }}>
79            退出
80          </Button>
81        </View>
82      </DrawerContentScrollView>
83    </ImageBackground>
84  );
85}
86
87const style = StyleSheet.create({
88  wrapper: {
89    flex: 1,
90    backgroundColor: '#999999',
91  },
92  scrollWrapper: {
93    paddingHorizontal: rpx(24),
94    paddingTop: rpx(12),
95  },
96
97  header: {
98    height: rpx(100),
99    width: '100%',
100    flexDirection: 'row',
101    justifyContent: 'space-between',
102    alignItems: 'center',
103  },
104  title: {
105    fontSize: fontSizeConst.bigger,
106    includeFontPadding: false,
107    fontWeight: fontWeightConst.bold,
108  },
109  cardTitle: {
110    fontSize: fontSizeConst.small,
111  },
112  card: {
113    backgroundColor: '#eeeeee22',
114  },
115  bottom: {
116    height: rpx(100),
117    flexDirection: 'row',
118    alignItems: 'center',
119    justifyContent: 'flex-end',
120  },
121});
122