Paul Frazee
63 lines
1.4 KiB
TypeScript
63 lines
1.4 KiB
TypeScript
import React from 'react'
|
|
import {StyleSheet, TouchableOpacity, View} from 'react-native'
|
|
import {observer} from 'mobx-react-lite'
|
|
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
|
import {useStores} from '../../../state'
|
|
|
|
import * as models from '../../../state/models/shell-ui'
|
|
|
|
import * as ProfileImageLightbox from './ProfileImage'
|
|
|
|
export const Lightbox = observer(function Lightbox() {
|
|
const store = useStores()
|
|
|
|
const onClose = () => {
|
|
store.shell.closeLightbox()
|
|
}
|
|
|
|
if (!store.shell.isLightboxActive) {
|
|
return <View />
|
|
}
|
|
|
|
let element
|
|
if (store.shell.activeLightbox?.name === 'profile-image') {
|
|
element = (
|
|
<ProfileImageLightbox.Component
|
|
{...(store.shell.activeLightbox as models.ProfileImageLightbox)}
|
|
/>
|
|
)
|
|
} else {
|
|
return <View />
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<TouchableOpacity style={styles.bg} onPress={onClose} />
|
|
<TouchableOpacity style={styles.xIcon} onPress={onClose}>
|
|
<FontAwesomeIcon icon="x" size={24} style={{color: '#fff'}} />
|
|
</TouchableOpacity>
|
|
{element}
|
|
</>
|
|
)
|
|
})
|
|
|
|
const styles = StyleSheet.create({
|
|
bg: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
bottom: 0,
|
|
right: 0,
|
|
backgroundColor: '#000',
|
|
opacity: 0.9,
|
|
},
|
|
xIcon: {
|
|
position: 'absolute',
|
|
top: 30,
|
|
right: 30,
|
|
},
|
|
container: {
|
|
position: 'absolute',
|
|
},
|
|
})
|