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<*>,
|
renderTrigger: (() => void) => Element<*>,
|
||||||
title: string,
|
title: string,
|
||||||
onConfirm: () => void,
|
onConfirm: () => void,
|
||||||
|
onClose?: () => void,
|
||||||
showButtons?: boolean,
|
showButtons?: boolean,
|
||||||
width?: number,
|
width?: number,
|
||||||
isLoading?: boolean,
|
isLoading?: boolean,
|
||||||
children: Element<*>,
|
children: (() => void) => Element<*>,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const ConfirmDialogComponent = ({
|
export const ConfirmDialogComponent = ({
|
||||||
children,
|
children,
|
||||||
title,
|
title,
|
||||||
onConfirm,
|
onConfirm,
|
||||||
|
onClose,
|
||||||
renderTrigger,
|
renderTrigger,
|
||||||
showButtons,
|
showButtons,
|
||||||
isLoading,
|
isLoading,
|
||||||
width,
|
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 = {
|
ConfirmDialogComponent.defaultProps = {
|
||||||
showButtons: true,
|
showButtons: true,
|
||||||
width: 460,
|
width: 460,
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
|
onClose: () => {},
|
||||||
};
|
};
|
||||||
|
|
|
@ -24,7 +24,7 @@ import { DoczWrapper } from '../theme.js'
|
||||||
onConfirm={() => alert('Confirm')}
|
onConfirm={() => alert('Confirm')}
|
||||||
renderTrigger={toggle => <button onClick={toggle}> Open! </button>}
|
renderTrigger={toggle => <button onClick={toggle}> Open! </button>}
|
||||||
>
|
>
|
||||||
<div>Confirm content</div>
|
{toggle => <div>Confirm content</div>}
|
||||||
</ConfirmDialogComponent>
|
</ConfirmDialogComponent>
|
||||||
)}
|
)}
|
||||||
</DoczWrapper>
|
</DoczWrapper>
|
||||||
|
|
Loading…
Reference in New Issue