[react-transition-group] Make timeout optional if addEndListen… (#42596)

The timeout parameter is optional if the addEventListener
parameter is specified

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> {}
 

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

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