Drive-by lightbox refactors (#1659)

* Remove dead code from lightbox

* Rename imageIndex prop to initialImageIndex

* Rename currentImageIndex to imageIndex
zio/stable
dan 2023-10-10 19:07:21 +01:00 committed by GitHub
parent bc2c44cb98
commit d47ff542da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 40 deletions

View File

@ -39,29 +39,10 @@ const useImageDimensions = (image: ImageSource): Dimensions | null => {
// eslint-disable-next-line @typescript-eslint/no-shadow
const getImageDimensions = (image: ImageSource): Promise<Dimensions> => {
return new Promise(resolve => {
if (typeof image === 'number') {
const cacheKey = `${image}`
let imageDimensions = imageDimensionsCache.get(cacheKey)
if (!imageDimensions) {
const {width, height} = Image.resolveAssetSource(image)
imageDimensions = {width, height}
imageDimensionsCache.set(cacheKey, imageDimensions)
}
resolve(imageDimensions)
return
}
// @ts-ignore
if (image.uri) {
const source = image as ImageURISource
const cacheKey = source.uri as string
const imageDimensions = imageDimensionsCache.get(cacheKey)
if (imageDimensions) {
resolve(imageDimensions)
} else {

View File

@ -38,8 +38,7 @@ import {Edge, SafeAreaView} from 'react-native-safe-area-context'
type Props = {
images: ImageSource[]
keyExtractor?: (imageSrc: ImageSource, index: number) => string
imageIndex: number
initialImageIndex: number
visible: boolean
onRequestClose: () => void
presentationStyle?: ModalProps['presentationStyle']
@ -60,8 +59,7 @@ const ANIMATION_CONFIG = {
function ImageViewing({
images,
keyExtractor,
imageIndex,
initialImageIndex,
visible,
onRequestClose,
backgroundColor = DEFAULT_BG_COLOR,
@ -71,7 +69,7 @@ function ImageViewing({
const imageList = useRef<VirtualizedList<ImageSource>>(null)
const [isScaled, setIsScaled] = useState(false)
const [isDragging, setIsDragging] = useState(false)
const [currentImageIndex, setImageIndex] = useState(imageIndex)
const [imageIndex, setImageIndex] = useState(initialImageIndex)
const [headerTranslate] = useState(
() => new Animated.ValueXY(INITIAL_POSITION),
)
@ -125,10 +123,13 @@ function ImageViewing({
}, [])
const onLayout = useCallback(() => {
if (imageIndex) {
imageList.current?.scrollToIndex({index: imageIndex, animated: false})
if (initialImageIndex) {
imageList.current?.scrollToIndex({
index: initialImageIndex,
animated: false,
})
}
}, [imageList, imageIndex])
}, [imageList, initialImageIndex])
// This is a hack.
// RNGH doesn't have an easy way to express that pinch of individual items
@ -159,7 +160,7 @@ function ImageViewing({
<Animated.View style={[styles.header, {transform: headerTransform}]}>
{typeof HeaderComponent !== 'undefined' ? (
React.createElement(HeaderComponent, {
imageIndex: currentImageIndex,
imageIndex,
})
) : (
<ImageDefaultHeader onRequestClose={onRequestClose} />
@ -205,19 +206,12 @@ function ImageViewing({
setIsScaled(false)
onScroll(e)
}}
//@ts-ignore
keyExtractor={(imageSrc, index) =>
keyExtractor
? keyExtractor(imageSrc, index)
: typeof imageSrc === 'number'
? `${imageSrc}`
: imageSrc.uri
}
keyExtractor={imageSrc => imageSrc.uri}
/>
{typeof FooterComponent !== 'undefined' && (
<Animated.View style={[styles.footer, {transform: footerTransform}]}>
{React.createElement(FooterComponent, {
imageIndex: currentImageIndex,
imageIndex,
})}
</Animated.View>
)}
@ -250,7 +244,7 @@ const styles = StyleSheet.create({
})
const EnhancedImageViewing = (props: Props) => (
<ImageViewing key={props.imageIndex} {...props} />
<ImageViewing key={props.initialImageIndex} {...props} />
)
export default EnhancedImageViewing

View File

@ -26,7 +26,7 @@ export const Lightbox = observer(function Lightbox() {
return (
<ImageView
images={[{uri: opts.profileView.avatar || ''}]}
imageIndex={0}
initialImageIndex={0}
visible
onRequestClose={onClose}
FooterComponent={LightboxFooter}
@ -37,7 +37,7 @@ export const Lightbox = observer(function Lightbox() {
return (
<ImageView
images={opts.images.map(img => ({...img}))}
imageIndex={opts.index}
initialImageIndex={opts.index}
visible
onRequestClose={onClose}
FooterComponent={LightboxFooter}