87 lines
1.8 KiB
JavaScript
87 lines
1.8 KiB
JavaScript
|
// @flow
|
||
|
|
import React, { type Element } from 'react';
|
||
|
|
import styled from 'styled-components';
|
||
|
|
|
||
|
|
import { TextComponent } from './text';
|
||
|
|
import { Button } from './button';
|
||
|
|
import { Divider } from './divider';
|
||
|
|
|
||
|
|
import CloseIcon from '../assets/images/close_icon.svg';
|
||
|
|
|
||
|
|
const Wrapper = styled.div`
|
||
|
|
display: flex;
|
||
|
|
width: ${props => `${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 = {
|
||
|
|
handleClose: () => void,
|
||
|
|
title: string,
|
||
|
|
onConfirm: () => void,
|
||
|
|
showButtons?: boolean,
|
||
|
|
width?: number,
|
||
|
|
children: Element<*>,
|
||
|
|
};
|
||
|
|
|
||
|
|
export const ConfirmDialogComponent = ({
|
||
|
|
children,
|
||
|
|
title,
|
||
|
|
onConfirm,
|
||
|
|
handleClose,
|
||
|
|
showButtons,
|
||
|
|
width,
|
||
|
|
}: Props) => (
|
||
|
|
<Wrapper width={width}>
|
||
|
|
<CloseIconWrapper>
|
||
|
|
<CloseIconImg src={CloseIcon} onClick={handleClose} />
|
||
|
|
</CloseIconWrapper>
|
||
|
|
<TitleWrapper>
|
||
|
|
<TextComponent value={title} align='center' />
|
||
|
|
</TitleWrapper>
|
||
|
|
<Divider />
|
||
|
|
{React.Children.map(children, _ => _)}
|
||
|
|
{showButtons && (
|
||
|
|
<>
|
||
|
|
<Btn label='Confirm' onClick={onConfirm} />
|
||
|
|
<Btn label='Cancel' onClick={handleClose} variant='secondary' />
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</Wrapper>
|
||
|
|
);
|
||
|
|
|
||
|
|
ConfirmDialogComponent.defaultProps = {
|
||
|
|
showButtons: true,
|
||
|
|
width: 460,
|
||
|
|
};
|