-
Notifications
You must be signed in to change notification settings - Fork 10
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
hideModal() from within Dialog component #48
Comments
Hi @barrettg, you can close the Dialog after performing the necessary logic using the callback function, for example const ConfirmationDialog: React.FC<Props> = ({ title, description, onConfirm, ...props }) => {
const handleConfirm = () => {
// Do stuff here
if (onConfirm) {
onConfirm();
}
};
return (
<Dialog {...props}>
<DialogTitle>{title}</DialogTitle>
<DialogContent>
<DialogContentText>{description}</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleConfirm} color="primary">
Ok
</Button>
</DialogActions>
</Dialog>
);
}; const modal = showModal(ConfirmationDialog, {
title: 'Hello World',
description: 'description text',
onConfirm: () => {
modal.hide();
}
}); I have an example of such ConfirmationDialog 🙂 mui-modal-provider/example/src/App.tsx Line 26 in 10ceefe
|
Hi, I'm using this module from Kotlin and unfortunately, it's impossible to access the I think it'd be better if the module can provide a way to reference the current id and/or a method to close/hide the dialog, even when we can ignore such an issue regarding non-JS languages, like when you want to make your dialog self-contained, so that the invoker doesn't have to concern about it implementation details. |
I'm also attempting to use this library using nextjs (without typescript) and I'm running into the same issue as @mysticfall. |
I was able to work around this issue when using nextjs (and it should work for @mysticfall as well). Turns out the const ConfirmationDialog: React.FC<Props> = ({ title, description, onConfirm, ...props }) => {
const handleConfirm = () => {
// Do stuff here
if (onConfirm) {
onConfirm();
}
props.onClose(); // Add this
};
return (
<Dialog {...props}>
<DialogTitle>{title}</DialogTitle>
<DialogContent>
<DialogContentText>{description}</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleConfirm} color="primary">
Ok
</Button>
</DialogActions>
</Dialog>
);
}; |
How do you do the same thing using a Modal (instead of Dialog)? |
Modal has almost the same API as Dialog. |
I'm wanting to create a self contained Dialog that has some logic in it as well. When the OK button is pressed, the business logic executes and the modal is closed. Is it possible to call hideModal from within the dialog itself?
Meanwhile somewhere else in my app:
Thanks for a great library!
The text was updated successfully, but these errors were encountered: