Merge pull request #17914 from iRoachie/rn-collapsible

Adding typings for react-native-collapsible

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<AccordionProps, any> {}

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 <https://github.com/iRoachie>
+// 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<CollapsibleProps, any> {}

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<any, any> {
+  render() {
+    return (
+      <Collapsible collapsed={true}>
+        <View />
+      </Collapsible>
+    );
+  }
+}
+
+class AccordianTest extends React.Component<any, any> {
+  _renderHeader() {
+    return (
+      <View />
+    );
+  }
+
+  _renderContent() {
+    return (
+      <View />
+    );
+  }
+
+  render() {
+    return (
+      <Accordion
+        sections={['Section 1', 'Section 2', 'Section 3']}
+        renderHeader={this._renderHeader}
+        renderContent={this._renderContent}
+      />
+    );
+  }
+}

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"
+    ]
+}

types/react-native-collapsible/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }