feat(confirm-dialog): add render function in children
This commit is contained in:
parent
7a5969e783
commit
d7edbb2f13
|
@ -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) => (
|
||||
<ModalComponent
|
||||
renderTrigger={renderTrigger}
|
||||
closeOnBackdropClick={false}
|
||||
closeOnEsc={false}
|
||||
>
|
||||
{toggle => (
|
||||
<Wrapper width={width}>
|
||||
<CloseIconWrapper>
|
||||
<CloseIconImg src={CloseIcon} onClick={toggle} />
|
||||
</CloseIconWrapper>
|
||||
<TitleWrapper>
|
||||
<TextComponent value={title} align='center' />
|
||||
</TitleWrapper>
|
||||
<Divider opacity={0.3} />
|
||||
{React.Children.map(children, _ => _)}
|
||||
{showButtons && (
|
||||
<>
|
||||
<Btn label='Confirm' onClick={onConfirm} isLoading={isLoading} />
|
||||
<Btn
|
||||
label='Cancel'
|
||||
onClick={toggle}
|
||||
variant='secondary'
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Wrapper>
|
||||
)}
|
||||
</ModalComponent>
|
||||
);
|
||||
}: Props) => {
|
||||
const handleClose = toggle => () => {
|
||||
toggle();
|
||||
if (onClose) onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<ModalComponent
|
||||
renderTrigger={renderTrigger}
|
||||
closeOnBackdropClick={false}
|
||||
closeOnEsc={false}
|
||||
>
|
||||
{toggle => (
|
||||
<Wrapper width={width}>
|
||||
<CloseIconWrapper>
|
||||
<CloseIconImg src={CloseIcon} onClick={handleClose(toggle)} />
|
||||
</CloseIconWrapper>
|
||||
<TitleWrapper>
|
||||
<TextComponent value={title} align='center' />
|
||||
</TitleWrapper>
|
||||
<Divider opacity={0.3} />
|
||||
{children(handleClose(toggle))}
|
||||
{showButtons && (
|
||||
<>
|
||||
<Btn label='Confirm' onClick={onConfirm} isLoading={isLoading} />
|
||||
<Btn
|
||||
label='Cancel'
|
||||
onClick={handleClose(toggle)}
|
||||
variant='secondary'
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Wrapper>
|
||||
)}
|
||||
</ModalComponent>
|
||||
);
|
||||
};
|
||||
|
||||
ConfirmDialogComponent.defaultProps = {
|
||||
showButtons: true,
|
||||
width: 460,
|
||||
isLoading: false,
|
||||
onClose: () => {},
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue