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

Author: trueadm

packages/react-art/src/ReactARTHostConfig.js

@@ -333,10 +333,6 @@ export function getChildHostContextForEventComponent() {
   return NO_CONTEXT;
 }
 
-export function getChildHostContextForEventTarget() {
-  return NO_CONTEXT;
-}
-
 export const scheduleTimeout = setTimeout;
 export const cancelTimeout = clearTimeout;
 export const noTimeout = -1;

packages/react-dom/src/client/ReactDOMComponent.js

@@ -97,7 +97,6 @@ let didWarnShadyDOM = false;
 const DANGEROUSLY_SET_INNER_HTML = 'dangerouslySetInnerHTML';
 const SUPPRESS_CONTENT_EDITABLE_WARNING = 'suppressContentEditableWarning';
 const SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning';
-const HYDRATE_TOUCH_HIT_TARGET = 'hydrateTouchHitTarget';
 const AUTOFOCUS = 'autoFocus';
 const CHILDREN = 'children';
 const STYLE = 'style';
@@ -1034,8 +1033,6 @@ export function diffHydratedProperties(
         }
         ensureListeningTo(rootContainerElement, propKey);
       }
-    } else if (enableEventAPI && propKey === HYDRATE_TOUCH_HIT_TARGET) {
-      updatePayload = [STYLE, rawProps.style];
     } else if (
       __DEV__ &&
       // Convince Flow we've calculated it (it's DEV-only in this method.)

packages/react-dom/src/client/ReactDOMHostConfig.js

@@ -31,7 +31,7 @@ import {
   isEnabled as ReactBrowserEventEmitterIsEnabled,
   setEnabled as ReactBrowserEventEmitterSetEnabled,
 } from '../events/ReactBrowserEventEmitter';
-import {Namespaces, getChildNamespace} from '../shared/DOMNamespaces';
+import {getChildNamespace} from '../shared/DOMNamespaces';
 import {addRootEventTypesForComponentInstance} from '../events/DOMEventResponderSystem';
 import {
   ELEMENT_NODE,
@@ -51,8 +51,6 @@ import {
   mountEventResponder,
   unmountEventResponder,
 } from '../events/DOMEventResponderSystem';
-import {REACT_EVENT_TARGET_TOUCH_HIT} from 'shared/ReactSymbols';
-import {canUseDOM} from 'shared/ExecutionEnvironment';
 
 export type Type = string;
 export type Props = {
@@ -93,7 +91,6 @@ type HostContextDev = {
   ancestorInfo: mixed,
   eventData: null | {|
     isEventComponent?: boolean,
-    isEventTarget?: boolean,
   |},
 };
 type HostContextProd = string;
@@ -109,8 +106,6 @@ import {
 } from 'shared/ReactFeatureFlags';
 import warning from 'shared/warning';
 
-const {html: HTML_NAMESPACE} = Namespaces;
-
 let SUPPRESS_HYDRATION_WARNING;
 if (__DEV__) {
   SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning';
@@ -196,45 +191,8 @@ export function getChildHostContextForEventComponent(
   if (__DEV__) {
     const parentHostContextDev = ((parentHostContext: any): HostContextDev);
     const {namespace, ancestorInfo} = parentHostContextDev;
-    warning(
-      parentHostContextDev.eventData === null ||
-        !parentHostContextDev.eventData.isEventTarget,
-      'validateDOMNesting: React event targets must not have event components as children.',
-    );
     const eventData = {
       isEventComponent: true,
-      isEventTarget: false,
-    };
-    return {namespace, ancestorInfo, eventData};
-  }
-  return parentHostContext;
-}
-
-export function getChildHostContextForEventTarget(
-  parentHostContext: HostContext,
-  type: Symbol | number,
-): HostContext {
-  if (__DEV__) {
-    const parentHostContextDev = ((parentHostContext: any): HostContextDev);
-    const {namespace, ancestorInfo} = parentHostContextDev;
-    if (type === REACT_EVENT_TARGET_TOUCH_HIT) {
-      warning(
-        parentHostContextDev.eventData === null ||
-          !parentHostContextDev.eventData.isEventComponent,
-        'validateDOMNesting: <TouchHitTarget> cannot not be a direct child of an event component. ' +
-          'Ensure <TouchHitTarget> is a direct child of a DOM element.',
-      );
-      const parentNamespace = parentHostContextDev.namespace;
-      if (parentNamespace !== HTML_NAMESPACE) {
-        throw new Error(
-          '<TouchHitTarget> was used in an unsupported DOM namespace. ' +
-            'Ensure the <TouchHitTarget> is used in an HTML namespace.',
-        );
-      }
-    }
-    const eventData = {
-      isEventComponent: false,
-      isEventTarget: true,
     };
     return {namespace, ancestorInfo, eventData};
   }
@@ -924,85 +882,3 @@ export function unmountEventComponent(
     unmountEventResponder(eventComponentInstance);
   }
 }
-
-export function getEventTargetChildElement(
-  type: Symbol | number,
-  props: Props,
-): null | EventTargetChildElement {
-  if (enableEventAPI) {
-    if (type === REACT_EVENT_TARGET_TOUCH_HIT) {
-      const {bottom, left, right, top} = props;
-
-      if (!bottom && !left && !right && !top) {
-        return null;
-      }
-      return {
-        type: 'div',
-        props: {
-          style: {
-            position: 'absolute',
-            zIndex: -1,
-            pointerEvents: null,
-            bottom: bottom ? `-${bottom}px` : '0px',
-            left: left ? `-${left}px` : '0px',
-            right: right ? `-${right}px` : '0px',
-            top: top ? `-${top}px` : '0px',
-          },
-          hydrateTouchHitTarget: true,
-          suppressHydrationWarning: true,
-        },
-      };
-    }
-  }
-  return null;
-}
-
-export function handleEventTarget(
-  type: Symbol | number,
-  props: Props,
-  rootContainerInstance: Container,
-  internalInstanceHandle: Object,
-): boolean {
-  if (
-    __DEV__ &&
-    type === REACT_EVENT_TARGET_TOUCH_HIT &&
-    (props.left || props.right || props.top || props.bottom)
-  ) {
-    return true;
-  }
-  return false;
-}
-
-export function commitEventTarget(
-  type: Symbol | number,
-  props: Props,
-  instance: Instance,
-  parentInstance: Instance,
-): void {
-  if (enableEventAPI) {
-    if (type === REACT_EVENT_TARGET_TOUCH_HIT) {
-      if (__DEV__ && canUseDOM) {
-        // This is done at DEV time because getComputedStyle will
-        // typically force a style recalculation and force a layout,
-        // reflow -– both of which are sync are expensive.
-        const computedStyles = window.getComputedStyle(parentInstance);
-        const position = computedStyles.getPropertyValue('position');
-        warning(
-          position !== '' && position !== 'static',
-          '<TouchHitTarget> inserts an empty absolutely positioned <div>. ' +
-            'This requires its parent DOM node to be positioned too, but the ' +
-            'parent DOM node was found to have the style "position" set to ' +
-            'either no value, or a value of "static". Try using a "position" ' +
-            'value of "relative".',
-        );
-        warning(
-          computedStyles.getPropertyValue('z-index') !== '',
-          '<TouchHitTarget> inserts an empty <div> with "z-index" of "-1". ' +
-            'This requires its parent DOM node to have a "z-index" greater than "-1",' +
-            'but the parent DOM node was found to no "z-index" value set.' +
-            ' Try using a "z-index" value of "0" or greater.',
-        );
-      }
-    }
-  }
-}

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

@@ -14,7 +14,6 @@ import {
 import type {AnyNativeEvent} from 'events/PluginModuleType';
 import {
   EventComponent,
-  EventTarget as EventTargetWorkTag,
   HostComponent,
   FunctionComponent,
 } from 'shared/ReactWorkTags';
@@ -182,35 +181,6 @@ const eventResponderContext: ReactDOMResponderContext = {
     eventListeners.set(eventObject, listener);
     eventQueue.events.push(eventObject);
   },
-  isEventWithinTouchHitTarget(event: ReactDOMResponderEvent): boolean {
-    validateResponderContext();
-    const target = event.target;
-    const nativeEvent = event.nativeEvent;
-    // We should always be dealing with a mouse event or touch event here.
-    // If we are not, these won't exist and we can early return.
-    const x = (nativeEvent: any).clientX;
-    const y = (nativeEvent: any).clientY;
-    if (x === undefined || y === undefined) {
-      return false;
-    }
-    const childFiber = getClosestInstanceFromNode(target);
-    if (childFiber === null) {
-      return false;
-    }
-    const parentFiber = childFiber.return;
-    if (parentFiber !== null && parentFiber.tag === EventTargetWorkTag) {
-      const parentNode = ((target.parentNode: any): Element);
-      // TODO find another way to do this without using the
-      // expensive getBoundingClientRect.
-      const {left, top, right, bottom} = parentNode.getBoundingClientRect();
-      // Check if the co-ords intersect with the target element's rect.
-      if (x > left && y > top && x < right && y < bottom) {
-        return false;
-      }
-      return true;
-    }
-    return false;
-  },
   isTargetWithinEventComponent(target: Element | Document): boolean {
     validateResponderContext();
     if (target != null) {

packages/react-dom/src/server/ReactPartialRenderer.js

@@ -39,8 +39,6 @@ import {
   REACT_LAZY_TYPE,
   REACT_MEMO_TYPE,
   REACT_EVENT_COMPONENT_TYPE,
-  REACT_EVENT_TARGET_TYPE,
-  REACT_EVENT_TARGET_TOUCH_HIT,
 } from 'shared/ReactSymbols';
 
 import {
@@ -1168,32 +1166,8 @@ class ReactDOMServerRenderer {
             this.stack.push(frame);
             return '';
           }
-          case REACT_EVENT_COMPONENT_TYPE:
-          case REACT_EVENT_TARGET_TYPE: {
+          case REACT_EVENT_COMPONENT_TYPE: {
             if (enableEventAPI) {
-              if (
-                elementType.$$typeof === REACT_EVENT_TARGET_TYPE &&
-                elementType.type === REACT_EVENT_TARGET_TOUCH_HIT
-              ) {
-                const props = nextElement.props;
-                const bottom = props.bottom || 0;
-                const left = props.left || 0;
-                const right = props.right || 0;
-                const top = props.top || 0;
-
-                if (bottom === 0 && left === 0 && right === 0 && top === 0) {
-                  return '';
-                }
-                let topString = top ? `-${top}px` : '0px';
-                let leftString = left ? `-${left}px` : '0px';
-                let rightString = right ? `-${right}px` : '0x';
-                let bottomString = bottom ? `-${bottom}px` : '0px';
-
-                return (
-                  `<div style="position:absolute;pointer-events:none;z-index:-1;bottom:` +
-                  `${bottomString};left:${leftString};right:${rightString};top:${topString}"></div>`
-                );
-              }
               const nextChildren = toArray(
                 ((nextChild: any): ReactElement).props.children,
               );

packages/react-dom/src/shared/DOMProperty.js

@@ -219,7 +219,6 @@ const properties = {};
   'suppressContentEditableWarning',
   'suppressHydrationWarning',
   'style',
-  'hydrateTouchHitTarget',
 ].forEach(name => {
   properties[name] = new PropertyInfoRecord(
     name,

packages/react-dom/src/shared/assertValidProps.js

@@ -12,8 +12,6 @@ import warning from 'shared/warning';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 
 import voidElementTags from './voidElementTags';
-import {enableEventAPI} from 'shared/ReactFeatureFlags';
-import {REACT_EVENT_TARGET_TYPE} from 'shared/ReactSymbols';
 
 const HTML = '__html';
 
@@ -29,11 +27,7 @@ function assertValidProps(tag: string, props: ?Object) {
   // Note the use of `==` which checks for null or undefined.
   if (voidElementTags[tag]) {
     invariant(
-      (props.children == null ||
-        (enableEventAPI &&
-          props.children.type &&
-          props.children.type.$$typeof === REACT_EVENT_TARGET_TYPE)) &&
-        props.dangerouslySetInnerHTML == null,
+      props.children == null && props.dangerouslySetInnerHTML == null,
       '%s is a void element tag and must neither have `children` nor ' +
         'use `dangerouslySetInnerHTML`.%s',
       tag,

packages/react-events/README.md

@@ -121,10 +121,6 @@ Component instance.
 
 Returns `true` if the instance has taken ownership of the responder.
 
-### isEventWithinTouchHitTarget(event: ResponderEvent): boolean
-
-Returns `true` if the global coordinates lie within the TouchHitTarget.
-
 ### isTargetWithinElement(target: Element, element: Element): boolean
 
 Returns `true` if `target` is a child of `element`.

packages/react-events/docs/Press.md

@@ -119,7 +119,7 @@ Determines whether calling `onPress` should be cancelled if `onLongPress` or
 
 Called immediately after a press is released, unless either 1) the press is
 released outside the hit bounds of the element (accounting for
-`pressRetentionOffset` and `TouchHitTarget`), or 2) the press was a long press,
+`pressRetentionOffset`), or 2) the press was a long press,
 and `onLongPress` or `onLongPressChange` props are provided, and
 `onLongPressCancelsPress()` is `true`.