feature(confirm): add ConfirmDialog compopnent
This commit is contained in:
parent
41e0143773
commit
db011dcc22
|
@ -0,0 +1,86 @@
|
|||
// @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,
|
||||
};
|
|
@ -0,0 +1,31 @@
|
|||
---
|
||||
name: Confirm Dialog
|
||||
---
|
||||
|
||||
import { Playground, PropsTable } from 'docz'
|
||||
|
||||
import { Button } from './button.js'
|
||||
import { ConfirmDialogComponent } from './confirm-dialog.js'
|
||||
import { DoczWrapper } from '../theme.js'
|
||||
|
||||
# Confirm Dialog
|
||||
|
||||
## Properties
|
||||
|
||||
<PropsTable of={ConfirmDialogComponent} />
|
||||
|
||||
## Basic Usage
|
||||
|
||||
<Playground>
|
||||
<DoczWrapper>
|
||||
{() => (
|
||||
<ConfirmDialogComponent
|
||||
title="Confirm example"
|
||||
onConfirm={() => alert('Confirm')}
|
||||
handleClose={() => alert('Close')}
|
||||
>
|
||||
<div>Confirm content</div>
|
||||
</ConfirmDialogComponent>
|
||||
)}
|
||||
</DoczWrapper>
|
||||
</Playground>
|
Loading…
Reference in New Issue