Skip to content

Commit 362cb67

Browse files
zackifyzackify
committed
first push
0 parents  commit 362cb67

13 files changed

Lines changed: 522 additions & 0 deletions

File tree

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules/
2+
example/dist

‎README.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
##Simple React Modal
2+
3+
##Install
4+
5+
`npm install simple-react-modal`
6+
7+
##Example
8+
9+
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!
10+
11+
~~~js
12+
import Modal from 'simple-modal'
13+
import 'simple-react-modal/dist/modal' //import the base css
14+
15+
export default class App extends React.Component{
16+
17+
show(){
18+
this.refs.modal.show()
19+
}
20+
21+
render(){
22+
return (
23+
<div>
24+
<a onClick={this.show.bind(this)}>Open Modal</a>
25+
<Modal ref="modal"
26+
className="simple-modal test"
27+
closeOnOuterClick={false}>
28+
29+
<a className="close" onClick={()=>{this.refs.modal.hide()}}>X</a>
30+
<div>hey</div>
31+
32+
</Modal>
33+
</div>
34+
)
35+
}
36+
}
37+
~~~
38+
39+
You have the option to call `this.refs.modal.show()` and `hide()` similar to other modals out there in react.
40+
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.
41+
Customizing the style is easy, to target the actual content area it will be `.your-class div`.

‎build/react-slug.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
'use strict';
2+
3+
Object.defineProperty(exports, '__esModule', {
4+
value: true
5+
});
6+
7+
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; };
8+
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; }; })();
10+
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; 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); } } };
12+
13+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
14+
15+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
16+
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) subClass.__proto__ = superClass; }
18+
19+
var _react = require('react');
20+
21+
var _react2 = _interopRequireDefault(_react);
22+
23+
var Slug = (function (_React$Component) {
24+
function Slug(props) {
25+
_classCallCheck(this, Slug);
26+
27+
_get(Object.getPrototypeOf(Slug.prototype), 'constructor', this).call(this);
28+
29+
this.state = {
30+
value: this.slugify(props.value)
31+
};
32+
this.handleChange = this.handleChange.bind(this);
33+
}
34+
35+
_inherits(Slug, _React$Component);
36+
37+
_createClass(Slug, [{
38+
key: 'slugify',
39+
value: function slugify(text) {
40+
return text.replace(/[^-a-zA-Z0-9\s+]+/ig, '').replace(/\s+/gi, '-').toLowerCase();
41+
}
42+
}, {
43+
key: 'handleChange',
44+
value: function handleChange(event) {
45+
var value = this.slugify(event.target.value);
46+
var modifedEvent = event;
47+
modifedEvent.target.value = value;
48+
49+
this.setState({ value: value });
50+
if (this.props.onChange) this.props.onChange(modifedEvent);
51+
}
52+
}, {
53+
key: 'render',
54+
value: function render() {
55+
return _react2['default'].createElement('input', _extends({}, this.props, { value: this.state.value, onChange: this.handleChange }));
56+
}
57+
}]);
58+
59+
return Slug;
60+
})(_react2['default'].Component);
61+
62+
exports['default'] = Slug;
63+
module.exports = exports['default'];

‎build/simple-modal.js‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
'use strict';
2+
3+
Object.defineProperty(exports, '__esModule', {
4+
value: true
5+
});
6+
7+
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; };
8+
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; }; })();
10+
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); } } };
12+
13+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
14+
15+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
16+
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; }
18+
19+
var _react = require('react');
20+
21+
var _react2 = _interopRequireDefault(_react);
22+
23+
var Slug = (function (_React$Component) {
24+
_inherits(Slug, _React$Component);
25+
26+
function Slug(props) {
27+
_classCallCheck(this, Slug);
28+
29+
_get(Object.getPrototypeOf(Slug.prototype), 'constructor', this).call(this);
30+
var closeOnOuterClick = true;
31+
if (props.closeOnOuterClick === false) closeOnOuterClick = false;
32+
33+
this.state = {
34+
display: 'none',
35+
closeOnOuterClick: closeOnOuterClick
36+
};
37+
this.hide = this.hide.bind(this);
38+
this.hideOnOuterClick = this.hideOnOuterClick.bind(this);
39+
}
40+
41+
_createClass(Slug, [{
42+
key: 'hideOnOuterClick',
43+
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: 'none' });
52+
}
53+
}, {
54+
key: 'show',
55+
value: function show() {
56+
this.setState({ display: 'block' });
57+
}
58+
}, {
59+
key: 'render',
60+
value: function render() {
61+
return _react2['default'].createElement(
62+
'div',
63+
_extends({ style: this.state }, this.props, { onClick: this.hideOnOuterClick, 'data-modal': "true" }),
64+
_react2['default'].createElement(
65+
'div',
66+
{ style: this.state },
67+
this.props.children
68+
)
69+
);
70+
}
71+
}]);
72+
73+
return Slug;
74+
})(_react2['default'].Component);
75+
76+
exports['default'] = Slug;
77+
module.exports = exports['default'];

‎dist/modal.css‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
.simple-modal {
2+
position: fixed;
3+
font-family: Arial, Helvetica, sans-serif;
4+
top: 0;
5+
right: 0;
6+
bottom: 0;
7+
left: 0;
8+
background: rgba(0, 0, 0, 0.8);
9+
z-index: 99999;
10+
opacity: 0;
11+
-webkit-transition: opacity 400ms ease-in;
12+
-moz-transition: opacity 400ms ease-in;
13+
transition: opacity 400ms ease-in;
14+
pointer-events: none;
15+
opacity: 1;
16+
pointer-events: auto;
17+
}
18+
.simple-modal > div {
19+
width: 400px;
20+
position: relative;
21+
margin: 10% auto;
22+
padding: 5px 20px 13px 20px;
23+
background: #fff;
24+
}
25+
.simple-modal .close {
26+
background: #606061;
27+
color: #FFFFFF;
28+
line-height: 25px;
29+
position: absolute;
30+
right: -12px;
31+
text-align: center;
32+
top: -10px;
33+
width: 24px;
34+
text-decoration: none;
35+
font-weight: bold;
36+
-webkit-border-radius: 12px;
37+
-moz-border-radius: 12px;
38+
border-radius: 12px;
39+
-moz-box-shadow: 1px 1px 3px #000;
40+
-webkit-box-shadow: 1px 1px 3px #000;
41+
box-shadow: 1px 1px 3px #000;
42+
cursor: pointer;
43+
}
44+
.simple-modal .close:hover {
45+
background: #00d9ff;
46+
}

‎dist/simple-modal.js‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
(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){
2+
(function (global){
3+
'use strict';
4+
5+
Object.defineProperty(exports, '__esModule', {
6+
value: true
7+
});
8+
9+
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; };
10+
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; }; })();
12+
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); } } };
14+
15+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
16+
17+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
18+
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; }
20+
21+
var _react = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null);
22+
23+
var _react2 = _interopRequireDefault(_react);
24+
25+
var Slug = (function (_React$Component) {
26+
_inherits(Slug, _React$Component);
27+
28+
function Slug(props) {
29+
_classCallCheck(this, Slug);
30+
31+
_get(Object.getPrototypeOf(Slug.prototype), 'constructor', this).call(this);
32+
var closeOnOuterClick = true;
33+
if (props.closeOnOuterClick === false) closeOnOuterClick = false;
34+
35+
this.state = {
36+
display: 'none',
37+
closeOnOuterClick: closeOnOuterClick
38+
};
39+
this.hide = this.hide.bind(this);
40+
this.hideOnOuterClick = this.hideOnOuterClick.bind(this);
41+
}
42+
43+
_createClass(Slug, [{
44+
key: 'hideOnOuterClick',
45+
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: 'none' });
54+
}
55+
}, {
56+
key: 'show',
57+
value: function show() {
58+
this.setState({ display: 'block' });
59+
}
60+
}, {
61+
key: 'render',
62+
value: function render() {
63+
return _react2['default'].createElement(
64+
'div',
65+
_extends({ style: this.state }, this.props, { onClick: this.hideOnOuterClick, 'data-modal': "true" }),
66+
_react2['default'].createElement(
67+
'div',
68+
{ style: this.state },
69+
this.props.children
70+
)
71+
);
72+
}
73+
}]);
74+
75+
return Slug;
76+
})(_react2['default'].Component);
77+
78+
exports['default'] = Slug;
79+
module.exports = exports['default'];
80+
81+
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
82+
},{}]},{},[1])(1)
83+
});

‎dist/simple-modal.min.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/src/example.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react'
2+
import Modal from 'simple-modal'
3+
4+
export default class App extends React.Component{
5+
6+
show(){
7+
this.refs.modal.show()
8+
}
9+
10+
render(){
11+
return (
12+
<div>
13+
<a onClick={this.show.bind(this)}>Open Modal</a>
14+
<Modal ref="modal"
15+
className="simple-modal-base test"
16+
closeOnOuterClick={false}>
17+
18+
<a className="close" onClick={()=>{this.refs.modal.hide()}}>X</a>
19+
<div>hey</div>
20+
21+
</Modal>
22+
</div>
23+
)
24+
}
25+
}
26+
React.render(<App />, document.getElementById('app'));

‎example/src/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!doctype html>
2+
<head>
3+
<title>React Slug</title>
4+
<link rel="stylesheet" type="text/css" href="../../dist/modal.css">
5+
</head>
6+
<body>
7+
<div class="container">
8+
<h1>React Slug</h1>
9+
<h2><a href="http://github.com/zackify/simple-modal">View project on GitHub</a></h2>
10+
<!-- the example app is rendered into this div -->
11+
<div id="app"></div>
12+
<div class="hint">
13+
<!-- put any hints about your component example here -->
14+
</div>
15+
<div class="footer">
16+
Copyright &copy; 2015 Zach Silveira.
17+
</div>
18+
</div>
19+
<script src="common.js"></script>
20+
<script src="bundle.js"></script>
21+
<script src="example.js"></script>
22+
</body>

0 commit comments

Comments
 (0)