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
Nicolas Gallagher committed
Mar 30, 2019 at 09:23 UTC
7f1f5ddc335cec2d56ce7a555a71ac12e24147e8
2 files changed
+40
-23
packages/react-events/src/Press.js
+33
-16
@@ -45,7 +45,7 @@ function dispatchPressEvent(
45
context.dispatchEvent(name, listener, state.pressTarget, true);
46
}
47
48
-function dispatchPressInEvents(
48
+function dispatchPressStartEvents(
49
context: EventResponderContext,
50
props: Object,
51
state: PressState,
@@ -57,20 +57,24 @@ function dispatchPressInEvents(
57
dispatchPressEvent(context, state, 'presschange', pressChangeEventListener);
58
}
59
60
- if (props.onPressIn) {
61
- dispatchPressEvent(context, state, 'pressin', props.onPressIn);
60
+ if (props.onPressStart) {
61
+ dispatchPressEvent(context, state, 'pressstart', props.onPressStart);
62
}
63
if (props.onPressChange) {
64
dispatchPressChangeEvent(true);
65
}
66
if ((props.onLongPress || props.onLongPressChange) && !state.isLongPressed) {
67
- const longPressDelay = props.longPressDelay || 1000;
67
+ const delayLongPress = calculateDelayMS(props.delayLongPress, 0, 1000);
68
69
state.longPressTimeout = setTimeout(() => {
70
state.isLongPressed = true;
71
state.longPressTimeout = null;
72
73
- if (props.onPressChange && props.longPressCancelsPress) {
73
+ if (
74
+ props.onPressChange &&
75
+ props.onLongPressShouldCancelPress &&
76
+ props.onLongPressShouldCancelPress()
77
+ ) {
78
dispatchPressChangeEvent(false);
79
}
80
@@ -95,11 +99,11 @@ function dispatchPressInEvents(
99
longPressChangeEventListener,
100
);
101
}
98
- }, longPressDelay);
102
+ }, delayLongPress);
103
}
104
}
105
102
-function dispatchPressOutEvents(
106
+function dispatchPressEndEvents(
107
context: EventResponderContext,
108
props: Object,
109
state: PressState,
@@ -108,8 +112,8 @@ function dispatchPressOutEvents(
112
clearTimeout(state.longPressTimeout);
113
state.longPressTimeout = null;
114
}
111
- if (props.onPressOut) {
112
- dispatchPressEvent(context, state, 'pressout', props.onPressOut);
115
+ if (props.onPressEnd) {
116
+ dispatchPressEvent(context, state, 'pressend', props.onPressEnd);
117
}
118
if (props.onPressChange) {
119
const pressChangeEventListener = () => {
@@ -134,6 +138,11 @@ function isAnchorTagElement(eventTarget: EventTarget): boolean {
138
return (eventTarget: any).nodeName === 'A';
139
}
140
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
+
146
const PressResponder = {
147
targetEventTypes,
148
createInitialState(): PressState {
@@ -197,7 +206,7 @@ const PressResponder = {
206
return;
207
}
208
state.pressTarget = eventTarget;
200
- dispatchPressInEvents(context, props, state);
209
+ dispatchPressStartEvents(context, props, state);
210
state.isPressed = true;
211
context.addRootEventTypes(rootEventTypes);
212
}
@@ -209,7 +218,7 @@ const PressResponder = {
218
return;
219
}
220
if (state.isPressed) {
212
- dispatchPressOutEvents(context, props, state);
221
+ dispatchPressEndEvents(context, props, state);
222
if (
223
eventType !== 'touchcancel' &&
224
(props.onPress || props.onLongPress)
@@ -227,7 +236,11 @@ const PressResponder = {
236
) {
237
if (
238
props.onPress &&
230
- !(state.isLongPressed && props.longPressCancelsPress)
239
+ !(
240
+ state.isLongPressed &&
241
+ props.onLongPressShouldCancelPress &&
242
+ props.onLongPressShouldCancelPress()
243
+ )
244
) {
245
dispatchPressEvent(context, state, 'press', props.onPress);
246
}
@@ -263,7 +276,7 @@ const PressResponder = {
276
}
277
}
278
state.pressTarget = eventTarget;
266
- dispatchPressInEvents(context, props, state);
279
+ dispatchPressStartEvents(context, props, state);
280
state.isPressed = true;
281
context.addRootEventTypes(rootEventTypes);
282
}
@@ -276,7 +289,7 @@ const PressResponder = {
289
state.shouldSkipMouseAfterTouch = false;
290
return;
291
}
279
- dispatchPressOutEvents(context, props, state);
292
+ dispatchPressEndEvents(context, props, state);
293
if (
294
state.pressTarget !== null &&
295
(props.onPress || props.onLongPress)
@@ -284,7 +297,11 @@ const PressResponder = {
297
if (context.isTargetWithinElement(eventTarget, state.pressTarget)) {
298
if (
299
props.onPress &&
287
- !(state.isLongPressed && props.longPressCancelsPress)
300
+ !(
301
+ state.isLongPressed &&
302
+ props.onLongPressShouldCancelPress &&
303
+ props.onLongPressShouldCancelPress()
304
+ )
305
) {
306
const pressEventListener = e => {
307
props.onPress(e);
@@ -309,7 +326,7 @@ const PressResponder = {
326
case 'pointercancel': {
327
if (state.isPressed) {
328
state.shouldSkipMouseAfterTouch = false;
312
- dispatchPressOutEvents(context, props, state);
329
+ dispatchPressEndEvents(context, props, state);
330
state.isPressed = false;
331
state.isLongPressed = false;
332
context.removeRootEventTypes(rootEventTypes);
packages/react-events/src/__tests__/Press-test.internal.js
+7
-7
@@ -94,21 +94,21 @@ describe('Press event responder', () => {
94
expect(events).toEqual(['keydown', 'press 2']);
95
});
96
97
- it('should support onPressIn and onPressOut', () => {
97
+ it('should support onPressStart and onPressEnd', () => {
98
let divRef = React.createRef();
99
let events = [];
100
101
- function handleOnPressIn() {
102
- events.push('onPressIn');
101
+ function handleOnPressStart() {
102
+ events.push('onPressStart');
103
}
104
105
- function handleOnPressOut() {
106
- events.push('onPressOut');
105
+ function handleOnPressEnd() {
106
+ events.push('onPressEnd');
107
}
108
109
function Component() {
110
return (
111
- <Press onPressIn={handleOnPressIn} onPressOut={handleOnPressOut}>
111
+ <Press onPressStart={handleOnPressStart} onPressEnd={handleOnPressEnd}>
112
<div ref={divRef}>Press me!</div>
113
</Press>
114
);
@@ -124,6 +124,6 @@ describe('Press event responder', () => {
124
pointerLeaveEvent.initEvent('pointerup', true, true);
125
divRef.current.dispatchEvent(pointerLeaveEvent);
126
127
- expect(events).toEqual(['onPressIn', 'onPressOut']);
127
+ expect(events).toEqual(['onPressStart', 'onPressEnd']);
128
});
129
});