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

app/components/confirm-dialog.js

@@ -50,21 +50,29 @@ 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) => {
+  const handleClose = toggle => () => {
+    toggle();
+    if (onClose) onClose();
+  };
+
+  return (
     <ModalComponent
       renderTrigger={renderTrigger}
       closeOnBackdropClick={false}
@@ -73,19 +81,19 @@ export const ConfirmDialogComponent = ({
       {toggle => (
         <Wrapper width={width}>
           <CloseIconWrapper>
-          <CloseIconImg src={CloseIcon} onClick={toggle} />
+            <CloseIconImg src={CloseIcon} onClick={handleClose(toggle)} />
           </CloseIconWrapper>
           <TitleWrapper>
             <TextComponent value={title} align='center' />
           </TitleWrapper>
           <Divider opacity={0.3} />
-        {React.Children.map(children, _ => _)}
+          {children(handleClose(toggle))}
           {showButtons && (
             <>
               <Btn label='Confirm' onClick={onConfirm} isLoading={isLoading} />
               <Btn
                 label='Cancel'
-              onClick={toggle}
+                onClick={handleClose(toggle)}
                 variant='secondary'
                 disabled={isLoading}
               />
@@ -95,9 +103,11 @@ export const ConfirmDialogComponent = ({
       )}
     </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>