diff --git a/app/components/confirm-dialog.js b/app/components/confirm-dialog.js
index a9e1dc5..a99fb7a 100644
--- a/app/components/confirm-dialog.js
+++ b/app/components/confirm-dialog.js
@@ -5,6 +5,7 @@ import styled from 'styled-components';
import { TextComponent } from './text';
import { Button } from './button';
import { Divider } from './divider';
+import { ModalComponent } from './modal';
import CloseIcon from '../assets/images/close_icon.svg';
@@ -46,7 +47,7 @@ const Btn = styled(Button)`
`;
type Props = {
- handleClose: () => void,
+ renderTrigger: (() => void) => Element<*>,
title: string,
onConfirm: () => void,
showButtons?: boolean,
@@ -58,26 +59,34 @@ export const ConfirmDialogComponent = ({
children,
title,
onConfirm,
- handleClose,
+ renderTrigger,
showButtons,
width,
}: Props) => (
-
-
-
-
-
-
-
-
- {React.Children.map(children, _ => _)}
- {showButtons && (
- <>
-
-
- >
+
+ {toggle => (
+
+
+
+
+
+
+
+
+ {React.Children.map(children, _ => _)}
+ {showButtons && (
+ <>
+
+
+ >
+ )}
+
)}
-
+
);
ConfirmDialogComponent.defaultProps = {
diff --git a/app/components/confirm-dialog.mdx b/app/components/confirm-dialog.mdx
index 4b4708a..527f4b6 100644
--- a/app/components/confirm-dialog.mdx
+++ b/app/components/confirm-dialog.mdx
@@ -22,7 +22,7 @@ import { DoczWrapper } from '../theme.js'
alert('Confirm')}
- handleClose={() => alert('Close')}
+ renderTrigger={toggle => }
>
Confirm content