xref: /MusicFree/src/components/dialogs/components/checkStorage.tsx (revision 819a9075ec97c73412fbf94430d3065e57d52b4e) 
1import React, { useState } from "react";
2import ThemeText from "@/components/base/themeText";
3import { StyleSheet, View } from "react-native";
4import rpx, { vh } from "@/utils/rpx";
5import { ScrollView, TouchableOpacity } from "react-native-gesture-handler";
6import { hideDialog } from "../useDialog";
7import Checkbox from "@/components/base/checkbox";
8import Dialog from "./base";
9import PersistStatus from "@/core/persistStatus.ts";
10import NativeUtils from "@/native/utils";
11
12export default function CheckStorage() {
13    const [skipState, setSkipState] = useState(false);
14
15    const onCancel = () => {
16        if (skipState) {
17            PersistStatus.set('app.skipBootstrapStorageDialog', true);
18        }
19        hideDialog();
20    };
21
22    return (
23        <Dialog onDismiss={onCancel}>
24            <Dialog.Title stringContent>存储权限</Dialog.Title>
25            <ScrollView style={styles.scrollView}>
26                <ThemeText style={styles.item}>
27                    MusicFree
28                    需要文件读写权限来进行歌单备份到本地、歌曲下载等操作。
29                </ThemeText>
30                <ThemeText style={styles.item}>
31                    点击「去授予权限」跳转至设置界面授予文件管理权限。
32                </ThemeText>
33                <ThemeText style={styles.item}>
34                    如果您不需要备份歌单或者下载歌曲，您也可以暂时不授予此权限。
35                </ThemeText>
36                <ThemeText style={styles.item}>
37                    您可以随时在侧边栏「权限管理」-{'>'}
38                    「文件读写权限」授予或取消授予权限。
39                </ThemeText>
40            </ScrollView>
41
42            <TouchableOpacity
43                style={styles.checkBox}
44                onPress={() => {
45                    setSkipState(state => !state);
46                }}>
47                <View style={styles.checkboxGroup}>
48                    <Checkbox checked={skipState} />
49                    <ThemeText style={styles.checkboxHint}>不再提示</ThemeText>
50                </View>
51            </TouchableOpacity>
52
53            <Dialog.Actions
54                actions={[
55                    {
56                        title: '取消',
57                        type: 'normal',
58                        onPress: onCancel,
59                    },
60                    {
61                        title: '去授予权限',
62                        type: 'primary',
63                        onPress: () => {
64                            NativeUtils.requestStoragePermission();
65                            hideDialog();
66                        },
67                    },
68                ]}
69            />
70        </Dialog>
71    );
72}
73
74const styles = StyleSheet.create({
75    item: {
76        marginBottom: rpx(20),
77        lineHeight: rpx(36),
78    },
79
80    scrollView: {
81        maxHeight: vh(40),
82        paddingHorizontal: rpx(26),
83    },
84    checkBox: {
85        marginHorizontal: rpx(24),
86        marginVertical: rpx(36),
87    },
88    checkboxGroup: {
89        flexDirection: 'row',
90        alignItems: 'center',
91    },
92    checkboxHint: {
93        marginLeft: rpx(12),
94    },
95});
96