Rename and move types

This commit is contained in:
Dan Abramov
2023-10-05 23:34:45 +01:00
parent fec6fdae2b
commit cdf57803d9
8 changed files with 18 additions and 35 deletions
@@ -21,10 +21,9 @@ import {Image} from 'expo-image'
import useImageDimensions from '../../hooks/useImageDimensions'
import usePanResponder from '../../hooks/usePanResponder'
import {getImageStyles, getImageTransform} from '../../utils'
import {ImageSource} from '../../@types'
import {ImageLoading} from './ImageLoading'
import type {ImageSource} from '../../types'
const SWIPE_CLOSE_OFFSET = 75
const SWIPE_CLOSE_VELOCITY = 1.75
@@ -20,12 +20,10 @@ import {
TouchableWithoutFeedback,
} from 'react-native'
import {Image} from 'expo-image'
import useImageDimensions from '../../hooks/useImageDimensions'
import {getImageStyles, getImageTransform} from '../../utils'
import {ImageSource} from '../../@types'
import {ImageLoading} from './ImageLoading'
import type {ImageSource, Size} from '../../types'
const DOUBLE_TAP_DELAY = 300
const SWIPE_CLOSE_OFFSET = 75
@@ -173,7 +171,7 @@ const styles = StyleSheet.create({
})
const getZoomRectAfterDoubleTap = (
imageDimensions: {width: number; height: number} | null,
imageDimensions: Size | null,
touchX: number,
touchY: number,
): {
@@ -2,7 +2,7 @@
import React from 'react'
import {View} from 'react-native'
import {ImageSource} from '../../@types'
import type {ImageSource} from '../../types'
type Props = {
imageSrc: ImageSource
@@ -8,7 +8,7 @@
import {useEffect, useState} from 'react'
import {Image, ImageURISource} from 'react-native'
import {Dimensions, ImageSource} from '../@types'
import type {ImageSource, Size} from '../types'
const CACHE_SIZE = 50
@@ -33,11 +33,11 @@ const createCache = (cacheSize: number) => ({
const imageDimensionsCache = createCache(CACHE_SIZE)
const useImageDimensions = (image: ImageSource): Dimensions | null => {
const [dimensions, setDimensions] = useState<Dimensions | null>(null)
const useImageDimensions = (image: ImageSource): Size | null => {
const [dimensions, setDimensions] = useState<Size | null>(null)
// eslint-disable-next-line @typescript-eslint/no-shadow
const getImageDimensions = (image: ImageSource): Promise<Dimensions> => {
const getImageDimensions = (image: ImageSource): Promise<Size> => {
return new Promise(resolve => {
if (typeof image === 'number') {
const cacheKey = `${image}`
@@ -17,8 +17,8 @@ import {
PanResponderGestureState,
} from 'react-native'
import {Position} from '../@types'
import {getImageTranslate} from '../utils'
import type {Position, Size} from '../types'
const SCREEN = Dimensions.get('window')
const SCREEN_WIDTH = SCREEN.width
@@ -402,8 +402,8 @@ const usePanResponder = ({
const getImageDimensionsByTranslate = (
translate: Position,
screen: {width: number; height: number},
): {width: number; height: number} => ({
screen: Size,
): Size => ({
width: screen.width - translate.x * 2,
height: screen.height - translate.y * 2,
})
+1 -1
View File
@@ -31,8 +31,8 @@ import {ModalsContainer} from '../../modals/Modal'
import ImageItem from './components/ImageItem/ImageItem'
import ImageDefaultHeader from './components/ImageDefaultHeader'
import {ImageSource} from './@types'
import {Edge, SafeAreaView} from 'react-native-safe-area-context'
import type {ImageSource} from './types'
type Props = {
images: ImageSource[]
@@ -6,14 +6,6 @@
*
*/
export type Dimensions = {
width: number
height: number
}
export type Position = {
x: number
y: number
}
export type ImageSource = {uri: string; alt?: string}
export type Size = {width: number; height: number}
export type Position = {x: number; y: number}
+4 -10
View File
@@ -7,12 +7,9 @@
*/
import {Animated} from 'react-native'
import {Dimensions, Position} from './@types'
import type {Size, Position} from './types'
export const getImageTransform = (
image: Dimensions | null,
screen: Dimensions,
) => {
export const getImageTransform = (image: Size | null, screen: Size) => {
if (!image?.width || !image?.height) {
return [] as const
}
@@ -26,7 +23,7 @@ export const getImageTransform = (
}
export const getImageStyles = (
image: Dimensions | null,
image: Size | null,
translate: Animated.ValueXY,
scale?: Animated.Value,
) => {
@@ -48,10 +45,7 @@ export const getImageStyles = (
}
}
export const getImageTranslate = (
image: Dimensions,
screen: Dimensions,
): Position => {
export const getImageTranslate = (image: Size, screen: Size): Position => {
const getTranslateForAxis = (axis: 'x' | 'y'): number => {
const imageSize = axis === 'x' ? image.width : image.height
const screenSize = axis === 'x' ? screen.width : screen.height