From d14bffff32baf84c971fd5676e0732b16756dee4 Mon Sep 17 00:00:00 2001 From: Grzegorz Kielak Date: Mon, 10 Jul 2017 15:19:01 +0200 Subject: [PATCH] Add types for react-touch https://github.com/leonaves/react-touch --- types/react-touch/index.d.ts | 102 ++++++++++++++++++++++++ types/react-touch/react-touch-tests.tsx | 62 ++++++++++++++ types/react-touch/tsconfig.json | 24 ++++++ types/react-touch/tslint.json | 3 + 4 files changed, 191 insertions(+) create mode 100644 types/react-touch/index.d.ts create mode 100644 types/react-touch/react-touch-tests.tsx create mode 100644 types/react-touch/tsconfig.json create mode 100644 types/react-touch/tslint.json diff --git a/types/react-touch/index.d.ts b/types/react-touch/index.d.ts new file mode 100644 index 0000000000..7359abd1f4 --- /dev/null +++ b/types/react-touch/index.d.ts @@ -0,0 +1,102 @@ +// Type definitions for react-touch 1.8 +// Project: https://github.com/leonaves/react-touch +// Definitions by: Grzegorz Kielak +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.1 + +import * as React from "react"; + +export function defineHold(config?: HoldConfig): HoldableConfig; + +export interface HoldConfig { + /** @default 250 */ + updateEvery?: number; + /** @default 1000 */ + holdFor?: number; +} + +/** @see defineHold */ +export interface HoldableConfig { + holdProgress(callback: () => void): (updateState: (holdLength: number) => void) => () => void; + holdComplete(callback: () => void): () => () => void; +} + +export interface HoldableProps { + /** @see defineHold */ + config?: HoldableConfig; + onHoldProgress?(): void; + onHoldComplete?(): void; + onMouseDown?(): void; + onTouchStart?(): void; +} + +export class Holdable extends React.Component { +} + +export interface DraggableStyle { + translateX?: number; + translateY?: number; + top?: number; + left?: number; + right?: number; + bottom?: number; +} + +export interface DraggableCallbackArgument extends DraggableStyle { + dx: number; + dy: number; +} + +export type DraggableCallback = (argument: DraggableCallbackArgument) => JSX.Element; + +export interface DraggableProps { + /** + * An object that defines the initial position of the draggable component. + * You can pass any of the following styles to it + * and they'll be updated and passed back out in the callback with every animation tick. + */ + style: DraggableStyle; + children: DraggableCallback; +} + +export class Draggable extends React.Component { +} + +export function defineSwipe(config?: SwipConfig): SwipeableConfig; + +export interface SwipConfig { + /** @default 100 */ + swipeDistance?: number; +} + +/** @see defineSwipe */ +export interface SwipeableConfig { + onSwipeLeft(current: number, initial: number, callback: () => void): void; + onSwipeRight(current: number, initial: number, callback: () => void): void; + onSwipeUp(current: number, initial: number, callback: () => void): void; + onSwipeDown(current: number, initial: number, callback: () => void): void; +} + +export interface SwipeableProps { + /** @see defineSwipe */ + config?: SwipeableConfig; + onSwipeLeft?(): void; + onSwipeRight?(): void; + onSwipeUp?(): void; + onSwipeDown?(): void; + onMouseDown?(): void; + onTouchStart?(): void; +} + +export class Swipeable extends React.Component { +} + +export enum moves {UPLEFT, UP, UPRIGHT, LEFT, RIGHT, DOWNRIGHT, DOWN, DOWNLEFT} + +export interface CustomGestureProps { + config: moves[]; + onGesture(): void; +} + +export class CustomGesture extends React.Component { +} diff --git a/types/react-touch/react-touch-tests.tsx b/types/react-touch/react-touch-tests.tsx new file mode 100644 index 0000000000..4efaaa33b1 --- /dev/null +++ b/types/react-touch/react-touch-tests.tsx @@ -0,0 +1,62 @@ +import * as React from "react"; +import { + CustomGesture, + defineHold, defineSwipe, Draggable, DraggableCallbackArgument, DraggableStyle, Holdable, HoldableConfig, + HoldableProps, HoldConfig, moves, SwipConfig, Swipeable, SwipeableConfig, SwipeableProps +} from "react-touch"; + +export class HoldableTest extends React.PureComponent<{}> { + render() { + const holdConfig: HoldConfig = {}; + const config: HoldableConfig = defineHold(holdConfig); + const props: HoldableProps = { + config, + onHoldComplete() { + return; + } + }; + return ; + } +} + +export class DraggableTest extends React.PureComponent<{}> { + render() { + const style: DraggableStyle = {}; + return ; + } + + private callback = (argument: DraggableCallbackArgument): JSX.Element => { + return
; + } +} + +export class SwipeableTest extends React.PureComponent<{}> { + render() { + const swipConfig: SwipConfig = {}; + const config: SwipeableConfig = defineSwipe(swipConfig); + const props: SwipeableProps = { + config, + onSwipeLeft: this.swipeHandler, + onSwipeUp: this.swipeHandler + }; + return +
+ ; + } + + private swipeHandler = () => { + return; + } +} + +export class CustomGestureTest extends React.PureComponent<{}> { + private move: moves[] = [moves.UPLEFT, moves.RIGHT, moves.DOWNRIGHT]; + + render() { + return ; + } + + private handler = () => { + return; + } +} diff --git a/types/react-touch/tsconfig.json b/types/react-touch/tsconfig.json new file mode 100644 index 0000000000..931b273805 --- /dev/null +++ b/types/react-touch/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "baseUrl": "../", + "jsx": "react", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "react-touch-tests.tsx" + ] +} diff --git a/types/react-touch/tslint.json b/types/react-touch/tslint.json new file mode 100644 index 0000000000..d88586e5bd --- /dev/null +++ b/types/react-touch/tslint.json @@ -0,0 +1,3 @@ +{ + "extends": "dtslint/dt.json" +}