Merge branch 'master' into fabric-measure-calls

Author: elicwhite

packages/events/EventTypes.js

@@ -10,34 +10,44 @@
 import type {AnyNativeEvent} from 'events/PluginModuleType';
 import type {ReactEventResponderEventType} from 'shared/ReactTypes';
 
-export type EventResponderContext = {
-  event: AnyNativeEvent,
-  eventTarget: Element | Document,
-  eventType: string,
-  isPassive: () => boolean,
-  isPassiveSupported: () => boolean,
-  dispatchEvent: <E>(
-    eventObject: E,
-    {
-      capture?: boolean,
-      discrete?: boolean,
-      stopPropagation?: boolean,
-    },
+export type ResponderEvent = {
+  nativeEvent: AnyNativeEvent,
+  target: Element | Document,
+  type: string,
+  passive: boolean,
+  passiveSupported: boolean,
+};
+
+export type ResponderDispatchEventOptions = {
+  capture?: boolean,
+  discrete?: boolean,
+  stopPropagation?: boolean,
+};
+
+export type ResponderContext = {
+  dispatchEvent: (
+    eventObject: Object,
+    otpions: ResponderDispatchEventOptions,
   ) => void,
   isTargetWithinElement: (
     childTarget: Element | Document,
     parentTarget: Element | Document,
   ) => boolean,
-  isTargetOwned: (Element | Document) => boolean,
   isTargetWithinEventComponent: (Element | Document) => boolean,
-  isPositionWithinTouchHitTarget: (x: number, y: number) => boolean,
+  isPositionWithinTouchHitTarget: (
+    doc: Document,
+    x: number,
+    y: number,
+  ) => boolean,
   addRootEventTypes: (
+    document: Document,
     rootEventTypes: Array<ReactEventResponderEventType>,
   ) => void,
   removeRootEventTypes: (
     rootEventTypes: Array<ReactEventResponderEventType>,
   ) => void,
-  requestOwnership: (target: Element | Document | null) => boolean,
-  releaseOwnership: (target: Element | Document | null) => boolean,
-  withAsyncDispatching: (func: () => void) => void,
+  hasOwnership: () => boolean,
+  requestOwnership: () => boolean,
+  releaseOwnership: () => boolean,
+  setTimeout: (func: () => void, timeout: number) => TimeoutID,
 };

packages/react-art/src/ReactARTHostConfig.js

@@ -11,6 +11,7 @@ import * as Scheduler from 'scheduler';
 import invariant from 'shared/invariant';
 
 import {TYPES, EVENT_TYPES, childrenAsString} from './ReactARTInternals';
+import type {ReactEventComponentInstance} from 'shared/ReactTypes';
 
 // Intentionally not named imports because Rollup would
 // use dynamic dispatch for CommonJS interop named imports.
@@ -439,19 +440,45 @@ export function unhideTextInstance(textInstance, text): void {
   // Noop
 }
 
-export function handleEventComponent(
-  eventResponder: ReactEventResponder,
-  rootContainerInstance: Container,
-  internalInstanceHandle: Object,
+export function mountEventComponent(
+  eventComponentInstance: ReactEventComponentInstance,
+) {
+  throw new Error('Not yet implemented.');
+}
+
+export function updateEventComponent(
+  eventComponentInstance: ReactEventComponentInstance,
 ) {
-  // TODO: add handleEventComponent implementation
+  throw new Error('Not yet implemented.');
+}
+
+export function unmountEventComponent(
+  eventComponentInstance: ReactEventComponentInstance,
+): void {
+  throw new Error('Not yet implemented.');
+}
+
+export function getEventTargetChildElement(
+  type: Symbol | number,
+  props: Props,
+): null {
+  throw new Error('Not yet implemented.');
 }
 
 export function handleEventTarget(
   type: Symbol | number,
   props: Props,
-  parentInstance: Container,
+  rootContainerInstance: Container,
   internalInstanceHandle: Object,
-) {
-  // TODO: add handleEventTarget implementation
+): boolean {
+  throw new Error('Not yet implemented.');
+}
+
+export function commitEventTarget(
+  type: Symbol | number,
+  props: Props,
+  instance: Instance,
+  parentInstance: Instance,
+): void {
+  throw new Error('Not yet implemented.');
 }

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

@@ -33,7 +33,7 @@ import {
   isEnabled as ReactBrowserEventEmitterIsEnabled,
   setEnabled as ReactBrowserEventEmitterSetEnabled,
 } from '../events/ReactBrowserEventEmitter';
-import {getChildNamespace} from '../shared/DOMNamespaces';
+import {Namespaces, getChildNamespace} from '../shared/DOMNamespaces';
 import {
   ELEMENT_NODE,
   TEXT_NODE,
@@ -44,8 +44,13 @@ import {
 import dangerousStyleValue from '../shared/dangerousStyleValue';
 
 import type {DOMContainer} from './ReactDOM';
-import type {ReactEventResponder} from 'shared/ReactTypes';
+import type {ReactEventComponentInstance} from 'shared/ReactTypes';
+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 = {
@@ -57,6 +62,23 @@ export type Props = {
   style?: {
     display?: string,
   },
+  bottom?: null | number,
+  left?: null | number,
+  right?: null | number,
+  top?: null | number,
+};
+export type EventTargetChildElement = {
+  type: string,
+  props: null | {
+    style?: {
+      position?: string,
+      zIndex?: number,
+      bottom?: string,
+      left?: string,
+      right?: string,
+      top?: string,
+    },
+  },
 };
 export type Container = Element | Document;
 export type Instance = Element;
@@ -70,7 +92,6 @@ type HostContextDev = {
   eventData: null | {|
     isEventComponent?: boolean,
     isEventTarget?: boolean,
-    eventTargetType?: null | Symbol | number,
   |},
 };
 type HostContextProd = string;
@@ -86,6 +107,8 @@ import {
 } from 'shared/ReactFeatureFlags';
 import warning from 'shared/warning';
 
+const {html: HTML_NAMESPACE} = Namespaces;
+
 // Intentionally not named imports because Rollup would
 // use dynamic dispatch for CommonJS interop named imports.
 const {
@@ -190,7 +213,6 @@ export function getChildHostContextForEventComponent(
     const eventData = {
       isEventComponent: true,
       isEventTarget: false,
-      eventTargetType: null,
     };
     return {namespace, ancestorInfo, eventData};
   }
@@ -204,17 +226,24 @@ export function getChildHostContextForEventTarget(
   if (__DEV__) {
     const parentHostContextDev = ((parentHostContext: any): HostContextDev);
     const {namespace, ancestorInfo} = parentHostContextDev;
-    warning(
-      parentHostContextDev.eventData === null ||
-        !parentHostContextDev.eventData.isEventComponent ||
-        type !== REACT_EVENT_TARGET_TOUCH_HIT,
-      'validateDOMNesting: <TouchHitTarget> cannot not be a direct child of an event component. ' +
-        'Ensure <TouchHitTarget> is a direct child of a DOM element.',
-    );
+    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,
-      eventTargetType: type,
     };
     return {namespace, ancestorInfo, eventData};
   }
@@ -249,16 +278,6 @@ export function createInstance(
   if (__DEV__) {
     // TODO: take namespace into account when validating.
     const hostContextDev = ((hostContext: any): HostContextDev);
-    if (enableEventAPI) {
-      const eventData = hostContextDev.eventData;
-      if (eventData !== null) {
-        warning(
-          !eventData.isEventTarget ||
-            eventData.eventTargetType !== REACT_EVENT_TARGET_TOUCH_HIT,
-          'Warning: validateDOMNesting: <TouchHitTarget> must not have any children.',
-        );
-      }
-    }
     validateDOMNesting(type, null, hostContextDev.ancestorInfo);
     if (
       typeof props.children === 'string' ||
@@ -365,25 +384,12 @@ export function createTextInstance(
     if (enableEventAPI) {
       const eventData = hostContextDev.eventData;
       if (eventData !== null) {
-        warning(
-          eventData === null ||
-            !eventData.isEventTarget ||
-            eventData.eventTargetType !== REACT_EVENT_TARGET_TOUCH_HIT,
-          'Warning: validateDOMNesting: <TouchHitTarget> must not have any children.',
-        );
         warning(
           !eventData.isEventComponent,
           'validateDOMNesting: React event components cannot have text DOM nodes as children. ' +
             'Wrap the child text "%s" in an element.',
           text,
         );
-        warning(
-          !eventData.isEventTarget ||
-            eventData.eventTargetType === REACT_EVENT_TARGET_TOUCH_HIT,
-          'validateDOMNesting: React event targets cannot have text DOM nodes as children. ' +
-            'Wrap the child text "%s" in an element.',
-          text,
-        );
       }
     }
   }
@@ -885,30 +891,105 @@ export function didNotFindHydratableSuspenseInstance(
   }
 }
 
-export function handleEventComponent(
-  eventResponder: ReactEventResponder,
-  rootContainerInstance: Container,
-  internalInstanceHandle: Object,
+export function mountEventComponent(
+  eventComponentInstance: ReactEventComponentInstance,
 ): void {
   if (enableEventAPI) {
+    mountEventResponder(eventComponentInstance);
+    updateEventComponent(eventComponentInstance);
+  }
+}
+
+export function updateEventComponent(
+  eventComponentInstance: ReactEventComponentInstance,
+): void {
+  if (enableEventAPI) {
+    const rootContainerInstance = ((eventComponentInstance.rootInstance: any): Container);
     const rootElement = rootContainerInstance.ownerDocument;
     listenToEventResponderEventTypes(
-      eventResponder.targetEventTypes,
+      eventComponentInstance.responder.targetEventTypes,
       rootElement,
     );
   }
 }
 
+export function unmountEventComponent(
+  eventComponentInstance: ReactEventComponentInstance,
+): void {
+  if (enableEventAPI) {
+    // TODO stop listening to targetEventTypes
+    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,
+            bottom: bottom ? `-${bottom}px` : '0px',
+            left: left ? `-${left}px` : '0px',
+            right: right ? `-${right}px` : '0px',
+            top: top ? `-${top}px` : '0px',
+          },
+        },
+      };
+    }
+  }
+  return null;
+}
+
 export function handleEventTarget(
   type: Symbol | number,
   props: Props,
-  parentInstance: Container,
+  rootContainerInstance: Container,
   internalInstanceHandle: Object,
+): boolean {
+  return false;
+}
+
+export function commitEventTarget(
+  type: Symbol | number,
+  props: Props,
+  instance: Instance,
+  parentInstance: Instance,
 ): void {
   if (enableEventAPI) {
-    // Touch target hit slop handling
     if (type === REACT_EVENT_TARGET_TOUCH_HIT) {
-      // TODO
+      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('zIndex') !== '',
+          '<TouchHitTarget> inserts an empty <div> with "z-index" of "-1". ' +
+            'This requires its parent DOM node to have a "z-index" great 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.',
+        );
+      }
     }
   }
 }