2021-08-07 11:45:55 +08:00

198 lines
8.4 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React, { useMemo, useState, useEffect } from 'react'
import { StyleSheet, View, Text, ScrollView, TouchableOpacity } from 'react-native'
import { Navigation } from 'react-native-navigation'
import Button from '@/components/common/Button'
import { useGetter, useDispatch } from '@/store'
import { openUrl } from '@/utils/tools'
import { exitApp } from '@/utils/utils'
const VersionModal = ({ componentId }) => {
const theme = useGetter('common', 'theme')
const isAgreePact = useGetter('common', 'isAgreePact')
const setAgreePact = useDispatch('common', 'setAgreePact')
const checkVersion = useDispatch('common', 'checkVersion')
const [time, setTime] = useState(20)
const handleRejct = () => {
exitApp()
// Navigation.dismissOverlay(componentId)
}
const handleConfirm = () => {
if (!isAgreePact) setAgreePact(true)
checkVersion()
Navigation.dismissOverlay(componentId)
}
const openHomePage = () => {
openUrl('https://github.com/lyswhut/lx-music-mobile#readme')
}
const openLicensePage = () => {
openUrl('http://www.apache.org/licenses/LICENSE-2.0')
}
const textStyle = StyleSheet.compose(styles.text, {
color: theme.normal,
marginBottom: 10,
})
const textLinkStyle = StyleSheet.compose(styles.text, {
textDecorationLine: 'underline',
color: theme.secondary,
fontSize: 15,
})
const confirmBtn = useMemo(() => {
if (isAgreePact) return { disabled: false, text: '关闭' }
return time ? { disabled: true, text: `同意(${time}` } : { disabled: false, text: '同意' }
}, [isAgreePact, time])
useEffect(() => {
if (isAgreePact) return
const timeoutTools = {
timeout: null,
start() {
this.timeout = setTimeout(() => {
setTime(time => {
time--
if (time > 0) this.start()
return time
})
}, 1000)
},
clear() {
clearTimeout(this.timeout)
},
}
timeoutTools.start()
return () => timeoutTools.clear()
}, [])
return (
<View style={{ ...styles.centeredView }}>
<View style={styles.modalView}>
<View style={{ ...styles.header, backgroundColor: theme.secondary }}></View>
<View style={styles.main}>
<Text style={{ ...styles.title, color: theme.normal }}>许可协议</Text>
<ScrollView style={styles.content} keyboardShouldPersistTaps={'always'}>
<Text selectable style={textStyle} >本项目软件基于 <Text onPress={openLicensePage} style={textLinkStyle}>Apache License 2.0</Text> 使使使 Apache License 2.0 </Text>
<Text selectable style={textStyle} >词语约定本协议中的本软件指洛雪音乐桌面版项目使用者指签署本协议的使用者官方音乐平台指对本软件内置的包括酷我酷狗咪咕等音乐源的官方平台统称版权数据指包括但不限于图像音频名字等在内的他人拥有所属版权的数据</Text>
<Text selectable style={textStyle} ><Text style={styles.bold}>1.</Text> </Text>
<Text selectable style={textStyle} ><Text style={styles.bold}>2.</Text> 使使 <Text style={styles.bold}>24</Text> 使</Text>
<Text selectable style={textStyle} ><Text style={styles.bold}>3.</Text> </Text>
<Text selectable style={textStyle} ><Text style={styles.bold}>4.</Text> 使</Text>
<Text selectable style={textStyle} ><Text style={styles.bold}>5.</Text> 使使使使</Text>
<Text selectable style={textStyle} ><Text style={styles.bold}>6.</Text> <Text onPress={openHomePage} style={textLinkStyle}>GitHub</Text> <Text style={styles.bold}>使</Text>使使使</Text>
<Text selectable style={textStyle} ><Text style={styles.bold}>*</Text> </Text>
<Text selectable style={textStyle} ><Text style={styles.bold}>*</Text> 使</Text>
<Text selectable style={textStyle} ><Text style={styles.bold}>*</Text> </Text>
{
isAgreePact
? null
: (
<Text selectable style={{ ...styles.text, ...styles.bold, color: theme.normal }} >若你使用者接受以上协议请点击下面的接受按钮签署本协议若不接受请点击不接受后退出软件并清除本软件的所有数据</Text>
)
}
</ScrollView>
</View>
<View style={styles.btns}>
{
isAgreePact
? null
: (
<Button style={{ ...styles.btn, backgroundColor: theme.secondary45 }} onPress={handleRejct}>
<Text style={{ fontSize: 14, color: theme.secondary_5 }}>不同意</Text>
</Button>
)
}
<Button disabled={confirmBtn.disabled} style={{ ...styles.btn, backgroundColor: theme.secondary45 }} onPress={handleConfirm}>
<Text style={{ fontSize: 14, color: theme.secondary_5 }}>{confirmBtn.text}</Text>
</Button>
</View>
</View>
</View>
)
}
const styles = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0.2)',
},
modalView: {
maxWidth: '90%',
minWidth: '75%',
// minHeight: '36%',
maxHeight: '78%',
backgroundColor: 'white',
borderRadius: 4,
// shadowColor: '#000',
// shadowOffset: {
// width: 0,
// height: 2,
// },
// shadowOpacity: 0.25,
// shadowRadius: 4,
elevation: 3,
},
header: {
flexGrow: 0,
flexShrink: 0,
flexDirection: 'row',
borderTopLeftRadius: 4,
borderTopRightRadius: 4,
height: 20,
},
main: {
// flexGrow: 0,
flexShrink: 1,
marginTop: 15,
marginBottom: 20,
},
content: {
flexGrow: 0,
marginLeft: 5,
marginRight: 5,
paddingLeft: 10,
paddingRight: 10,
},
title: {
fontSize: 18,
textAlign: 'center',
marginBottom: 15,
},
part: {
marginBottom: 10,
},
text: {
fontSize: 14,
textAlignVertical: 'bottom',
},
bold: {
fontWeight: 'bold',
},
btns: {
flexDirection: 'row',
justifyContent: 'center',
paddingBottom: 15,
paddingLeft: 15,
// paddingRight: 15,
},
btn: {
flex: 1,
paddingTop: 10,
paddingBottom: 10,
paddingLeft: 10,
paddingRight: 10,
alignItems: 'center',
borderRadius: 4,
marginRight: 15,
},
})
export default VersionModal