Add customizable DialogActions props

jonatanklosko · Oct 5, 2022 · 2f81a9d · 2f81a9d
1 parent 913cf80
commit 2f81a9d
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -92,9 +92,10 @@ representing the user choice (resolved on confirmation and rejected on cancellat
 | **`content`** | `ReactNode` | `null` | Dialog content, same as `description` but not wrapped in `DialogContentText`. Supersedes `description` if present. |
 | **`confirmationText`** | `ReactNode` | `'Ok'` | Confirmation button caption. |
 | **`cancellationText`** | `ReactNode` | `'Cancel'` | Cancellation button caption. |
-| **`dialogProps`** | `object` | `{}` | Material-UI [Dialog](https://material-ui.com/api/dialog/#props) props. |
-| **`confirmationButtonProps`** | `object` | `{}` | Material-UI [Button](https://material-ui.com/api/button/#props) props for the confirmation button. |
-| **`cancellationButtonProps`** | `object` | `{}` | Material-UI [Button](https://material-ui.com/api/dialog/#props) props for the cancellation button. |
+| **`dialogProps`** | `object` | `{}` | Material-UI [Dialog](https://mui.com/material-ui/api/dialog/#props) props. |
+| **`dialogActionsProps`** | `object` | `{}` | Material-UI [DialogActions](https://mui.com/material-ui/api/dialog-actions/#props) props. |
+| **`confirmationButtonProps`** | `object` | `{}` | Material-UI [Button](https://mui.com/material-ui/api/button/#props) props for the confirmation button. |
+| **`cancellationButtonProps`** | `object` | `{}` | Material-UI [Button](https://mui.com/material-ui/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. |

diff --git a/src/ConfirmProvider.js b/src/ConfirmProvider.js
@@ -9,6 +9,7 @@ const DEFAULT_OPTIONS = {
   confirmationText: 'Ok',
   cancellationText: 'Cancel',
   dialogProps: {},
+  dialogActionsProps: {},
   confirmationButtonProps: {},
   cancellationButtonProps: {},
   titleProps: {},
@@ -21,6 +22,10 @@ const buildOptions = (defaultOptions, options) => {
     ...(defaultOptions.dialogProps || DEFAULT_OPTIONS.dialogProps),
     ...(options.dialogProps || {}),
   };
+  const dialogActionsProps = {
+    ...(defaultOptions.dialogActionsProps || DEFAULT_OPTIONS.dialogActionsProps),
+    ...(options.dialogActionsProps || {}),
+  };
   const confirmationButtonProps = {
     ...(defaultOptions.confirmationButtonProps || DEFAULT_OPTIONS.confirmationButtonProps),
     ...(options.confirmationButtonProps || {}),
@@ -43,6 +48,7 @@ const buildOptions = (defaultOptions, options) => {
     ...defaultOptions,
     ...options,
     dialogProps,
+    dialogActionsProps,
     confirmationButtonProps,
     cancellationButtonProps,
     titleProps,

diff --git a/src/ConfirmationDialog.js b/src/ConfirmationDialog.js
@@ -14,6 +14,7 @@ const ConfirmationDialog = ({ open, options, onCancel, onConfirm, onClose }) =>
     confirmationText,
     cancellationText,
     dialogProps,
+    dialogActionsProps,
     confirmationButtonProps,
     cancellationButtonProps,
     titleProps,
@@ -37,7 +38,7 @@ const ConfirmationDialog = ({ open, options, onCancel, onConfirm, onClose }) =>
           </DialogContent>
         )
       )}
-      <DialogActions>
+      <DialogActions {...dialogActionsProps}>
         <Button {...cancellationButtonProps} onClick={onCancel}>
           {cancellationText}
         </Button>

diff --git a/src/index.d.ts b/src/index.d.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { DialogProps } from '@mui/material/Dialog';
+import { DialogActionsProps } from '@mui/material/DialogActions';
 import { DialogTitleProps } from '@mui/material/DialogTitle';
 import { DialogContentProps } from '@mui/material/DialogContent';
 import { ButtonProps } from '@mui/material/Button';
@@ -13,6 +14,7 @@ export interface ConfirmOptions {
   confirmationText?: React.ReactNode;
   cancellationText?: React.ReactNode;
   dialogProps?: Omit<DialogProps, "open">;
+  dialogActionsProps?: DialogActionsProps;
   confirmationButtonProps?: ButtonProps;
   cancellationButtonProps?: ButtonProps;
   allowClose?: boolean;

diff --git a/stories/index.stories.js b/stories/index.stories.js
@@ -62,6 +62,20 @@ const WithDialogProps = () => {
   );
 };
 
+const WithDialogActionsProps = () => {
+  const confirm = useConfirm();
+  return (
+    <Button onClick={() => {
+      confirm({
+        dialogActionsProps: { sx: { justifyContent: "flex-start" } },
+      })
+      .then(confirmationAction);
+    }}>
+      Click
+    </Button>
+  );
+};
+
 const WithCustomButtonProps = () => {
   const confirm = useConfirm();
   return (
@@ -158,6 +172,7 @@ storiesOf('Confirmation dialog', module)
   .add('with description', () => <WithDescription />)
   .add('with custom text', () => <WithCustomText />)
   .add('with custom dialog props', () => <WithDialogProps />)
+  .add('with custom dialog actions props', () => <WithDialogActionsProps />)
   .add('with custom button props', () => <WithCustomButtonProps />)
   .add('with custom callbacks', () => <WithCustomCallbacks />)
   .add('with custom elements', () => <WithCustomElements />)