feat(error-modal): add ErrorModalComponent
This commit is contained in:
parent
d0d7f2c4f8
commit
ed4ffd92a9
|
@ -0,0 +1,94 @@
|
|||
// @flow
|
||||
import React, { PureComponent } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { TextComponent } from './text';
|
||||
import { Button } from './button';
|
||||
|
||||
import ErrorIcon from '../assets/images/error_icon.png';
|
||||
|
||||
const ModalWrapper = styled.div`
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
`;
|
||||
|
||||
const ChildrenWrapper = styled.div`
|
||||
width: 350px;
|
||||
background-color: ${props => props.theme.colors.background};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0px 0px 30px 0px black;
|
||||
position: relative;
|
||||
z-index: 90;
|
||||
min-height: 400px;
|
||||
`;
|
||||
|
||||
const Message = styled(TextComponent)`
|
||||
margin: 15px 0;
|
||||
`;
|
||||
|
||||
const ErrorImage = styled.img`
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
margin-bottom: 15px;
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
isVisible: boolean,
|
||||
message: string,
|
||||
onRequestClose: () => void,
|
||||
};
|
||||
|
||||
const modalRoot = document.getElementById('modal-root');
|
||||
|
||||
export class ErrorModalComponent extends PureComponent<Props> {
|
||||
element = document.createElement('div');
|
||||
|
||||
componentDidMount() {
|
||||
const { isVisible } = this.props;
|
||||
|
||||
if (isVisible) {
|
||||
if (modalRoot) modalRoot.appendChild(this.element);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate = (prevProps: Props) => {
|
||||
const { isVisible } = this.props;
|
||||
|
||||
if (!prevProps.isVisible && isVisible) {
|
||||
if (modalRoot) modalRoot.appendChild(this.element);
|
||||
}
|
||||
|
||||
if (prevProps.isVisible && !isVisible) {
|
||||
if (modalRoot) modalRoot.removeChild(this.element);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { isVisible, message, onRequestClose } = this.props;
|
||||
|
||||
return isVisible
|
||||
? createPortal(
|
||||
<ModalWrapper id='error-modal-portal-wrapper'>
|
||||
<ChildrenWrapper>
|
||||
<ErrorImage src={ErrorIcon} alt='Error Icon' />
|
||||
<Message value={message} />
|
||||
<Button label='Ok!' onClick={onRequestClose} />
|
||||
</ChildrenWrapper>
|
||||
</ModalWrapper>,
|
||||
this.element,
|
||||
)
|
||||
: null;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue