142 lines
3.4 KiB
JavaScript
142 lines
3.4 KiB
JavaScript
import { Portal } from '@gorhom/portal'
|
|
import { BlurView } from 'expo-blur'
|
|
import React, { useEffect, useMemo } from 'react'
|
|
import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
|
|
|
|
import { Palette } from '../../styles'
|
|
import { FONT_FAMILY } from '../../styles/Fonts'
|
|
import QrCode from '../QrCode'
|
|
|
|
const ShareQrModal = ({ visible, onClose, url, title = 'Partage Musicland avec tes amis' }) => {
|
|
const shareUrl = useMemo(() => url, [url])
|
|
|
|
useEffect(() => {
|
|
console.log('share.qr.modal.state', {
|
|
visible,
|
|
url: shareUrl,
|
|
})
|
|
}, [shareUrl, visible])
|
|
|
|
if (!visible) {
|
|
return null
|
|
}
|
|
|
|
const blurIntensity = Platform.select({ ios: 40, android: 40, default: 20 })
|
|
|
|
return (
|
|
<Portal>
|
|
<View style={styles.overlay}>
|
|
<Pressable onPress={onClose} accessibilityRole="button" style={styles.backdrop} />
|
|
|
|
<View style={styles.centerWrapper} pointerEvents="box-none">
|
|
<BlurView
|
|
intensity={blurIntensity}
|
|
tint="dark"
|
|
style={styles.modalCard}
|
|
experimentalBlurMethod="dimezisBlurView"
|
|
>
|
|
{/* <Pressable
|
|
onPress={onClose}
|
|
style={styles.closeButton}
|
|
hitSlop={10}
|
|
>
|
|
<Feather name="x" size={20} color={Palette.white} />
|
|
</Pressable> */}
|
|
|
|
<View style={styles.content}>
|
|
<Text style={styles.title}>{title}</Text>
|
|
<Text style={styles.subtitle}>Partage Musicland à tes amis.</Text>
|
|
|
|
<View style={styles.qrWrapper}>
|
|
<QrCode value={shareUrl} size={220} backgroundColor="transparent" />
|
|
</View>
|
|
|
|
<Text numberOfLines={1} ellipsizeMode="middle" style={styles.linkText}>
|
|
{shareUrl}
|
|
</Text>
|
|
</View>
|
|
</BlurView>
|
|
</View>
|
|
</View>
|
|
</Portal>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
overlay: {
|
|
...StyleSheet.absoluteFillObject,
|
|
zIndex: 200,
|
|
...Platform.select({
|
|
web: {
|
|
position: 'fixed',
|
|
},
|
|
}),
|
|
},
|
|
backdrop: {
|
|
...StyleSheet.absoluteFillObject,
|
|
backgroundColor: 'rgba(0, 0, 0, 0.65)',
|
|
...Platform.select({
|
|
web: {
|
|
position: 'fixed',
|
|
},
|
|
}),
|
|
},
|
|
centerWrapper: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
padding: 24,
|
|
},
|
|
modalCard: {
|
|
width: 360,
|
|
maxWidth: '90%',
|
|
borderRadius: 28,
|
|
overflow: 'hidden',
|
|
paddingHorizontal: 24,
|
|
paddingVertical: 32,
|
|
backgroundColor: Palette.glass,
|
|
},
|
|
closeButton: {
|
|
position: 'absolute',
|
|
top: 18,
|
|
right: 18,
|
|
width: 36,
|
|
height: 36,
|
|
borderRadius: 18,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: 'rgba(255, 255, 255, 0.12)',
|
|
},
|
|
content: {
|
|
alignItems: 'center',
|
|
gap: 18,
|
|
},
|
|
title: {
|
|
fontSize: 20,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.HelveticaNeueMedium,
|
|
},
|
|
subtitle: {
|
|
fontSize: 14,
|
|
color: Palette.white,
|
|
opacity: 0.8,
|
|
textAlign: 'center',
|
|
fontFamily: FONT_FAMILY.InterRegular,
|
|
paddingHorizontal: 8,
|
|
},
|
|
qrWrapper: {
|
|
padding: 16,
|
|
borderRadius: 24,
|
|
backgroundColor: 'rgba(255, 255, 255, 0.08)',
|
|
},
|
|
linkText: {
|
|
fontSize: 13,
|
|
color: Palette.white,
|
|
opacity: 0.9,
|
|
textAlign: 'center',
|
|
fontFamily: FONT_FAMILY.InterMedium,
|
|
},
|
|
})
|
|
|
|
export default ShareQrModal
|