chore(CustomEvent): properly typing CustomEvents

rmwc · Jun 13, 2018 · 2cbf25c · 2cbf25c
1 parent d4164ac
commit 2cbf25c
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 68 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/index.html b/public/index.html
@@ -13,6 +13,8 @@
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
   <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
   <!--

diff --git a/src/Base/index.js b/src/Base/index.js
@@ -13,3 +13,20 @@ export { noop } from './utils/noop';
 export { randomId } from './utils/randomId';
 
 export { withFoundation, syncFoundationProp } from './withFoundation';
+
+export type CustomEventT = {
+  bubbles: boolean,
+  cancelBubble: boolean,
+  cancelable: boolean,
+  composed: boolean,
+  currentTarget: ?window.HTMLElement,
+  defaultPrevented: boolean,
+  eventPhase: number,
+  isTrusted: boolean,
+  path: window.HTMLElement[],
+  returnValue: boolean,
+  srcElement: ?window.HTMLElement,
+  target: ?window.HTMLElement,
+  timeStamp: number,
+  type: string
+};
diff --git a/src/IconToggle/index.js b/src/IconToggle/index.js
@@ -1,5 +1,5 @@
 // @flow
-import type { SimpleTagPropsT } from '../Base';
+import type { SimpleTagPropsT, CustomEventT } from '../Base';
 
 import * as React from 'react';
 import { MDCIconToggle } from '@material/icon-toggle/dist/mdc.iconToggle';
@@ -9,7 +9,7 @@ import { simpleTag, noop, withFoundation, syncFoundationProp } from '../Base';
 export type IconTogglePropsT = {
   /* prettier-ignore */
   /** An onChange callback that receives a custom event. */
-  onChange?: (evt: {detail: {isOn: boolean}}) => mixed,
+  onChange?: (evt: {detail: {isOn: boolean}} & CustomEventT) => mixed,
   /** An object that can be parsed as valid JSON that gets passed to the MDC constructor. */
   on: Object,
   /** An object that can be parsed as valid JSON that gets passed to the MDC constructor. */

diff --git a/src/Menu/index.js b/src/Menu/index.js
@@ -1,4 +1,6 @@
 // @flow
+import type { CustomEventT } from '../Base';
+
 import * as React from 'react';
 import { MDCMenu, MDCMenuFoundation } from '@material/menu/dist/mdc.menu';
 import { List, ListItem } from '../List';
@@ -62,7 +64,9 @@ export type MenuPropsT = {
   /** Callback that fires for either onSelected or onCancel, convenient for setting the closed state. */
   onClose?: (evt: Event) => mixed,
   /** Callback that fires when a Menu item is selected. */
-  onSelected?: (evt: { detail: { index: number, item: HTMLElement } }) => mixed,
+  onSelected?: (
+    evt: { detail: { index: number, item: HTMLElement } } & CustomEventT
+  ) => mixed,
   /** Callback that fires when the menu is closed with nothing selected. */
   onCancel?: (evt: Event) => mixed,
   /** Manually position the menu to one of the corners. */

diff --git a/src/Slider/index.js b/src/Slider/index.js
@@ -1,4 +1,6 @@
 // @flow
+import type { CustomEventT } from '../Base';
+
 import * as React from 'react';
 import { MDCSlider } from '@material/slider/dist/mdc.slider';
 import { simpleTag, withFoundation, syncFoundationProp } from '../Base';
@@ -59,9 +61,9 @@ export const SliderFocusRing = simpleTag({
 
 export type SliderPropsT = {
   /** A callback that fires when the Slider stops sliding which takes an event with event.detail.value set to the Slider's value. */
-  onChange?: (evt: { detail: { value: number } }) => mixed,
+  onChange?: (evt: { detail: { value: number } } & CustomEventT) => mixed,
   /** A callback that fires continuously while the Slider is sliding that takes an event with event.detail.value set to the Slider's value. */
-  onInput?: (evt: { detail: { value: number } }) => mixed,
+  onInput?: (evt: { detail: { value: number } } & CustomEventT) => mixed,
   /** The value of the Slider. */
   value?: number | string,
   /** The minimum value of the Slider. */
@@ -88,7 +90,7 @@ export class Slider extends withFoundation({
     'trackMarkerContainer_'
   ],
   adapter: {}
-})<SliderPropsT, {}> {
+})<SliderPropsT> {
   static displayName = 'Slider';
 
   get discrete(): boolean {

diff --git a/src/Tabs/index.js b/src/Tabs/index.js
@@ -1,5 +1,5 @@
 // @flow
-import type { SimpleTagPropsT } from '../Base';
+import type { SimpleTagPropsT, CustomEventT } from '../Base';
 import * as React from 'react';
 import {
   MDCTab,
@@ -103,7 +103,9 @@ export const TabIconText = simpleTag({
 
 export type TabBarPropsT = {
   /** Callback when the active tab changes. Receives event as an argument with event.target.value set to the activeTabIndex. */
-  onChange?: (evt: { detail: { activeTabIndex: number } }) => mixed,
+  onChange?: (
+    evt: { detail: { activeTabIndex: number } } & CustomEventT
+  ) => mixed,
   /** The index of the active tab. */
   activeTabIndex: number
 } & SimpleTagPropsT;

diff --git a/src/docs/docgen.json b/src/docs/docgen.json
@@ -4181,47 +4181,53 @@
               "type": {
                 "name": "signature",
                 "type": "object",
-                "raw": "{\n  /** A callback that fires when the Slider stops sliding which takes an event with event.detail.value set to the Slider's value. */\n  onChange?: (evt: { detail: { value: number } }) => mixed,\n  /** A callback that fires continuously while the Slider is sliding that takes an event with event.detail.value set to the Slider's value. */\n  onInput?: (evt: { detail: { value: number } }) => mixed,\n  /** The value of the Slider. */\n  value?: number | string,\n  /** The minimum value of the Slider. */\n  min?: number | string,\n  /** The maximum value of the Slider. */\n  max?: number | string,\n  /** A step to quantize values by. */\n  step?: number | string,\n  /** Displays the exact value of the Slider on the knob. */\n  discrete?: boolean,\n  /** Displays the individual step markers on the Slider track. */\n  displayMarkers?: boolean,\n  /** Disables the control. */\n  disabled?: boolean\n}",
+                "raw": "{\n  /** A callback that fires when the Slider stops sliding which takes an event with event.detail.value set to the Slider's value. */\n  onChange?: (evt: CustomEventT<{ detail: { value: number } }>) => mixed,\n  /** A callback that fires continuously while the Slider is sliding that takes an event with event.detail.value set to the Slider's value. */\n  onInput?: (evt: { detail: { value: number } }) => mixed,\n  /** The value of the Slider. */\n  value?: number | string,\n  /** The minimum value of the Slider. */\n  min?: number | string,\n  /** The maximum value of the Slider. */\n  max?: number | string,\n  /** A step to quantize values by. */\n  step?: number | string,\n  /** Displays the exact value of the Slider on the knob. */\n  discrete?: boolean,\n  /** Displays the individual step markers on the Slider track. */\n  displayMarkers?: boolean,\n  /** Disables the control. */\n  disabled?: boolean\n}",
                 "signature": {
                   "properties": [
                     {
                       "key": "onChange",
                       "value": {
                         "name": "signature",
                         "type": "function",
-                        "raw": "(evt: { detail: { value: number } }) => mixed",
+                        "raw": "(evt: CustomEventT<{ detail: { value: number } }>) => mixed",
                         "signature": {
                           "arguments": [
                             {
                               "name": "evt",
                               "type": {
-                                "name": "signature",
-                                "type": "object",
-                                "raw": "{ detail: { value: number } }",
-                                "signature": {
-                                  "properties": [
-                                    {
-                                      "key": "detail",
-                                      "value": {
-                                        "name": "signature",
-                                        "type": "object",
-                                        "raw": "{ value: number }",
-                                        "signature": {
-                                          "properties": [
-                                            {
-                                              "key": "value",
-                                              "value": {
-                                                "name": "number",
-                                                "required": true
-                                              }
-                                            }
-                                          ]
-                                        },
-                                        "required": true
-                                      }
+                                "name": "CustomEventT",
+                                "elements": [
+                                  {
+                                    "name": "signature",
+                                    "type": "object",
+                                    "raw": "{ detail: { value: number } }",
+                                    "signature": {
+                                      "properties": [
+                                        {
+                                          "key": "detail",
+                                          "value": {
+                                            "name": "signature",
+                                            "type": "object",
+                                            "raw": "{ value: number }",
+                                            "signature": {
+                                              "properties": [
+                                                {
+                                                  "key": "value",
+                                                  "value": {
+                                                    "name": "number",
+                                                    "required": true
+                                                  }
+                                                }
+                                              ]
+                                            },
+                                            "required": true
+                                          }
+                                        }
+                                      ]
                                     }
-                                  ]
-                                }
+                                  }
+                                ],
+                                "raw": "CustomEventT<{ detail: { value: number } }>"
                               }
                             }
                           ],
@@ -4379,39 +4385,45 @@
           "flowType": {
             "name": "signature",
             "type": "function",
-            "raw": "(evt: { detail: { value: number } }) => mixed",
+            "raw": "(evt: CustomEventT<{ detail: { value: number } }>) => mixed",
             "signature": {
               "arguments": [
                 {
                   "name": "evt",
                   "type": {
-                    "name": "signature",
-                    "type": "object",
-                    "raw": "{ detail: { value: number } }",
-                    "signature": {
-                      "properties": [
-                        {
-                          "key": "detail",
-                          "value": {
-                            "name": "signature",
-                            "type": "object",
-                            "raw": "{ value: number }",
-                            "signature": {
-                              "properties": [
-                                {
-                                  "key": "value",
-                                  "value": {
-                                    "name": "number",
-                                    "required": true
-                                  }
-                                }
-                              ]
-                            },
-                            "required": true
-                          }
+                    "name": "CustomEventT",
+                    "elements": [
+                      {
+                        "name": "signature",
+                        "type": "object",
+                        "raw": "{ detail: { value: number } }",
+                        "signature": {
+                          "properties": [
+                            {
+                              "key": "detail",
+                              "value": {
+                                "name": "signature",
+                                "type": "object",
+                                "raw": "{ value: number }",
+                                "signature": {
+                                  "properties": [
+                                    {
+                                      "key": "value",
+                                      "value": {
+                                        "name": "number",
+                                        "required": true
+                                      }
+                                    }
+                                  ]
+                                },
+                                "required": true
+                              }
+                            }
+                          ]
                         }
-                      ]
-                    }
+                      }
+                    ],
+                    "raw": "CustomEventT<{ detail: { value: number } }>"
                   }
                 }
               ],