Add definitions for react-transition-group v2

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

@@ -0,0 +1,20 @@
+import { Component } from "react";
+import { TransitionActions } from "react-transition-group";
+import { TransitionProps } from "react-transition-group/Transition";
+
+export interface CSSTransitionClassNames {
+    appear?: string;
+    appearActive?: string;
+    enter?: string;
+    enterActive?: string;
+    exit?: string;
+    exitActive?: string;
+}
+
+export interface CSSTransitionProps extends TransitionProps {
+    classNames: string | CSSTransitionClassNames;
+}
+
+declare class CSSTransition extends Component<CSSTransitionProps> {}
+
+export default CSSTransition;

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

@@ -0,0 +1,24 @@
+import { Component, HTMLProps } from "react";
+import { TransitionActions } from "react-transition-group";
+
+export type EndHandler = (node: HTMLElement, done: () => void) => void;
+export type EnterHandler = (node: HTMLElement, isAppearing: boolean) => void;
+export type ExitHandler = (node: HTMLElement) => void;
+
+export interface TransitionProps extends TransitionActions, HTMLProps<any> {
+    in?: boolean;
+    mountOnEnter?: boolean;
+    unmountOnExit?: boolean;
+    timeout: number | { enter?: number, exit?: number };
+    addEndListener?: EndHandler;
+    onEnter?: EnterHandler;
+    onEntering?: EnterHandler;
+    onEntered?: EnterHandler;
+    onExit?: ExitHandler;
+    onExiting?: ExitHandler;
+    onExited?: ExitHandler;
+}
+
+declare class Transition extends Component<TransitionProps> {}
+
+export default Transition;

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

@@ -1,19 +1,10 @@
-import { Component, HTMLAttributes, ReactElement, ReactType } from "react";
-import { HTMLTransitionGroupProps } from "./index";
+import { Component, ReactType, HTMLProps } from "react";
+import { TransitionActions } from "react-transition-group";
 
-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>;
+export interface TransitionGroupProps extends TransitionActions, HTMLProps<any> {
+    component?: ReactType;
 }
 
-declare class TransitionGroup extends Component<TransitionGroup.TransitionGroupProps> {}
+declare class TransitionGroup extends Component<TransitionGroupProps> {}
 
-export = TransitionGroup;
+export default TransitionGroup;

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

@@ -1,29 +1,15 @@
-// Type definitions for react-transition-group 1.1
+// Type definitions for react-transition-group 2.0
 // 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.3
 
-import { HTMLAttributes, ReactElement, ReactType } from "react";
+export { default as CSSTransition, CSSTransitionProps, CSSTransitionClassNames } from "react-transition-group/CSSTransition";
+export { default as Transition, TransitionProps } from "react-transition-group/Transition";
+export { default as TransitionGroup, TransitionGroupProps } from "react-transition-group/TransitionGroup";
 
-export interface HTMLTransitionGroupProps<T> extends HTMLAttributes<T> {
-    component?: ReactType;
-    childFactory?(child: ReactElement<any>): ReactElement<any>;
+export interface TransitionActions {
+    appear?: boolean;
+    enter?: boolean;
+    exit?: boolean;
 }
-
-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

@@ -1,73 +1,81 @@
 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 implements TransitionGroupChildLifecycle {
-    componentWillAppear(callback: () => void) {
-        callback();
-    }
-
-    componentDidAppear() {}
-
-    componentWillEnter(callback: () => void) {
-        callback();
-    }
-
-    componentDidEnter() {}
-
-    componentWillLeave(callback: () => void) {
-        callback();
-    }
-
-    componentDidLeave() {}
-
-    render() {
-        return (<li>{ "Test" }</li>);
-    }
-}
+import CSSTransition from "react-transition-group/CSSTransition";
+import Transition from "react-transition-group/Transition";
+import TransitionGroup from "react-transition-group/TransitionGroup";
+import { CSSTransitionProps, TransitionProps, TransitionGroupProps } from "react-transition-group";
 
 const Test: React.StatelessComponent = () => {
+    function handleEnter(node: HTMLElement, isAppearing: boolean) {}
+
+    function handleExit(node: HTMLElement) {}
+
+    function handleEndListener(node: HTMLElement, done: () => void) {
+        node.addEventListener("transitionend", done, false);
+    }
+
     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 }
+        <TransitionGroup
+            component="ul"
+            className="animated-list"
+        >
+            <Transition
+                in
+                mountOnEnter
+                unmountOnExit
+                appear
+                enter
+                exit
+                timeout={ 500 }
+                addEndListener={ handleEndListener }
+                onEnter={ handleEnter }
+                onEntering={ handleEnter }
+                onEntered={ handleEnter }
+                onExit={ handleExit }
+                onExiting={ handleExit }
+                onExited={ handleExit }
             >
                 <div>{ "test" }</div>
-            </CSSTransitionGroup>
+            </Transition>
 
-            <CSSTransitionGroup
-                transitionName={ {
-                    enter: "enter",
-                    enterActive: "enterActive",
-                    leave: "leave",
-                    leaveActive: "leaveActive",
-                    appear: "appear",
-                    appearActive: "appearActive"
+            <Transition
+                timeout={ { enter : 500, exit : 500 } }
+            >
+                <div>{ "test" }</div>
+            </Transition>
+
+            <CSSTransition
+                in
+                mountOnEnter
+                unmountOnExit
+                appear
+                enter
+                exit
+                timeout={ 500 }
+                addEndListener={ handleEndListener }
+                onEnter={ handleEnter }
+                onEntering={ handleEnter }
+                onEntered={ handleEnter }
+                onExit={ handleExit }
+                onExiting={ handleExit }
+                onExited={ handleExit }
+                classNames="fade"
+            >
+                <div>{ "test" }</div>
+            </CSSTransition>
+
+            <CSSTransition
+                timeout={ { enter : 500, exit : 500 } }
+                classNames={ {
+                    appear: "fade-appear",
+                    appearActive: "fade-active-appear",
+                    enter: "fade-enter",
+                    enterActive: "fade-active-enter",
+                    exit: "fade-exit",
+                    exitActive: "fade-active-exit"
                 } }
             >
                 <div>{ "test" }</div>
-            </CSSTransitionGroup>
-
-            <CSSTransitionGroup
-                transitionName={ {
-                    enter: "enter",
-                    leave: "leave",
-                    appear: "appear"
-                } }
-            >
-                <div>{ "test" }</div>
-            </CSSTransitionGroup>
-        </div>
+            </CSSTransition>
+        </TransitionGroup>
     );
 };

types/react-transition-group/tsconfig.json

@@ -1,9 +1,12 @@
 {
     "compilerOptions": {
+        "target": "es5",
         "module": "commonjs",
+        "moduleResolution": "node",
         "lib": [
-            "es6"
+            "es6", "dom"
         ],
+        "strict": true,
         "noImplicitAny": true,
         "noImplicitThis": true,
         "strictNullChecks": true,
@@ -18,7 +21,8 @@
     },
     "files": [
         "index.d.ts",
-        "CSSTransitionGroup.d.ts",
+        "CSSTransition.d.ts",
+        "Transition.d.ts",
         "TransitionGroup.d.ts",
         "react-transition-group-tests.tsx"
     ]

types/react-transition-group/v1/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> {}
+
+export = TransitionGroup;

types/react-transition-group/v1/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.3
+
+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/v1/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 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 = () => {
+    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/v1/tsconfig.json

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

types/react-transition-group/v1/tslint.json

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