Skip to content

Commit 0d4e600

Browse files
kyeoticclaydiffrient
authored andcommitted
[added] module for default style
* [added] module for default style * move default styles to Modal.defaultStyles
1 parent cf70338 commit 0d4e600

File tree

4 files changed

+46
-30
lines changed

4 files changed

+46
-30
lines changed

README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,9 @@ Styles are passed as an object with 2 keys, 'overlay' and 'content' like so
4848
Styles passed to the modal are merged in with the above defaults and applied to their respective elements.
4949
At this time, media queries will need to be handled by the consumer.
5050

51+
###Overriding styles globally
52+
53+
The default styles above are available on `Modal.defaultStyles`.
5154

5255
## Examples
5356
Inside an app:

lib/components/Modal.js

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@ var ModalPortal = React.createFactory(require('./ModalPortal'));
55
var ariaAppHider = require('../helpers/ariaAppHider');
66
var elementClass = require('element-class');
77
var renderSubtreeIntoContainer = require("react-dom").unstable_renderSubtreeIntoContainer;
8+
var Assign = require('lodash.assign');
89

910
var SafeHTMLElement = ExecutionEnvironment.canUseDOM ? window.HTMLElement : {};
1011
var AppElement = ExecutionEnvironment.canUseDOM ? document.body : {appendChild: function() {}};
1112

12-
var Modal = module.exports = React.createClass({
13+
var Modal = React.createClass({
1314

1415
displayName: 'Modal',
1516
statics: {
@@ -72,15 +73,43 @@ var Modal = module.exports = React.createClass({
7273
if (props.ariaHideApp) {
7374
ariaAppHider.toggle(props.isOpen, props.appElement);
7475
}
76+
7577
sanitizeProps(props);
76-
this.portal = renderSubtreeIntoContainer(this, ModalPortal(props), this.node);
78+
this.portal = renderSubtreeIntoContainer(this, ModalPortal(Assign({}, props, {defaultStyles: Modal.defaultStyles})), this.node);
7779
},
7880

7981
render: function () {
8082
return React.DOM.noscript();
8183
}
8284
});
8385

86+
Modal.defaultStyles = {
87+
overlay: {
88+
position : 'fixed',
89+
top : 0,
90+
left : 0,
91+
right : 0,
92+
bottom : 0,
93+
backgroundColor : 'rgba(255, 255, 255, 0.75)'
94+
},
95+
content: {
96+
position : 'absolute',
97+
top : '40px',
98+
left : '40px',
99+
right : '40px',
100+
bottom : '40px',
101+
border : '1px solid #ccc',
102+
background : '#fff',
103+
overflow : 'auto',
104+
WebkitOverflowScrolling : 'touch',
105+
borderRadius : '4px',
106+
outline : 'none',
107+
padding : '20px'
108+
}
109+
}
110+
111+
module.exports = Modal
112+
84113
function sanitizeProps(props) {
85114
delete props.ref;
86115
}

lib/components/ModalPortal.js

Lines changed: 2 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ var focusManager = require('../helpers/focusManager');
44
var scopeTab = require('../helpers/scopeTab');
55
var Assign = require('lodash.assign');
66

7-
87
// so that our CSS is statically analyzable
98
var CLASS_NAMES = {
109
overlay: {
@@ -19,31 +18,6 @@ var CLASS_NAMES = {
1918
}
2019
};
2120

22-
var defaultStyles = {
23-
overlay: {
24-
position : 'fixed',
25-
top : 0,
26-
left : 0,
27-
right : 0,
28-
bottom : 0,
29-
backgroundColor : 'rgba(255, 255, 255, 0.75)'
30-
},
31-
content: {
32-
position : 'absolute',
33-
top : '40px',
34-
left : '40px',
35-
right : '40px',
36-
bottom : '40px',
37-
border : '1px solid #ccc',
38-
background : '#fff',
39-
overflow : 'auto',
40-
WebkitOverflowScrolling : 'touch',
41-
borderRadius : '4px',
42-
outline : 'none',
43-
padding : '20px'
44-
}
45-
};
46-
4721
var ModalPortal = module.exports = React.createClass({
4822

4923
displayName: 'ModalPortal',
@@ -183,8 +157,8 @@ var ModalPortal = module.exports = React.createClass({
183157
},
184158

185159
render: function() {
186-
var contentStyles = (this.props.className) ? {} : defaultStyles.content;
187-
var overlayStyles = (this.props.overlayClassName) ? {} : defaultStyles.overlay;
160+
var contentStyles = (this.props.className) ? {} : this.props.defaultStyles.content;
161+
var overlayStyles = (this.props.overlayClassName) ? {} : this.props.defaultStyles.overlay;
188162

189163
return this.shouldBeClosed() ? div() : (
190164
div({

specs/Modal.spec.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,16 @@ describe('Modal', function () {
163163
equal(modal.portal.refs.overlay.style.position, 'static');
164164
});
165165

166+
it('supports overriding the default styles', function() {
167+
var previousStyle = Modal.defaultStyles.content.position
168+
//Just in case the default style is already relative, check that we can change it
169+
var newStyle = previousStyle === 'relative' ? 'static': 'relative'
170+
Modal.defaultStyles.content.position = newStyle
171+
var modal = renderModal({isOpen: true});
172+
equal(modal.portal.refs.content.style.position, newStyle);
173+
Modal.defaultStyles.content.position = previousStyle
174+
});
175+
166176
it('adds class to body when open', function() {
167177
var modal = renderModal({isOpen: false});
168178
equal(document.body.className.indexOf('ReactModal__Body--open') !== -1, false);

0 commit comments

Comments
 (0)