Rename and move types
This commit is contained in:
@@ -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,
|
||||
})
|
||||
|
||||
@@ -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[]
|
||||
|
||||
+2
-10
@@ -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}
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user