Merge efb0954 into f5d95e2

reactjs · Jun 25, 2017 · dfec6d5 · dfec6d5
2 parents f5d95e2 + efb0954
commit dfec6d5
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 63 deletions.
diff --git a/README.md b/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
 

diff --git a/docs/README.md b/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}
 />
 ```
 

diff --git a/specs/Modal.spec.js b/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);
   });
 

diff --git a/src/components/Modal.js b/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} />
+    );
   }
 }