feat(confirm-dialog): add render function in children

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) => (
+}: Props) => {
-  <ModalComponent
+  const handleClose = toggle => () => {
-    renderTrigger={renderTrigger}
+    toggle();
-    closeOnBackdropClick={false}
+    if (onClose) onClose();
-    closeOnEsc={false}
+  };
-  >
+
-    {toggle => (
+  return (
-      <Wrapper width={width}>
+    <ModalComponent
-        <CloseIconWrapper>
+      renderTrigger={renderTrigger}
-          <CloseIconImg src={CloseIcon} onClick={toggle} />
+      closeOnBackdropClick={false}
-        </CloseIconWrapper>
+      closeOnEsc={false}
-        <TitleWrapper>
+    >
-          <TextComponent value={title} align='center' />
+      {toggle => (
-        </TitleWrapper>
+        <Wrapper width={width}>
-        <Divider opacity={0.3} />
+          <CloseIconWrapper>
-        {React.Children.map(children, _ => _)}
+            <CloseIconImg src={CloseIcon} onClick={handleClose(toggle)} />
-        {showButtons && (
+          </CloseIconWrapper>
-          <>
+          <TitleWrapper>
-            <Btn label='Confirm' onClick={onConfirm} isLoading={isLoading} />
+            <TextComponent value={title} align='center' />
-            <Btn
+          </TitleWrapper>
-              label='Cancel'
+          <Divider opacity={0.3} />
-              onClick={toggle}
+          {children(handleClose(toggle))}
-              variant='secondary'
+          {showButtons && (
-              disabled={isLoading}
+            <>
-            />
+              <Btn label='Confirm' onClick={onConfirm} isLoading={isLoading} />
-          </>
+              <Btn
-        )}
+                label='Cancel'
-      </Wrapper>
+                onClick={handleClose(toggle)}
-    )}
+                variant='secondary'
-  </ModalComponent>
+                disabled={isLoading}
-);
+              />
+            </>
+          )}
+        </Wrapper>
+      )}
+    </ModalComponent>
+  );
+};
 
 ConfirmDialogComponent.defaultProps = {
   showButtons: true,
   width: 460,
   isLoading: false,
+  onClose: () => {},
 };

app/components/confirm-dialog.mdx

@@ -24,7 +24,7 @@ import { DoczWrapper } from '../theme.js'
         onConfirm={() => alert('Confirm')}
         renderTrigger={toggle => <button onClick={toggle}> Open! </button>}
       >
-        <div>Confirm content</div>
+        {toggle => <div>Confirm content</div>}
       </ConfirmDialogComponent>
     )}
   </DoczWrapper>