Skip to content

Commit 6a13776

Browse files
zackifyzackify
committed
updated and refactored v 0.1
1 parent f23606e commit 6a13776

7 files changed

Lines changed: 86 additions & 115 deletions

File tree

‎README.md‎

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,34 @@ import 'simple-react-modal/dist/modal' //import the base css
1414

1515
export default class App extends React.Component{
1616

17+
constructor(){
18+
super()
19+
this.state = {}
20+
}
21+
1722
show(){
18-
this.refs.modal.show()
23+
this.setState({show: true})
24+
}
25+
26+
close(){
27+
this.setState({show: false})
1928
}
2029

30+
2131
render(){
2232
return (
2333
<div>
2434
<a onClick={this.show.bind(this)}>Open Modal</a>
25-
<Modal ref="modal"
26-
className="simple-modal test"
27-
closeOnOuterClick={false}>
35+
<Modal
36+
className="simple-modal-base test"
37+
closeOnOuterClick={true}
38+
show={this.state.show}
39+
onClose={this.close.bind(this)}>
2840

29-
<a className="close" onClick={()=>{this.refs.modal.hide()}}>X</a>
30-
<div>hey</div>
41+
<a className="close" onClick={this.close.bind(this)}>X</a>
42+
<div>hey</div>
3143

32-
</Modal>
44+
</Modal>
3345
</div>
3446
)
3547
}
@@ -38,8 +50,11 @@ export default class App extends React.Component{
3850

3951
###props
4052

41-
`closeOnOuterClick`: If somone clicks outside of the modal when it's in focus, should it close? You choose.
42-
Everything else will be merged and you're free to apply any props you want.
53+
- `closeOnOuterClick`: If someone clicks outside of the modal when it's in focus, should it close? You choose. (bool)
54+
- `show`: true or false
55+
- `onClose`: when the modal is sending the close event (only happens is `closeOnOuterClick` is true)
56+
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.
4358

4459
You have the option to call `this.refs.modal.show()` and `hide()` similar to other modals out there in react.
4560
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.

‎build/simple-modal.js‎

Lines changed: 21 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
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

@@ -26,44 +26,25 @@ var Modal = (function (_React$Component) {
2626
function Modal(props) {
2727
_classCallCheck(this, Modal);
2828

29-
_get(Object.getPrototypeOf(Modal.prototype), 'constructor', this).call(this);
30-
var closeOnOuterClick = true;
31-
if (props.closeOnOuterClick === false) closeOnOuterClick = false;
32-
33-
this.state = {
34-
display: false,
35-
closeOnOuterClick: closeOnOuterClick
36-
};
37-
this.hide = this.hide.bind(this);
29+
_get(Object.getPrototypeOf(Modal.prototype), "constructor", this).call(this);
3830
this.hideOnOuterClick = this.hideOnOuterClick.bind(this);
3931
}
4032

4133
_createClass(Modal, [{
42-
key: 'hideOnOuterClick',
34+
key: "hideOnOuterClick",
4335
value: function hideOnOuterClick(event) {
44-
if (!this.state.closeOnOuterClick) return;
45-
46-
if (event.target.dataset.modal) this.setState({ display: 'none' });
47-
}
48-
}, {
49-
key: 'hide',
50-
value: function hide() {
51-
this.setState({ display: false });
52-
}
53-
}, {
54-
key: 'show',
55-
value: function show() {
56-
this.setState({ display: true });
36+
if (!this.props.closeOnOuterClick) return;
37+
if (event.target.dataset.modal) this.props.onClose(event);
5738
}
5839
}, {
59-
key: 'render',
40+
key: "render",
6041
value: function render() {
61-
if (!this.state.display) return null;
62-
return _react2['default'].createElement(
63-
'div',
64-
_extends({}, this.props, { onClick: this.hideOnOuterClick, 'data-modal': "true" }),
65-
_react2['default'].createElement(
66-
'div',
42+
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",
6748
null,
6849
this.props.children
6950
)
@@ -72,7 +53,7 @@ var Modal = (function (_React$Component) {
7253
}]);
7354

7455
return Modal;
75-
})(_react2['default'].Component);
56+
})(_react2["default"].Component);
7657

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

‎dist/simple-react-modal.js‎

Lines changed: 21 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
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

@@ -28,44 +28,25 @@ var Modal = (function (_React$Component) {
2828
function Modal(props) {
2929
_classCallCheck(this, Modal);
3030

31-
_get(Object.getPrototypeOf(Modal.prototype), 'constructor', this).call(this);
32-
var closeOnOuterClick = true;
33-
if (props.closeOnOuterClick === false) closeOnOuterClick = false;
34-
35-
this.state = {
36-
display: false,
37-
closeOnOuterClick: closeOnOuterClick
38-
};
39-
this.hide = this.hide.bind(this);
31+
_get(Object.getPrototypeOf(Modal.prototype), "constructor", this).call(this);
4032
this.hideOnOuterClick = this.hideOnOuterClick.bind(this);
4133
}
4234

4335
_createClass(Modal, [{
44-
key: 'hideOnOuterClick',
36+
key: "hideOnOuterClick",
4537
value: function hideOnOuterClick(event) {
46-
if (!this.state.closeOnOuterClick) return;
47-
48-
if (event.target.dataset.modal) this.setState({ display: 'none' });
49-
}
50-
}, {
51-
key: 'hide',
52-
value: function hide() {
53-
this.setState({ display: false });
54-
}
55-
}, {
56-
key: 'show',
57-
value: function show() {
58-
this.setState({ display: true });
38+
if (!this.props.closeOnOuterClick) return;
39+
if (event.target.dataset.modal) this.props.onClose(event);
5940
}
6041
}, {
61-
key: 'render',
42+
key: "render",
6243
value: function render() {
63-
if (!this.state.display) return null;
64-
return _react2['default'].createElement(
65-
'div',
66-
_extends({}, this.props, { onClick: this.hideOnOuterClick, 'data-modal': "true" }),
67-
_react2['default'].createElement(
68-
'div',
44+
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",
6950
null,
7051
this.props.children
7152
)
@@ -74,10 +55,10 @@ var Modal = (function (_React$Component) {
7455
}]);
7556

7657
return Modal;
77-
})(_react2['default'].Component);
58+
})(_react2["default"].Component);
7859

79-
exports['default'] = Modal;
80-
module.exports = exports['default'];
60+
exports["default"] = Modal;
61+
module.exports = exports["default"];
8162

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

0 commit comments

Comments
 (0)