From 0d4e60060fe090ad72801e2f8dd7389c5335f5f7 Mon Sep 17 00:00:00 2001
From: Timothy Kye <tyrsius@gmail.com>
Date: Wed, 6 Apr 2016 21:38:05 -0700
Subject: [PATCH] [added] module for default style

* [added] module for default style

* move default styles to Modal.defaultStyles
---
 README.md                     |  3 +++
 lib/components/Modal.js       | 33 +++++++++++++++++++++++++++++++--
 lib/components/ModalPortal.js | 30 ++----------------------------
 specs/Modal.spec.js           | 10 ++++++++++
 4 files changed, 46 insertions(+), 30 deletions(-)

diff --git a/README.md b/README.md
index 7dffd709..042f269c 100644
--- 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
index bb002983..c753a233 100644
--- 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,8 +73,9 @@ 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 () {
@@ -81,6 +83,33 @@ var Modal = module.exports = React.createClass({
   }
 });
 
+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
index f25b27c0..cc8779e7 100644
--- 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
index 72162ac2..599f1aec 100644
--- 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);