[RFC] Application Dialogs #3379
Replies: 2 comments
-
Did an initial exploratory implementation for crud pages and I think we can make some amendment to the RFC: A common use-case for something like the confirm dialog is to guard a destructive operation with an explicit confirmation. In many cases this operation is async. Ideally we'd show feedback to the user of the operation in progress. a common sense UX would be to turn the "Ok" button into a loading state at that point, until the operation finishes and the dialog can be closed. We could expand the API to include an asynchronous const dialogs = useDialogs()
const handleDeleteClick = React.useCallback(async () =>{
try {
await dialogs.confirm(`Do you want to delete ${item}?`, {
async onClose(confirmed) {
if (confirmed) {
await myDb.delete(item)
}
}
})
} catch (err) {
await dialog.alert(`Failed to delete: ${err.message}`);
}
}, [item, dialogs]) The |
Beta Was this translation helpful? Give feedback.
-
Reminds me of mui/material-ui#24759 |
Beta Was this translation helpful? Give feedback.
-
Which problem do we want to solve?
How do we want to solve it
useDialog
hook that returns methods for MUI versions of the system dialog and aopen
function to call a custom dialog imperatively. Example usage:More code examples on the PR preview docs
API
Customization
Write your own dialogs that can be used in the imperative API as well as with your own dialog state management solution. Custom dialog components take
open
andonClose
props and apayload
. They return a result in theonClose
handler.This custom dialog can now be used with the
dialog.open()
method. Pass it a payload and get a Promise back for the result that was passed toonClose
.The Dialog stack
The dialogs should behave like a stack. Meaning:
DialogProvider
component.DialogProvider
created dialogs render before user content. Dialogs rendered by user content render on top of any dialog managed byDialogProvider
.Dialog
exclusively.Closing a dialog programmatically
The
close
method allows for programmatically closing a dialog and resolving its promise. It takes the promise returned from anopen
call and closes the dialog associated with it. The function will error if a promise is passed that is not returned from anopen
call. If the dialog has already been closed, the function is a no-op. Since closing the dialog results in the promise to be resolved, one needs to pass a valid dialog result.Beta Was this translation helpful? Give feedback.
All reactions