forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Merge branch 'main' of github.com:bluesky-social/social-app into main
+36
-6
+36
-6
src/view/com/composer/photos/Gallery.tsx
+36
-6
src/view/com/composer/photos/Gallery.tsx
···
1
-
import React from 'react'
2
-
import {ImageStyle, Keyboard} from 'react-native'
1
+
import React, {useState} from 'react'
2
+
import {ImageStyle, Keyboard, LayoutChangeEvent} from 'react-native'
3
3
import {GalleryModel} from 'state/models/media/gallery'
4
4
import {observer} from 'mobx-react-lite'
5
5
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
···
8
8
import {Image} from 'expo-image'
9
9
import {Text} from 'view/com/util/text/Text'
10
10
import {openAltTextModal} from 'lib/media/alt-text'
11
+
import {Dimensions} from 'lib/media/types'
11
12
import {useStores} from 'state/index'
12
13
import {usePalette} from 'lib/hooks/usePalette'
13
14
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
14
15
15
-
interface Props {
16
+
const IMAGE_GAP = 8
17
+
18
+
interface GalleryProps {
16
19
gallery: GalleryModel
17
20
}
18
21
19
-
export const Gallery = observer(function GalleryImpl({gallery}: Props) {
22
+
export const Gallery = (props: GalleryProps) => {
23
+
const [containerInfo, setContainerInfo] = useState<Dimensions | undefined>()
24
+
25
+
const onLayout = (evt: LayoutChangeEvent) => {
26
+
const {width, height} = evt.nativeEvent.layout
27
+
setContainerInfo({
28
+
width,
29
+
height,
30
+
})
31
+
}
32
+
33
+
return (
34
+
<View onLayout={onLayout}>
35
+
{containerInfo ? (
36
+
<GalleryInner {...props} containerInfo={containerInfo} />
37
+
) : undefined}
38
+
</View>
39
+
)
40
+
}
41
+
42
+
interface GalleryInnerProps extends GalleryProps {
43
+
containerInfo: Dimensions
44
+
}
45
+
46
+
const GalleryInner = observer(function GalleryImpl({
47
+
gallery,
48
+
containerInfo,
49
+
}: GalleryInnerProps) {
20
50
const store = useStores()
21
51
const pal = usePalette('default')
22
52
const {isMobile} = useWebMediaQueries()
···
26
56
if (gallery.size === 1) {
27
57
side = 250
28
58
} else {
29
-
side = (isMobile ? 350 : 560) / gallery.size
59
+
side = (containerInfo.width - IMAGE_GAP * (gallery.size - 1)) / gallery.size
30
60
}
31
61
32
62
const imageStyle = {
···
169
199
gallery: {
170
200
flex: 1,
171
201
flexDirection: 'row',
172
-
gap: 8,
202
+
gap: IMAGE_GAP,
173
203
marginTop: 16,
174
204
},
175
205
image: {