fixed double click error issue

Codebrahma · Jan 13, 2020 · d52db58 · d52db58
1 parent f5151f2
commit d52db58
Show file tree

Hide file tree

Showing 6 changed files with 167 additions and 32 deletions.
diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/example/package.json b/example/package.json
@@ -8,6 +8,7 @@
     "prop-types": "^15.6.2",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "^1.1.4",
     "react-stateless-modal": "file:.."
   },

diff --git a/example/src/App.js b/example/src/App.js
@@ -1,13 +1,14 @@
 import React, { Component } from 'react';
 import { openModal, Modal, closeModal } from 'react-stateless-modal';
 import './test.css';
-import closeSrc from './twitter.svg'
+import closeSrc from './twitter.svg';
+import { Route, Link } from 'react-router-dom';
+import Landing from './landing';
 
 export default class App extends Component {
-
   state = {
     open: false
-  }
+  };
 
   openModal = () => {
     openModal({
@@ -20,26 +21,33 @@ export default class App extends Component {
         </p>
       ),
       footer: () => (
-        <button onClick={this.openInnerModal}>Open Inner Modal</button>
+        <div>
+          <button onClick={this.openInnerModal}>Open Inner Modal</button>
+          <Link to="/landing">landing</Link>
+        </div>
       ),
-      // containerId: 'modals',
-      animation: {name: 'zoom-in', duration: '250ms'},
+      animation: { name: 'zoom-in', duration: '250ms' }
     });
   };
 
   openInnerModal = () => {
     openModal({
       head: 'Inner Heading',
-      body: () => <p>Inner Body  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
-          pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
-          hendrerit risus, sed porttitor quam  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
-          pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
-          hendrerit risus, sed porttitor quam  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
+      body: () => (
+        <p>
+          Inner Body Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit
+          amet hendrerit risus, sed porttitor quam Lorem ipsum dolor sit amet,
+          consectetur adipiscing elit. Nullam pulvinar risus non risus hendrerit
+          venenatis. Pellentesque sit amet hendrerit risus, sed porttitor quam
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
           pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
-          hendrerit risus, sed porttitor quam</p>,
+          hendrerit risus, sed porttitor quam
+        </p>
+      ),
       footer: () => <button onClick={this.inner}>Inner</button>,
-      closeIcon: { src: closeSrc, alt:'close' },
-      classNames: {overlay: 'overlay', modal: 'mod', closeIcon: 'ico'},
+      closeIcon: { src: closeSrc, alt: 'close' },
+      classNames: { overlay: 'overlay', modal: 'mod', closeIcon: 'ico' },
       modalId: 69420,
       disableOverlayClick: true
     });
@@ -52,26 +60,34 @@ export default class App extends Component {
       closeOnEscape: false,
       footer: () => <button onClick={closeModal}>close</button>,
       modalId: 42069
-    })
-  }
+    });
+  };
 
   handleClose = () => {
-    this.setState({open: false})
-  }
+    this.setState({ open: false });
+  };
 
   handleOpen = () => {
-    this.setState({open: true})
-  }
+    this.setState({ open: true });
+  };
 
   render() {
-    const {open} = this.state;
+    const { open } = this.state;
     return (
       <div>
+        <Route path="/landing" component={Landing} />
         <h1>Modal demo</h1>
         <button onClick={this.openModal}>Open Modal via function mode</button>
         <button onClick={this.handleOpen}>Open Modal via Component mode</button>
         {/* <Modal head="head" onClose={this.handleClose} open={open} animation={{ name: "bounce", duration: "500ms" }}/> */}
-        <Modal onClose={this.handleClose} open={open} head="Test" body={() => <button onClick={closeModal}>close</button>} disableOverlayClick={true}/>
+        <Modal
+          onClose={this.handleClose}
+          open={open}
+          head="Test"
+          body={() => <button onClick={closeModal}>close</button>}
+          disableOverlayClick={true}
+          footer={() => <Link to="/landing">landing</Link>}
+        />
       </div>
     );
   }

diff --git a/example/src/index.js b/example/src/index.js
@@ -1,7 +1,12 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
+import './index.css';
+import App from './App';
 
-import './index.css'
-import App from './App'
-
-ReactDOM.render(<App />, document.getElementById('root'))
+ReactDOM.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+  document.getElementById('root')
+);
diff --git a/example/src/landing.jsx b/example/src/landing.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Landing = () => {
+  return ( 
+    <h1>Landing page</h1>
+   );
+}
+
+export default Landing;
diff --git a/src/components/cbModal.js b/src/components/cbModal.js
@@ -37,10 +37,12 @@ class CBModal extends Component {
 
   unmountModal = (id) => {
     const element = document.querySelector(`#app-modal-${id}`);
-    element.parentNode.removeChild(element);
-    CBModal.instances.pop();
-    if (CBModal.instances.length === 0) {
-      document.removeEventListener('keydown', this.handleKeyDown, false);
+    if (element) {
+      element.parentNode.removeChild(element);
+      CBModal.instances.pop();
+      if (CBModal.instances.length === 0) {
+        document.removeEventListener('keydown', this.handleKeyDown, false);
+      }
     }
   };