Skip to content

Commit 7f1f5dd

Browse files
necolastrueadm
authored andcommitted
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
1 parent 2e02469 commit 7f1f5dd

File tree

2 files changed

+40
-23
lines changed

2 files changed

+40
-23
lines changed

packages/react-events/src/Press.js

+33-16
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ function dispatchPressEvent(
4545
context.dispatchEvent(name, listener, state.pressTarget, true);
4646
}
4747

48-
function dispatchPressInEvents(
48+
function dispatchPressStartEvents(
4949
context: EventResponderContext,
5050
props: Object,
5151
state: PressState,
@@ -57,20 +57,24 @@ function dispatchPressInEvents(
5757
dispatchPressEvent(context, state, 'presschange', pressChangeEventListener);
5858
}
5959

60-
if (props.onPressIn) {
61-
dispatchPressEvent(context, state, 'pressin', props.onPressIn);
60+
if (props.onPressStart) {
61+
dispatchPressEvent(context, state, 'pressstart', props.onPressStart);
6262
}
6363
if (props.onPressChange) {
6464
dispatchPressChangeEvent(true);
6565
}
6666
if ((props.onLongPress || props.onLongPressChange) && !state.isLongPressed) {
67-
const longPressDelay = props.longPressDelay || 1000;
67+
const delayLongPress = calculateDelayMS(props.delayLongPress, 0, 1000);
6868

6969
state.longPressTimeout = setTimeout(() => {
7070
state.isLongPressed = true;
7171
state.longPressTimeout = null;
7272

73-
if (props.onPressChange && props.longPressCancelsPress) {
73+
if (
74+
props.onPressChange &&
75+
props.onLongPressShouldCancelPress &&
76+
props.onLongPressShouldCancelPress()
77+
) {
7478
dispatchPressChangeEvent(false);
7579
}
7680

@@ -95,11 +99,11 @@ function dispatchPressInEvents(
9599
longPressChangeEventListener,
96100
);
97101
}
98-
}, longPressDelay);
102+
}, delayLongPress);
99103
}
100104
}
101105

102-
function dispatchPressOutEvents(
106+
function dispatchPressEndEvents(
103107
context: EventResponderContext,
104108
props: Object,
105109
state: PressState,
@@ -108,8 +112,8 @@ function dispatchPressOutEvents(
108112
clearTimeout(state.longPressTimeout);
109113
state.longPressTimeout = null;
110114
}
111-
if (props.onPressOut) {
112-
dispatchPressEvent(context, state, 'pressout', props.onPressOut);
115+
if (props.onPressEnd) {
116+
dispatchPressEvent(context, state, 'pressend', props.onPressEnd);
113117
}
114118
if (props.onPressChange) {
115119
const pressChangeEventListener = () => {
@@ -134,6 +138,11 @@ function isAnchorTagElement(eventTarget: EventTarget): boolean {
134138
return (eventTarget: any).nodeName === 'A';
135139
}
136140

141+
function calculateDelayMS(delay: ?number, min = 0, fallback = 0) {
142+
const maybeNumber = delay == null ? null : delay;
143+
return Math.max(min, maybeNumber != null ? maybeNumber : fallback);
144+
}
145+
137146
const PressResponder = {
138147
targetEventTypes,
139148
createInitialState(): PressState {
@@ -197,7 +206,7 @@ const PressResponder = {
197206
return;
198207
}
199208
state.pressTarget = eventTarget;
200-
dispatchPressInEvents(context, props, state);
209+
dispatchPressStartEvents(context, props, state);
201210
state.isPressed = true;
202211
context.addRootEventTypes(rootEventTypes);
203212
}
@@ -209,7 +218,7 @@ const PressResponder = {
209218
return;
210219
}
211220
if (state.isPressed) {
212-
dispatchPressOutEvents(context, props, state);
221+
dispatchPressEndEvents(context, props, state);
213222
if (
214223
eventType !== 'touchcancel' &&
215224
(props.onPress || props.onLongPress)
@@ -227,7 +236,11 @@ const PressResponder = {
227236
) {
228237
if (
229238
props.onPress &&
230-
!(state.isLongPressed && props.longPressCancelsPress)
239+
!(
240+
state.isLongPressed &&
241+
props.onLongPressShouldCancelPress &&
242+
props.onLongPressShouldCancelPress()
243+
)
231244
) {
232245
dispatchPressEvent(context, state, 'press', props.onPress);
233246
}
@@ -263,7 +276,7 @@ const PressResponder = {
263276
}
264277
}
265278
state.pressTarget = eventTarget;
266-
dispatchPressInEvents(context, props, state);
279+
dispatchPressStartEvents(context, props, state);
267280
state.isPressed = true;
268281
context.addRootEventTypes(rootEventTypes);
269282
}
@@ -276,15 +289,19 @@ const PressResponder = {
276289
state.shouldSkipMouseAfterTouch = false;
277290
return;
278291
}
279-
dispatchPressOutEvents(context, props, state);
292+
dispatchPressEndEvents(context, props, state);
280293
if (
281294
state.pressTarget !== null &&
282295
(props.onPress || props.onLongPress)
283296
) {
284297
if (context.isTargetWithinElement(eventTarget, state.pressTarget)) {
285298
if (
286299
props.onPress &&
287-
!(state.isLongPressed && props.longPressCancelsPress)
300+
!(
301+
state.isLongPressed &&
302+
props.onLongPressShouldCancelPress &&
303+
props.onLongPressShouldCancelPress()
304+
)
288305
) {
289306
const pressEventListener = e => {
290307
props.onPress(e);
@@ -309,7 +326,7 @@ const PressResponder = {
309326
case 'pointercancel': {
310327
if (state.isPressed) {
311328
state.shouldSkipMouseAfterTouch = false;
312-
dispatchPressOutEvents(context, props, state);
329+
dispatchPressEndEvents(context, props, state);
313330
state.isPressed = false;
314331
state.isLongPressed = false;
315332
context.removeRootEventTypes(rootEventTypes);

packages/react-events/src/__tests__/Press-test.internal.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -94,21 +94,21 @@ describe('Press event responder', () => {
9494
expect(events).toEqual(['keydown', 'press 2']);
9595
});
9696

97-
it('should support onPressIn and onPressOut', () => {
97+
it('should support onPressStart and onPressEnd', () => {
9898
let divRef = React.createRef();
9999
let events = [];
100100

101-
function handleOnPressIn() {
102-
events.push('onPressIn');
101+
function handleOnPressStart() {
102+
events.push('onPressStart');
103103
}
104104

105-
function handleOnPressOut() {
106-
events.push('onPressOut');
105+
function handleOnPressEnd() {
106+
events.push('onPressEnd');
107107
}
108108

109109
function Component() {
110110
return (
111-
<Press onPressIn={handleOnPressIn} onPressOut={handleOnPressOut}>
111+
<Press onPressStart={handleOnPressStart} onPressEnd={handleOnPressEnd}>
112112
<div ref={divRef}>Press me!</div>
113113
</Press>
114114
);
@@ -124,6 +124,6 @@ describe('Press event responder', () => {
124124
pointerLeaveEvent.initEvent('pointerup', true, true);
125125
divRef.current.dispatchEvent(pointerLeaveEvent);
126126

127-
expect(events).toEqual(['onPressIn', 'onPressOut']);
127+
expect(events).toEqual(['onPressStart', 'onPressEnd']);
128128
});
129129
});

0 commit comments

Comments
 (0)