diff --git a/app/components/confirm-dialog.js b/app/components/confirm-dialog.js
index e01a021..64cad42 100644
--- a/app/components/confirm-dialog.js
+++ b/app/components/confirm-dialog.js
@@ -50,54 +50,64 @@ type Props = {
renderTrigger: (() => void) => Element<*>,
title: string,
onConfirm: () => void,
+ onClose?: () => void,
showButtons?: boolean,
width?: number,
isLoading?: boolean,
- children: Element<*>,
+ children: (() => void) => Element<*>,
};
export const ConfirmDialogComponent = ({
children,
title,
onConfirm,
+ onClose,
renderTrigger,
showButtons,
isLoading,
width,
-}: Props) => (
-
- {toggle => (
-
-
-
-
-
-
-
-
- {React.Children.map(children, _ => _)}
- {showButtons && (
- <>
-
-
- >
- )}
-
- )}
-
-);
+}: Props) => {
+ const handleClose = toggle => () => {
+ toggle();
+ if (onClose) onClose();
+ };
+
+ return (
+
+ {toggle => (
+
+
+
+
+
+
+
+
+ {children(handleClose(toggle))}
+ {showButtons && (
+ <>
+
+
+ >
+ )}
+
+ )}
+
+ );
+};
ConfirmDialogComponent.defaultProps = {
showButtons: true,
width: 460,
isLoading: false,
+ onClose: () => {},
};
diff --git a/app/components/confirm-dialog.mdx b/app/components/confirm-dialog.mdx
index 527f4b6..43a2851 100644
--- a/app/components/confirm-dialog.mdx
+++ b/app/components/confirm-dialog.mdx
@@ -24,7 +24,7 @@ import { DoczWrapper } from '../theme.js'
onConfirm={() => alert('Confirm')}
renderTrigger={toggle => }
>
-
Confirm content
+ {toggle => Confirm content
}
)}