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 {
Image,
TouchableOpacity,
TouchableWithoutFeedback,
StyleSheet,
View,
} from 'react-native'
import {observer} from 'mobx-react-lite'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {useStores} from 'state/index'
import * as models from 'state/models/shell-ui'
import {colors} from 'lib/styles'
interface Img {
uri: string
}
export const Lightbox = observer(function Lightbox() {
const store = useStores()
if (!store.shell.isLightboxActive) {
return null
}
const onClose = () => store.shell.closeLightbox()
let imgs: Img[] | undefined
if (store.shell.activeLightbox?.name === 'profile-image') {
const opts = store.shell.activeLightbox as models.ProfileImageLightbox
if (opts.profileView.avatar) {
imgs = [{uri: opts.profileView.avatar}]
}
} else if (store.shell.activeLightbox?.name === 'images') {
const opts = store.shell.activeLightbox as models.ImagesLightbox
imgs = opts.uris.map(uri => ({uri}))
}
if (!imgs) {
return null
}
return <LightboxInner imgs={imgs} onClose={onClose} />
})
function LightboxInner({imgs, onClose}: {imgs: Img[]; onClose: () => void}) {
const [index, setIndex] = React.useState<number>(0)
const canGoLeft = index >= 1
const canGoRight = index < imgs.length - 1
const onPressLeft = () => {
if (canGoLeft) {
setIndex(index - 1)
}
}
const onPressRight = () => {
if (canGoRight) {
setIndex(index + 1)
}
}
return (
<TouchableWithoutFeedback onPress={onClose}>
<View style={styles.mask}>
<Image source={imgs[index]} style={styles.image} />
{canGoLeft && (
<TouchableOpacity
onPress={onPressLeft}
style={[styles.btn, styles.leftBtn]}>
<FontAwesomeIcon icon="angle-left" style={styles.icon} size={40} />
</TouchableOpacity>
)}
{canGoRight && (
<TouchableOpacity
onPress={onPressRight}
style={[styles.btn, styles.rightBtn]}>
<FontAwesomeIcon icon="angle-right" style={styles.icon} size={40} />
</TouchableOpacity>
)}
</View>
</TouchableWithoutFeedback>
)
}
const styles = StyleSheet.create({
mask: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
backgroundColor: '#000c',
alignItems: 'center',
justifyContent: 'center',
},
image: {
width: '100%',
height: '100%',
resizeMode: 'contain',
},
icon: {
color: colors.white,
},
btn: {
position: 'absolute',
backgroundColor: '#000',
width: 50,
height: 50,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 25,
},
leftBtn: {
left: 30,
top: '50%',
},
rightBtn: {
position: 'absolute',
right: 30,
top: '50%',
},
})
|
