Add flow to SyntheticEvent

facebook · Aug 8, 2020 · 5bb80b8 · 5bb80b8
1 parent 0cd9a6d
commit 5bb80b8
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 17 deletions.
diff --git a/packages/react-dom/src/events/DOMPluginEventSystem.js b/packages/react-dom/src/events/DOMPluginEventSystem.js
@@ -923,7 +923,7 @@ function accumulateEnterLeaveListenersForEvent(
   inCapturePhase: boolean,
 ): void {
   const registrationName = event._reactName;
-  if (registrationName === undefined) {
+  if (registrationName === null) {
     return;
   }
   const listeners: Array<DispatchListener> = [];

diff --git a/packages/react-dom/src/events/ReactSyntheticEventType.js b/packages/react-dom/src/events/ReactSyntheticEventType.js
@@ -27,7 +27,7 @@ export type ReactSyntheticEvent = {|
   isPropagationStopped: () => boolean,
   _dispatchInstances?: null | Array<Fiber | null> | Fiber,
   _dispatchListeners?: null | Array<Function> | Function,
-  _reactName: string,
+  _reactName: string | null,
   _targetInst: Fiber,
   type: string,
   currentTarget: null | EventTarget,

diff --git a/packages/react-dom/src/events/SyntheticEvent.js b/packages/react-dom/src/events/SyntheticEvent.js
@@ -3,17 +3,23 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
  */
 
 /* eslint valid-typeof: 0 */
 
 import getEventCharCode from './getEventCharCode';
 
+type EventInterfaceType = {
+  [propName: string]: 0 | ((event: {[propName: string]: mixed}) => mixed),
+};
+
 /**
  * @interface Event
  * @see http://www.w3.org/TR/DOM-Level-3-Events/
  */
-const EventInterface = {
+const EventInterface: EventInterfaceType = {
   type: 0,
   eventPhase: 0,
   bubbles: 0,
@@ -47,11 +53,13 @@ function functionThatReturnsFalse() {
  * DOM interface; custom application-specific events can also subclass this.
  */
 export function SyntheticEvent(
-  reactName,
-  targetInst,
-  nativeEvent,
-  nativeEventTarget,
-  Interface = EventInterface,
+  reactName: string | null,
+  targetInst: Fiber,
+  nativeEvent: {[propName: string]: mixed},
+  nativeEventTarget: null | EventTarget,
+  Interface: {
+    [propName: string]: 0 | ((event: {[propName: string]: mixed}) => mixed),
+  } = EventInterface,
 ) {
   this._reactName = reactName;
   this._targetInst = targetInst;
@@ -94,6 +102,7 @@ Object.assign(SyntheticEvent.prototype, {
 
     if (event.preventDefault) {
       event.preventDefault();
+      // $FlowFixMe - flow is not aware of `unknown` in IE
     } else if (typeof event.returnValue !== 'unknown') {
       event.returnValue = false;
     }
@@ -108,6 +117,7 @@ Object.assign(SyntheticEvent.prototype, {
 
     if (event.stopPropagation) {
       event.stopPropagation();
+      // $FlowFixMe - flow is not aware of `unknown` in IE
     } else if (typeof event.cancelBubble !== 'unknown') {
       // The ChangeEventPlugin registers a "propertychange" event for
       // IE. This event does not support bubbling or cancelling, and
@@ -137,7 +147,7 @@ Object.assign(SyntheticEvent.prototype, {
   isPersistent: functionThatReturnsTrue,
 });
 
-export const UIEventInterface = {
+export const UIEventInterface: EventInterfaceType = {
   ...EventInterface,
   view: 0,
   detail: 0,
@@ -153,7 +163,7 @@ let isMovementYSet = false;
  * @interface MouseEvent
  * @see http://www.w3.org/TR/DOM-Level-3-Events/
  */
-export const MouseEventInterface = {
+export const MouseEventInterface: EventInterfaceType = {
   ...UIEventInterface,
   screenX: 0,
   screenY: 0,
@@ -212,7 +222,7 @@ export const MouseEventInterface = {
  * @interface DragEvent
  * @see http://www.w3.org/TR/DOM-Level-3-Events/
  */
-export const DragEventInterface = {
+export const DragEventInterface: EventInterfaceType = {
   ...MouseEventInterface,
   dataTransfer: 0,
 };
@@ -221,7 +231,7 @@ export const DragEventInterface = {
  * @interface FocusEvent
  * @see http://www.w3.org/TR/DOM-Level-3-Events/
  */
-export const FocusEventInterface = {
+export const FocusEventInterface: EventInterfaceType = {
   ...UIEventInterface,
   relatedTarget: 0,
 };
@@ -231,7 +241,7 @@ export const FocusEventInterface = {
  * @see http://www.w3.org/TR/css3-animations/#AnimationEvent-interface
  * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent
  */
-export const AnimationEventInterface = {
+export const AnimationEventInterface: EventInterfaceType = {
   ...EventInterface,
   animationName: 0,
   elapsedTime: 0,
@@ -242,9 +252,9 @@ export const AnimationEventInterface = {
  * @interface Event
  * @see http://www.w3.org/TR/clipboard-apis/
  */
-export const ClipboardEventInterface = {
+export const ClipboardEventInterface: EventInterfaceType = {
   ...EventInterface,
-  clipboardData: function(event) {
+  clipboardData: function(event: {[propName: string]: mixed}) {
     return 'clipboardData' in event
       ? event.clipboardData
       : window.clipboardData;
@@ -255,7 +265,7 @@ export const ClipboardEventInterface = {
  * @interface Event
  * @see http://www.w3.org/TR/DOM-Level-3-Events/#events-compositionevents
  */
-export const CompositionEventInterface = {
+export const CompositionEventInterface: EventInterfaceType = {
   ...EventInterface,
   data: 0,
 };
@@ -266,7 +276,7 @@ export const CompositionEventInterface = {
  *      /#events-inputevents
  */
 // Happens to share the same list for now.
-export const InputEventInterface = CompositionEventInterface;
+export const InputEventInterface: EventInterfaceType = CompositionEventInterface;
 
 /**
  * Normalization of deprecated HTML5 `key` values