[Flare] Remove longpress from press responder (#16242)

Long press will move to a separate responder.

Author: Nicolas Gallagher

packages/react-events/docs/Press.md

@@ -3,9 +3,9 @@
 The `Press` module responds to press events on the element it wraps. Press
 events are dispatched for `mouse`, `pen`, `touch`, `trackpad`, and `keyboard`
 pointer types. Press events are only dispatched for keyboards when pressing the
-Enter or Spacebar keys. If neither `onPress` nor `onLongPress` are called, this
-signifies that the press ended outside of the element hit bounds (i.e., the user
-aborted the press).
+Enter or Spacebar keys. If `onPress` is not called, this signifies that the
+press ended outside of the element hit bounds (i.e., the user aborted the
+press).
 
 Press events do not propagate between `Press` event responders.
 
@@ -17,7 +17,6 @@ const Button = (props) => (
     <Press
       onPress={props.onPress}
       onPressChange={setPressed}
-      onLongPress={props.onLongPress}
     >
       <div
         {...props}
@@ -60,8 +59,6 @@ type PressEvent = {
     | 'pressend'
     | 'presschange'
     | 'pressmove'
-    | 'longpress'
-    | 'longpresschange'
     | 'contextmenu',
   x: number,
   y: number
@@ -77,10 +74,6 @@ type PressOffset = {
 
 ## Props
 
-### delayLongPress: number = 500ms
-
-The duration of a press before `onLongPress` and `onLongPressChange` are called.
-
 ### delayPressEnd: number
 
 The duration of the delay between when the press ends and when `onPressEnd` is
@@ -101,27 +94,10 @@ Disables all `Press` events.
 Called when the context menu is shown. When a press is active, the context menu
 will only be shown (and the press cancelled) if `preventDefault` is `false`.
 
-### onLongPress: (e: PressEvent) => void
-
-Called once the element has been pressed for the length of `delayLongPress`. If
-the press point moves more than 10px `onLongPress` is cancelled.
-
-### onLongPressChange: boolean => void
-
-Called when the element changes long-press state.
-
-### longPressShouldCancelPress: () => boolean
-
-Determines whether calling `onPress` should be cancelled if `onLongPress` or
-`onLongPressChange` have already been called. Default is `false`.
-
 ### onPress: (e: PressEvent) => void
 
-Called immediately after a press is released, unless either 1) the press is
-released outside the hit bounds of the element (accounting for
-`pressRetentionOffset`), or 2) the press was a long press,
-and `onLongPress` or `onLongPressChange` props are provided, and
-`onLongPressCancelsPress()` is `true`.
+Called immediately after a press is released, unless the press is released
+outside the hit bounds of the element (accounting for `pressRetentionOffset`.
 
 ### onPressChange: boolean => void
 
@@ -164,7 +140,6 @@ is still called.
 
 Whether to `preventDefault()` native events. Native behavior is prevented by
 default. If an anchor is the child of `Press`, internal and external navigation
-should be performed in `onPress`/`onLongPress`. To rely on native behavior
-instead, set `preventDefault` to `false`, but be aware that native behavior will
-take place immediately after interaction without respect for delays or long
-press.
+should be performed in `onPress`. To rely on native behavior instead, set
+`preventDefault` to `false`, but be aware that native behavior will take place
+immediately after interaction without respect for delays or long press.

packages/react-events/src/dom/Press.js

@@ -19,8 +19,6 @@ import {DiscreteEvent, UserBlockingEvent} from 'shared/ReactTypes';
 
 type PressListenerProps = {|
   onContextMenu: (e: PressEvent) => void,
-  onLongPress: (e: PressEvent) => void,
-  onLongPressChange: boolean => void,
   onPress: (e: PressEvent) => void,
   onPressChange: boolean => void,
   onPressEnd: (e: PressEvent) => void,
@@ -30,7 +28,6 @@ type PressListenerProps = {|
 
 type PressProps = {|
   disabled: boolean,
-  delayLongPress: number,
   delayPressEnd: number,
   delayPressStart: number,
   pressRetentionOffset: {
@@ -42,8 +39,6 @@ type PressProps = {|
   preventContextMenu: boolean,
   preventDefault: boolean,
   stopPropagation: boolean,
-  enableLongPress: boolean,
-  longPressShouldCancelPress: () => boolean,
 |};
 
 type PressState = {
@@ -54,10 +49,8 @@ type PressState = {
   addedRootEvents: boolean,
   isActivePressed: boolean,
   isActivePressStart: boolean,
-  isLongPressed: boolean,
   isPressed: boolean,
   isPressWithinResponderRegion: boolean,
-  longPressTimeout: null | number,
   pointerType: PointerType,
   pressTarget: null | Element | Document,
   pressEndTimeout: null | number,
@@ -86,8 +79,6 @@ type PressEventType =
   | 'pressstart'
   | 'pressend'
   | 'presschange'
-  | 'longpress'
-  | 'longpresschange'
   | 'contextmenu';
 
 type PressEvent = {|
@@ -117,7 +108,6 @@ const isMac =
     : false;
 const DEFAULT_PRESS_END_DELAY_MS = 0;
 const DEFAULT_PRESS_START_DELAY_MS = 0;
-const DEFAULT_LONG_PRESS_DELAY_MS = 500;
 const DEFAULT_PRESS_RETENTION_OFFSET = {
   bottom: 20,
   top: 20,
@@ -250,14 +240,6 @@ function dispatchPressChangeEvent(
   context.dispatchEvent('onPressChange', bool, DiscreteEvent);
 }
 
-function dispatchLongPressChangeEvent(
-  context: ReactDOMResponderContext,
-  state: PressState,
-): void {
-  const bool = state.isLongPressed;
-  context.dispatchEvent('onLongPressChange', bool, DiscreteEvent);
-}
-
 function activate(event: ReactDOMResponderEvent, context, props, state) {
   const nativeEvent: any = event.nativeEvent;
   const {clientX: x, clientY: y} = state.touchEvent || nativeEvent;
@@ -281,15 +263,10 @@ function activate(event: ReactDOMResponderEvent, context, props, state) {
 }
 
 function deactivate(event: ?ReactDOMResponderEvent, context, props, state) {
-  const wasLongPressed = state.isLongPressed;
   state.isActivePressed = false;
-  state.isLongPressed = false;
 
   dispatchEvent('onPressEnd', event, context, state, 'pressend', DiscreteEvent);
   dispatchPressChangeEvent(context, state);
-  if (wasLongPressed && props.enableLongPress) {
-    dispatchLongPressChangeEvent(context, state);
-  }
 }
 
 function dispatchPressStartEvents(
@@ -308,27 +285,6 @@ function dispatchPressStartEvents(
   const dispatch = () => {
     state.isActivePressStart = true;
     activate(event, context, props, state);
-
-    if (!state.isLongPressed && props.enableLongPress) {
-      const delayLongPress = calculateDelayMS(
-        props.delayLongPress,
-        10,
-        DEFAULT_LONG_PRESS_DELAY_MS,
-      );
-      state.longPressTimeout = context.setTimeout(() => {
-        state.isLongPressed = true;
-        state.longPressTimeout = null;
-        dispatchEvent(
-          'onLongPress',
-          event,
-          context,
-          state,
-          'longpress',
-          DiscreteEvent,
-        );
-        dispatchLongPressChangeEvent(context, state);
-      }, delayLongPress);
-    }
   };
 
   if (!state.isActivePressStart) {
@@ -360,11 +316,6 @@ function dispatchPressEndEvents(
   state.isActivePressStart = false;
   state.isPressed = false;
 
-  if (state.longPressTimeout !== null) {
-    context.clearTimeout(state.longPressTimeout);
-    state.longPressTimeout = null;
-  }
-
   if (!wasActivePressStart && state.pressStartTimeout !== null) {
     context.clearTimeout(state.pressStartTimeout);
     state.pressStartTimeout = null;
@@ -596,10 +547,8 @@ const pressResponderImpl = {
       addedRootEvents: false,
       isActivePressed: false,
       isActivePressStart: false,
-      isLongPressed: false,
       isPressed: false,
       isPressWithinResponderRegion: true,
-      longPressTimeout: null,
       pointerType: '',
       pressEndTimeout: null,
       pressStartTimeout: null,
@@ -823,19 +772,6 @@ const pressResponderImpl = {
               'pressmove',
               UserBlockingEvent,
             );
-            if (
-              state.activationPosition != null &&
-              state.longPressTimeout != null
-            ) {
-              const deltaX = state.activationPosition.x - nativeEvent.clientX;
-              const deltaY = state.activationPosition.y - nativeEvent.clientY;
-              if (
-                Math.hypot(deltaX, deltaY) > 10 &&
-                state.longPressTimeout != null
-              ) {
-                context.clearTimeout(state.longPressTimeout);
-              }
-            }
           } else {
             dispatchPressStartEvents(event, context, props, state);
           }
@@ -900,7 +836,6 @@ const pressResponderImpl = {
             }
           }
 
-          const wasLongPressed = state.isLongPressed;
           const pressTarget = state.pressTarget;
           dispatchPressEndEvents(event, context, props, state);
 
@@ -928,23 +863,14 @@ const pressResponderImpl = {
               }
             }
             if (state.isPressWithinResponderRegion && button !== 1) {
-              if (
-                !(
-                  wasLongPressed &&
-                  props.enableLongPress &&
-                  props.longPressShouldCancelPress &&
-                  props.longPressShouldCancelPress()
-                )
-              ) {
-                dispatchEvent(
-                  'onPress',
-                  event,
-                  context,
-                  state,
-                  'press',
-                  DiscreteEvent,
-                );
-              }
+              dispatchEvent(
+                'onPress',
+                event,
+                context,
+                state,
+                'press',
+                DiscreteEvent,
+              );
             }
           }
           state.touchEvent = null;