Fixed an issue that cannot remove a mounted React component from the …

…DOM when specifying a node prop
trendmicro-frontend · Nov 28, 2017 · 67b3413 · 67b3413
1 parent f5aac60
commit 67b3413
Show file tree

Hide file tree

Showing 8 changed files with 30,526 additions and 37,707 deletions.
diff --git a/docs/bundle.js b/docs/bundle.js
diff --git a/docs/bundle.js.map b/docs/bundle.js.map
diff --git a/docs/iframe.bundle.js b/docs/iframe.bundle.js
diff --git a/docs/iframe.bundle.js.map b/docs/iframe.bundle.js.map
diff --git a/docs/iframe.html b/docs/iframe.html
@@ -11,5 +11,5 @@
 </head>
 <body>
 <div id="container"></div>
-<script type="text/javascript" src="iframe.bundle.js?47e0c13445371c78f60b"></script></body>
+<script type="text/javascript" src="iframe.bundle.js?b4f6dfa5cd8596d0d826"></script></body>
 </html>
diff --git a/docs/index.html b/docs/index.html
@@ -12,5 +12,5 @@
 <body>
 <div id="container"></div>
 <div id="modal-container"></div>
-<script type="text/javascript" src="bundle.js?7939b80ae6a720253f96"></script></body>
+<script type="text/javascript" src="bundle.js?e89e831426f8ebefc429"></script></body>
 </html>
diff --git a/examples/index.jsx b/examples/index.jsx
@@ -35,20 +35,13 @@ const Modal = styled.div`
 
 class App extends PureComponent {
     state = {
-        open: false
-    };
-
-    openModal = () => {
-        this.setState({ open: true });
-    };
-    closeModal = () => {
-        this.setState({ open: false });
+        modal1: false,
+        modal2: false
     };
 
     render() {
         const name = 'React Portal';
         const url = 'https://github.com/trendmicro-frontend/react-portal';
-        const { open } = this.state;
 
         return (
             <div>
@@ -58,19 +51,58 @@ class App extends PureComponent {
                         <div className="col-md-6">
                             <Section className="row-md-5">
                                 <h2>Modal Window</h2>
-                                {!open &&
-                                <Button onClick={this.openModal}>Open</Button>
+                                <Button
+                                    onClick={() => {
+                                        this.setState({ modal1: true, modal2: false });
+                                    }}
+                                >
+                                    Open
+                                </Button>
+                                {this.state.modal1 &&
+                                <StyledPortal node={document.querySelector('#modal-container')}>
+                                    <VerticallyCenter>
+                                        <Fade timeout={150}>
+                                            <Modal>
+                                                <VerticallyCenter>
+                                                    <h1>Modal #1</h1>
+                                                    <br />
+                                                    <div style={{ textAlign: 'center' }}>
+                                                        <Button
+                                                            onClick={() => {
+                                                                this.setState({
+                                                                    modal1: false,
+                                                                    modal2: true
+                                                                });
+                                                            }}
+                                                        >
+                                                            Close Modal
+                                                        </Button>
+                                                    </div>
+                                                </VerticallyCenter>
+                                            </Modal>
+                                        </Fade>
+                                    </VerticallyCenter>
+                                </StyledPortal>
                                 }
-                                {open &&
-                                <StyledPortal>
+                                {this.state.modal2 &&
+                                <StyledPortal node={document.querySelector('#modal-container')}>
                                     <VerticallyCenter>
                                         <Fade timeout={150}>
                                             <Modal>
                                                 <VerticallyCenter>
-                                                    <h1>Modal Content</h1>
+                                                    <h1>Modal #2</h1>
                                                     <br />
                                                     <div style={{ textAlign: 'center' }}>
-                                                        <Button onClick={this.closeModal}>Close Modal</Button>
+                                                        <Button
+                                                            onClick={() => {
+                                                                this.setState({
+                                                                    modal1: false,
+                                                                    modal2: false
+                                                                });
+                                                            }}
+                                                        >
+                                                            Close Modal
+                                                        </Button>
                                                     </div>
                                                 </VerticallyCenter>
                                             </Modal>

diff --git a/src/Portal.jsx b/src/Portal.jsx
@@ -7,23 +7,28 @@ class Portal extends PureComponent {
         node: PropTypes.any
     };
 
-    defaultNode = null;
+    node = null;
 
     componentDidMount() {
-        if (!this.props.node && !this.defaultNode) {
-            this.defaultNode = document.createElement('div');
-            this.defaultNode.setAttribute('data-reactportal', '');
-            document.body.appendChild(this.defaultNode);
+        if (!this.node) {
+            this.node = document.createElement('div');
+            this.node.setAttribute('data-reactportal', '');
+
+            if (this.props.node) {
+                this.props.node.appendChild(this.node);
+            } else {
+                document.body.appendChild(this.node);
+            }
         }
         this.componentDidUpdate();
     }
     componentWillUnmount() {
-        if (this.props.node) {
-            ReactDOM.unmountComponentAtNode(this.props.node);
-        } else if (this.defaultNode) {
-            ReactDOM.unmountComponentAtNode(this.defaultNode);
-            document.body.removeChild(this.defaultNode);
-            this.defaultNode = null;
+        if (this.node) {
+            ReactDOM.unmountComponentAtNode(this.node);
+            if (this.node.parentNode) {
+                this.node.parentNode.removeChild(this.node);
+            }
+            this.node = null;
         }
     }
     componentDidUpdate() {
@@ -32,7 +37,7 @@ class Portal extends PureComponent {
 
         ReactDOM.render(
             <div {...props} />,
-            this.props.node || this.defaultNode
+            this.node
         );
     }
     render() {