Add definitions for react-transition-group (#16117)

* Add definitions for react-transition-group

* Change authors in header

types/react-transition-group/CSSTransitionGroup.d.ts

@@ -0,0 +1,27 @@
+import { Component } from "react";
+import { HTMLTransitionGroupProps } from "./index";
+
+declare namespace CSSTransitionGroup {
+    interface CSSTransitionGroupTransitionName {
+        enter: string;
+        enterActive?: string;
+        leave: string;
+        leaveActive?: string;
+        appear?: string;
+        appearActive?: string;
+    }
+
+    interface CSSTransitionGroupProps extends HTMLTransitionGroupProps<CSSTransitionGroup> {
+        transitionName: string | CSSTransitionGroupTransitionName;
+        transitionAppear?: boolean;
+        transitionAppearTimeout?: number;
+        transitionEnter?: boolean;
+        transitionEnterTimeout?: number;
+        transitionLeave?: boolean;
+        transitionLeaveTimeout?: number;
+    }
+}
+
+declare class CSSTransitionGroup extends Component<CSSTransitionGroup.CSSTransitionGroupProps, any> {}
+
+export = CSSTransitionGroup;

types/react-transition-group/TransitionGroup.d.ts

@@ -0,0 +1,19 @@
+import { Component, HTMLAttributes, ReactElement, ReactType } from "react";
+import { HTMLTransitionGroupProps } from "./index";
+
+declare namespace TransitionGroup {
+    interface TransitionGroupChildLifecycle {
+        componentWillAppear?(callback: () => void): void;
+        componentDidAppear?(): void;
+        componentWillEnter?(callback: () => void): void;
+        componentDidEnter?(): void;
+        componentWillLeave?(callback: () => void): void;
+        componentDidLeave?(): void;
+    }
+
+    type TransitionGroupProps = HTMLTransitionGroupProps<TransitionGroup>;
+}
+
+declare class TransitionGroup extends Component<TransitionGroup.TransitionGroupProps, any> {}
+
+export = TransitionGroup;

types/react-transition-group/index.d.ts

@@ -0,0 +1,29 @@
+// Type definitions for react-transition-group 1.1
+// Project: https://github.com/reactjs/react-transition-group
+// Definitions by: Karol Janyst <https://github.com/LKay>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.1
+
+import { HTMLAttributes, ReactElement, ReactType } from "react";
+
+export interface HTMLTransitionGroupProps<T> extends HTMLAttributes<T> {
+    component?: ReactType;
+    childFactory?(child: ReactElement<any>): ReactElement<any>;
+}
+
+import * as TransitionGroup from "./TransitionGroup";
+export {
+    TransitionGroupProps,
+    TransitionGroupChildLifecycle
+} from "./TransitionGroup";
+
+import * as CSSTransitionGroup from "./CSSTransitionGroup";
+export {
+    CSSTransitionGroupProps,
+    CSSTransitionGroupTransitionName
+} from "./CSSTransitionGroup";
+
+export {
+    TransitionGroup,
+    CSSTransitionGroup
+};

types/react-transition-group/react-transition-group-tests.tsx

@@ -0,0 +1,73 @@
+import * as React from "react";
+import * as TransitionGroup from "react-transition-group/TransitionGroup";
+import * as CSSTransitionGroup from "react-transition-group/CSSTransitionGroup";
+import { CSSTransitionGroupProps, TransitionGroupProps, TransitionGroupChildLifecycle } from "react-transition-group";
+
+class TestChild extends React.Component<any, any> implements TransitionGroupChildLifecycle {
+    componentWillAppear(callback: () => void) {
+        callback();
+    }
+
+    componentDidAppear() {}
+
+    componentWillEnter(callback: () => void) {
+        callback();
+    }
+
+    componentDidEnter() {}
+
+    componentWillLeave(callback: () => void) {
+        callback();
+    }
+
+    componentDidLeave() {}
+
+    render() {
+        return (<li>{ "Test" }</li>);
+    }
+}
+
+const Test: React.StatelessComponent<any> = () => {
+    return (
+        <div>
+            <TransitionGroup component="ul" className="animated-list">
+                <TestChild />
+            </TransitionGroup>
+
+            <CSSTransitionGroup
+                transitionName="example"
+                transitionAppear={ true }
+                transitionAppearTimeout={ 500 }
+                transitionEnter={ true }
+                transitionEnterTimeout={ 500 }
+                transitionLeave={ true }
+                transitionLeaveTimeout={ 500 }
+            >
+                <div>{ "test" }</div>
+            </CSSTransitionGroup>
+
+            <CSSTransitionGroup
+                transitionName={ {
+                    enter: "enter",
+                    enterActive: "enterActive",
+                    leave: "leave",
+                    leaveActive: "leaveActive",
+                    appear: "appear",
+                    appearActive: "appearActive"
+                } }
+            >
+                <div>{ "test" }</div>
+            </CSSTransitionGroup>
+
+            <CSSTransitionGroup
+                transitionName={ {
+                    enter: "enter",
+                    leave: "leave",
+                    appear: "appear"
+                } }
+            >
+                <div>{ "test" }</div>
+            </CSSTransitionGroup>
+        </div>
+    );
+};

types/react-transition-group/tsconfig.json

@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "jsx": "react",
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "CSSTransitionGroup.d.ts",
+        "TransitionGroup.d.ts",
+        "react-transition-group-tests.tsx"
+    ]
+}

types/react-transition-group/tslint.json

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