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.
This commit is contained in:
Nicolas Gallagher
2019-03-28 21:44:28 -07:00
committed by Dominic Gannaway
parent 5d336df706
commit 700f17be67
+18 -34
View File
@@ -80,6 +80,15 @@ function dispatchPressInEvents(
true,
);
}
if (props.onLongPress) {
const longPressEventListener = e => {
props.onLongPress(e);
if (e.nativeEvent.defaultPrevented) {
state.defaultPrevented = true;
}
};
dispatchPressEvent(context, 'longpress', state, longPressEventListener);
}
}, longPressDelay);
}
}
@@ -112,17 +121,6 @@ function dispatchPressOutEvents(
true,
);
}
if (props.onLongPressChange && state.isLongPressed) {
const longPressChangeEventListener = () => {
props.onLongPressChange(false);
};
context.dispatchEvent(
'longpresschange',
longPressChangeEventListener,
state.pressTarget,
true,
);
}
}
function isAnchorTagElement(eventTarget: EventTarget): boolean {
@@ -220,14 +218,10 @@ const PressResponder = {
target !== null &&
context.isTargetWithinEventComponent(target)
) {
if (state.isLongPressed && props.onLongPress) {
dispatchPressEvent(
context,
'longpress',
state,
props.onLongPress,
);
} else if (props.onPress) {
if (
props.onPress &&
!(state.isLongPressed && props.longPressCancelsPress)
) {
dispatchPressEvent(context, 'press', state, props.onPress);
}
}
@@ -256,7 +250,7 @@ const PressResponder = {
) {
return;
}
// Ignore right-clicks
// Ignore middle- and right-clicks
if (event.button === 2 || event.button === 1) {
return;
}
@@ -281,20 +275,10 @@ const PressResponder = {
(props.onPress || props.onLongPress)
) {
if (context.isTargetWithinElement(eventTarget, state.pressTarget)) {
if (state.isLongPressed && props.onLongPress) {
const longPressEventListener = e => {
props.onLongPress(e);
if (e.nativeEvent.defaultPrevented) {
state.defaultPrevented = true;
}
};
dispatchPressEvent(
context,
'longpress',
state,
longPressEventListener,
);
} else if (props.onPress) {
if (
props.onPress &&
!(state.isLongPressed && props.longPressCancelsPress)
) {
const pressEventListener = (e, key) => {
props.onPress(e, key);
if (e.nativeEvent.defaultPrevented) {