Skip to content

Commit 1912b4a

Browse files
authored
[Flare] Remove delay props from Press (#16247)
Moving working with delays into user-space.
1 parent 55bc393 commit 1912b4a

File tree

3 files changed

+33
-697
lines changed

3 files changed

+33
-697
lines changed

packages/react-events/docs/Press.md

Lines changed: 4 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -74,17 +74,6 @@ type PressOffset = {
7474

7575
## Props
7676

77-
### delayPressEnd: number
78-
79-
The duration of the delay between when the press ends and when `onPressEnd` is
80-
called.
81-
82-
### delayPressStart: number
83-
84-
The duration of a delay between when the press starts and when `onPressStart` is
85-
called. This delay is cut short (and `onPressStart` is called) if the press is
86-
released before the threshold is exceeded.
87-
8877
### disabled: boolean = false
8978

9079
Disables all `Press` events.
@@ -107,21 +96,16 @@ Called when the element changes press state (i.e., after `onPressStart` and
10796
### onPressEnd: (e: PressEvent) => void
10897

10998
Called once the element is no longer pressed (because the press was released,
110-
cancelled, or moved beyond the hit bounds). If the press starts again before the
111-
`delayPressEnd` threshold is exceeded then the delay is reset to prevent
112-
`onPressEnd` being called during a press.
99+
cancelled, or moved beyond the hit bounds).
113100

114101
### onPressMove: (e: PressEvent) => void
115102

116-
Called when a press moves within the hit bounds of the element. `onPressMove` is
117-
called immediately and doesn't wait for delayed `onPressStart`. Never called for
103+
Called when a press moves within the hit bounds of the element. Never called for
118104
keyboard-initiated press events.
119105

120106
### onPressStart: (e: PressEvent) => void
121107

122-
Called once the element is pressed down. If the press is released before the
123-
`delayPressStart` threshold is exceeded then the delay is cut short and
124-
`onPressStart` is called immediately.
108+
Called once the element is pressed down.
125109

126110
### pressRetentionOffset: PressOffset
127111

@@ -142,4 +126,4 @@ Whether to `preventDefault()` native events. Native behavior is prevented by
142126
default. If an anchor is the child of `Press`, internal and external navigation
143127
should be performed in `onPress`. To rely on native behavior instead, set
144128
`preventDefault` to `false`, but be aware that native behavior will take place
145-
immediately after interaction without respect for delays or long press.
129+
immediately after interaction.

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

Lines changed: 26 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,6 @@ type PressListenerProps = {|
2828

2929
type PressProps = {|
3030
disabled: boolean,
31-
delayPressEnd: number,
32-
delayPressStart: number,
3331
pressRetentionOffset: {
3432
top: number,
3533
right: number,
@@ -53,7 +51,6 @@ type PressState = {
5351
isPressWithinResponderRegion: boolean,
5452
pointerType: PointerType,
5553
pressTarget: null | Element | Document,
56-
pressEndTimeout: null | number,
5754
pressStartTimeout: null | number,
5855
responderRegionOnActivation: null | $ReadOnly<{|
5956
bottom: number,
@@ -106,8 +103,6 @@ const isMac =
106103
typeof window !== 'undefined' && window.navigator != null
107104
? /^Mac/.test(window.navigator.platform)
108105
: false;
109-
const DEFAULT_PRESS_END_DELAY_MS = 0;
110-
const DEFAULT_PRESS_START_DELAY_MS = 0;
111106
const DEFAULT_PRESS_RETENTION_OFFSET = {
112107
bottom: 20,
113108
top: 20,
@@ -240,35 +235,6 @@ function dispatchPressChangeEvent(
240235
context.dispatchEvent('onPressChange', bool, DiscreteEvent);
241236
}
242237

243-
function activate(event: ReactDOMResponderEvent, context, props, state) {
244-
const nativeEvent: any = event.nativeEvent;
245-
const {clientX: x, clientY: y} = state.touchEvent || nativeEvent;
246-
const wasActivePressed = state.isActivePressed;
247-
state.isActivePressed = true;
248-
if (x !== undefined && y !== undefined) {
249-
state.activationPosition = {x, y};
250-
}
251-
252-
dispatchEvent(
253-
'onPressStart',
254-
event,
255-
context,
256-
state,
257-
'pressstart',
258-
DiscreteEvent,
259-
);
260-
if (!wasActivePressed) {
261-
dispatchPressChangeEvent(context, state);
262-
}
263-
}
264-
265-
function deactivate(event: ?ReactDOMResponderEvent, context, props, state) {
266-
state.isActivePressed = false;
267-
268-
dispatchEvent('onPressEnd', event, context, state, 'pressend', DiscreteEvent);
269-
dispatchPressChangeEvent(context, state);
270-
}
271-
272238
function dispatchPressStartEvents(
273239
event: ReactDOMResponderEvent,
274240
context: ReactDOMResponderContext,
@@ -277,29 +243,26 @@ function dispatchPressStartEvents(
277243
): void {
278244
state.isPressed = true;
279245

280-
if (state.pressEndTimeout !== null) {
281-
context.clearTimeout(state.pressEndTimeout);
282-
state.pressEndTimeout = null;
283-
}
284-
285-
const dispatch = () => {
246+
if (!state.isActivePressStart) {
286247
state.isActivePressStart = true;
287-
activate(event, context, props, state);
288-
};
248+
const nativeEvent: any = event.nativeEvent;
249+
const {clientX: x, clientY: y} = state.touchEvent || nativeEvent;
250+
const wasActivePressed = state.isActivePressed;
251+
state.isActivePressed = true;
252+
if (x !== undefined && y !== undefined) {
253+
state.activationPosition = {x, y};
254+
}
289255

290-
if (!state.isActivePressStart) {
291-
const delayPressStart = calculateDelayMS(
292-
props.delayPressStart,
293-
0,
294-
DEFAULT_PRESS_START_DELAY_MS,
256+
dispatchEvent(
257+
'onPressStart',
258+
event,
259+
context,
260+
state,
261+
'pressstart',
262+
DiscreteEvent,
295263
);
296-
if (delayPressStart > 0) {
297-
state.pressStartTimeout = context.setTimeout(() => {
298-
state.pressStartTimeout = null;
299-
dispatch();
300-
}, delayPressStart);
301-
} else {
302-
dispatch();
264+
if (!wasActivePressed) {
265+
dispatchPressChangeEvent(context, state);
303266
}
304267
}
305268
}
@@ -310,40 +273,20 @@ function dispatchPressEndEvents(
310273
props: PressProps,
311274
state: PressState,
312275
): void {
313-
const wasActivePressStart = state.isActivePressStart;
314-
let activationWasForced = false;
315-
316276
state.isActivePressStart = false;
317277
state.isPressed = false;
318278

319-
if (!wasActivePressStart && state.pressStartTimeout !== null) {
320-
context.clearTimeout(state.pressStartTimeout);
321-
state.pressStartTimeout = null;
322-
// don't activate if a press has moved beyond the responder region
323-
if (state.isPressWithinResponderRegion && event != null) {
324-
// if we haven't yet activated (due to delays), activate now
325-
activate(event, context, props, state);
326-
activationWasForced = true;
327-
}
328-
}
329-
330279
if (state.isActivePressed) {
331-
const delayPressEnd = calculateDelayMS(
332-
props.delayPressEnd,
333-
// if activation and deactivation occur during the same event there's no
334-
// time for visual user feedback therefore a small delay is added before
335-
// deactivating.
336-
activationWasForced ? 10 : 0,
337-
DEFAULT_PRESS_END_DELAY_MS,
280+
state.isActivePressed = false;
281+
dispatchEvent(
282+
'onPressEnd',
283+
event,
284+
context,
285+
state,
286+
'pressend',
287+
DiscreteEvent,
338288
);
339-
if (delayPressEnd > 0) {
340-
state.pressEndTimeout = context.setTimeout(() => {
341-
state.pressEndTimeout = null;
342-
deactivate(event, context, props, state);
343-
}, delayPressEnd);
344-
} else {
345-
deactivate(event, context, props, state);
346-
}
289+
dispatchPressChangeEvent(context, state);
347290
}
348291

349292
state.responderRegionOnDeactivation = null;
@@ -380,11 +323,6 @@ function isValidKeyboardEvent(nativeEvent: Object): boolean {
380323
);
381324
}
382325

383-
function calculateDelayMS(delay: ?number, min = 0, fallback = 0) {
384-
const maybeNumber = delay == null ? null : delay;
385-
return Math.max(min, maybeNumber != null ? maybeNumber : fallback);
386-
}
387-
388326
// TODO: account for touch hit slop
389327
function calculateResponderRegion(
390328
context: ReactDOMResponderContext,
@@ -550,7 +488,6 @@ const pressResponderImpl = {
550488
isPressed: false,
551489
isPressWithinResponderRegion: true,
552490
pointerType: '',
553-
pressEndTimeout: null,
554491
pressStartTimeout: null,
555492
pressTarget: null,
556493
responderRegionOnActivation: null,

0 commit comments

Comments
 (0)