bug(types): SwipeableHandlers.ref accepts null.

Fixes FormidableLabs#140.

Adds test to explicitly cover this case because it seems `dtslint`
doesn't catch the issue when a handlers instance is spread during an
`Element` instantiation. The React types do [declare the arg correctly](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L85).

.eslintrc

@@ -39,4 +39,4 @@
     "import",
     "react"
   ]
-}
+}

src/__tests__/index.spec.js

@@ -384,7 +384,7 @@ function setupGetMountedComponent(TYPE, mockListeners = mockListenersSetup) {
       })
     })
 
-    it('Cleans up and re-attachs touch event listeners', () => {
+    it('Cleans up and re-attaches touch event listeners', () => {
       let spies
       const mockListeners = el => {
         // already spying
@@ -412,7 +412,7 @@ function setupGetMountedComponent(TYPE, mockListeners = mockListenersSetup) {
     })
   })
 
-  it(`${TYPE} hanldes updated prop swipe callbacks`, () => {
+  it(`${TYPE} handles updated prop swipe callbacks`, () => {
     let eventListenerMap
     const innerRef = el => {
       // don't re-assign eventlistener map

types/index.d.ts

@@ -12,7 +12,7 @@ export interface EventData {
   dir: 'Left' | 'Right' | 'Up' | 'Down'
 }
 
-export type SwipeCallback = ({}: EventData) => void
+export type SwipeCallback = (eventData: EventData) => void
 
 export interface SwipeableOptions {
   // Event handler/callbacks
@@ -34,14 +34,14 @@ export interface SwipeableOptions {
 // Component Specific Props
 export interface SwipeableProps {
   nodeName?: string
-  innerRef?: ({}: HTMLElement) => void
+  innerRef?: (element: HTMLElement | null) => void
   children?: React.ReactNode
   style?: React.CSSProperties
   className?: string
 }
 
 export interface SwipeableHandlers {
-  ref: ({}: HTMLElement) => void
+  ref: (element: HTMLElement | null) => void
   onMouseDown?: React.MouseEventHandler
 }
 

types/test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Swipeable, SwipeableProps, SwipeCallback, useSwipeable } from 'react-swipeable'
+import { Swipeable, SwipeableHandlers, SwipeableProps, SwipeCallback, useSwipeable } from 'react-swipeable'
 
 class SampleComponent extends React.PureComponent<SwipeableProps> {
   private readonly handleSwiped: SwipeCallback = () => {}
@@ -41,7 +41,7 @@ class SampleComponent extends React.PureComponent<SwipeableProps> {
 
 class SwipeableDiv extends Swipeable {}
 
-const TestComponent: React.StatelessComponent = _ => {
+const TestComponent: React.FunctionComponent = _ => {
   const handleSwiped: SwipeCallback = () => {}
 
   return (
@@ -56,3 +56,14 @@ const TestHook = () => {
   const handlers = useSwipeable({ onSwiped: ({ dir }) => setDir(dir) })
   return <div {...handlers} >{swipeDir}</div>
 }
+
+const handlers: SwipeableHandlers = useSwipeable({
+  onSwipedLeft: (data) => {
+    data // $ExpectType EventData
+  },
+  preventDefaultTouchmoveEvent: true,
+  trackTouch: true,
+})
+
+handlers.ref(<div />)
+handlers.ref(null)