[feature] deprecate getParentElement in favor of a local element.

This patch will give us the ability to place the modal
in any place in the react tree. Each modal can handle its own
clean up.

Test case was written by @restrry [b9a3415](mshustov@b9a3415).

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

@@ -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;
 
@@ -157,10 +133,13 @@ export default class Modal extends Component {
     }
   }
 
+  setNodeRef = ref => {
+    this.node = ref;
+  }
+
   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);
@@ -184,6 +163,10 @@ export default class Modal extends Component {
   }
 
   render() {
-    return null;
+    return (
+      <div
+        ref={this.setNodeRef}
+        className={this.props.portalClassName} />
+    );
   }
 }