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.
facebook · Mar 29, 2019 · 700f17b · 700f17b
1 parent 5d336df
commit 700f17b
Showing 1 changed file with 18 additions and 34 deletions.
diff --git a/packages/react-events/src/Press.js b/packages/react-events/src/Press.js
@@ -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) {