Allow configuring appear v. enter v. leave timeouts separately

Anne Johnson · Anne Johnson · commit ab93b7dd1ec2 · 2017-03-04T19:14:50.000-05:00
diff --git a/docs/lib/Components/ModalsPage.js b/docs/lib/Components/ModalsPage.js
@@ -68,10 +68,20 @@ export default class ModalsPage extends React.Component {
   contentClassName: PropTypes.string,
   // boolean to control whether the fade transition occurs (default: true)
   fade: PropTypes.bool,
-  // default: 300
+  // modalTransitionTimeout - controls appear, enter, and leave (default: 300)
+  // If you need different values for appear v. enter v. leave, use the more
+  // specific props like modalTransitionAppearTimeout.
   modalTransitionTimeout: PropTypes.number,
-  // default: 150
+  modalTransitionAppearTimeout: PropTypes.number,
+  modalTransitionEnterTimeout: PropTypes.number,
+  modalTransitionLeaveTimeout: PropTypes.number,
+  // backdropTransitionTimeout - controls appear, enter, and leave (default: 150)
+  // If you need different values for appear v. enter v. leave, use the more
+  // specific props like backdropTransitionAppearTimeout.
   backdropTransitionTimeout: PropTypes.number
+  backdropTransitionAppearTimeout: PropTypes.number,
+  backdropTransitionEnterTimeout: PropTypes.number,
+  backdropTransitionLeaveTimeout: PropTypes.number,
 }`}
           </PrismCode>
         </pre>
diff --git a/src/Modal.js b/src/Modal.js
@@ -33,8 +33,14 @@ const propTypes = {
     PropTypes.number,
     PropTypes.string,
   ]),
-  modalTransitionTimeout: PropTypes.number,
   backdropTransitionTimeout: PropTypes.number,
+  backdropTransitionAppearTimeout: PropTypes.number,
+  backdropTransitionEnterTimeout: PropTypes.number,
+  backdropTransitionLeaveTimeout: PropTypes.number,
+  modalTransitionTimeout: PropTypes.number,
+  modalTransitionAppearTimeout: PropTypes.number,
+  modalTransitionEnterTimeout: PropTypes.number,
+  modalTransitionLeaveTimeout: PropTypes.number,
 };
 
 const defaultProps = {
@@ -231,9 +237,21 @@ class Modal extends React.Component {
               key="modal-dialog"
               onEnter={this.onEnter}
               onLeave={this.onExit}
-              transitionAppearTimeout={modalTransitionTimeout}
-              transitionEnterTimeout={modalTransitionTimeout}
-              transitionLeaveTimeout={modalTransitionTimeout}
+              transitionAppearTimeout={
+                typeof this.props.modalTransitionAppearTimeout === 'number'
+                  ? this.props.modalTransitionAppearTimeout
+                  : modalTransitionTimeout
+              }
+              transitionEnterTimeout={
+                typeof this.props.modalTransitionEnterTimeout === 'number'
+                  ? this.props.modalTransitionEnterTimeout
+                  : modalTransitionTimeout
+              }
+              transitionLeaveTimeout={
+                typeof this.props.modalTransitionLeaveTimeout === 'number'
+                  ? this.props.modalTransitionLeaveTimeout
+                  : modalTransitionTimeout
+              }
               className={mapToCssModules(classNames('modal', modalClassName), cssModule)}
               {...modalAttributes}
             >
@@ -243,9 +261,21 @@ class Modal extends React.Component {
           {isOpen && backdrop && (
             <Fade
               key="modal-backdrop"
-              transitionAppearTimeout={backdropTransitionTimeout}
-              transitionEnterTimeout={backdropTransitionTimeout}
-              transitionLeaveTimeout={backdropTransitionTimeout}
+              transitionAppearTimeout={
+                typeof this.props.backdropTransitionAppearTimeout === 'number'
+                  ? this.props.backdropTransitionAppearTimeout
+                  : backdropTransitionTimeout
+              }
+              transitionEnterTimeout={
+                typeof this.props.backdropTransitionEnterTimeout === 'number'
+                  ? this.props.backdropTransitionEnterTimeout
+                  : backdropTransitionTimeout
+              }
+              transitionLeaveTimeout={
+                typeof this.props.backdropTransitionLeaveTimeout === 'number'
+                  ? this.props.backdropTransitionLeaveTimeout
+                  : backdropTransitionTimeout
+              }
               className={mapToCssModules(classNames('modal-backdrop', backdropClassName), cssModule)}
             />
           )}
