Delete unused long press gesture
This commit is contained in:
@@ -36,8 +36,6 @@ type Props = {
|
|||||||
imageSrc: ImageSource
|
imageSrc: ImageSource
|
||||||
onRequestClose: () => void
|
onRequestClose: () => void
|
||||||
onZoom: (isZoomed: boolean) => void
|
onZoom: (isZoomed: boolean) => void
|
||||||
onLongPress: (image: ImageSource) => void
|
|
||||||
delayLongPress: number
|
|
||||||
swipeToCloseEnabled?: boolean
|
swipeToCloseEnabled?: boolean
|
||||||
doubleTapToZoomEnabled?: boolean
|
doubleTapToZoomEnabled?: boolean
|
||||||
}
|
}
|
||||||
@@ -48,8 +46,6 @@ const ImageItem = ({
|
|||||||
imageSrc,
|
imageSrc,
|
||||||
onZoom,
|
onZoom,
|
||||||
onRequestClose,
|
onRequestClose,
|
||||||
onLongPress,
|
|
||||||
delayLongPress,
|
|
||||||
swipeToCloseEnabled = true,
|
swipeToCloseEnabled = true,
|
||||||
doubleTapToZoomEnabled = true,
|
doubleTapToZoomEnabled = true,
|
||||||
}: Props) => {
|
}: Props) => {
|
||||||
@@ -72,17 +68,11 @@ const ImageItem = ({
|
|||||||
[onZoom],
|
[onZoom],
|
||||||
)
|
)
|
||||||
|
|
||||||
const onLongPressHandler = useCallback(() => {
|
|
||||||
onLongPress(imageSrc)
|
|
||||||
}, [imageSrc, onLongPress])
|
|
||||||
|
|
||||||
const [panHandlers, scaleValue, translateValue] = usePanResponder({
|
const [panHandlers, scaleValue, translateValue] = usePanResponder({
|
||||||
initialScale: scale || 1,
|
initialScale: scale || 1,
|
||||||
initialTranslate: translate || {x: 0, y: 0},
|
initialTranslate: translate || {x: 0, y: 0},
|
||||||
onZoom: onZoomPerformed,
|
onZoom: onZoomPerformed,
|
||||||
doubleTapToZoomEnabled,
|
doubleTapToZoomEnabled,
|
||||||
onLongPress: onLongPressHandler,
|
|
||||||
delayLongPress,
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const imagesStyles = getImageStyles(
|
const imagesStyles = getImageStyles(
|
||||||
|
|||||||
@@ -38,8 +38,6 @@ type Props = {
|
|||||||
imageSrc: ImageSource
|
imageSrc: ImageSource
|
||||||
onRequestClose: () => void
|
onRequestClose: () => void
|
||||||
onZoom: (scaled: boolean) => void
|
onZoom: (scaled: boolean) => void
|
||||||
onLongPress: (image: ImageSource) => void
|
|
||||||
delayLongPress: number
|
|
||||||
swipeToCloseEnabled?: boolean
|
swipeToCloseEnabled?: boolean
|
||||||
doubleTapToZoomEnabled?: boolean
|
doubleTapToZoomEnabled?: boolean
|
||||||
}
|
}
|
||||||
@@ -50,8 +48,6 @@ const ImageItem = ({
|
|||||||
imageSrc,
|
imageSrc,
|
||||||
onZoom,
|
onZoom,
|
||||||
onRequestClose,
|
onRequestClose,
|
||||||
onLongPress,
|
|
||||||
delayLongPress,
|
|
||||||
swipeToCloseEnabled = true,
|
swipeToCloseEnabled = true,
|
||||||
doubleTapToZoomEnabled = true,
|
doubleTapToZoomEnabled = true,
|
||||||
}: Props) => {
|
}: Props) => {
|
||||||
@@ -112,10 +108,6 @@ const ImageItem = ({
|
|||||||
scrollValueY.setValue(offsetY)
|
scrollValueY.setValue(offsetY)
|
||||||
}
|
}
|
||||||
|
|
||||||
const onLongPressHandler = useCallback(() => {
|
|
||||||
onLongPress(imageSrc)
|
|
||||||
}, [imageSrc, onLongPress])
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View>
|
<View>
|
||||||
<ScrollView
|
<ScrollView
|
||||||
@@ -135,8 +127,6 @@ const ImageItem = ({
|
|||||||
{(!loaded || !imageDimensions) && <ImageLoading />}
|
{(!loaded || !imageDimensions) && <ImageLoading />}
|
||||||
<TouchableWithoutFeedback
|
<TouchableWithoutFeedback
|
||||||
onPress={doubleTapToZoomEnabled ? handleDoubleTap : undefined}
|
onPress={doubleTapToZoomEnabled ? handleDoubleTap : undefined}
|
||||||
onLongPress={onLongPressHandler}
|
|
||||||
delayLongPress={delayLongPress}
|
|
||||||
accessibilityRole="image"
|
accessibilityRole="image"
|
||||||
accessibilityLabel={imageSrc.alt}
|
accessibilityLabel={imageSrc.alt}
|
||||||
accessibilityHint="">
|
accessibilityHint="">
|
||||||
|
|||||||
@@ -8,8 +8,6 @@ type Props = {
|
|||||||
imageSrc: ImageSource
|
imageSrc: ImageSource
|
||||||
onRequestClose: () => void
|
onRequestClose: () => void
|
||||||
onZoom: (scaled: boolean) => void
|
onZoom: (scaled: boolean) => void
|
||||||
onLongPress: (image: ImageSource) => void
|
|
||||||
delayLongPress: number
|
|
||||||
swipeToCloseEnabled?: boolean
|
swipeToCloseEnabled?: boolean
|
||||||
doubleTapToZoomEnabled?: boolean
|
doubleTapToZoomEnabled?: boolean
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -27,7 +27,6 @@ import {
|
|||||||
const SCREEN = Dimensions.get('window')
|
const SCREEN = Dimensions.get('window')
|
||||||
const SCREEN_WIDTH = SCREEN.width
|
const SCREEN_WIDTH = SCREEN.width
|
||||||
const SCREEN_HEIGHT = SCREEN.height
|
const SCREEN_HEIGHT = SCREEN.height
|
||||||
const MIN_DIMENSION = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT)
|
|
||||||
const ANDROID_BAR_HEIGHT = 24
|
const ANDROID_BAR_HEIGHT = 24
|
||||||
|
|
||||||
const MIN_ZOOM = 2
|
const MIN_ZOOM = 2
|
||||||
@@ -40,8 +39,6 @@ type Props = {
|
|||||||
initialTranslate: Position
|
initialTranslate: Position
|
||||||
onZoom: (isZoomed: boolean) => void
|
onZoom: (isZoomed: boolean) => void
|
||||||
doubleTapToZoomEnabled: boolean
|
doubleTapToZoomEnabled: boolean
|
||||||
onLongPress: () => void
|
|
||||||
delayLongPress: number
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const usePanResponder = ({
|
const usePanResponder = ({
|
||||||
@@ -49,8 +46,6 @@ const usePanResponder = ({
|
|||||||
initialTranslate,
|
initialTranslate,
|
||||||
onZoom,
|
onZoom,
|
||||||
doubleTapToZoomEnabled,
|
doubleTapToZoomEnabled,
|
||||||
onLongPress,
|
|
||||||
delayLongPress,
|
|
||||||
}: Props): Readonly<
|
}: Props): Readonly<
|
||||||
[GestureResponderHandlers, Animated.Value, Animated.ValueXY]
|
[GestureResponderHandlers, Animated.Value, Animated.ValueXY]
|
||||||
> => {
|
> => {
|
||||||
@@ -62,9 +57,7 @@ const usePanResponder = ({
|
|||||||
let tmpTranslate: Position | null = null
|
let tmpTranslate: Position | null = null
|
||||||
let isDoubleTapPerformed = false
|
let isDoubleTapPerformed = false
|
||||||
let lastTapTS: number | null = null
|
let lastTapTS: number | null = null
|
||||||
let longPressHandlerRef: NodeJS.Timeout | null = null
|
|
||||||
|
|
||||||
const meaningfulShift = MIN_DIMENSION * 0.01
|
|
||||||
const scaleValue = new Animated.Value(initialScale)
|
const scaleValue = new Animated.Value(initialScale)
|
||||||
const translateValue = new Animated.ValueXY(initialTranslate)
|
const translateValue = new Animated.ValueXY(initialTranslate)
|
||||||
|
|
||||||
@@ -155,10 +148,6 @@ const usePanResponder = ({
|
|||||||
return () => scaleValue.removeAllListeners()
|
return () => scaleValue.removeAllListeners()
|
||||||
})
|
})
|
||||||
|
|
||||||
const cancelLongPressHandle = () => {
|
|
||||||
longPressHandlerRef && clearTimeout(longPressHandlerRef)
|
|
||||||
}
|
|
||||||
|
|
||||||
const panResponder = PanResponder.create({
|
const panResponder = PanResponder.create({
|
||||||
onStartShouldSetPanResponder: () => true,
|
onStartShouldSetPanResponder: () => true,
|
||||||
onStartShouldSetPanResponderCapture: () => true,
|
onStartShouldSetPanResponderCapture: () => true,
|
||||||
@@ -173,8 +162,6 @@ const usePanResponder = ({
|
|||||||
if (gestureState.numberActiveTouches > 1) {
|
if (gestureState.numberActiveTouches > 1) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
longPressHandlerRef = setTimeout(onLongPress, delayLongPress)
|
|
||||||
},
|
},
|
||||||
onPanResponderStart: (
|
onPanResponderStart: (
|
||||||
event: GestureResponderEvent,
|
event: GestureResponderEvent,
|
||||||
@@ -241,15 +228,8 @@ const usePanResponder = ({
|
|||||||
event: GestureResponderEvent,
|
event: GestureResponderEvent,
|
||||||
gestureState: PanResponderGestureState,
|
gestureState: PanResponderGestureState,
|
||||||
) => {
|
) => {
|
||||||
const {dx, dy} = gestureState
|
|
||||||
|
|
||||||
if (Math.abs(dx) >= meaningfulShift || Math.abs(dy) >= meaningfulShift) {
|
|
||||||
cancelLongPressHandle()
|
|
||||||
}
|
|
||||||
|
|
||||||
// Don't need to handle move because double tap in progress (was handled in onStart)
|
// Don't need to handle move because double tap in progress (was handled in onStart)
|
||||||
if (doubleTapToZoomEnabled && isDoubleTapPerformed) {
|
if (doubleTapToZoomEnabled && isDoubleTapPerformed) {
|
||||||
cancelLongPressHandle()
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -267,8 +247,6 @@ const usePanResponder = ({
|
|||||||
numberInitialTouches === 2 && gestureState.numberActiveTouches === 2
|
numberInitialTouches === 2 && gestureState.numberActiveTouches === 2
|
||||||
|
|
||||||
if (isPinchGesture) {
|
if (isPinchGesture) {
|
||||||
cancelLongPressHandle()
|
|
||||||
|
|
||||||
const initialDistance = getDistanceBetweenTouches(initialTouches)
|
const initialDistance = getDistanceBetweenTouches(initialTouches)
|
||||||
const currentDistance = getDistanceBetweenTouches(
|
const currentDistance = getDistanceBetweenTouches(
|
||||||
event.nativeEvent.touches,
|
event.nativeEvent.touches,
|
||||||
@@ -315,7 +293,7 @@ const usePanResponder = ({
|
|||||||
|
|
||||||
if (isTapGesture && currentScale > initialScale) {
|
if (isTapGesture && currentScale > initialScale) {
|
||||||
const {x, y} = currentTranslate
|
const {x, y} = currentTranslate
|
||||||
// eslint-disable-next-line @typescript-eslint/no-shadow
|
|
||||||
const {dx, dy} = gestureState
|
const {dx, dy} = gestureState
|
||||||
const [topBound, leftBound, bottomBound, rightBound] =
|
const [topBound, leftBound, bottomBound, rightBound] =
|
||||||
getBounds(currentScale)
|
getBounds(currentScale)
|
||||||
@@ -360,8 +338,6 @@ const usePanResponder = ({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
onPanResponderRelease: () => {
|
onPanResponderRelease: () => {
|
||||||
cancelLongPressHandle()
|
|
||||||
|
|
||||||
if (isDoubleTapPerformed) {
|
if (isDoubleTapPerformed) {
|
||||||
isDoubleTapPerformed = false
|
isDoubleTapPerformed = false
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -41,20 +41,17 @@ type Props = {
|
|||||||
imageIndex: number
|
imageIndex: number
|
||||||
visible: boolean
|
visible: boolean
|
||||||
onRequestClose: () => void
|
onRequestClose: () => void
|
||||||
onLongPress?: (image: ImageSource) => void
|
|
||||||
onImageIndexChange?: (imageIndex: number) => void
|
onImageIndexChange?: (imageIndex: number) => void
|
||||||
presentationStyle?: ModalProps['presentationStyle']
|
presentationStyle?: ModalProps['presentationStyle']
|
||||||
animationType?: ModalProps['animationType']
|
animationType?: ModalProps['animationType']
|
||||||
backgroundColor?: string
|
backgroundColor?: string
|
||||||
swipeToCloseEnabled?: boolean
|
swipeToCloseEnabled?: boolean
|
||||||
doubleTapToZoomEnabled?: boolean
|
doubleTapToZoomEnabled?: boolean
|
||||||
delayLongPress?: number
|
|
||||||
HeaderComponent?: ComponentType<{imageIndex: number}>
|
HeaderComponent?: ComponentType<{imageIndex: number}>
|
||||||
FooterComponent?: ComponentType<{imageIndex: number}>
|
FooterComponent?: ComponentType<{imageIndex: number}>
|
||||||
}
|
}
|
||||||
|
|
||||||
const DEFAULT_BG_COLOR = '#000'
|
const DEFAULT_BG_COLOR = '#000'
|
||||||
const DEFAULT_DELAY_LONG_PRESS = 800
|
|
||||||
const SCREEN = Dimensions.get('screen')
|
const SCREEN = Dimensions.get('screen')
|
||||||
const SCREEN_WIDTH = SCREEN.width
|
const SCREEN_WIDTH = SCREEN.width
|
||||||
|
|
||||||
@@ -64,12 +61,10 @@ function ImageViewing({
|
|||||||
imageIndex,
|
imageIndex,
|
||||||
visible,
|
visible,
|
||||||
onRequestClose,
|
onRequestClose,
|
||||||
onLongPress = () => {},
|
|
||||||
onImageIndexChange,
|
onImageIndexChange,
|
||||||
backgroundColor = DEFAULT_BG_COLOR,
|
backgroundColor = DEFAULT_BG_COLOR,
|
||||||
swipeToCloseEnabled,
|
swipeToCloseEnabled,
|
||||||
doubleTapToZoomEnabled,
|
doubleTapToZoomEnabled,
|
||||||
delayLongPress = DEFAULT_DELAY_LONG_PRESS,
|
|
||||||
HeaderComponent,
|
HeaderComponent,
|
||||||
FooterComponent,
|
FooterComponent,
|
||||||
}: Props) {
|
}: Props) {
|
||||||
@@ -148,8 +143,6 @@ function ImageViewing({
|
|||||||
onZoom={onZoom}
|
onZoom={onZoom}
|
||||||
imageSrc={imageSrc}
|
imageSrc={imageSrc}
|
||||||
onRequestClose={onRequestCloseEnhanced}
|
onRequestClose={onRequestCloseEnhanced}
|
||||||
onLongPress={onLongPress}
|
|
||||||
delayLongPress={delayLongPress}
|
|
||||||
swipeToCloseEnabled={swipeToCloseEnabled}
|
swipeToCloseEnabled={swipeToCloseEnabled}
|
||||||
doubleTapToZoomEnabled={doubleTapToZoomEnabled}
|
doubleTapToZoomEnabled={doubleTapToZoomEnabled}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user