Merge pull request #21721 from horiuchi/update-react-swipeable

[React-Swipeable] update to v4.2
This commit is contained in:
Armando Aguirre
2017-11-27 16:29:30 -08:00
committed by GitHub
3 changed files with 40 additions and 22 deletions

View File

@@ -1,39 +1,42 @@
// Type definitions for react-swipeable 4.0
// Type definitions for react-swipeable 4.2
// Project: https://www.npmjs.com/package/react-swipeable
// Definitions by: Giedrius Grabauskas <https://github.com/GiedriusGrabauskas>
// Konstantin Vasilev <https://github.com/mctep>
// Hiroki Horiuchi <https://github.com/horiuchi>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.3
import * as React from 'react';
declare class ReactSwipeable extends React.Component<ReactSwipeable.SwipeableProps> {}
declare class ReactSwipeable<T extends Element = HTMLElement> extends React.Component<ReactSwipeable.SwipeableProps<T>> {}
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;
type OnSwipingCallback<T extends Element = HTMLElement> = (event: React.TouchEvent<T>, deltaX: number, deltaY: number, absX: number, absY: number, velocity: number) => void;
type OnSwipedCallback<T extends Element = HTMLElement> = (event: React.TouchEvent<T>, deltaX: number, deltaY: number, isFlick: boolean, velocity: number) => void;
type OnSwipedDirectionCallback<T extends Element = HTMLElement> = (event: React.TouchEvent<T>, delta: number, isFlick: boolean) => void;
type OnSwipingDirectionCallback<T extends Element = HTMLElement> = (event: React.TouchEvent<T>, delta: number) => void;
type OnTapCallback<T extends Element = HTMLElement> = (event: React.TouchEvent<T>) => void;
interface SwipeableProps extends React.ClassAttributes<ReactSwipeable>, React.HTMLAttributes<HTMLElement> {
onSwiped?: OnSwipedCallback;
onSwiping?: OnSwipingCallback;
onSwipingUp?: OnSwipingDirectionCallback;
onSwipingRight?: OnSwipingDirectionCallback;
onSwipingDown?: OnSwipingDirectionCallback;
onSwipingLeft?: OnSwipingDirectionCallback;
onSwipedUp?: OnSwipedDirectionCallback;
onSwipedRight?: OnSwipedDirectionCallback;
onSwipedDown?: OnSwipedDirectionCallback;
onSwipedLeft?: OnSwipedDirectionCallback;
onTap?: OnTapCallback;
interface SwipeableProps<T extends Element = HTMLElement> extends React.ClassAttributes<ReactSwipeable<T>>, React.HTMLAttributes<T> {
onSwiped?: OnSwipedCallback<T>;
onSwiping?: OnSwipingCallback<T>;
onSwipingUp?: OnSwipingDirectionCallback<T>;
onSwipingRight?: OnSwipingDirectionCallback<T>;
onSwipingDown?: OnSwipingDirectionCallback<T>;
onSwipingLeft?: OnSwipingDirectionCallback<T>;
onSwipedUp?: OnSwipedDirectionCallback<T>;
onSwipedRight?: OnSwipedDirectionCallback<T>;
onSwipedDown?: OnSwipedDirectionCallback<T>;
onSwipedLeft?: OnSwipedDirectionCallback<T>;
onTap?: OnTapCallback<T>;
flickThreshold?: number;
delta?: number;
preventDefaultTouchmoveEvent?: boolean;
stopPropagation?: boolean;
nodeName?: string;
trackMouse?: boolean;
disabled?: boolean;
innerRef?: React.Ref<T>;
children?: React.ReactNode;
}
}

View File

@@ -35,6 +35,8 @@ class SampleComponent extends React.PureComponent<Swipeable.SwipeableProps> {
stopPropagation
nodeName="swipe"
trackMouse
disabled
innerRef="swipe-ref"
onClick={this.handleClick}
>
<div>
@@ -44,3 +46,16 @@ class SampleComponent extends React.PureComponent<Swipeable.SwipeableProps> {
);
}
}
class DivSwipeable extends Swipeable<HTMLDivElement> {}
const TestComponent: React.StatelessComponent = (_) => {
const handleSwiped = (event: React.TouchEvent<HTMLDivElement>) => {};
return (
<DivSwipeable
nodeName="div"
onSwiped={handleSwiped}
>
<div>this is sample code.</div>
</DivSwipeable>
);
};

View File

@@ -6,8 +6,8 @@
"dom"
],
"noImplicitAny": true,
"noImplicitThis": false,
"strictNullChecks": false,
"noImplicitThis": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"baseUrl": "../",
"typeRoots": [
@@ -22,4 +22,4 @@
"index.d.ts",
"react-swipeable-tests.tsx"
]
}
}