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