Inline createPanResponder (#1483)
parent
1af8e83d53
commit
8b8fba7284
|
@ -1,4 +1,3 @@
|
|||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
/**
|
||||
* Copyright (c) JOB TODAY S.A. and its affiliates.
|
||||
*
|
||||
|
@ -7,19 +6,19 @@
|
|||
*
|
||||
*/
|
||||
|
||||
import {useMemo, useEffect} from 'react'
|
||||
import {useEffect} from 'react'
|
||||
import {
|
||||
Animated,
|
||||
Dimensions,
|
||||
GestureResponderEvent,
|
||||
GestureResponderHandlers,
|
||||
NativeTouchEvent,
|
||||
PanResponder,
|
||||
PanResponderGestureState,
|
||||
} from 'react-native'
|
||||
|
||||
import {Position} from '../@types'
|
||||
import {
|
||||
createPanResponder,
|
||||
getDistanceBetweenTouches,
|
||||
getImageTranslate,
|
||||
getImageDimensionsByTranslate,
|
||||
|
@ -160,8 +159,12 @@ const usePanResponder = ({
|
|||
longPressHandlerRef && clearTimeout(longPressHandlerRef)
|
||||
}
|
||||
|
||||
const handlers = {
|
||||
onGrant: (
|
||||
const panResponder = PanResponder.create({
|
||||
onStartShouldSetPanResponder: () => true,
|
||||
onStartShouldSetPanResponderCapture: () => true,
|
||||
onMoveShouldSetPanResponder: () => true,
|
||||
onMoveShouldSetPanResponderCapture: () => true,
|
||||
onPanResponderGrant: (
|
||||
_: GestureResponderEvent,
|
||||
gestureState: PanResponderGestureState,
|
||||
) => {
|
||||
|
@ -173,7 +176,7 @@ const usePanResponder = ({
|
|||
|
||||
longPressHandlerRef = setTimeout(onLongPress, delayLongPress)
|
||||
},
|
||||
onStart: (
|
||||
onPanResponderStart: (
|
||||
event: GestureResponderEvent,
|
||||
gestureState: PanResponderGestureState,
|
||||
) => {
|
||||
|
@ -234,7 +237,7 @@ const usePanResponder = ({
|
|||
lastTapTS = Date.now()
|
||||
}
|
||||
},
|
||||
onMove: (
|
||||
onPanResponderMove: (
|
||||
event: GestureResponderEvent,
|
||||
gestureState: PanResponderGestureState,
|
||||
) => {
|
||||
|
@ -356,7 +359,7 @@ const usePanResponder = ({
|
|||
tmpTranslate = {x: nextTranslateX, y: nextTranslateY}
|
||||
}
|
||||
},
|
||||
onRelease: () => {
|
||||
onPanResponderRelease: () => {
|
||||
cancelLongPressHandle()
|
||||
|
||||
if (isDoubleTapPerformed) {
|
||||
|
@ -418,9 +421,9 @@ const usePanResponder = ({
|
|||
tmpTranslate = null
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
const panResponder = useMemo(() => createPanResponder(handlers), [handlers])
|
||||
onPanResponderTerminationRequest: () => false,
|
||||
onShouldBlockNativeResponder: () => false,
|
||||
})
|
||||
|
||||
return [panResponder.panHandlers, scaleValue, translateValue]
|
||||
}
|
||||
|
|
|
@ -6,14 +6,7 @@
|
|||
*
|
||||
*/
|
||||
|
||||
import {
|
||||
Animated,
|
||||
GestureResponderEvent,
|
||||
PanResponder,
|
||||
PanResponderGestureState,
|
||||
PanResponderInstance,
|
||||
NativeTouchEvent,
|
||||
} from 'react-native'
|
||||
import {Animated, NativeTouchEvent} from 'react-native'
|
||||
import {Dimensions, Position} from './@types'
|
||||
|
||||
type CacheStorageItem = {key: string; value: any}
|
||||
|
@ -131,40 +124,6 @@ export const getImageTranslateForScale = (
|
|||
return getImageTranslate(targetImageDimensions, screen)
|
||||
}
|
||||
|
||||
type HandlerType = (
|
||||
event: GestureResponderEvent,
|
||||
state: PanResponderGestureState,
|
||||
) => void
|
||||
|
||||
type PanResponderProps = {
|
||||
onGrant: HandlerType
|
||||
onStart?: HandlerType
|
||||
onMove: HandlerType
|
||||
onRelease?: HandlerType
|
||||
onTerminate?: HandlerType
|
||||
}
|
||||
|
||||
export const createPanResponder = ({
|
||||
onGrant,
|
||||
onStart,
|
||||
onMove,
|
||||
onRelease,
|
||||
onTerminate,
|
||||
}: PanResponderProps): PanResponderInstance =>
|
||||
PanResponder.create({
|
||||
onStartShouldSetPanResponder: () => true,
|
||||
onStartShouldSetPanResponderCapture: () => true,
|
||||
onMoveShouldSetPanResponder: () => true,
|
||||
onMoveShouldSetPanResponderCapture: () => true,
|
||||
onPanResponderGrant: onGrant,
|
||||
onPanResponderStart: onStart,
|
||||
onPanResponderMove: onMove,
|
||||
onPanResponderRelease: onRelease,
|
||||
onPanResponderTerminate: onTerminate,
|
||||
onPanResponderTerminationRequest: () => false,
|
||||
onShouldBlockNativeResponder: () => false,
|
||||
})
|
||||
|
||||
export const getDistanceBetweenTouches = (
|
||||
touches: NativeTouchEvent[],
|
||||
): number => {
|
||||
|
|
Loading…
Reference in New Issue