@samitouri / QOS-React-2 / commits / 8b88ac2592

[Flare] Remove event targets including TouchHitTarget (#16011)

Dominic Gannaway committed Jun 27, 2019 at 23:58 UTC 8b88ac2592c5f555f315f9440cbb665dd1e7457a
36 files changed +18 -1789
packages/react-art/src/ReactARTHostConfig.js
-4
@@ -333,10 +333,6 @@ export function getChildHostContextForEventComponent() {
333 return NO_CONTEXT;
334 }
335
336 -export function getChildHostContextForEventTarget() {
337 - return NO_CONTEXT;
338 -}
339 -
336 export const scheduleTimeout = setTimeout;
337 export const cancelTimeout = clearTimeout;
338 export const noTimeout = -1;
packages/react-dom/src/client/ReactDOMComponent.js
-3
@@ -97,7 +97,6 @@ let didWarnShadyDOM = false;
97 const DANGEROUSLY_SET_INNER_HTML = 'dangerouslySetInnerHTML';
98 const SUPPRESS_CONTENT_EDITABLE_WARNING = 'suppressContentEditableWarning';
99 const SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning';
100 -const HYDRATE_TOUCH_HIT_TARGET = 'hydrateTouchHitTarget';
100 const AUTOFOCUS = 'autoFocus';
101 const CHILDREN = 'children';
102 const STYLE = 'style';
@@ -1034,8 +1033,6 @@ export function diffHydratedProperties(
1033 }
1034 ensureListeningTo(rootContainerElement, propKey);
1035 }
1037 - } else if (enableEventAPI && propKey === HYDRATE_TOUCH_HIT_TARGET) {
1038 - updatePayload = [STYLE, rawProps.style];
1036 } else if (
1037 __DEV__ &&
1038 // Convince Flow we've calculated it (it's DEV-only in this method.)
packages/react-dom/src/client/ReactDOMHostConfig.js
+1 -125
@@ -31,7 +31,7 @@ import {
31 isEnabled as ReactBrowserEventEmitterIsEnabled,
32 setEnabled as ReactBrowserEventEmitterSetEnabled,
33 } from '../events/ReactBrowserEventEmitter';
34 -import {Namespaces, getChildNamespace} from '../shared/DOMNamespaces';
34 +import {getChildNamespace} from '../shared/DOMNamespaces';
35 import {addRootEventTypesForComponentInstance} from '../events/DOMEventResponderSystem';
36 import {
37 ELEMENT_NODE,
@@ -51,8 +51,6 @@ import {
51 mountEventResponder,
52 unmountEventResponder,
53 } from '../events/DOMEventResponderSystem';
54 -import {REACT_EVENT_TARGET_TOUCH_HIT} from 'shared/ReactSymbols';
55 -import {canUseDOM} from 'shared/ExecutionEnvironment';
54
55 export type Type = string;
56 export type Props = {
@@ -93,7 +91,6 @@ type HostContextDev = {
91 ancestorInfo: mixed,
92 eventData: null | {|
93 isEventComponent?: boolean,
96 - isEventTarget?: boolean,
94 |},
95 };
96 type HostContextProd = string;
@@ -109,8 +106,6 @@ import {
106 } from 'shared/ReactFeatureFlags';
107 import warning from 'shared/warning';
108
112 -const {html: HTML_NAMESPACE} = Namespaces;
113 -
109 let SUPPRESS_HYDRATION_WARNING;
110 if (__DEV__) {
111 SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning';
@@ -196,45 +191,8 @@ export function getChildHostContextForEventComponent(
191 if (__DEV__) {
192 const parentHostContextDev = ((parentHostContext: any): HostContextDev);
193 const {namespace, ancestorInfo} = parentHostContextDev;
199 - warning(
200 - parentHostContextDev.eventData === null ||
201 - !parentHostContextDev.eventData.isEventTarget,
202 - 'validateDOMNesting: React event targets must not have event components as children.',
203 - );
194 const eventData = {
195 isEventComponent: true,
206 - isEventTarget: false,
207 - };
208 - return {namespace, ancestorInfo, eventData};
209 - }
210 - return parentHostContext;
211 -}
212 -
213 -export function getChildHostContextForEventTarget(
214 - parentHostContext: HostContext,
215 - type: Symbol | number,
216 -): HostContext {
217 - if (__DEV__) {
218 - const parentHostContextDev = ((parentHostContext: any): HostContextDev);
219 - const {namespace, ancestorInfo} = parentHostContextDev;
220 - if (type === REACT_EVENT_TARGET_TOUCH_HIT) {
221 - warning(
222 - parentHostContextDev.eventData === null ||
223 - !parentHostContextDev.eventData.isEventComponent,
224 - 'validateDOMNesting: <TouchHitTarget> cannot not be a direct child of an event component. ' +
225 - 'Ensure <TouchHitTarget> is a direct child of a DOM element.',
226 - );
227 - const parentNamespace = parentHostContextDev.namespace;
228 - if (parentNamespace !== HTML_NAMESPACE) {
229 - throw new Error(
230 - '<TouchHitTarget> was used in an unsupported DOM namespace. ' +
231 - 'Ensure the <TouchHitTarget> is used in an HTML namespace.',
232 - );
233 - }
234 - }
235 - const eventData = {
236 - isEventComponent: false,
237 - isEventTarget: true,
196 };
197 return {namespace, ancestorInfo, eventData};
198 }
@@ -924,85 +882,3 @@ export function unmountEventComponent(
882 unmountEventResponder(eventComponentInstance);
883 }
884 }
927 -
928 -export function getEventTargetChildElement(
929 - type: Symbol | number,
930 - props: Props,
931 -): null | EventTargetChildElement {
932 - if (enableEventAPI) {
933 - if (type === REACT_EVENT_TARGET_TOUCH_HIT) {
934 - const {bottom, left, right, top} = props;
935 -
936 - if (!bottom && !left && !right && !top) {
937 - return null;
938 - }
939 - return {
940 - type: 'div',
941 - props: {
942 - style: {
943 - position: 'absolute',
944 - zIndex: -1,
945 - pointerEvents: null,
946 - bottom: bottom ? `-${bottom}px` : '0px',
947 - left: left ? `-${left}px` : '0px',
948 - right: right ? `-${right}px` : '0px',
949 - top: top ? `-${top}px` : '0px',
950 - },
951 - hydrateTouchHitTarget: true,
952 - suppressHydrationWarning: true,
953 - },
954 - };
955 - }
956 - }
957 - return null;
958 -}
959 -
960 -export function handleEventTarget(
961 - type: Symbol | number,
962 - props: Props,
963 - rootContainerInstance: Container,
964 - internalInstanceHandle: Object,
965 -): boolean {
966 - if (
967 - __DEV__ &&
968 - type === REACT_EVENT_TARGET_TOUCH_HIT &&
969 - (props.left || props.right || props.top || props.bottom)
970 - ) {
971 - return true;
972 - }
973 - return false;
974 -}
975 -
976 -export function commitEventTarget(
977 - type: Symbol | number,
978 - props: Props,
979 - instance: Instance,
980 - parentInstance: Instance,
981 -): void {
982 - if (enableEventAPI) {
983 - if (type === REACT_EVENT_TARGET_TOUCH_HIT) {
984 - if (__DEV__ && canUseDOM) {
985 - // This is done at DEV time because getComputedStyle will
986 - // typically force a style recalculation and force a layout,
987 - // reflow -– both of which are sync are expensive.
988 - const computedStyles = window.getComputedStyle(parentInstance);
989 - const position = computedStyles.getPropertyValue('position');
990 - warning(
991 - position !== '' && position !== 'static',
992 - '<TouchHitTarget> inserts an empty absolutely positioned <div>. ' +
993 - 'This requires its parent DOM node to be positioned too, but the ' +
994 - 'parent DOM node was found to have the style "position" set to ' +
995 - 'either no value, or a value of "static". Try using a "position" ' +
996 - 'value of "relative".',
997 - );
998 - warning(
999 - computedStyles.getPropertyValue('z-index') !== '',
1000 - '<TouchHitTarget> inserts an empty <div> with "z-index" of "-1". ' +
1001 - 'This requires its parent DOM node to have a "z-index" greater than "-1",' +
1002 - 'but the parent DOM node was found to no "z-index" value set.' +
1003 - ' Try using a "z-index" value of "0" or greater.',
1004 - );
1005 - }
1006 - }
1007 - }
1008 -}
packages/react-dom/src/events/DOMEventResponderSystem.js
-30
@@ -14,7 +14,6 @@ import {
14 import type {AnyNativeEvent} from 'events/PluginModuleType';
15 import {
16 EventComponent,
17 - EventTarget as EventTargetWorkTag,
17 HostComponent,
18 FunctionComponent,
19 } from 'shared/ReactWorkTags';
@@ -182,35 +181,6 @@ const eventResponderContext: ReactDOMResponderContext = {
181 eventListeners.set(eventObject, listener);
182 eventQueue.events.push(eventObject);
183 },
185 - isEventWithinTouchHitTarget(event: ReactDOMResponderEvent): boolean {
186 - validateResponderContext();
187 - const target = event.target;
188 - const nativeEvent = event.nativeEvent;
189 - // We should always be dealing with a mouse event or touch event here.
190 - // If we are not, these won't exist and we can early return.
191 - const x = (nativeEvent: any).clientX;
192 - const y = (nativeEvent: any).clientY;
193 - if (x === undefined || y === undefined) {
194 - return false;
195 - }
196 - const childFiber = getClosestInstanceFromNode(target);
197 - if (childFiber === null) {
198 - return false;
199 - }
200 - const parentFiber = childFiber.return;
201 - if (parentFiber !== null && parentFiber.tag === EventTargetWorkTag) {
202 - const parentNode = ((target.parentNode: any): Element);
203 - // TODO find another way to do this without using the
204 - // expensive getBoundingClientRect.
205 - const {left, top, right, bottom} = parentNode.getBoundingClientRect();
206 - // Check if the co-ords intersect with the target element's rect.
207 - if (x > left && y > top && x < right && y < bottom) {
208 - return false;
209 - }
210 - return true;
211 - }
212 - return false;
213 - },
184 isTargetWithinEventComponent(target: Element | Document): boolean {
185 validateResponderContext();
186 if (target != null) {
packages/react-dom/src/server/ReactPartialRenderer.js
+1 -27
@@ -39,8 +39,6 @@ import {
39 REACT_LAZY_TYPE,
40 REACT_MEMO_TYPE,
41 REACT_EVENT_COMPONENT_TYPE,
42 - REACT_EVENT_TARGET_TYPE,
43 - REACT_EVENT_TARGET_TOUCH_HIT,
42 } from 'shared/ReactSymbols';
43
44 import {
@@ -1168,32 +1166,8 @@ class ReactDOMServerRenderer {
1166 this.stack.push(frame);
1167 return '';
1168 }
1171 - case REACT_EVENT_COMPONENT_TYPE:
1172 - case REACT_EVENT_TARGET_TYPE: {
1169 + case REACT_EVENT_COMPONENT_TYPE: {
1170 if (enableEventAPI) {
1174 - if (
1175 - elementType.$$typeof === REACT_EVENT_TARGET_TYPE &&
1176 - elementType.type === REACT_EVENT_TARGET_TOUCH_HIT
1177 - ) {
1178 - const props = nextElement.props;
1179 - const bottom = props.bottom || 0;
1180 - const left = props.left || 0;
1181 - const right = props.right || 0;
1182 - const top = props.top || 0;
1183 -
1184 - if (bottom === 0 && left === 0 && right === 0 && top === 0) {
1185 - return '';
1186 - }
1187 - let topString = top ? `-${top}px` : '0px';
1188 - let leftString = left ? `-${left}px` : '0px';
1189 - let rightString = right ? `-${right}px` : '0x';
1190 - let bottomString = bottom ? `-${bottom}px` : '0px';
1191 -
1192 - return (
1193 - `<div style="position:absolute;pointer-events:none;z-index:-1;bottom:` +
1194 - `${bottomString};left:${leftString};right:${rightString};top:${topString}"></div>`
1195 - );
1196 - }
1171 const nextChildren = toArray(
1172 ((nextChild: any): ReactElement).props.children,
1173 );
packages/react-dom/src/shared/DOMProperty.js
-1
@@ -219,7 +219,6 @@ const properties = {};
219 'suppressContentEditableWarning',
220 'suppressHydrationWarning',
221 'style',
222 - 'hydrateTouchHitTarget',
222 ].forEach(name => {
223 properties[name] = new PropertyInfoRecord(
224 name,
packages/react-dom/src/shared/assertValidProps.js
+1 -7
@@ -12,8 +12,6 @@ import warning from 'shared/warning';
12 import ReactSharedInternals from 'shared/ReactSharedInternals';
13
14 import voidElementTags from './voidElementTags';
15 -import {enableEventAPI} from 'shared/ReactFeatureFlags';
16 -import {REACT_EVENT_TARGET_TYPE} from 'shared/ReactSymbols';
15
16 const HTML = '__html';
17
@@ -29,11 +27,7 @@ function assertValidProps(tag: string, props: ?Object) {
27 // Note the use of `==` which checks for null or undefined.
28 if (voidElementTags[tag]) {
29 invariant(
32 - (props.children == null ||
33 - (enableEventAPI &&
34 - props.children.type &&
35 - props.children.type.$$typeof === REACT_EVENT_TARGET_TYPE)) &&
36 - props.dangerouslySetInnerHTML == null,
30 + props.children == null && props.dangerouslySetInnerHTML == null,
31 '%s is a void element tag and must neither have `children` nor ' +
32 'use `dangerouslySetInnerHTML`.%s',
33 tag,
packages/react-events/README.md
-4
@@ -121,10 +121,6 @@ Component instance.
121
122 Returns `true` if the instance has taken ownership of the responder.
123
124 -### isEventWithinTouchHitTarget(event: ResponderEvent): boolean
125 -
126 -Returns `true` if the global coordinates lie within the TouchHitTarget.
127 -
124 ### isTargetWithinElement(target: Element, element: Element): boolean
125
126 Returns `true` if `target` is a child of `element`.
packages/react-events/docs/Press.md
+1 -1
@@ -119,7 +119,7 @@ Determines whether calling `onPress` should be cancelled if `onLongPress` or
119
120 Called immediately after a press is released, unless either 1) the press is
121 released outside the hit bounds of the element (accounting for
122 -`pressRetentionOffset` and `TouchHitTarget`), or 2) the press was a long press,
122 +`pressRetentionOffset`), or 2) the press was a long press,
123 and `onLongPress` or `onLongPressChange` props are provided, and
124 `onLongPressCancelsPress()` is `true`.
125
packages/react-events/index.js deleted
-12
@@ -1,12 +0,0 @@
1 -/**
2 - * Copyright (c) Facebook, Inc. and its affiliates.
3 - *
4 - * This source code is licensed under the MIT license found in the
5 - * LICENSE file in the root directory of this source tree.
6 - *
7 - * @flow
8 - */
9 -
10 -'use strict';
11 -
12 -export * from './src/ReactEvents';
packages/react-events/npm/index.js deleted
-7
@@ -1,7 +0,0 @@
1 -'use strict';
2 -
3 -if (process.env.NODE_ENV === 'production') {
4 - module.exports = require('./cjs/react-events.production.min.js');
5 -} else {
6 - module.exports = require('./cjs/react-events.development.js');
7 -}
packages/react-events/package.json
-1
@@ -19,7 +19,6 @@
19 "drag.js",
20 "scroll.js",
21 "focus-scope.js",
22 - "index.js",
22 "build-info.json",
23 "cjs/",
24 "umd/"
packages/react-events/src/ReactEvents.js deleted
-19
@@ -1,19 +0,0 @@
1 -/**
2 - * Copyright (c) Facebook, Inc. and its affiliates.
3 - *
4 - * This source code is licensed under the MIT license found in the
5 - * LICENSE file in the root directory of this source tree.
6 - *
7 - * @flow
8 - */
9 -
10 -import {
11 - REACT_EVENT_TARGET_TYPE,
12 - REACT_EVENT_TARGET_TOUCH_HIT,
13 -} from 'shared/ReactSymbols';
14 -import type {ReactEventTarget} from 'shared/ReactTypes';
15 -
16 -export const TouchHitTarget: ReactEventTarget = {
17 - $$typeof: REACT_EVENT_TARGET_TYPE,
18 - type: REACT_EVENT_TARGET_TOUCH_HIT,
19 -};
packages/react-events/src/dom/Hover.js
+12 -37
@@ -31,7 +31,6 @@ type HoverState = {
31 hoverTarget: null | Element | Document,
32 isActiveHovered: boolean,
33 isHovered: boolean,
34 - isOverTouchHitTarget: boolean,
34 isTouched: boolean,
35 hoverStartTimeout: null | number,
36 hoverEndTimeout: null | number,
@@ -228,8 +227,6 @@ function dispatchHoverEndEvents(
227 if (props.onHoverChange) {
228 dispatchHoverChangeEvent(event, context, props, state);
229 }
231 -
232 - state.isOverTouchHitTarget = false;
230 state.hoverTarget = null;
231 state.ignoreEmulatedMouseEvents = false;
232 state.isTouched = false;
@@ -281,7 +278,6 @@ const HoverResponder: ReactDOMEventResponder = {
278 return {
279 isActiveHovered: false,
280 isHovered: false,
284 - isOverTouchHitTarget: false,
281 isTouched: false,
282 hoverStartTimeout: null,
283 hoverEndTimeout: null,
@@ -325,11 +321,6 @@ const HoverResponder: ReactDOMEventResponder = {
321 if (isEmulatedMouseEvent(event, state)) {
322 return;
323 }
328 -
329 - if (context.isEventWithinTouchHitTarget(event)) {
330 - state.isOverTouchHitTarget = true;
331 - return;
332 - }
324 state.hoverTarget = context.getEventCurrentTarget(event);
325 state.ignoreEmulatedMouseEvents = true;
326 dispatchHoverStartEvents(event, context, props, state);
@@ -342,34 +333,18 @@ const HoverResponder: ReactDOMEventResponder = {
333 case 'mousemove': {
334 if (state.isHovered && !isEmulatedMouseEvent(event, state)) {
335 if (state.isHovered) {
345 - if (state.isOverTouchHitTarget) {
346 - // If we were moving over the TouchHitTarget and have now moved
347 - // over the Responder target
348 - if (!context.isEventWithinTouchHitTarget(event)) {
349 - dispatchHoverStartEvents(event, context, props, state);
350 - state.isOverTouchHitTarget = false;
351 - }
352 - } else {
353 - // If we were moving over the Responder target and have now moved
354 - // over the TouchHitTarget
355 - if (context.isEventWithinTouchHitTarget(event)) {
356 - dispatchHoverEndEvents(event, context, props, state);
357 - state.isOverTouchHitTarget = true;
358 - } else {
359 - if (props.onHoverMove && state.hoverTarget !== null) {
360 - const syntheticEvent = createHoverEvent(
361 - event,
362 - context,
363 - 'hovermove',
364 - state.hoverTarget,
365 - );
366 - context.dispatchEvent(
367 - syntheticEvent,
368 - props.onHoverMove,
369 - UserBlockingEvent,
370 - );
371 - }
372 - }
336 + if (props.onHoverMove && state.hoverTarget !== null) {
337 + const syntheticEvent = createHoverEvent(
338 + event,
339 + context,
340 + 'hovermove',
341 + state.hoverTarget,
342 + );
343 + context.dispatchEvent(
344 + syntheticEvent,
345 + props.onHoverMove,
346 + UserBlockingEvent,
347 + );
348 }
349 }
350 }
packages/react-events/src/dom/Press.js
-11
@@ -671,7 +671,6 @@ const PressResponder: ReactDOMEventResponder = {
671 const isPointerEvent = type === 'pointerdown';
672 const isKeyboardEvent = pointerType === 'keyboard';
673 const isMouseEvent = pointerType === 'mouse';
674 - const isPenEvent = pointerType === 'pen';
674
675 if (isPointerEvent || isTouchEvent) {
676 state.ignoreEmulatedMouseEvents = true;
@@ -684,16 +683,6 @@ const PressResponder: ReactDOMEventResponder = {
683 return;
684 }
685 }
687 - // Ignore mouse/pen pressing on touch hit target area
688 - if (
689 - (isMouseEvent || isPenEvent) &&
690 - context.isEventWithinTouchHitTarget(event)
691 - ) {
692 - // We need to prevent the native event to block the focus
693 - removeRootEventTypes(context, state);
694 - nativeEvent.preventDefault();
695 - return;
696 - }
686
687 // We set these here, before the button check so we have this
688 // data around for handling of the context menu
packages/react-events/src/dom/__tests__/TouchHitTarget-test.internal.js deleted
-649
@@ -1,649 +0,0 @@
1 -/**
2 - * Copyright (c) Facebook, Inc. and its affiliates.
3 - *
4 - * This source code is licensed under the MIT license found in the
5 - * LICENSE file in the root directory of this source tree.
6 - *
7 - * @emails react-core
8 - */
9 -
10 -'use strict';
11 -
12 -let React;
13 -let ReactNoop;
14 -let Scheduler;
15 -let ReactFeatureFlags;
16 -let EventComponent;
17 -let ReactTestRenderer;
18 -let ReactDOM;
19 -let ReactDOMServer;
20 -let ReactSymbols;
21 -let ReactEvents;
22 -let TouchHitTarget;
23 -
24 -const noOpResponder = {
25 - targetEventTypes: [],
26 - onEvent() {},
27 -};
28 -
29 -function createReactEventComponent() {
30 - return {
31 - $$typeof: ReactSymbols.REACT_EVENT_COMPONENT_TYPE,
32 - props: null,
33 - responder: noOpResponder,
34 - };
35 -}
36 -
37 -function init() {
38 - jest.resetModules();
39 - ReactFeatureFlags = require('shared/ReactFeatureFlags');
40 - ReactFeatureFlags.enableEventAPI = true;
41 - React = require('react');
42 - Scheduler = require('scheduler');
43 - ReactSymbols = require('shared/ReactSymbols');
44 - ReactEvents = require('react-events');
45 -}
46 -
47 -function initNoopRenderer() {
48 - init();
49 - ReactNoop = require('react-noop-renderer');
50 -}
51 -
52 -function initTestRenderer() {
53 - init();
54 - ReactTestRenderer = require('react-test-renderer');
55 -}
56 -
57 -function initReactDOM() {
58 - init();
59 - ReactDOM = require('react-dom');
60 -}
61 -
62 -function initReactDOMServer() {
63 - init();
64 - ReactDOMServer = require('react-dom/server');
65 -}
66 -
67 -describe('TouchHitTarget', () => {
68 - describe('NoopRenderer', () => {
69 - beforeEach(() => {
70 - initNoopRenderer();
71 - EventComponent = createReactEventComponent();
72 - TouchHitTarget = ReactEvents.TouchHitTarget;
73 - });
74 -
75 - it('should not warn when a TouchHitTarget is used correctly', () => {
76 - const Test = () => (
77 - <EventComponent>
78 - <div>
79 - <TouchHitTarget />
80 - </div>
81 - </EventComponent>
82 - );
83 -
84 - ReactNoop.render(<Test />);
85 - expect(Scheduler).toFlushWithoutYielding();
86 - expect(ReactNoop).toMatchRenderedOutput(<div />);
87 - });
88 -
89 - it('should warn when a TouchHitTarget has children', () => {
90 - const Test = () => (
91 - <EventComponent>
92 - <div>
93 - <TouchHitTarget>
94 - <span>Child 1</span>
95 - </TouchHitTarget>
96 - </div>
97 - </EventComponent>
98 - );
99 -
100 - expect(() => {
101 - ReactNoop.render(<Test />);
102 - expect(Scheduler).toFlushWithoutYielding();
103 - }).toWarnDev('Warning: Event targets should not have children.');
104 -
105 - const Test2 = () => (
106 - <EventComponent>
107 - <div>
108 - <TouchHitTarget>Child 1</TouchHitTarget>
109 - </div>
110 - </EventComponent>
111 - );
112 -
113 - expect(() => {
114 - ReactNoop.render(<Test2 />);
115 - expect(Scheduler).toFlushWithoutYielding();
116 - }).toWarnDev('Warning: Event targets should not have children.');
117 -
118 - // Should render without warnings
119 - const Test3 = () => (
120 - <EventComponent>
121 - <div>
122 - <TouchHitTarget />
123 - </div>
124 - </EventComponent>
125 - );
126 -
127 - ReactNoop.render(<Test3 />);
128 - expect(Scheduler).toFlushWithoutYielding();
129 - expect(ReactNoop).toMatchRenderedOutput(<div />);
130 - });
131 -
132 - it('should warn when a TouchHitTarget is a direct child of an event component', () => {
133 - const Test = () => (
134 - <EventComponent>
135 - <TouchHitTarget />
136 - </EventComponent>
137 - );
138 -
139 - expect(() => {
140 - ReactNoop.render(<Test />);
141 - expect(Scheduler).toFlushWithoutYielding();
142 - }).toWarnDev(
143 - 'Warning: validateDOMNesting: <TouchHitTarget> cannot not be a direct child of an event component. ' +
144 - 'Ensure <TouchHitTarget> is a direct child of a DOM element.',
145 - );
146 - });
147 - });
148 -
149 - describe('TestRenderer', () => {
150 - beforeEach(() => {
151 - initTestRenderer();
152 - EventComponent = createReactEventComponent();
153 - TouchHitTarget = ReactEvents.TouchHitTarget;
154 - });
155 -
156 - it('should not warn when a TouchHitTarget is used correctly', () => {
157 - const Test = () => (
158 - <EventComponent>
159 - <div>
160 - <TouchHitTarget />
161 - </div>
162 - </EventComponent>
163 - );
164 -
165 - const root = ReactTestRenderer.create(null);
166 - root.update(<Test />);
167 - expect(Scheduler).toFlushWithoutYielding();
168 - expect(root).toMatchRenderedOutput(<div />);
169 - });
170 -
171 - it('should warn when a TouchHitTarget has children', () => {
172 - const Test = () => (
173 - <EventComponent>
174 - <div>
175 - <TouchHitTarget>
176 - <span>Child 1</span>
177 - </TouchHitTarget>
178 - </div>
179 - </EventComponent>
180 - );
181 -
182 - const root = ReactTestRenderer.create(null);
183 - expect(() => {
184 - root.update(<Test />);
185 - expect(Scheduler).toFlushWithoutYielding();
186 - }).toWarnDev('Warning: Event targets should not have children.');
187 -
188 - const Test2 = () => (
189 - <EventComponent>
190 - <div>
191 - <TouchHitTarget>Child 1</TouchHitTarget>
192 - </div>
193 - </EventComponent>
194 - );
195 -
196 - expect(() => {
197 - root.update(<Test2 />);
198 - expect(Scheduler).toFlushWithoutYielding();
199 - }).toWarnDev('Warning: Event targets should not have children.');
200 -
201 - // Should render without warnings
202 - const Test3 = () => (
203 - <EventComponent>
204 - <div>
205 - <TouchHitTarget />
206 - </div>
207 - </EventComponent>
208 - );
209 -
210 - root.update(<Test3 />);
211 - expect(Scheduler).toFlushWithoutYielding();
212 - expect(root).toMatchRenderedOutput(<div />);
213 - });
214 -
215 - it('should warn when a TouchHitTarget is a direct child of an event component', () => {
216 - const Test = () => (
217 - <EventComponent>
218 - <TouchHitTarget />
219 - </EventComponent>
220 - );
221 -
222 - const root = ReactTestRenderer.create(null);
223 - expect(() => {
224 - root.update(<Test />);
225 - expect(Scheduler).toFlushWithoutYielding();
226 - }).toWarnDev(
227 - 'Warning: validateDOMNesting: <TouchHitTarget> cannot not be a direct child of an event component. ' +
228 - 'Ensure <TouchHitTarget> is a direct child of a DOM element.',
229 - );
230 - });
231 - });
232 -
233 - describe('ReactDOM', () => {
234 - beforeEach(() => {
235 - initReactDOM();
236 - EventComponent = createReactEventComponent();
237 - TouchHitTarget = ReactEvents.TouchHitTarget;
238 - });
239 -
240 - it('should not warn when a TouchHitTarget is used correctly', () => {
241 - const Test = () => (
242 - <EventComponent>
243 - <div>
244 - <TouchHitTarget />
245 - </div>
246 - </EventComponent>
247 - );
248 -
249 - const container = document.createElement('div');
250 - ReactDOM.render(<Test />, container);
251 - expect(Scheduler).toFlushWithoutYielding();
252 - expect(container.innerHTML).toBe('<div></div>');
253 - });
254 -
255 - it('should warn when a TouchHitTarget has children', () => {
256 - const Test = () => (
257 - <EventComponent>
258 - <div>
259 - <TouchHitTarget>
260 - <span>Child 1</span>
261 - </TouchHitTarget>
262 - </div>
263 - </EventComponent>
264 - );
265 -
266 - const container = document.createElement('div');
267 - expect(() => {
268 - ReactDOM.render(<Test />, container);
269 - expect(Scheduler).toFlushWithoutYielding();
270 - }).toWarnDev('Warning: Event targets should not have children.');
271 -
272 - const Test2 = () => (
273 - <EventComponent>
274 - <div>
275 - <TouchHitTarget>Child 1</TouchHitTarget>
276 - </div>
277 - </EventComponent>
278 - );
279 -
280 - expect(() => {
281 - ReactDOM.render(<Test2 />, container);
282 - expect(Scheduler).toFlushWithoutYielding();
283 - }).toWarnDev('Warning: Event targets should not have children.');
284 -
285 - // Should render without warnings
286 - const Test3 = () => (
287 - <EventComponent>
288 - <div>
289 - <TouchHitTarget />
290 - </div>
291 - </EventComponent>
292 - );
293 -
294 - ReactDOM.render(<Test3 />, container);
295 - expect(Scheduler).toFlushWithoutYielding();
296 - expect(container.innerHTML).toBe('<div></div>');
297 - });
298 -
299 - it('should warn when a TouchHitTarget is a direct child of an event component', () => {
300 - const Test = () => (
301 - <EventComponent>
302 - <TouchHitTarget />
303 - </EventComponent>
304 - );
305 -
306 - const container = document.createElement('div');
307 - expect(() => {
308 - ReactDOM.render(<Test />, container);
309 - expect(Scheduler).toFlushWithoutYielding();
310 - }).toWarnDev(
311 - 'Warning: validateDOMNesting: <TouchHitTarget> cannot not be a direct child of an event component. ' +
312 - 'Ensure <TouchHitTarget> is a direct child of a DOM element.',
313 - );
314 - });
315 -
316 - it('should render a conditional TouchHitTarget correctly (false -> true)', () => {
317 - let cond = false;
318 -
319 - const Test = () => (
320 - <EventComponent>
321 - <div style={{position: 'relative', zIndex: 0}}>
322 - {cond ? null : (
323 - <TouchHitTarget top={10} left={10} right={10} bottom={10} />
324 - )}
325 - </div>
326 - </EventComponent>
327 - );
328 -
329 - const container = document.createElement('div');
330 - ReactDOM.render(<Test />, container);
331 - expect(Scheduler).toFlushWithoutYielding();
332 - expect(container.innerHTML).toBe(
333 - '<div style="position: relative; z-index: 0;"><div style="position: absolute; z-index: -1; bottom: -10px; ' +
334 - 'left: -10px; right: -10px; top: -10px;"></div></div>',
335 - );
336 -
337 - cond = true;
338 - ReactDOM.render(<Test />, container);
339 - expect(Scheduler).toFlushWithoutYielding();
340 - expect(container.innerHTML).toBe(
341 - '<div style="position: relative; z-index: 0;"></div>',
342 - );
343 - });
344 -
345 - it('should render a conditional TouchHitTarget correctly (true -> false)', () => {
346 - let cond = true;
347 -
348 - const Test = () => (
349 - <EventComponent>
350 - <div style={{position: 'relative', zIndex: 0}}>
351 - {cond ? null : (
352 - <TouchHitTarget top={10} left={10} right={10} bottom={10} />
353 - )}
354 - </div>
355 - </EventComponent>
356 - );
357 -
358 - const container = document.createElement('div');
359 - ReactDOM.render(<Test />, container);
360 - expect(Scheduler).toFlushWithoutYielding();
361 - expect(container.innerHTML).toBe(
362 - '<div style="position: relative; z-index: 0;"></div>',
363 - );
364 -
365 - cond = false;
366 - ReactDOM.render(<Test />, container);
367 - expect(Scheduler).toFlushWithoutYielding();
368 - expect(container.innerHTML).toBe(
369 - '<div style="position: relative; z-index: 0;"><div style="position: absolute; z-index: -1; bottom: -10px; ' +
370 - 'left: -10px; right: -10px; top: -10px;"></div></div>',
371 - );
372 - });
373 -
374 - it('should render a conditional TouchHitTarget hit slop correctly (false -> true)', () => {
375 - let cond = false;
376 -
377 - const Test = () => (
378 - <EventComponent>
379 - <div style={{position: 'relative', zIndex: 0}}>
380 - {cond ? (
381 - <TouchHitTarget />
382 - ) : (
383 - <TouchHitTarget top={10} left={10} right={10} bottom={10} />
384 - )}
385 - </div>
386 - </EventComponent>
387 - );
388 -
389 - const container = document.createElement('div');
390 - ReactDOM.render(<Test />, container);
391 - expect(Scheduler).toFlushWithoutYielding();
392 - expect(container.innerHTML).toBe(
393 - '<div style="position: relative; z-index: 0;"><div style="position: absolute; z-index: -1; bottom: -10px; ' +
394 - 'left: -10px; right: -10px; top: -10px;"></div></div>',
395 - );
396 -
397 - cond = true;
398 - ReactDOM.render(<Test />, container);
399 - expect(Scheduler).toFlushWithoutYielding();
400 - expect(container.innerHTML).toBe(
401 - '<div style="position: relative; z-index: 0;"></div>',
402 - );
403 - });
404 -
405 - it('should render a conditional TouchHitTarget hit slop correctly (true -> false)', () => {
406 - let cond = true;
407 -
408 - const Test = () => (
409 - <EventComponent>
410 - <div style={{position: 'relative', zIndex: 0}}>
411 - <span>Random span 1</span>
412 - {cond ? (
413 - <TouchHitTarget />
414 - ) : (
415 - <TouchHitTarget top={10} left={10} right={10} bottom={10} />
416 - )}
417 - <span>Random span 2</span>
418 - </div>
419 - </EventComponent>
420 - );
421 -
422 - const container = document.createElement('div');
423 - ReactDOM.render(<Test />, container);
424 - expect(Scheduler).toFlushWithoutYielding();
425 - expect(container.innerHTML).toBe(
426 - '<div style="position: relative; z-index: 0;"><span>Random span 1</span><span>Random span 2</span></div>',
427 - );
428 -
429 - cond = false;
430 - ReactDOM.render(<Test />, container);
431 - expect(Scheduler).toFlushWithoutYielding();
432 - expect(container.innerHTML).toBe(
433 - '<div style="position: relative; z-index: 0;"><span>Random span 1</span>' +
434 - '<div style="position: absolute; z-index: -1; bottom: -10px; ' +
435 - 'left: -10px; right: -10px; top: -10px;"></div><span>Random span 2</span></div>',
436 - );
437 - });
438 -
439 - it('should update TouchHitTarget hit slop values correctly (false -> true)', () => {
440 - let cond = false;
441 -
442 - const Test = () => (
443 - <EventComponent>
444 - <div style={{position: 'relative', zIndex: 0}}>
445 - <span>Random span 1</span>
446 - {cond ? (
447 - <TouchHitTarget top={10} left={null} right={10} bottom={10} />
448 - ) : (
449 - <TouchHitTarget
450 - top={undefined}
451 - left={20}
452 - right={null}
453 - bottom={0}
454 - />
455 - )}
456 - <span>Random span 2</span>
457 - </div>
458 - </EventComponent>
459 - );
460 -
461 - const container = document.createElement('div');
462 - ReactDOM.render(<Test />, container);
463 - expect(Scheduler).toFlushWithoutYielding();
464 - expect(container.innerHTML).toBe(
465 - '<div style="position: relative; z-index: 0;"><span>Random span 1</span>' +
466 - '<div style="position: absolute; z-index: -1; bottom: 0px; ' +
467 - 'left: -20px; right: 0px; top: 0px;"></div><span>Random span 2</span></div>',
468 - );
469 -
470 - cond = true;
471 - ReactDOM.render(<Test />, container);
472 - expect(Scheduler).toFlushWithoutYielding();
473 - expect(container.innerHTML).toBe(
474 - '<div style="position: relative; z-index: 0;"><span>Random span 1</span>' +
475 - '<div style="position: absolute; z-index: -1; bottom: 0px; ' +
476 - 'left: -20px; right: 0px; top: 0px;"></div><span>Random span 2</span></div>',
477 - );
478 - });
479 -
480 - it('should update TouchHitTarget hit slop values correctly (true -> false)', () => {
481 - let cond = true;
482 -
483 - const Test = () => (
484 - <EventComponent>
485 - <div style={{position: 'relative', zIndex: 0}}>
486 - <span>Random span 1</span>
487 - {cond ? (
488 - <TouchHitTarget top={10} left={null} right={10} bottom={10} />
489 - ) : (
490 - <TouchHitTarget
491 - top={undefined}
492 - left={20}
493 - right={null}
494 - bottom={0}
495 - />
496 - )}
497 - <span>Random span 2</span>
498 - </div>
499 - </EventComponent>
500 - );
501 -
502 - const container = document.createElement('div');
503 - ReactDOM.render(<Test />, container);
504 - expect(Scheduler).toFlushWithoutYielding();
505 - expect(container.innerHTML).toBe(
506 - '<div style="position: relative; z-index: 0;"><span>Random span 1</span>' +
507 - '<div style="position: absolute; z-index: -1; bottom: -10px; ' +
508 - 'left: 0px; right: -10px; top: -10px;"></div><span>Random span 2</span></div>',
509 - );
510 -
511 - cond = false;
512 - ReactDOM.render(<Test />, container);
513 - expect(Scheduler).toFlushWithoutYielding();
514 - expect(container.innerHTML).toBe(
515 - '<div style="position: relative; z-index: 0;"><span>Random span 1</span><div style="position: absolute; ' +
516 - 'z-index: -1; bottom: -10px; left: 0px; right: -10px; top: -10px;">' +
517 - '</div><span>Random span 2</span></div>',
518 - );
519 - });
520 -
521 - it('should hydrate TouchHitTarget hit slop elements correcty', () => {
522 - const Test = () => (
523 - <EventComponent>
524 - <div style={{position: 'relative', zIndex: 0}}>
525 - <TouchHitTarget />
526 - </div>
527 - </EventComponent>
528 - );
529 -
530 - const container = document.createElement('div');
531 - container.innerHTML = '<div style="position:relative;z-index:0"></div>';
532 - ReactDOM.hydrate(<Test />, container);
533 - expect(Scheduler).toFlushWithoutYielding();
534 - expect(container.innerHTML).toBe(
535 - '<div style="position:relative;z-index:0"></div>',
536 - );
537 -
538 - const Test2 = () => (
539 - <EventComponent>
540 - <div style={{position: 'relative', zIndex: 0}}>
541 - <TouchHitTarget top={10} left={10} right={10} bottom={10} />
542 - </div>
543 - </EventComponent>
544 - );
545 -
546 - const container2 = document.createElement('div');
547 - container2.innerHTML =
548 - '<div style="position:relative;z-index:0"><div style="position:absolute;pointer-events:none;z-index:-1;' +
549 - 'bottom:-10px;left:-10px;right:-10px;top:-10px"></div></div>';
550 - ReactDOM.hydrate(<Test2 />, container2);
551 - expect(Scheduler).toFlushWithoutYielding();
552 - expect(container2.innerHTML).toBe(
553 - '<div style="position:relative;z-index:0"><div style="position: absolute; z-index: -1; ' +
554 - 'bottom: -10px; left: -10px; right: -10px; top: -10px;"></div></div>',
555 - );
556 - });
557 -
558 - it('should hydrate TouchHitTarget hit slop elements correcty and patch them', () => {
559 - const Test = () => (
560 - <EventComponent>
561 - <div style={{position: 'relative', zIndex: 0}}>
562 - <TouchHitTarget top={10} left={10} right={10} bottom={10} />
563 - </div>
564 - </EventComponent>
565 - );
566 -
567 - const container = document.createElement('div');
568 - container.innerHTML =
569 - '<div style="position: relative; z-index: 0"></div>';
570 - expect(() => {
571 - ReactDOM.hydrate(<Test />, container);
572 - expect(Scheduler).toFlushWithoutYielding();
573 - }).toWarnDev(
574 - 'Warning: Expected server HTML to contain a matching <div> in <div>.',
575 - {withoutStack: true},
576 - );
577 - expect(Scheduler).toFlushWithoutYielding();
578 - expect(container.innerHTML).toBe(
579 - '<div style="position: relative; z-index: 0"><div style="position: absolute; z-index: -1; bottom: -10px; ' +
580 - 'left: -10px; right: -10px; top: -10px;"></div></div>',
581 - );
582 - });
583 - });
584 -
585 - describe('ReactDOMServer', () => {
586 - beforeEach(() => {
587 - initReactDOMServer();
588 - EventComponent = createReactEventComponent();
589 - TouchHitTarget = ReactEvents.TouchHitTarget;
590 - });
591 -
592 - it('should not warn when a TouchHitTarget is used correctly', () => {
593 - const Test = () => (
594 - <EventComponent>
595 - <div>
596 - <TouchHitTarget />
597 - </div>
598 - </EventComponent>
599 - );
600 -
601 - const output = ReactDOMServer.renderToString(<Test />);
602 - expect(output).toBe('<div></div>');
603 - });
604 -
605 - it('should render a TouchHitTarget with hit slop values', () => {
606 - const Test = () => (
607 - <EventComponent>
608 - <div>
609 - <TouchHitTarget top={10} left={10} right={10} bottom={10} />
610 - </div>
611 - </EventComponent>
612 - );
613 -
614 - let output = ReactDOMServer.renderToString(<Test />);
615 - expect(output).toBe(
616 - '<div><div style="position:absolute;pointer-events:none;z-index:-1;' +
617 - 'bottom:-10px;left:-10px;right:-10px;top:-10px"></div></div>',
618 - );
619 -
620 - const Test2 = () => (
621 - <EventComponent>
622 - <div>
623 - <TouchHitTarget top={null} left={undefined} right={0} bottom={10} />
624 - </div>
625 - </EventComponent>
626 - );
627 -
628 - output = ReactDOMServer.renderToString(<Test2 />);
629 - expect(output).toBe(
630 - '<div><div style="position:absolute;pointer-events:none;z-index:-1;' +
631 - 'bottom:-10px;left:0px;right:0x;top:0px"></div></div>',
632 - );
633 -
634 - const Test3 = () => (
635 - <EventComponent>
636 - <div>
637 - <TouchHitTarget top={1} left={2} right={3} bottom={4} />
638 - </div>
639 - </EventComponent>
640 - );
641 -
642 - output = ReactDOMServer.renderToString(<Test3 />);
643 - expect(output).toBe(
644 - '<div><div style="position:absolute;pointer-events:none;z-index:-1;' +
645 - 'bottom:-4px;left:-2px;right:-3px;top:-1px"></div></div>',
646 - );
647 - });
648 - });
649 -});
packages/react-native-renderer/src/ReactFabricHostConfig.js
-8
@@ -291,14 +291,6 @@ export function getChildHostContextForEventComponent(
291 return parentHostContext;
292 }
293
294 -export function getChildHostContextForEventTarget(
295 - parentHostContext: HostContext,
296 - type: Symbol | number,
297 -) {
298 - // TODO: add getChildHostContextForEventTarget implementation
299 - return parentHostContext;
300 -}
301 -
294 export function getPublicInstance(instance: Instance): * {
295 return instance.canonical;
296 }
packages/react-native-renderer/src/ReactNativeHostConfig.js
-8
@@ -216,14 +216,6 @@ export function getChildHostContextForEventComponent(
216 return parentHostContext;
217 }
218
219 -export function getChildHostContextForEventTarget(
220 - parentHostContext: HostContext,
221 - type: Symbol | number,
222 -) {
223 - // TODO: add getChildHostContextForEventTarget implementation
224 - return parentHostContext;
225 -}
226 -
219 export function getPublicInstance(instance: Instance): * {
220 return instance;
221 }
packages/react-noop-renderer/src/createReactNoop.js
+1 -89
@@ -23,11 +23,7 @@ import type {RootTag} from 'shared/ReactRootTags';
23 import * as Scheduler from 'scheduler/unstable_mock';
24 import {createPortal} from 'shared/ReactPortal';
25 import expect from 'expect';
26 -import {
27 - REACT_FRAGMENT_TYPE,
28 - REACT_ELEMENT_TYPE,
29 - REACT_EVENT_TARGET_TOUCH_HIT,
30 -} from 'shared/ReactSymbols';
26 +import {REACT_FRAGMENT_TYPE, REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
27 import warning from 'shared/warning';
28 import enqueueTask from 'shared/enqueueTask';
29 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -38,18 +34,6 @@ import {
34 } from 'shared/ReactFeatureFlags';
35 import {ConcurrentRoot, BatchedRoot, LegacyRoot} from 'shared/ReactRootTags';
36
41 -type EventTargetChildElement = {
42 - type: string,
43 - props: null | {
44 - style?: {
45 - position?: string,
46 - bottom?: string,
47 - left?: string,
48 - right?: string,
49 - top?: string,
50 - },
51 - },
52 -};
37 type Container = {
38 rootID: string,
39 children: Array<Instance | TextInstance>,
@@ -86,8 +70,6 @@ const {ReactCurrentActingRendererSigil} = ReactSharedInternals;
70 const NO_CONTEXT = {};
71 const UPPERCASE_CONTEXT = {};
72 const EVENT_COMPONENT_CONTEXT = {};
89 -const EVENT_TARGET_CONTEXT = {};
90 -const EVENT_TOUCH_HIT_TARGET_CONTEXT = {};
73 const UPDATE_SIGNAL = {};
74 if (__DEV__) {
75 Object.freeze(NO_CONTEXT);
@@ -286,34 +268,11 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
268
269 getChildHostContextForEventComponent(parentHostContext: HostContext) {
270 if (__DEV__ && enableEventAPI) {
289 - warning(
290 - parentHostContext !== EVENT_TARGET_CONTEXT &&
291 - parentHostContext !== EVENT_TOUCH_HIT_TARGET_CONTEXT,
292 - 'validateDOMNesting: React event targets must not have event components as children.',
293 - );
271 return EVENT_COMPONENT_CONTEXT;
272 }
273 return parentHostContext;
274 },
275
299 - getChildHostContextForEventTarget(
300 - parentHostContext: HostContext,
301 - type: Symbol | number,
302 - ) {
303 - if (__DEV__ && enableEventAPI) {
304 - if (type === REACT_EVENT_TARGET_TOUCH_HIT) {
305 - warning(
306 - parentHostContext !== EVENT_COMPONENT_CONTEXT,
307 - 'validateDOMNesting: <TouchHitTarget> cannot not be a direct child of an event component. ' +
308 - 'Ensure <TouchHitTarget> is a direct child of a DOM element.',
309 - );
310 - return EVENT_TOUCH_HIT_TARGET_CONTEXT;
311 - }
312 - return EVENT_TARGET_CONTEXT;
313 - }
314 - return parentHostContext;
315 - },
316 -
276 getPublicInstance(instance) {
277 return instance;
278 },
@@ -448,53 +407,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
407 unmountEventComponent(): void {
408 // NO-OP
409 },
451 -
452 - getEventTargetChildElement(
453 - type: Symbol | number,
454 - props: Props,
455 - ): null | EventTargetChildElement {
456 - if (enableEventAPI) {
457 - if (type === REACT_EVENT_TARGET_TOUCH_HIT) {
458 - const {bottom, left, right, top} = props;
459 -
460 - if (!bottom && !left && !right && !top) {
461 - return null;
462 - }
463 - return {
464 - type: 'div',
465 - props: {
466 - style: {
467 - position: 'absolute',
468 - zIndex: -1,
469 - bottom: bottom ? `-${bottom}px` : '0px',
470 - left: left ? `-${left}px` : '0px',
471 - right: right ? `-${right}px` : '0px',
472 - top: top ? `-${top}px` : '0px',
473 - },
474 - },
475 - };
476 - }
477 - }
478 - return null;
479 - },
480 -
481 - handleEventTarget(
482 - type: Symbol | number,
483 - props: Props,
484 - rootContainerInstance: Container,
485 - internalInstanceHandle: Object,
486 - ): boolean {
487 - return false;
488 - },
489 -
490 - commitEventTarget(
491 - type: Symbol | number,
492 - props: Props,
493 - instance: Instance,
494 - parentInstance: Instance,
495 - ): void {
496 - // NO-OP
497 - },
410 };
411
412 const hostConfig = useMutation
packages/react-reconciler/src/ReactFiber.js
-32
@@ -13,7 +13,6 @@ import type {
13 ReactPortal,
14 RefObject,
15 ReactEventComponent,
16 - ReactEventTarget,
16 } from 'shared/ReactTypes';
17 import type {RootTag} from 'shared/ReactRootTags';
18 import type {WorkTag} from 'shared/ReactWorkTags';
@@ -50,7 +49,6 @@ import {
49 SimpleMemoComponent,
50 LazyComponent,
51 EventComponent,
53 - EventTarget,
52 } from 'shared/ReactWorkTags';
53 import getComponentName from 'shared/getComponentName';
54
@@ -81,7 +79,6 @@ import {
79 REACT_MEMO_TYPE,
80 REACT_LAZY_TYPE,
81 REACT_EVENT_COMPONENT_TYPE,
84 - REACT_EVENT_TARGET_TYPE,
82 } from 'shared/ReactSymbols';
83
84 let hasBadMapPolyfill;
@@ -592,17 +589,6 @@ export function createFiberFromTypeAndProps(
589 );
590 }
591 break;
595 - case REACT_EVENT_TARGET_TYPE:
596 - if (enableEventAPI) {
597 - return createFiberFromEventTarget(
598 - type,
599 - pendingProps,
600 - mode,
601 - expirationTime,
602 - key,
603 - );
604 - }
605 - break;
592 }
593 }
594 let info = '';
@@ -695,24 +681,6 @@ export function createFiberFromEventComponent(
681 return fiber;
682 }
683
698 -export function createFiberFromEventTarget(
699 - eventTarget: ReactEventTarget,
700 - pendingProps: any,
701 - mode: TypeOfMode,
702 - expirationTime: ExpirationTime,
703 - key: null | string,
704 -): Fiber {
705 - const fiber = createFiber(EventTarget, pendingProps, key, mode);
706 - fiber.elementType = eventTarget;
707 - fiber.type = eventTarget;
708 - fiber.expirationTime = expirationTime;
709 - // Store latest props
710 - fiber.stateNode = {
711 - props: pendingProps,
712 - };
713 - return fiber;
714 -}
715 -
684 function createFiberFromProfiler(
685 pendingProps: any,
686 mode: TypeOfMode,
packages/react-reconciler/src/ReactFiberBeginWork.js
-47
@@ -41,7 +41,6 @@ import {
41 LazyComponent,
42 IncompleteClassComponent,
43 EventComponent,
44 - EventTarget,
44 } from 'shared/ReactWorkTags';
45 import {
46 NoEffect,
@@ -108,13 +107,11 @@ import {
107 registerSuspenseInstanceRetry,
108 } from './ReactFiberHostConfig';
109 import type {SuspenseInstance} from './ReactFiberHostConfig';
111 -import {getEventTargetChildElement} from './ReactFiberHostConfig';
110 import {shouldSuspend} from './ReactFiberReconciler';
111 import {
112 pushHostContext,
113 pushHostContainer,
114 pushHostContextForEventComponent,
117 - pushHostContextForEventTarget,
115 } from './ReactFiberHostContext';
116 import {
117 suspenseStackCursor,
@@ -2412,38 +2409,6 @@ function updateEventComponent(current, workInProgress, renderExpirationTime) {
2409 return workInProgress.child;
2410 }
2411
2415 -function updateEventTarget(current, workInProgress, renderExpirationTime) {
2416 - const type = workInProgress.type.type;
2417 - const nextProps = workInProgress.pendingProps;
2418 - const eventTargetChild = getEventTargetChildElement(type, nextProps);
2419 -
2420 - if (__DEV__) {
2421 - warning(
2422 - nextProps.children == null,
2423 - 'Event targets should not have children.',
2424 - );
2425 - }
2426 - if (eventTargetChild !== null) {
2427 - const child = (workInProgress.child = createFiberFromTypeAndProps(
2428 - eventTargetChild.type,
2429 - null,
2430 - eventTargetChild.props,
2431 - null,
2432 - workInProgress.mode,
2433 - renderExpirationTime,
2434 - ));
2435 - child.return = workInProgress;
2436 -
2437 - if (current === null || current.child === null) {
2438 - child.effectTag = Placement;
2439 - }
2440 - } else {
2441 - reconcileChildren(current, workInProgress, null, renderExpirationTime);
2442 - }
2443 - pushHostContextForEventTarget(workInProgress);
2444 - return workInProgress.child;
2445 -}
2446 -
2412 export function markWorkInProgressReceivedUpdate() {
2413 didReceiveUpdate = true;
2414 }
@@ -2711,12 +2676,6 @@ function beginWork(
2676 pushHostContextForEventComponent(workInProgress);
2677 }
2678 break;
2714 - case EventTarget: {
2715 - if (enableEventAPI) {
2716 - pushHostContextForEventTarget(workInProgress);
2717 - }
2718 - break;
2719 - }
2679 }
2680 return bailoutOnAlreadyFinishedWork(
2681 current,
@@ -2912,12 +2871,6 @@ function beginWork(
2871 }
2872 break;
2873 }
2915 - case EventTarget: {
2916 - if (enableEventAPI) {
2917 - return updateEventTarget(current, workInProgress, renderExpirationTime);
2918 - }
2919 - break;
2920 - }
2874 }
2875 invariant(
2876 false,
packages/react-reconciler/src/ReactFiberCommitWork.js
-35
@@ -45,7 +45,6 @@ import {
45 MemoComponent,
46 SimpleMemoComponent,
47 EventComponent,
48 - EventTarget,
48 SuspenseListComponent,
49 } from 'shared/ReactWorkTags';
50 import {
@@ -94,7 +93,6 @@ import {
93 unhideInstance,
94 unhideTextInstance,
95 unmountEventComponent,
97 - commitEventTarget,
96 mountEventComponent,
97 } from './ReactFiberHostConfig';
98 import {
@@ -305,7 +303,6 @@ function commitBeforeMutationLifeCycles(
303 case HostText:
304 case HostPortal:
305 case IncompleteClassComponent:
308 - case EventTarget:
306 // Nothing to do for these component types
307 return;
308 default: {
@@ -594,34 +591,6 @@ function commitLifeCycles(
591 case SuspenseListComponent:
592 case IncompleteClassComponent:
593 return;
597 - case EventTarget: {
598 - if (enableEventAPI) {
599 - const type = finishedWork.type.type;
600 - const props = finishedWork.memoizedProps;
601 - const instance = finishedWork.stateNode;
602 - let parentInstance = null;
603 -
604 - let node = finishedWork.return;
605 - // Traverse up the fiber tree until we find the parent host node.
606 - while (node !== null) {
607 - if (node.tag === HostComponent) {
608 - parentInstance = node.stateNode;
609 - break;
610 - } else if (node.tag === HostRoot) {
611 - parentInstance = node.stateNode.containerInfo;
612 - break;
613 - }
614 - node = node.return;
615 - }
616 - invariant(
617 - parentInstance !== null,
618 - 'This should have a parent host component initialized. This error is likely ' +
619 - 'caused by a bug in React. Please file an issue.',
620 - );
621 - commitEventTarget(type, props, instance, parentInstance);
622 - }
623 - return;
624 - }
594 case EventComponent: {
595 if (enableEventAPI) {
596 mountEventComponent(finishedWork.stateNode);
@@ -869,7 +838,6 @@ function commitContainer(finishedWork: Fiber) {
838 case ClassComponent:
839 case HostComponent:
840 case HostText:
872 - case EventTarget:
841 case EventComponent: {
842 return;
843 }
@@ -1254,9 +1222,6 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
1222 commitTextUpdate(textInstance, oldText, newText);
1223 return;
1224 }
1257 - case EventTarget: {
1258 - return;
1259 - }
1225 case HostRoot: {
1226 return;
1227 }
packages/react-reconciler/src/ReactFiberCompleteWork.js
-22
@@ -48,7 +48,6 @@ import {
48 LazyComponent,
49 IncompleteClassComponent,
50 EventComponent,
51 - EventTarget,
51 } from 'shared/ReactWorkTags';
52 import {NoMode, BatchedMode} from './ReactTypeOfMode';
53 import {
@@ -76,7 +75,6 @@ import {
75 appendChildToContainerChildSet,
76 finalizeContainerChildren,
77 updateEventComponent,
79 - handleEventTarget,
78 } from './ReactFiberHostConfig';
79 import {
80 getRootHostContainer,
@@ -1085,26 +1083,6 @@ function completeWork(
1083 }
1084 break;
1085 }
1088 - case EventTarget: {
1089 - if (enableEventAPI) {
1090 - popHostContext(workInProgress);
1091 - const type = workInProgress.type.type;
1092 - const rootContainerInstance = getRootHostContainer();
1093 - const shouldUpdate = handleEventTarget(
1094 - type,
1095 - newProps,
1096 - rootContainerInstance,
1097 - workInProgress,
1098 - );
1099 - // Update the latest props on the stateNode. This is used
1100 - // during the event phase to find the most current props.
1101 - workInProgress.stateNode.props = newProps;
1102 - if (shouldUpdate) {
1103 - markUpdate(workInProgress);
1104 - }
1105 - }
1106 - break;
1107 - }
1086 default:
1087 invariant(
1088 false,
packages/react-reconciler/src/ReactFiberHostContext.js
-21
@@ -17,7 +17,6 @@ import {
17 getChildHostContext,
18 getRootHostContext,
19 getChildHostContextForEventComponent,
20 - getChildHostContextForEventTarget,
20 } from './ReactFiberHostConfig';
21 import {createCursor, push, pop} from './ReactFiberStack';
22
@@ -112,25 +111,6 @@ function pushHostContextForEventComponent(fiber: Fiber): void {
111 push(contextStackCursor, nextContext, fiber);
112 }
113
115 -function pushHostContextForEventTarget(fiber: Fiber): void {
116 - const context: HostContext = requiredContext(contextStackCursor.current);
117 - const eventTargetType = fiber.type.type;
118 - const nextContext = getChildHostContextForEventTarget(
119 - context,
120 - eventTargetType,
121 - );
122 -
123 - // Don't push this Fiber's context unless it's unique.
124 - if (context === nextContext) {
125 - return;
126 - }
127 -
128 - // Track the context and the Fiber that provided it.
129 - // This enables us to pop only Fibers that provide unique contexts.
130 - push(contextFiberStackCursor, fiber, fiber);
131 - push(contextStackCursor, nextContext, fiber);
132 -}
133 -
114 function popHostContext(fiber: Fiber): void {
115 // Do not pop unless this Fiber provided the current context.
116 // pushHostContext() only pushes Fibers that provide unique contexts.
@@ -150,5 +130,4 @@ export {
130 pushHostContainer,
131 pushHostContext,
132 pushHostContextForEventComponent,
153 - pushHostContextForEventTarget,
133 };
packages/react-reconciler/src/ReactFiberUnwindWork.js
-3
@@ -20,7 +20,6 @@ import {
20 SuspenseListComponent,
21 DehydratedSuspenseComponent,
22 EventComponent,
23 - EventTarget,
23 } from 'shared/ReactWorkTags';
24 import {DidCapture, NoEffect, ShouldCapture} from 'shared/ReactSideEffectTags';
25 import {
@@ -109,7 +108,6 @@ function unwindWork(
108 popProvider(workInProgress);
109 return null;
110 case EventComponent:
112 - case EventTarget:
111 if (enableEventAPI) {
112 popHostContext(workInProgress);
113 }
@@ -156,7 +154,6 @@ function unwindInterruptedWork(interruptedWork: Fiber) {
154 popProvider(interruptedWork);
155 break;
156 case EventComponent:
159 - case EventTarget:
157 if (enableEventAPI) {
158 popHostContext(interruptedWork);
159 }
packages/react-reconciler/src/__tests__/ReactFiberEvents-test-internal.js
-434
@@ -18,7 +18,6 @@ let ReactTestRenderer;
18 let ReactDOM;
19 let ReactDOMServer;
20 let ReactTestUtils;
21 -let EventTarget;
21 let ReactSymbols;
22
23 const noOpResponder = {
@@ -35,14 +34,6 @@ function createReactEventComponent() {
34 };
35 }
36
38 -function createReactEventTarget() {
39 - return {
40 - $$typeof: ReactSymbols.REACT_EVENT_TARGET_TYPE,
41 - displayName: 'TestEventTarget',
42 - type: Symbol.for('react.event_target.test'),
43 - };
44 -}
45 -
37 function init() {
38 jest.resetModules();
39 ReactFeatureFlags = require('shared/ReactFeatureFlags');
@@ -80,7 +71,6 @@ describe('ReactFiberEvents', () => {
71 beforeEach(() => {
72 initNoopRenderer();
73 EventComponent = createReactEventComponent();
83 - EventTarget = createReactEventTarget();
74 });
75
76 it('should render a simple event component with a single child', () => {
@@ -124,85 +114,6 @@ describe('ReactFiberEvents', () => {
114 );
115 });
116
127 - it('should render a simple event component with a single event target', () => {
128 - const Test = () => (
129 - <EventComponent>
130 - <div>
131 - Hello world<EventTarget />
132 - </div>
133 - </EventComponent>
134 - );
135 -
136 - ReactNoop.render(<Test />);
137 - expect(Scheduler).toFlushWithoutYielding();
138 - expect(ReactNoop).toMatchRenderedOutput(<div>Hello world</div>);
139 - });
140 -
141 - it('should warn when an event target has a direct text child', () => {
142 - const Test = () => (
143 - <EventComponent>
144 - <EventTarget>Hello world</EventTarget>
145 - </EventComponent>
146 - );
147 -
148 - expect(() => {
149 - ReactNoop.render(<Test />);
150 - expect(Scheduler).toFlushWithoutYielding();
151 - }).toWarnDev('Warning: Event targets should not have children.');
152 - });
153 -
154 - it('should warn when an event target has a direct text child #2', () => {
155 - const ChildWrapper = () => 'Hello world';
156 - const Test = () => (
157 - <EventComponent>
158 - <EventTarget>
159 - <ChildWrapper />
160 - </EventTarget>
161 - </EventComponent>
162 - );
163 -
164 - expect(() => {
165 - ReactNoop.render(<Test />);
166 - expect(Scheduler).toFlushWithoutYielding();
167 - }).toWarnDev('Warning: Event targets should not have children.');
168 - });
169 -
170 - it('should not warn if an event target is not a direct child of an event component', () => {
171 - const Test = () => (
172 - <EventComponent>
173 - <div>
174 - <EventTarget />
175 - <span>Child 1</span>
176 - </div>
177 - </EventComponent>
178 - );
179 -
180 - ReactNoop.render(<Test />);
181 - expect(Scheduler).toFlushWithoutYielding();
182 - expect(ReactNoop).toMatchRenderedOutput(
183 - <div>
184 - <span>Child 1</span>
185 - </div>,
186 - );
187 - });
188 -
189 - it('should warn if an event target has an event component as a child', () => {
190 - const Test = () => (
191 - <EventComponent>
192 - <EventTarget>
193 - <EventComponent>
194 - <span>Child 1</span>
195 - </EventComponent>
196 - </EventTarget>
197 - </EventComponent>
198 - );
199 -
200 - expect(() => {
201 - ReactNoop.render(<Test />);
202 - expect(Scheduler).toFlushWithoutYielding();
203 - }).toWarnDev('Warning: Event targets should not have children.');
204 - });
205 -
117 it('should handle event components correctly with error boundaries', () => {
118 function ErrorComponent() {
119 throw new Error('Failed!');
@@ -331,51 +242,6 @@ describe('ReactFiberEvents', () => {
242 );
243 });
244
334 - it('should handle re-renders where there is a bail-out in a parent and an error occurs #2', () => {
335 - let _updateCounter;
336 -
337 - function Child() {
338 - const [counter, updateCounter] = React.useState(0);
339 -
340 - _updateCounter = updateCounter;
341 -
342 - if (counter === 1) {
343 - return <EventTarget>123</EventTarget>;
344 - }
345 -
346 - return (
347 - <div>
348 - <span>Child - {counter}</span>
349 - </div>
350 - );
351 - }
352 -
353 - const Parent = () => (
354 - <div>
355 - <EventComponent>
356 - <Child />
357 - </EventComponent>
358 - </div>
359 - );
360 -
361 - ReactNoop.render(<Parent />);
362 - expect(Scheduler).toFlushWithoutYielding();
363 - expect(ReactNoop).toMatchRenderedOutput(
364 - <div>
365 - <div>
366 - <span>Child - 0</span>
367 - </div>
368 - </div>,
369 - );
370 -
371 - expect(() => {
372 - ReactNoop.act(() => {
373 - _updateCounter(counter => counter + 1);
374 - });
375 - expect(Scheduler).toFlushWithoutYielding();
376 - }).toWarnDev('Warning: Event targets should not have children.');
377 - });
378 -
245 it('should error with a component stack contains the names of the event components and event targets', () => {
246 let componentStackMessage;
247
@@ -426,7 +292,6 @@ describe('ReactFiberEvents', () => {
292 beforeEach(() => {
293 initTestRenderer();
294 EventComponent = createReactEventComponent();
429 - EventTarget = createReactEventTarget();
295 });
296
297 it('should render a simple event component with a single child', () => {
@@ -473,101 +338,6 @@ describe('ReactFiberEvents', () => {
338 );
339 });
340
476 - it('should render a simple event component with a single event target', () => {
477 - const Test = () => (
478 - <EventComponent>
479 - <div>
480 - Hello world<EventTarget />
481 - </div>
482 - </EventComponent>
483 - );
484 -
485 - const root = ReactTestRenderer.create(null);
486 - root.update(<Test />);
487 - expect(Scheduler).toFlushWithoutYielding();
488 - expect(root).toMatchRenderedOutput(<div>Hello world</div>);
489 -
490 - const Test2 = () => (
491 - <EventComponent>
492 - <EventTarget />
493 - <span>I am now a span</span>
494 - </EventComponent>
495 - );
496 -
497 - root.update(<Test2 />);
498 - expect(Scheduler).toFlushWithoutYielding();
499 - expect(root).toMatchRenderedOutput(<span>I am now a span</span>);
500 - });
501 -
502 - it('should warn when an event target has a direct text child', () => {
503 - const Test = () => (
504 - <EventComponent>
505 - <EventTarget>Hello world</EventTarget>
506 - </EventComponent>
507 - );
508 -
509 - const root = ReactTestRenderer.create(null);
510 - expect(() => {
511 - root.update(<Test />);
512 - expect(Scheduler).toFlushWithoutYielding();
513 - }).toWarnDev('Warning: Event targets should not have children.');
514 - });
515 -
516 - it('should warn when an event target has a direct text child #2', () => {
517 - const ChildWrapper = () => 'Hello world';
518 - const Test = () => (
519 - <EventComponent>
520 - <EventTarget>
521 - <ChildWrapper />
522 - </EventTarget>
523 - </EventComponent>
524 - );
525 -
526 - const root = ReactTestRenderer.create(null);
527 - expect(() => {
528 - root.update(<Test />);
529 - expect(Scheduler).toFlushWithoutYielding();
530 - }).toWarnDev('Warning: Event targets should not have children.');
531 - });
532 -
533 - it('should not warn if an event target is not a direct child of an event component', () => {
534 - const Test = () => (
535 - <EventComponent>
536 - <div>
537 - <EventTarget />
538 - <span>Child 1</span>
539 - </div>
540 - </EventComponent>
541 - );
542 -
543 - const root = ReactTestRenderer.create(null);
544 - root.update(<Test />);
545 - expect(Scheduler).toFlushWithoutYielding();
546 - expect(root).toMatchRenderedOutput(
547 - <div>
548 - <span>Child 1</span>
549 - </div>,
550 - );
551 - });
552 -
553 - it('should warn if an event target has an event component as a child', () => {
554 - const Test = () => (
555 - <EventComponent>
556 - <EventTarget>
557 - <EventComponent>
558 - <span>Child 1</span>
559 - </EventComponent>
560 - </EventTarget>
561 - </EventComponent>
562 - );
563 -
564 - const root = ReactTestRenderer.create(null);
565 - expect(() => {
566 - root.update(<Test />);
567 - expect(Scheduler).toFlushWithoutYielding();
568 - }).toWarnDev('Warning: Event targets should not have children.');
569 - });
570 -
341 it('should handle event components correctly with error boundaries', () => {
342 function ErrorComponent() {
343 throw new Error('Failed!');
@@ -697,52 +467,6 @@ describe('ReactFiberEvents', () => {
467 );
468 });
469
700 - it('should handle re-renders where there is a bail-out in a parent and an error occurs #2', () => {
701 - let _updateCounter;
702 -
703 - function Child() {
704 - const [counter, updateCounter] = React.useState(0);
705 -
706 - _updateCounter = updateCounter;
707 -
708 - if (counter === 1) {
709 - return <EventTarget>123</EventTarget>;
710 - }
711 -
712 - return (
713 - <div>
714 - <span>Child - {counter}</span>
715 - </div>
716 - );
717 - }
718 -
719 - const Parent = () => (
720 - <div>
721 - <EventComponent>
722 - <Child />
723 - </EventComponent>
724 - </div>
725 - );
726 -
727 - const root = ReactTestRenderer.create(null);
728 - root.update(<Parent />);
729 - expect(Scheduler).toFlushWithoutYielding();
730 - expect(root).toMatchRenderedOutput(
731 - <div>
732 - <div>
733 - <span>Child - 0</span>
734 - </div>
735 - </div>,
736 - );
737 -
738 - expect(() => {
739 - ReactTestRenderer.act(() => {
740 - _updateCounter(counter => counter + 1);
741 - });
742 - expect(Scheduler).toFlushWithoutYielding();
743 - }).toWarnDev('Warning: Event targets should not have children.');
744 - });
745 -
470 it('should error with a component stack contains the names of the event components and event targets', () => {
471 let componentStackMessage;
472
@@ -831,7 +555,6 @@ describe('ReactFiberEvents', () => {
555 beforeEach(() => {
556 initReactDOM();
557 EventComponent = createReactEventComponent();
834 - EventTarget = createReactEventTarget();
558 });
559
560 it('should render a simple event component with a single child', () => {
@@ -877,97 +600,6 @@ describe('ReactFiberEvents', () => {
600 );
601 });
602
880 - it('should render a simple event component with a single event target', () => {
881 - const Test = () => (
882 - <EventComponent>
883 - <div>
884 - Hello world<EventTarget />
885 - </div>
886 - </EventComponent>
887 - );
888 -
889 - const container = document.createElement('div');
890 - ReactDOM.render(<Test />, container);
891 - expect(Scheduler).toFlushWithoutYielding();
892 - expect(container.innerHTML).toBe('<div>Hello world</div>');
893 -
894 - const Test2 = () => (
895 - <EventComponent>
896 - <EventTarget />
897 - <span>I am now a span</span>
898 - </EventComponent>
899 - );
900 -
901 - ReactDOM.render(<Test2 />, container);
902 - expect(Scheduler).toFlushWithoutYielding();
903 - expect(container.innerHTML).toBe('<span>I am now a span</span>');
904 - });
905 -
906 - it('should warn when an event target has a direct text child', () => {
907 - const Test = () => (
908 - <EventComponent>
909 - <EventTarget>Hello world</EventTarget>
910 - </EventComponent>
911 - );
912 -
913 - expect(() => {
914 - const container = document.createElement('div');
915 - ReactDOM.render(<Test />, container);
916 - expect(Scheduler).toFlushWithoutYielding();
917 - }).toWarnDev('Warning: Event targets should not have children.');
918 - });
919 -
920 - it('should warn when an event target has a direct text child #2', () => {
921 - const ChildWrapper = () => 'Hello world';
922 - const Test = () => (
923 - <EventComponent>
924 - <EventTarget>
925 - <ChildWrapper />
926 - </EventTarget>
927 - </EventComponent>
928 - );
929 -
930 - expect(() => {
931 - const container = document.createElement('div');
932 - ReactDOM.render(<Test />, container);
933 - expect(Scheduler).toFlushWithoutYielding();
934 - }).toWarnDev('Warning: Event targets should not have children.');
935 - });
936 -
937 - it('should not warn if an event target is not a direct child of an event component', () => {
938 - const Test = () => (
939 - <EventComponent>
940 - <div>
941 - <EventTarget />
942 - <span>Child 1</span>
943 - </div>
944 - </EventComponent>
945 - );
946 -
947 - const container = document.createElement('div');
948 - ReactDOM.render(<Test />, container);
949 - expect(Scheduler).toFlushWithoutYielding();
950 - expect(container.innerHTML).toBe('<div><span>Child 1</span></div>');
951 - });
952 -
953 - it('should warn if an event target has an event component as a child', () => {
954 - const Test = () => (
955 - <EventComponent>
956 - <EventTarget>
957 - <EventComponent>
958 - <span>Child 1</span>
959 - </EventComponent>
960 - </EventTarget>
961 - </EventComponent>
962 - );
963 -
964 - expect(() => {
965 - const container = document.createElement('div');
966 - ReactDOM.render(<Test />, container);
967 - expect(Scheduler).toFlushWithoutYielding();
968 - }).toWarnDev('Warning: Event targets should not have children.');
969 - });
970 -
603 it('should handle event components correctly with error boundaries', () => {
604 function ErrorComponent() {
605 throw new Error('Failed!');
@@ -1084,47 +716,6 @@ describe('ReactFiberEvents', () => {
716 );
717 });
718
1087 - it('should handle re-renders where there is a bail-out in a parent and an error occurs #2', () => {
1088 - let _updateCounter;
1089 -
1090 - function Child() {
1091 - const [counter, updateCounter] = React.useState(0);
1092 -
1093 - _updateCounter = updateCounter;
1094 -
1095 - if (counter === 1) {
1096 - return <EventTarget>123</EventTarget>;
1097 - }
1098 -
1099 - return (
1100 - <div>
1101 - <span>Child - {counter}</span>
1102 - </div>
1103 - );
1104 - }
1105 -
1106 - const Parent = () => (
1107 - <div>
1108 - <EventComponent>
1109 - <Child />
1110 - </EventComponent>
1111 - </div>
1112 - );
1113 -
1114 - const container = document.createElement('div');
1115 - ReactDOM.render(<Parent />, container);
1116 - expect(container.innerHTML).toBe(
1117 - '<div><div><span>Child - 0</span></div></div>',
1118 - );
1119 -
1120 - expect(() => {
1121 - ReactTestUtils.act(() => {
1122 - _updateCounter(counter => counter + 1);
1123 - });
1124 - expect(Scheduler).toFlushWithoutYielding();
1125 - }).toWarnDev('Warning: Event targets should not have children.');
1126 - });
1127 -
719 it('should error with a component stack contains the names of the event components and event targets', () => {
720 let componentStackMessage;
721
@@ -1175,7 +766,6 @@ describe('ReactFiberEvents', () => {
766 beforeEach(() => {
767 initReactDOMServer();
768 EventComponent = createReactEventComponent();
1178 - EventTarget = createReactEventTarget();
769 });
770
771 it('should render a simple event component with a single child', () => {
@@ -1187,29 +777,5 @@ describe('ReactFiberEvents', () => {
777 const output = ReactDOMServer.renderToString(<Test />);
778 expect(output).toBe('<div>Hello world</div>');
779 });
1190 -
1191 - it('should render a simple event component with a single event target', () => {
1192 - const Test = () => (
1193 - <EventComponent>
1194 - <div>
1195 - Hello world<EventTarget />
1196 - </div>
1197 - </EventComponent>
1198 - );
1199 -
1200 - let output = ReactDOMServer.renderToString(<Test />);
1201 - expect(output).toBe('<div>Hello world</div>');
1202 -
1203 - const Test2 = () => (
1204 - <EventComponent>
1205 - <EventTarget>
1206 - <span>I am now a span</span>
1207 - </EventTarget>
1208 - </EventComponent>
1209 - );
1210 -
1211 - output = ReactDOMServer.renderToString(<Test2 />);
1212 - expect(output).toBe('<span>I am now a span</span>');
1213 - });
780 });
781 });
packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
-3
@@ -36,9 +36,6 @@ describe('ReactFiberHostContext', () => {
36 getChildHostContextForEventComponent: function() {
37 return null;
38 },
39 - getChildHostContextForEventTarget: function() {
40 - return null;
41 - },
39 shouldSetTextContent: function() {
40 return false;
41 },
packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
-4
@@ -44,8 +44,6 @@ export const getRootHostContext = $$$hostConfig.getRootHostContext;
44 export const getChildHostContext = $$$hostConfig.getChildHostContext;
45 export const getChildHostContextForEventComponent =
46 $$$hostConfig.getChildHostContextForEventComponent;
47 -export const getChildHostContextForEventTarget =
48 - $$$hostConfig.getChildHostContextForEventTarget;
47 export const prepareForCommit = $$$hostConfig.prepareForCommit;
48 export const resetAfterCommit = $$$hostConfig.resetAfterCommit;
49 export const createInstance = $$$hostConfig.createInstance;
@@ -90,8 +88,6 @@ export const hideTextInstance = $$$hostConfig.hideTextInstance;
88 export const unhideInstance = $$$hostConfig.unhideInstance;
89 export const unhideTextInstance = $$$hostConfig.unhideTextInstance;
90 export const unmountEventComponent = $$$hostConfig.unmountEventComponent;
93 -export const commitTouchHitTargetUpdate =
94 - $$$hostConfig.commitTouchHitTargetUpdate;
91 export const commitEventTarget = $$$hostConfig.commitEventTarget;
92
93 // -------------------
packages/react-test-renderer/src/ReactTestHostConfig.js
-100
@@ -10,22 +10,9 @@
10 import warning from 'shared/warning';
11
12 import type {ReactEventComponentInstance} from 'shared/ReactTypes';
13 -import {REACT_EVENT_TARGET_TOUCH_HIT} from 'shared/ReactSymbols';
13
14 import {enableEventAPI} from 'shared/ReactFeatureFlags';
15
17 -type EventTargetChildElement = {
18 - type: string,
19 - props: null | {
20 - style?: {
21 - position?: string,
22 - bottom?: string,
23 - left?: string,
24 - right?: string,
25 - top?: string,
26 - },
27 - },
28 -};
16 export type Type = string;
17 export type Props = Object;
18 export type Container = {|
@@ -59,8 +46,6 @@ export * from 'shared/HostConfigWithNoPersistence';
46 export * from 'shared/HostConfigWithNoHydration';
47
48 const EVENT_COMPONENT_CONTEXT = {};
62 -const EVENT_TARGET_CONTEXT = {};
63 -const EVENT_TOUCH_HIT_TARGET_CONTEXT = {};
49 const NO_CONTEXT = {};
50 const UPDATE_SIGNAL = {};
51 if (__DEV__) {
@@ -140,34 +125,11 @@ export function getChildHostContextForEventComponent(
125 parentHostContext: HostContext,
126 ): HostContext {
127 if (__DEV__ && enableEventAPI) {
143 - warning(
144 - parentHostContext !== EVENT_TARGET_CONTEXT &&
145 - parentHostContext !== EVENT_TOUCH_HIT_TARGET_CONTEXT,
146 - 'validateDOMNesting: React event targets must not have event components as children.',
147 - );
128 return EVENT_COMPONENT_CONTEXT;
129 }
130 return NO_CONTEXT;
131 }
132
153 -export function getChildHostContextForEventTarget(
154 - parentHostContext: HostContext,
155 - type: Symbol | number,
156 -): HostContext {
157 - if (__DEV__ && enableEventAPI) {
158 - if (type === REACT_EVENT_TARGET_TOUCH_HIT) {
159 - warning(
160 - parentHostContext !== EVENT_COMPONENT_CONTEXT,
161 - 'validateDOMNesting: <TouchHitTarget> cannot not be a direct child of an event component. ' +
162 - 'Ensure <TouchHitTarget> is a direct child of a DOM element.',
163 - );
164 - return EVENT_TOUCH_HIT_TARGET_CONTEXT;
165 - }
166 - return EVENT_TARGET_CONTEXT;
167 - }
168 - return NO_CONTEXT;
169 -}
170 -
133 export function prepareForCommit(containerInfo: Container): void {
134 // noop
135 }
@@ -246,12 +208,6 @@ export function createTextInstance(
208 'Wrap the child text "%s" in an element.',
209 text,
210 );
249 - warning(
250 - hostContext !== EVENT_TARGET_CONTEXT,
251 - 'validateDOMNesting: React event targets cannot have text DOM nodes as children. ' +
252 - 'Wrap the child text "%s" in an element.',
253 - text,
254 - );
211 }
212 return {
213 text,
@@ -346,59 +302,3 @@ export function unmountEventComponent(
302 ): void {
303 // noop
304 }
349 -
350 -export function getEventTargetChildElement(
351 - type: Symbol | number,
352 - props: Props,
353 -): null | EventTargetChildElement {
354 - if (enableEventAPI) {
355 - if (type === REACT_EVENT_TARGET_TOUCH_HIT) {
356 - const {bottom, left, right, top} = props;
357 -
358 - if (!bottom && !left && !right && !top) {
359 - return null;
360 - }
361 - return {
362 - type: 'div',
363 - props: {
364 - style: {
365 - position: 'absolute',
366 - zIndex: -1,
367 - bottom: bottom ? `-${bottom}px` : '0px',
368 - left: left ? `-${left}px` : '0px',
369 - right: right ? `-${right}px` : '0px',
370 - top: top ? `-${top}px` : '0px',
371 - },
372 - },
373 - };
374 - }
375 - }
376 - return null;
377 -}
378 -
379 -export function handleEventTarget(
380 - type: Symbol | number,
381 - props: Props,
382 - rootContainerInstance: Container,
383 - internalInstanceHandle: Object,
384 -): boolean {
385 - if (enableEventAPI) {
386 - if (type === REACT_EVENT_TARGET_TOUCH_HIT) {
387 - // In DEV we do a computed style check on the position to ensure
388 - // the parent host component is correctly position in the document.
389 - if (__DEV__) {
390 - return true;
391 - }
392 - }
393 - }
394 - return false;
395 -}
396 -
397 -export function commitEventTarget(
398 - type: Symbol | number,
399 - props: Props,
400 - instance: Instance,
401 - parentInstance: Instance,
402 -): void {
403 - // noop
404 -}
packages/shared/HostConfigWithNoHydration.js
-2
@@ -47,5 +47,3 @@ export const didNotFindHydratableContainerSuspenseInstance = shim;
47 export const didNotFindHydratableInstance = shim;
48 export const didNotFindHydratableTextInstance = shim;
49 export const didNotFindHydratableSuspenseInstance = shim;
50 -export const canHydrateTouchHitTargetInstance = shim;
51 -export const hydrateTouchHitTargetInstance = shim;
packages/shared/HostConfigWithNoPersistence.js
-1
@@ -30,4 +30,3 @@ export const finalizeContainerChildren = shim;
30 export const replaceContainerChildren = shim;
31 export const cloneHiddenInstance = shim;
32 export const cloneHiddenTextInstance = shim;
33 -export const cloneHiddenTouchHitTargetInstance = shim;
packages/shared/ReactDOMTypes.js
-1
@@ -61,7 +61,6 @@ export type ReactDOMResponderContext = {
61 ) => boolean,
62 isTargetWithinEventComponent: (Element | Document) => boolean,
63 isTargetWithinEventResponderScope: (Element | Document) => boolean,
64 - isEventWithinTouchHitTarget: (event: ReactDOMResponderEvent) => boolean,
64 addRootEventTypes: (
65 rootEventTypes: Array<ReactDOMEventResponderEventType>,
66 ) => void,
packages/shared/ReactSymbols.js
-8
@@ -54,14 +54,6 @@ export const REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
54 export const REACT_EVENT_COMPONENT_TYPE = hasSymbol
55 ? Symbol.for('react.event_component')
56 : 0xead5;
57 -export const REACT_EVENT_TARGET_TYPE = hasSymbol
58 - ? Symbol.for('react.event_target')
59 - : 0xead6;
60 -
61 -// React event targets
62 -export const REACT_EVENT_TARGET_TOUCH_HIT = hasSymbol
63 - ? Symbol.for('react.event_target.touch_hit')
64 - : 0xead7;
57
58 const MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
59 const FAUX_ITERATOR_SYMBOL = '@@iterator';
packages/shared/getComponentName.js
-15
@@ -23,11 +23,8 @@ import {
23 REACT_SUSPENSE_LIST_TYPE,
24 REACT_LAZY_TYPE,
25 REACT_EVENT_COMPONENT_TYPE,
26 - REACT_EVENT_TARGET_TYPE,
27 - REACT_EVENT_TARGET_TOUCH_HIT,
26 } from 'shared/ReactSymbols';
27 import {refineResolvedLazyComponent} from 'shared/ReactLazyComponent';
30 -import type {ReactEventTarget} from 'shared/ReactTypes';
28
29 import {enableEventAPI} from './ReactFeatureFlags';
30
@@ -101,18 +98,6 @@ function getComponentName(type: mixed): string | null {
98 }
99 break;
100 }
104 - case REACT_EVENT_TARGET_TYPE: {
105 - if (enableEventAPI) {
106 - const eventTarget = ((type: any): ReactEventTarget);
107 - if (eventTarget.type === REACT_EVENT_TARGET_TOUCH_HIT) {
108 - return 'TouchHitTarget';
109 - }
110 - const displayName = eventTarget.displayName;
111 - if (displayName !== undefined) {
112 - return displayName;
113 - }
114 - }
115 - }
101 }
102 }
103 return null;
packages/shared/isValidElementType.js
+1 -3
@@ -20,7 +20,6 @@ import {
20 REACT_MEMO_TYPE,
21 REACT_LAZY_TYPE,
22 REACT_EVENT_COMPONENT_TYPE,
23 - REACT_EVENT_TARGET_TYPE,
23 } from 'shared/ReactSymbols';
24
25 export default function isValidElementType(type: mixed) {
@@ -41,7 +40,6 @@ export default function isValidElementType(type: mixed) {
40 type.$$typeof === REACT_PROVIDER_TYPE ||
41 type.$$typeof === REACT_CONTEXT_TYPE ||
42 type.$$typeof === REACT_FORWARD_REF_TYPE ||
44 - type.$$typeof === REACT_EVENT_COMPONENT_TYPE ||
45 - type.$$typeof === REACT_EVENT_TARGET_TYPE))
43 + type.$$typeof === REACT_EVENT_COMPONENT_TYPE))
44 );
45 }
scripts/rollup/bundles.js
-15
@@ -438,21 +438,6 @@ const bundles = [
438 },
439
440 /******* React Events (experimental) *******/
441 - {
442 - bundleTypes: [
443 - UMD_DEV,
444 - UMD_PROD,
445 - NODE_DEV,
446 - NODE_PROD,
447 - FB_WWW_DEV,
448 - FB_WWW_PROD,
449 - ],
450 - moduleType: ISOMORPHIC,
451 - entry: 'react-events',
452 - global: 'ReactEvents',
453 - externals: [],
454 - },
455 -
441 {
442 bundleTypes: [
443 UMD_DEV,