Skip to content

Instantly share code, notes, and snippets.

@JSteunou
Created April 9, 2020 06:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JSteunou/5e9e96981562747f760837a1e1d1e96a to your computer and use it in GitHub Desktop.
Save JSteunou/5e9e96981562747f760837a1e1d1e96a to your computer and use it in GitHub Desktop.
diff --git a/node_modules/react-transition-group/esm/ReplaceTransition.js b/node_modules/react-transition-group/esm/ReplaceTransition.js
index 768ef1e..c282e33 100644
--- a/node_modules/react-transition-group/esm/ReplaceTransition.js
+++ b/node_modules/react-transition-group/esm/ReplaceTransition.js
@@ -2,7 +2,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
import PropTypes from 'prop-types';
import React from 'react';
-import ReactDOM from 'react-dom';
import TransitionGroup from './TransitionGroup';
/**
* The `<ReplaceTransition>` component is a specialized `Transition` component
@@ -30,6 +29,8 @@ function (_React$Component) {
_this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;
+ _this.nodeRef = React.createRef();
+
_this.handleEnter = function () {
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
@@ -89,7 +90,7 @@ function (_React$Component) {
var children = this.props.children;
var child = React.Children.toArray(children)[idx];
if (child.props[handler]) (_child$props = child.props)[handler].apply(_child$props, originalArgs);
- if (this.props[handler]) this.props[handler](ReactDOM.findDOMNode(this));
+ if (this.props[handler]) this.props[handler](this.nodeRef.current);
};
_proto.render = function render() {
@@ -108,16 +109,21 @@ function (_React$Component) {
delete props.onExit;
delete props.onExiting;
delete props.onExited;
+
+ this.nodeRef = inProp ? first.ref || this.nodeRef : second.ref || this.nodeRef;
+
return React.createElement(TransitionGroup, props, inProp ? React.cloneElement(first, {
key: 'first',
onEnter: this.handleEnter,
onEntering: this.handleEntering,
- onEntered: this.handleEntered
+ onEntered: this.handleEntered,
+ ref: this.nodeRef
}) : React.cloneElement(second, {
key: 'second',
onEnter: this.handleExit,
onEntering: this.handleExiting,
- onEntered: this.handleExited
+ onEntered: this.handleExited,
+ ref: this.nodeRef
}));
};
diff --git a/node_modules/react-transition-group/esm/Transition.js b/node_modules/react-transition-group/esm/Transition.js
index ef96aed..a71dfd5 100644
--- a/node_modules/react-transition-group/esm/Transition.js
+++ b/node_modules/react-transition-group/esm/Transition.js
@@ -2,7 +2,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
import PropTypes from 'prop-types';
import React from 'react';
-import ReactDOM from 'react-dom';
import config from './config';
import { timeoutsShape } from './utils/PropTypes';
import TransitionGroupContext from './TransitionGroupContext';
@@ -112,6 +111,7 @@ function (_React$Component) {
var _this;
_this = _React$Component.call(this, props, context) || this;
+ _this.nodeRef = React.createRef();
var parentGroup = context; // In the context of a TransitionGroup all enters are really appears
var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;
@@ -225,7 +225,7 @@ function (_React$Component) {
if (nextStatus !== null) {
// nextStatus will always be ENTERING or EXITING.
this.cancelNextCallback();
- var node = ReactDOM.findDOMNode(this);
+ var node = this.nodeRef.current;
if (nextStatus === ENTERING) {
this.performEnter(node, mounting);
@@ -384,18 +384,19 @@ function (_React$Component) {
delete childProps.onExiting;
delete childProps.onExited;
- if (typeof children === 'function') {
- // allows for nested Transitions
- return React.createElement(TransitionGroupContext.Provider, {
- value: null
- }, children(status, childProps));
- }
+ var child = typeof children === 'function'
+ ? children(status, childProps)
+ : React.Children.only(children)
+ ;
+
+ // get child.ref or use internal if missing child.ref
+ this.nodeRef = child.ref || this.nodeRef;
- var child = React.Children.only(children);
return (// allows for nested Transitions
- React.createElement(TransitionGroupContext.Provider, {
- value: null
- }, React.cloneElement(child, childProps))
+ React.createElement(TransitionGroupContext.Provider,
+ {value: null},
+ React.cloneElement(child, Object.assign({}, childProps, {ref: this.nodeRef}))
+ )
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment