Full rewrite.

Author: marnusw

.eslintrc

@@ -124,7 +124,7 @@
      */
     "indent": [1, 2, {"SwitchCase": 1}], // http://eslint.org/docs/rules/indent
     "brace-style": [2,               // http://eslint.org/docs/rules/brace-style
-      "stroustrup", {
+      "1tbs", {
         "allowSingleLine": true
       }],
     "quotes": [

src/ReactCSSTransitionReplace.jsx

@@ -30,8 +30,7 @@ function createTransitionTimeoutPropValidator(transitionType) {
           + 'https://fb.me/react-animation-transition-group-timeout for more ' + 'information.')
 
         // If the duration isn't a number
-      }
-      else if (typeof props[timeoutPropName] != 'number') {
+      } else if (typeof props[timeoutPropName] != 'number') {
         return new Error(timeoutPropName + ' must be a number (in milliseconds)')
       }
     }
@@ -65,7 +64,6 @@ export default class ReactCSSTransitionReplace extends React.Component {
     transitionEnterTimeout: createTransitionTimeoutPropValidator('Enter'),
     transitionLeaveTimeout: createTransitionTimeoutPropValidator('Leave'),
     overflowHidden: PropTypes.bool,
-    changeWidth: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -74,23 +72,25 @@ export default class ReactCSSTransitionReplace extends React.Component {
     transitionLeave: true,
     overflowHidden: true,
     component: 'span',
-    changeWidth: false,
+    childComponent: 'span',
   }
 
   state = {
+    currentKey: '1',
     currentChild: this.props.children ? React.Children.only(this.props.children) : undefined,
-    currentChildKey: this.props.children ? '1' : '',
-    nextChild: undefined,
-    activeHeightTransition: false,
-    nextChildKey: '',
+    prevChildren: {},
     height: null,
-    width: null,
-    isLeaving: false,
+  }
+
+  componentWillMount() {
+    this.shouldEnterCurrent = false
+    this.keysToLeave = []
+    this.transitioningKeys = {}
   }
 
   componentDidMount() {
     if (this.props.transitionAppear && this.state.currentChild) {
-      this.appearCurrent()
+      this.performAppear(this.state.currentKey)
     }
   }
 
@@ -99,152 +99,115 @@ export default class ReactCSSTransitionReplace extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    // Setting false indicates that the child has changed, but it is a removal so there is no next child.
-    const nextChild = nextProps.children ? React.Children.only(nextProps.children) : false
-    const currentChild = this.state.currentChild
-
-    // Avoid silencing the transition when this.state.nextChild exists because it means that there’s
-    // already a transition ongoing that has to be replaced.
-    if (currentChild && nextChild && nextChild.key === currentChild.key && !this.state.nextChild) {
-      // Nothing changed, but we are re-rendering so update the currentChild.
-      return this.setState({
-        currentChild: nextChild,
-      })
-    }
+    const nextChild = nextProps.children ? React.Children.only(nextProps.children) : null
+    const {currentChild} = this.state
 
-    if (!currentChild && !nextChild && this.state.nextChild) {
-      // The container was empty before and the entering element is being removed again while
-      // transitioning in. Since a CSS transition can't be reversed cleanly midway the height
-      // is just forced back to zero immediately and the child removed.
-      return this.cancelTransition()
+    if ((!currentChild && !nextChild) || (currentChild && nextChild && currentChild.key === nextChild.key)) {
+      return
     }
 
     const {state} = this
+    const {currentKey} = state
 
-    // When transitionLeave is set to false, refs.curr does not exist when refs.next is being
-    // transitioned into existence. When another child is set for this component at the point
-    // where only refs.next exists, we want to use the width/height of refs.next instead of
-    // refs.curr.
-    const ref = this.refs.curr || this.refs.next
-
-    // Set the next child to start the transition, and set the current height.
-    this.setState({
-      nextChild,
-      activeHeightTransition: false,
-      nextChildKey: state.currentChildKey ? String(Number(state.currentChildKey) + 1) : '1',
-      height: state.currentChild ? ReactDOM.findDOMNode(ref).offsetHeight : 0,
-      width: state.currentChild && this.props.changeWidth ? ReactDOM.findDOMNode(ref).offsetWidth : null,
-    })
-
-    // Enqueue setting the next height to trigger the height transition.
-    this.enqueueHeightTransition(nextChild)
-  }
+    const nextState = {
+      currentKey: String(Number(currentKey) + 1),
+      currentChild: nextChild,
+      height: 0,
+    }
 
-  componentDidUpdate() {
-    if (!this.isTransitioning && !this.state.isLeaving) {
-      const {currentChild, nextChild} = this.state
+    if (nextChild) {
+      this.shouldEnterCurrent = true
+    }
 
-      if (currentChild && (nextChild || nextChild === false || nextChild === null) && this.props.transitionLeave) {
-        this.leaveCurrent()
+    if (currentChild) {
+      nextState.height = ReactDOM.findDOMNode(this.refs[currentKey]).offsetHeight
+      nextState.prevChildren = {
+        ...state.prevChildren,
+        [currentKey]: currentChild,
       }
-      if (nextChild) {
-        this.enterNext()
+      if (!this.transitioningKeys[currentKey]) {
+        this.keysToLeave.push(currentKey)
       }
     }
+
+    this.setState(nextState)
   }
 
-  enqueueHeightTransition(nextChild, tickCount = 0) {
-    this.timeout = setTimeout(() => {
-      if (!nextChild) {
-        return this.setState({
-          activeHeightTransition: true,
-          height: 0,
-          width: this.props.changeWidth ? 0 : null,
-        })
-      }
+  componentDidUpdate() {
+    if (this.shouldEnterCurrent) {
+      this.shouldEnterCurrent = false
+      this.performEnter(this.state.currentKey)
+    }
 
-      const nextNode = ReactDOM.findDOMNode(this.refs.next)
-      if (nextNode) {
-        this.setState({
-          activeHeightTransition: true,
-          height: nextNode.offsetHeight,
-          width: this.props.changeWidth ? nextNode.offsetWidth : null,
-        })
-      }
-      else {
-        // The DOM hasn't rendered the entering element yet, so wait another tick.
-        // Getting stuck in a loop shouldn't happen, but it's better to be safe.
-        if (tickCount < 10) {
-          this.enqueueHeightTransition(nextChild, tickCount + 1)
-        }
-      }
-    }, TICK)
+    const keysToLeave = this.keysToLeave
+    this.keysToLeave = []
+    keysToLeave.forEach(this.performLeave)
   }
 
-  appearCurrent() {
-    this.refs.curr.componentWillAppear(this._handleDoneAppearing)
-    this.isTransitioning = true
+  performAppear(key) {
+    this.transitioningKeys[key] = true
+    this.refs[key].componentWillAppear(this.handleDoneAppearing.bind(this, key))
   }
 
-  _handleDoneAppearing = () => {
-    this.isTransitioning = false
+  handleDoneAppearing = (key) => {
+    delete this.transitioningKeys[key]
+    if (key !== this.state.currentKey) {
+      // This child was removed before it had fully appeared. Remove it.
+      this.performLeave(key)
+    }
   }
 
-  enterNext() {
-    this.refs.next.componentWillEnter(this._handleDoneEntering)
-    this.isTransitioning = true
+  performEnter(key) {
+    this.transitioningKeys[key] = true
+    this.refs[key].componentWillEnter(this.handleDoneEntering.bind(this, key))
+    this.enqueueHeightTransition()
   }
 
-  _handleDoneEntering = () => {
-    const {state} = this
-
-    this.isTransitioning = false
-    this.setState({
-      currentChild: state.nextChild,
-      currentChildKey: state.nextChildKey,
-      activeHeightTransition: false,
-      nextChild: undefined,
-      nextChildKey: '',
-      height: null,
-      width: null,
-    })
+  handleDoneEntering(key) {
+    delete this.transitioningKeys[key]
+    if (key === this.state.currentKey) {
+      // The current child has finished entering so the height transition is also cleared.
+      this.setState({height: null})
+    } else {
+      // This child was removed before it had fully appeared. Remove it.
+      this.performLeave(key)
+    }
   }
 
-  leaveCurrent() {
-    this.refs.curr.componentWillLeave(this._handleDoneLeaving)
-    this.isTransitioning = true
-    this.setState({isLeaving: true})
+  performLeave = (key) => {
+    this.transitioningKeys[key] = true
+    this.refs[key].componentWillLeave(this.handleDoneLeaving.bind(this, key))
+    if (!this.state.currentChild) {
+      // The enter transition dominates, but if there is no
+      // entering component the height is set to zero.
+      this.enqueueHeightTransition()
+    }
   }
 
-  // When the leave transition time-out expires the animation classes are removed, so the
-  // element must be removed from the DOM if the enter transition is still in progress.
-  _handleDoneLeaving = () => {
-    if (this.isTransitioning) {
-      const state = {currentChild: undefined, isLeaving: false}
+  handleDoneLeaving(key) {
+    delete this.transitioningKeys[key]
 
-      if (!this.state.nextChild) {
-        this.isTransitioning = false
-        state.height = null
-        state.width = null
-      }
+    const nextState = {prevChildren: {...this.state.prevChildren}}
+    delete nextState.prevChildren[key]
 
-      this.setState(state)
+    if (!this.state.currentChild) {
+      nextState.height = null
     }
+
+    this.setState(nextState)
   }
 
-  cancelTransition() {
-    this.isTransitioning = false
-    clearTimeout(this.timeout)
-    return this.setState({
-      nextChild: undefined,
-      activeHeightTransition: false,
-      nextChildKey: '',
-      height: null,
-      width: null,
-    })
+  enqueueHeightTransition() {
+    const {state} = this
+    this.timeout = setTimeout(() => {
+      if (!state.currentChild) {
+        return this.setState({height: 0})
+      }
+      this.setState({height: ReactDOM.findDOMNode(this.refs[state.currentKey]).offsetHeight})
+    }, TICK)
   }
 
-  _wrapChild(child, moreProps) {
+  wrapChild(child, moreProps) {
     let transitionName = this.props.transitionName
 
     if (typeof transitionName == 'object' && transitionName !== null) {
@@ -268,42 +231,22 @@ export default class ReactCSSTransitionReplace extends React.Component {
   }
 
   render() {
-    const {currentChild, currentChildKey, nextChild, nextChildKey, height, width, isLeaving, activeHeightTransition} = this.state
+    const {currentKey, currentChild, prevChildren, height} = this.state
     const childrenToRender = []
 
     const {
-      overflowHidden, transitionName, changeWidth, component,
+      overflowHidden, transitionName, component, childComponent,
       transitionAppear, transitionEnter, transitionLeave,
       transitionAppearTimeout, transitionEnterTimeout, transitionLeaveTimeout,
       ...containerProps
     } = this.props
 
-    if (currentChild && !nextChild && !transitionLeave || currentChild && transitionLeave) {
-      childrenToRender.push(
-        React.createElement(
-          'span',
-          {key: currentChildKey},
-          this._wrapChild(
-            typeof currentChild.type == 'string' ? currentChild : React.cloneElement(currentChild, {isLeaving}),
-            {ref: 'curr'})
-        )
-      )
-    }
-
-
     if (height !== null) {
       const heightClassName = (typeof transitionName == 'object' && transitionName !== null)
         ? transitionName.height || ''
         : `${transitionName}-height`
 
-      // Similarly to ReactCSSTransitionGroup, adding `-height-active` suffix to the
-      // container when we are transitioning height.
-      const activeHeightClassName = (nextChild && activeHeightTransition && heightClassName)
-        ? `${heightClassName}-active`
-        : ''
-
-      containerProps.className = `${containerProps.className || ''} ${heightClassName} ${activeHeightClassName}`
-
+      containerProps.className = `${containerProps.className || ''} ${heightClassName}`
       containerProps.style = {
         ...containerProps.style,
         position: 'relative',
@@ -314,26 +257,35 @@ export default class ReactCSSTransitionReplace extends React.Component {
       if (overflowHidden) {
         containerProps.style.overflow = 'hidden'
       }
-
-      if (changeWidth) {
-        containerProps.style.width = width
-      }
     }
 
-    if (nextChild) {
+    Object.keys(prevChildren).forEach(key => {
       childrenToRender.push(
-        React.createElement('span',
+        React.createElement(childComponent,
           {
+            key,
             style: {
               position: 'absolute',
               top: 0,
               left: 0,
               right: 0,
               bottom: 0,
             },
-            key: nextChildKey,
           },
-          this._wrapChild(nextChild, {ref: 'next'})
+          this.wrapChild(
+            typeof prevChildren[key].type == 'string'
+              ? prevChildren[key]
+              : React.cloneElement(prevChildren[key], {isLeaving: true}),
+            {ref: key})
+        )
+      )
+    })
+
+    if (currentChild) {
+      childrenToRender.push(
+        React.createElement(childComponent,
+          {key: currentKey},
+          this.wrapChild(currentChild, {ref: currentKey})
         )
       )
     }