diff --git a/types/react-swipeable/index.d.ts b/types/react-swipeable/index.d.ts index fadf0f057f..7692abd859 100644 --- a/types/react-swipeable/index.d.ts +++ b/types/react-swipeable/index.d.ts @@ -1,31 +1,24 @@ -// Type definitions for react-swipeable 3.3.1 +// Type definitions for react-swipeable 4.0 // Project: https://www.npmjs.com/package/react-swipeable // Definitions by: Giedrius Grabauskas +// Konstantin Vasilev // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 2.1 +// TypeScript Version: 2.2 -/// +import * as React from 'react'; -declare namespace ReactSwipeableModule { - interface onSwipingCallback { - (event: React.TouchEvent, deltaX: number, deltaY: number, absX: number, absY: number, velocity: number): void; - } +declare class ReactSwipeable extends React.Component {} - interface OnSwipedCallback { - (event: React.TouchEvent, deltaX: number, deltaY: number, isFlick: boolean, velocity: number): void; - } +declare namespace ReactSwipeable { + type OnSwipingCallback = (event: React.TouchEvent, deltaX: number, deltaY: number, absX: number, absY: number, velocity: number) => void; + type OnSwipedCallback = (event: React.TouchEvent, deltaX: number, deltaY: number, isFlick: boolean, velocity: number) => void; + type OnSwipedDirectionCallback = (event: React.TouchEvent, delta: number, isFlick: boolean) => void; + type OnSwipingDirectionCallback = (event: React.TouchEvent, delta: number) => void; + type OnTapCallback = (event: React.TouchEvent) => void; - interface OnSwipedDirectionCallback { - (event: React.TouchEvent, delta: number, isFlick: boolean): void; - } - - interface OnSwipingDirectionCallback { - (event: React.TouchEvent, delta: number): void; - } - - interface Props { + interface SwipeableProps extends React.ClassAttributes, React.HTMLAttributes { onSwiped?: OnSwipedCallback; - onSwiping?: onSwipingCallback; + onSwiping?: OnSwipingCallback; onSwipingUp?: OnSwipingDirectionCallback; onSwipingRight?: OnSwipingDirectionCallback; onSwipingDown?: OnSwipingDirectionCallback; @@ -34,18 +27,15 @@ declare namespace ReactSwipeableModule { onSwipedRight?: OnSwipedDirectionCallback; onSwipedDown?: OnSwipedDirectionCallback; onSwipedLeft?: OnSwipedDirectionCallback; + onTap?: OnTapCallback; flickThreshold?: number; delta?: number; preventDefaultTouchmoveEvent?: boolean; + stopPropagation?: boolean; nodeName?: string; + trackMouse?: boolean; + children?: React.ReactNode; } - - interface ReactSwipeable extends React.ComponentClass { } - } - -declare module "react-swipeable" { - let module: ReactSwipeableModule.ReactSwipeable; - export = module; -} +export = ReactSwipeable; diff --git a/types/react-swipeable/react-swipeable-tests.tsx b/types/react-swipeable/react-swipeable-tests.tsx index 7e8682ade7..c75869bdb0 100644 --- a/types/react-swipeable/react-swipeable-tests.tsx +++ b/types/react-swipeable/react-swipeable-tests.tsx @@ -1,26 +1,46 @@ -import Swipeable = require('react-swipeable'); -import React = require('react'); +import * as React from 'react'; +import * as Swipeable from 'react-swipeable'; -var SampleComponent = React.createClass({ - render: function () { +class SampleComponent extends React.PureComponent { + private handleSwiped: Swipeable.OnSwipedCallback = () => {}; + private handleSwiping: Swipeable.OnSwipingCallback = () => {}; + private handleSwipingUp: Swipeable.OnSwipingDirectionCallback = () => {}; + private handleSwipingRight: Swipeable.OnSwipingDirectionCallback = () => {}; + private handleSwipingDown: Swipeable.OnSwipingDirectionCallback = () => {}; + private handleSwipingLeft: Swipeable.OnSwipingDirectionCallback = () => {}; + private handleSwipedUp: Swipeable.OnSwipedDirectionCallback = () => {}; + private handleSwipedRight: Swipeable.OnSwipedDirectionCallback = () => {}; + private handleSwipedDown: Swipeable.OnSwipedDirectionCallback = () => {}; + private handleSwipedLeft: Swipeable.OnSwipedDirectionCallback = () => {}; + private handleTap: Swipeable.OnTapCallback = () => {}; + private handleClick = () => {}; + + render() { return ( + onSwiped={this.handleSwiped} + onSwiping={this.handleSwiping} + onSwipingUp={this.handleSwipingUp} + onSwipingRight={this.handleSwipingRight} + onSwipingDown={this.handleSwipingDown} + onSwipingLeft={this.handleSwipingLeft} + onSwipedUp={this.handleSwipedUp} + onSwipedRight={this.handleSwipedRight} + onSwipedDown={this.handleSwipedDown} + onSwipedLeft={this.handleSwipedLeft} + onTap={this.handleTap} + flickThreshold={10} + delta={10} + preventDefaultTouchmoveEvent + stopPropagation + nodeName="swipe" + trackMouse + onClick={this.handleClick} + >
This element can be swiped
- ) + ); } -}) +} diff --git a/types/react-swipeable/tslint.json b/types/react-swipeable/tslint.json new file mode 100644 index 0000000000..f93cf8562a --- /dev/null +++ b/types/react-swipeable/tslint.json @@ -0,0 +1,3 @@ +{ + "extends": "dtslint/dt.json" +}