diff --git a/src/common/Modal/Modal.js b/src/common/Modal/Modal.js new file mode 100644 index 000000000..2ad9d8d03 --- /dev/null +++ b/src/common/Modal/Modal.js @@ -0,0 +1,27 @@ +import { PureComponent } from 'react'; +import ReactDOM from 'react-dom'; +import classnames from 'classnames'; +import styles from './styles'; + +class Modal extends PureComponent { + constructor(props) { + super(props); + + this.root = document.createElement('div'); + } + + componentDidMount() { + document.body.appendChild(this.root); + } + + componentWillUnmount() { + document.body.removeChild(this.root); + } + + render() { + this.root.className = classnames(styles['modal-container'], this.props.className); + return ReactDOM.createPortal(this.props.children, this.root); + } +} + +export default Modal; diff --git a/src/common/Modal/index.js b/src/common/Modal/index.js new file mode 100644 index 000000000..8144af51b --- /dev/null +++ b/src/common/Modal/index.js @@ -0,0 +1,3 @@ +import Modal from './Modal'; + +export default Modal; diff --git a/src/common/OverlayLayer/styles.less b/src/common/Modal/styles.less similarity index 86% rename from src/common/OverlayLayer/styles.less rename to src/common/Modal/styles.less index 74f511daf..bae411ef2 100644 --- a/src/common/OverlayLayer/styles.less +++ b/src/common/Modal/styles.less @@ -1,4 +1,4 @@ -.overlay-container { +.modal-container { position: absolute; top: 0; left: 0; diff --git a/src/common/OverlayLayer/OverlayLayer.js b/src/common/OverlayLayer/OverlayLayer.js deleted file mode 100644 index 2561b1e22..000000000 --- a/src/common/OverlayLayer/OverlayLayer.js +++ /dev/null @@ -1,27 +0,0 @@ -import { PureComponent } from 'react'; -import ReactDOM from 'react-dom'; -import classnames from 'classnames'; -import styles from './styles'; - -class OverlayLayer extends PureComponent { - constructor(props) { - super(props); - - this.layerRoot = document.createElement('div'); - } - - componentDidMount() { - document.body.appendChild(this.layerRoot); - } - - componentWillUnmount() { - document.body.removeChild(this.layerRoot); - } - - render() { - this.layerRoot.className = classnames(styles['overlay-container'], this.props.className); - return ReactDOM.createPortal(this.props.children, this.layerRoot); - } -} - -export default OverlayLayer; diff --git a/src/common/OverlayLayer/index.js b/src/common/OverlayLayer/index.js deleted file mode 100644 index 0dcdd8442..000000000 --- a/src/common/OverlayLayer/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import OverlayLayer from './OverlayLayer'; - -export default OverlayLayer; diff --git a/src/common/index.js b/src/common/index.js index 9c2c436be..f7c56a33c 100644 --- a/src/common/index.js +++ b/src/common/index.js @@ -1,9 +1,11 @@ import Checkbox from './Checkbox'; import PopupMenu from './PopupMenu'; import NavBar from './NavBar'; +import Modal from './Modal'; export { Checkbox, PopupMenu, - NavBar + NavBar, + Modal };