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