1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
import React from 'react'
import {
Animated,
StyleSheet,
TouchableWithoutFeedback,
useWindowDimensions,
View,
} from 'react-native'
import {observer} from 'mobx-react-lite'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {Swipe, Dir} from '../util/gestures/Swipe'
import {useStores} from '../../../state'
import {useAnimatedValue} from '../../lib/useAnimatedValue'
import * as models from '../../../state/models/shell-ui'
import * as ProfileImageLightbox from './ProfileImage'
import * as ImageLightbox from './Image'
import * as ImagesLightbox from './Images'
export const Lightbox = observer(function Lightbox() {
const store = useStores()
const winDim = useWindowDimensions()
const panX = useAnimatedValue(0)
const panY = useAnimatedValue(0)
const onClose = () => {
store.shell.closeLightbox()
}
const onSwipeEnd = (dir: Dir) => {
if (dir === Dir.Up || dir === Dir.Down) {
onClose()
} else if (dir === Dir.Left) {
store.shell.activeLightbox?.onSwipeLeft()
} else if (dir === Dir.Right) {
store.shell.activeLightbox?.onSwipeRight()
}
}
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 if (store.shell.activeLightbox?.name === 'image') {
element = (
<ImageLightbox.Component
{...(store.shell.activeLightbox as models.ImageLightbox)}
/>
)
} else if (store.shell.activeLightbox?.name === 'images') {
element = (
<ImagesLightbox.Component
{...(store.shell.activeLightbox as models.ImagesLightbox)}
/>
)
} else {
return <View />
}
const translateX = Animated.multiply(panX, winDim.width * -1)
const translateY = Animated.multiply(panY, winDim.height * -1)
const swipeTransform = {transform: [{translateX}, {translateY}]}
const swipeOpacity = {
opacity: panY.interpolate({
inputRange: [-1, 0, 1],
outputRange: [0, 1, 0],
}),
}
return (
<View style={StyleSheet.absoluteFill}>
<Swipe
panX={panX}
panY={panY}
swipeEnabled
canSwipeLeft={store.shell.activeLightbox.canSwipeLeft}
canSwipeRight={store.shell.activeLightbox.canSwipeRight}
canSwipeUp
canSwipeDown
hasPriority
onSwipeEnd={onSwipeEnd}>
<TouchableWithoutFeedback onPress={onClose}>
<Animated.View style={[styles.bg, swipeOpacity]} />
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={onClose}>
<View style={styles.xIcon}>
<FontAwesomeIcon icon="x" size={24} style={{color: '#fff'}} />
</View>
</TouchableWithoutFeedback>
<Animated.View style={swipeTransform}>{element}</Animated.View>
</Swipe>
</View>
)
})
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',
},
})
|
