Remove the react-transition-group dependency.

Author: marnusw

CHANGELOG.md

@@ -1,3 +1,7 @@
+### Next
+
+* [ENHANCEMENT] Remove the `react-transition-group` dependency. (#56)
+
 ### v3.0.2 (7 October 2017)
 
 * [BUGFIX] Fix updating children when the current child re-renders itself. (#53)

package-lock.json

@@ -8,6 +8,7 @@
     "url": "https://github.com/marnusw/react-css-transition-replace.git"
   },
   "scripts": {
+    "start": "gulp demo",
     "test": "echo \"No test implemented\" && exit 0",
     "prebuild": "./node_modules/.bin/rimraf lib && gulp lint",
     "build": "./node_modules/.bin/babel ./src --out-dir ./lib",
@@ -17,7 +18,6 @@
     "chain-function": "^1.0.0",
     "dom-helpers": "^3.2.0",
     "prop-types": "^15.6.0",
-    "react-transition-group": "^1.2.1",
     "warning": "^3.0.0"
   },
   "peerDependencies": {

package.json

@@ -1,9 +1,3 @@
-/**
- * Adapted from ReactCSSTransitionGroup.js by Facebook
- *
- * @providesModule ReactCSSTransitionReplace
- */
-
 import React from 'react'
 import { findDOMNode } from 'react-dom'
 import PropTypes from 'prop-types'
@@ -13,8 +7,7 @@ import warning from 'warning'
 import raf from 'dom-helpers/util/requestAnimationFrame'
 
 import ReactCSSTransitionReplaceChild from './ReactCSSTransitionReplaceChild'
-import { transitionTimeout } from 'react-transition-group/utils/PropTypes'
-import { nameShape } from './utils/PropTypes'
+import { nameShape, transitionTimeout } from './utils/PropTypes'
 
 const reactCSSTransitionReplaceChild = React.createFactory(ReactCSSTransitionReplaceChild)
 

src/ReactCSSTransitionReplace.jsx

@@ -1,35 +1,203 @@
 /**
- * Uses react-transition-group/CSSTransitionGroupChild with the exception that
- * the first animation frame is skipped when starting new transitions since
+ * From react-transition-group v1.2.1
+ *
+ * In addition, the first animation frame is skipped when starting new transitions since
  * entering absolutely positioned elements in Chrome does not animate otherwise.
  */
-import ReactCSSTransitionReplaceChild from 'react-transition-group/CSSTransitionGroupChild'
+import addClass from 'dom-helpers/class/addClass'
+import removeClass from 'dom-helpers/class/removeClass'
 import raf from 'dom-helpers/util/requestAnimationFrame'
+import { transitionEnd, animationEnd } from 'dom-helpers/transition/properties'
+import React from 'react'
+import PropTypes from 'prop-types'
+import { findDOMNode } from 'react-dom'
 
+import { nameShape } from './utils/PropTypes'
 
-ReactCSSTransitionReplaceChild.prototype.queueClassAndNode = function queueClassAndNode(className, node) {
-  const _this2 = this
+let events = []
+if (transitionEnd) {
+  events.push(transitionEnd)
+}
+if (animationEnd) {
+  events.push(animationEnd)
+}
 
-  this.classNameAndNodeQueue.push({
-    className: className,
-    node: node,
-  })
+function addEndListener(node, listener) {
+  if (events.length) {
+    events.forEach(e =>
+      node.addEventListener(e, listener, false))
+  } else {
+    setTimeout(listener, 0)
+  }
 
-  if (!this.rafHandle) {
-    this.rafHandle = raf(function() {
-      return _this2.flushClassNameAndNodeQueueOnNextFrame()
-    })
+  return () => {
+    if (!events.length) {
+      return
+    }
+    events.forEach(e => node.removeEventListener(e, listener, false))
   }
 }
 
-// In Chrome the absolutely positioned children would not animate on enter
-// if the immediate animation frame is used so this skips to the next one.
-ReactCSSTransitionReplaceChild.prototype.flushClassNameAndNodeQueueOnNextFrame = function flushClassNameAndNodeQueueOnNextFrame() {
-  const _this2 = this
+const propTypes = {
+  children: PropTypes.node,
+  name: nameShape.isRequired,
 
-  this.rafHandle = raf(function() {
-    return _this2.flushClassNameAndNodeQueue()
-  })
+  // Once we require timeouts to be specified, we can remove the
+  // boolean flags (appear etc.) and just accept a number
+  // or a bool for the timeout flags (appearTimeout etc.)
+  appear: PropTypes.bool,
+  enter: PropTypes.bool,
+  leave: PropTypes.bool,
+  appearTimeout: PropTypes.number,
+  enterTimeout: PropTypes.number,
+  leaveTimeout: PropTypes.number,
 }
 
-export default ReactCSSTransitionReplaceChild
+class CSSTransitionGroupChild extends React.Component {
+
+  static displayName = 'CSSTransitionGroupChild'
+
+  componentWillMount() {
+    this.classNameAndNodeQueue = []
+    this.transitionTimeouts = []
+  }
+
+  componentWillUnmount() {
+    this.unmounted = true
+
+    if (this.timeout) {
+      clearTimeout(this.timeout)
+    }
+    this.transitionTimeouts.forEach((timeout) => {
+      clearTimeout(timeout)
+    })
+
+    this.classNameAndNodeQueue.length = 0
+  }
+
+  transition(animationType, finishCallback, timeout) {
+    let node = findDOMNode(this)
+
+    if (!node) {
+      if (finishCallback) {
+        finishCallback()
+      }
+      return
+    }
+
+    let className = this.props.name[animationType] || this.props.name + '-' + animationType
+    let activeClassName = this.props.name[animationType + 'Active'] || className + '-active'
+    let timer = null
+    let removeListeners
+
+    addClass(node, className)
+
+    // Need to do this to actually trigger a transition.
+    this.queueClassAndNode(activeClassName, node)
+
+    // Clean-up the animation after the specified delay
+    let finish = (e) => {
+      if (e && e.target !== node) {
+        return
+      }
+
+      clearTimeout(timer)
+      if (removeListeners) {
+        removeListeners()
+      }
+
+      removeClass(node, className)
+      removeClass(node, activeClassName)
+
+      if (removeListeners) {
+        removeListeners()
+      }
+
+      // Usually this optional callback is used for informing an owner of
+      // a leave animation and telling it to remove the child.
+      if (finishCallback) {
+        finishCallback()
+      }
+    }
+
+    if (timeout) {
+      timer = setTimeout(finish, timeout)
+      this.transitionTimeouts.push(timer)
+    } else if (transitionEnd) {
+      removeListeners = addEndListener(node, finish)
+    }
+  }
+
+  queueClassAndNode(className, node) {
+    this.classNameAndNodeQueue.push({
+      className,
+      node,
+    })
+
+    if (!this.rafHandle) {
+      // The first animation frame is skipped when starting new transitions since
+      // entering absolutely positioned elements in Chrome does not animate otherwise.
+      this.rafHandle = raf(() => this.flushClassNameAndNodeQueueOnNextFrame())
+    }
+  }
+
+  flushClassNameAndNodeQueueOnNextFrame() {
+    this.rafHandle = raf(() => this.flushClassNameAndNodeQueue())
+  }
+
+  flushClassNameAndNodeQueue() {
+    if (!this.unmounted) {
+      this.classNameAndNodeQueue.forEach((obj) => {
+        // This is for to force a repaint,
+        // which is necessary in order to transition styles when adding a class name.
+        /* eslint-disable no-unused-expressions */
+        obj.node.scrollTop
+        /* eslint-enable no-unused-expressions */
+        addClass(obj.node, obj.className)
+      })
+    }
+    this.classNameAndNodeQueue.length = 0
+    this.rafHandle = null
+  }
+
+  componentWillAppear = (done) => {
+    if (this.props.appear) {
+      this.transition('appear', done, this.props.appearTimeout)
+    } else {
+      done()
+    }
+  }
+
+  componentWillEnter = (done) => {
+    if (this.props.enter) {
+      this.transition('enter', done, this.props.enterTimeout)
+    } else {
+      done()
+    }
+  }
+
+  componentWillLeave = (done) => {
+    if (this.props.leave) {
+      this.transition('leave', done, this.props.leaveTimeout)
+    } else {
+      done()
+    }
+  }
+
+  render() {
+    const props = {...this.props}
+    delete props.name
+    delete props.appear
+    delete props.enter
+    delete props.leave
+    delete props.appearTimeout
+    delete props.enterTimeout
+    delete props.leaveTimeout
+    delete props.children
+    return React.cloneElement(React.Children.only(this.props.children), props)
+  }
+}
+
+CSSTransitionGroupChild.propTypes = propTypes
+
+export default CSSTransitionGroupChild

src/ReactCSSTransitionReplaceChild.js

@@ -1,5 +1,32 @@
 import PropTypes from 'prop-types'
 
+export function transitionTimeout(transitionType) {
+  let timeoutPropName = 'transition' + transitionType + 'Timeout'
+  let enabledPropName = 'transition' + transitionType
+
+  return (props) => {
+    // If the transition is enabled
+    if (props[enabledPropName]) {
+      // If no timeout duration is provided
+      if (props[timeoutPropName] == null) {
+        return new Error(
+          timeoutPropName + ' wasn\'t supplied to CSSTransitionGroup: ' +
+          'this can cause unreliable animations and won\'t be supported in ' +
+          'a future version of React. See ' +
+          'https://fb.me/react-animation-transition-group-timeout for more ' +
+          'information.',
+        )
+
+        // If the duration isn't a number
+      } else if (typeof props[timeoutPropName] !== 'number') {
+        return new Error(timeoutPropName + ' must be a number (in milliseconds)')
+      }
+    }
+
+    return null
+  }
+}
+
 export const nameShape = PropTypes.oneOfType([
   PropTypes.string,
   PropTypes.shape({