Add acknowledge checkbox option #94
Conversation
README.md
Outdated
| | **`isAcknowledgeCheckbox`** | `boolean` | `false` | If enabled, it shows the acknowledge checkbox and disables the confirm button while the checkbox is unchecked.| | ||
| | **`acknowledgeCheckboxLabel`** | `string` | `Please confirm` | Acknowledge checkbox label | |
There was a problem hiding this comment.
I would merge these two options. Let's make it acknowledgement string that is the actual label and enables the feature (or perhaps it should be arbitrary node, since Material UI allows that).
Then we have acknowledgementFormControlLabelProps and acknowledgementCheckboxProps.
test/useConfirm.test.js
Outdated
| />, | ||
| ); | ||
|
|
||
| for (let i = 0; i <= 5; i++) { |
There was a problem hiding this comment.
We only need to do this twice.
src/ConfirmationDialog.js
Outdated
| confirmationKeyword && ( | ||
| <DialogContent {...contentProps}>{confirmationContent}</DialogContent> | ||
| acknowledgeCheckbox && ( | ||
| <DialogContent {...contentProps}>{acknowledgeCheckbox}</DialogContent> |
There was a problem hiding this comment.
We should have both in the alternative path, something like this:
(confirmationKeyword || acknowledgeCheckbox) && (
<DialogContent {...contentProps}>
{confirmationContent}
{acknowledgeCheckbox}
</DialogContent>
)
|
Looks good, just a couple comments :) |
@jonatanklosko Thank you for code review and suggestions! I believe all comments resolved =) |
README.md
Outdated
| @@ -97,6 +97,9 @@ representing the user choice (resolved on confirmation and rejected on cancellat | |||
| | **`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. | | |||
| | **`acknowledgement`** | `boolean | string` | `false` | If `true`, it shows the acknowledge checkbox with default label `Please confirm` and disables the confirm button while the checkbox is unchecked. If `string` it will show this string as checkbox label. | | |||
There was a problem hiding this comment.
Let's make it always a string (default to undefined), it's a rather specific use case, so I think usually it's going to be a specific text as well :)
|
Great, one last comment and we can ship! |
Thanks for the comment! |
|
Released in v3.0.12 :) |
|
Super sick, I was looking for exactly this and was pleasantly surprised to see it shipped just two weeks ago :) |
According #92
Add an acknowledge checkbox option.
Until this checkbox is unchecked the confirm button will be disabled. Additionally you can set the custom label, custom form control props and custom checkbox props.