Skip to content

Commit

Permalink
Format
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonatanklosko
jonatanklosko committed Mar 11, 2023
1 parent 4fabe79 commit ebbc04e
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 40 deletions.
37 changes: 18 additions & 19 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,25 +81,24 @@ representing the user choice (resolved on confirmation and rejected on cancellat

##### Options

| Name | Type | Default | Description |
|-----------------------------------------| ----------- | ----------------- |----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **`title`** | `ReactNode` | `'Are you sure?'` | Dialog title. |
| **`description`** | `ReactNode` | `''` | Dialog content, automatically wrapped in `DialogContentText`. |
| **`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://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. |
| **`confirmationKeyword`** | `string` | `undefined` | If provided the confirmation button will be disabled by default and an additional textfield will be rendered. The confirmation button will only be enabled when the contents of the textfield match the value of `confirmationKeyword` |
| **`confirmationKeywordTextFieldProps`** | `object` | `{}` | Material-UI [TextField](https://mui.com/material-ui/api/text-field/) props for the confirmation keyword textfield. |
| **`hideCancelButton`** | `boolean` | `false` | Whether to hide the cancel button. |
| **`buttonOrder`** | `string[]` | `['cancel','confirm']` | Specify the order of confirm and cancel buttons. |

| Name | Type | Default | Description |
| --------------------------------------- | ----------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`title`** | `ReactNode` | `'Are you sure?'` | Dialog title. |
| **`description`** | `ReactNode` | `''` | Dialog content, automatically wrapped in `DialogContentText`. |
| **`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://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. |
| **`confirmationKeyword`** | `string` | `undefined` | If provided the confirmation button will be disabled by default and an additional textfield will be rendered. The confirmation button will only be enabled when the contents of the textfield match the value of `confirmationKeyword` |
| **`confirmationKeywordTextFieldProps`** | `object` | `{}` | Material-UI [TextField](https://mui.com/material-ui/api/text-field/) props for the confirmation keyword textfield. |
| **`hideCancelButton`** | `boolean` | `false` | Whether to hide the cancel button. |
| **`buttonOrder`** | `string[]` | `["cancel", "confirm"]` | Specify the order of confirm and cancel buttons. |

## Useful notes

Expand Down
2 changes: 1 addition & 1 deletion src/ConfirmProvider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const DEFAULT_OPTIONS = {
allowClose: true,
confirmationKeywordTextFieldProps: {},
hideCancelButton: false,
buttonOrder: ['cancel','confirm'],
buttonOrder: ["cancel", "confirm"],
};

const buildOptions = (defaultOptions, options) => {
Expand Down
47 changes: 28 additions & 19 deletions src/ConfirmationDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,23 +52,34 @@ const ConfirmationDialog = ({
</>
);

const dialogActions = buttonOrder.map(buttonType => {
if (buttonType === 'cancel') {
return !hideCancelButton && <Button {...cancellationButtonProps} onClick={onCancel}>
{cancellationText}
</Button>
} else if (buttonType === 'confirm') {
return (<Button
color="primary"
disabled={confirmationButtonDisabled}
{...confirmationButtonProps}
onClick={onConfirm}
>
{confirmationText}
</Button>)
} else {
throw new Error('Supported button types are only `confirm` and `cancel`')
const dialogActions = buttonOrder.map((buttonType) => {
if (buttonType === "cancel") {
return (
!hideCancelButton && (
<Button key="cancel" {...cancellationButtonProps} onClick={onCancel}>
{cancellationText}
</Button>
)
);
}

if (buttonType === "confirm") {
return (
<Button
key="confirm"
color="primary"
disabled={confirmationButtonDisabled}
{...confirmationButtonProps}
onClick={onConfirm}
>
{confirmationText}
</Button>
);
}

throw new Error(
`Supported button types are only "confirm" and "cancel", got: ${buttonType}`
);
});

return (
Expand All @@ -94,9 +105,7 @@ const ConfirmationDialog = ({
<DialogContent {...contentProps}>{confirmationContent}</DialogContent>
)
)}
<DialogActions {...dialogActionsProps}>
{dialogActions}
</DialogActions>
<DialogActions {...dialogActionsProps}>{dialogActions}</DialogActions>
</Dialog>
);
};
Expand Down
2 changes: 1 addition & 1 deletion stories/index.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ const WithReversedButtons = () => {
return (
<Button
onClick={() => {
confirm({ buttonOrder: ['confirm','cancel'] }).then(
confirm({ buttonOrder: ["confirm", "cancel"] }).then(
confirmationAction
);
}}
Expand Down

0 comments on commit ebbc04e

Please sign in to comment.