From 1118393cf7fb437017ae43ca33512ae60e098a1f Mon Sep 17 00:00:00 2001 From: NikolaBorislavovHristov Date: Wed, 20 Jun 2018 12:25:29 +0300 Subject: [PATCH] Modal component exports from common components --- src/common/Modal/Modal.js | 27 +++++++++++++++++++ src/common/Modal/index.js | 3 +++ .../{OverlayLayer => Modal}/styles.less | 2 +- src/common/OverlayLayer/OverlayLayer.js | 27 ------------------- src/common/OverlayLayer/index.js | 3 --- src/common/index.js | 4 ++- 6 files changed, 34 insertions(+), 32 deletions(-) create mode 100644 src/common/Modal/Modal.js create mode 100644 src/common/Modal/index.js rename src/common/{OverlayLayer => Modal}/styles.less (86%) delete mode 100644 src/common/OverlayLayer/OverlayLayer.js delete mode 100644 src/common/OverlayLayer/index.js 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 };