Fix Modal component to work on server side (dfee#15)

zookatron · Dec 20, 2017 · 57d09db · 57d09db
1 parent 9ad31c0
commit 57d09db
Showing 1 changed file with 21 additions and 11 deletions.
diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
@@ -32,27 +32,37 @@ export default class Modal extends PureComponent {
   static Content = ModalContent
   static Card = ModalCard
 
-  componentWillMount() {
+  state = { d: null }
+
+  componentDidMount() {
     const d = this.getDocument();
-    if (!this.portalElement && d) {
-      this.portalElement = d.createElement('div');
-      this.portalElement.setAttribute('class', 'modal-container');
-      d.body.appendChild(this.portalElement);
-      if (this.props.closeOnEsc) {
-        d.addEventListener('keydown', this.handleKeydown);
-      }
+    this.portalElement = d.createElement('div');
+    this.portalElement.setAttribute('class', 'modal-container');
+    d.body.appendChild(this.portalElement);
+    if (this.props.closeOnEsc) {
+      d.addEventListener('keydown', this.handleKeydown);
     }
+    // eslint-disable-next-line
+    this.setState({ d });
   }
 
   componentWillUnmount() {
+    const { d } = this.state;
     if (this.props.closeOnEsc) {
-      const d = this.props.document || document;
-      d.addEventListener('keydown', this.handleKeydown);
+      d.removeEventListener('keydown', this.handleKeydown);
     }
   }
 
   /* istanbul ignore next */
-  getDocument = () => this.props.document || document
+  getDocument = () => {
+    if (this.props.document) {
+      return this.props.document;
+    }
+    if (typeof document !== 'undefined') {
+      return document;
+    }
+    return null;
+  }
 
   portalElement = null;