Skip to content

Commit e49221b

Browse files
committed
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).
1 parent 2336e02 commit e49221b

File tree

3 files changed

+17
-6
lines changed

3 files changed

+17
-6
lines changed

.eslintrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,4 +39,4 @@
3939
"import",
4040
"react"
4141
]
42-
}
42+
}

types/index.d.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export interface EventData {
1212
dir: 'Left' | 'Right' | 'Up' | 'Down'
1313
}
1414

15-
export type SwipeCallback = ({}: EventData) => void
15+
export type SwipeCallback = (eventData: EventData) => void
1616

1717
export interface SwipeableOptions {
1818
// Event handler/callbacks
@@ -34,14 +34,14 @@ export interface SwipeableOptions {
3434
// Component Specific Props
3535
export interface SwipeableProps {
3636
nodeName?: string
37-
innerRef?: ({}: HTMLElement) => void
37+
innerRef?: (element: HTMLElement) => void
3838
children?: React.ReactNode
3939
style?: React.CSSProperties
4040
className?: string
4141
}
4242

4343
export interface SwipeableHandlers {
44-
ref: ({}: HTMLElement) => void
44+
ref: (element: HTMLElement | null) => void
4545
onMouseDown?: React.MouseEventHandler
4646
}
4747

types/test.tsx

+13-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { Swipeable, SwipeableProps, SwipeCallback, useSwipeable } from 'react-swipeable'
2+
import { Swipeable, SwipeableHandlers, SwipeableProps, SwipeCallback, useSwipeable } from 'react-swipeable'
33

44
class SampleComponent extends React.PureComponent<SwipeableProps> {
55
private readonly handleSwiped: SwipeCallback = () => {}
@@ -41,7 +41,7 @@ class SampleComponent extends React.PureComponent<SwipeableProps> {
4141

4242
class SwipeableDiv extends Swipeable {}
4343

44-
const TestComponent: React.StatelessComponent = _ => {
44+
const TestComponent: React.FunctionComponent = _ => {
4545
const handleSwiped: SwipeCallback = () => {}
4646

4747
return (
@@ -56,3 +56,14 @@ const TestHook = () => {
5656
const handlers = useSwipeable({ onSwiped: ({ dir }) => setDir(dir) })
5757
return <div {...handlers} >{swipeDir}</div>
5858
}
59+
60+
const handlers: SwipeableHandlers = useSwipeable({
61+
onSwipedLeft: (data) => {
62+
data // $ExpectType EventData
63+
},
64+
preventDefaultTouchmoveEvent: true,
65+
trackTouch: true,
66+
})
67+
68+
handlers.ref(<div />)
69+
handlers.ref(null)

0 commit comments

Comments
 (0)