Skip to content

Commit a5012d9

Browse files
zackifyzackify
committed
changed how styles are set by default
1 parent 6a0a764 commit a5012d9

7 files changed

Lines changed: 196 additions & 50 deletions

File tree

‎README.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@
99
An incredibly simple modal dialog, because after writing [this post](http://reactjsnews.com/modals-in-react/), I found none of the ones listed let you easily overwrite the css!
1010

1111
~~~js
12-
import Modal from 'simple-react-modal'
13-
import 'simple-react-modal/dist/modal' //import the base css
12+
import Modal, {closeClass} from 'simple-react-modal'
1413

1514
export default class App extends React.Component{
1615

@@ -33,12 +32,12 @@ export default class App extends React.Component{
3332
<div>
3433
<a onClick={this.show.bind(this)}>Open Modal</a>
3534
<Modal
36-
className="simple-modal-base test"
35+
className="test-class" //this will completely overwrite the default css
3736
closeOnOuterClick={true}
3837
show={this.state.show}
3938
onClose={this.close.bind(this)}>
4039

41-
<a className="close" onClick={this.close.bind(this)}>X</a>
40+
<a style={closeClass} onClick={this.close.bind(this)}>X</a>
4241
<div>hey</div>
4342

4443
</Modal>
@@ -53,8 +52,9 @@ export default class App extends React.Component{
5352
- `closeOnOuterClick`: If someone clicks outside of the modal when it's in focus, should it close? You choose. (bool)
5453
- `show`: true or false
5554
- `onClose`: when the modal is sending the close event (only happens is `closeOnOuterClick` is true)
55+
- `className`: this will allow you to completely change the default css located in the component.
5656

57-
Everything else will be merged and you're free to apply any props you want. Minimum required props would be `show` and probably a className.
57+
Everything else will be merged and you're free to apply any props you want. Minimum required props would be `show` and probably a className. You can optionally pull in `modalClass` and merge any styles with it and set the style prop on the modal.
5858

5959
The big difference is that you can require the css from 'simple-react-modal/dist/modal' and easily add other classes that make it look however you like.
6060
Customizing the style is easy, to target the actual content area it will be `.your-class div`.

‎build/simple-modal.js‎

Lines changed: 69 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,109 @@
1-
"use strict";
1+
'use strict';
22

3-
Object.defineProperty(exports, "__esModule", {
3+
Object.defineProperty(exports, '__esModule', {
44
value: true
55
});
66

77
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
88

9-
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
9+
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
1010

11-
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
11+
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
1212

13-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
13+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
1414

15-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
15+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
1616

17-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
17+
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
1818

1919
var _react = require('react');
2020

2121
var _react2 = _interopRequireDefault(_react);
2222

23+
var modalClass = {
24+
position: 'fixed',
25+
'font-family': 'Arial, Helvetica, sans-serif',
26+
top: 0,
27+
right: 0,
28+
bottom: 0,
29+
left: 0,
30+
background: 'rgba(0, 0, 0, 0.8)',
31+
'z-index': 99999,
32+
opacity: 0,
33+
transition: 'opacity 400ms ease-in',
34+
opacity: 1,
35+
'pointer-events': 'auto'
36+
};
37+
38+
exports.modalClass = modalClass;
39+
var containerClass = {
40+
width: '400px',
41+
position: 'relative',
42+
margin: '10% auto',
43+
padding: '5px 20px 13px 20px',
44+
background: '#fff'
45+
};
46+
47+
exports.containerClass = containerClass;
48+
var closeClass = {
49+
background: '#606061',
50+
color: '#FFFFFF',
51+
'line-height': '25px',
52+
position: 'absolute',
53+
right: '-12px',
54+
'text-align': 'center',
55+
top: '-10px',
56+
width: '24px',
57+
'text-decoration': 'none',
58+
'font-weight': 'bold',
59+
borderRadius: '12px',
60+
boxDhadow: '1px 1px 3px #000',
61+
cursor: 'pointer'
62+
};
63+
64+
exports.closeClass = closeClass;
65+
2366
var Modal = (function (_React$Component) {
2467
_inherits(Modal, _React$Component);
2568

2669
function Modal(props) {
2770
_classCallCheck(this, Modal);
2871

29-
_get(Object.getPrototypeOf(Modal.prototype), "constructor", this).call(this);
72+
_get(Object.getPrototypeOf(Modal.prototype), 'constructor', this).call(this);
3073
this.hideOnOuterClick = this.hideOnOuterClick.bind(this);
3174
}
3275

3376
_createClass(Modal, [{
34-
key: "hideOnOuterClick",
77+
key: 'hideOnOuterClick',
3578
value: function hideOnOuterClick(event) {
3679
if (!this.props.closeOnOuterClick) return;
3780
if (event.target.dataset.modal) this.props.onClose(event);
3881
}
3982
}, {
40-
key: "render",
83+
key: 'render',
4184
value: function render() {
4285
if (!this.props.show) return null;
43-
return _react2["default"].createElement(
44-
"div",
45-
_extends({}, this.props, { onClick: this.hideOnOuterClick, "data-modal": "true" }),
46-
_react2["default"].createElement(
47-
"div",
48-
null,
86+
var modal = modalClass;
87+
var container = containerClass;
88+
89+
if (this.props.className) {
90+
modal = null;
91+
container = null;
92+
}
93+
94+
return _react2['default'].createElement(
95+
'div',
96+
_extends({}, this.props, { style: modal, onClick: this.hideOnOuterClick, 'data-modal': "true" }),
97+
_react2['default'].createElement(
98+
'div',
99+
{ style: container },
49100
this.props.children
50101
)
51102
);
52103
}
53104
}]);
54105

55106
return Modal;
56-
})(_react2["default"].Component);
107+
})(_react2['default'].Component);
57108

58-
exports["default"] = Modal;
59-
module.exports = exports["default"];
109+
exports['default'] = Modal;

‎dist/simple-react-modal.js‎

Lines changed: 69 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,114 @@
11
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.simpleModal = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
22
(function (global){
3-
"use strict";
3+
'use strict';
44

5-
Object.defineProperty(exports, "__esModule", {
5+
Object.defineProperty(exports, '__esModule', {
66
value: true
77
});
88

99
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
1010

11-
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
11+
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
1212

13-
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
13+
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
1414

15-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
15+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
1616

17-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
17+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
1818

19-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
19+
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
2020

2121
var _react = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null);
2222

2323
var _react2 = _interopRequireDefault(_react);
2424

25+
var modalClass = {
26+
position: 'fixed',
27+
'font-family': 'Arial, Helvetica, sans-serif',
28+
top: 0,
29+
right: 0,
30+
bottom: 0,
31+
left: 0,
32+
background: 'rgba(0, 0, 0, 0.8)',
33+
'z-index': 99999,
34+
opacity: 0,
35+
transition: 'opacity 400ms ease-in',
36+
opacity: 1,
37+
'pointer-events': 'auto'
38+
};
39+
40+
exports.modalClass = modalClass;
41+
var containerClass = {
42+
width: '400px',
43+
position: 'relative',
44+
margin: '10% auto',
45+
padding: '5px 20px 13px 20px',
46+
background: '#fff'
47+
};
48+
49+
exports.containerClass = containerClass;
50+
var closeClass = {
51+
background: '#606061',
52+
color: '#FFFFFF',
53+
'line-height': '25px',
54+
position: 'absolute',
55+
right: '-12px',
56+
'text-align': 'center',
57+
top: '-10px',
58+
width: '24px',
59+
'text-decoration': 'none',
60+
'font-weight': 'bold',
61+
borderRadius: '12px',
62+
boxDhadow: '1px 1px 3px #000',
63+
cursor: 'pointer'
64+
};
65+
66+
exports.closeClass = closeClass;
67+
2568
var Modal = (function (_React$Component) {
2669
_inherits(Modal, _React$Component);
2770

2871
function Modal(props) {
2972
_classCallCheck(this, Modal);
3073

31-
_get(Object.getPrototypeOf(Modal.prototype), "constructor", this).call(this);
74+
_get(Object.getPrototypeOf(Modal.prototype), 'constructor', this).call(this);
3275
this.hideOnOuterClick = this.hideOnOuterClick.bind(this);
3376
}
3477

3578
_createClass(Modal, [{
36-
key: "hideOnOuterClick",
79+
key: 'hideOnOuterClick',
3780
value: function hideOnOuterClick(event) {
3881
if (!this.props.closeOnOuterClick) return;
3982
if (event.target.dataset.modal) this.props.onClose(event);
4083
}
4184
}, {
42-
key: "render",
85+
key: 'render',
4386
value: function render() {
4487
if (!this.props.show) return null;
45-
return _react2["default"].createElement(
46-
"div",
47-
_extends({}, this.props, { onClick: this.hideOnOuterClick, "data-modal": "true" }),
48-
_react2["default"].createElement(
49-
"div",
50-
null,
88+
var modal = modalClass;
89+
var container = containerClass;
90+
91+
if (this.props.className) {
92+
modal = null;
93+
container = null;
94+
}
95+
96+
return _react2['default'].createElement(
97+
'div',
98+
_extends({}, this.props, { style: modal, onClick: this.hideOnOuterClick, 'data-modal': "true" }),
99+
_react2['default'].createElement(
100+
'div',
101+
{ style: container },
51102
this.props.children
52103
)
53104
);
54105
}
55106
}]);
56107

57108
return Modal;
58-
})(_react2["default"].Component);
109+
})(_react2['default'].Component);
59110

60-
exports["default"] = Modal;
61-
module.exports = exports["default"];
111+
exports['default'] = Modal;
62112

63113
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
64114
},{}]},{},[1])(1)

0 commit comments

Comments
 (0)