[added] module for default style

* [added] module for default style * move default styles to Modal.defaultStyles
reactjs · Apr 7, 2016 · 0d4e600 · 0d4e600
1 parent cf70338
commit 0d4e600
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -48,6 +48,9 @@ Styles are passed as an object with 2 keys, 'overlay' and 'content' like so
 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.
 
+###Overriding styles globally
+
+The default styles above are available on `Modal.defaultStyles`.
 
 ## Examples
 Inside an app:

diff --git a/lib/components/Modal.js b/lib/components/Modal.js
@@ -5,11 +5,12 @@ var ModalPortal = React.createFactory(require('./ModalPortal'));
 var ariaAppHider = require('../helpers/ariaAppHider');
 var elementClass = require('element-class');
 var renderSubtreeIntoContainer = require("react-dom").unstable_renderSubtreeIntoContainer;
+var Assign = require('lodash.assign');
 
 var SafeHTMLElement = ExecutionEnvironment.canUseDOM ? window.HTMLElement : {};
 var AppElement = ExecutionEnvironment.canUseDOM ? document.body : {appendChild: function() {}};
 
-var Modal = module.exports = React.createClass({
+var Modal = React.createClass({
 
   displayName: 'Modal',
   statics: {
@@ -72,15 +73,43 @@ var Modal = module.exports = React.createClass({
     if (props.ariaHideApp) {
       ariaAppHider.toggle(props.isOpen, props.appElement);
     }
+
     sanitizeProps(props);
-    this.portal = renderSubtreeIntoContainer(this, ModalPortal(props), this.node);
+    this.portal = renderSubtreeIntoContainer(this, ModalPortal(Assign({}, props, {defaultStyles: Modal.defaultStyles})), this.node);
   },
 
   render: function () {
     return React.DOM.noscript();
   }
 });
 
+Modal.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'
+  }
+}
+
+module.exports = Modal
+
 function sanitizeProps(props) {
   delete props.ref;
 }
diff --git a/lib/components/ModalPortal.js b/lib/components/ModalPortal.js
@@ -4,7 +4,6 @@ var focusManager = require('../helpers/focusManager');
 var scopeTab = require('../helpers/scopeTab');
 var Assign = require('lodash.assign');
 
-
 // so that our CSS is statically analyzable
 var CLASS_NAMES = {
   overlay: {
@@ -19,31 +18,6 @@ var CLASS_NAMES = {
   }
 };
 
-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'
-  }
-};
-
 var ModalPortal = module.exports = React.createClass({
 
   displayName: 'ModalPortal',
@@ -183,8 +157,8 @@ var ModalPortal = module.exports = React.createClass({
   },
 
   render: function() {
-    var contentStyles = (this.props.className) ? {} : defaultStyles.content;
-    var overlayStyles = (this.props.overlayClassName) ? {} : defaultStyles.overlay;
+    var contentStyles = (this.props.className) ? {} : this.props.defaultStyles.content;
+    var overlayStyles = (this.props.overlayClassName) ? {} : this.props.defaultStyles.overlay;
 
     return this.shouldBeClosed() ? div() : (
       div({

diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js
@@ -163,6 +163,16 @@ describe('Modal', function () {
     equal(modal.portal.refs.overlay.style.position, 'static');
   });
 
+  it('supports overriding the default styles', function() {
+    var previousStyle = Modal.defaultStyles.content.position
+    //Just in case the default style is already relative, check that we can change it
+    var newStyle = previousStyle === 'relative' ? 'static': 'relative'
+    Modal.defaultStyles.content.position = newStyle
+    var modal = renderModal({isOpen: true});
+    equal(modal.portal.refs.content.style.position, newStyle);
+    Modal.defaultStyles.content.position = previousStyle
+  });
+
   it('adds class to body when open', function() {
     var modal = renderModal({isOpen: false});
     equal(document.body.className.indexOf('ReactModal__Body--open') !== -1, false);