Add additional event API responder surfaces (#15248)

* Add rest of event modules + small fixes

packages/events/EventTypes.js

@@ -9,6 +9,7 @@
 
 import SyntheticEvent from 'events/SyntheticEvent';
 import type {AnyNativeEvent} from 'events/PluginModuleType';
+import type {ReactEventResponderEventType} from 'shared/ReactTypes';
 
 export type EventResponderContext = {
   event: AnyNativeEvent,
@@ -30,8 +31,12 @@ export type EventResponderContext = {
   isTargetOwned: EventTarget => boolean,
   isTargetWithinEventComponent: EventTarget => boolean,
   isPositionWithinTouchHitTarget: (x: number, y: number) => boolean,
-  addRootEventTypes: (rootEventTypes: Array<string>) => void,
-  removeRootEventTypes: (rootEventTypes: Array<string>) => void,
+  addRootEventTypes: (
+    rootEventTypes: Array<ReactEventResponderEventType>,
+  ) => void,
+  removeRootEventTypes: (
+    rootEventTypes: Array<ReactEventResponderEventType>,
+  ) => void,
   requestOwnership: (target: EventTarget | null) => boolean,
   releaseOwnership: (target: EventTarget | null) => boolean,
 };

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

@@ -44,6 +44,7 @@ const targetEventTypeCached: Map<
   Array<ReactEventResponderEventType>,
   Set<DOMTopLevelEventType>,
 > = new Map();
+const targetOwnership: Map<EventTarget, Fiber> = new Map();
 
 type EventListener = (event: SyntheticEvent) => void;
 
@@ -204,16 +205,37 @@ DOMEventResponderContext.prototype.isPositionWithinTouchHitTarget = function() {
   // TODO
 };
 
-DOMEventResponderContext.prototype.isTargetOwned = function() {
-  // TODO
+DOMEventResponderContext.prototype.isTargetOwned = function(
+  targetElement: Element | Node,
+): boolean {
+  const targetDoc = targetElement.ownerDocument;
+  return targetOwnership.has(targetDoc);
 };
 
-DOMEventResponderContext.prototype.requestOwnership = function() {
-  // TODO
+DOMEventResponderContext.prototype.requestOwnership = function(
+  targetElement: Element | Node,
+): boolean {
+  const targetDoc = targetElement.ownerDocument;
+  if (targetOwnership.has(targetDoc)) {
+    return false;
+  }
+  targetOwnership.set(targetDoc, this._fiber);
+  return true;
 };
 
-DOMEventResponderContext.prototype.releaseOwnership = function() {
-  // TODO
+DOMEventResponderContext.prototype.releaseOwnership = function(
+  targetElement: Element | Node,
+): boolean {
+  const targetDoc = targetElement.ownerDocument;
+  if (!targetOwnership.has(targetDoc)) {
+    return false;
+  }
+  const owner = targetOwnership.get(targetDoc);
+  if (owner === this._fiber || owner === this._fiber.alternate) {
+    targetOwnership.delete(targetDoc);
+    return true;
+  }
+  return false;
 };
 
 function getTargetEventTypes(

packages/react-events/drag.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+const Drag = require('./src/Drag');
+
+module.exports = Drag.default || Drag;

packages/react-events/focus.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+const Focus = require('./src/Focus');
+
+module.exports = Focus.default || Focus;

packages/react-events/npm/drag.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-events-drag.production.min.js');
+} else {
+  module.exports = require('./cjs/react-events-drag.development.js');
+}

packages/react-events/npm/focus.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-events-focus.production.min.js');
+} else {
+  module.exports = require('./cjs/react-events-focus.development.js');
+}

packages/react-events/npm/swipe.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-events-swipe.production.min.js');
+} else {
+  module.exports = require('./cjs/react-events-swipe.development.js');
+}

packages/react-events/package.json

@@ -12,6 +12,11 @@
     "LICENSE",
     "README.md",
     "press.js",
+    "hover.js",
+    "focus.js",
+    "swipe.js",
+    "drag.js",
+    "index.js",
     "build-info.json",
     "cjs/",
     "umd/"

packages/react-events/src/Drag.js

@@ -0,0 +1,187 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {EventResponderContext} from 'events/EventTypes';
+import {REACT_EVENT_COMPONENT_TYPE} from 'shared/ReactSymbols';
+
+const targetEventTypes = ['pointerdown', 'pointercancel'];
+const rootEventTypes = ['pointerup', {name: 'pointermove', passive: false}];
+
+type DragState = {
+  dragTarget: null | EventTarget,
+  isPointerDown: boolean,
+  isDragging: boolean,
+  startX: number,
+  startY: number,
+  x: number,
+  y: number,
+};
+
+// In the case we don't have PointerEvents (Safari), we listen to touch events
+// too
+if (typeof window !== 'undefined' && window.PointerEvent === undefined) {
+  targetEventTypes.push('touchstart', 'touchend', 'mousedown', 'touchcancel');
+  rootEventTypes.push('mouseup', 'mousemove', {
+    name: 'touchmove',
+    passive: false,
+  });
+}
+
+function dispatchDragEvent(
+  context: EventResponderContext,
+  name: string,
+  listener: (e: Object) => void,
+  state: DragState,
+  discrete: boolean,
+  eventData?: {
+    diffX: number,
+    diffY: number,
+  },
+): void {
+  context.dispatchEvent(name, listener, state.dragTarget, discrete, eventData);
+}
+
+const DragResponder = {
+  targetEventTypes,
+  createInitialState(): DragState {
+    return {
+      dragTarget: null,
+      isPointerDown: false,
+      isDragging: false,
+      startX: 0,
+      startY: 0,
+      x: 0,
+      y: 0,
+    };
+  },
+  handleEvent(
+    context: EventResponderContext,
+    props: Object,
+    state: DragState,
+  ): void {
+    const {eventTarget, eventType, event} = context;
+
+    switch (eventType) {
+      case 'touchstart':
+      case 'mousedown':
+      case 'pointerdown': {
+        if (!state.isDragging) {
+          const obj =
+            eventType === 'touchstart' ? (event: any).changedTouches[0] : event;
+          const x = (state.startX = (obj: any).screenX);
+          const y = (state.startY = (obj: any).screenY);
+          state.x = x;
+          state.y = y;
+          state.dragTarget = eventTarget;
+          state.isPointerDown = true;
+          context.addRootEventTypes(rootEventTypes);
+        }
+        break;
+      }
+      case 'touchmove':
+      case 'mousemove':
+      case 'pointermove': {
+        if (context.isPassive()) {
+          return;
+        }
+        if (state.isPointerDown) {
+          const obj =
+            eventType === 'touchmove' ? (event: any).changedTouches[0] : event;
+          const x = (obj: any).screenX;
+          const y = (obj: any).screenY;
+          state.x = x;
+          state.y = y;
+          if (!state.isDragging && x !== state.startX && y !== state.startY) {
+            let shouldEnableDragging = true;
+
+            if (
+              props.onShouldClaimOwnership &&
+              props.onShouldClaimOwnership()
+            ) {
+              shouldEnableDragging = context.requestOwnership(state.dragTarget);
+            }
+            if (shouldEnableDragging) {
+              state.isDragging = true;
+              if (props.onDragChange) {
+                const dragChangeEventListener = () => {
+                  props.onDragChange(true);
+                };
+                context.dispatchEvent(
+                  'dragchange',
+                  dragChangeEventListener,
+                  state.dragTarget,
+                  true,
+                );
+              }
+            } else {
+              state.dragTarget = null;
+              state.isPointerDown = false;
+              context.removeRootEventTypes(rootEventTypes);
+            }
+          } else {
+            if (props.onDragMove) {
+              const eventData = {
+                diffX: x - state.startX,
+                diffY: y - state.startY,
+              };
+              dispatchDragEvent(
+                context,
+                'dragmove',
+                props.onDragMove,
+                state,
+                false,
+                eventData,
+              );
+            }
+            (event: any).preventDefault();
+          }
+        }
+        break;
+      }
+      case 'pointercancel':
+      case 'touchcancel':
+      case 'touchend':
+      case 'mouseup':
+      case 'pointerup': {
+        if (state.isDragging) {
+          if (props.onShouldClaimOwnership) {
+            context.releaseOwnership(state.dragTarget);
+          }
+          if (props.onDragEnd) {
+            dispatchDragEvent(context, 'dragend', props.onDragEnd, state, true);
+          }
+          if (props.onDragChange) {
+            const dragChangeEventListener = () => {
+              props.onDragChange(false);
+            };
+            context.dispatchEvent(
+              'dragchange',
+              dragChangeEventListener,
+              state.dragTarget,
+              true,
+            );
+          }
+          state.isDragging = false;
+        }
+        if (state.isPointerDown) {
+          state.dragTarget = null;
+          state.isPointerDown = false;
+          context.removeRootEventTypes(rootEventTypes);
+        }
+        break;
+      }
+    }
+  },
+};
+
+export default {
+  $$typeof: REACT_EVENT_COMPONENT_TYPE,
+  props: null,
+  responder: DragResponder,
+};