p5.js-web-editor/client/modules/App/components/Overlay.jsx
Dhruvdutt Jadhav e7abb55ee7 Fixes #515 Update React to 16 and other dependencies (#519)
* Update to react, react-dom 16.2.0

* Update react-redux

* Update react-tabs

* Update redux-devtools

* Update redux-devtools-dock-monitor

* Update redux-devtools-log-monitor

* Add prop-types package

* Update gitignore

* Update all files to use prop-types package

* Update react-router

* Update react-inlinesvg
2018-02-07 13:06:07 -05:00

72 lines
1.6 KiB
JavaScript

import PropTypes from 'prop-types';
import React from 'react';
import InlineSVG from 'react-inlinesvg';
import { browserHistory } from 'react-router';
const exitUrl = require('../../../images/exit.svg');
class Overlay extends React.Component {
constructor(props) {
super(props);
this.close = this.close.bind(this);
}
componentDidMount() {
this.overlay.focus();
}
close() {
if (!this.props.closeOverlay) {
browserHistory.push(this.props.previousPath);
} else {
this.props.closeOverlay();
}
}
render() {
const {
ariaLabel,
title,
children
} = this.props;
return (
<div className="overlay">
<div className="overlay__content">
<section
tabIndex="0"
role="main"
aria-label={ariaLabel}
ref={(element) => { this.overlay = element; }}
className="overlay__body"
>
<header className="overlay__header">
<h2 className="overlay__title">{title}</h2>
<button className="overlay__close-button" onClick={this.close}>
<InlineSVG src={exitUrl} alt="close overlay" />
</button>
</header>
{children}
</section>
</div>
</div>
);
}
}
Overlay.propTypes = {
children: PropTypes.element,
closeOverlay: PropTypes.func,
title: PropTypes.string,
ariaLabel: PropTypes.string,
previousPath: PropTypes.string
};
Overlay.defaultProps = {
children: null,
title: 'Modal',
closeOverlay: null,
ariaLabel: 'modal',
previousPath: '/'
};
export default Overlay;