fix(Modal): Ensure that this._element exists before removing it. (reactstrap#916)

fix(Build): Deprecate `react-portal` which includes extra code and fix portal references to use ReactDOM directly. Update deps and minimum stability now React16.
fix(Modal): Ensure that `this._element` exists before removing it. Fixes reactstrap#918.

Breaking Change: reactstrap now requires a minimum react version of 16. Please update your version of react to 16 (from 15 to 16 is very seamless).

Author: virgofx

package.json

@@ -94,12 +94,11 @@
     "lodash.tonumber": "^4.0.3",
     "prop-types": "^15.5.8",
     "react-popper": "^0.8.3",
-    "react-portal": "^4.1.2",
     "react-transition-group": "^2.2.1"
   },
   "peerDependencies": {
-    "react": "^0.14.9 || ^15.3.0 || ^16.0.0",
-    "react-dom": "^0.14.9 || ^15.3.0 || ^16.0.0"
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
   },
   "devDependencies": {
     "babel-cli": "^6.14.0",

src/Modal.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Portal } from 'react-portal';
 import classNames from 'classnames';
+import Portal from './Portal';
 import Fade from './Fade';
 import {
   getOriginalBodyPadding,
@@ -191,8 +191,10 @@ class Modal extends React.Component {
   }
 
   destroy() {
-    document.body.removeChild(this._element);
-    this._element = null;
+    if (this._element) {
+      document.body.removeChild(this._element);
+      this._element = null;
+    }
 
     const modalOpenClassName = mapToCssModules('modal-open', this.props.cssModule);
     // Use regex to prevent matching `modal-open` as part of a different class, e.g. `my-modal-opened`

src/Portal.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import { canUseDOM } from './utils';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  node: PropTypes.any
+};
+
+class Portal extends React.Component {
+  componentWillUnmount() {
+    if (this.defaultNode) {
+      document.body.removeChild(this.defaultNode);
+    }
+    this.defaultNode = null;
+  }
+
+  render() {
+    if (!canUseDOM) {
+      return null;
+    }
+
+    if (!this.props.node && !this.defaultNode) {
+      this.defaultNode = document.createElement('div');
+      document.body.appendChild(this.defaultNode);
+    }
+
+    return ReactDOM.createPortal(
+      this.props.children,
+      this.props.node || this.defaultNode
+    );
+  }
+}
+
+Portal.propTypes = propTypes;
+
+export default Portal;

src/utils.js

@@ -199,3 +199,9 @@ export const PopperPlacements = [
   'left',
   'left-start',
 ];
+
+export const canUseDOM = !!(
+  typeof window !== 'undefined' &&
+  window.document &&
+  window.document.createElement
+);

yarn.lock

@@ -6659,12 +6659,6 @@ react-popper@^0.8.3:
     popper.js "^1.12.9"
     prop-types "^15.6.0"
 
-react-portal@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-4.1.2.tgz#7f28f3c8c2ed5c541907c0ed0f24e8996acf627f"
-  dependencies:
-    prop-types "^15.5.8"
-
 react-prism@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/react-prism/-/react-prism-4.3.2.tgz#5c07609539b3ba6f45eb33e7d6a3588df3270c21"