From faa13ca5cc11ebd096c39ef5848fcaf7a54c3ecb Mon Sep 17 00:00:00 2001 From: Karol Janyst Date: Thu, 13 Jul 2017 09:17:06 +0900 Subject: [PATCH] Fix types for transition components --- .../react-transition-group/CSSTransition.d.ts | 20 ++++- types/react-transition-group/Transition.d.ts | 53 ++++++++++++- .../TransitionGroup.d.ts | 74 ++++++++++++++++++- types/react-transition-group/index.d.ts | 16 ++-- .../react-transition-group-tests.tsx | 10 +-- 5 files changed, 152 insertions(+), 21 deletions(-) diff --git a/types/react-transition-group/CSSTransition.d.ts b/types/react-transition-group/CSSTransition.d.ts index 49d9bde183..67b869edf6 100644 --- a/types/react-transition-group/CSSTransition.d.ts +++ b/types/react-transition-group/CSSTransition.d.ts @@ -1,5 +1,4 @@ import { Component } from "react"; -import { TransitionActions } from "react-transition-group"; import { TransitionProps } from "react-transition-group/Transition"; export interface CSSTransitionClassNames { @@ -11,6 +10,25 @@ export interface CSSTransitionClassNames { 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; } diff --git a/types/react-transition-group/Transition.d.ts b/types/react-transition-group/Transition.d.ts index 29387be19c..24f0265ee2 100644 --- a/types/react-transition-group/Transition.d.ts +++ b/types/react-transition-group/Transition.d.ts @@ -1,11 +1,16 @@ -import { Component, HTMLProps } from "react"; -import { TransitionActions } from "react-transition-group"; +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 TransitionProps extends TransitionActions, HTMLProps { +export interface TransitionActions { + appear?: boolean; + enter?: boolean; + exit?: boolean; +} + +export interface TransitionProps extends TransitionActions { in?: boolean; mountOnEnter?: boolean; unmountOnExit?: boolean; @@ -17,8 +22,50 @@ export interface TransitionProps extends TransitionActions, HTMLProps { 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 fb169c2d8f..3f04332bc8 100644 --- a/types/react-transition-group/TransitionGroup.d.ts +++ b/types/react-transition-group/TransitionGroup.d.ts @@ -1,10 +1,76 @@ -import { Component, ReactType, HTMLProps } from "react"; -import { TransitionActions } from "react-transition-group"; +import { Component, ReactType, HTMLProps, ReactElement } from "react"; +import { TransitionActions, TransitionProps } from "react-transition-group/Transition"; -export interface TransitionGroupProps extends TransitionActions, HTMLProps { - component?: ReactType; +export interface IntrinsicTransitionGroupProps extends TransitionActions { + component?: T; } +export interface ComponentTransitionGroupProps extends TransitionActions { + component: T; +} + +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 62136d8ea4..35c130595c 100644 --- a/types/react-transition-group/index.d.ts +++ b/types/react-transition-group/index.d.ts @@ -4,12 +4,12 @@ // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.3 -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"; +import CSSTransition from "react-transition-group/CSSTransition"; +import Transition from "react-transition-group/Transition"; +import TransitionGroup from "react-transition-group/TransitionGroup"; -export interface TransitionActions { - appear?: boolean; - enter?: boolean; - exit?: boolean; -} +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 53d3e9b22e..333ab59810 100644 --- a/types/react-transition-group/react-transition-group-tests.tsx +++ b/types/react-transition-group/react-transition-group-tests.tsx @@ -2,7 +2,7 @@ import * as React from "react"; 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"; +import Components = require("react-transition-group"); const Test: React.StatelessComponent = () => { function handleEnter(node: HTMLElement, isAppearing: boolean) {} @@ -18,7 +18,7 @@ const Test: React.StatelessComponent = () => { component="ul" className="animated-list" > - { onExited={ handleExit } >
{ "test" }
- + {
{ "test" }
 - { classNames="fade" >
{ "test" }
- +