diff --git a/types/react-transition-group/CSSTransition.d.ts b/types/react-transition-group/CSSTransition.d.ts index 2ae620aded..3b39ffe5e3 100644 --- a/types/react-transition-group/CSSTransition.d.ts +++ b/types/react-transition-group/CSSTransition.d.ts @@ -13,7 +13,7 @@ export interface CSSTransitionClassNames { exitDone?: string; } -export interface CSSTransitionProps extends TransitionProps { +export type CSSTransitionProps = TransitionProps & { /** * 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. @@ -38,7 +38,7 @@ export interface CSSTransitionProps extends TransitionProps { * ``` */ classNames?: string | CSSTransitionClassNames; -} +}; declare class CSSTransition extends Component {} diff --git a/types/react-transition-group/Transition.d.ts b/types/react-transition-group/Transition.d.ts index 7b14a368f4..90b554c226 100644 --- a/types/react-transition-group/Transition.d.ts +++ b/types/react-transition-group/Transition.d.ts @@ -31,14 +31,7 @@ export interface TransitionActions { exit?: boolean; } -export type TransitionStatus = - typeof ENTERING | - typeof ENTERED | - typeof EXITING | - typeof EXITED | - typeof UNMOUNTED; -export type TransitionChildren = ReactNode | ((status: TransitionStatus) => ReactNode); -export interface TransitionProps extends TransitionActions { +interface BaseTransitionProps { /** * Show the component; triggers the enter or exit states */ @@ -60,34 +53,6 @@ export interface TransitionProps extends TransitionActions { */ unmountOnExit?: boolean; - /** - * The duration of the transition, in milliseconds. Required unless addEndListener is provided. - * - * You may specify a single timeout for all transitions: - * ```js - * timeout={500} - * ``` - * or individually: - * ```js - * timeout={{ - * appear: 500, - * enter: 300, - * exit: 500, - * }} - * ``` - * - appear defaults to the value of `enter` - * - enter defaults to `0` - * - exit defaults to `0` - */ - timeout: number | { appear?: number, enter?: number, exit?: number }; - - /** - * Add a custom transition end trigger. Called with the transitioning DOM - * node and a done callback. Allows for more fine grained transition end - * logic. Note: Timeouts are still used as a fallback if provided. - */ - addEndListener?: EndHandler; - /** * Callback fired before the "entering" status is applied. An extra * parameter `isAppearing` is supplied to indicate if the enter stage is @@ -141,6 +106,75 @@ export interface TransitionProps extends TransitionActions { [ prop: string ]: any; } +export type TransitionStatus = + typeof ENTERING | + typeof ENTERED | + typeof EXITING | + typeof EXITED | + typeof UNMOUNTED; +export type TransitionChildren = ReactNode | ((status: TransitionStatus) => ReactNode); + +interface TimeoutProps extends BaseTransitionProps { + /** + * The duration of the transition, in milliseconds. Required unless addEndListener is provided. + * + * You may specify a single timeout for all transitions: + * ```js + * timeout={500} + * ``` + * or individually: + * ```js + * timeout={{ + * appear: 500, + * enter: 300, + * exit: 500, + * }} + * ``` + * - appear defaults to the value of `enter` + * - enter defaults to `0` + * - exit defaults to `0` + */ + timeout: number | { appear?: number, enter?: number, exit?: number }; + + /** + * Add a custom transition end trigger. Called with the transitioning DOM + * node and a done callback. Allows for more fine grained transition end + * logic. Note: Timeouts are still used as a fallback if provided. + */ + addEndListener?: EndHandler; +} + +interface EndListenerProps extends BaseTransitionProps { + /** + * The duration of the transition, in milliseconds. Required unless addEndListener is provided. + * + * You may specify a single timeout for all transitions: + * ```js + * timeout={500} + * ``` + * or individually: + * ```js + * timeout={{ + * appear: 500, + * enter: 300, + * exit: 500, + * }} + * ``` + * - appear defaults to the value of `enter` + * - enter defaults to `0` + * - exit defaults to `0` + */ + timeout?: number | { appear?: number, enter?: number, exit?: number }; + /** + * Add a custom transition end trigger. Called with the transitioning DOM + * node and a done callback. Allows for more fine grained transition end + * logic. Note: Timeouts are still used as a fallback if provided. + */ + addEndListener: EndHandler; +} + +export type TransitionProps = TimeoutProps | EndListenerProps; + /** * The Transition component lets you describe a transition from one component * state to another _over time_ with a simple declarative API. Most commonly diff --git a/types/react-transition-group/react-transition-group-tests.tsx b/types/react-transition-group/react-transition-group-tests.tsx index f0ea261fa0..a80142c679 100644 --- a/types/react-transition-group/react-transition-group-tests.tsx +++ b/types/react-transition-group/react-transition-group-tests.tsx @@ -169,6 +169,8 @@ const Test: React.StatelessComponent = () => {
{ "test" }
+ {}}/> +