From eb26c6134140d9977a7f06f24a09fb8b1472a42a Mon Sep 17 00:00:00 2001 From: Kyle Roach Date: Mon, 10 Jul 2017 10:58:40 -0400 Subject: [PATCH] Adding typings for react-native-collapsible --- types/react-native-collapsible/Accordion.d.ts | 64 +++++++++++++++ types/react-native-collapsible/index.d.ts | 79 +++++++++++++++++++ .../react-native-collapsible-tests.tsx | 38 +++++++++ types/react-native-collapsible/tsconfig.json | 24 ++++++ types/react-native-collapsible/tslint.json | 1 + 5 files changed, 206 insertions(+) create mode 100644 types/react-native-collapsible/Accordion.d.ts create mode 100644 types/react-native-collapsible/index.d.ts create mode 100644 types/react-native-collapsible/react-native-collapsible-tests.tsx create mode 100644 types/react-native-collapsible/tsconfig.json create mode 100644 types/react-native-collapsible/tslint.json diff --git a/types/react-native-collapsible/Accordion.d.ts b/types/react-native-collapsible/Accordion.d.ts new file mode 100644 index 0000000000..2a2fc04a9f --- /dev/null +++ b/types/react-native-collapsible/Accordion.d.ts @@ -0,0 +1,64 @@ +import * as React from 'react'; +import { EasingMode } from './index'; + +export interface AccordionProps { + /** + * An array of sections passed to the render methods + */ + sections: string[]; + + /** + * A function that should return a renderable representing the header + */ + renderHeader(content: any, index: number, isActive: boolean): JSX.Element; + + /** + * A function that should return a renderable representing the content + */ + renderContent(content: any, index: number, isActive: boolean): JSX.Element; + + /** + * An optional function that is called when currently active section is changed, index === false when collapsed + */ + onChange?(index: number): void; + + /** + * Set which index in the sections array is initially open. Defaults to none. + */ + initiallyActiveSection?: number; + + /** + * Control which index in the sections array is currently open. Defaults to none. If false, closes all sections. + */ + activeSection?: boolean | number; + + /** + * The color of the underlay that will show through when tapping on headers. + * + * @default black + */ + underlayColor?: string; + + /** + * Alignment of the content when transitioning, can be top, center or bottom + * + * @default top + */ + align?: 'top' | 'center' | 'bottom'; + + /** + * Duration of transition in milliseconds + * + * @default 300 + */ + duration?: number; + + /** + * Function or function name from Easing (or tween-functions if < RN 0.8). Collapsible will try to combine Easing functions for you if you name them like tween-functions. + * + * @default easeOutCubic + */ + easing?: EasingMode | any; +} + +export default class Accordion extends React.Component {} diff --git a/types/react-native-collapsible/index.d.ts b/types/react-native-collapsible/index.d.ts new file mode 100644 index 0000000000..bdd8dd9ea5 --- /dev/null +++ b/types/react-native-collapsible/index.d.ts @@ -0,0 +1,79 @@ +// Type definitions for react-native-collapsible 0.8 +// Project: https://github.com/oblador/react-native-collapsible +// Definitions by: Kyle Roach +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.3 + +import * as React from 'react'; + +export type EasingMode = +'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 CollapsibleProps { + /** + * Alignment of the content when transitioning, can be top, center or bottom + * + * @default top + */ + align?: 'top' | 'center' | 'bottom'; + + /** + * Whether to show the child components or not + * + * @default true + */ + collapsed?: boolean; + + /** + * Which height should the component collapse to + * + * @default 0 + */ + collapsedHeight?: number; + + /** + * Duration of transition in milliseconds + * + * @default 300 + */ + duration?: number; + + /** + * Function or function name from Easing (or tween-functions if < RN 0.8). Collapsible will try to combine Easing functions for you if you name them like tween-functions + * + * @default easeOutCubic + */ + easing?: EasingMode | any; +} + +export default class Collapsible extends React.Component {} diff --git a/types/react-native-collapsible/react-native-collapsible-tests.tsx b/types/react-native-collapsible/react-native-collapsible-tests.tsx new file mode 100644 index 0000000000..1107084f3d --- /dev/null +++ b/types/react-native-collapsible/react-native-collapsible-tests.tsx @@ -0,0 +1,38 @@ +import * as React from 'react'; +import { View } from 'react-native'; +import Collapsible from 'react-native-collapsible'; +import Accordion from 'react-native-collapsible/Accordion'; + +class CollapsibleTest extends React.Component { + render() { + return ( + + + + ); + } +} + +class AccordianTest extends React.Component { + _renderHeader() { + return ( + + ); + } + + _renderContent() { + return ( + + ); + } + + render() { + return ( + + ); + } +} diff --git a/types/react-native-collapsible/tsconfig.json b/types/react-native-collapsible/tsconfig.json new file mode 100644 index 0000000000..1e5b287fb1 --- /dev/null +++ b/types/react-native-collapsible/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true, + "jsx": "react" + }, + "files": [ + "index.d.ts", + "Accordion.d.ts", + "react-native-collapsible-tests.tsx" + ] +} diff --git a/types/react-native-collapsible/tslint.json b/types/react-native-collapsible/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/react-native-collapsible/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }