Rename press props in experimental event API (#15263)

Note: this is for an experimental event API that we're testing out internally at Facebook. * onPressIn -> onPressStart * onPressOut -> onPressEnd * longPressCancelsPress -> onLongPressShouldCancelPress
facebook · Mar 30, 2019 · 7f1f5dd · 7f1f5dd
1 parent 2e02469
commit 7f1f5dd
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 23 deletions.
diff --git a/packages/react-events/src/Press.js b/packages/react-events/src/Press.js
@@ -45,7 +45,7 @@ function dispatchPressEvent(
   context.dispatchEvent(name, listener, state.pressTarget, true);
 }
 
-function dispatchPressInEvents(
+function dispatchPressStartEvents(
   context: EventResponderContext,
   props: Object,
   state: PressState,
@@ -57,20 +57,24 @@ function dispatchPressInEvents(
     dispatchPressEvent(context, state, 'presschange', pressChangeEventListener);
   }
 
-  if (props.onPressIn) {
-    dispatchPressEvent(context, state, 'pressin', props.onPressIn);
+  if (props.onPressStart) {
+    dispatchPressEvent(context, state, 'pressstart', props.onPressStart);
   }
   if (props.onPressChange) {
     dispatchPressChangeEvent(true);
   }
   if ((props.onLongPress || props.onLongPressChange) && !state.isLongPressed) {
-    const longPressDelay = props.longPressDelay || 1000;
+    const delayLongPress = calculateDelayMS(props.delayLongPress, 0, 1000);
 
     state.longPressTimeout = setTimeout(() => {
       state.isLongPressed = true;
       state.longPressTimeout = null;
 
-      if (props.onPressChange && props.longPressCancelsPress) {
+      if (
+        props.onPressChange &&
+        props.onLongPressShouldCancelPress &&
+        props.onLongPressShouldCancelPress()
+      ) {
         dispatchPressChangeEvent(false);
       }
 
@@ -95,11 +99,11 @@ function dispatchPressInEvents(
           longPressChangeEventListener,
         );
       }
-    }, longPressDelay);
+    }, delayLongPress);
   }
 }
 
-function dispatchPressOutEvents(
+function dispatchPressEndEvents(
   context: EventResponderContext,
   props: Object,
   state: PressState,
@@ -108,8 +112,8 @@ function dispatchPressOutEvents(
     clearTimeout(state.longPressTimeout);
     state.longPressTimeout = null;
   }
-  if (props.onPressOut) {
-    dispatchPressEvent(context, state, 'pressout', props.onPressOut);
+  if (props.onPressEnd) {
+    dispatchPressEvent(context, state, 'pressend', props.onPressEnd);
   }
   if (props.onPressChange) {
     const pressChangeEventListener = () => {
@@ -134,6 +138,11 @@ function isAnchorTagElement(eventTarget: EventTarget): boolean {
   return (eventTarget: any).nodeName === 'A';
 }
 
+function calculateDelayMS(delay: ?number, min = 0, fallback = 0) {
+  const maybeNumber = delay == null ? null : delay;
+  return Math.max(min, maybeNumber != null ? maybeNumber : fallback);
+}
+
 const PressResponder = {
   targetEventTypes,
   createInitialState(): PressState {
@@ -197,7 +206,7 @@ const PressResponder = {
             return;
           }
           state.pressTarget = eventTarget;
-          dispatchPressInEvents(context, props, state);
+          dispatchPressStartEvents(context, props, state);
           state.isPressed = true;
           context.addRootEventTypes(rootEventTypes);
         }
@@ -209,7 +218,7 @@ const PressResponder = {
           return;
         }
         if (state.isPressed) {
-          dispatchPressOutEvents(context, props, state);
+          dispatchPressEndEvents(context, props, state);
           if (
             eventType !== 'touchcancel' &&
             (props.onPress || props.onLongPress)
@@ -227,7 +236,11 @@ const PressResponder = {
             ) {
               if (
                 props.onPress &&
-                !(state.isLongPressed && props.longPressCancelsPress)
+                !(
+                  state.isLongPressed &&
+                  props.onLongPressShouldCancelPress &&
+                  props.onLongPressShouldCancelPress()
+                )
               ) {
                 dispatchPressEvent(context, state, 'press', props.onPress);
               }
@@ -263,7 +276,7 @@ const PressResponder = {
             }
           }
           state.pressTarget = eventTarget;
-          dispatchPressInEvents(context, props, state);
+          dispatchPressStartEvents(context, props, state);
           state.isPressed = true;
           context.addRootEventTypes(rootEventTypes);
         }
@@ -276,15 +289,19 @@ const PressResponder = {
             state.shouldSkipMouseAfterTouch = false;
             return;
           }
-          dispatchPressOutEvents(context, props, state);
+          dispatchPressEndEvents(context, props, state);
           if (
             state.pressTarget !== null &&
             (props.onPress || props.onLongPress)
           ) {
             if (context.isTargetWithinElement(eventTarget, state.pressTarget)) {
               if (
                 props.onPress &&
-                !(state.isLongPressed && props.longPressCancelsPress)
+                !(
+                  state.isLongPressed &&
+                  props.onLongPressShouldCancelPress &&
+                  props.onLongPressShouldCancelPress()
+                )
               ) {
                 const pressEventListener = e => {
                   props.onPress(e);
@@ -309,7 +326,7 @@ const PressResponder = {
       case 'pointercancel': {
         if (state.isPressed) {
           state.shouldSkipMouseAfterTouch = false;
-          dispatchPressOutEvents(context, props, state);
+          dispatchPressEndEvents(context, props, state);
           state.isPressed = false;
           state.isLongPressed = false;
           context.removeRootEventTypes(rootEventTypes);

diff --git a/packages/react-events/src/__tests__/Press-test.internal.js b/packages/react-events/src/__tests__/Press-test.internal.js
@@ -94,21 +94,21 @@ describe('Press event responder', () => {
     expect(events).toEqual(['keydown', 'press 2']);
   });
 
-  it('should support onPressIn and onPressOut', () => {
+  it('should support onPressStart and onPressEnd', () => {
     let divRef = React.createRef();
     let events = [];
 
-    function handleOnPressIn() {
-      events.push('onPressIn');
+    function handleOnPressStart() {
+      events.push('onPressStart');
     }
 
-    function handleOnPressOut() {
-      events.push('onPressOut');
+    function handleOnPressEnd() {
+      events.push('onPressEnd');
     }
 
     function Component() {
       return (
-        <Press onPressIn={handleOnPressIn} onPressOut={handleOnPressOut}>
+        <Press onPressStart={handleOnPressStart} onPressEnd={handleOnPressEnd}>
           <div ref={divRef}>Press me!</div>
         </Press>
       );
@@ -124,6 +124,6 @@ describe('Press event responder', () => {
     pointerLeaveEvent.initEvent('pointerup', true, true);
     divRef.current.dispatchEvent(pointerLeaveEvent);
 
-    expect(events).toEqual(['onPressIn', 'onPressOut']);
+    expect(events).toEqual(['onPressStart', 'onPressEnd']);
   });
 });