[react-interactions] Remove responder root event types + revert commit phase change (#17577)
Dominic Gannaway committed
Dec 11, 2019 at 16:48 UTC
2afeebdcc4ed8a78ab5b36792f768078d70e1ffd
6 files changed
+19
-117
packages/react-dom/src/client/ReactDOMHostConfig.js
+1
-9
@@ -52,7 +52,6 @@ import type {
52
ReactDOMFundamentalComponentInstance,
53
} from 'shared/ReactDOMTypes';
54
import {
55
- addRootEventTypesForResponderInstance,
55
mountEventResponder,
56
unmountEventResponder,
57
dispatchEventForResponderEventSystem,
@@ -954,17 +953,10 @@ export function mountResponderInstance(
953
): ReactDOMEventResponderInstance {
954
// Listen to events
955
const doc = instance.ownerDocument;
957
- const {
958
- rootEventTypes,
959
- targetEventTypes,
960
- } = ((responder: any): ReactDOMEventResponder);
956
+ const {targetEventTypes} = ((responder: any): ReactDOMEventResponder);
957
if (targetEventTypes !== null) {
958
listenToEventResponderEventTypes(targetEventTypes, doc);
959
}
964
- if (rootEventTypes !== null) {
965
- addRootEventTypesForResponderInstance(responderInstance, rootEventTypes);
966
- listenToEventResponderEventTypes(rootEventTypes, doc);
967
- }
960
mountEventResponder(
961
responder,
962
responderInstance,
packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js
-98
@@ -23,7 +23,6 @@ const DiscreteEvent = 0;
23
function createEventResponder({
24
onEvent,
25
onRootEvent,
26
- rootEventTypes,
26
targetEventTypes,
27
onMount,
28
onUnmount,
@@ -32,7 +31,6 @@ function createEventResponder({
31
}) {
32
return React.unstable_createResponder('TestEventResponder', {
33
targetEventTypes,
35
- rootEventTypes,
34
onEvent,
35
onRootEvent,
36
onMount,
@@ -616,43 +614,6 @@ describe('DOMEventResponderSystem', () => {
614
expect(counter).toEqual(5);
615
});
616
619
- it('the event responder root listeners should fire on a root click event', () => {
620
- let eventResponderFiredCount = 0;
621
- let eventLog = [];
622
-
623
- const TestResponder = createEventResponder({
624
- rootEventTypes: ['click'],
625
- onRootEvent: event => {
626
- eventResponderFiredCount++;
627
- eventLog.push({
628
- name: event.type,
629
- passive: event.passive,
630
- phase: 'root',
631
- });
632
- },
633
- });
634
-
635
- const Test = () => {
636
- const listener = React.unstable_useResponder(TestResponder, {});
637
- return <button DEPRECATED_flareListeners={listener}>Click me!</button>;
638
- };
639
-
640
- ReactDOM.render(<Test />, container);
641
- expect(container.innerHTML).toBe('<button>Click me!</button>');
642
-
643
- // Clicking the button should trigger the event responder onEvent() twice
644
- dispatchClickEvent(document.body);
645
- expect(eventResponderFiredCount).toBe(1);
646
- expect(eventLog.length).toBe(1);
647
- expect(eventLog).toEqual([
648
- {
649
- name: 'click',
650
- passive: false,
651
- phase: 'root',
652
- },
653
- ]);
654
- });
655
-
617
it('the event responder target listeners should correctly fire for only their events', () => {
618
let clickEventComponent1Fired = 0;
619
let clickEventComponent2Fired = 0;
@@ -714,65 +675,6 @@ describe('DOMEventResponderSystem', () => {
675
]);
676
});
677
717
- it('the event responder root listeners should correctly fire for only their events', () => {
718
- let clickEventComponent1Fired = 0;
719
- let clickEventComponent2Fired = 0;
720
- let eventLog = [];
721
-
722
- const TestResponderA = createEventResponder({
723
- rootEventTypes: ['click_active'],
724
- onRootEvent: event => {
725
- clickEventComponent1Fired++;
726
- eventLog.push({
727
- name: event.type,
728
- passive: event.passive,
729
- });
730
- },
731
- });
732
-
733
- const TestResponderB = createEventResponder({
734
- rootEventTypes: ['click'],
735
- onRootEvent: event => {
736
- clickEventComponent2Fired++;
737
- eventLog.push({
738
- name: event.type,
739
- passive: event.passive,
740
- });
741
- },
742
- });
743
-
744
- const Test = () => {
745
- const listener = React.unstable_useResponder(TestResponderA, {});
746
- const listener2 = React.unstable_useResponder(TestResponderB, {});
747
-
748
- return (
749
- <div DEPRECATED_flareListeners={listener}>
750
- <button DEPRECATED_flareListeners={listener2}>Click me!</button>
751
- </div>
752
- );
753
- };
754
-
755
- ReactDOM.render(<Test />, container);
756
-
757
- dispatchClickEvent(document.body);
758
-
759
- expect(clickEventComponent1Fired).toBe(1);
760
- expect(clickEventComponent2Fired).toBe(1);
761
- expect(eventLog.length).toBe(2);
762
- expect(eventLog).toEqual([
763
- {
764
- name: 'click',
765
- passive: false,
766
- },
767
- {
768
- name: 'click',
769
- passive: false,
770
- },
771
- ]);
772
-
773
- ReactDOM.render(<Test />, container);
774
- });
775
-
678
it('the event responder system should warn on accessing invalid properties', () => {
679
const TestResponder = createEventResponder({
680
targetEventTypes: ['click'],
packages/react-native-renderer/src/ReactFabricHostConfig.js
-5
@@ -29,7 +29,6 @@ import warningWithoutStack from 'shared/warningWithoutStack';
29
30
import {dispatchEvent} from './ReactFabricEventEmitter';
31
import {
32
- addRootEventTypesForResponderInstance,
32
mountEventResponder,
33
unmountEventResponder,
34
} from './ReactFabricEventResponderSystem';
@@ -453,10 +452,6 @@ export function mountResponderInstance(
452
instance: Instance,
453
) {
454
if (enableFlareAPI) {
456
- const {rootEventTypes} = responder;
457
- if (rootEventTypes !== null) {
458
- addRootEventTypesForResponderInstance(responderInstance, rootEventTypes);
459
- }
455
mountEventResponder(responder, responderInstance, props, state);
456
}
457
}
packages/react-reconciler/src/ReactFiberCommitWork.js
+1
-1
@@ -1357,7 +1357,7 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
1357
if (enableFlareAPI) {
1358
const prevListeners = oldProps.DEPRECATED_flareListeners;
1359
const nextListeners = newProps.DEPRECATED_flareListeners;
1360
- if (prevListeners !== nextListeners || current === null) {
1360
+ if (prevListeners !== nextListeners) {
1361
updateLegacyEventListeners(nextListeners, finishedWork, null);
1362
}
1363
}
packages/react-reconciler/src/ReactFiberCompleteWork.js
+17
-3
@@ -128,6 +128,7 @@ import {
128
import {createFundamentalStateInstance} from './ReactFiberFundamental';
129
import {Never} from './ReactFiberExpirationTime';
130
import {resetChildFibers} from './ReactChildFiber';
131
+import {updateLegacyEventListeners} from './ReactFiberEvents';
132
import {createScopeMethods} from './ReactFiberScope';
133
134
function markUpdate(workInProgress: Fiber) {
@@ -729,7 +730,11 @@ function completeWork(
730
if (enableFlareAPI) {
731
const listeners = newProps.DEPRECATED_flareListeners;
732
if (listeners != null) {
732
- markUpdate(workInProgress);
733
+ updateLegacyEventListeners(
734
+ listeners,
735
+ workInProgress,
736
+ rootContainerInstance,
737
+ );
738
}
739
}
740
} else {
@@ -749,7 +754,11 @@ function completeWork(
754
if (enableFlareAPI) {
755
const listeners = newProps.DEPRECATED_flareListeners;
756
if (listeners != null) {
752
- markUpdate(workInProgress);
757
+ updateLegacyEventListeners(
758
+ listeners,
759
+ workInProgress,
760
+ rootContainerInstance,
761
+ );
762
}
763
}
764
@@ -1255,7 +1264,12 @@ function completeWork(
1264
if (enableFlareAPI) {
1265
const listeners = newProps.DEPRECATED_flareListeners;
1266
if (listeners != null) {
1258
- markUpdate(workInProgress);
1267
+ const rootContainerInstance = getRootHostContainer();
1268
+ updateLegacyEventListeners(
1269
+ listeners,
1270
+ workInProgress,
1271
+ rootContainerInstance,
1272
+ );
1273
}
1274
}
1275
if (workInProgress.ref !== null) {
packages/shared/ReactTypes.js
-1
@@ -97,7 +97,6 @@ export type ReactEventResponder<E, C> = {
97
displayName: string,
98
targetEventTypes: null | Array<string>,
99
targetPortalPropagation: boolean,
100
- rootEventTypes: null | Array<string>,
100
getInitialState: null | ((props: Object) => Object),
101
onEvent:
102
| null