Add props to Alert for configuring animation timeout

Aaron Panchal · Aaron Panchal · commit 462f6cd0d56e · 2016-09-30T11:05:32.000-07:00
- Use value of zero to not animate
diff --git a/src/Alert.js b/src/Alert.js
@@ -11,13 +11,19 @@ const propTypes = {
   color: PropTypes.string,
   isOpen: PropTypes.bool,
   toggle: PropTypes.func,
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  transitionAppearTimeout: PropTypes.number,
+  transitionEnterTimeout: PropTypes.number,
+  transitionLeaveTimeout: PropTypes.number
 };
 
 const defaultProps = {
   color: 'success',
   isOpen: true,
-  tag: 'div'
+  tag: 'div',
+  transitionAppearTimeout: 150,
+  transitionEnterTimeout: 150,
+  transitionLeaveTimeout: 150
 };
 
 const Alert = (props) => {
@@ -28,6 +34,9 @@ const Alert = (props) => {
     isOpen,
     toggle,
     children,
+    transitionAppearTimeout,
+    transitionEnterTimeout,
+    transitionLeaveTimeout,
     ...attributes
   } = props;
 
@@ -53,11 +62,20 @@ const Alert = (props) => {
     <ReactCSSTransitionGroup
       component={FirstChild}
       transitionName={{
+        appear: 'fade',
+        appearActive: 'in',
+        enter: 'fade',
+        enterActive: 'in',
         leave: 'fade',
         leaveActive: 'out'
       }}
-      transitionEnter={false}
-      transitionLeaveTimeout={300}>
+      transitionAppear={transitionAppearTimeout > 0}
+      transitionAppearTimeout={transitionAppearTimeout}
+      transitionEnter={transitionEnterTimeout > 0}
+      transitionEnterTimeout={transitionEnterTimeout}
+      transitionLeave={transitionLeaveTimeout > 0}
+      transitionLeaveTimeout={transitionLeaveTimeout}
+      >
       {isOpen ? alert : null}
     </ReactCSSTransitionGroup>
   );
diff --git a/src/__tests__/Alert.spec.js b/src/__tests__/Alert.spec.js
@@ -9,6 +9,47 @@ describe('Alert', () => {
     expect(alert.text()).toBe('Yo!');
   });
 
+  it('should transition on appear, enter, and leave using fade', () => {
+    const alert = shallow(<Alert>Yo!</Alert>);
+    expect(alert.prop('transitionName')).toEqual({
+      appear: 'fade',
+      appearActive: 'in',
+      enter: 'fade',
+      enterActive: 'in',
+      leave: 'fade',
+      leaveActive: 'out'
+    });
+  });
+
+  it('should have default transitionTimeouts', () => {
+    const alert = shallow(<Alert>Yo!</Alert>);
+
+    expect(alert.prop('transitionAppearTimeout')).toBe(150);
+    expect(alert.prop('transitionAppear')).toBe(true);
+    expect(alert.prop('transitionEnterTimeout')).toBe(150);
+    expect(alert.prop('transitionEnter')).toBe(true);
+    expect(alert.prop('transitionLeaveTimeout')).toBe(150);
+    expect(alert.prop('transitionLeave')).toBe(true);
+  });
+
+  it('should have support configurable transitionTimeouts', () => {
+    const alert = shallow(
+      <Alert
+        transitionAppearTimeout={0}
+        transitionEnterTimeout={0}
+        transitionLeaveTimeout={0}>
+        Yo!
+      </Alert>
+    );
+
+    expect(alert.prop('transitionAppearTimeout')).toBe(0);
+    expect(alert.prop('transitionAppear')).toBe(false);
+    expect(alert.prop('transitionEnterTimeout')).toBe(0);
+    expect(alert.prop('transitionEnter')).toBe(false);
+    expect(alert.prop('transitionLeaveTimeout')).toBe(0);
+    expect(alert.prop('transitionLeave')).toBe(false);
+  });
+
   it('should have "success" as default color', () => {
     const alert = shallow(<Alert>Yo!</Alert>).find('div');
     expect(alert.hasClass('alert-success')).toBe(true);
