96 lines
2.1 KiB
JavaScript
96 lines
2.1 KiB
JavaScript
// @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
|
|
? null
|
|
: 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,
|
|
);
|
|
}
|
|
}
|