diff --git a/.github/workflows/static-root-checks.yml b/.github/workflows/static-root-checks.yml index e406967d14..eda476ecb1 100644 --- a/.github/workflows/static-root-checks.yml +++ b/.github/workflows/static-root-checks.yml @@ -29,3 +29,5 @@ jobs: run: yarn tsc --noEmit - name: Lint run: yarn lint:js-root + - name: Check for circular dependencies + run: yarn circularDependencyCheck diff --git a/package.json b/package.json index 794bd5a5a8..a871561710 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,8 @@ "lint:js": "eslint --ext '.js,.ts,.tsx' src/ example/src FabricExample/src MacOSExample/src && yarn prettier --check './{src,example,FabricExample,MacOSExample}/**/*.{js,jsx,ts,tsx}'", "lint:js-root": "eslint --ext '.js,.ts,.tsx' src/ && yarn prettier --check './src/**/*.{js,jsx,ts,tsx}'", "lint:android": "./android/gradlew -p android spotlessCheck -q", - "checkIntegrity": "(cd ./FabricExample/android && ./gradlew generateCodegenArtifactsFromSchema -PskipCodegenCopyTask) && (cd ./android && ./gradlew checkIntegrityBetweenArchitectures)" + "checkIntegrity": "(cd ./FabricExample/android && ./gradlew generateCodegenArtifactsFromSchema -PskipCodegenCopyTask) && (cd ./android && ./gradlew checkIntegrityBetweenArchitectures)", + "circularDependencyCheck": "yarn madge --extensions js,ts,tsx --circular src" }, "react-native": "src/index.ts", "main": "lib/commonjs/index.js", diff --git a/src/components/DrawerLayout.tsx b/src/components/DrawerLayout.tsx index 5ceb54581a..a1079679e7 100644 --- a/src/components/DrawerLayout.tsx +++ b/src/components/DrawerLayout.tsx @@ -30,14 +30,12 @@ import { ActiveCursor, MouseButton, } from '../handlers/gestureHandlerCommon'; -import { - PanGestureHandler, +import { PanGestureHandler } from '../handlers/PanGestureHandler'; +import type { PanGestureHandlerEventPayload, -} from '../handlers/PanGestureHandler'; -import { - TapGestureHandler, TapGestureHandlerEventPayload, -} from '../handlers/TapGestureHandler'; +} from '../handlers/GestureHandlerEventPayload'; +import { TapGestureHandler } from '../handlers/TapGestureHandler'; import { State } from '../State'; const DRAG_TOSS = 0.05; diff --git a/src/components/GestureButtons.tsx b/src/components/GestureButtons.tsx index 8c9a867635..875568e73d 100644 --- a/src/components/GestureButtons.tsx +++ b/src/components/GestureButtons.tsx @@ -1,12 +1,5 @@ import * as React from 'react'; -import { - Animated, - Platform, - processColor, - StyleSheet, - StyleProp, - ViewStyle, -} from 'react-native'; +import { Animated, Platform, processColor, StyleSheet } from 'react-native'; import createNativeWrapper from '../handlers/createNativeWrapper'; import GestureHandlerButton from './GestureHandlerButton'; @@ -16,118 +9,15 @@ import { GestureEvent, HandlerStateChangeEvent, } from '../handlers/gestureHandlerCommon'; -import { - NativeViewGestureHandlerPayload, - NativeViewGestureHandlerProps, -} from '../handlers/NativeViewGestureHandler'; - -export interface RawButtonProps extends NativeViewGestureHandlerProps { - /** - * Defines if more than one button could be pressed simultaneously. By default - * set true. - */ - exclusive?: boolean; - // TODO: we should transform props in `createNativeWrapper` - - /** - * Android only. - * - * Defines color of native ripple animation used since API level 21. - */ - rippleColor?: any; // it was present in BaseButtonProps before but is used here in code - - /** - * Android only. - * - * Defines radius of native ripple animation used since API level 21. - */ - rippleRadius?: number | null; - - /** - * Android only. - * - * Set this to true if you want the ripple animation to render outside the view bounds. - */ - borderless?: boolean; - - /** - * Android only. - * - * Defines whether the ripple animation should be drawn on the foreground of the view. - */ - foreground?: boolean; - - /** - * Android only. - * - * Set this to true if you don't want the system to play sound when the button is pressed. - */ - touchSoundDisabled?: boolean; -} - -interface ButtonWithRefProps { - innerRef?: React.ForwardedRef>; -} - -export interface BaseButtonProps extends RawButtonProps { - /** - * Called when the button gets pressed (analogous to `onPress` in - * `TouchableHighlight` from RN core). - */ - onPress?: (pointerInside: boolean) => void; - - /** - * Called when the button gets pressed and is held for `delayLongPress` - * milliseconds. - */ - onLongPress?: () => void; - - /** - * Called when button changes from inactive to active and vice versa. It - * passes active state as a boolean variable as a first parameter for that - * method. - */ - onActiveStateChange?: (active: boolean) => void; - style?: StyleProp; - testID?: string; - - /** - * Delay, in milliseconds, after which the `onLongPress` callback gets called. - * Defaults to 600. - */ - delayLongPress?: number; -} - -interface BaseButtonWithRefProps extends BaseButtonProps, ButtonWithRefProps {} - -export interface RectButtonProps extends BaseButtonProps { - /** - * Background color that will be dimmed when button is in active state. - */ - underlayColor?: string; - - /** - * iOS only. - * - * Opacity applied to the underlay when button is in active state. - */ - activeOpacity?: number; -} - -interface RectButtonWithRefProps extends RectButtonProps, ButtonWithRefProps {} - -export interface BorderlessButtonProps extends BaseButtonProps { - /** - * iOS only. - * - * Opacity applied to the button when it is in an active state. - */ - activeOpacity?: number; -} - -interface BorderlessButtonWithRefProps - extends BorderlessButtonProps, - ButtonWithRefProps {} +import type { NativeViewGestureHandlerPayload } from '../handlers/GestureHandlerEventPayload'; +import type { + BaseButtonWithRefProps, + BaseButtonProps, + RectButtonWithRefProps, + RectButtonProps, + BorderlessButtonWithRefProps, + BorderlessButtonProps, +} from './GestureButtonsProps'; export const RawButton = createNativeWrapper(GestureHandlerButton, { shouldCancelWhenOutside: false, diff --git a/src/components/GestureButtonsProps.ts b/src/components/GestureButtonsProps.ts new file mode 100644 index 0000000000..a79c779830 --- /dev/null +++ b/src/components/GestureButtonsProps.ts @@ -0,0 +1,110 @@ +import * as React from 'react'; +import { StyleProp, ViewStyle } from 'react-native'; +import type { NativeViewGestureHandlerProps } from '../handlers/NativeViewGestureHandler'; + +export interface RawButtonProps extends NativeViewGestureHandlerProps { + /** + * Defines if more than one button could be pressed simultaneously. By default + * set true. + */ + exclusive?: boolean; + // TODO: we should transform props in `createNativeWrapper` + /** + * Android only. + * + * Defines color of native ripple animation used since API level 21. + */ + rippleColor?: any; // it was present in BaseButtonProps before but is used here in code + + /** + * Android only. + * + * Defines radius of native ripple animation used since API level 21. + */ + rippleRadius?: number | null; + + /** + * Android only. + * + * Set this to true if you want the ripple animation to render outside the view bounds. + */ + borderless?: boolean; + + /** + * Android only. + * + * Defines whether the ripple animation should be drawn on the foreground of the view. + */ + foreground?: boolean; + + /** + * Android only. + * + * Set this to true if you don't want the system to play sound when the button is pressed. + */ + touchSoundDisabled?: boolean; +} +interface ButtonWithRefProps { + innerRef?: React.ForwardedRef>; +} + +export interface BaseButtonProps extends RawButtonProps { + /** + * Called when the button gets pressed (analogous to `onPress` in + * `TouchableHighlight` from RN core). + */ + onPress?: (pointerInside: boolean) => void; + + /** + * Called when the button gets pressed and is held for `delayLongPress` + * milliseconds. + */ + onLongPress?: () => void; + + /** + * Called when button changes from inactive to active and vice versa. It + * passes active state as a boolean variable as a first parameter for that + * method. + */ + onActiveStateChange?: (active: boolean) => void; + style?: StyleProp; + testID?: string; + + /** + * Delay, in milliseconds, after which the `onLongPress` callback gets called. + * Defaults to 600. + */ + delayLongPress?: number; +} +export interface BaseButtonWithRefProps + extends BaseButtonProps, + ButtonWithRefProps {} + +export interface RectButtonProps extends BaseButtonProps { + /** + * Background color that will be dimmed when button is in active state. + */ + underlayColor?: string; + + /** + * iOS only. + * + * Opacity applied to the underlay when button is in active state. + */ + activeOpacity?: number; +} +export interface RectButtonWithRefProps + extends RectButtonProps, + ButtonWithRefProps {} + +export interface BorderlessButtonProps extends BaseButtonProps { + /** + * iOS only. + * + * Opacity applied to the button when it is in an active state. + */ + activeOpacity?: number; +} +export interface BorderlessButtonWithRefProps + extends BorderlessButtonProps, + ButtonWithRefProps {} diff --git a/src/components/GestureHandlerButton.tsx b/src/components/GestureHandlerButton.tsx index 1b85c23a30..b6f0c391c0 100644 --- a/src/components/GestureHandlerButton.tsx +++ b/src/components/GestureHandlerButton.tsx @@ -1,5 +1,5 @@ import { HostComponent } from 'react-native'; -import { RawButtonProps } from './GestureButtons'; +import type { RawButtonProps } from './GestureButtonsProps'; import RNGestureHandlerButtonNativeComponent from '../specs/RNGestureHandlerButtonNativeComponent'; export default RNGestureHandlerButtonNativeComponent as HostComponent; diff --git a/src/components/ReanimatedSwipeable.tsx b/src/components/ReanimatedSwipeable.tsx index aee977bb5a..c6b4600712 100644 --- a/src/components/ReanimatedSwipeable.tsx +++ b/src/components/ReanimatedSwipeable.tsx @@ -15,10 +15,8 @@ import { GestureStateChangeEvent, GestureUpdateEvent, } from '../handlers/gestureHandlerCommon'; -import { - PanGestureHandlerEventPayload, - PanGestureHandlerProps, -} from '../handlers/PanGestureHandler'; +import type { PanGestureHandlerProps } from '../handlers/PanGestureHandler'; +import type { PanGestureHandlerEventPayload } from '../handlers/GestureHandlerEventPayload'; import Animated, { Extrapolation, SharedValue, diff --git a/src/components/Swipeable.tsx b/src/components/Swipeable.tsx index e464540e5a..e3ce909e8b 100644 --- a/src/components/Swipeable.tsx +++ b/src/components/Swipeable.tsx @@ -20,13 +20,13 @@ import { } from '../handlers/gestureHandlerCommon'; import { PanGestureHandler, - PanGestureHandlerEventPayload, PanGestureHandlerProps, } from '../handlers/PanGestureHandler'; import { - TapGestureHandler, + PanGestureHandlerEventPayload, TapGestureHandlerEventPayload, -} from '../handlers/TapGestureHandler'; +} from '../handlers/GestureHandlerEventPayload'; +import { TapGestureHandler } from '../handlers/TapGestureHandler'; import { State } from '../State'; const DRAG_TOSS = 0.05; diff --git a/src/components/touchables/GenericTouchable.tsx b/src/components/touchables/GenericTouchable.tsx index b2fbd17afe..20b235d347 100644 --- a/src/components/touchables/GenericTouchable.tsx +++ b/src/components/touchables/GenericTouchable.tsx @@ -1,13 +1,6 @@ import * as React from 'react'; import { Component } from 'react'; -import { - Animated, - Platform, - StyleProp, - ViewStyle, - TouchableWithoutFeedbackProps, - Insets, -} from 'react-native'; +import { Animated, Platform } from 'react-native'; import { State } from '../../State'; import { BaseButton } from '../GestureButtons'; @@ -15,10 +8,10 @@ import { BaseButton } from '../GestureButtons'; import { GestureEvent, HandlerStateChangeEvent, - UserSelect, } from '../../handlers/gestureHandlerCommon'; -import { NativeViewGestureHandlerPayload } from '../../handlers/NativeViewGestureHandler'; -import { TouchableNativeFeedbackExtraProps } from './TouchableNativeFeedback.android'; +import type { NativeViewGestureHandlerPayload } from '../../handlers/GestureHandlerEventPayload'; +import type { TouchableNativeFeedbackExtraProps } from './TouchableNativeFeedbackProps'; +import type { GenericTouchableProps } from './GenericTouchableProps'; /** * Each touchable is a states' machine which preforms transitions. @@ -35,26 +28,6 @@ export const TOUCHABLE_STATE = { type TouchableState = typeof TOUCHABLE_STATE[keyof typeof TOUCHABLE_STATE]; -export interface GenericTouchableProps - extends Omit { - // Decided to drop not used fields from RN's implementation. - // e.g. onBlur and onFocus as well as deprecated props. - TODO: this comment may be unuseful in this moment - - // TODO: in RN these events get native event parameter, which prolly could be used in our implementation too - onPress?: () => void; - onPressIn?: () => void; - onPressOut?: () => void; - onLongPress?: () => void; - - nativeID?: string; - shouldActivateOnStart?: boolean; - disallowInterruption?: boolean; - - containerStyle?: StyleProp; - hitSlop?: Insets | number; - userSelect?: UserSelect; -} - interface InternalProps { extraButtonProps: TouchableNativeFeedbackExtraProps; onStateChange?: (oldState: TouchableState, newState: TouchableState) => void; diff --git a/src/components/touchables/GenericTouchableProps.ts b/src/components/touchables/GenericTouchableProps.ts new file mode 100644 index 0000000000..b51a2f228f --- /dev/null +++ b/src/components/touchables/GenericTouchableProps.ts @@ -0,0 +1,26 @@ +import type { + StyleProp, + ViewStyle, + TouchableWithoutFeedbackProps, + Insets, +} from 'react-native'; +import type { UserSelect } from '../../handlers/gestureHandlerCommon'; + +export interface GenericTouchableProps + extends Omit { + // Decided to drop not used fields from RN's implementation. + // e.g. onBlur and onFocus as well as deprecated props. - TODO: this comment may be unuseful in this moment + // TODO: in RN these events get native event parameter, which prolly could be used in our implementation too + onPress?: () => void; + onPressIn?: () => void; + onPressOut?: () => void; + onLongPress?: () => void; + + nativeID?: string; + shouldActivateOnStart?: boolean; + disallowInterruption?: boolean; + + containerStyle?: StyleProp; + hitSlop?: Insets | number; + userSelect?: UserSelect; +} diff --git a/src/components/touchables/TouchableHighlight.tsx b/src/components/touchables/TouchableHighlight.tsx index 774a3885a5..4222950646 100644 --- a/src/components/touchables/TouchableHighlight.tsx +++ b/src/components/touchables/TouchableHighlight.tsx @@ -1,9 +1,7 @@ import * as React from 'react'; import { Component } from 'react'; -import GenericTouchable, { - GenericTouchableProps, - TOUCHABLE_STATE, -} from './GenericTouchable'; +import GenericTouchable, { TOUCHABLE_STATE } from './GenericTouchable'; +import type { GenericTouchableProps } from './GenericTouchableProps'; import { StyleSheet, View, diff --git a/src/components/touchables/TouchableNativeFeedback.android.tsx b/src/components/touchables/TouchableNativeFeedback.android.tsx index f96b453421..57d45882d7 100644 --- a/src/components/touchables/TouchableNativeFeedback.android.tsx +++ b/src/components/touchables/TouchableNativeFeedback.android.tsx @@ -1,21 +1,11 @@ -import { - Platform, - TouchableNativeFeedbackProps as RNTouchableNativeFeedbackProps, - ColorValue, -} from 'react-native'; +import { Platform, ColorValue } from 'react-native'; import * as React from 'react'; import { Component } from 'react'; -import GenericTouchable, { GenericTouchableProps } from './GenericTouchable'; - -export type TouchableNativeFeedbackExtraProps = { - borderless?: boolean; - rippleColor?: number | null; - rippleRadius?: number | null; - foreground?: boolean; -}; - -export type TouchableNativeFeedbackProps = RNTouchableNativeFeedbackProps & - GenericTouchableProps; +import GenericTouchable from './GenericTouchable'; +import { + TouchableNativeFeedbackProps, + TouchableNativeFeedbackExtraProps, +} from './TouchableNativeFeedbackProps'; /** * TouchableNativeFeedback behaves slightly different than RN's TouchableNativeFeedback. diff --git a/src/components/touchables/TouchableNativeFeedbackProps.tsx b/src/components/touchables/TouchableNativeFeedbackProps.tsx new file mode 100644 index 0000000000..00cb8eb718 --- /dev/null +++ b/src/components/touchables/TouchableNativeFeedbackProps.tsx @@ -0,0 +1,12 @@ +import type { TouchableNativeFeedbackProps as RNTouchableNativeFeedbackProps } from 'react-native'; +import type { GenericTouchableProps } from './GenericTouchableProps'; + +export type TouchableNativeFeedbackExtraProps = { + borderless?: boolean; + rippleColor?: number | null; + rippleRadius?: number | null; + foreground?: boolean; +}; + +export type TouchableNativeFeedbackProps = RNTouchableNativeFeedbackProps & + GenericTouchableProps; diff --git a/src/components/touchables/TouchableOpacity.tsx b/src/components/touchables/TouchableOpacity.tsx index 7c0f20cfae..f0d87338a1 100644 --- a/src/components/touchables/TouchableOpacity.tsx +++ b/src/components/touchables/TouchableOpacity.tsx @@ -5,10 +5,8 @@ import { View, TouchableOpacityProps as RNTouchableOpacityProps, } from 'react-native'; -import GenericTouchable, { - TOUCHABLE_STATE, - GenericTouchableProps, -} from './GenericTouchable'; +import GenericTouchable, { TOUCHABLE_STATE } from './GenericTouchable'; +import type { GenericTouchableProps } from './GenericTouchableProps'; import * as React from 'react'; import { Component } from 'react'; diff --git a/src/components/touchables/TouchableWithoutFeedback.tsx b/src/components/touchables/TouchableWithoutFeedback.tsx index 577e568a8a..ddc2ad211d 100644 --- a/src/components/touchables/TouchableWithoutFeedback.tsx +++ b/src/components/touchables/TouchableWithoutFeedback.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { PropsWithChildren } from 'react'; -import GenericTouchable, { GenericTouchableProps } from './GenericTouchable'; +import GenericTouchable from './GenericTouchable'; +import type { GenericTouchableProps } from './GenericTouchableProps'; export type TouchableWithoutFeedbackProps = GenericTouchableProps; diff --git a/src/handlers/FlingGestureHandler.ts b/src/handlers/FlingGestureHandler.ts index 88e0d5521b..a202123dd7 100644 --- a/src/handlers/FlingGestureHandler.ts +++ b/src/handlers/FlingGestureHandler.ts @@ -1,3 +1,4 @@ +import type { FlingGestureHandlerEventPayload } from './GestureHandlerEventPayload'; import createHandler from './createHandler'; import { BaseGestureHandlerProps, @@ -9,12 +10,6 @@ export const flingGestureHandlerProps = [ 'direction', ] as const; -export type FlingGestureHandlerEventPayload = { - x: number; - y: number; - absoluteX: number; - absoluteY: number; -}; export interface FlingGestureConfig { /** * Expressed allowed direction of movement. It's possible to pass one or many diff --git a/src/handlers/ForceTouchGestureHandler.ts b/src/handlers/ForceTouchGestureHandler.ts index 0de04e9209..4df1a72fda 100644 --- a/src/handlers/ForceTouchGestureHandler.ts +++ b/src/handlers/ForceTouchGestureHandler.ts @@ -6,6 +6,7 @@ import { BaseGestureHandlerProps, baseGestureHandlerProps, } from './gestureHandlerCommon'; +import type { ForceTouchGestureHandlerEventPayload } from './GestureHandlerEventPayload'; export const forceTouchGestureHandlerProps = [ 'minForce', @@ -28,18 +29,6 @@ class ForceTouchFallback extends React.Component> { } } -export type ForceTouchGestureHandlerEventPayload = { - x: number; - y: number; - absoluteX: number; - absoluteY: number; - - /** - * The pressure of a touch. - */ - force: number; -}; - export interface ForceTouchGestureConfig { /** * diff --git a/src/handlers/GestureHandlerEventPayload.ts b/src/handlers/GestureHandlerEventPayload.ts new file mode 100644 index 0000000000..b6f59c577a --- /dev/null +++ b/src/handlers/GestureHandlerEventPayload.ts @@ -0,0 +1,184 @@ +export type FlingGestureHandlerEventPayload = { + x: number; + y: number; + absoluteX: number; + absoluteY: number; +}; + +export type ForceTouchGestureHandlerEventPayload = { + x: number; + y: number; + absoluteX: number; + absoluteY: number; + + /** + * The pressure of a touch. + */ + force: number; +}; + +export type LongPressGestureHandlerEventPayload = { + /** + * X coordinate, expressed in points, of the current position of the pointer + * (finger or a leading pointer when there are multiple fingers placed) + * relative to the view attached to the handler. + */ + x: number; + + /** + * Y coordinate, expressed in points, of the current position of the pointer + * (finger or a leading pointer when there are multiple fingers placed) + * relative to the view attached to the handler. + */ + y: number; + + /** + * X coordinate, expressed in points, of the current position of the pointer + * (finger or a leading pointer when there are multiple fingers placed) + * relative to the window. It is recommended to use `absoluteX` instead of + * `x` in cases when the view attached to the handler can be transformed as an + * effect of the gesture. + */ + absoluteX: number; + + /** + * Y coordinate, expressed in points, of the current position of the pointer + * (finger or a leading pointer when there are multiple fingers placed) + * relative to the window. It is recommended to use `absoluteY` instead of + * `y` in cases when the view attached to the handler can be transformed as an + * effect of the gesture. + */ + absoluteY: number; + + /** + * Duration of the long press (time since the start of the event), expressed + * in milliseconds. + */ + duration: number; +}; + +export type NativeViewGestureHandlerPayload = { + /** + * True if gesture was performed inside of containing view, false otherwise. + */ + pointerInside: boolean; +}; + +export type PanGestureHandlerEventPayload = { + /** + * X coordinate of the current position of the pointer (finger or a leading + * pointer when there are multiple fingers placed) relative to the view + * attached to the handler. Expressed in point units. + */ + x: number; + + /** + * Y coordinate of the current position of the pointer (finger or a leading + * pointer when there are multiple fingers placed) relative to the view + * attached to the handler. Expressed in point units. + */ + y: number; + + /** + * X coordinate of the current position of the pointer (finger or a leading + * pointer when there are multiple fingers placed) relative to the window. + * The value is expressed in point units. It is recommended to use it instead + * of `x` in cases when the original view can be transformed as an effect of + * the gesture. + */ + absoluteX: number; + + /** + * Y coordinate of the current position of the pointer (finger or a leading + * pointer when there are multiple fingers placed) relative to the window. + * The value is expressed in point units. It is recommended to use it instead + * of `y` in cases when the original view can be transformed as an + * effect of the gesture. + */ + absoluteY: number; + + /** + * Translation of the pan gesture along X axis accumulated over the time of + * the gesture. The value is expressed in the point units. + */ + translationX: number; + + /** + * Translation of the pan gesture along Y axis accumulated over the time of + * the gesture. The value is expressed in the point units. + */ + translationY: number; + + /** + * Velocity of the pan gesture along the X axis in the current moment. The + * value is expressed in point units per second. + */ + velocityX: number; + + /** + * Velocity of the pan gesture along the Y axis in the current moment. The + * value is expressed in point units per second. + */ + velocityY: number; +}; + +export type PinchGestureHandlerEventPayload = { + /** + * The scale factor relative to the points of the two touches in screen + * coordinates. + */ + scale: number; + + /** + * Position expressed in points along X axis of center anchor point of + * gesture. + */ + focalX: number; + + /** + * Position expressed in points along Y axis of center anchor point of + * gesture. + */ + focalY: number; + + /** + * + * Velocity of the pan gesture the current moment. The value is expressed in + * point units per second. + */ + velocity: number; +}; + +export type TapGestureHandlerEventPayload = { + x: number; + y: number; + absoluteX: number; + absoluteY: number; +}; + +export type RotationGestureHandlerEventPayload = { + /** + * Amount rotated, expressed in radians, from the gesture's focal point + * (anchor). + */ + rotation: number; + + /** + * X coordinate, expressed in points, of the gesture's central focal point + * (anchor). + */ + anchorX: number; + + /** + * Y coordinate, expressed in points, of the gesture's central focal point + * (anchor). + */ + anchorY: number; + + /** + * + * Instantaneous velocity, expressed in point units per second, of the + * gesture. + */ + velocity: number; +}; diff --git a/src/handlers/LongPressGestureHandler.ts b/src/handlers/LongPressGestureHandler.ts index 1cfaa7f874..9b888b929a 100644 --- a/src/handlers/LongPressGestureHandler.ts +++ b/src/handlers/LongPressGestureHandler.ts @@ -1,3 +1,4 @@ +import { LongPressGestureHandlerEventPayload } from './GestureHandlerEventPayload'; import createHandler from './createHandler'; import { BaseGestureHandlerProps, @@ -9,46 +10,6 @@ export const longPressGestureHandlerProps = [ 'maxDist', ] as const; -export type LongPressGestureHandlerEventPayload = { - /** - * X coordinate, expressed in points, of the current position of the pointer - * (finger or a leading pointer when there are multiple fingers placed) - * relative to the view attached to the handler. - */ - x: number; - - /** - * Y coordinate, expressed in points, of the current position of the pointer - * (finger or a leading pointer when there are multiple fingers placed) - * relative to the view attached to the handler. - */ - y: number; - - /** - * X coordinate, expressed in points, of the current position of the pointer - * (finger or a leading pointer when there are multiple fingers placed) - * relative to the window. It is recommended to use `absoluteX` instead of - * `x` in cases when the view attached to the handler can be transformed as an - * effect of the gesture. - */ - absoluteX: number; - - /** - * Y coordinate, expressed in points, of the current position of the pointer - * (finger or a leading pointer when there are multiple fingers placed) - * relative to the window. It is recommended to use `absoluteY` instead of - * `y` in cases when the view attached to the handler can be transformed as an - * effect of the gesture. - */ - absoluteY: number; - - /** - * Duration of the long press (time since the start of the event), expressed - * in milliseconds. - */ - duration: number; -}; - export interface LongPressGestureConfig { /** * Minimum time, expressed in milliseconds, that a finger must remain pressed on diff --git a/src/handlers/NativeViewGestureHandler.ts b/src/handlers/NativeViewGestureHandler.ts index acba7908a5..f80f90f210 100644 --- a/src/handlers/NativeViewGestureHandler.ts +++ b/src/handlers/NativeViewGestureHandler.ts @@ -1,3 +1,4 @@ +import type { NativeViewGestureHandlerPayload } from './GestureHandlerEventPayload'; import createHandler from './createHandler'; import { BaseGestureHandlerProps, @@ -29,13 +30,6 @@ export interface NativeViewGestureHandlerProps extends BaseGestureHandlerProps, NativeViewGestureConfig {} -export type NativeViewGestureHandlerPayload = { - /** - * True if gesture was performed inside of containing view, false otherwise. - */ - pointerInside: boolean; -}; - export const nativeViewProps = [ ...baseGestureHandlerProps, ...nativeViewGestureHandlerProps, diff --git a/src/handlers/PanGestureHandler.ts b/src/handlers/PanGestureHandler.ts index 416723abae..aa86bcb498 100644 --- a/src/handlers/PanGestureHandler.ts +++ b/src/handlers/PanGestureHandler.ts @@ -1,3 +1,4 @@ +import type { PanGestureHandlerEventPayload } from './GestureHandlerEventPayload'; import createHandler from './createHandler'; import { BaseGestureHandlerProps, @@ -31,64 +32,6 @@ export const panGestureHandlerCustomNativeProps = [ 'failOffsetXEnd', ] as const; -export type PanGestureHandlerEventPayload = { - /** - * X coordinate of the current position of the pointer (finger or a leading - * pointer when there are multiple fingers placed) relative to the view - * attached to the handler. Expressed in point units. - */ - x: number; - - /** - * Y coordinate of the current position of the pointer (finger or a leading - * pointer when there are multiple fingers placed) relative to the view - * attached to the handler. Expressed in point units. - */ - y: number; - - /** - * X coordinate of the current position of the pointer (finger or a leading - * pointer when there are multiple fingers placed) relative to the window. - * The value is expressed in point units. It is recommended to use it instead - * of `x` in cases when the original view can be transformed as an effect of - * the gesture. - */ - absoluteX: number; - - /** - * Y coordinate of the current position of the pointer (finger or a leading - * pointer when there are multiple fingers placed) relative to the window. - * The value is expressed in point units. It is recommended to use it instead - * of `y` in cases when the original view can be transformed as an - * effect of the gesture. - */ - absoluteY: number; - - /** - * Translation of the pan gesture along X axis accumulated over the time of - * the gesture. The value is expressed in the point units. - */ - translationX: number; - - /** - * Translation of the pan gesture along Y axis accumulated over the time of - * the gesture. The value is expressed in the point units. - */ - translationY: number; - - /** - * Velocity of the pan gesture along the X axis in the current moment. The - * value is expressed in point units per second. - */ - velocityX: number; - - /** - * Velocity of the pan gesture along the Y axis in the current moment. The - * value is expressed in point units per second. - */ - velocityY: number; -}; - interface CommonPanProperties { /** * Minimum distance the finger (or multiple finger) need to travel before the diff --git a/src/handlers/PinchGestureHandler.ts b/src/handlers/PinchGestureHandler.ts index e588cbc262..a7a7bf9cb6 100644 --- a/src/handlers/PinchGestureHandler.ts +++ b/src/handlers/PinchGestureHandler.ts @@ -1,36 +1,10 @@ +import { PinchGestureHandlerEventPayload } from './GestureHandlerEventPayload'; import createHandler from './createHandler'; import { BaseGestureHandlerProps, baseGestureHandlerProps, } from './gestureHandlerCommon'; -export type PinchGestureHandlerEventPayload = { - /** - * The scale factor relative to the points of the two touches in screen - * coordinates. - */ - scale: number; - - /** - * Position expressed in points along X axis of center anchor point of - * gesture. - */ - focalX: number; - - /** - * Position expressed in points along Y axis of center anchor point of - * gesture. - */ - focalY: number; - - /** - * - * Velocity of the pan gesture the current moment. The value is expressed in - * point units per second. - */ - velocity: number; -}; - export interface PinchGestureHandlerProps extends BaseGestureHandlerProps {} diff --git a/src/handlers/RotationGestureHandler.ts b/src/handlers/RotationGestureHandler.ts index 2a62135bf3..d6b35c1ca3 100644 --- a/src/handlers/RotationGestureHandler.ts +++ b/src/handlers/RotationGestureHandler.ts @@ -1,36 +1,10 @@ +import { RotationGestureHandlerEventPayload } from './GestureHandlerEventPayload'; import createHandler from './createHandler'; import { BaseGestureHandlerProps, baseGestureHandlerProps, } from './gestureHandlerCommon'; -export type RotationGestureHandlerEventPayload = { - /** - * Amount rotated, expressed in radians, from the gesture's focal point - * (anchor). - */ - rotation: number; - - /** - * X coordinate, expressed in points, of the gesture's central focal point - * (anchor). - */ - anchorX: number; - - /** - * Y coordinate, expressed in points, of the gesture's central focal point - * (anchor). - */ - anchorY: number; - - /** - * - * Instantaneous velocity, expressed in point units per second, of the - * gesture. - */ - velocity: number; -}; - export interface RotationGestureHandlerProps extends BaseGestureHandlerProps {} diff --git a/src/handlers/TapGestureHandler.ts b/src/handlers/TapGestureHandler.ts index 9ea3a98b9a..4fb2e3a615 100644 --- a/src/handlers/TapGestureHandler.ts +++ b/src/handlers/TapGestureHandler.ts @@ -1,3 +1,4 @@ +import type { TapGestureHandlerEventPayload } from './GestureHandlerEventPayload'; import createHandler from './createHandler'; import { BaseGestureHandlerProps, @@ -14,12 +15,6 @@ export const tapGestureHandlerProps = [ 'minPointers', ] as const; -export type TapGestureHandlerEventPayload = { - x: number; - y: number; - absoluteX: number; - absoluteY: number; -}; export interface TapGestureConfig { /** * Minimum number of pointers (fingers) required to be placed before the diff --git a/src/handlers/createHandler.tsx b/src/handlers/createHandler.tsx index 9803d32943..2559d26372 100644 --- a/src/handlers/createHandler.tsx +++ b/src/handlers/createHandler.tsx @@ -8,20 +8,15 @@ import { import { customDirectEventTypes } from './customDirectEventTypes'; import RNGestureHandlerModule from '../RNGestureHandlerModule'; import { State } from '../State'; -import { - handlerIDToTag, - getNextHandlerTag, - registerOldGestureHandler, -} from './handlersRegistry'; +import { handlerIDToTag, registerOldGestureHandler } from './handlersRegistry'; +import { getNextHandlerTag } from './getNextHandlerTag'; import { BaseGestureHandlerProps, - filterConfig, GestureEvent, HandlerStateChangeEvent, - findNodeHandle, - scheduleFlushOperations, } from './gestureHandlerCommon'; +import { filterConfig, findNodeHandle, scheduleFlushOperations } from './utils'; import { ValueOf } from '../typeUtils'; import { deepEqual, isFabric, isJestEnv, tagMessage } from '../utils'; import { ActionType } from '../ActionType'; diff --git a/src/handlers/gestureHandlerCommon.ts b/src/handlers/gestureHandlerCommon.ts index 9927d852eb..8979375d7a 100644 --- a/src/handlers/gestureHandlerCommon.ts +++ b/src/handlers/gestureHandlerCommon.ts @@ -3,15 +3,10 @@ // e.g. React.createRef -> React.createRef. // See https://www.typescriptlang.org/docs/handbook/classes.html#constructor-functions for reference. import * as React from 'react'; -import { Platform, findNodeHandle as findNodeHandleRN } from 'react-native'; import { State } from '../State'; import { TouchEventType } from '../TouchEventType'; import { ValueOf } from '../typeUtils'; -import { handlerIDToTag } from './handlersRegistry'; -import { toArray } from '../utils'; -import RNGestureHandlerModule from '../RNGestureHandlerModule'; -import { ghQueueMicrotask } from '../ghQueueMicrotask'; import { PointerType } from '../PointerType'; const commonProps = [ @@ -214,74 +209,3 @@ export type BaseGestureHandlerProps< // implicit `children` prop has been removed in @types/react^18.0.0 children?: React.ReactNode; }; - -function isConfigParam(param: unknown, name: string) { - // param !== Object(param) returns false if `param` is a function - // or an object and returns true if `param` is null - return ( - param !== undefined && - (param !== Object(param) || - !('__isNative' in (param as Record))) && - name !== 'onHandlerStateChange' && - name !== 'onGestureEvent' - ); -} - -export function filterConfig( - props: Record, - validProps: string[], - defaults: Record = {} -) { - const filteredConfig = { ...defaults }; - for (const key of validProps) { - let value = props[key]; - if (isConfigParam(value, key)) { - if (key === 'simultaneousHandlers' || key === 'waitFor') { - value = transformIntoHandlerTags(props[key]); - } else if (key === 'hitSlop' && typeof value !== 'object') { - value = { top: value, left: value, bottom: value, right: value }; - } - filteredConfig[key] = value; - } - } - return filteredConfig; -} - -function transformIntoHandlerTags(handlerIDs: any) { - handlerIDs = toArray(handlerIDs); - - if (Platform.OS === 'web') { - return handlerIDs - .map(({ current }: { current: any }) => current) - .filter((handle: any) => handle); - } - // converts handler string IDs into their numeric tags - return handlerIDs - .map( - (handlerID: any) => - handlerIDToTag[handlerID] || handlerID.current?.handlerTag || -1 - ) - .filter((handlerTag: number) => handlerTag > 0); -} - -export function findNodeHandle( - node: null | number | React.Component | React.ComponentClass -): null | number | React.Component | React.ComponentClass { - if (Platform.OS === 'web') { - return node; - } - return findNodeHandleRN(node); -} - -let flushOperationsScheduled = false; - -export function scheduleFlushOperations() { - if (!flushOperationsScheduled) { - flushOperationsScheduled = true; - ghQueueMicrotask(() => { - RNGestureHandlerModule.flushOperations(); - - flushOperationsScheduled = false; - }); - } -} diff --git a/src/handlers/gestureHandlerTypesCompat.ts b/src/handlers/gestureHandlerTypesCompat.ts index 5065cb3b93..8843a96eae 100644 --- a/src/handlers/gestureHandlerTypesCompat.ts +++ b/src/handlers/gestureHandlerTypesCompat.ts @@ -1,47 +1,33 @@ -import { +import type { BaseButtonProps, BorderlessButtonProps, RawButtonProps, RectButtonProps, -} from '../components/GestureButtons'; +} from '../components/GestureButtonsProps'; import { GestureEvent, GestureEventPayload, HandlerStateChangeEvent, HandlerStateChangeEventPayload, } from './gestureHandlerCommon'; -import { +import type { FlingGestureHandlerProps } from './FlingGestureHandler'; +import type { FlingGestureHandlerEventPayload, - FlingGestureHandlerProps, -} from './FlingGestureHandler'; -import { ForceTouchGestureHandlerEventPayload, - ForceTouchGestureHandlerProps, -} from './ForceTouchGestureHandler'; -import { LongPressGestureHandlerEventPayload, - LongPressGestureHandlerProps, -} from './LongPressGestureHandler'; -import { PanGestureHandlerEventPayload, - PanGestureHandlerProps, -} from './PanGestureHandler'; -import { PinchGestureHandlerEventPayload, - PinchGestureHandlerProps, -} from './PinchGestureHandler'; -import { RotationGestureHandlerEventPayload, - RotationGestureHandlerProps, -} from './RotationGestureHandler'; -import { TapGestureHandlerEventPayload, - TapGestureHandlerProps, -} from './TapGestureHandler'; -import { NativeViewGestureHandlerPayload, - NativeViewGestureHandlerProps, -} from './NativeViewGestureHandler'; +} from './GestureHandlerEventPayload'; +import type { ForceTouchGestureHandlerProps } from './ForceTouchGestureHandler'; +import type { LongPressGestureHandlerProps } from './LongPressGestureHandler'; +import type { PanGestureHandlerProps } from './PanGestureHandler'; +import type { PinchGestureHandlerProps } from './PinchGestureHandler'; +import type { RotationGestureHandlerProps } from './RotationGestureHandler'; +import type { TapGestureHandlerProps } from './TapGestureHandler'; +import type { NativeViewGestureHandlerProps } from './NativeViewGestureHandler'; // events export type GestureHandlerGestureEventNativeEvent = GestureEventPayload; diff --git a/src/handlers/gestures/GestureDetector/attachHandlers.ts b/src/handlers/gestures/GestureDetector/attachHandlers.ts index 0ded87eb4e..760f4af8f0 100644 --- a/src/handlers/gestures/GestureDetector/attachHandlers.ts +++ b/src/handlers/gestures/GestureDetector/attachHandlers.ts @@ -2,10 +2,7 @@ import React from 'react'; import { GestureType, HandlerCallbacks } from '../gesture'; import { registerHandler } from '../../handlersRegistry'; import RNGestureHandlerModule from '../../../RNGestureHandlerModule'; -import { - filterConfig, - scheduleFlushOperations, -} from '../../gestureHandlerCommon'; +import { filterConfig, scheduleFlushOperations } from '../../utils'; import { ComposedGesture } from '../gestureComposition'; import { ActionType } from '../../../ActionType'; import { Platform } from 'react-native'; diff --git a/src/handlers/gestures/GestureDetector/dropHandlers.ts b/src/handlers/gestures/GestureDetector/dropHandlers.ts index 94e9a2081b..2f8510c5c2 100644 --- a/src/handlers/gestures/GestureDetector/dropHandlers.ts +++ b/src/handlers/gestures/GestureDetector/dropHandlers.ts @@ -1,6 +1,6 @@ import { unregisterHandler } from '../../handlersRegistry'; import RNGestureHandlerModule from '../../../RNGestureHandlerModule'; -import { scheduleFlushOperations } from '../../gestureHandlerCommon'; +import { scheduleFlushOperations } from '../../utils'; import { AttachedGestureState } from './types'; export function dropHandlers(preparedGesture: AttachedGestureState) { diff --git a/src/handlers/gestures/GestureDetector/updateHandlers.ts b/src/handlers/gestures/GestureDetector/updateHandlers.ts index 42bdc0d293..83552105cd 100644 --- a/src/handlers/gestures/GestureDetector/updateHandlers.ts +++ b/src/handlers/gestures/GestureDetector/updateHandlers.ts @@ -1,10 +1,7 @@ import { GestureType, HandlerCallbacks } from '../gesture'; import { registerHandler } from '../../handlersRegistry'; import RNGestureHandlerModule from '../../../RNGestureHandlerModule'; -import { - filterConfig, - scheduleFlushOperations, -} from '../../gestureHandlerCommon'; +import { filterConfig, scheduleFlushOperations } from '../../utils'; import { ComposedGesture } from '../gestureComposition'; import { ghQueueMicrotask } from '../../../ghQueueMicrotask'; import { AttachedGestureState } from './types'; diff --git a/src/handlers/gestures/flingGesture.ts b/src/handlers/gestures/flingGesture.ts index 861b8fe565..abf6edbe74 100644 --- a/src/handlers/gestures/flingGesture.ts +++ b/src/handlers/gestures/flingGesture.ts @@ -1,8 +1,6 @@ import { BaseGesture, BaseGestureConfig } from './gesture'; -import { - FlingGestureConfig, - FlingGestureHandlerEventPayload, -} from '../FlingGestureHandler'; +import { FlingGestureConfig } from '../FlingGestureHandler'; +import type { FlingGestureHandlerEventPayload } from '../GestureHandlerEventPayload'; export class FlingGesture extends BaseGesture { public config: BaseGestureConfig & FlingGestureConfig = {}; diff --git a/src/handlers/gestures/forceTouchGesture.ts b/src/handlers/gestures/forceTouchGesture.ts index cb75c9ae6c..7bd1ed73a7 100644 --- a/src/handlers/gestures/forceTouchGesture.ts +++ b/src/handlers/gestures/forceTouchGesture.ts @@ -1,8 +1,6 @@ import { BaseGestureConfig, ContinousBaseGesture } from './gesture'; -import { - ForceTouchGestureConfig, - ForceTouchGestureHandlerEventPayload, -} from '../ForceTouchGestureHandler'; +import { ForceTouchGestureConfig } from '../ForceTouchGestureHandler'; +import type { ForceTouchGestureHandlerEventPayload } from '../GestureHandlerEventPayload'; import { GestureUpdateEvent } from '../gestureHandlerCommon'; export type ForceTouchGestureChangeEventPayload = { diff --git a/src/handlers/gestures/gesture.ts b/src/handlers/gestures/gesture.ts index c007ea15d7..cf5382a880 100644 --- a/src/handlers/gestures/gesture.ts +++ b/src/handlers/gestures/gesture.ts @@ -1,5 +1,3 @@ -import { FlingGestureHandlerEventPayload } from '../FlingGestureHandler'; -import { ForceTouchGestureHandlerEventPayload } from '../ForceTouchGestureHandler'; import { HitSlop, CommonGestureConfig, @@ -9,14 +7,18 @@ import { ActiveCursor, MouseButton, } from '../gestureHandlerCommon'; -import { getNextHandlerTag } from '../handlersRegistry'; +import { getNextHandlerTag } from '../getNextHandlerTag'; import { GestureStateManagerType } from './gestureStateManager'; -import { LongPressGestureHandlerEventPayload } from '../LongPressGestureHandler'; -import { PanGestureHandlerEventPayload } from '../PanGestureHandler'; -import { PinchGestureHandlerEventPayload } from '../PinchGestureHandler'; -import { RotationGestureHandlerEventPayload } from '../RotationGestureHandler'; -import { TapGestureHandlerEventPayload } from '../TapGestureHandler'; -import { NativeViewGestureHandlerPayload } from '../NativeViewGestureHandler'; +import type { + FlingGestureHandlerEventPayload, + ForceTouchGestureHandlerEventPayload, + LongPressGestureHandlerEventPayload, + PanGestureHandlerEventPayload, + PinchGestureHandlerEventPayload, + RotationGestureHandlerEventPayload, + TapGestureHandlerEventPayload, + NativeViewGestureHandlerPayload, +} from '../GestureHandlerEventPayload'; import { isRemoteDebuggingEnabled } from '../../utils'; export type GestureType = diff --git a/src/handlers/gestures/longPressGesture.ts b/src/handlers/gestures/longPressGesture.ts index 808c7d417c..4fe555a39d 100644 --- a/src/handlers/gestures/longPressGesture.ts +++ b/src/handlers/gestures/longPressGesture.ts @@ -1,8 +1,6 @@ import { BaseGesture, BaseGestureConfig } from './gesture'; -import { - LongPressGestureConfig, - LongPressGestureHandlerEventPayload, -} from '../LongPressGestureHandler'; +import { LongPressGestureConfig } from '../LongPressGestureHandler'; +import type { LongPressGestureHandlerEventPayload } from '../GestureHandlerEventPayload'; export class LongPressGesture extends BaseGesture { public config: BaseGestureConfig & LongPressGestureConfig = {}; diff --git a/src/handlers/gestures/nativeGesture.ts b/src/handlers/gestures/nativeGesture.ts index 84c9de9b33..b8b00abe44 100644 --- a/src/handlers/gestures/nativeGesture.ts +++ b/src/handlers/gestures/nativeGesture.ts @@ -1,8 +1,6 @@ import { BaseGestureConfig, BaseGesture } from './gesture'; -import { - NativeViewGestureConfig, - NativeViewGestureHandlerPayload, -} from '../NativeViewGestureHandler'; +import { NativeViewGestureConfig } from '../NativeViewGestureHandler'; +import type { NativeViewGestureHandlerPayload } from '../GestureHandlerEventPayload'; export class NativeGesture extends BaseGesture { public config: BaseGestureConfig & NativeViewGestureConfig = {}; diff --git a/src/handlers/gestures/panGesture.ts b/src/handlers/gestures/panGesture.ts index 5149ed5d19..366a2725a0 100644 --- a/src/handlers/gestures/panGesture.ts +++ b/src/handlers/gestures/panGesture.ts @@ -1,9 +1,7 @@ import { BaseGestureConfig, ContinousBaseGesture } from './gesture'; import { GestureUpdateEvent } from '../gestureHandlerCommon'; -import { - PanGestureConfig, - PanGestureHandlerEventPayload, -} from '../PanGestureHandler'; +import { PanGestureConfig } from '../PanGestureHandler'; +import type { PanGestureHandlerEventPayload } from '../GestureHandlerEventPayload'; export type PanGestureChangeEventPayload = { changeX: number; diff --git a/src/handlers/gestures/pinchGesture.ts b/src/handlers/gestures/pinchGesture.ts index 69416bd313..d001b09889 100644 --- a/src/handlers/gestures/pinchGesture.ts +++ b/src/handlers/gestures/pinchGesture.ts @@ -1,5 +1,5 @@ import { ContinousBaseGesture } from './gesture'; -import { PinchGestureHandlerEventPayload } from '../PinchGestureHandler'; +import type { PinchGestureHandlerEventPayload } from '../GestureHandlerEventPayload'; import { GestureUpdateEvent } from '../gestureHandlerCommon'; export type PinchGestureChangeEventPayload = { diff --git a/src/handlers/gestures/rotationGesture.ts b/src/handlers/gestures/rotationGesture.ts index 7bac78558e..6a53b4a643 100644 --- a/src/handlers/gestures/rotationGesture.ts +++ b/src/handlers/gestures/rotationGesture.ts @@ -1,5 +1,5 @@ import { ContinousBaseGesture } from './gesture'; -import { RotationGestureHandlerEventPayload } from '../RotationGestureHandler'; +import type { RotationGestureHandlerEventPayload } from '../GestureHandlerEventPayload'; import { GestureUpdateEvent } from '../gestureHandlerCommon'; type RotationGestureChangeEventPayload = { diff --git a/src/handlers/gestures/tapGesture.ts b/src/handlers/gestures/tapGesture.ts index e592d4b22f..2126714fd9 100644 --- a/src/handlers/gestures/tapGesture.ts +++ b/src/handlers/gestures/tapGesture.ts @@ -1,8 +1,6 @@ import { BaseGestureConfig, BaseGesture } from './gesture'; -import { - TapGestureConfig, - TapGestureHandlerEventPayload, -} from '../TapGestureHandler'; +import { TapGestureConfig } from '../TapGestureHandler'; +import type { TapGestureHandlerEventPayload } from '../GestureHandlerEventPayload'; export class TapGesture extends BaseGesture { public config: BaseGestureConfig & TapGestureConfig = {}; diff --git a/src/handlers/getNextHandlerTag.ts b/src/handlers/getNextHandlerTag.ts new file mode 100644 index 0000000000..9820900190 --- /dev/null +++ b/src/handlers/getNextHandlerTag.ts @@ -0,0 +1,5 @@ +let handlerTag = 1; + +export function getNextHandlerTag(): number { + return handlerTag++; +} diff --git a/src/handlers/handlersRegistry.ts b/src/handlers/handlersRegistry.ts index 87f13fda50..3a19447edf 100644 --- a/src/handlers/handlersRegistry.ts +++ b/src/handlers/handlersRegistry.ts @@ -7,12 +7,6 @@ const gestures = new Map(); const oldHandlers = new Map(); const testIDs = new Map(); -let handlerTag = 1; - -export function getNextHandlerTag(): number { - return handlerTag++; -} - export function registerHandler( handlerTag: number, handler: GestureType, diff --git a/src/handlers/utils.ts b/src/handlers/utils.ts new file mode 100644 index 0000000000..13fdc488ab --- /dev/null +++ b/src/handlers/utils.ts @@ -0,0 +1,75 @@ +import * as React from 'react'; +import { Platform, findNodeHandle as findNodeHandleRN } from 'react-native'; +import { handlerIDToTag } from './handlersRegistry'; +import { toArray } from '../utils'; +import RNGestureHandlerModule from '../RNGestureHandlerModule'; +import { ghQueueMicrotask } from '../ghQueueMicrotask'; + +function isConfigParam(param: unknown, name: string) { + // param !== Object(param) returns false if `param` is a function + // or an object and returns true if `param` is null + return ( + param !== undefined && + (param !== Object(param) || + !('__isNative' in (param as Record))) && + name !== 'onHandlerStateChange' && + name !== 'onGestureEvent' + ); +} + +export function filterConfig( + props: Record, + validProps: string[], + defaults: Record = {} +) { + const filteredConfig = { ...defaults }; + for (const key of validProps) { + let value = props[key]; + if (isConfigParam(value, key)) { + if (key === 'simultaneousHandlers' || key === 'waitFor') { + value = transformIntoHandlerTags(props[key]); + } else if (key === 'hitSlop' && typeof value !== 'object') { + value = { top: value, left: value, bottom: value, right: value }; + } + filteredConfig[key] = value; + } + } + return filteredConfig; +} +function transformIntoHandlerTags(handlerIDs: any) { + handlerIDs = toArray(handlerIDs); + + if (Platform.OS === 'web') { + return handlerIDs + .map(({ current }: { current: any }) => current) + .filter((handle: any) => handle); + } + // converts handler string IDs into their numeric tags + return handlerIDs + .map( + (handlerID: any) => + handlerIDToTag[handlerID] || handlerID.current?.handlerTag || -1 + ) + .filter((handlerTag: number) => handlerTag > 0); +} + +export function findNodeHandle( + node: null | number | React.Component | React.ComponentClass +): null | number | React.Component | React.ComponentClass { + if (Platform.OS === 'web') { + return node; + } + return findNodeHandleRN(node); +} +let flushOperationsScheduled = false; + +export function scheduleFlushOperations() { + if (!flushOperationsScheduled) { + flushOperationsScheduled = true; + ghQueueMicrotask(() => { + RNGestureHandlerModule.flushOperations(); + + flushOperationsScheduled = false; + }); + } +} diff --git a/src/index.ts b/src/index.ts index 3c21bbe01c..4a28df0673 100644 --- a/src/index.ts +++ b/src/index.ts @@ -23,35 +23,24 @@ export { MouseButton } from './handlers/gestureHandlerCommon'; export type { GestureType } from './handlers/gestures/gesture'; export type { TapGestureHandlerEventPayload, - TapGestureHandlerProps, -} from './handlers/TapGestureHandler'; -export type { ForceTouchGestureHandlerEventPayload, - ForceTouchGestureHandlerProps, -} from './handlers/ForceTouchGestureHandler'; -export type { ForceTouchGestureChangeEventPayload } from './handlers/gestures/forceTouchGesture'; -export type { LongPressGestureHandlerEventPayload, - LongPressGestureHandlerProps, -} from './handlers/LongPressGestureHandler'; -export type { PanGestureHandlerEventPayload, - PanGestureHandlerProps, -} from './handlers/PanGestureHandler'; -export type { PanGestureChangeEventPayload } from './handlers/gestures/panGesture'; -export type { PinchGestureHandlerEventPayload, - PinchGestureHandlerProps, -} from './handlers/PinchGestureHandler'; -export type { PinchGestureChangeEventPayload } from './handlers/gestures/pinchGesture'; -export type { RotationGestureHandlerEventPayload, - RotationGestureHandlerProps, -} from './handlers/RotationGestureHandler'; -export type { + NativeViewGestureHandlerPayload, FlingGestureHandlerEventPayload, - FlingGestureHandlerProps, -} from './handlers/FlingGestureHandler'; +} from './handlers/GestureHandlerEventPayload'; +export type { TapGestureHandlerProps } from './handlers/TapGestureHandler'; +export type { ForceTouchGestureHandlerProps } from './handlers/ForceTouchGestureHandler'; +export type { ForceTouchGestureChangeEventPayload } from './handlers/gestures/forceTouchGesture'; +export type { LongPressGestureHandlerProps } from './handlers/LongPressGestureHandler'; +export type { PanGestureHandlerProps } from './handlers/PanGestureHandler'; +export type { PanGestureChangeEventPayload } from './handlers/gestures/panGesture'; +export type { PinchGestureHandlerProps } from './handlers/PinchGestureHandler'; +export type { PinchGestureChangeEventPayload } from './handlers/gestures/pinchGesture'; +export type { RotationGestureHandlerProps } from './handlers/RotationGestureHandler'; +export type { FlingGestureHandlerProps } from './handlers/FlingGestureHandler'; export { TapGestureHandler } from './handlers/TapGestureHandler'; export { ForceTouchGestureHandler } from './handlers/ForceTouchGestureHandler'; export { LongPressGestureHandler } from './handlers/LongPressGestureHandler'; @@ -60,10 +49,7 @@ export { PinchGestureHandler } from './handlers/PinchGestureHandler'; export { RotationGestureHandler } from './handlers/RotationGestureHandler'; export { FlingGestureHandler } from './handlers/FlingGestureHandler'; export { default as createNativeWrapper } from './handlers/createNativeWrapper'; -export type { - NativeViewGestureHandlerPayload, - NativeViewGestureHandlerProps, -} from './handlers/NativeViewGestureHandler'; +export type { NativeViewGestureHandlerProps } from './handlers/NativeViewGestureHandler'; export { GestureDetector } from './handlers/gestures/GestureDetector'; export { GestureObjects as Gesture } from './handlers/gestures/gestureObjects'; export type { TapGestureType as TapGesture } from './handlers/gestures/tapGesture'; @@ -89,7 +75,7 @@ export type { BaseButtonProps, RectButtonProps, BorderlessButtonProps, -} from './components/GestureButtons'; +} from './components/GestureButtonsProps'; export { RawButton, BaseButton, diff --git a/src/jestUtils/jestUtils.ts b/src/jestUtils/jestUtils.ts index 4e7c54d407..61d0f07f3f 100644 --- a/src/jestUtils/jestUtils.ts +++ b/src/jestUtils/jestUtils.ts @@ -3,12 +3,10 @@ import { DeviceEventEmitter } from 'react-native'; import { ReactTestInstance } from 'react-test-renderer'; import { FlingGestureHandler, - FlingGestureHandlerEventPayload, flingHandlerName, } from '../handlers/FlingGestureHandler'; import { ForceTouchGestureHandler, - ForceTouchGestureHandlerEventPayload, forceTouchHandlerName, } from '../handlers/ForceTouchGestureHandler'; import { @@ -28,32 +26,36 @@ import { TapGesture } from '../handlers/gestures/tapGesture'; import { findHandlerByTestID } from '../handlers/handlersRegistry'; import { LongPressGestureHandler, - LongPressGestureHandlerEventPayload, longPressHandlerName, } from '../handlers/LongPressGestureHandler'; +import type { + FlingGestureHandlerEventPayload, + ForceTouchGestureHandlerEventPayload, + LongPressGestureHandlerEventPayload, + NativeViewGestureHandlerPayload, + PanGestureHandlerEventPayload, + PinchGestureHandlerEventPayload, + RotationGestureHandlerEventPayload, + TapGestureHandlerEventPayload, +} from '../handlers/GestureHandlerEventPayload'; import { NativeViewGestureHandler, - NativeViewGestureHandlerPayload, nativeViewHandlerName, } from '../handlers/NativeViewGestureHandler'; import { PanGestureHandler, - PanGestureHandlerEventPayload, panHandlerName, } from '../handlers/PanGestureHandler'; import { PinchGestureHandler, - PinchGestureHandlerEventPayload, pinchHandlerName, } from '../handlers/PinchGestureHandler'; import { RotationGestureHandler, - RotationGestureHandlerEventPayload, rotationHandlerName, } from '../handlers/RotationGestureHandler'; import { TapGestureHandler, - TapGestureHandlerEventPayload, tapHandlerName, } from '../handlers/TapGestureHandler'; import { State } from '../State'; diff --git a/src/web/Gestures.ts b/src/web/Gestures.ts index c939a210b0..279b1152d1 100644 --- a/src/web/Gestures.ts +++ b/src/web/Gestures.ts @@ -9,7 +9,7 @@ import NativeViewGestureHandler from './handlers/NativeViewGestureHandler'; import ManualGestureHandler from './handlers/ManualGestureHandler'; import HoverGestureHandler from './handlers/HoverGestureHandler'; -//Hammer Handlers +// Hammer Handlers import HammerNativeViewGestureHandler from '../web_hammer/NativeViewGestureHandler'; import HammerPanGestureHandler from '../web_hammer/PanGestureHandler'; import HammerTapGestureHandler from '../web_hammer/TapGestureHandler'; diff --git a/src/web_hammer/NodeManager.ts b/src/web_hammer/NodeManager.ts index 664d874938..f5ec70a43b 100644 --- a/src/web_hammer/NodeManager.ts +++ b/src/web_hammer/NodeManager.ts @@ -1,10 +1,4 @@ -import { ValueOf } from '../typeUtils'; -import { HammerGestures } from '../web/Gestures'; - -const gestures: Record< - number, - InstanceType> -> = {}; +export const gestures: Record = {}; export function getHandler(tag: number) { if (tag in gestures) { @@ -14,10 +8,7 @@ export function getHandler(tag: number) { throw new Error(`No handler for tag ${tag}`); } -export function createGestureHandler( - handlerTag: number, - handler: InstanceType> -) { +export function createGestureHandler(handlerTag: number, handler: any) { if (handlerTag in gestures) { throw new Error(`Handler with tag ${handlerTag} already exists`); }