From 82cfe5d077435b39ab87f86eab85a803624f3ad5 Mon Sep 17 00:00:00 2001
From: Sam Burba <github@samburba.com>
Date: Mon, 24 Feb 2020 19:08:31 -0500
Subject: [PATCH] =?UTF-8?q?[react-transition-group]=20Make=20timeout=20opt?=
 =?UTF-8?q?ional=20if=20addEndListen=E2=80=A6=20(#42596)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The timeout parameter is optional if the addEventListener
parameter is specified
---
 .../react-transition-group/CSSTransition.d.ts |   4 +-
 types/react-transition-group/Transition.d.ts  | 106 ++++++++++++------
 .../react-transition-group-tests.tsx          |   2 +
 3 files changed, 74 insertions(+), 38 deletions(-)

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<CSSTransitionProps> {}
 
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 = () => {
                     <div>{ "test" }</div>
                 </Transition>
 
+                <Transition addEndListener={() => {}}/>
+
                 <CSSTransition
                     in
                     mountOnEnter