[FEAT] Embed forms in confirm dialog

[jsakas]

It would be amazing if this library supported embedding form inputs and other layout elements for purposes such as:

• typing the name of a resource before deletion
• entering a password to confirm account change

[jonatanklosko]

Hey! The problem with those use cases is that they are likely to vary from case to case and it would be hard to be generic enough. For instance, for entering password you'd make a call to the API before closing the dialog and react differently depending on the response, so it's highly dependent on your setup. I can imagine the library taking a sufficient number of callbacks, but then its API would likely introduce more complexity than needed, as you may as well create a dialog component specific to your use case and use throughout the app.

I may consider a more extendable solution in the future, but for now I'd rather stick to the most common confirmation case.

[unrealcloud]

Hey guys! Since this PR #14, I'm able to embed forms this way:

        confirm({
            title: 'Reauthenticate',
            description: <LoginForm onLogin={() => setShowLoginModal(false)} />,     <-- MY FORM IS HERE
            dialogProps: {
              open: showLoginModal,                         <-- CONTROLLED DIALOG
            },
            confirmationButtonProps: {
              style: {
                display: 'none',                     <-- HIDDEN CONFIRMATION BUTTON SINCE MY FORM ALREADY HAS ITS BUTTON
              },
            },
            cancellationButtonProps: {
              fullWidth: true,
              variant: 'contained',
            },
          })

It's all working perfectly, as you can see in this screenshot:

EXCEPT for those errors:

Since Material UI's <DialogContentText /> passes all its props to the underlying Typography component, it means we can use it as

<DialogContentText component="div">
    // now we can put ANYTHING here :)
</DialogContentText>

Thoughts?

EDIT: Actually passing the open prop to dialogProps doesn't allow me to control the Confirmation dialog's state! :( If it could, it'd be easy to render forms in the modal as above.

[jonatanklosko]

EDIT: Actually passing the open prop to dialogProps doesn't allow me to control the Confirmation dialog's state! :( If it could, it'd be easy to render forms in the modal as above.

Yeah, the dialog is already controlled by this package. Forms seems like a case that needs more customization, perhaps this comment will help.

[jonatanklosko]

This is out of the scope of this package, as it means to maximally encapsulate the dialog markup. For more complex use cases I suggest an alternative approach outlined here.