forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Drive-by lightbox refactors (#1659)
* Remove dead code from lightbox
* Rename imageIndex prop to initialImageIndex
* Rename currentImageIndex to imageIndex
+15
-40
-19
src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts
-19
src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts
···
39
39
// eslint-disable-next-line @typescript-eslint/no-shadow
40
40
const getImageDimensions = (image: ImageSource): Promise<Dimensions> => {
41
41
return new Promise(resolve => {
42
-
if (typeof image === 'number') {
43
-
const cacheKey = `${image}`
44
-
let imageDimensions = imageDimensionsCache.get(cacheKey)
45
-
46
-
if (!imageDimensions) {
47
-
const {width, height} = Image.resolveAssetSource(image)
48
-
imageDimensions = {width, height}
49
-
imageDimensionsCache.set(cacheKey, imageDimensions)
50
-
}
51
-
52
-
resolve(imageDimensions)
53
-
54
-
return
55
-
}
56
-
57
-
// @ts-ignore
58
42
if (image.uri) {
59
43
const source = image as ImageURISource
60
-
61
44
const cacheKey = source.uri as string
62
-
63
45
const imageDimensions = imageDimensionsCache.get(cacheKey)
64
-
65
46
if (imageDimensions) {
66
47
resolve(imageDimensions)
67
48
} else {
+13
-19
src/view/com/lightbox/ImageViewing/index.tsx
+13
-19
src/view/com/lightbox/ImageViewing/index.tsx
···
38
38
39
39
type Props = {
40
40
images: ImageSource[]
41
-
keyExtractor?: (imageSrc: ImageSource, index: number) => string
42
-
imageIndex: number
41
+
initialImageIndex: number
43
42
visible: boolean
44
43
onRequestClose: () => void
45
44
presentationStyle?: ModalProps['presentationStyle']
···
60
59
61
60
function ImageViewing({
62
61
images,
63
-
keyExtractor,
64
-
imageIndex,
62
+
initialImageIndex,
65
63
visible,
66
64
onRequestClose,
67
65
backgroundColor = DEFAULT_BG_COLOR,
···
71
69
const imageList = useRef<VirtualizedList<ImageSource>>(null)
72
70
const [isScaled, setIsScaled] = useState(false)
73
71
const [isDragging, setIsDragging] = useState(false)
74
-
const [currentImageIndex, setImageIndex] = useState(imageIndex)
72
+
const [imageIndex, setImageIndex] = useState(initialImageIndex)
75
73
const [headerTranslate] = useState(
76
74
() => new Animated.ValueXY(INITIAL_POSITION),
77
75
)
···
125
123
}, [])
126
124
127
125
const onLayout = useCallback(() => {
128
-
if (imageIndex) {
129
-
imageList.current?.scrollToIndex({index: imageIndex, animated: false})
126
+
if (initialImageIndex) {
127
+
imageList.current?.scrollToIndex({
128
+
index: initialImageIndex,
129
+
animated: false,
130
+
})
130
131
}
131
-
}, [imageList, imageIndex])
132
+
}, [imageList, initialImageIndex])
132
133
133
134
// This is a hack.
134
135
// RNGH doesn't have an easy way to express that pinch of individual items
···
159
160
<Animated.View style={[styles.header, {transform: headerTransform}]}>
160
161
{typeof HeaderComponent !== 'undefined' ? (
161
162
React.createElement(HeaderComponent, {
162
-
imageIndex: currentImageIndex,
163
+
imageIndex,
163
164
})
164
165
) : (
165
166
<ImageDefaultHeader onRequestClose={onRequestClose} />
···
205
206
setIsScaled(false)
206
207
onScroll(e)
207
208
}}
208
-
//@ts-ignore
209
-
keyExtractor={(imageSrc, index) =>
210
-
keyExtractor
211
-
? keyExtractor(imageSrc, index)
212
-
: typeof imageSrc === 'number'
213
-
? `${imageSrc}`
214
-
: imageSrc.uri
215
-
}
209
+
keyExtractor={imageSrc => imageSrc.uri}
216
210
/>
217
211
{typeof FooterComponent !== 'undefined' && (
218
212
<Animated.View style={[styles.footer, {transform: footerTransform}]}>
219
213
{React.createElement(FooterComponent, {
220
-
imageIndex: currentImageIndex,
214
+
imageIndex,
221
215
})}
222
216
</Animated.View>
223
217
)}
···
250
244
})
251
245
252
246
const EnhancedImageViewing = (props: Props) => (
253
-
<ImageViewing key={props.imageIndex} {...props} />
247
+
<ImageViewing key={props.initialImageIndex} {...props} />
254
248
)
255
249
256
250
export default EnhancedImageViewing
+2
-2
src/view/com/lightbox/Lightbox.tsx
+2
-2
src/view/com/lightbox/Lightbox.tsx
···
26
26
return (
27
27
<ImageView
28
28
images={[{uri: opts.profileView.avatar || ''}]}
29
-
imageIndex={0}
29
+
initialImageIndex={0}
30
30
visible
31
31
onRequestClose={onClose}
32
32
FooterComponent={LightboxFooter}
···
37
37
return (
38
38
<ImageView
39
39
images={opts.images.map(img => ({...img}))}
40
-
imageIndex={opts.index}
40
+
initialImageIndex={opts.index}
41
41
visible
42
42
onRequestClose={onClose}
43
43
FooterComponent={LightboxFooter}