From cdf57803d9ada41dff9d063b2b91afdba7a15937 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 5 Oct 2023 23:34:45 +0100 Subject: [PATCH] Rename and move types --- .../components/ImageItem/ImageItem.android.tsx | 3 +-- .../components/ImageItem/ImageItem.ios.tsx | 6 ++---- .../components/ImageItem/ImageItem.tsx | 2 +- .../ImageViewing/hooks/useImageDimensions.ts | 8 ++++---- .../lightbox/ImageViewing/hooks/usePanResponder.ts | 6 +++--- src/view/com/lightbox/ImageViewing/index.tsx | 2 +- .../ImageViewing/{@types/index.ts => types.ts} | 12 ++---------- src/view/com/lightbox/ImageViewing/utils.ts | 14 ++++---------- 8 files changed, 18 insertions(+), 35 deletions(-) rename src/view/com/lightbox/ImageViewing/{@types/index.ts => types.ts} (68%) diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx index 927657baf2..36295e0f0b 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx @@ -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 diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx index f379df22f1..89f683dc9b 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx @@ -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, ): { diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx index 82ee86d7d6..6fa4f19266 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx @@ -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 diff --git a/src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts b/src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts index 7f0851af3b..14660f7ee0 100644 --- a/src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts +++ b/src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts @@ -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(null) +const useImageDimensions = (image: ImageSource): Size | null => { + const [dimensions, setDimensions] = useState(null) // eslint-disable-next-line @typescript-eslint/no-shadow - const getImageDimensions = (image: ImageSource): Promise => { + const getImageDimensions = (image: ImageSource): Promise => { return new Promise(resolve => { if (typeof image === 'number') { const cacheKey = `${image}` diff --git a/src/view/com/lightbox/ImageViewing/hooks/usePanResponder.ts b/src/view/com/lightbox/ImageViewing/hooks/usePanResponder.ts index 85454e37e7..11d91c2050 100644 --- a/src/view/com/lightbox/ImageViewing/hooks/usePanResponder.ts +++ b/src/view/com/lightbox/ImageViewing/hooks/usePanResponder.ts @@ -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, }) diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx index 3b659e2db7..433aea84c3 100644 --- a/src/view/com/lightbox/ImageViewing/index.tsx +++ b/src/view/com/lightbox/ImageViewing/index.tsx @@ -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[] diff --git a/src/view/com/lightbox/ImageViewing/@types/index.ts b/src/view/com/lightbox/ImageViewing/types.ts similarity index 68% rename from src/view/com/lightbox/ImageViewing/@types/index.ts rename to src/view/com/lightbox/ImageViewing/types.ts index 8400e12e41..ac44419c20 100644 --- a/src/view/com/lightbox/ImageViewing/@types/index.ts +++ b/src/view/com/lightbox/ImageViewing/types.ts @@ -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} diff --git a/src/view/com/lightbox/ImageViewing/utils.ts b/src/view/com/lightbox/ImageViewing/utils.ts index 03f28d61a9..54b1786ae0 100644 --- a/src/view/com/lightbox/ImageViewing/utils.ts +++ b/src/view/com/lightbox/ImageViewing/utils.ts @@ -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