reactstrap · TheSharpieOne · Sep 16, 2017 · Aug 29, 2017 · Aug 29, 2017 · Aug 29, 2017
diff --git a/README.md b/README.md
@@ -28,7 +28,7 @@ Install reactstrap and Bootstrap from NPM. Reactstrap does not include Bootstrap
 
 ```
 npm install --save [email protected]
-npm install --save reactstrap react-transition-group@^1.1.2 react@^15.3.0 react-dom@^15.3.0
+npm install --save reactstrap react@^15.3.0 react-dom@^15.3.0
 ```
 
 Import Bootstrap CSS in the ```src/index.js``` file:
@@ -55,7 +55,6 @@ https://cdnjs.cloudflare.com/ajax/libs/reactstrap/4.8.0/reactstrap.min.js
 
 > Note: When using the external CDN library, be sure to include the required dependencies as necessary **prior** to the Reactstrap library:
 >  * [React](https://cdnjs.com/libraries/react)
->  * [ReactTransitionGroup](https://unpkg.com/react-transition-group/dist/react-transition-group.min.js)
 
 
 ## About the Project

diff --git a/docs/lib/Components/AlertsPage.js b/docs/lib/Components/AlertsPage.js
@@ -39,11 +39,9 @@ export default class AlertsPage extends React.Component {
   isOpen: PropTypes.bool,  // default: true
   toggle: PropTypes.func,
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-
-  // Set any of the timeouts to 0 to disable animation
-  transitionAppearTimeout: PropTypes.number,
-  transitionEnterTimeout: PropTypes.number,
-  transitionLeaveTimeout: PropTypes.number
+  // Controls the transition of the alert fading in and out
+  // See [Fade](/components/fade/) for more details
+  transition: PropTypes.shape(Fade.propTypes),
 }`}
           </PrismCode>
         </pre>

diff --git a/docs/lib/Components/CarouselPage.js b/docs/lib/Components/CarouselPage.js
@@ -25,17 +25,30 @@ export default class CarouselPage extends React.Component {
         <pre>
           <PrismCode className="language-jsx">
 {`Carousel.propTypes = {
-  items: PropTypes.array.isRequired,
-  cssModule: PropTypes.object,
+  // the current active slide of the carousel
   activeIndex: PropTypes.number,
-  cycle: PropTypes.bool,
-  wrap: PropTypes.bool,
+  // a function which should advance the carousel to the next slide (via activeIndex)
+  next: PropTypes.func.isRequired,
+  // a function which should advance the carousel to the previous slide (via activeIndex)
+  previous: PropTypes.func.isRequired,
+  // controls if the left and right arrow keys should control the carousel
+  keyboard: PropTypes.bool,
+  // controls if the carousel should not automatically cycle (default: false)
+  paused: PropTypes.bool,
+  // the interval at which the carousel automatically cycles (default: 5000) 
   interval: PropTypes.oneOfType([
     PropTypes.number,
-    PropTypes.bool
+    PropTypes.string,
+    PropTypes.bool,
   ]),
-  keyboard: PropTypes.bool,
-  hover: PropTypes.string
+  children: PropTypes.array,
+  // called when the mouse enters the Carousel
+  hoverStart: PropTypes.func,
+  // called when the mouse exits the Carousel
+  hoverEnd: PropTypes.func,
+  // controls whether the slide animation on the Carousel works or not
+  slide: PropTypes.bool,
+  cssModule: PropTypes.object,
 };`}
           </PrismCode>
         </pre>

diff --git a/docs/lib/Components/CollapsePage.js b/docs/lib/Components/CollapsePage.js
@@ -28,22 +28,26 @@ export default class CollapsePage extends React.Component {
         <h3>Properties</h3>
         <pre>
           <PrismCode className="language-jsx">
-{`Collapse.propTypes = {
+            {`Collapse.propTypes = {
+  ...Transition.propTypes,
   isOpen: PropTypes.bool,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ]),
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   className: PropTypes.node,
   navbar: PropTypes.bool,
-  delay: PropTypes.oneOfType([
-    PropTypes.shape({ show: PropTypes.number, hide: PropTypes.number }),
-    PropTypes.number
-  ]), // optionally override show/hide delays - default { show: 350, hide: 350 }
-  onOpened: PropTypes.func,
-  onClosed: PropTypes.func,
-}`}
+  cssModule: PropTypes.object,
+};`}
           </PrismCode>
         </pre>
 
         <h3>Events</h3>
-        <p>Use the onOpened and onClosed props for callbacks when the Collapse has finished opening or closing.</p>
+        <p>
+          Use the <code>onEnter</code>, onEntering, onEntered, onExit, onExiting and onExited props for callbacks when the
+          Collapse has finished opening (entering) or closing (exiting).
+        </p>
         <div className="docs-example">
           <CollapseEventsExample />
         </div>

diff --git a/docs/lib/Components/FadePage.js b/docs/lib/Components/FadePage.js
@@ -0,0 +1,77 @@
+/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+import React from 'react';
+import { PrismCode } from 'react-prism';
+import { Alert } from 'reactstrap';
+import Helmet from 'react-helmet';
+
+import FadeExample from '../examples/Fade';
+const FadeExampleSource = require('!!raw!../examples/Fade');
+
+export default class FadePage extends React.Component {
+  render() {
+    return (
+      <div>
+        <Helmet title="Fade" />
+
+        <h3>Fade</h3>
+        <div className="docs-example">
+          <FadeExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {FadeExampleSource}
+          </PrismCode>
+        </pre>
+
+        <h3>Properties</h3>
+        <pre>
+          <PrismCode className="language-jsx">
+{`Fade.propTypes = {
+    // Controls if the fade is currently showing or not (default: true)
+    in: PropTypes.bool, 
+
+    // All of these match [react-transition-group/Transition](https://reactcommunity.org/react-transition-group/#Transition) props
+    mountOnEnter: PropTypes.bool,
+    unmountOnExit: PropTypes.bool,
+    appear: PropTypes.bool, // (default: true)
+    enter: PropTypes.bool,  // (default: true)
+    exit: PropTypes.bool,   // (default: true)
+    timeout: PropTypes.oneOfType([ // (default: 150)
+        PropTypes.number,
+        PropTypes.shape({
+            enter: PropTypes.number,
+            exit: PropTypes.number,
+        }).isRequired,
+    ]),
+    addEndListener: PropTypes.func,
+    onEnter: PropTypes.func,
+    onEntering: PropTypes.func,
+    onEntered: PropTypes.func,
+    onExit: PropTypes.func,
+    onExiting: PropTypes.func,
+    onExited: PropTypes.func,
+
+    // The component(s) that should be faded
+    children: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.node),
+        PropTypes.node
+    ]),
+    // Pass in a component or primitive component name to override the default element
+    // (default: 'div')
+    tag: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    // Class always applied to the Fade element (default: 'fade')
+    baseClass: PropTypes.string,
+    // Class applied to transition the Fade element in (default: 'show')
+    baseClassActive: PropTypes.string,
+    // Other classes that should always be applied
+    className: PropTypes.string,
+    cssModule: PropTypes.object,
+
+    // Any other props provided will be applied to the element created (specified by tag)
+}`}
+          </PrismCode>
+        </pre>
+      </div>
+    );
+  }
+}
diff --git a/docs/lib/Components/ModalsPage.js b/docs/lib/Components/ModalsPage.js
@@ -64,7 +64,9 @@ export default class ModalsPage extends React.Component {
   onEnter: PropTypes.func,
   // called on componentWillUnmount
   onExit: PropTypes.func,
+  // called when done transitioning in
   onOpened: PropTypes.func,
+  // called when done transitioning out
   onClosed: PropTypes.func,
   className: PropTypes.string,
   wrapClassName: PropTypes.string,
@@ -79,20 +81,14 @@ export default class ModalsPage extends React.Component {
     PropTypes.number,
     PropTypes.string,
   ]),
-  // 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,
-  // 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,
-  modalTransitionAppearTimeout: PropTypes.number,
-  modalTransitionEnterTimeout: PropTypes.number,
-  modalTransitionLeaveTimeout: PropTypes.number,
+  // backdropTransition - controls backdrop transition
+  // timeout is 150ms by default to match bootstrap
+  // see [Fade](/components/fade/) for more details
+  backdropTransition: PropTypes.shape(Fade.propTypes),
+  // modalTransition - controls modal transition 
+  // timeout is 300ms by default to match bootstrap
+  // see [Fade](/components/fade/) for more details
+  modalTransition: PropTypes.shape(Fade.propTypes),
 }`}
           </PrismCode>
         </pre>

diff --git a/docs/lib/Components/index.js b/docs/lib/Components/index.js
@@ -62,6 +62,10 @@ class Components extends React.Component {
           name: 'Dropdowns',
           to: '/components/dropdowns/'
         },
+        {
+          name: 'Fade',
+          to: '/components/fade/'
+        },
         {
           name: 'Form',
           to: '/components/form/'

diff --git a/docs/lib/examples/CollapseEvents.js b/docs/lib/examples/CollapseEvents.js
@@ -4,34 +4,49 @@ import { Collapse, Button, CardBody, Card } from 'reactstrap';
 class Example extends Component {
   constructor(props) {
     super(props);
-    this.onOpened = this.onOpened.bind(this);
-    this.onClosed = this.onClosed.bind(this);
+    this.onEntering = this.onEntering.bind(this);
+    this.onEntered = this.onEntered.bind(this);
+    this.onExiting = this.onExiting.bind(this);
+    this.onExited = this.onExited.bind(this);
     this.toggle = this.toggle.bind(this);
     this.state = { collapse: false, status: 'Closed' };
   }
 
-  onOpened() {
-    this.setState({ ...this.state, status: 'Opened' });
+  onEntering() {
+    this.setState({ status: 'Opening...' });
   }
 
-  onClosed() {
-    this.setState({ ...this.state, status: 'Closed' });
+  onEntered() {
+    this.setState({ status: 'Opened' });
+  }
+
+  onExiting() {
+    this.setState({ status: 'Closing...' });
+  }
+
+  onExited() {
+    this.setState({ status: 'Closed' });
   }
 
   toggle() {
-    const status = !this.state.collapse ? 'Opening...' : 'Closing...';
-    this.setState({ collapse: !this.state.collapse, status });
+    this.setState({ collapse: !this.state.collapse });
   }
 
   render() {
     return (
       <div>
         <Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
         <h5>Current state: {this.state.status}</h5>
-        <Collapse isOpen={this.state.collapse} onOpened={this.onOpened} onClosed={this.onClosed}>
+        <Collapse
+          isOpen={this.state.collapse}
+          onEntering={this.onEntering}
+          onEntered={this.onEntered}
+          onExiting={this.onExiting}
+          onExited={this.onExited}
+        >
           <Card>
             <CardBody>
-            Anim pariatur cliche reprehenderit,
+              Anim pariatur cliche reprehenderit,
              enim eiusmod high life accusamus terry richardson ad squid. Nihil
              anim keffiyeh helvetica, craft beer labore wes anderson cred
              nesciunt sapiente ea proident.

diff --git a/docs/lib/examples/Fade.js b/docs/lib/examples/Fade.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Button, Fade } from 'reactstrap';
+
+export default class Example extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { fadeIn: true };
+        this.toggle = this.toggle.bind(this);
+    }
+
+    render() {
+        return (
+            <div>
+                <Button color="primary" onClick={this.toggle}>Toggle Fade</Button>
+                <Fade in={this.state.fadeIn} tag="h5" className="mt-3">
+                    This content will fade in and out as the button is pressed
+                </Fade>
+            </div>
+        );
+    }
+
+    toggle() {
+        this.setState({
+            fadeIn: !this.state.fadeIn
+        });
+    }
+};
diff --git a/docs/lib/examples/ModalCustomTimeout.js b/docs/lib/examples/ModalCustomTimeout.js
@@ -23,7 +23,8 @@ class ModalExample extends React.Component {
     return (
       <div>
         <Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button>
-        <Modal isOpen={this.state.modal} modalTransitionTimeout={20} backdropTransitionTimeout={10} toggle={this.toggle} className={this.props.className}>
+        <Modal isOpen={this.state.modal} modalTransition={{ timeout: 20 }} backdropTransition={{ timeout: 10 }}
+          toggle={this.toggle} className={this.props.className}>
           <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
           <ModalBody>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

diff --git a/docs/lib/examples/NavbarToggler.js b/docs/lib/examples/NavbarToggler.js
@@ -20,9 +20,9 @@ export default class Example extends React.Component {
     return (
       <div>
         <Navbar color="faded" light>
-          <NavbarToggler onClick={this.toggleNavbar} />
-          <Collapse className="navbar-toggleable-md" isOpen={!this.state.collapsed}>
-            <NavbarBrand href="/">reactstrap</NavbarBrand>
+          <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
+          <NavbarBrand href="/" className="mr-auto">reactstrap</NavbarBrand>
+          <Collapse isOpen={!this.state.collapsed} navbar>
             <Nav navbar>
               <NavItem>
                 <NavLink href="/components/">Components</NavLink>

diff --git a/docs/lib/routes.js b/docs/lib/routes.js
@@ -9,6 +9,7 @@ import ButtonsPage from './Components/ButtonsPage';
 import ButtonGroupPage from './Components/ButtonGroupPage';
 import ButtonDropdownPage from './Components/ButtonDropdownPage';
 import DropdownsPage from './Components/DropdownsPage';
+import FadePage from './Components/FadePage';
 import FormPage from './Components/FormPage';
 import InputGroupPage from './Components/InputGroupPage';
 import PopoversPage from './Components/PopoversPage';
@@ -43,6 +44,7 @@ const routes = (
       <Route path="button-group/" component={ButtonGroupPage} />
       <Route path="button-dropdown/" component={ButtonDropdownPage} />
       <Route path="dropdowns/" component={DropdownsPage} />
+      <Route path="fade/" component={FadePage} />
       <Route path="form/" component={FormPage} />
       <Route path="input-group/" component={InputGroupPage} />
       <Route path="popovers/" component={PopoversPage} />