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']);
  });
 });