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