Add confirmAlert2() to support multiple popups

dev/index.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { confirmAlert } from 'react-confirm-alert'
+import { confirmAlert, confirmAlert2 } from 'react-confirm-alert'
 import '../src/react-confirm-alert.css'
 
 class App extends React.Component {
@@ -36,6 +36,22 @@ class App extends React.Component {
     })
   }
 
+  showConfirmAlert2 = (name) => {
+    confirmAlert2({
+      customUI: ({ onClose }) => {
+        return (
+          <div className='custom-ui'>
+            <h1>Confirmation for file '{name}'</h1>
+            <p>You want to delete the file '{name}'?</p>
+            <button onClick={onClose}>No</button>
+            <button onClick={onClose}>Yes, Delete it!</button>
+          </div>
+        )
+      }
+    })
+  }
+
+
   render () {
     return (
       <div className='main-container'>
@@ -50,6 +66,11 @@ class App extends React.Component {
             <a href='javascript:;' className='button outline' onClick={this.handleClickCustomUI}>
               Show confirm Custom UI
             </a>
+            <a href='javascript:;' className='button' onClick={
+              () => { this.showConfirmAlert2('apple.gif'); this.showConfirmAlert2('orange.gif') }}>
+              Show multiple confirms
+            </a>
+
           </div>
         </section>
       </div>

src/index.js

@@ -190,3 +190,25 @@ export function confirmAlert (properties) {
   createSVGBlurReconfirm()
   createElementReconfirm(properties)
 }
+
+const confirmAlertWaitingQueue = [];
+export function confirmAlert2( props ) {
+    const { afterClose } = props;
+    const showNextAfterClose = () => {
+      if (afterClose) {
+        afterClose();
+      }
+      const next = confirmAlertWaitingQueue.shift();
+      if (next) {
+        confirmAlert(next);
+      }
+    };
+    props = { ...props, afterClose: showNextAfterClose };
+
+    const busy = document.body.children[0].classList.contains('react-confirm-alert-blur');
+    if (busy) {
+        confirmAlertWaitingQueue.push(props);
+    } else {
+      confirmAlert(props);
+    }
+}