Add an option to disable natural close

README.md

@@ -97,6 +97,7 @@ representing the user choice (resolved on confirmation and rejected on cancellat
 | **`cancellationButtonProps`** | `object` | `{}` | Material-UI [Button](https://material-ui.com/api/dialog/#props) props for the cancellation button. |
 | **`titleProps`** | `object` | `{}` | Material-UI [DialogTitle](https://mui.com/api/dialog-title/#props) props for the dialog title. |
 | **`contentProps`** | `object` | `{}` | Material-UI [DialogContent](https://mui.com/api/dialog-content/#props) props for the dialog content. |
+| **`allowClose`** | `boolean` | `true` | Whether natural close (escape or backdrop click) should close the dialog. When set to `false` force the user to either cancel or confirm explicitly. |
 
 ## Useful notes
 

src/ConfirmProvider.js

@@ -13,6 +13,7 @@ const DEFAULT_OPTIONS = {
   cancellationButtonProps: {},
   titleProps: {},
   contentProps: {},
+  allowClose: true,
 };
 
 const buildOptions = (defaultOptions, options) => {

src/ConfirmationDialog.js

@@ -18,10 +18,11 @@ const ConfirmationDialog = ({ open, options, onCancel, onConfirm, onClose }) =>
     cancellationButtonProps,
     titleProps,
     contentProps,
+    allowClose,
   } = options;
 
   return (
-    <Dialog fullWidth {...dialogProps} open={open} onClose={onClose}>
+    <Dialog fullWidth {...dialogProps} open={open} onClose={allowClose ? onClose : null}>
       {title && (
         <DialogTitle {...titleProps}>{title}</DialogTitle>
       )}

src/index.d.ts

@@ -15,6 +15,7 @@ export interface ConfirmOptions {
   dialogProps?: Omit<DialogProps, "open">;
   confirmationButtonProps?: ButtonProps;
   cancellationButtonProps?: ButtonProps;
+  allowClose?: boolean;
 }
 
 export interface ConfirmProviderProps {

stories/index.stories.js

@@ -8,6 +8,7 @@ import { storiesOf } from '@storybook/react';
 import { ConfirmProvider, useConfirm } from '../src/index';
 
 const confirmationAction = action('confirmed');
+const cancellationAction = action('cancelled');
 
 const Basic = () => {
   const confirm = useConfirm();
@@ -82,7 +83,7 @@ const WithCustomCallbacks = () => {
     <Button onClick={() => {
       confirm()
         .then(confirmationAction)
-        .catch(action('cancelled'))
+        .catch(cancellationAction)
         .finally(action('closed'));
     }}>
       Click
@@ -134,6 +135,21 @@ const WithCustomContent = () => {
   );
 };
 
+const WithNaturalCloseDisabled = () => {
+  const confirm = useConfirm();
+  return (
+    <Button onClick={() => {
+      confirm({
+        allowClose: false,
+      })
+      .then(confirmationAction)
+      .catch(cancellationAction);
+    }}>
+      Click
+    </Button>
+  );
+};
+
 storiesOf('Confirmation dialog', module)
   .addDecorator(getStory => (
     <ConfirmProvider>{getStory()}</ConfirmProvider>
@@ -145,4 +161,5 @@ storiesOf('Confirmation dialog', module)
   .add('with custom button props', () => <WithCustomButtonProps />)
   .add('with custom callbacks', () => <WithCustomCallbacks />)
   .add('with custom elements', () => <WithCustomElements />)
-  .add('with custom dialog content', () => <WithCustomContent />);
+  .add('with custom dialog content', () => <WithCustomContent />)
+  .add('with natural close disabled', () => <WithNaturalCloseDisabled />);