[Flare] Remove capture phase Flare events (#16054)
Dominic Gannaway committed
Jul 4, 2019 at 21:30 UTC
c40075a72c4b513506a488b8bbb6d23ef23b1f9e
5 files changed
+16
-191
packages/react-dom/src/events/DOMEventResponderSystem.js
+3
-37
@@ -552,7 +552,7 @@ function createDOMResponderEvent(
552
eventPointerType = 'touch';
553
}
554
555
- const responderEvent = {
555
+ return {
556
nativeEvent: nativeEvent,
557
passive,
558
passiveSupported,
@@ -561,10 +561,6 @@ function createDOMResponderEvent(
561
target: nativeEventTarget,
562
type: topLevelType,
563
};
564
- if (__DEV__) {
565
- Object.freeze(responderEvent);
566
- }
567
- return responderEvent;
564
}
565
566
function createEventQueue(): EventQueue {
@@ -779,7 +775,6 @@ function traverseAndHandleEventResponderInstances(
775
);
776
777
// Trigger event responders in this order:
782
- // - Capture target phase
778
// - Bubble target phase
779
// - Root phase
780
@@ -798,41 +793,12 @@ function traverseAndHandleEventResponderInstances(
793
let length = targetEventResponderInstances.length;
794
let i;
795
801
- // Captured and bubbled event phases have the notion of local propagation.
796
+ // Bubbled event phases have the notion of local propagation.
797
// This means that the propgation chain can be stopped part of the the way
798
// through processing event component instances. The major difference to other
804
- // events systems is that the stopping of propgation is localized to a single
799
+ // events systems is that the stopping of propagation is localized to a single
800
// phase, rather than both phases.
801
if (length > 0) {
807
- // Capture target phase
808
- for (i = length; i-- > 0; ) {
809
- const targetEventResponderInstance = targetEventResponderInstances[i];
810
- const {isHook, props, responder, state} = targetEventResponderInstance;
811
- const eventListener = responder.onEventCapture;
812
- if (eventListener !== undefined) {
813
- if (
814
- shouldSkipEventComponent(
815
- targetEventResponderInstance,
816
- ((responder: any): ReactDOMEventResponder),
817
- propagatedEventResponders,
818
- isHook,
819
- )
820
- ) {
821
- continue;
822
- }
823
- currentInstance = targetEventResponderInstance;
824
- currentlyInHook = isHook;
825
- eventListener(responderEvent, eventResponderContext, props, state);
826
- if (!isHook) {
827
- checkForLocalPropagationContinuation(
828
- responder,
829
- propagatedEventResponders,
830
- );
831
- }
832
- }
833
- }
834
- // We clean propagated event responders between phases.
835
- propagatedEventResponders.clear();
802
// Bubble target phase
803
for (i = 0; i < length; i++) {
804
const targetEventResponderInstance = targetEventResponderInstances[i];
packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js
+11
-115
@@ -22,7 +22,6 @@ function createReactEventComponent({
22
rootEventTypes,
23
getInitialState,
24
onEvent,
25
- onEventCapture,
25
onRootEvent,
26
onMount,
27
onUnmount,
@@ -36,7 +35,6 @@ function createReactEventComponent({
35
rootEventTypes,
36
getInitialState,
37
onEvent,
39
- onEventCapture,
38
onRootEvent,
39
onMount,
40
onUnmount,
@@ -105,15 +103,6 @@ describe('DOMEventResponderSystem', () => {
103
phase: 'bubble',
104
});
105
},
108
- onEventCapture: (event, context, props) => {
109
- eventResponderFiredCount++;
110
- eventLog.push({
111
- name: event.type,
112
- passive: event.passive,
113
- passiveSupported: event.passiveSupported,
114
- phase: 'capture',
115
- });
116
- },
106
});
107
108
const Test = () => (
@@ -128,16 +117,10 @@ describe('DOMEventResponderSystem', () => {
117
// Clicking the button should trigger the event responder onEvent() twice
118
let buttonElement = buttonRef.current;
119
dispatchClickEvent(buttonElement);
131
- expect(eventResponderFiredCount).toBe(2);
132
- expect(eventLog.length).toBe(2);
120
+ expect(eventResponderFiredCount).toBe(1);
121
+ expect(eventLog.length).toBe(1);
122
// JSDOM does not support passive events, so this will be false
123
expect(eventLog).toEqual([
135
- {
136
- name: 'click',
137
- passive: false,
138
- passiveSupported: false,
139
- phase: 'capture',
140
- },
124
{
125
name: 'click',
126
passive: false,
@@ -149,13 +132,13 @@ describe('DOMEventResponderSystem', () => {
132
// Unmounting the container and clicking should not increment anything
133
ReactDOM.render(null, container);
134
dispatchClickEvent(buttonElement);
152
- expect(eventResponderFiredCount).toBe(2);
135
+ expect(eventResponderFiredCount).toBe(1);
136
137
// Re-rendering the container and clicking should increase the counters again
138
ReactDOM.render(<Test />, container);
139
buttonElement = buttonRef.current;
140
dispatchClickEvent(buttonElement);
158
- expect(eventResponderFiredCount).toBe(4);
141
+ expect(eventResponderFiredCount).toBe(2);
142
});
143
144
it('the event responder event listeners should fire on click event (passive events forced)', () => {
@@ -176,14 +159,6 @@ describe('DOMEventResponderSystem', () => {
159
phase: 'bubble',
160
});
161
},
179
- onEventCapture: (event, context, props) => {
180
- eventLog.push({
181
- name: event.type,
182
- passive: event.passive,
183
- passiveSupported: event.passiveSupported,
184
- phase: 'capture',
185
- });
186
- },
162
});
163
164
const Test = () => (
@@ -197,14 +172,8 @@ describe('DOMEventResponderSystem', () => {
172
// Clicking the button should trigger the event responder onEvent()
173
let buttonElement = buttonRef.current;
174
dispatchClickEvent(buttonElement);
200
- expect(eventLog.length).toBe(2);
175
+ expect(eventLog.length).toBe(1);
176
expect(eventLog).toEqual([
202
- {
203
- name: 'click',
204
- passive: true,
205
- passiveSupported: true,
206
- phase: 'capture',
207
- },
177
{
178
name: 'click',
179
passive: true,
@@ -231,16 +200,6 @@ describe('DOMEventResponderSystem', () => {
200
phase: 'bubble',
201
});
202
},
234
- onEventCapture: (event, context, props) => {
235
- context.continueLocalPropagation();
236
- eventResponderFiredCount++;
237
- eventLog.push({
238
- name: event.type,
239
- passive: event.passive,
240
- passiveSupported: event.passiveSupported,
241
- phase: 'capture',
242
- });
243
- },
203
});
204
205
const Test = () => (
@@ -256,22 +215,10 @@ describe('DOMEventResponderSystem', () => {
215
// Clicking the button should trigger the event responder onEvent()
216
let buttonElement = buttonRef.current;
217
dispatchClickEvent(buttonElement);
259
- expect(eventResponderFiredCount).toBe(4);
260
- expect(eventLog.length).toBe(4);
218
+ expect(eventResponderFiredCount).toBe(2);
219
+ expect(eventLog.length).toBe(2);
220
// JSDOM does not support passive events, so this will be false
221
expect(eventLog).toEqual([
263
- {
264
- name: 'click',
265
- passive: false,
266
- passiveSupported: false,
267
- phase: 'capture',
268
- },
269
- {
270
- name: 'click',
271
- passive: false,
272
- passiveSupported: false,
273
- phase: 'capture',
274
- },
222
{
223
name: 'click',
224
passive: false,
@@ -296,9 +243,6 @@ describe('DOMEventResponderSystem', () => {
243
onEvent: (event, context, props) => {
244
eventLog.push(`A [bubble]`);
245
},
299
- onEventCapture: (event, context, props) => {
300
- eventLog.push(`A [capture]`);
301
- },
246
});
247
248
const ClickEventComponentB = createReactEventComponent({
@@ -306,9 +250,6 @@ describe('DOMEventResponderSystem', () => {
250
onEvent: (event, context, props) => {
251
eventLog.push(`B [bubble]`);
252
},
309
- onEventCapture: (event, context, props) => {
310
- eventLog.push(`B [capture]`);
311
- },
253
});
254
255
const Test = () => (
@@ -325,12 +266,7 @@ describe('DOMEventResponderSystem', () => {
266
let buttonElement = buttonRef.current;
267
dispatchClickEvent(buttonElement);
268
328
- expect(eventLog).toEqual([
329
- 'A [capture]',
330
- 'B [capture]',
331
- 'B [bubble]',
332
- 'A [bubble]',
333
- ]);
269
+ expect(eventLog).toEqual(['B [bubble]', 'A [bubble]']);
270
});
271
272
it('nested event responders should fire in the correct order with continueLocalPropagation', () => {
@@ -343,10 +279,6 @@ describe('DOMEventResponderSystem', () => {
279
context.continueLocalPropagation();
280
eventLog.push(`${props.name} [bubble]`);
281
},
346
- onEventCapture: (event, context, props) => {
347
- context.continueLocalPropagation();
348
- eventLog.push(`${props.name} [capture]`);
349
- },
282
});
283
284
const Test = () => (
@@ -363,12 +295,7 @@ describe('DOMEventResponderSystem', () => {
295
let buttonElement = buttonRef.current;
296
dispatchClickEvent(buttonElement);
297
366
- expect(eventLog).toEqual([
367
- 'A [capture]',
368
- 'B [capture]',
369
- 'B [bubble]',
370
- 'A [bubble]',
371
- ]);
298
+ expect(eventLog).toEqual(['B [bubble]', 'A [bubble]']);
299
});
300
301
it('nested event responders should fire in the correct order', () => {
@@ -380,9 +307,6 @@ describe('DOMEventResponderSystem', () => {
307
onEvent: (event, context, props) => {
308
eventLog.push(`${props.name} [bubble]`);
309
},
383
- onEventCapture: (event, context, props) => {
384
- eventLog.push(`${props.name} [capture]`);
385
- },
310
});
311
312
const Test = () => (
@@ -399,7 +323,7 @@ describe('DOMEventResponderSystem', () => {
323
let buttonElement = buttonRef.current;
324
dispatchClickEvent(buttonElement);
325
402
- expect(eventLog).toEqual(['A [capture]', 'B [bubble]']);
326
+ expect(eventLog).toEqual(['B [bubble]']);
327
});
328
329
it('custom event dispatching for click -> magicClick works', () => {
@@ -423,21 +347,6 @@ describe('DOMEventResponderSystem', () => {
347
);
348
}
349
},
426
- onEventCapture: (event, context, props) => {
427
- if (props.onMagicClick) {
428
- const syntheticEvent = {
429
- target: event.target,
430
- type: 'magicclick',
431
- phase: 'capture',
432
- timeStamp: context.getTimeStamp(),
433
- };
434
- context.dispatchEvent(
435
- syntheticEvent,
436
- props.onMagicClick,
437
- DiscreteEvent,
438
- );
439
- }
440
- },
350
});
351
352
function handleMagicEvent(e) {
@@ -456,14 +365,7 @@ describe('DOMEventResponderSystem', () => {
365
let buttonElement = buttonRef.current;
366
dispatchClickEvent(buttonElement);
367
459
- expect(eventLog).toEqual([
460
- 'magic event fired',
461
- 'magicclick',
462
- 'capture',
463
- 'magic event fired',
464
- 'magicclick',
465
- 'bubble',
466
- ]);
368
+ expect(eventLog).toEqual(['magic event fired', 'magicclick', 'bubble']);
369
});
370
371
it('async event dispatching works', () => {
@@ -515,9 +417,6 @@ describe('DOMEventResponderSystem', () => {
417
onEvent: (event, context, props) => {
418
handleEvent(event, context, props, 'bubble');
419
},
518
- onEventCapture: (event, context, props) => {
519
- handleEvent(event, context, props, 'capture');
520
- },
420
});
421
422
function log(msg) {
@@ -541,10 +440,7 @@ describe('DOMEventResponderSystem', () => {
440
jest.runAllTimers();
441
442
expect(eventLog).toEqual([
544
- 'press capture',
443
'press bubble',
546
- 'longpress capture',
547
- 'longpresschange capture',
444
'longpress bubble',
445
'longpresschange bubble',
446
]);
packages/react-events/README.md
-5
@@ -57,11 +57,6 @@ The initial state of that the Event Component is created with.
57
Called during the bubble phase of the `targetEventTypes` dispatched on DOM
58
elements within the Event Component.
59
60
-### onEventCapture?: (event: ResponderEvent, context: ResponderContext, props, state)
61
-
62
-Called during the capture phase of the `targetEventTypes` dispatched on DOM
63
-elements within the Event Component.
64
-
60
### onMount?: (context: ResponderContext, props, state)
61
62
Called after an Event Component in mounted.
packages/react-native-renderer/src/ReactFabricEventResponderSystem.js
+2
-33
@@ -577,7 +577,6 @@ function traverseAndHandleEventResponderInstances(
577
nativeEvent: ReactFaricEvent,
578
): void {
579
// Trigger event responders in this order:
580
- // - Capture target phase
580
// - Bubble target phase
581
// - Root phase
582
@@ -596,42 +595,12 @@ function traverseAndHandleEventResponderInstances(
595
let length = targetEventResponderInstances.length;
596
let i;
597
599
- // Captured and bubbled event phases have the notion of local propagation.
598
+ // Bubbled event phases have the notion of local propagation.
599
// This means that the propgation chain can be stopped part of the the way
600
// through processing event component instances. The major difference to other
602
- // events systems is that the stopping of propgation is localized to a single
601
+ // events systems is that the stopping of propagation is localized to a single
602
// phase, rather than both phases.
603
if (length > 0) {
605
- // Capture target phase
606
- for (i = length; i-- > 0; ) {
607
- const targetEventResponderInstance = targetEventResponderInstances[i];
608
- const {isHook, responder, props, state} = targetEventResponderInstance;
609
- const eventListener = ((responder: any): ReactNativeEventResponder)
610
- .onEventCapture;
611
- if (eventListener !== undefined) {
612
- if (
613
- shouldSkipEventComponent(
614
- targetEventResponderInstance,
615
- ((responder: any): ReactNativeEventResponder),
616
- propagatedEventResponders,
617
- isHook,
618
- )
619
- ) {
620
- continue;
621
- }
622
- currentInstance = targetEventResponderInstance;
623
- currentlyInHook = isHook;
624
- eventListener(responderEvent, eventResponderContext, props, state);
625
- if (!isHook) {
626
- checkForLocalPropagationContinuation(
627
- ((responder: any): ReactNativeEventResponder),
628
- propagatedEventResponders,
629
- );
630
- }
631
- }
632
- }
633
- // We clean propagated event responders between phases.
634
- propagatedEventResponders.clear();
604
// Bubble target phase
605
for (i = 0; i < length; i++) {
606
const targetEventResponderInstance = targetEventResponderInstances[i];
packages/shared/ReactTypes.js
-1
@@ -98,7 +98,6 @@ export type ReactEventResponder<T, E, C> = {
98
allowMultipleHostChildren: boolean,
99
allowEventHooks: boolean,
100
onEvent?: (event: E, context: C, props: Object, state: Object) => void,
101
- onEventCapture?: (event: E, context: C, props: Object, state: Object) => void,
101
onRootEvent?: (event: E, context: C, props: Object, state: Object) => void,
102
onMount?: (context: C, props: Object, state: Object) => void,
103
onUnmount?: (context: C, props: Object, state: Object) => void,