|
1 |
| -import React from 'react'; |
2 |
| -import { DimensionValue, I18nManager, Platform, View } from 'react-native'; |
| 1 | +import React from "react" |
| 2 | +import { DimensionValue, I18nManager, Platform, View } from "react-native" |
3 | 3 | import {
|
4 |
| - GestureHandlerRootView, |
5 |
| - GestureDetector, |
6 |
| - Gesture, |
7 |
| - Directions, |
8 |
| - TouchableWithoutFeedback, |
9 |
| -} from 'react-native-gesture-handler'; |
| 4 | + GestureHandlerRootView, |
| 5 | + GestureDetector, |
| 6 | + Gesture, |
| 7 | + Directions, |
| 8 | + TouchableWithoutFeedback, |
| 9 | +} from "react-native-gesture-handler" |
10 | 10 |
|
11 | 11 | interface Props {
|
12 |
| - width?: DimensionValue; |
13 |
| - height?: DimensionValue; |
14 |
| - onSingleTap: () => void; |
15 |
| - onDoubleTap: () => void; |
16 |
| - onSwipeLeft: () => void; |
17 |
| - onSwipeRight: () => void; |
18 |
| - onSwipeUp: () => void; |
19 |
| - onSwipeDown: () => void; |
20 |
| - onLongPress: () => void; |
21 |
| - children: React.ReactNode; |
| 12 | + width?: DimensionValue |
| 13 | + height?: DimensionValue |
| 14 | + onSingleTap: () => void |
| 15 | + onDoubleTap: () => void |
| 16 | + onSwipeLeft: () => void |
| 17 | + onSwipeRight: () => void |
| 18 | + onSwipeUp: () => void |
| 19 | + onSwipeDown: () => void |
| 20 | + onLongPress: () => void |
| 21 | + children: React.ReactNode |
22 | 22 | }
|
23 | 23 |
|
24 | 24 | export function GestureHandler({
|
25 |
| - width = '100%', |
26 |
| - height = '100%', |
27 |
| - onSingleTap, |
28 |
| - onDoubleTap, |
29 |
| - onSwipeLeft, |
30 |
| - onSwipeRight, |
31 |
| - onSwipeUp, |
32 |
| - onSwipeDown, |
33 |
| - onLongPress, |
34 |
| - children, |
| 25 | + width = "100%", |
| 26 | + height = "100%", |
| 27 | + onSingleTap, |
| 28 | + onDoubleTap, |
| 29 | + onSwipeLeft, |
| 30 | + onSwipeRight, |
| 31 | + onSwipeUp, |
| 32 | + onSwipeDown, |
| 33 | + onLongPress, |
| 34 | + children, |
35 | 35 | }: Props) {
|
36 |
| - const singleTap = Gesture.Tap() |
37 |
| - .runOnJS(true) |
38 |
| - .maxDuration(250) |
39 |
| - .onStart(onSingleTap); |
| 36 | + const singleTap = Gesture.Tap().runOnJS(true).maxDuration(250).onStart(onSingleTap) |
40 | 37 |
|
41 |
| - const doubleTap = Gesture.Tap() |
42 |
| - .runOnJS(true) |
43 |
| - .maxDuration(250) |
44 |
| - .numberOfTaps(2) |
45 |
| - .onStart(onDoubleTap); |
| 38 | + const doubleTap = Gesture.Tap() |
| 39 | + .runOnJS(true) |
| 40 | + .maxDuration(250) |
| 41 | + .numberOfTaps(2) |
| 42 | + .onStart(onDoubleTap) |
46 | 43 |
|
47 |
| - const longPress = Gesture.LongPress().runOnJS(true).onStart(onLongPress); |
| 44 | + const longPress = Gesture.LongPress().runOnJS(true).onStart(onLongPress) |
48 | 45 |
|
49 |
| - const swipeLeft = Gesture.Fling() |
50 |
| - .runOnJS(true) |
51 |
| - .direction(I18nManager.isRTL ? Directions.RIGHT : Directions.LEFT) |
52 |
| - .onStart(onSwipeLeft); |
| 46 | + const swipeLeft = Gesture.Fling() |
| 47 | + .runOnJS(true) |
| 48 | + .direction(I18nManager.isRTL ? Directions.RIGHT : Directions.LEFT) |
| 49 | + .onStart(onSwipeLeft) |
53 | 50 |
|
54 |
| - const swipeRight = Gesture.Fling() |
55 |
| - .runOnJS(true) |
56 |
| - .direction(I18nManager.isRTL ? Directions.LEFT : Directions.RIGHT) |
57 |
| - .onStart(onSwipeRight); |
| 51 | + const swipeRight = Gesture.Fling() |
| 52 | + .runOnJS(true) |
| 53 | + .direction(I18nManager.isRTL ? Directions.LEFT : Directions.RIGHT) |
| 54 | + .onStart(onSwipeRight) |
58 | 55 |
|
59 |
| - const swipeUp = Gesture.Fling() |
60 |
| - .runOnJS(true) |
61 |
| - .direction(Directions.UP) |
62 |
| - .onStart(onSwipeUp); |
| 56 | + const swipeUp = Gesture.Fling().runOnJS(true).direction(Directions.UP).onStart(onSwipeUp) |
63 | 57 |
|
64 |
| - const swipeDown = Gesture.Fling() |
65 |
| - .runOnJS(true) |
66 |
| - .direction(Directions.DOWN) |
67 |
| - .onStart(onSwipeDown); |
| 58 | + const swipeDown = Gesture.Fling().runOnJS(true).direction(Directions.DOWN).onStart(onSwipeDown) |
68 | 59 |
|
69 |
| - let lastTap: number | null = null; |
70 |
| - let timer: NodeJS.Timeout; |
| 60 | + let lastTap: number | null = null |
| 61 | + let timer: NodeJS.Timeout |
71 | 62 |
|
72 |
| - const handleDoubleTap = () => { |
73 |
| - if (lastTap) { |
74 |
| - onDoubleTap(); |
75 |
| - clearTimeout(timer); |
76 |
| - lastTap = null; |
77 |
| - } else { |
78 |
| - lastTap = Date.now(); |
79 |
| - timer = setTimeout(() => { |
80 |
| - onSingleTap(); |
81 |
| - lastTap = null; |
82 |
| - clearTimeout(timer); |
83 |
| - }, 500); |
84 |
| - } |
85 |
| - }; |
| 63 | + const handleDoubleTap = () => { |
| 64 | + if (lastTap) { |
| 65 | + onDoubleTap() |
| 66 | + clearTimeout(timer) |
| 67 | + lastTap = null |
| 68 | + } else { |
| 69 | + lastTap = Date.now() |
| 70 | + timer = setTimeout(() => { |
| 71 | + onSingleTap() |
| 72 | + lastTap = null |
| 73 | + clearTimeout(timer) |
| 74 | + }, 500) |
| 75 | + } |
| 76 | + } |
86 | 77 |
|
87 |
| - if (Platform.OS === 'ios') { |
88 |
| - return ( |
89 |
| - <GestureHandlerRootView style={{ flex: 1 }}> |
90 |
| - <GestureDetector |
91 |
| - gesture={Gesture.Exclusive( |
92 |
| - swipeLeft, |
93 |
| - swipeRight, |
94 |
| - swipeUp, |
95 |
| - swipeDown, |
96 |
| - longPress, |
97 |
| - doubleTap, |
98 |
| - singleTap |
99 |
| - )} |
100 |
| - > |
101 |
| - <TouchableWithoutFeedback |
102 |
| - style={{ width, height }} |
103 |
| - onPress={() => Platform.OS === 'ios' && handleDoubleTap()} |
104 |
| - onLongPress={() => Platform.OS === 'ios' && onLongPress()} |
105 |
| - > |
106 |
| - {children} |
107 |
| - </TouchableWithoutFeedback> |
108 |
| - </GestureDetector> |
109 |
| - </GestureHandlerRootView> |
110 |
| - ); |
111 |
| - } |
112 |
| - return ( |
113 |
| - <GestureHandlerRootView style={{ flex: 1 }}> |
114 |
| - <GestureDetector gesture={Gesture.Exclusive(swipeLeft, swipeRight)}> |
115 |
| - <View style={{ width, height }}>{children}</View> |
116 |
| - </GestureDetector> |
117 |
| - </GestureHandlerRootView> |
118 |
| - ); |
| 78 | + if (Platform.OS === "ios") { |
| 79 | + return ( |
| 80 | + <GestureHandlerRootView style={{ flex: 1 }}> |
| 81 | + <GestureDetector |
| 82 | + gesture={Gesture.Exclusive( |
| 83 | + swipeLeft, |
| 84 | + swipeRight, |
| 85 | + swipeUp, |
| 86 | + swipeDown, |
| 87 | + longPress, |
| 88 | + doubleTap, |
| 89 | + singleTap, |
| 90 | + )} |
| 91 | + > |
| 92 | + <TouchableWithoutFeedback |
| 93 | + style={{ width, height }} |
| 94 | + onPress={() => Platform.OS === "ios" && handleDoubleTap()} |
| 95 | + onLongPress={() => Platform.OS === "ios" && onLongPress()} |
| 96 | + > |
| 97 | + {children} |
| 98 | + </TouchableWithoutFeedback> |
| 99 | + </GestureDetector> |
| 100 | + </GestureHandlerRootView> |
| 101 | + ) |
| 102 | + } |
| 103 | + return ( |
| 104 | + <GestureHandlerRootView style={{ flex: 1 }}> |
| 105 | + <GestureDetector |
| 106 | + gesture={Gesture.Exclusive( |
| 107 | + swipeLeft, |
| 108 | + swipeRight, |
| 109 | + swipeUp, |
| 110 | + swipeDown, |
| 111 | + longPress, |
| 112 | + doubleTap, |
| 113 | + singleTap, |
| 114 | + )} |
| 115 | + > |
| 116 | + <View style={{ width, height }}>{children}</View> |
| 117 | + </GestureDetector> |
| 118 | + </GestureHandlerRootView> |
| 119 | + ) |
119 | 120 | }
|
0 commit comments