[feature] deprecate getParentElement in favor of findDOMNode.

Test case was written by @restrry.

Original PR:

https://github.com/restrry/react-modal/commit/b9a34155bf37298e99922f77dec8e27292db06d9.

Author: diasbruno

README.md

@@ -124,24 +124,8 @@ object will apply to all instances of the modal.
 
 ### Appended to custom node
 
-You can choose an element for the modal to be appended to, rather than using
-body tag. To do this, provide a function to `parentSelector` prop that return
-the element to be used.
-
-```jsx
-
-function getParent() {
-  return document.querySelector('#root');
-}
-
-<Modal
-  ...
-  parentSelector={getParent}
-  ...
->
-  <p>Modal Content.</p>
-</Modal>
-```
+`parentSelector` is now deprecated. `<Modal />` can be appended on any place
+and it will correctly manage it's clean up.
 
 ### Body class
 

docs/README.md

@@ -69,10 +69,6 @@ import ReactModal from 'react-modal';
     String indicating the role of the modal, allowing the 'dialog' role to be applied if desired.
   */
   role="dialog"
-  /*
-    Function that will be called to get the parent element that the modal will be attached to.
-  */
-  parentSelector={() => document.body}
 />
 ```
 

specs/Modal.spec.js

@@ -54,26 +54,24 @@ describe('State', () => {
     ReactDOM.unmountComponentAtNode(node);
   });
 
-  it('renders into the body, not in context', () => {
-    const node = document.createElement('div');
+  it('renders in context, never in document.body', function() {
+    var node = document.createElement('div');
+    var realRef = null;
     class App extends Component {
       render() {
-        return (
-          <div>
-            <Modal isOpen>
-              <span>hello</span>
-            </Modal>
+	return (
+          <div ref={ref => { realRef = ref; }}>
+	    <Modal isOpen={true}>
+	      <span>hello</span>
+	    </Modal>
           </div>
-        );
+	);
       }
     }
     Modal.setAppElement(node);
     ReactDOM.render(<App />, node);
-    expect(
-      document.body.querySelector('.ReactModalPortal').parentNode
-    ).toEqual(
-      document.body
-    );
+    var modalParent = node.querySelector('.ReactModalPortal').parentNode;
+    expect(modalParent).toEqual(realRef);
     ReactDOM.unmountComponentAtNode(node);
   });
 

src/components/Modal.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM, { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
 import ExecutionEnvironment from 'exenv';
 import elementClass from 'element-class';
@@ -13,10 +13,6 @@ const renderSubtreeIntoContainer = ReactDOM.unstable_renderSubtreeIntoContainer;
 const SafeHTMLElement = EE.canUseDOM ? window.HTMLElement : {};
 const AppElement = EE.canUseDOM ? document.body : { appendChild() {} };
 
-function getParentElement(parentSelector) {
-  return parentSelector();
-}
-
 export default class Modal extends Component {
   static setAppElement(element) {
     ariaAppHider.setElement(element || AppElement);
@@ -55,7 +51,6 @@ export default class Modal extends Component {
     closeTimeoutMS: PropTypes.number,
     ariaHideApp: PropTypes.bool,
     shouldCloseOnOverlayClick: PropTypes.bool,
-    parentSelector: PropTypes.func,
     role: PropTypes.string,
     contentLabel: PropTypes.string.isRequired
   };
@@ -67,8 +62,7 @@ export default class Modal extends Component {
     bodyOpenClassName: 'ReactModal__Body--open',
     ariaHideApp: true,
     closeTimeoutMS: 0,
-    shouldCloseOnOverlayClick: true,
-    parentSelector() { return document.body; }
+    shouldCloseOnOverlayClick: true
   };
 
   static defaultStyles = {
@@ -97,13 +91,8 @@ export default class Modal extends Component {
   };
 
   componentDidMount() {
-    this.node = document.createElement('div');
-    this.node.className = this.props.portalClassName;
-
     if (this.props.isOpen) refCount.add(this);
 
-    const parent = getParentElement(this.props.parentSelector);
-    parent.appendChild(this.node);
     this.renderPortal(this.props);
   }
 
@@ -114,23 +103,10 @@ export default class Modal extends Component {
 
     if (isOpen) refCount.add(this);
     if (!isOpen) refCount.remove(this);
-    const currentParent = getParentElement(this.props.parentSelector);
-    const newParent = getParentElement(newProps.parentSelector);
-
-    if (newParent !== currentParent) {
-      currentParent.removeChild(this.node);
-      newParent.appendChild(this.node);
-    }
 
     this.renderPortal(newProps);
   }
 
-  componentWillUpdate(newProps) {
-    if (newProps.portalClassName !== this.props.portalClassName) {
-      this.node.className = newProps.portalClassName;
-    }
-  }
-
   componentWillUnmount() {
     if (!this.node) return;
 
@@ -159,8 +135,7 @@ export default class Modal extends Component {
 
   removePortal = () => {
     ReactDOM.unmountComponentAtNode(this.node);
-    const parent = getParentElement(this.props.parentSelector);
-    parent.removeChild(this.node);
+    this.portal = null;
 
     if (refCount.count() === 0) {
       elementClass(document.body).remove(this.props.bodyOpenClassName);
@@ -183,7 +158,14 @@ export default class Modal extends Component {
     ), this.node);
   }
 
+  setNodeRef = ref => {
+    this.node = ref;
+  }
+
   render() {
-    return null;
+    return (
+      <div ref={this.setNodeRef}
+           className={this.props.portalClassName}></div>
+    );
   }
 }