Fix longpress in experimental Press event module (#15246)
The 'longpress' event is dispatched during a press interaction, rather than after it has ended. The 'longPressCancelsPress' prop can be used to prevent 'press' being dispatched if 'longpress' has already been dispatched.
Nicolas Gallagher committed
Mar 28, 2019 at 21:44 UTC
700f17be6752a13a8ead86458e343d2d637ee3ee
1 file changed
+18
-34
packages/react-events/src/Press.js
+18
-34
@@ -80,6 +80,15 @@ function dispatchPressInEvents(
80
true,
81
);
82
}
83
+ if (props.onLongPress) {
84
+ const longPressEventListener = e => {
85
+ props.onLongPress(e);
86
+ if (e.nativeEvent.defaultPrevented) {
87
+ state.defaultPrevented = true;
88
+ }
89
+ };
90
+ dispatchPressEvent(context, 'longpress', state, longPressEventListener);
91
+ }
92
}, longPressDelay);
93
}
94
}
@@ -112,17 +121,6 @@ function dispatchPressOutEvents(
121
true,
122
);
123
}
115
- if (props.onLongPressChange && state.isLongPressed) {
116
- const longPressChangeEventListener = () => {
117
- props.onLongPressChange(false);
118
- };
119
- context.dispatchEvent(
120
- 'longpresschange',
121
- longPressChangeEventListener,
122
- state.pressTarget,
123
- true,
124
- );
125
- }
124
}
125
126
function isAnchorTagElement(eventTarget: EventTarget): boolean {
@@ -220,14 +218,10 @@ const PressResponder = {
218
target !== null &&
219
context.isTargetWithinEventComponent(target)
220
) {
223
- if (state.isLongPressed && props.onLongPress) {
224
- dispatchPressEvent(
225
- context,
226
- 'longpress',
227
- state,
228
- props.onLongPress,
229
- );
230
- } else if (props.onPress) {
221
+ if (
222
+ props.onPress &&
223
+ !(state.isLongPressed && props.longPressCancelsPress)
224
+ ) {
225
dispatchPressEvent(context, 'press', state, props.onPress);
226
}
227
}
@@ -256,7 +250,7 @@ const PressResponder = {
250
) {
251
return;
252
}
259
- // Ignore right-clicks
253
+ // Ignore middle- and right-clicks
254
if (event.button === 2 || event.button === 1) {
255
return;
256
}
@@ -281,20 +275,10 @@ const PressResponder = {
275
(props.onPress || props.onLongPress)
276
) {
277
if (context.isTargetWithinElement(eventTarget, state.pressTarget)) {
284
- if (state.isLongPressed && props.onLongPress) {
285
- const longPressEventListener = e => {
286
- props.onLongPress(e);
287
- if (e.nativeEvent.defaultPrevented) {
288
- state.defaultPrevented = true;
289
- }
290
- };
291
- dispatchPressEvent(
292
- context,
293
- 'longpress',
294
- state,
295
- longPressEventListener,
296
- );
297
- } else if (props.onPress) {
278
+ if (
279
+ props.onPress &&
280
+ !(state.isLongPressed && props.longPressCancelsPress)
281
+ ) {
282
const pressEventListener = (e, key) => {
283
props.onPress(e, key);
284
if (e.nativeEvent.defaultPrevented) {