diff --git a/types/react-transition-group/CSSTransition.d.ts b/types/react-transition-group/CSSTransition.d.ts new file mode 100644 index 0000000000..67b869edf6 --- /dev/null +++ b/types/react-transition-group/CSSTransition.d.ts @@ -0,0 +1,38 @@ +import { Component } from "react"; +import { TransitionProps } from "react-transition-group/Transition"; + +export interface CSSTransitionClassNames { + appear?: string; + appearActive?: string; + enter?: string; + enterActive?: string; + exit?: string; + exitActive?: string; +} + +/** + * The animation classNames applied to the component as it enters or exits. + * A single name can be provided and it will be suffixed for each stage: e.g. + * + * `classNames="fade"` applies `fade-enter`, `fade-enter-active`, + * `fade-exit`, `fade-exit-active`, `fade-appear`, and `fade-appear-active`. + * Each individual classNames can also be specified independently like: + * + * ```js + * classNames={{ + * appear: 'my-appear', + * appearActive: 'my-active-appear', + * enter: 'my-enter', + * enterActive: 'my-active-enter', + * exit: 'my-exit', + * exitActive: 'my-active-exit', + * }} + * ``` + */ +export interface CSSTransitionProps extends TransitionProps { + classNames: string | CSSTransitionClassNames; +} + +declare class CSSTransition extends Component {} + +export default CSSTransition; diff --git a/types/react-transition-group/Transition.d.ts b/types/react-transition-group/Transition.d.ts new file mode 100644 index 0000000000..24f0265ee2 --- /dev/null +++ b/types/react-transition-group/Transition.d.ts @@ -0,0 +1,71 @@ +import { Component } from "react"; + +export type EndHandler = (node: HTMLElement, done: () => void) => void; +export type EnterHandler = (node: HTMLElement, isAppearing: boolean) => void; +export type ExitHandler = (node: HTMLElement) => void; + +export interface TransitionActions { + appear?: boolean; + enter?: boolean; + exit?: boolean; +} + +export interface TransitionProps extends TransitionActions { + 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; + [prop: string]: any; +} + +/** + * The Transition component lets you describe a transition from one component + * state to another _over time_ with a simple declarative API. Most commonly + * It's used to animate the mounting and unmounting of Component, but can also + * be used to describe in-place transition states as well. + * + * By default the `Transition` component does not alter the behavior of the + * component it renders, it only tracks "enter" and "exit" states for the components. + * It's up to you to give meaning and effect to those states. For example we can + * add styles to a component when it enters or exits: + * + * ```jsx + * import Transition from 'react-transition-group/Transition'; + * + * const duration = 300; + * + * const defaultStyle = { + * transition: `opacity ${duration}ms ease-in-out`, + * opactity: 0, + * } + * + * const transitionStyles = { + * entering: { opacity: 1 }, + * entered: { opacity: 1 }, + * }; + * + * const Fade = ({ in: inProp }) => ( + * + * {(state) => ( + *
+ * I'm A fade Transition! + *
+ * )} + *
+ * ); + * ``` + * + */ +declare class Transition extends Component {} + +export default Transition; diff --git a/types/react-transition-group/TransitionGroup.d.ts b/types/react-transition-group/TransitionGroup.d.ts index 44d9100889..3f04332bc8 100644 --- a/types/react-transition-group/TransitionGroup.d.ts +++ b/types/react-transition-group/TransitionGroup.d.ts @@ -1,19 +1,76 @@ -import { Component, HTMLAttributes, ReactElement, ReactType } from "react"; -import { HTMLTransitionGroupProps } from "./index"; +import { Component, ReactType, HTMLProps, ReactElement } from "react"; +import { TransitionActions, TransitionProps } from "react-transition-group/Transition"; -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; +export interface IntrinsicTransitionGroupProps extends TransitionActions { + component?: T; } -declare class TransitionGroup extends Component {} +export interface ComponentTransitionGroupProps extends TransitionActions { + component: T; +} -export = TransitionGroup; +export type TransitionGroupProps = + (IntrinsicTransitionGroupProps & JSX.IntrinsicElements[T]) | (ComponentTransitionGroupProps) & { + children?: ReactElement | Array>; + }; + +/** + * The `` component manages a set of `` components + * in a list. Like with the `` component, ``, is a + * state machine for managing the mounting and unmounting of components over + * time. + * + * Consider the example below using the `Fade` CSS transition from before. + * As items are removed or added to the TodoList the `in` prop is toggled + * automatically by the ``. You can use _any_ `` + * component in a ``, not just css. + * + * ```jsx + * import TransitionGroup from 'react-transition-group/TransitionGroup'; + * + * class TodoList extends React.Component { + * constructor(props) { + * super(props) + * this.state = {items: ['hello', 'world', 'click', 'me']} + * } + * handleAdd() { + * const newItems = this.state.items.concat([ + * prompt('Enter some text') + * ]); + * this.setState({ items: newItems }); + * } + * handleRemove(i) { + * let newItems = this.state.items.slice(); + * newItems.splice(i, 1); + * this.setState({items: newItems}); + * } + * render() { + * return ( + *
+ * + * + * {this.state.items.map((item, i) => ( + * + *
+ * {item}{' '} + * + *
+ *
+ * ))} + *
+ *
+ * ); + * } + * } + * ``` + * + * Note that `` does not define any animation behavior! + * Exactly _how_ a list item animates is up to the individual `` + * components. This means you can mix and match animations across different + * list items. + */ +declare class TransitionGroup extends Component {} + +export default TransitionGroup; diff --git a/types/react-transition-group/index.d.ts b/types/react-transition-group/index.d.ts index 3c82827b46..35c130595c 100644 --- a/types/react-transition-group/index.d.ts +++ b/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 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.3 -import { HTMLAttributes, ReactElement, ReactType } from "react"; +import CSSTransition from "react-transition-group/CSSTransition"; +import Transition from "react-transition-group/Transition"; +import TransitionGroup from "react-transition-group/TransitionGroup"; -export interface HTMLTransitionGroupProps extends HTMLAttributes { - component?: ReactType; - childFactory?(child: ReactElement): ReactElement; -} - -import * as TransitionGroup from "./TransitionGroup"; -export { - TransitionGroupProps, - TransitionGroupChildLifecycle -} from "./TransitionGroup"; - -import * as CSSTransitionGroup from "./CSSTransitionGroup"; -export { - CSSTransitionGroupProps, - CSSTransitionGroupTransitionName -} from "./CSSTransitionGroup"; - -export { - TransitionGroup, - CSSTransitionGroup +export = { + CSSTransition, + Transition, + TransitionGroup }; diff --git a/types/react-transition-group/react-transition-group-tests.tsx b/types/react-transition-group/react-transition-group-tests.tsx index 346fe9989a..333ab59810 100644 --- a/types/react-transition-group/react-transition-group-tests.tsx +++ b/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 (
  • { "Test" }
  • ); - } -} +import CSSTransition from "react-transition-group/CSSTransition"; +import Transition from "react-transition-group/Transition"; +import TransitionGroup from "react-transition-group/TransitionGroup"; +import Components = require("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 ( -
    - - - - - +
    { "test" }
    -
    + - +
    { "test" }
    + + + +
    { "test" }
    +
    + +
    { "test" }
    -
    - - -
    { "test" }
    -
    -
    + +
    ); }; diff --git a/types/react-transition-group/tsconfig.json b/types/react-transition-group/tsconfig.json index 1fbbc5df49..305822cd04 100644 --- a/types/react-transition-group/tsconfig.json +++ b/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" ] diff --git a/types/react-transition-group/CSSTransitionGroup.d.ts b/types/react-transition-group/v1/CSSTransitionGroup.d.ts similarity index 100% rename from types/react-transition-group/CSSTransitionGroup.d.ts rename to types/react-transition-group/v1/CSSTransitionGroup.d.ts diff --git a/types/react-transition-group/v1/TransitionGroup.d.ts b/types/react-transition-group/v1/TransitionGroup.d.ts new file mode 100644 index 0000000000..44d9100889 --- /dev/null +++ b/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; +} + +declare class TransitionGroup extends Component {} + +export = TransitionGroup; diff --git a/types/react-transition-group/v1/index.d.ts b/types/react-transition-group/v1/index.d.ts new file mode 100644 index 0000000000..3c82827b46 --- /dev/null +++ b/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 +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.3 + +import { HTMLAttributes, ReactElement, ReactType } from "react"; + +export interface HTMLTransitionGroupProps extends HTMLAttributes { + component?: ReactType; + childFactory?(child: ReactElement): ReactElement; +} + +import * as TransitionGroup from "./TransitionGroup"; +export { + TransitionGroupProps, + TransitionGroupChildLifecycle +} from "./TransitionGroup"; + +import * as CSSTransitionGroup from "./CSSTransitionGroup"; +export { + CSSTransitionGroupProps, + CSSTransitionGroupTransitionName +} from "./CSSTransitionGroup"; + +export { + TransitionGroup, + CSSTransitionGroup +}; diff --git a/types/react-transition-group/v1/react-transition-group-tests.tsx b/types/react-transition-group/v1/react-transition-group-tests.tsx new file mode 100644 index 0000000000..346fe9989a --- /dev/null +++ b/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 (
  • { "Test" }
  • ); + } +} + +const Test: React.StatelessComponent = () => { + return ( +
    + + + + + +
    { "test" }
    +
    + + +
    { "test" }
    +
    + + +
    { "test" }
    +
    +
    + ); +}; diff --git a/types/react-transition-group/v1/tsconfig.json b/types/react-transition-group/v1/tsconfig.json new file mode 100644 index 0000000000..b7b4bfd758 --- /dev/null +++ b/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" + ] +} diff --git a/types/react-transition-group/v1/tslint.json b/types/react-transition-group/v1/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/react-transition-group/v1/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }