diff --git a/README.md b/README.md index 9ff2a2c..95896b9 100644 --- a/README.md +++ b/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 diff --git a/src/ConfirmProvider.js b/src/ConfirmProvider.js index 3543a7f..05a85db 100644 --- a/src/ConfirmProvider.js +++ b/src/ConfirmProvider.js @@ -13,6 +13,7 @@ const DEFAULT_OPTIONS = { cancellationButtonProps: {}, titleProps: {}, contentProps: {}, + allowClose: true, }; const buildOptions = (defaultOptions, options) => { diff --git a/src/ConfirmationDialog.js b/src/ConfirmationDialog.js index 594f452..b1aebb0 100644 --- a/src/ConfirmationDialog.js +++ b/src/ConfirmationDialog.js @@ -18,10 +18,11 @@ const ConfirmationDialog = ({ open, options, onCancel, onConfirm, onClose }) => cancellationButtonProps, titleProps, contentProps, + allowClose, } = options; return ( - + {title && ( {title} )} diff --git a/src/index.d.ts b/src/index.d.ts index a2bc822..9d1d575 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -15,6 +15,7 @@ export interface ConfirmOptions { dialogProps?: Omit; confirmationButtonProps?: ButtonProps; cancellationButtonProps?: ButtonProps; + allowClose?: boolean; } export interface ConfirmProviderProps { diff --git a/stories/index.stories.js b/stories/index.stories.js index fe81bd4..34ea1e3 100644 --- a/stories/index.stories.js +++ b/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 = () => { + ); +}; + storiesOf('Confirmation dialog', module) .addDecorator(getStory => ( {getStory()} @@ -145,4 +161,5 @@ storiesOf('Confirmation dialog', module) .add('with custom button props', () => ) .add('with custom callbacks', () => ) .add('with custom elements', () => ) - .add('with custom dialog content', () => ); + .add('with custom dialog content', () => ) + .add('with natural close disabled', () => );