Add flow to SyntheticEvent

Author: eps1lon

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> = [];

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,
   nativeEvent: Event,
   type: string,

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 = {
   eventPhase: 0,
   bubbles: 0,
   cancelable: 0,
@@ -46,12 +52,12 @@ function functionThatReturnsFalse() {
  * DOM interface; custom application-specific events can also subclass this.
  */
 export function SyntheticEvent(
-  reactName,
-  reactEventType,
-  targetInst,
-  nativeEvent,
-  nativeEventTarget,
-  Interface = EventInterface,
+  reactName: string | null,
+  reactEventType: string,
+  targetInst: Fiber,
+  nativeEvent: {[propName: string]: mixed},
+  nativeEventTarget: null | EventTarget,
+  Interface: EventInterfaceType = EventInterface,
 ) {
   this._reactName = reactName;
   this._targetInst = targetInst;
@@ -95,6 +101,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;
     }
@@ -109,6 +116,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
@@ -138,7 +146,7 @@ Object.assign(SyntheticEvent.prototype, {
   isPersistent: functionThatReturnsTrue,
 });
 
-export const UIEventInterface = {
+export const UIEventInterface: EventInterfaceType = {
   ...EventInterface,
   view: 0,
   detail: 0,
@@ -154,7 +162,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,
@@ -213,7 +221,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,
 };
@@ -222,7 +230,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,
 };
@@ -232,7 +240,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,
@@ -243,9 +251,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;
@@ -256,7 +264,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,
 };
@@ -267,7 +275,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