xref: /MusicFree/src/pages/home/components/drawer/index.tsx (revision 8e47be56b0121ae1a9c00382d70902276ffca225) 
1import React, {memo} from 'react';
2import {StyleSheet, View} from 'react-native';
3import rpx from '@/utils/rpx';
4import {DrawerContentScrollView} from '@react-navigation/drawer';
5import ListItem from '@/components/base/listItem';
6import {ROUTE_PATH, useNavigate} from '@/entry/router';
7import ThemeText from '@/components/base/themeText';
8import PageBackground from '@/components/base/pageBackground';
9import DeviceInfo from 'react-native-device-info';
10import NativeUtils from '@/native/utils';
11import MusicQueue from '@/core/musicQueue';
12import {useTimingClose} from '@/utils/timingClose';
13
14import timeformat from '@/utils/timeformat';
15import {showPanel} from '@/components/panels/usePanel';
16import Divider from '@/components/base/divider';
17
18const ITEM_HEIGHT = rpx(108);
19function HomeDrawer(props: any) {
20    const navigate = useNavigate();
21    function navigateToSetting(settingType: string) {
22        navigate(ROUTE_PATH.SETTING, {
23            type: settingType,
24        });
25    }
26
27    const basicSetting = [
28        {
29            icon: 'cog-outline',
30            title: '基本设置',
31            onPress: () => {
32                navigateToSetting('basic');
33            },
34        },
35        {
36            icon: 'language-javascript',
37            title: '插件设置',
38            onPress: () => {
39                navigateToSetting('plugin');
40            },
41        },
42        {
43            icon: 'tshirt-v-outline',
44            title: '主题设置',
45            onPress: () => {
46                navigateToSetting('theme');
47            },
48        },
49    ] as const;
50
51    const otherSetting = [
52        {
53            icon: 'backup-restore',
54            title: '备份与恢复',
55            onPress: () => {
56                navigateToSetting('backup');
57            },
58        },
59        {
60            icon: 'information-outline',
61            title: '关于',
62            onPress: () => {
63                navigateToSetting('about');
64            },
65        },
66    ] as const;
67
68    return (
69        <>
70            <PageBackground />
71            <DrawerContentScrollView {...[props]} style={style.scrollWrapper}>
72                <View style={style.header}>
73                    <ThemeText fontSize="appbar" fontWeight="bold">
74                        {DeviceInfo.getApplicationName()}
75                    </ThemeText>
76                    {/* <IconButton icon={'qrcode-scan'} size={rpx(36)} /> */}
77                </View>
78                <View style={style.card}>
79                    <ListItem withHorizonalPadding heightType="small">
80                        <ListItem.ListItemText
81                            fontSize="subTitle"
82                            fontWeight="bold">
83                            设置
84                        </ListItem.ListItemText>
85                    </ListItem>
86                    {basicSetting.map(item => (
87                        <ListItem
88                            withHorizonalPadding
89                            key={item.title}
90                            onPress={item.onPress}>
91                            <ListItem.ListItemIcon
92                                icon={item.icon}
93                                width={rpx(48)}
94                            />
95                            <ListItem.Content title={item.title} />
96                        </ListItem>
97                    ))}
98                </View>
99                <View style={style.card}>
100                    <ListItem withHorizonalPadding heightType="small">
101                        <ListItem.ListItemText
102                            fontSize="subTitle"
103                            fontWeight="bold">
104                            其他
105                        </ListItem.ListItemText>
106                    </ListItem>
107                    <CountDownItem />
108                    {otherSetting.map(item => (
109                        <ListItem
110                            withHorizonalPadding
111                            key={item.title}
112                            onPress={item.onPress}>
113                            <ListItem.ListItemIcon
114                                icon={item.icon}
115                                width={rpx(48)}
116                            />
117                            <ListItem.Content title={item.title} />
118                        </ListItem>
119                    ))}
120                </View>
121
122                <Divider />
123                <ListItem
124                    withHorizonalPadding
125                    onPress={async () => {
126                        await MusicQueue.reset();
127                        NativeUtils.exitApp();
128                    }}>
129                    <ListItem.ListItemIcon icon={'power'} width={rpx(48)} />
130                    <ListItem.Content title={'退出应用'} />
131                </ListItem>
132            </DrawerContentScrollView>
133        </>
134    );
135}
136
137export default memo(HomeDrawer, () => true);
138
139const style = StyleSheet.create({
140    wrapper: {
141        flex: 1,
142        backgroundColor: '#999999',
143    },
144    scrollWrapper: {
145        paddingTop: rpx(12),
146    },
147
148    header: {
149        height: rpx(120),
150        width: '100%',
151        flexDirection: 'row',
152        justifyContent: 'space-between',
153        alignItems: 'center',
154        marginLeft: rpx(24),
155    },
156    card: {
157        marginBottom: rpx(24),
158    },
159    cardContent: {
160        paddingHorizontal: 0,
161    },
162
163    /** 倒计时 */
164    countDownText: {
165        height: ITEM_HEIGHT,
166        textAlignVertical: 'center',
167    },
168});
169
170function _CountDownItem() {
171    const countDown = useTimingClose();
172
173    return (
174        <ListItem
175            withHorizonalPadding
176            onPress={() => {
177                showPanel('TimingClose');
178            }}>
179            <ListItem.ListItemIcon icon="timer-outline" width={rpx(48)} />
180            <ListItem.Content title="定时关闭" />
181            <ListItem.ListItemText position="right" fontSize="subTitle">
182                {countDown ? timeformat(countDown) : ''}
183            </ListItem.ListItemText>
184        </ListItem>
185    );
186}
187
188const CountDownItem = memo(_CountDownItem, () => true);
189