xref: /MusicFree/src/pages/home/components/drawer/index.tsx (revision 6bdd7a42b825ecb52ce59cdaf1e4f49f696710ae) 
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 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={() => {
126                        // 仅安卓生效
127                        BackHandler.exitApp();
128                    }}>
129                    <ListItem.ListItemIcon icon={'home-outline'} width={rpx(48)} />
130                    <ListItem.Content title={'返回桌面'} />
131                </ListItem>
132                <ListItem
133                    withHorizonalPadding
134                    onPress={async () => {
135                        await MusicQueue.reset();
136                        NativeUtils.exitApp();
137                    }}>
138                    <ListItem.ListItemIcon icon={'power'} width={rpx(48)} />
139                    <ListItem.Content title={'退出应用'} />
140                </ListItem>
141            </DrawerContentScrollView>
142        </>
143    );
144}
145
146export default memo(HomeDrawer, () => true);
147
148const style = StyleSheet.create({
149    wrapper: {
150        flex: 1,
151        backgroundColor: '#999999',
152    },
153    scrollWrapper: {
154        paddingTop: rpx(12),
155    },
156
157    header: {
158        height: rpx(120),
159        width: '100%',
160        flexDirection: 'row',
161        justifyContent: 'space-between',
162        alignItems: 'center',
163        marginLeft: rpx(24),
164    },
165    card: {
166        marginBottom: rpx(24),
167    },
168    cardContent: {
169        paddingHorizontal: 0,
170    },
171
172    /** 倒计时 */
173    countDownText: {
174        height: ITEM_HEIGHT,
175        textAlignVertical: 'center',
176    },
177});
178
179function _CountDownItem() {
180    const countDown = useTimingClose();
181
182    return (
183        <ListItem
184            withHorizonalPadding
185            onPress={() => {
186                showPanel('TimingClose');
187            }}>
188            <ListItem.ListItemIcon icon="timer-outline" width={rpx(48)} />
189            <ListItem.Content title="定时关闭" />
190            <ListItem.ListItemText position="right" fontSize="subTitle">
191                {countDown ? timeformat(countDown) : ''}
192            </ListItem.ListItemText>
193        </ListItem>
194    );
195}
196
197const CountDownItem = memo(_CountDownItem, () => true);
198