UNPKG

4.53 kBPlain TextView Raw
1'use strict';
2import type {
3 DependencyList,
4 NativeEventWrapper,
5 ReanimatedEvent,
6} from './commonTypes';
7import { useHandler } from './useHandler';
8import { useEvent } from './useEvent';
9
10const EVENT_TYPE = {
11 UNDETERMINED: 0,
12 FAILED: 1,
13 BEGAN: 2,
14 CANCELLED: 3,
15 ACTIVE: 4,
16 END: 5,
17} as const;
18
19type StateType = (typeof EVENT_TYPE)[keyof typeof EVENT_TYPE];
20
21// This type comes from React Native Gesture Handler
22// import type { PanGestureHandlerGestureEvent as DefaultEvent } from 'react-native-gesture-handler';
23type DefaultEvent = {
24 nativeEvent: {
25 readonly handlerTag: number;
26 readonly numberOfPointers: number;
27 readonly state: (typeof EVENT_TYPE)[keyof typeof EVENT_TYPE];
28 readonly x: number;
29 readonly y: number;
30 readonly absoluteX: number;
31 readonly absoluteY: number;
32 readonly translationX: number;
33 readonly translationY: number;
34 readonly velocityX: number;
35 readonly velocityY: number;
36 };
37};
38
39interface PropsUsedInUseAnimatedGestureHandler {
40 handlerTag?: number;
41 numberOfPointers?: number;
42 state?: StateType;
43 oldState?: StateType;
44}
45
46export type GestureHandlerEvent<Event extends object> =
47 | ReanimatedEvent<Event>
48 | Event;
49
50type GestureHandler<
51 Event extends NativeEventWrapper<PropsUsedInUseAnimatedGestureHandler>,
52 Context extends Record<string, unknown>
53> = (
54 eventPayload: ReanimatedEvent<Event>,
55 context: Context,
56 isCanceledOrFailed?: boolean
57) => void;
58
59export interface GestureHandlers<
60 Event extends NativeEventWrapper<PropsUsedInUseAnimatedGestureHandler>,
61 Context extends Record<string, unknown>
62> {
63 [key: string]: GestureHandler<Event, Context> | undefined;
64 onStart?: GestureHandler<Event, Context>;
65 onActive?: GestureHandler<Event, Context>;
66 onEnd?: GestureHandler<Event, Context>;
67 onFail?: GestureHandler<Event, Context>;
68 onCancel?: GestureHandler<Event, Context>;
69 onFinish?: GestureHandler<Event, Context>;
70}
71
72/**
73 * @deprecated useAnimatedGestureHandler is an old API which is no longer supported.
74 *
75 * Please check https://docs.swmansion.com/react-native-gesture-handler/docs/guides/upgrading-to-2/
76 * for information about how to migrate to `react-native-gesture-handler` v2
77 */
78export function useAnimatedGestureHandler<
79 Event extends NativeEventWrapper<PropsUsedInUseAnimatedGestureHandler> = DefaultEvent,
80 Context extends Record<string, unknown> = Record<string, unknown>
81>(handlers: GestureHandlers<Event, Context>, dependencies?: DependencyList) {
82 type WebOrNativeEvent = Event | ReanimatedEvent<Event>;
83
84 const { context, doDependenciesDiffer, useWeb } = useHandler<Event, Context>(
85 handlers,
86 dependencies
87 );
88 const handler = (e: WebOrNativeEvent) => {
89 'worklet';
90 const event = useWeb
91 ? // On Web we get events straight from React Native and they don't have
92 // the `eventName` field there. To simplify the types here we just
93 // cast it as the field was available.
94 ((e as Event).nativeEvent as ReanimatedEvent<Event>)
95 : (e as ReanimatedEvent<Event>);
96
97 if (event.state === EVENT_TYPE.BEGAN && handlers.onStart) {
98 handlers.onStart(event, context);
99 }
100 if (event.state === EVENT_TYPE.ACTIVE && handlers.onActive) {
101 handlers.onActive(event, context);
102 }
103 if (
104 event.oldState === EVENT_TYPE.ACTIVE &&
105 event.state === EVENT_TYPE.END &&
106 handlers.onEnd
107 ) {
108 handlers.onEnd(event, context);
109 }
110 if (
111 event.oldState === EVENT_TYPE.BEGAN &&
112 event.state === EVENT_TYPE.FAILED &&
113 handlers.onFail
114 ) {
115 handlers.onFail(event, context);
116 }
117 if (
118 event.oldState === EVENT_TYPE.ACTIVE &&
119 event.state === EVENT_TYPE.CANCELLED &&
120 handlers.onCancel
121 ) {
122 handlers.onCancel(event, context);
123 }
124 if (
125 (event.oldState === EVENT_TYPE.BEGAN ||
126 event.oldState === EVENT_TYPE.ACTIVE) &&
127 event.state !== EVENT_TYPE.BEGAN &&
128 event.state !== EVENT_TYPE.ACTIVE &&
129 handlers.onFinish
130 ) {
131 handlers.onFinish(
132 event,
133 context,
134 event.state === EVENT_TYPE.CANCELLED ||
135 event.state === EVENT_TYPE.FAILED
136 );
137 }
138 };
139
140 if (useWeb) {
141 return handler;
142 }
143
144 // eslint-disable-next-line react-hooks/rules-of-hooks
145 return useEvent<Event>(
146 handler,
147 ['onGestureHandlerStateChange', 'onGestureHandlerEvent'],
148 doDependenciesDiffer
149 // This is not correct but we want to make GH think it receives a function.
150 ) as unknown as (e: Event) => void;
151}