├── .babelrc
├── docs
    ├── google7f947305de6a45dc.html
    ├── assets
    │   ├── images
    │   │   └── ogp.png
    │   ├── js
    │   │   ├── app.js
    │   │   └── demo.js
    │   ├── scss
    │   │   ├── _reset.scss
    │   │   └── style.scss
    │   └── css
    │   │   └── style.css
    └── index.html
├── .gitignore
├── assets
    └── images
    │   └── demo.gif
├── .travis.yml
├── src
    ├── style.js
    ├── effect
    │   ├── fadeInUp.js
    │   ├── fadeInDown.js
    │   ├── fadeInLeft.js
    │   └── fadeInRight.js
    └── index.js
├── gulpfile.js
├── test
    └── modal.test.js
├── LICENSE
├── package.json
└── README.md


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "presets": ["react", "stage-2", "es2015"]
3 | }
4 | 


--------------------------------------------------------------------------------
/docs/google7f947305de6a45dc.html:
--------------------------------------------------------------------------------
1 | google-site-verification: google7f947305de6a45dc.html


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | npm-debug.log
3 | node_modules
4 | lib
5 | examples/bundle.js
6 | 


--------------------------------------------------------------------------------
/assets/images/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shibe97/react-awesome-modal/HEAD/assets/images/demo.gif


--------------------------------------------------------------------------------
/docs/assets/images/ogp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shibe97/react-awesome-modal/HEAD/docs/assets/images/ogp.png


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - "6.3.0"
4 | install:
5 |   - npm install
6 | script:
7 |   - npm run build:src
8 |   - npm test
9 | 


--------------------------------------------------------------------------------
/docs/assets/js/app.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import Demo from './demo.js';
4 | 
5 | ReactDOM.render(
6 |     <Demo />,
7 |     document.getElementById('App')
8 | );
9 | 


--------------------------------------------------------------------------------
/src/style.js:
--------------------------------------------------------------------------------
 1 | import fadeInDown from './effect/fadeInDown';
 2 | import fadeInUp from './effect/fadeInUp';
 3 | import fadeInLeft from './effect/fadeInLeft';
 4 | import fadeInRight from './effect/fadeInRight';
 5 | 
 6 | export default {
 7 |     fadeInDown : fadeInDown,
 8 |     fadeInUp : fadeInUp,
 9 |     fadeInLeft : fadeInLeft,
10 |     fadeInRight : fadeInRight
11 | };
12 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp       = require('gulp');
 2 | var sass       = require('gulp-sass');
 3 | 
 4 | gulp.task('watch', function() {
 5 |     gulp.watch('docs/**/*.scss', ['sass']);
 6 | });
 7 | 
 8 | gulp.task('sass', function() {
 9 |     gulp.src('docs/assets/scss/**/*.scss')
10 |         .pipe(sass())
11 |         .pipe(gulp.dest('docs/assets/css'));
12 | });
13 | 
14 | gulp.task('default',['watch']);
15 | 


--------------------------------------------------------------------------------
/test/modal.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import TestRenderer from 'react-test-renderer';
 3 | import assert from 'power-assert';
 4 | import Modal from '../src/index';
 5 | 
 6 | describe('Modal', () => {
 7 |     it('the default unit is px.', () => {
 8 |         const renderer = TestRenderer.create(
 9 |             <Modal visible={true} width="600" height="500">
10 |                 <p>this is a modal.</p>
11 |             </Modal>
12 |         );
13 |         const style = renderer.toJSON().children[0].children[0].props.style;
14 |         assert(
15 |           style.width === "600px" &&
16 |           style.height === "500px"
17 |         );
18 |     });
19 | });
20 | 
21 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Kazuki Shibata
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/effect/fadeInUp.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     'mask': {
 3 |         'position': 'fixed',
 4 |         'top': 0,
 5 |         'left': 0,
 6 |         'width': '100%',
 7 |         'height': '100%',
 8 |         'backgroundColor': 'rgba(0, 0, 0, 0.7)',
 9 |         'zIndex': 10001
10 |     },
11 |     'maskHidden': {
12 |         'display': 'none'
13 |     },
14 |     'container': {
15 |         'position': 'fixed',
16 |         'top': 0,
17 |         'left': 0,
18 |         'width': '100%',
19 |         'height': '100%',
20 |         'display': 'flex',
21 |         'justifyContent': 'center',
22 |         'alignItems': 'center',
23 |         'zIndex': 10000
24 |     },
25 |     'containerHidden': {
26 |         'position': 'fixed',
27 |         'top': 0,
28 |         'left': 0,
29 |         'width': '100%',
30 |         'height': '100%',
31 |         'display': 'flex',
32 |         'justifyContent': 'center',
33 |         'alignItems': 'center',
34 |         'zIndex': -1
35 |     },
36 |     'panel': {
37 |         'backgroundColor': '#fff',
38 |         'borderRadius': '5px',
39 |         'boxSizing': 'border-box',
40 |         'boxShadow': '0 2px 4px rgba(0, 0, 0, 0.3)',
41 |         'transform': 'translate3d(0, 0, 0)',
42 |         'transition': 'transform 500ms cubic-bezier(0, 0, 0.25, 1), opacity 500ms cubic-bezier(0, 0, 0.25, 1)',
43 |         'zIndex': 10002
44 |     },
45 |     'panelHidden': {
46 |         'transform': 'translate3d(0, 100px, 0)',
47 |         'opacity': 0,
48 |         'zIndex': -1,
49 |         'height': 0,
50 |         'width': 0,
51 |         'overflow': 'hidden'
52 |     }
53 | };
54 | 


--------------------------------------------------------------------------------
/src/effect/fadeInDown.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     'mask': {
 3 |         'position': 'fixed',
 4 |         'top': 0,
 5 |         'left': 0,
 6 |         'width': '100%',
 7 |         'height': '100%',
 8 |         'backgroundColor': 'rgba(0, 0, 0, 0.7)',
 9 |         'zIndex': 10001
10 |     },
11 |     'maskHidden': {
12 |         'display': 'none'
13 |     },
14 |     'container': {
15 |         'position': 'fixed',
16 |         'top': 0,
17 |         'left': 0,
18 |         'width': '100%',
19 |         'height': '100%',
20 |         'display': 'flex',
21 |         'justifyContent': 'center',
22 |         'alignItems': 'center',
23 |         'zIndex': 10000
24 |     },
25 |     'containerHidden': {
26 |         'position': 'fixed',
27 |         'top': 0,
28 |         'left': 0,
29 |         'width': '100%',
30 |         'height': '100%',
31 |         'display': 'flex',
32 |         'justifyContent': 'center',
33 |         'alignItems': 'center',
34 |         'zIndex': -1
35 |     },
36 |     'panel': {
37 |         'backgroundColor': '#fff',
38 |         'borderRadius': '5px',
39 |         'boxSizing': 'border-box',
40 |         'boxShadow': '0 2px 4px rgba(0, 0, 0, 0.3)',
41 |         'transform': 'translate3d(0, 0, 0)',
42 |         'transition': 'transform 500ms cubic-bezier(0, 0, 0.25, 1), opacity 500ms cubic-bezier(0, 0, 0.25, 1)',
43 |         'zIndex': 10002
44 |     },
45 |     'panelHidden': {
46 |         'transform': 'translate3d(0, -100px, 0)',
47 |         'opacity': 0,
48 |         'zIndex': -1,
49 |         'height': 0,
50 |         'width': 0,
51 |         'overflow': 'hidden'
52 |     }
53 | };
54 | 


--------------------------------------------------------------------------------
/src/effect/fadeInLeft.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     'mask': {
 3 |         'position': 'fixed',
 4 |         'top': 0,
 5 |         'left': 0,
 6 |         'width': '100%',
 7 |         'height': '100%',
 8 |         'backgroundColor': 'rgba(0, 0, 0, 0.7)',
 9 |         'zIndex': 10001
10 |     },
11 |     'maskHidden': {
12 |         'display': 'none'
13 |     },
14 |     'container': {
15 |         'position': 'fixed',
16 |         'top': 0,
17 |         'left': 0,
18 |         'width': '100%',
19 |         'height': '100%',
20 |         'display': 'flex',
21 |         'justifyContent': 'center',
22 |         'alignItems': 'center',
23 |         'zIndex': 10000
24 |     },
25 |     'containerHidden': {
26 |         'position': 'fixed',
27 |         'top': 0,
28 |         'left': 0,
29 |         'width': '100%',
30 |         'height': '100%',
31 |         'display': 'flex',
32 |         'justifyContent': 'center',
33 |         'alignItems': 'center',
34 |         'zIndex': -1
35 |     },
36 |     'panel': {
37 |         'backgroundColor': '#fff',
38 |         'borderRadius': '5px',
39 |         'boxSizing': 'border-box',
40 |         'boxShadow': '0 2px 4px rgba(0, 0, 0, 0.3)',
41 |         'transform': 'translate3d(0, 0, 0)',
42 |         'transition': 'transform 500ms cubic-bezier(0, 0, 0.25, 1), opacity 500ms cubic-bezier(0, 0, 0.25, 1)',
43 |         'zIndex': 10002
44 |     },
45 |     'panelHidden': {
46 |         'transform': 'translate3d(-100px, 0, 0)',
47 |         'opacity': 0,
48 |         'zIndex': -1,
49 |         'height': 0,
50 |         'width': 0,
51 |         'overflow': 'hidden'
52 |     }
53 | };
54 | 


--------------------------------------------------------------------------------
/src/effect/fadeInRight.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     'mask': {
 3 |         'position': 'fixed',
 4 |         'top': 0,
 5 |         'left': 0,
 6 |         'width': '100%',
 7 |         'height': '100%',
 8 |         'backgroundColor': 'rgba(0, 0, 0, 0.7)',
 9 |         'zIndex': 10001
10 |     },
11 |     'maskHidden': {
12 |         'display': 'none'
13 |     },
14 |     'container': {
15 |         'position': 'fixed',
16 |         'top': 0,
17 |         'left': 0,
18 |         'width': '100%',
19 |         'height': '100%',
20 |         'display': 'flex',
21 |         'justifyContent': 'center',
22 |         'alignItems': 'center',
23 |         'zIndex': 10000
24 |     },
25 |     'containerHidden': {
26 |         'position': 'fixed',
27 |         'top': 0,
28 |         'left': 0,
29 |         'width': '100%',
30 |         'height': '100%',
31 |         'display': 'flex',
32 |         'justifyContent': 'center',
33 |         'alignItems': 'center',
34 |         'zIndex': -1
35 |     },
36 |     'panel': {
37 |         'backgroundColor': '#fff',
38 |         'borderRadius': '5px',
39 |         'boxSizing': 'border-box',
40 |         'boxShadow': '0 2px 4px rgba(0, 0, 0, 0.3)',
41 |         'transform': 'translate3d(0, 0, 0)',
42 |         'transition': 'transform 500ms cubic-bezier(0, 0, 0.25, 1), opacity 500ms cubic-bezier(0, 0, 0.25, 1)',
43 |         'zIndex': 10002
44 |     },
45 |     'panelHidden': {
46 |         'transform': 'translate3d(100px, 0, 0)',
47 |         'opacity': 0,
48 |         'zIndex': -1,
49 |         'height': 0,
50 |         'width': 0,
51 |         'overflow': 'hidden'
52 |     }
53 | };
54 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-awesome-modal",
 3 |   "version": "2.0.6",
 4 |   "description": "This is a React Modal Component.",
 5 |   "main": "./lib/index",
 6 |   "keywords": [
 7 |     "react",
 8 |     "component",
 9 |     "modal",
10 |     "react-component"
11 |   ],
12 |   "files": [
13 |     "lib"
14 |   ],
15 |   "directories": {
16 |     "example": "examples"
17 |   },
18 |   "scripts": {
19 |     "build:src": "babel src --out-dir lib --source-maps-inline",
20 |     "build:docs": "browserify --debug --transform babelify docs/assets/js/app.js --outfile docs/assets/js/bundle.js",
21 |     "watch": "babel src --out-dir lib --watch --source-maps-inline",
22 |     "test": "mocha --compilers js:babel-core/register test/**/*.js",
23 |     "docs": "open docs/index.html",
24 |     "gulp": "gulp"
25 |   },
26 |   "repository": {
27 |     "type": "git",
28 |     "url": "https://github.com/shibe97/react-awesome-modal.git"
29 |   },
30 |   "author": "shibe97",
31 |   "license": "MIT",
32 |   "devDependencies": {
33 |     "babel-cli": "^6.26.0",
34 |     "babel-core": "^6.26.3",
35 |     "babel-preset-es2015": "^6.24.1",
36 |     "babel-preset-react": "^6.24.1",
37 |     "babel-preset-stage-2": "^6.24.1",
38 |     "babelify": "^7.2.0",
39 |     "browserify": "^13.0.0",
40 |     "gulp": "^3.9.0",
41 |     "gulp-sass": "^2.3.2",
42 |     "mocha": "~2.3.2",
43 |     "power-assert": "~1.0.0",
44 |     "react": "^16.2.0",
45 |     "react-dom": "^16.2.0",
46 |     "react-test-renderer": "^16.2.0",
47 |     "vinyl-source-stream": "^1.1.0"
48 |   },
49 |   "bugs": {
50 |     "url": "https://github.com/shibe97/react-awesome-modal/issues"
51 |   },
52 |   "homepage": "https://github.com/shibe97/react-awesome-modal"
53 | }
54 | 


--------------------------------------------------------------------------------
/docs/assets/scss/_reset.scss:
--------------------------------------------------------------------------------
 1 | @charset "utf-8";
 2 | 
 3 | /* ----------------------------------------------------
 4 | * reset style
 5 | * -------------------------------------------------- */
 6 | 
 7 | /* for new HTML5 elements */
 8 | section, article, aside, hgroup, header, footer, nav, figure, figcaption, summary { display: block; }
 9 | body {
10 | 	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", Verdana, Geneva, Arial, Helvetica;
11 | 	word-wrap: break-word;
12 | 	word-break:break-all;
13 | }
14 | 
15 | body, div,
16 | dl, dt, dd,
17 | ul, ol, li,
18 | h1, h2, h3, h4, h5, h6,
19 | pre, code,
20 | form, fieldset, legend, input, textarea,
21 | p, blockquote,
22 | th, td {
23 | 	margin: 0;
24 | 	padding: 0;
25 | }
26 | 
27 | address, cite, dfn, em, strong, var, th, ins, del, samp {
28 | 	font-weight: normal;
29 | 	font-style: normal;
30 | }
31 | 
32 | h1, h2, h3, h4, h5, h6 {
33 | 	font-size: 100%;
34 | 	font-weight: normal;
35 | }
36 | 
37 | table {
38 | 	font-size: inherit;
39 | 	font: 100%;
40 | 	border-collapse: collapse;
41 | 	border-spacing: 0;
42 | }
43 | 
44 | li {
45 | 	list-style-type: none;
46 | }
47 | 
48 | input, textarea, select {
49 | 	font-family: inherit;
50 | 	font-size: inherit;
51 | 	font-weight: inherit;
52 | 	*font-size: 100%;
53 | }
54 | 
55 | pre,code,kbd,samp,tt {
56 | 	font-family: monospace;
57 | 	*font-size: 108%;
58 | 	line-height: 100%;
59 | }
60 | 
61 | caption, th {
62 | 	text-align: left;
63 | }
64 | 
65 | fieldset {
66 |   padding: 10px 20px 25px;
67 |   border: 1px solid #39a7c5;
68 |   border-radius: 3px;
69 | }
70 | 
71 | a img {
72 | 	border: none;
73 | }
74 | 
75 | a {
76 |   color: #39a7c5;
77 | }
78 | 
79 | hr {
80 | 	display: none;
81 | }
82 | 
83 | object,
84 | embed {
85 | 	vertical-align: top;
86 | }
87 | 
88 | .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */
89 | 


--------------------------------------------------------------------------------
/docs/assets/scss/style.scss:
--------------------------------------------------------------------------------
  1 | @import "reset";
  2 | 
  3 | .Wrapper {
  4 |     background-color: #eee;
  5 |     overflow: hidden;
  6 | }
  7 | 
  8 | .Area {
  9 |     width: 960px;
 10 |     margin: 0 auto;
 11 |     padding: 0 20px;
 12 | }
 13 | @media screen and (max-width: 600px) {
 14 |     .Area {
 15 |         width: auto;
 16 |         margin: auto;
 17 |     }
 18 | }
 19 | 
 20 | .Content {
 21 |     padding-top: 100px;
 22 | 
 23 |     &__title {
 24 |         font-size: 200%;
 25 |     }
 26 | 
 27 |     &__fieldset {
 28 |       border-color: #f03;
 29 |     }
 30 | 
 31 |     &__legend {
 32 |         padding: 0 10px;
 33 |         font-size: 120%;
 34 |         color: #f03;
 35 |     }
 36 | 
 37 |     &__description {
 38 |         color: #666;
 39 |     }
 40 | 
 41 |     &__step {
 42 |         color: #666;
 43 |         padding: 40px 0 10px;
 44 |     }
 45 | 
 46 |     &__list {
 47 |         padding-top: 40px;
 48 |         line-height: 2;
 49 |     }
 50 | 
 51 |     &__table {
 52 |         width: 100%;
 53 |         color: #666;
 54 | 
 55 |         tr:nth-child(even) {
 56 |             background-color: #f3f3f3;
 57 |         }
 58 | 
 59 |         th {
 60 |             border-bottom: 4px solid #ccc;
 61 |             padding: 20px;
 62 |             font-weight: bold;
 63 |         }
 64 | 
 65 |         td {
 66 |             padding: 20px;
 67 | 
 68 |             &:first-child {
 69 |                 font-weight: bold;
 70 |             }
 71 |         }
 72 |     }
 73 | }
 74 | 
 75 | .Top {
 76 |     background-color: #39a7c5;
 77 |     padding: 100px 0;
 78 | 
 79 |     &__title {
 80 |         font-size: 300%;
 81 |         font-weight: bold;
 82 |         color: #fff;
 83 |     }
 84 | 
 85 |     &__description {
 86 |         color: #fff;
 87 |     }
 88 | 
 89 |     &__github {
 90 |         padding-top: 40px;
 91 |     }
 92 | }
 93 | 
 94 | .Modal {
 95 |     padding: 100px;
 96 |     text-align: center;
 97 |     
 98 |     &__title {
 99 |         font-size: 200%;
100 |     }
101 | }
102 | 
103 | .Footer {
104 |     background-color: #ccc;
105 |     margin-top: 100px;
106 |     padding: 100px 0;
107 |     color: #888;
108 | 
109 |     &__title {
110 |         color: #666;
111 |         font-size: 150%;
112 |     }
113 | 
114 |     &__license {
115 |         padding-top: 20px;
116 |     }
117 | }
118 | 
119 | .hljs {
120 |     background: #fff;
121 |     line-height: 1.5;
122 |     padding: 0.5em 2em;
123 |     font-size: 120%;
124 | }
125 | 


--------------------------------------------------------------------------------
/docs/assets/js/demo.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import Modal from '../../../src/index.js';
 3 | 
 4 | export default class Demo extends Component {
 5 |     constructor(props) {
 6 |         super(props);
 7 |         this.state = {
 8 |             fadeInDown : false,
 9 |             fadeInUp : false,
10 |             fadeInLeft : false,
11 |             fadeInRight : false,
12 |         }
13 |     }
14 | 
15 |     open(effect) {
16 |       this.setState({
17 |         [effect] : true
18 |       });
19 |     }
20 | 
21 |     close(effect) {
22 |       this.setState({
23 |         [effect] : false
24 |       });
25 |     }
26 | 
27 |     render() {
28 |         return (
29 |             <div>
30 |                 <ul>
31 |                     <li><a href="javascript:void(0);" onClick={() => this.open('fadeInDown')}>fadeInDown</a></li>
32 |                     <li><a href="javascript:void(0);" onClick={() => this.open('fadeInUp')}>fadeInUp</a></li>
33 |                     <li><a href="javascript:void(0);" onClick={() => this.open('fadeInLeft')}>fadeInLeft</a></li>
34 |                     <li><a href="javascript:void(0);" onClick={() => this.open('fadeInRight')}>fadeInRight</a></li>
35 |                 </ul>
36 |                 <Modal visible={this.state.fadeInDown} effect="fadeInDown" onClickAway={() => this.close('fadeInDown')}>
37 |                     <div className="Modal">
38 |                         <h1 className="Modal__title">FadeInDown</h1>
39 |                         <a href="javascript:void(0);" onClick={() => this.close('fadeInDown')}>Close</a>
40 |                     </div>
41 |                 </Modal>
42 |                 <Modal visible={this.state.fadeInUp} effect="fadeInUp" onClickAway={() => this.close('fadeInUp')}>
43 |                     <div className="Modal">
44 |                         <h1 className="Modal__title">FadeInUp</h1>
45 |                         <a href="javascript:void(0);" onClick={() => this.close('fadeInUp')}>Close</a>
46 |                     </div>
47 |                 </Modal>
48 |                 <Modal visible={this.state.fadeInLeft} effect="fadeInLeft" onClickAway={() => this.close('fadeInLeft')}>
49 |                     <div className="Modal">
50 |                         <h1 className="Modal__title">FadeInLeft</h1>
51 |                         <a href="javascript:void(0);" onClick={() => this.close('fadeInLeft')}>Close</a>
52 |                     </div>
53 |                 </Modal>
54 |                 <Modal visible={this.state.fadeInRight} effect="fadeInRight" onClickAway={() => this.close('fadeInRight')}>
55 |                     <div className="Modal">
56 |                         <h1 className="Modal__title">FadeInRight</h1>
57 |                         <a href="javascript:void(0);" onClick={() => this.close('fadeInRight')}>Close</a>
58 |                     </div>
59 |                 </Modal>
60 |             </div>
61 |         );
62 |     }
63 | }
64 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import style from './style.js';
 3 | 
 4 | export default class Modal extends Component {
 5 |     constructor(props) {
 6 |         super(props);
 7 |         let effect = props.effect || 'fadeInDown';
 8 |         this.setSize(effect);
 9 |         this.state = {
10 |             visible : props.visible,
11 |             style : style[effect]
12 |         }
13 |     }
14 | 
15 |     componentWillReceiveProps({visible, effect = 'fadeInDown'}) {
16 |         this.setState({
17 |             visible : visible
18 |         });
19 |         this.setSize(effect);
20 |         this.setStyles(effect);
21 |     }
22 | 
23 |     setStyles(effect){
24 |         if (this.props && this.props.styles) {
25 |             style[effect].panel = {
26 |                 ...style[effect].panel,
27 |                 ...this.props.styles
28 |             };
29 |         }
30 |     }
31 | 
32 |     setSize(effect) {
33 |         if (this.props && this.props.width) {
34 |             if (this.props.width.charAt(this.props.width.length-1) === '%') {
35 |                 // Use Percentage
36 |                 const width = this.props.width.slice(0, -1);
37 |                 style[effect].panel.width = width + '%';
38 | 
39 |             } else if (this.props.width.charAt(this.props.width.length-1) === 'x') {
40 |                 // Use Pixels
41 |                 const width = this.props.width.slice(0, -2);
42 |                 style[effect].panel.width = width + 'px';
43 | 
44 |             } else {
45 |                 // Defaults
46 |                 style[effect].panel.width = this.props.width + 'px';
47 |             }
48 |         }
49 |         if (this.props && this.props.height) {
50 |             if (this.props.height.charAt(this.props.height.length-1) === '%') {
51 |                 // Use Percentage
52 |                 const height = this.props.height.slice(0, -1);
53 |                 style[effect].panel.height = height + 'vh';
54 | 
55 |             } else if (this.props.height.charAt(this.props.height.length-1) === 'x') {
56 |                 // Use Pixels
57 |                 const height = this.props.height.slice(0, -2);
58 |                 style[effect].panel.height = height + 'px';
59 | 
60 |             } else {
61 |                 // Defaults
62 |                 style[effect].panel.height = this.props.height + 'px';
63 |             }
64 |         }
65 |     }
66 | 
67 |     render() {
68 |         return (
69 |             <div>
70 |                 <div style={this.state.visible ? this.state.style.container : this.state.style.containerHidden}>
71 |                     <div style={this.state.visible ? {...this.state.style.panel} : this.state.style.panelHidden}>
72 |                         {this.props.children}
73 |                     </div>
74 |                     <div style={this.state.visible ? this.state.style.mask : this.state.style.maskHidden} onClick={this.props.onClickAway ? this.props.onClickAway : null} />
75 |                 </div>
76 |             </div>
77 |         );
78 |     }
79 | }
80 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Deprecated
  2 | This repository is deprecated.
  3 | But I created a new modal package which uses react hooks.
  4 | It's easier and more intuitive.
  5 | Prease look at the new repository.
  6 | 
  7 | https://github.com/microcmsio/react-hooks-use-modal
  8 | 
  9 | # react-awesome-modal
 10 | [![Build Status](https://travis-ci.org/shibe97/react-awesome-modal.svg?branch=master)](https://travis-ci.org/shibe97/react-awesome-modal)
 11 | 
 12 | This is a Customizable Modal.
 13 | 
 14 | [http://shibe97.github.io/react-awesome-modal/](http://shibe97.github.io/react-awesome-modal/)
 15 | 
 16 | ![demo](./assets/images/demo.gif)
 17 | 
 18 | ## Usage
 19 | ```javascript
 20 | import React, { Component } from 'react';
 21 | import Modal from 'react-awesome-modal';
 22 | 
 23 | export default class Examples extends Component {
 24 |     constructor(props) {
 25 |         super(props);
 26 |         this.state = {
 27 |             visible : false
 28 |         }
 29 |     }
 30 | 
 31 |     openModal() {
 32 |         this.setState({
 33 |             visible : true
 34 |         });
 35 |     }
 36 | 
 37 |     closeModal() {
 38 |         this.setState({
 39 |             visible : false
 40 |         });
 41 |     }
 42 | 
 43 |     render() {
 44 |         return (
 45 |             <section>
 46 |                 <h1>React-Modal Examples</h1>
 47 |                 <input type="button" value="Open" onClick={() => this.openModal()} />
 48 |                 <Modal visible={this.state.visible} width="400" height="300" effect="fadeInUp" onClickAway={() => this.closeModal()}>
 49 |                     <div>
 50 |                         <h1>Title</h1>
 51 |                         <p>Some Contents</p>
 52 |                         <a href="javascript:void(0);" onClick={() => this.closeModal()}>Close</a>
 53 |                     </div>
 54 |                 </Modal>
 55 |             </section>
 56 |         );
 57 |     }
 58 | }
 59 | ```
 60 | 
 61 | ## Props
 62 | | Attribute   | Required | Type     | description                                 | example                      |
 63 | |:------------|:---------|:---------|:--------------------------------------------|:-----------------------------|
 64 | | visible     | required | Boolean  | to show or hide the dialog                  | false                        |
 65 | | effect      | option   | String   | to set how to pop-up                        | fadeInUp, fadeInDown, etc... |
 66 | | width       | option   | String   | to set modal width (px or %)                | 500, 500px, 80%              |
 67 | | height      | option   | String   | to set modal height (px or %)               | 400, 400px, 50%              |
 68 | | onClickAway | option   | Function | to set actions when the user click the mask | -                            |
 69 | 
 70 | ## Effect
 71 | - fadeInDown [default]
 72 | - fadeInUp
 73 | - fadeInLeft
 74 | - fadeInRight
 75 | 
 76 | ## How To Develop
 77 | ### Setup
 78 | ```
 79 | $ npm install
 80 | ```
 81 | 
 82 | ### Build
 83 | ```
 84 | $ npm run build
 85 | ```
 86 | 
 87 | ### Watch and auto build
 88 | ```
 89 | $ npm run watch
 90 | ```
 91 | 
 92 | ### Test
 93 | ```
 94 | $ npm test
 95 | ```
 96 | 
 97 | ### Docs
 98 | ```
 99 | $ npm run docs
100 | ```
101 | 
102 | ## License
103 | MIT
104 | 


--------------------------------------------------------------------------------
/docs/assets/css/style.css:
--------------------------------------------------------------------------------
  1 | @charset "UTF-8";
  2 | /* ----------------------------------------------------
  3 | * reset style
  4 | * -------------------------------------------------- */
  5 | /* for new HTML5 elements */
  6 | section, article, aside, hgroup, header, footer, nav, figure, figcaption, summary {
  7 |   display: block; }
  8 | 
  9 | body {
 10 |   font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", Verdana, Geneva, Arial, Helvetica;
 11 |   word-wrap: break-word;
 12 |   word-break: break-all; }
 13 | 
 14 | body, div,
 15 | dl, dt, dd,
 16 | ul, ol, li,
 17 | h1, h2, h3, h4, h5, h6,
 18 | pre, code,
 19 | form, fieldset, legend, input, textarea,
 20 | p, blockquote,
 21 | th, td {
 22 |   margin: 0;
 23 |   padding: 0; }
 24 | 
 25 | address, cite, dfn, em, strong, var, th, ins, del, samp {
 26 |   font-weight: normal;
 27 |   font-style: normal; }
 28 | 
 29 | h1, h2, h3, h4, h5, h6 {
 30 |   font-size: 100%;
 31 |   font-weight: normal; }
 32 | 
 33 | table {
 34 |   font-size: inherit;
 35 |   font: 100%;
 36 |   border-collapse: collapse;
 37 |   border-spacing: 0; }
 38 | 
 39 | li {
 40 |   list-style-type: none; }
 41 | 
 42 | input, textarea, select {
 43 |   font-family: inherit;
 44 |   font-size: inherit;
 45 |   font-weight: inherit;
 46 |   *font-size: 100%; }
 47 | 
 48 | pre, code, kbd, samp, tt {
 49 |   font-family: monospace;
 50 |   *font-size: 108%;
 51 |   line-height: 100%; }
 52 | 
 53 | caption, th {
 54 |   text-align: left; }
 55 | 
 56 | fieldset {
 57 |   padding: 10px 20px 25px;
 58 |   border: 1px solid #39a7c5;
 59 |   border-radius: 3px; }
 60 | 
 61 | a img {
 62 |   border: none; }
 63 | 
 64 | a {
 65 |   color: #39a7c5; }
 66 | 
 67 | hr {
 68 |   display: none; }
 69 | 
 70 | object,
 71 | embed {
 72 |   vertical-align: top; }
 73 | 
 74 | .clearfix:after {
 75 |   content: ".";
 76 |   display: block;
 77 |   height: 0;
 78 |   clear: both;
 79 |   visibility: hidden; }
 80 | 
 81 | .clearfix {
 82 |   display: inline-block; }
 83 | 
 84 | /* Hides from IE-mac \*/
 85 | * html .clearfix {
 86 |   height: 1%; }
 87 | 
 88 | .clearfix {
 89 |   display: block; }
 90 | 
 91 | /* End hide from IE-mac */
 92 | .Wrapper {
 93 |   background-color: #eee;
 94 |   overflow: hidden; }
 95 | 
 96 | .Area {
 97 |   width: 960px;
 98 |   margin: 0 auto;
 99 |   padding: 0 20px; }
100 | 
101 | @media screen and (max-width: 600px) {
102 |   .Area {
103 |     width: auto;
104 |     margin: auto; } }
105 | 
106 | .Content {
107 |   padding-top: 100px; }
108 |   .Content__title {
109 |     font-size: 200%; }
110 |   .Content__fieldset {
111 |     border-color: #f03; }
112 |   .Content__legend {
113 |     padding: 0 10px;
114 |     font-size: 120%;
115 |     color: #f03; }
116 |   .Content__description {
117 |     color: #666; }
118 |   .Content__step {
119 |     color: #666;
120 |     padding: 40px 0 10px; }
121 |   .Content__list {
122 |     padding-top: 40px;
123 |     line-height: 2; }
124 |   .Content__table {
125 |     width: 100%;
126 |     color: #666; }
127 |     .Content__table tr:nth-child(even) {
128 |       background-color: #f3f3f3; }
129 |     .Content__table th {
130 |       border-bottom: 4px solid #ccc;
131 |       padding: 20px;
132 |       font-weight: bold; }
133 |     .Content__table td {
134 |       padding: 20px; }
135 |       .Content__table td:first-child {
136 |         font-weight: bold; }
137 | 
138 | .Top {
139 |   background-color: #39a7c5;
140 |   padding: 100px 0; }
141 |   .Top__title {
142 |     font-size: 300%;
143 |     font-weight: bold;
144 |     color: #fff; }
145 |   .Top__description {
146 |     color: #fff; }
147 |   .Top__github {
148 |     padding-top: 40px; }
149 | 
150 | .Modal {
151 |   padding: 100px;
152 |   text-align: center; }
153 |   .Modal__title {
154 |     font-size: 200%; }
155 | 
156 | .Footer {
157 |   background-color: #ccc;
158 |   margin-top: 100px;
159 |   padding: 100px 0;
160 |   color: #888; }
161 |   .Footer__title {
162 |     color: #666;
163 |     font-size: 150%; }
164 |   .Footer__license {
165 |     padding-top: 20px; }
166 | 
167 | .hljs {
168 |   background: #fff;
169 |   line-height: 1.5;
170 |   padding: 0.5em 2em;
171 |   font-size: 120%; }
172 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head lang="en">
  4 |         <meta charset="UTF-8">
  5 |         <title>react-awesome-modal | React Component</title>
  6 |         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/default.min.css">
  7 |         <link rel="stylesheet" type="text/css" href="assets/css/style.css">
  8 |         <meta name="description" content="react-awesome-modal is a component for react application.">
  9 |         <meta name="keywords" content="react,modal,awesome,component,react-component,react-modal">
 10 |         <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
 11 |         <meta property="og:type" content="website">
 12 |         <meta property="og:title" content="react-awesome-modal">
 13 |         <meta property="og:description" content="react-awesome-modal is a component for react application.">
 14 |         <meta property="og:url" content="http://shibe97.github.io/react-awesome-modal/">
 15 |         <meta property="og:image" content="http://shibe97.github.io/react-awesome-modal/assets/images/ogp.png">
 16 |         <meta property="og:site_name" content="react-awesome-modal">
 17 |         <meta property="og:locale" content="en_us">
 18 |         <meta name="twitter:card" content="summary">
 19 |         <meta name="twitter:site" content="@shibe97">
 20 |     </head>
 21 |     <body>
 22 |         <div class="Wrapper">
 23 |             <a href="https://github.com/shibe97/react-awesome-modal"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
 24 |             <div class="Top">
 25 |                 <div class="Area">
 26 |                     <h1 class="Top__title">react-awesome-modal</h1>
 27 |                     <p class="Top__description">This is a React component. You can easily set up the modal.</p>
 28 |                     <div class="Top__github">
 29 |                         <iframe src="https://ghbtns.com/github-btn.html?user=shibe97&repo=react-awesome-modal&type=star&count=false&size=large" frameborder="0" scrolling="0" width="90px" height="30px"></iframe>
 30 |                         <iframe src="https://ghbtns.com/github-btn.html?user=shibe97&repo=react-awesome-modal&type=fork&count=false&size=large" frameborder="0" scrolling="0" width="158px" height="30px"></iframe>
 31 |                     </div>
 32 |                 </div>
 33 |             </div>
 34 |             <section class="Content">
 35 |                 <div class="Area">
 36 |                     <fieldset class="Content__fieldset">
 37 |                       <legend class="Content__legend">Information</legend>
 38 |                       <dl class="Content__description">
 39 |                           <dt class="Content__title">This Package is deprecated.</dt>
 40 |                           <dd>It's consist of legacy stacks.</dd>
 41 |                           <dd>So I created a new modal package with react-hooks and raect-portal.</dd>
 42 |                           <dd>Please check it.</dd>
 43 |                           <dd><a href="https://github.com/shibe97/react-hooks-use-modal">https://github.com/shibe97/react-hooks-use-modal</a></dd>
 44 |                       </dl>
 45 |                     </fieldset>
 46 |                 </div>
 47 |             </section>
 48 |             <section class="Content">
 49 |                 <div class="Area">
 50 |                     <h2 class="Content__title">Demo</h2>
 51 |                     <p class="Content__description">Now, there are four effects. I'll add to them gradually.</p>
 52 |                     <div id="App" class="Content__list"></div>
 53 |                 </div>  
 54 |             </section>
 55 |             <section class="Content">
 56 |                 <div class="Area">
 57 |                     <h2 class="Content__title">Usage</h2>
 58 |                     <p class="Content__step">First, download by npm.</p>
 59 |                     <div class="Code">
 60 |                         <pre>
 61 |                             <code>
 62 | $ npm i -S react-awesome-modal
 63 |                             </code>
 64 |                         </pre>
 65 |                     </div>  
 66 |                     <p class="Content__step">In your react application, import(require) and use.<br>ES6 style is as below.</p>
 67 |                     <div class="Code">
 68 |                         <pre>
 69 |                             <code class="javascript">
 70 | import React, { Component } from 'react';
 71 | import Modal from 'react-awesome-modal';
 72 | 
 73 | export default class Examples extends Component {
 74 |     constructor(props) {
 75 |         super(props);
 76 |         this.state = {
 77 |             visible : false
 78 |         }
 79 |     }
 80 | 
 81 |     openModal() {
 82 |         this.setState({
 83 |             visible : true
 84 |         });
 85 |     }
 86 | 
 87 |     closeModal() {
 88 |         this.setState({
 89 |             visible : false
 90 |         });
 91 |     }
 92 | 
 93 |     render() {
 94 |         return (
 95 |             &lt;section&gt;
 96 |                 &lt;h1&gt;React-Modal Examples&lt;/h1&gt;
 97 |                 &lt;input type="button" value="Open" onClick={() => this.openModal()} /&gt;
 98 |                 &lt;Modal 
 99 |                     visible={this.state.visible}
100 |                     width="400"
101 |                     height="300"
102 |                     effect="fadeInUp"
103 |                     onClickAway={() => this.closeModal()}
104 |                 &gt;
105 |                     &lt;div&gt;
106 |                         &lt;h1&gt;Title&lt;/h1&gt;
107 |                         &lt;p&gt;Some Contents&lt;/p&gt;
108 |                         &lt;a href="javascript:void(0);" onClick={() => this.closeModal()}&gt;Close&lt;/a&gt;
109 |                     &lt;/div&gt;
110 |                 &lt;/Modal&gt;
111 |             &lt;/section&gt;
112 |         );
113 |     }
114 | }
115 |                             </code>
116 |                         </pre>
117 |                     </div>  
118 |                     <p class="Content__step">Refer to the following for the attributes.</p>
119 |                     <table class="Content__table">
120 |                         <tr>
121 |                             <th>Attribute</th>
122 |                             <th>Required</th>
123 |                             <th>Type</th>
124 |                             <th>description</th>
125 |                             <th>example</th>
126 |                         </tr>
127 |                         <tr>
128 |                             <td>visible</td>
129 |                             <td>required</td>
130 |                             <td>Boolean</td>
131 |                             <td>to show or hide the dialog</td>
132 |                             <td>-</td>
133 |                         </tr>
134 |                         <tr>
135 |                             <td>effect</td>
136 |                             <td>option</td>
137 |                             <td>String</td>
138 |                             <td>to set how to pop-up</td>
139 |                             <td>fadeInUp, fadeInDown, etc...</td>
140 |                         </tr>
141 |                         <tr>
142 |                             <td>width</td>
143 |                             <td>option</td>
144 |                             <td>Number</td>
145 |                             <td>to set modal width (the default is 'px'. '%' can be also used.)</td>
146 |                             <td>500, 500px, 80%</td>
147 |                         </tr>
148 |                         <tr>
149 |                             <td>height</td>
150 |                             <td>option</td>
151 |                             <td>Number</td>
152 |                             <td>to set modal height (the default is 'px'. '%' can be also used.)</td>
153 |                             <td>400, 400px, 40%</td>
154 |                         </tr>
155 |                         <tr>
156 |                             <td>onClickAway</td>
157 |                             <td>option</td>
158 |                             <td>Function</td>
159 |                             <td>to set actions when the user click the mask</td>
160 |                             <td>-</td>
161 |                         </tr>
162 |                     </table>
163 |                 </div>  
164 |             </section>
165 |             <footer class="Footer">
166 |                 <div class="Area">
167 |                     <h2 class="Footer__title">react-awesome-modal</h2>
168 |                     <p class="Footer__license">react-awesome-modal is released under <a href="https://github.com/shibe97/react-awesome-modal/blob/master/LICENSE" target="license">MIT license</a>.</p>
169 |                     <p class="Footer__copyright">Copyright © 2016 Kazuki Shibata </p>
170 |                     <p><a href="https://github.com/shibe97" target="github">GitHub</a> / <a href="https://twitter.com/shibe97" target="twitter">Twitter</a></p>
171 |                 </div>
172 |             </footer>
173 |         </div>
174 |         <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script>
175 |         <script src="assets/js/bundle.js"></script>
176 |         <script>hljs.initHighlightingOnLoad();</script>
177 |         <script>
178 |             (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
179 |             (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
180 |             m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
181 |             })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
182 | 
183 |             ga('create', 'UA-18027176-5', 'auto');
184 |             ga('send', 'pageview');
185 |         </script>
186 |     </body>
187 | </html>
188 | 


--------------------------------------------------------------------------------