fix(dialog): prevent click propagation on ConfirmationDialog

Author: assisrafael

src/dialog/ConfirmationDialog.jsx

@@ -1,19 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Dialog } from './Dialog';
-import { awaitForAsyncTask } from '../utils/event-handlers';
+import { awaitForAsyncTask, safeClick } from '../utils/event-handlers';
 
-export function ConfirmationDialog({ title, message, children, onProceed, onCancel, cancelLabel, proceedLabel }) {
+export function ConfirmationDialog({
+  title,
+  message,
+  children,
+  onProceed,
+  onCancel,
+  cancelLabel,
+  proceedLabel,
+  proceedType,
+}) {
   return (
     <Dialog
       title={title}
       body={message}
       footer={({ close }) => (
         <>
-          <button type="button" className="btn btn-secondary" onClick={awaitForAsyncTask(onCancel, close)}>
+          <button type="button" className="btn btn-secondary" onClick={safeClick(awaitForAsyncTask(onCancel, close))}>
             {cancelLabel}
           </button>
-          <button type="button" className="btn btn-primary" onClick={awaitForAsyncTask(onProceed, close)}>
+          <button
+            type="button"
+            className={`btn btn-${proceedType}`}
+            onClick={safeClick(awaitForAsyncTask(onProceed, close))}
+          >
             {proceedLabel}
           </button>
         </>
@@ -30,6 +43,7 @@ ConfirmationDialog.defaultProps = {
   title: 'Atention required',
   cancelLabel: 'Cancel',
   proceedLabel: 'Proceed',
+  proceedType: 'primary',
 };
 
 ConfirmationDialog.propTypes = {
@@ -40,4 +54,5 @@ ConfirmationDialog.propTypes = {
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   cancelLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   proceedLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  proceedType: PropTypes.oneOf(['primary', 'danger', 'success']),
 };