hideModal() from within Dialog component

[barrettg]

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?

const ConfirmationDialog: React.FC<Props> = ({ title, description, ...props }) => {
    const { hideModal } = useModal();
    const handleClose = () => {
        // Do stuff here
        ...
        hideModal(); // What is the modal id?
    };
    return (
        <Dialog {...props}>
            <DialogTitle>{title}</DialogTitle>
            <DialogContent>
                <DialogContentText>{description}</DialogContentText>
            </DialogContent>
            <DialogActions>
                <Button onClick={handleClose} color="primary">
                    Ok
                </Button>
            </DialogActions>
        </Dialog>
    );
};

Meanwhile somewhere else in my app:

showModal(ConfirmationDialog, {
  title: 'Hello World',
  description: 'description text',
});

Thanks for a great library!

[Quernest]

Hi @barrettg, you can close the Dialog after performing the necessary logic using the callback function, for example onConfirm;

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

const modal = showModal(ConfirmationDialog, {

[mysticfall]

Hi, I'm using this module from Kotlin and unfortunately, it's impossible to access the modal variable from within the closure in that language.

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.

[storrdev]

I'm also attempting to use this library using nextjs (without typescript) and I'm running into the same issue as @mysticfall.

[storrdev]

I was able to work around this issue when using nextjs (and it should work for @mysticfall as well).

Turns out the {...props} that are passed to the Dialog component contain the onClose handler you are looking for. See my example below.

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>
    );
};

[rafaelfaria]

How do you do the same thing using a Modal (instead of Dialog)?

[Quernest]

How do you do the same thing using a Modal (instead of Dialog)?

Modal has almost the same API as Dialog.
https://mui.com/api/modal/