From bdc9b82fcb18d23a4b019a642abcd6fd9157bba4 Mon Sep 17 00:00:00 2001 From: Jonas Thiel Date: Mon, 10 Apr 2017 16:11:52 +0200 Subject: [PATCH] =?UTF-8?q?Add=20type=20definition=20for=20=E2=80=9Ereact-?= =?UTF-8?q?native-drawer=E2=80=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- types/react-native-drawer/index.d.ts | 180 ++++++++++++++++++ .../react-native-drawer-tests.tsx | 40 ++++ types/react-native-drawer/tsconfig.json | 24 +++ types/react-native-drawer/tslint.json | 1 + 4 files changed, 245 insertions(+) create mode 100644 types/react-native-drawer/index.d.ts create mode 100644 types/react-native-drawer/react-native-drawer-tests.tsx create mode 100644 types/react-native-drawer/tsconfig.json create mode 100644 types/react-native-drawer/tslint.json diff --git a/types/react-native-drawer/index.d.ts b/types/react-native-drawer/index.d.ts new file mode 100644 index 0000000000..3bba3ebce8 --- /dev/null +++ b/types/react-native-drawer/index.d.ts @@ -0,0 +1,180 @@ +// Type definitions for react-native-drawer 2.3 +// Project: https://github.com/root-two/react-native-drawer +// Definitions by: jnbt +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +import * as React from 'react'; +import { ViewStyle, ScaledSize } from 'react-native'; + +interface NestedViewStyles { + main?: ViewStyle; + drawerOverlay?: ViewStyle; + mainOverlay?: ViewStyle; +} + +interface DrawerStyles extends NestedViewStyles { + drawer?: ViewStyle; +} + +type TweenFunctions = 'linear' | + 'easeInQuad' | + 'easeOutQuad' | + 'easeInOutQuad' | + 'easeInCubic' | + 'easeOutCubic' | + 'easeInOutCubic' | + 'easeInQuart' | + 'easeOutQuart' | + 'easeInOutQuart' | + 'easeInQuint' | + 'easeOutQuint' | + 'easeInOutQuint' | + 'easeInSine' | + 'easeOutSine' | + 'easeInOutSine' | + 'easeInExpo' | + 'easeOutExpo' | + 'easeInOutExpo' | + 'easeInCirc' | + 'easeOutCirc' | + 'easeInOutCirc' | + 'easeInElastic' | + 'easeOutElastic' | + 'easeInOutElastic' | + 'easeInBack' | + 'easeOutBack' | + 'easeInOutBack' | + 'easeInBounce' | + 'easeOutBounce' | + 'easeInOutBounce'; + +export interface DrawerProperties { + // Important + + /** + * Menu component + */ + content?: React.ReactNode; + /** + * Type of drawer + */ + type?: 'displace' | 'overlay' | 'static'; + /** + * If true will trigger drawer open, if false will trigger close. + */ + open?: boolean; + /** + * Can either be a integer (pixel value) or decimal (ratio of screen width). Defines the right hand margin when + * the drawer is open. Or, can be function which returns offset + */ + openDrawerOffset?: ((viewport: ScaledSize) => number) | number; + /** + * Same as openDrawerOffset, except defines left hand margin when drawer is closed + */ + closedDrawerOffset?: (() => number) | number; + /** + * If true the drawer can not be opened and will not respond to pans + */ + disabled?: boolean; + /** + * Styles for the drawer, main, drawerOverlay and mainOverlay container Views + */ + styles?: DrawerStyles; + + // Animation / Tween + + /** + * Takes in the pan ratio (decimal 0 to 1) that represents the tween percent. Returns an object of + * native props to be set on the constituent views + */ + tweenHandler?(ratio: number): NestedViewStyles; + /** + * The duration of the open/close animation + */ + tweenDuration?: number; + /** + * A easing type supported by tween-functions + */ + tweenEasing?: TweenFunctions; + + // Event Handlers + + /** + * Will be called immediately after the drawer has entered the open state + */ + onOpen?(): void; + /** + * Callback fired at the start of an open animation + */ + onOpenStart?(): void; + /** + * Will be called immediately after the drawer has entered the closed state + */ + onClose?(): void; + /** + * Ccallback fired at the start of a close animation + */ + onCloseStart?(): void; + + // Gestures + + /** + * If true, will capture all gestures inside of the pan mask. If 'open' will + * only capture when drawer is open + */ + captureGestures?: boolean | 'open' | 'closed'; + /** + * Toggle drawer when double tap occurs within pan mask? + */ + acceptDoubleTap?: boolean; + /** + * Toggle drawer when any tap occurs within pan mask? + */ + acceptTap?: boolean; + /** + * Allow for drawer pan (on touch drag). Set to false to effectively + * disable the drawer while still allowing programmatic control + */ + acceptPan?: boolean; + /** + * Same as acceptTap, except only for close + */ + tapToClose?: boolean; + /** + * If true, attempts to handle only horizontal swipes, making it play well with a child ScrollView + */ + negotiatePan?: boolean; + + // Additional Configurations + + /** + * Ratio of screen width that must be travelled to trigger a drawer open/close + */ + panThreshold?: number; + /** + * Ratio of screen width that is valid for the start of a pan open action. If null -> defaults to max(.05, closedDrawerOffset) + */ + panOpenMask?: number; + /** + * Ratio of screen width that is valid for the start of a pan close action. If null -> defaults to max(.05, openDrawerOffset) + */ + panCloseMask?: number; + /** + * Initialize with drawer open + */ + initializeOpen?: number; + /** + * which side the drawer should be on. + */ + side?: 'left' | 'right'; + /** + * if true will run InteractionManager for open/close animations. + */ + useInteractionManager?: boolean; + /** + * (Android-only) Sets the elevation of the drawer using Android's underlying elevation API + */ + elevation?: number; +} + +export default class Drawer extends React.Component { } diff --git a/types/react-native-drawer/react-native-drawer-tests.tsx b/types/react-native-drawer/react-native-drawer-tests.tsx new file mode 100644 index 0000000000..dbc1d06b0e --- /dev/null +++ b/types/react-native-drawer/react-native-drawer-tests.tsx @@ -0,0 +1,40 @@ +import * as React from 'react'; +import { + ScaledSize, + StyleSheet, + View, + ViewStyle +} from 'react-native'; +import Drawer from 'react-native-drawer'; + +class DrawerTest extends React.Component<{}, {open: boolean}> { + constructor(props: {}) { + super(props); + this.state = { + open: true + }; + } + + render() { + return ( + } + onOpen={this.onOpen} + onClose={this.onClose} + closedDrawerOffset={100} + openDrawerOffset={(viewport: ScaledSize) => 50} + > + + ); + } + + private onOpen = () => { + this.setState({open: true}); + } + + private onClose = () => { + this.setState({open: false}); + } +} diff --git a/types/react-native-drawer/tsconfig.json b/types/react-native-drawer/tsconfig.json new file mode 100644 index 0000000000..ae7203c8c2 --- /dev/null +++ b/types/react-native-drawer/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true, + "jsx": "react" + }, + "files": [ + "index.d.ts", + "react-native-drawer-tests.tsx" + ] +} diff --git a/types/react-native-drawer/tslint.json b/types/react-native-drawer/tslint.json new file mode 100644 index 0000000000..377cc837d4 --- /dev/null +++ b/types/react-native-drawer/tslint.json @@ -0,0 +1 @@ +{ "extends": "../tslint.json" }