From 4ab780536fa15cc663e3d04f3149123fd07ef558 Mon Sep 17 00:00:00 2001
From: Andrew Musgrave <andrew.musgrave@shopify.com>
Date: Thu, 27 Jun 2019 14:30:51 -0400
Subject: [PATCH] Added alternative to findDOMNode

---
 src/ReplaceTransition.js |  6 ++++--
 src/Transition.js        | 12 +++++++++++-
 test/Transition-test.js  | 26 ++++++++++++++++++++++++++
 3 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/src/ReplaceTransition.js b/src/ReplaceTransition.js
index c1081c59..9c05320b 100644
--- a/src/ReplaceTransition.js
+++ b/src/ReplaceTransition.js
@@ -24,11 +24,11 @@ class ReplaceTransition extends React.Component {
   handleExited = (...args) => this.handleLifecycle('onExited', 1, args)
 
   handleLifecycle(handler, idx, originalArgs) {
-    const { children } = this.props;
+    const { children, transitionNode } = this.props;
     const child = React.Children.toArray(children)[idx];
 
     if (child.props[handler]) child.props[handler](...originalArgs)
-    if (this.props[handler]) this.props[handler](findDOMNode(this))
+    if (this.props[handler]) this.props[handler](transitionNode || findDOMNode(this))
   }
 
   render() {
@@ -45,6 +45,7 @@ class ReplaceTransition extends React.Component {
     delete props.onExit;
     delete props.onExiting;
     delete props.onExited;
+    delete props.transitionNode;
 
     return (
       <TransitionGroup {...props}>
@@ -76,6 +77,7 @@ ReplaceTransition.propTypes = {
 
     return null;
   },
+  transitionNode: PropTypes.instanceOf(Element),
 };
 
 export default ReplaceTransition;
diff --git a/src/Transition.js b/src/Transition.js
index 3fc7308c..a7221150 100644
--- a/src/Transition.js
+++ b/src/Transition.js
@@ -210,7 +210,7 @@ class Transition extends React.Component {
     if (nextStatus !== null) {
       // nextStatus will always be ENTERING or EXITING.
       this.cancelNextCallback()
-      const node = ReactDOM.findDOMNode(this)
+      const node = this.props.transitionNode || ReactDOM.findDOMNode(this)
 
       if (nextStatus === ENTERING) {
         this.performEnter(node, mounting)
@@ -349,6 +349,7 @@ class Transition extends React.Component {
     delete childProps.onExit
     delete childProps.onExiting
     delete childProps.onExited
+    delete childProps.transitionNode
 
     if (typeof children === 'function') {
       // allows for nested Transitions
@@ -517,6 +518,13 @@ Transition.propTypes = {
    * @type Function(node: HtmlElement) -> void
    */
   onExited: PropTypes.func,
+
+  /**
+   * The DOM node that is passed to the transition callbacks.
+   *
+   * @type HtmlElement
+   */
+  transitionNode: PropTypes.instanceOf(Element),
 }
 
 // Name the function so it is clearer in the documentation
@@ -537,6 +545,8 @@ Transition.defaultProps = {
   onExit: noop,
   onExiting: noop,
   onExited: noop,
+
+  transitionNode: null,
 }
 
 Transition.UNMOUNTED = 0
diff --git a/test/Transition-test.js b/test/Transition-test.js
index 63d30c0e..ad766366 100644
--- a/test/Transition-test.js
+++ b/test/Transition-test.js
@@ -469,4 +469,30 @@ describe('Transition', () => {
       wrapper.setState({ in: false })
     })
   })
+
+  describe('transition node', () => {
+    it('delegates to findDOMNode when a transntionNode is not provided', () => {
+      const findDOMNodeSpy = jest.spyOn(ReactDOM, 'findDOMNode');
+      mount(
+        <Transition in appear timeout={0}>
+          <div />
+        </Transition>
+      )
+
+      expect(findDOMNodeSpy).toHaveBeenCalledTimes(1);
+      findDOMNodeSpy.mockRestore();
+    })
+
+    it('uses transitionNode when provided', () => {
+      const onEnterSpy = jest.fn();
+      const transitionNode = document.createElement('span');
+      mount(
+        <Transition  in appear timeout={0} onEnter={onEnterSpy} transitionNode={transitionNode}>
+          <div />
+        </Transition>
+      )
+
+      expect(onEnterSpy).toHaveBeenCalledWith(transitionNode, true);
+    })
+  })
 })