feat(alert): add ability to disable fade (reactstrap#1078)

Closes reactstrap#824

Author: electriccode

docs/lib/Components/AlertsPage.js

@@ -20,6 +20,9 @@ const AlertDismissExampleSource = require('!!raw!../examples/AlertDismiss');
 import AlertUncontrolledDismissExample from '../examples/AlertUncontrolledDismiss';
 const AlertUncontrolledDismissExampleSource = require('!!raw!../examples/AlertUncontrolledDismiss');
 
+import {AlertFadelessExample, UncontrolledAlertFadelessExample} from '../examples/AlertFadeless';
+const AlertFadelessExampleSource = require('!!raw!../examples/AlertFadeless');
+
 export default class AlertsPage extends React.Component {
   render() {
     return (
@@ -93,6 +96,20 @@ export default class AlertsPage extends React.Component {
             {AlertUncontrolledDismissExampleSource}
           </PrismCode>
         </pre>
+
+        <SectionTitle>Alerts without fade</SectionTitle>
+        <p>
+          Fade can be disbaled using <code>fade=false</code>.
+        </p>
+        <div className="docs-example">
+          <AlertFadelessExample />
+          <UncontrolledAlertFadelessExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {AlertFadelessExampleSource}
+          </PrismCode>
+        </pre>
       </div>
     );
   }

docs/lib/examples/AlertFadeless.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { UncontrolledAlert } from 'reactstrap';
+import Alert from '../../../src/Alert';
+
+export class AlertFadelessExample extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      visible: true
+    };
+
+    this.onDismiss = this.onDismiss.bind(this);
+  }
+
+  onDismiss() {
+    this.setState({ visible: false });
+  }
+
+  render() {
+    return (
+      <div>
+        <Alert color="primary" isOpen={this.state.visible} toggle={this.onDismiss} fade={false}>
+          I am a primary alert and I can be dismissed without animating!
+        </Alert>
+      </div>
+    );
+  }
+}
+
+export function UncontrolledAlertFadelessExample() {
+  return (
+    <div>
+      <UncontrolledAlert color="info" fade={false}>
+        I am an alert and I can be dismissed without animating!
+      </UncontrolledAlert>
+    </div>
+  );
+}

src/Alert.js

@@ -11,6 +11,7 @@ const propTypes = {
   closeAriaLabel: PropTypes.string,
   cssModule: PropTypes.object,
   color: PropTypes.string,
+  fade: PropTypes.bool,
   isOpen: PropTypes.bool,
   toggle: PropTypes.func,
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
@@ -22,6 +23,7 @@ const defaultProps = {
   isOpen: true,
   tag: 'div',
   closeAriaLabel: 'Close',
+  fade: true,
   transition: {
     ...Fade.defaultProps,
     unmountOnExit: true,
@@ -40,6 +42,7 @@ function Alert(props) {
     toggle,
     children,
     transition,
+    fade,
     ...attributes
   } = props;
 
@@ -52,8 +55,15 @@ function Alert(props) {
 
   const closeClasses = mapToCssModules(classNames('close', closeClassName), cssModule);
 
+  const alertTransition = {
+    ...Fade.defaultProps,
+    ...transition,
+    baseClass: fade ? transition.baseClass : '',
+    timeout: fade ? transition.timeout : 0,
+  };
+
   return (
-    <Fade {...attributes} {...transition} tag={Tag} className={classes} in={isOpen} role="alert">
+    <Fade {...attributes} {...alertTransition} tag={Tag} className={classes} in={isOpen} role="alert">
       {toggle ?
         <button type="button" className={closeClasses} aria-label={closeAriaLabel} onClick={toggle}>
           <span aria-hidden="true">&times;</span>

src/UncontrolledAlert.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import Alert from './Alert';
 
-export default class UncontrolledAlert extends Component {
+class UncontrolledAlert extends Component {
   constructor(props) {
     super(props);
 
@@ -17,3 +17,5 @@ export default class UncontrolledAlert extends Component {
     return <Alert isOpen={this.state.isOpen} toggle={this.toggle} {...this.props} />;
   }
 }
+
+export default UncontrolledAlert;