From 64a0c4da910ce79ce018a621060704cf9ea92d96 Mon Sep 17 00:00:00 2001 From: Justin Firth Date: Wed, 10 May 2017 12:28:43 -0400 Subject: [PATCH] Definitions for react-native-drawer-layout@1.3 --- types/react-native-drawer-layout/index.d.ts | 105 ++++++++++++++++++ .../react-native-drawer-layout-tests.tsx | 39 +++++++ .../react-native-drawer-layout/tsconfig.json | 24 ++++ types/react-native-drawer-layout/tslint.json | 1 + 4 files changed, 169 insertions(+) create mode 100644 types/react-native-drawer-layout/index.d.ts create mode 100644 types/react-native-drawer-layout/react-native-drawer-layout-tests.tsx create mode 100644 types/react-native-drawer-layout/tsconfig.json create mode 100644 types/react-native-drawer-layout/tslint.json diff --git a/types/react-native-drawer-layout/index.d.ts b/types/react-native-drawer-layout/index.d.ts new file mode 100644 index 0000000000..300119bf00 --- /dev/null +++ b/types/react-native-drawer-layout/index.d.ts @@ -0,0 +1,105 @@ +// Type definitions for react-native-drawer-layout 1.3 +// Project: https://github.com/react-native-community/react-native-drawer-layout +// Definitions by: Justin Firth +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.2 + +import * as React from 'react'; +import { ViewProperties } from 'react-native'; + +export type DrawerLayoutOpenEventHandler = () => void; + +export type DrawerLayoutCloseEventHandler = () => void; + +export interface DrawerLayoutSlideEvent { + nativeEvent: { + offset: number; + }; +} + +export type DrawerLayoutSlideEventHandler = (event: DrawerLayoutSlideEvent) => void; + +export type DrawerLayoutStateChangeEventHandler = (state: string) => void; + +export interface DrawerLayoutProperties extends ViewProperties { + /** + * Child content. + */ + children?: React.ReactNode; + /** + * Specifies the background color of the drawer. The default value is white. If you want to set + * the opacity of the drawer, use rgba. + */ + drawerBackgroundColor?: string; + /** + * Specifies the lock mode of the drawer. The drawer can be locked in 3 states: + * + * - unlocked (default), meaning that the drawer will respond (open/close) to touch gestures. + * - locked-closed, meaning that the drawer will stay closed and not respond to gestures. + * - locked-open, meaning that the drawer will stay opened and not respond to gestures. + * + * The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`). + */ + drawerLockMode?: 'unlocked' | 'locked-closed' | 'locked-open'; + /** + * Specifies the side of the screen from which the drawer will slide in. + */ + drawerPosition: 'left' | 'right'; + /** + * Specifies the width of the drawer, more precisely the width of the view that be pulled in from + * the edge of the window. + */ + drawerWidth: number; + /** + * Determines whether the keyboard gets dismissed in response to a drag. + * + * - 'none' (the default), drags do not dismiss the keyboard. + * - 'on-drag', the keyboard is dismissed when a drag begins. + */ + keyboardDismissMode?: 'none' | 'on-drag'; + /** + * Function called whenever the navigation view has been closed. + */ + onDrawerClose?: DrawerLayoutCloseEventHandler; + /** + * Function called whenever the navigation view has been opened. + */ + onDrawerOpen?: DrawerLayoutOpenEventHandler; + /** + * Function called whenever there is an interaction with the navigation view. + */ + onDrawerSlide?: DrawerLayoutSlideEventHandler; + /** + * Function called when the drawer state has changed. The drawer can be in 3 states: + * + * - idle, meaning there is no interaction with the navigation view happening at the time + * - dragging, meaning there is currently an interaction with the navigation view + * - settling, meaning that there was an interaction with the navigation view, and the navigation + * view is now finishing its closing or opening animation + */ + onDrawerStateChanged?: DrawerLayoutStateChangeEventHandler; + /** + * The navigation view that will be rendered to the side of the screen and can be pulled in. + */ + renderNavigationView: React.ReactNode; + /** + * Make the drawer take the entire screen and draw the background of the status bar to allow it + * to open over the status bar. It will only have an effect on API 21+. + */ + statusBarBackgroundColor?: string; + /** + * Use native driver animations. + */ + useNativeAnimations?: boolean; +} + +export default class DrawerLayout extends React.Component { + /** + * Opens the drawer. + */ + openDrawer(): void; + /** + * Closes the drawer. + */ + closeDrawer(): void; +} diff --git a/types/react-native-drawer-layout/react-native-drawer-layout-tests.tsx b/types/react-native-drawer-layout/react-native-drawer-layout-tests.tsx new file mode 100644 index 0000000000..d1a8c31168 --- /dev/null +++ b/types/react-native-drawer-layout/react-native-drawer-layout-tests.tsx @@ -0,0 +1,39 @@ +import * as React from 'react'; +import { Text, View } from 'react-native'; +import DrawerLayout from 'react-native-drawer-layout'; + +interface DrawerTestState { + open: boolean; +} + +class DrawerTest extends React.Component<{}, DrawerTestState> { + state: DrawerTestState = { + open: false + }; + + private onOpen = () => this.setState({ open: true }); + + private onClose = () => this.setState({ open: false }); + + private renderNavigationView = () => ( + + Drawer content + + ) + + render() { + return ( + + + Screen content + + + ); + } +} diff --git a/types/react-native-drawer-layout/tsconfig.json b/types/react-native-drawer-layout/tsconfig.json new file mode 100644 index 0000000000..e70b67aac5 --- /dev/null +++ b/types/react-native-drawer-layout/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-layout-tests.tsx" + ] +} diff --git a/types/react-native-drawer-layout/tslint.json b/types/react-native-drawer-layout/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/react-native-drawer-layout/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }