diff --git a/dev/index.js b/dev/index.js index 4a0f9b5..b4b8f43 100644 --- a/dev/index.js +++ b/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 ( +
+

Confirmation for file '{name}'

+

You want to delete the file '{name}'?

+ + +
+ ) + } + }) + } + + render () { return (
@@ -50,6 +66,11 @@ class App extends React.Component { Show confirm Custom UI + { this.showConfirmAlert2('apple.gif'); this.showConfirmAlert2('orange.gif') }}> + Show multiple confirms + +
diff --git a/src/index.js b/src/index.js index 6be0572..ed83027 100644 --- a/src/index.js +++ b/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); + } +} \ No newline at end of file