xref: /MusicFree/src/pages/home/components/drawer/index.tsx (revision 410a159129b1f6a7a1f44fde7bfad9a46f91e161) 
1import React, {memo} from 'react';
2import {StyleSheet, View, BackHandler, Platform} 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 {useTimingClose} from '@/utils/timingClose';
12import timeformat from '@/utils/timeformat';
13import {showPanel} from '@/components/panels/usePanel';
14import Divider from '@/components/base/divider';
15import TrackPlayer from '@/core/trackPlayer';
16import deviceInfoModule from 'react-native-device-info';
17import {checkUpdateAndShowResult} from '@/hooks/useCheckUpdate';
18
19const ITEM_HEIGHT = rpx(108);
20function HomeDrawer(props: any) {
21    const navigate = useNavigate();
22    function navigateToSetting(settingType: string) {
23        navigate(ROUTE_PATH.SETTING, {
24            type: settingType,
25        });
26    }
27
28    const basicSetting = [
29        {
30            icon: 'cog-outline',
31            title: '基本设置',
32            onPress: () => {
33                navigateToSetting('basic');
34            },
35        },
36        {
37            icon: 'language-javascript',
38            title: '插件管理',
39            onPress: () => {
40                navigateToSetting('plugin');
41            },
42        },
43        {
44            icon: 'tshirt-v-outline',
45            title: '主题设置',
46            onPress: () => {
47                navigateToSetting('theme');
48            },
49        },
50    ] as const;
51
52    const otherSetting = [
53        {
54            icon: 'backup-restore',
55            title: '备份与恢复',
56            onPress: () => {
57                navigateToSetting('backup');
58            },
59        },
60    ];
61
62    if (Platform.OS === 'android') {
63        otherSetting.push({
64            icon: 'cellphone-key',
65            title: '权限管理',
66            onPress: () => {
67                navigate(ROUTE_PATH.PERMISSIONS);
68            },
69        });
70    }
71
72    return (
73        <>
74            <PageBackground />
75            <DrawerContentScrollView {...[props]} style={style.scrollWrapper}>
76                <View style={style.header}>
77                    <ThemeText fontSize="appbar" fontWeight="bold">
78                        {DeviceInfo.getApplicationName()}
79                    </ThemeText>
80                    {/* <IconButton icon={'qrcode-scan'} size={rpx(36)} /> */}
81                </View>
82                <View style={style.card}>
83                    <ListItem withHorizonalPadding heightType="smallest">
84                        <ListItem.ListItemText
85                            fontSize="subTitle"
86                            fontWeight="bold">
87                            设置
88                        </ListItem.ListItemText>
89                    </ListItem>
90                    {basicSetting.map(item => (
91                        <ListItem
92                            withHorizonalPadding
93                            key={item.title}
94                            onPress={item.onPress}>
95                            <ListItem.ListItemIcon
96                                icon={item.icon}
97                                width={rpx(48)}
98                            />
99                            <ListItem.Content title={item.title} />
100                        </ListItem>
101                    ))}
102                </View>
103                <View style={style.card}>
104                    <ListItem withHorizonalPadding heightType="smallest">
105                        <ListItem.ListItemText
106                            fontSize="subTitle"
107                            fontWeight="bold">
108                            其他
109                        </ListItem.ListItemText>
110                    </ListItem>
111                    <CountDownItem />
112                    {otherSetting.map(item => (
113                        <ListItem
114                            withHorizonalPadding
115                            key={item.title}
116                            onPress={item.onPress}>
117                            <ListItem.ListItemIcon
118                                icon={item.icon}
119                                width={rpx(48)}
120                            />
121                            <ListItem.Content title={item.title} />
122                        </ListItem>
123                    ))}
124                </View>
125
126                <View style={style.card}>
127                    <ListItem withHorizonalPadding heightType="smallest">
128                        <ListItem.ListItemText
129                            fontSize="subTitle"
130                            fontWeight="bold">
131                            软件
132                        </ListItem.ListItemText>
133                    </ListItem>
134
135                    <ListItem
136                        withHorizonalPadding
137                        key={'update'}
138                        onPress={() => {
139                            checkUpdateAndShowResult(true);
140                        }}>
141                        <ListItem.ListItemIcon
142                            icon={'update'}
143                            width={rpx(48)}
144                        />
145                        <ListItem.Content title="检查更新" />
146                        <ListItem.ListItemText
147                            position="right"
148                            fontSize="subTitle">
149                            {`当前版本: ${deviceInfoModule.getVersion()}`}
150                        </ListItem.ListItemText>
151                    </ListItem>
152                    <ListItem
153                        withHorizonalPadding
154                        key={'about'}
155                        onPress={() => {
156                            navigateToSetting('about');
157                        }}>
158                        <ListItem.ListItemIcon
159                            icon={'information-outline'}
160                            width={rpx(48)}
161                        />
162                        <ListItem.Content
163                            title={`关于 ${deviceInfoModule.getApplicationName()}`}
164                        />
165                    </ListItem>
166                </View>
167
168                <Divider />
169                <ListItem
170                    withHorizonalPadding
171                    onPress={() => {
172                        // 仅安卓生效
173                        BackHandler.exitApp();
174                    }}>
175                    <ListItem.ListItemIcon
176                        icon={'home-outline'}
177                        width={rpx(48)}
178                    />
179                    <ListItem.Content title={'返回桌面'} />
180                </ListItem>
181                <ListItem
182                    withHorizonalPadding
183                    onPress={async () => {
184                        await TrackPlayer.reset();
185                        NativeUtils.exitApp();
186                    }}>
187                    <ListItem.ListItemIcon icon={'power'} width={rpx(48)} />
188                    <ListItem.Content title={'退出应用'} />
189                </ListItem>
190            </DrawerContentScrollView>
191        </>
192    );
193}
194
195export default memo(HomeDrawer, () => true);
196
197const style = StyleSheet.create({
198    wrapper: {
199        flex: 1,
200        backgroundColor: '#999999',
201    },
202    scrollWrapper: {
203        paddingTop: rpx(12),
204    },
205
206    header: {
207        height: rpx(120),
208        width: '100%',
209        flexDirection: 'row',
210        justifyContent: 'space-between',
211        alignItems: 'center',
212        marginLeft: rpx(24),
213    },
214    card: {
215        marginBottom: rpx(24),
216    },
217    cardContent: {
218        paddingHorizontal: 0,
219    },
220
221    /** 倒计时 */
222    countDownText: {
223        height: ITEM_HEIGHT,
224        textAlignVertical: 'center',
225    },
226});
227
228function _CountDownItem() {
229    const countDown = useTimingClose();
230
231    return (
232        <ListItem
233            withHorizonalPadding
234            onPress={() => {
235                showPanel('TimingClose');
236            }}>
237            <ListItem.ListItemIcon icon="timer-outline" width={rpx(48)} />
238            <ListItem.Content title="定时关闭" />
239            <ListItem.ListItemText position="right" fontSize="subTitle">
240                {countDown ? timeformat(countDown) : ''}
241            </ListItem.ListItemText>
242        </ListItem>
243    );
244}
245
246const CountDownItem = memo(_CountDownItem, () => true);
247