121 lines
2.7 KiB
JavaScript
121 lines
2.7 KiB
JavaScript
// @flow
|
|
|
|
import React, { Fragment, type Element } from 'react';
|
|
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';
|
|
|
|
const Wrapper = styled.div`
|
|
display: flex;
|
|
width: ${(props: PropsWithTheme<{ width: number }>) => `${String(props.width)}px`};
|
|
background-color: ${props => props.theme.colors.background};
|
|
flex-direction: column;
|
|
align-items: center;
|
|
border-radius: 6px;
|
|
box-shadow: 0px 0px 30px 0px black;
|
|
position: relative;
|
|
`;
|
|
|
|
const CloseIconWrapper = styled.div`
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: flex-end;
|
|
justify-content: flex-end;
|
|
position: absolute;
|
|
`;
|
|
|
|
const TitleWrapper = styled.div`
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
`;
|
|
|
|
const CloseIconImg = styled.img`
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-top: 12px;
|
|
margin-right: 12px;
|
|
cursor: pointer;
|
|
`;
|
|
|
|
const Btn = styled(Button)`
|
|
width: 95%;
|
|
margin-bottom: 10px;
|
|
`;
|
|
|
|
type Props = {
|
|
renderTrigger: (() => void) => Element<*>,
|
|
title: string,
|
|
onConfirm: () => void,
|
|
onClose?: () => void,
|
|
showButtons?: boolean,
|
|
width?: number,
|
|
isLoading?: boolean,
|
|
children: (() => void) => Element<*>,
|
|
};
|
|
|
|
export const ConfirmDialogComponent = ({
|
|
children,
|
|
title,
|
|
onConfirm,
|
|
onClose,
|
|
renderTrigger,
|
|
showButtons,
|
|
isLoading,
|
|
width,
|
|
}: Props) => {
|
|
const handleClose = toggle => () => {
|
|
toggle();
|
|
if (onClose) onClose();
|
|
};
|
|
|
|
return (
|
|
<ModalComponent
|
|
id='confirm-dialog-modal-wrapper'
|
|
renderTrigger={renderTrigger}
|
|
closeOnBackdropClick={false}
|
|
closeOnEsc={false}
|
|
>
|
|
{toggle => (
|
|
<Wrapper width={Number(width)}>
|
|
<CloseIconWrapper>
|
|
<CloseIconImg src={CloseIcon} onClick={handleClose(toggle)} />
|
|
</CloseIconWrapper>
|
|
<TitleWrapper>
|
|
<TextComponent value={title} align='center' />
|
|
</TitleWrapper>
|
|
<Divider opacity={0.3} />
|
|
{children(handleClose(toggle))}
|
|
{showButtons && (
|
|
<Fragment>
|
|
<Btn
|
|
id='confirm-modal-button'
|
|
label='Confirm'
|
|
onClick={onConfirm}
|
|
isLoading={isLoading}
|
|
/>
|
|
<Btn
|
|
label='Cancel'
|
|
onClick={handleClose(toggle)}
|
|
variant='secondary'
|
|
disabled={isLoading}
|
|
/>
|
|
</Fragment>
|
|
)}
|
|
</Wrapper>
|
|
)}
|
|
</ModalComponent>
|
|
);
|
|
};
|
|
|
|
ConfirmDialogComponent.defaultProps = {
|
|
showButtons: true,
|
|
width: 460,
|
|
isLoading: false,
|
|
onClose: () => {},
|
|
};
|