hidden rampart
I need to disable the close button and outside clicks on a Mantine context modal only while a mutation is pending, but allow closing at all other times.
I am opening the modal like so:
const openDeleteProjectModal = () =>
openContextModal({
modal: "deleteProject",
title: "Delete Project",
innerProps: { project, onSuccess: () => setSelectedProject(null) },
});
The delete modal itself is quite simple:
export default function DeleteProjectModal({
context,
id,
innerProps,
}: ContextModalProps<{ project: Project; onSuccess?: () => void }>) {
const { project, onSuccess } = innerProps;
const queryClient = useQueryClient();
const deleteProjectMutation = useDeleteApiProjectsProjectId({
mutation: {
onSuccess: async (deletedProject) => {
await queryClient.invalidateQueries({ queryKey: getGetApiProjectsQueryKey() });
context.closeModal(id);
showSuccessNotification(`Project "${deletedProject.name}" deleted successfully!`);
onSuccess?.();
},
onError: () => showErrorNotification("Failed to delete the project. Please try again."),
},
});
const handleOnConfirm = async () => {
await deleteProjectMutation.mutateAsync({ projectId: project.id });
};
return (
<>
<Modal.Text>{`Are you sure you want to delete the project "${project.name}?"`}</Modal.Text>
<Modal.ButtonGroup>
<Modal.CancelButton disabled={deleteProjectMutation.isPending} onClick={() => context.closeModal(id)}>
No, don't delete it
</Modal.CancelButton>
<Modal.DeleteButton onClick={handleOnConfirm} loading={deleteProjectMutation.isPending}>
Delete Project
</Modal.DeleteButton>
</Modal.ButtonGroup>
</>
);
}
Is there a way to conditionally disable closing behaviors while a mutation is active?
This seems like a common use-case to me, so I'm assuming it's possible somehow.
robust pumice
