Transition group

package.json

@@ -127,8 +127,9 @@
     "keycode": "^2.1.2",
     "prop-types": "^15.5.6",
     "prop-types-extra": "^1.0.1",
-    "react-overlays": "^0.7.0",
+    "react-overlays": "^0.8.0",
     "react-prop-types": "^0.4.0",
+    "react-transition-group": "^2.0.0",
     "uncontrollable": "^4.1.0",
     "warning": "^3.0.0"
   },

src/Collapse.js

@@ -2,7 +2,8 @@ import classNames from 'classnames';
 import css from 'dom-helpers/style';
 import React from 'react';
 import PropTypes from 'prop-types';
-import Transition from 'react-overlays/lib/Transition';
+import Transition, { EXITED, ENTERED, ENTERING, EXITING }
+  from 'react-transition-group/Transition';
 
 import capitalize from './utils/capitalize';
 import createChainedFunction from './utils/createChainedFunction';
@@ -28,6 +29,13 @@ function getDimensionValue(dimension, elem) {
   );
 }
 
+const collapseStyles = {
+  [EXITED]: 'collapse',
+  [EXITING]: 'collapsing',
+  [ENTERING]: 'collapsing',
+  [ENTERED]: 'collapse in',
+};
+
 const propTypes = {
   /**
    * Show the component; triggers the expand or collapse animation
@@ -48,7 +56,7 @@ const propTypes = {
    * Run the expand animation when the component mounts, if it is initially
    * shown
    */
-  transitionAppear: PropTypes.bool,
+  appear: PropTypes.bool,
 
   /**
    * Duration of the collapse animation in milliseconds, to ensure that
@@ -114,52 +122,40 @@ const defaultProps = {
   timeout: 300,
   mountOnEnter: false,
   unmountOnExit: false,
-  transitionAppear: false,
+  appear: false,
 
   dimension: 'height',
   getDimensionValue,
 };
 
 class Collapse extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.handleEnter = this.handleEnter.bind(this);
-    this.handleEntering = this.handleEntering.bind(this);
-    this.handleEntered = this.handleEntered.bind(this);
-    this.handleExit = this.handleExit.bind(this);
-    this.handleExiting = this.handleExiting.bind(this);
-  }
 
   /* -- Expanding -- */
-  handleEnter(elem) {
-    const dimension = this._dimension();
-    elem.style[dimension] = '0';
+  handleEnter = (elem) => {
+    elem.style[this.getDimension()] = '0';
   }
 
-  handleEntering(elem) {
-    const dimension = this._dimension();
+  handleEntering = (elem) => {
+    const dimension = this.getDimension();
     elem.style[dimension] = this._getScrollDimensionValue(elem, dimension);
   }
 
-  handleEntered(elem) {
-    const dimension = this._dimension();
-    elem.style[dimension] = null;
+  handleEntered = (elem) => {
+    elem.style[this.getDimension()] = null;
   }
 
   /* -- Collapsing -- */
-  handleExit(elem) {
-    const dimension = this._dimension();
+  handleExit = (elem) => {
+    const dimension = this.getDimension();
     elem.style[dimension] = this.props.getDimensionValue(dimension, elem) + 'px';
     triggerBrowserReflow(elem);
   }
 
-  handleExiting(elem) {
-    const dimension = this._dimension();
-    elem.style[dimension] = '0';
+  handleExiting = (elem) => {
+    elem.style[this.getDimension()] = '0';
   }
 
-  _dimension() {
+  getDimension() {
     return typeof this.props.dimension === 'function'
       ? this.props.dimension()
       : this.props.dimension;
@@ -172,7 +168,8 @@ class Collapse extends React.Component {
 
   render() {
     const {
-      onEnter, onEntering, onEntered, onExit, onExiting, className, ...props
+      onEnter, onEntering, onEntered, onExit, onExiting,
+      className, children, ...props
     } = this.props;
 
     delete props.dimension;
@@ -189,25 +186,26 @@ class Collapse extends React.Component {
     const handleExiting =
       createChainedFunction(this.handleExiting, onExiting);
 
-    const classes = {
-      width: this._dimension() === 'width',
-    };
-
     return (
       <Transition
         {...props}
         aria-expanded={props.role ? props.in : null}
-        className={classNames(className, classes)}
-        exitedClassName="collapse"
-        exitingClassName="collapsing"
-        enteredClassName="collapse in"
-        enteringClassName="collapsing"
         onEnter={handleEnter}
         onEntering={handleEntering}
         onEntered={handleEntered}
         onExit={handleExit}
         onExiting={handleExiting}
-      />
+      >
+        {(state, innerProps) => React.cloneElement(children, {
+          ...innerProps,
+          className: classNames(
+            className,
+            children.props.className,
+            collapseStyles[state],
+            this.getDimension() === 'width' && 'width'
+          )
+        })}
+      </Transition>
     );
   }
 }

src/Fade.js

@@ -1,7 +1,8 @@
 import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
-import Transition from 'react-overlays/lib/Transition';
+import Transition, { ENTERED, ENTERING }
+  from 'react-transition-group/Transition';
 
 const propTypes = {
   /**
@@ -23,7 +24,7 @@ const propTypes = {
    * Run the fade in animation when the component mounts, if it is initially
    * shown
    */
-  transitionAppear: PropTypes.bool,
+  appear: PropTypes.bool,
 
   /**
    * Duration of the fade animation in milliseconds, to ensure that finishing
@@ -63,18 +64,31 @@ const defaultProps = {
   timeout: 300,
   mountOnEnter: false,
   unmountOnExit: false,
-  transitionAppear: false,
+  appear: false,
+};
+
+
+const fadeStyles = {
+  [ENTERING]: 'in',
+  [ENTERED]: 'in',
 };
 
 class Fade extends React.Component {
   render() {
+    const { className, children, ...props } = this.props;
+
     return (
-      <Transition
-        {...this.props}
-        className={classNames(this.props.className, 'fade')}
-        enteredClassName="in"
-        enteringClassName="in"
-      />
+      <Transition {...props}>
+        {(status, innerProps) => React.cloneElement(children, {
+          ...innerProps,
+          className: classNames(
+            'fade',
+            className,
+            children.props.className,
+            fadeStyles[status]
+          ),
+        })}
+      </Transition>
     );
   }
 }

src/Modal.js

@@ -128,6 +128,17 @@ const childContextTypes = {
   }),
 };
 
+/* eslint-disable no-use-before-define, react/no-multi-comp */
+function DialogTransition(props) {
+  return <Fade {...props} timeout={Modal.TRANSITION_DURATION} />;
+}
+
+function BackdropTransition(props) {
+  return <Fade {...props} timeout={Modal.BACKDROP_TRANSITION_DURATION} />;
+}
+
+/* eslint-enable no-use-before-define */
+
 class Modal extends React.Component {
   constructor(props, context) {
     super(props, context);
@@ -227,14 +238,13 @@ class Modal extends React.Component {
         {...baseModalProps}
         ref={c => { this._modal = c; }}
         show={show}
-        onEntering={createChainedFunction(onEntering, this.handleEntering)}
-        onExited={createChainedFunction(onExited, this.handleExited)}
+        containerClassName={prefix(props, 'open')}
+        transition={animation ? DialogTransition : undefined}
         backdrop={backdrop}
+        backdropTransition={animation ? BackdropTransition : undefined}
         backdropClassName={classNames(prefix(props, 'backdrop'), inClassName)}
-        containerClassName={prefix(props, 'open')}
-        transition={animation ? Fade : undefined}
-        dialogTransitionTimeout={Modal.TRANSITION_DURATION}
-        backdropTransitionTimeout={Modal.BACKDROP_TRANSITION_DURATION}
+        onEntering={createChainedFunction(onEntering, this.handleEntering)}
+        onExited={createChainedFunction(onExited, this.handleExited)}
       >
         <Dialog
           {...dialogProps}

src/TabContent.js

@@ -11,8 +11,8 @@ const propTypes = {
 
   /**
    * Sets a default animation strategy for all children `<TabPane>`s. Use
-   * `false` to disable, `true` to enable the default `<Fade>` animation or any
-   * `<Transition>` component.
+   * `false` to disable, `true` to enable the default `<Fade>` animation or
+   * a react-transition-group v2 `<Transition/>` component.
    */
   animation: PropTypes.oneOfType([
     PropTypes.bool, elementType,

src/TabPane.js

@@ -18,8 +18,8 @@ const propTypes = {
 
   /**
    * Use animation when showing or hiding `<TabPane>`s. Use `false` to disable,
-   * `true` to enable the default `<Fade>` animation or any `<Transition>`
-   * component.
+   * `true` to enable the default `<Fade>` animation or
+   * a react-transition-group v2 `<Transition/>` component.
    */
   animation: PropTypes.oneOfType([PropTypes.bool, elementType]),
 

test/CollapseSpec.js

@@ -204,7 +204,7 @@ describe('<Collapse>', () => {
     });
 
     it('Defaults to height', () => {
-      assert.equal(instance.collapse._dimension(), 'height');
+      assert.equal(instance.collapse.getDimension(), 'height');
     });
 
     it('Uses getCollapsibleDimension if exists', () => {
@@ -215,7 +215,7 @@ describe('<Collapse>', () => {
 
       instance.setState({ dimension });
 
-      assert.equal(instance.collapse._dimension(), 'whatevs');
+      assert.equal(instance.collapse.getDimension(), 'whatevs');
     });
   });