refactor className building

Author: ryanflorence

lib/components/ModalPortal.js

@@ -4,6 +4,20 @@ var React = require('react');
 var focusManager = require('../helpers/focusManager');
 var scopeTab = require('../helpers/scopeTab');
 
+// so that our CSS is statically analyzable
+var CLASS_NAMES = {
+  overlay: {
+    base: 'ReactModal__Overlay',
+    afterOpen: 'ReactModal__Overlay--after-open',
+    beforeClose: 'ReactModal__Overlay--before-close',
+  },
+  content: {
+    base: 'ReactModal__Content',
+    afterOpen: 'ReactModal__Content--after-open',
+    beforeClose: 'ReactModal__Content--before-close',
+  }
+};
+
 function stopPropagation(event) {
   event.stopPropagation();
 }
@@ -83,13 +97,8 @@ var ModalPortal = module.exports = React.createClass({
     focusManager.teardownScopedFocus();
   },
 
-  keepTabNavInside: function(event) {
-    var node = this.getDOMNode();
-    scopeTab(node, event);
-  },
-
   handleKeyDown: function(event) {
-    if (event.keyCode == 9 /*tab*/) this.keepTabNavInside(event);
+    if (event.keyCode == 9 /*tab*/) scopeTab(this.getDOMNode(), event);
     if (event.keyCode == 27 /*esc*/) this.requestClose();
   },
 
@@ -113,40 +122,38 @@ var ModalPortal = module.exports = React.createClass({
     return !this.props.isOpen && !this.state.beforeClose;
   },
 
+  overlayStyles: { position: 'fixed', left: 0, right: 0, top: 0, bottom: 0 },
+
+  buildClassName: function(which) {
+    var className = CLASS_NAMES[which].base;
+    if (this.state.afterOpen)
+      className += ' '+CLASS_NAMES[which].afterOpen;
+    if (this.state.beforeClose)
+      className += ' '+CLASS_NAMES[which].beforeClose;
+    return className;
+  },
+
   render: function() {
-    if (this.shouldBeClosed()) {
+    if (this.shouldBeClosed())
       return <div/>;
-    }
-    else {
-      var style = {position: 'fixed', left: 0, right: 0, top: 0, bottom: 0};
-      var overlayClassName = 'ReactModal__Overlay';
-      var contentClassName = 'ReactModal__Content';
-      if (this.state.afterOpen) {
-        overlayClassName += ' ReactModal__Overlay--after-open';
-        contentClassName += ' ReactModal__Content--after-open';
-      }
-      if (this.state.beforeClose) {
-        overlayClassName += ' ReactModal__Overlay--before-close';
-        contentClassName += ' ReactModal__Content--before-close';
-      }
-      return (
+
+    return (
+      <div
+        className={this.buildClassName('overlay')}
+        style={this.overlayStyles}
+        onClick={this.handleOverlayClick}
+      >
         <div
-          className={overlayClassName}
-          style={style}
-          onClick={this.handleOverlayClick}
+          onClick={stopPropagation}
+          ref="content"
+          onKeyDown={this.handleKeyDown}
+          className={this.buildClassName('content')}
+          tabIndex="-1"
         >
-          <div
-            onClick={stopPropagation}
-            ref="content"
-            onKeyDown={this.handleKeyDown}
-            className={contentClassName}
-            tabIndex="-1"
-          >
-            {this.props.children}
-          </div>
+          {this.props.children}
         </div>
-      );
-    }
+      </div>
+    );
   }
 
 });