[added] Inline CSS for modal and overlay as well as props to override.

[changed] injectCSS has been changed to a warning message in preperation for a future removal. lib/components/Modal.js [changed] setAppElement method is now optional. Defaults to document.body and now allows for a css selector to be passed in rather than the whole element.
reactjs · Sep 17, 2015 · 4d25989 · 4d25989
1 parent acd3c65
commit 4d25989
Show file tree

Hide file tree

Showing 11 changed files with 148 additions and 89 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 examples/**/*-bundle.js
 node_modules/
+.idea/
diff --git a/.npmignore b/.npmignore
@@ -4,3 +4,4 @@ examples
 karma.conf.js
 script
 specs
+.idea/
diff --git a/README.md b/README.md
@@ -9,12 +9,47 @@ Accessible modal dialog component for React.JS
   isOpen={bool}
   onRequestClose={fn}
   closeTimeoutMS={n}
->
+  style={customStyle}>
+
   <h1>Modal Content</h1>
   <p>Etc.</p>
 </Modal>
 ```
+## Styles
+Styles are passed as an object with 2 keys, 'overlay' and 'content' like so
+```js
+{
+  overlay : {
+    position          : 'fixed',
+    top               : 0,
+    left              : 0,
+    right             : 0,
+    bottom            : 0,
+    backgroundColor   : 'rgba(255, 255, 255, 0.75)'
+  },
+  content : {
+    position                   : 'absolute',
+    top                        : '40px',
+    left                       : '40px',
+    right                      : '40px',
+    bottom                     : '40px',
+    border                     : '1px solid #ccc',
+    background                 : '#fff',
+    overflow                   : 'auto',
+    WebkitOverflowScrolling    : 'touch',
+    borderRadius               : '4px',
+    outline                    : 'none',
+    padding                    : '20px'
+
+  }
+}
+```
+
+Styles passed to the modal are merged in with the above defaults and applied to their respective elements.
+At this time, media queries will need to be handled by the consumer.
+
 
+## Examples
 Inside an app:
 
 ```js
@@ -23,8 +58,28 @@ var Modal = require('react-modal');
 
 var appElement = document.getElementById('your-app-element');
 
+/*
+By default the modal is anchored to document.body. All of the following overrides are available.
+
+* element
 Modal.setAppElement(appElement);
-Modal.injectCSS();
+
+* query selector - uses the first element found if you pass in a class.
+Modal.setAppElement('#your-app-element');
+
+*/
+
+const customStyles = {
+  content : {
+    top                   : '50%',
+    left                  : '50%',
+    right                 : 'auto',
+    bottom                : 'auto',
+    marginRight           : '-50%',
+    transform             : 'translate(-50%, -50%)'
+  }
+};
+
 
 var App = React.createClass({
 
@@ -47,7 +102,8 @@ var App = React.createClass({
         <Modal
           isOpen={this.state.modalIsOpen}
           onRequestClose={this.closeModal}
-        >
+          style={customStyles} >
+
           <h2>Hello</h2>
           <button onClick={this.closeModal}>close</button>
           <div>I am a modal</div>

diff --git a/examples/basic/app.js b/examples/basic/app.js
@@ -3,8 +3,7 @@ var Modal = require('../../lib/index');
 
 var appElement = document.getElementById('example');
 
-Modal.setAppElement(appElement);
-Modal.injectCSS();
+Modal.setAppElement('#example');
 
 var App = React.createClass({
 
@@ -37,8 +36,7 @@ var App = React.createClass({
         <Modal
           closeTimeoutMS={150}
           isOpen={this.state.modalIsOpen}
-          onRequestClose={this.handleModalCloseRequest}
-        >
+          onRequestClose={this.handleModalCloseRequest}>
           <h1>Hello</h1>
           <button onClick={this.closeModal}>close</button>
           <div>I am a modal</div>

diff --git a/examples/bootstrap/app.js b/examples/bootstrap/app.js
@@ -4,7 +4,6 @@ var Modal = require('../../lib/index');
 var appElement = document.getElementById('example');
 
 Modal.setAppElement(appElement);
-Modal.injectCSS();
 
 var App = React.createClass({
 

diff --git a/lib/components/Modal.js b/lib/components/Modal.js
@@ -2,24 +2,30 @@ var React = require('react');
 var ExecutionEnvironment = require('react/lib/ExecutionEnvironment');
 var ModalPortal = React.createFactory(require('./ModalPortal'));
 var ariaAppHider = require('../helpers/ariaAppHider');
-var injectCSS = require('../helpers/injectCSS');
 var elementClass = require('element-class');
 
 var SafeHTMLElement = ExecutionEnvironment.canUseDOM ? window.HTMLElement : {};
 
 var Modal = module.exports = React.createClass({
 
   displayName: 'Modal',
-
   statics: {
     setAppElement: ariaAppHider.setElement,
-    injectCSS: injectCSS
+    injectCSS : function() {
+      "production" !== process.env.NODE_ENV
+        && console.warn('React-Modal: injectCSS has been deprecated ' +
+                        'and no longer has any effect. It will be removed in a later version');
+    }
   },
 
   propTypes: {
     isOpen: React.PropTypes.bool.isRequired,
-    onRequestClose: React.PropTypes.func,
+    style : React.PropTypes.shape({
+      content: React.PropTypes.object,
+      overlay: React.PropTypes.object
+    }),
     appElement: React.PropTypes.instanceOf(SafeHTMLElement),
+    onRequestClose: React.PropTypes.func,
     closeTimeoutMS: React.PropTypes.number,
     ariaHideApp: React.PropTypes.bool
   },

diff --git a/lib/components/ModalPortal.js b/lib/components/ModalPortal.js
@@ -2,7 +2,8 @@ var React = require('react');
 var div = React.DOM.div;
 var focusManager = require('../helpers/focusManager');
 var scopeTab = require('../helpers/scopeTab');
-var cx = require('classnames');
+var Assign = require('lodash.assign');
+
 
 // so that our CSS is statically analyzable
 var CLASS_NAMES = {
@@ -18,7 +19,31 @@ var CLASS_NAMES = {
   }
 };
 
-var OVERLAY_STYLES = { position: 'fixed', left: 0, right: 0, top: 0, bottom: 0 };
+var defaultStyles = {
+  overlay : {
+    position        : 'fixed',
+    top             : 0,
+    left            : 0,
+    right           : 0,
+    bottom          : 0,
+    backgroundColor : 'rgba(255, 255, 255, 0.75)'
+  },
+  content : {
+    position                : 'absolute',
+    top                     : '40px',
+    left                    : '40px',
+    right                   : '40px',
+    bottom                  : '40px',
+    border                  : '1px solid #ccc',
+    background              : '#fff',
+    overflow                : 'auto',
+    WebkitOverflowScrolling : 'touch',
+    borderRadius            : '4px',
+    outline                 : 'none',
+    padding                 : '20px'
+
+  }
+};
 
 function stopPropagation(event) {
   event.stopPropagation();
@@ -28,6 +53,15 @@ var ModalPortal = module.exports = React.createClass({
 
   displayName: 'ModalPortal',
 
+  getDefaultProps: function() {
+    return {
+      style: {
+        overlay : {},
+        content : {}
+      }
+    }
+  },
+
   getInitialState: function() {
     return {
       afterOpen: false,
@@ -132,27 +166,27 @@ var ModalPortal = module.exports = React.createClass({
     return !this.props.isOpen && !this.state.beforeClose;
   },
 
-  buildClassName: function(which) {
+  buildClassName: function(which, additional) {
     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;
+    return additional ? className + ' ' + additional : className;
   },
 
   render: function() {
     return this.shouldBeClosed() ? div() : (
       div({
         ref: "overlay",
-        className: cx(this.buildClassName('overlay'), this.props.overlayClassName),
-        style: OVERLAY_STYLES,
+        className: this.buildClassName('overlay', this.props.overlayClassName),
+        style: Assign({}, defaultStyles.overlay, this.props.style.overlay || {}),
         onClick: this.handleOverlayClick
       },
         div({
           ref: "content",
-          style: this.props.style,
-          className: cx(this.buildClassName('content'), this.props.className),
+          style: Assign({}, defaultStyles.content, this.props.style.content || {}),
+          className: this.buildClassName('content', this.props.className),
           tabIndex: "-1",
           onClick: stopPropagation,
           onKeyDown: this.handleKeyDown

diff --git a/lib/helpers/ariaAppHider.js b/lib/helpers/ariaAppHider.js
@@ -1,7 +1,11 @@
-var _element = null;
+var _element = document.body;
 
 function setElement(element) {
-  _element = element;
+  if (typeof element === 'string') {
+    var el = document.querySelectorAll(element);
+    element = 'length' in el ? el[0] : el;
+  }
+  _element = element || _element;
 }
 
 function hide(appElement) {
@@ -27,7 +31,7 @@ function validateElement(appElement) {
 }
 
 function resetForTesting() {
-  _element = null;
+  _element = document.body;
 }
 
 exports.toggle = toggle;

diff --git a/lib/helpers/injectCSS.js b/lib/helpers/injectCSS.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-modal",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Accessible modal dialog component for React.JS",
   "main": "./lib/index",
   "repository": {
@@ -32,6 +32,7 @@
     "karma-cli": "0.1.0",
     "karma-firefox-launcher": "0.1.6",
     "karma-mocha": "0.2.0",
+    "karma-safari-launcher": "^0.1.1",
     "mocha": "2.2.5",
     "react": ">=0.13.3",
     "reactify": "^1.1.1",
@@ -40,8 +41,8 @@
     "webpack-dev-server": "1.10.1"
   },
   "dependencies": {
-    "classnames": "^2.1.3",
-    "element-class": "^0.2.0"
+    "element-class": "^0.2.0",
+    "lodash.assign": "^3.2.0"
   },
   "peerDependencies": {
     "react": ">=0.13.3"
@@ -60,4 +61,4 @@
   "browserify-shim": {
     "react": "global:React"
   }
-}
+}