Merge pull request #16959 from mctep/patch-react-swipeable-v4

Upgrade react-swipeable to v4.0

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 <https://github.com/GiedriusGrabauskas>
+//                 Konstantin Vasilev <https://github.com/mctep>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.1
+// TypeScript Version: 2.2
 
-///<reference types='react' />
+import * as React from 'react';
 
-declare namespace ReactSwipeableModule {
-    interface onSwipingCallback {
-        (event: React.TouchEvent<any>, deltaX: number, deltaY: number, absX: number, absY: number, velocity: number): void;
-    }
+declare class ReactSwipeable extends React.Component<ReactSwipeable.SwipeableProps, void> {}
 
-    interface OnSwipedCallback {
-        (event: React.TouchEvent<any>, deltaX: number, deltaY: number, isFlick: boolean, velocity: number): void;
-    }
+declare namespace ReactSwipeable {
+    type OnSwipingCallback = (event: React.TouchEvent<HTMLElement>, deltaX: number, deltaY: number, absX: number, absY: number, velocity: number) => void;
+    type OnSwipedCallback = (event: React.TouchEvent<HTMLElement>, deltaX: number, deltaY: number, isFlick: boolean, velocity: number) => void;
+    type OnSwipedDirectionCallback = (event: React.TouchEvent<HTMLElement>, delta: number, isFlick: boolean) => void;
+    type OnSwipingDirectionCallback = (event: React.TouchEvent<HTMLElement>, delta: number) => void;
+    type OnTapCallback = (event: React.TouchEvent<HTMLElement>) => void;
 
-    interface OnSwipedDirectionCallback {
-        (event: React.TouchEvent<any>, delta: number, isFlick: boolean): void;
-    }
-
-    interface OnSwipingDirectionCallback {
-        (event: React.TouchEvent<any>, delta: number): void;
-    }
-
-    interface Props {
+    interface SwipeableProps extends React.ClassAttributes<ReactSwipeable>, React.HTMLAttributes<HTMLElement> {
         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<Props> { }
-
 }
 
-
-declare module "react-swipeable" {
-    let module: ReactSwipeableModule.ReactSwipeable;
-    export = module;
-}
+export = ReactSwipeable;

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<Swipeable.SwipeableProps, void> {
+  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 (
       <Swipeable
-        onSwiping={this.swiping}
-        onSwipingUp={this.swipingUp}
-        onSwipingRight={this.swipingRight}
-        onSwipingDown={this.swipingDown}
-        onSwipingLeft={this.swipingLeft}
-        onSwipedUp={this.swipedUp}
-        onSwipedRight={this.swipedRight}
-        onSwipedDown={this.swipedDown}
-        onSwipedLeft={this.swipedLeft}
-        onSwiped={this.handleSwipeAction}
-        preventDefaultTouchmoveEvent={false}
-        nodeName={"swipe"}>
+        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}
+      >
         <div>
           This element can be swiped
         </div>
       </Swipeable>
-    )
+    );
   }
-})
+}

types/react-swipeable/tslint.json

@@ -0,0 +1,3 @@
+{
+    "extends": "dtslint/dt.json"
+}