├── .eslintignore
├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE
├── README.md
├── config
    └── webpack.js
├── demo
    ├── index.html
    └── index.js
├── lib
    └── index.js
├── package.json
├── runfile.js
├── src
    ├── index.js
    ├── index.test.js
    └── styles.js
└── style.css


/.eslintignore:
--------------------------------------------------------------------------------
1 | lib


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Don't check auto-generated stuff into git
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .idea
2 | node_modules
3 | lib


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | 
 2 | language: node_js
 3 | node_js:
 4 | - '6.3'
 5 | install:
 6 | - npm install
 7 | - npm install -g runjs
 8 | script:
 9 | - run test
10 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 Paweł Gałązka
 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 all
13 | 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 THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React PopUps! :sheep:
 2 | A very simple react component that allows you to wrap your content in a modal window and control its visibility.
 3 | 
 4 | First you need to install and import the component
 5 | 
 6 | * `npm install https://github.com/Tim152/react-popups.git`
 7 | * `import Popup from 'react-popups';`
 8 | 
 9 | ### Component can be:
10 | * Controlled (manage by props)
11 | * Uncontrolled (manage by state)
12 | 
13 | ### Example Controlled:
14 | The controlling component does not have its own button, you need to create it and manage the `isVisible` prop
15 | ```javascript
16 | //JS
17 | changePopupState() {
18 |   this.setState({ popupIsVisible: !this.state.popupIsVisible });
19 | }
20 | 
21 | //JSX
22 | <Button onClick={this.changePopupState}>
23 | <Popup isVisible={this.state.popupIsVisible} handleClickOnBackdrop={this.changePopupState} isControlled>
24 |   <Content />
25 | </Popup>
26 | ```
27 | 
28 | ### Example Uncontrolled:
29 | The uncontrolled popup has its own button, you can transfer the styles and button sign to it
30 | ```javascript
31 | //JSX
32 | <Popup btnStyles={ width: '50px', height: '20px' } btnSign="I'm a button">
33 |   <Content />
34 | </Popup>
35 | ```
36 | requires [styled-components](https://github.com/styled-components/styled-components);
37 | 


--------------------------------------------------------------------------------
/config/webpack.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | 
 3 | function firenpmWeb (name) {
 4 |   return path.resolve('./node_modules/firenpm.web/' + name + '.js')
 5 | }
 6 | module.exports = {
 7 |   entry: './demo/index.js',
 8 |   output: {
 9 |     filename: 'bundle.js',
10 |     path: './demo',
11 |     publicPath: 'http://localhost:8080/'
12 |   },
13 |   devtool: 'inline-source-map',
14 |   devServer: {
15 |     contentBase: 'demo',
16 |     inline: true
17 |   },
18 |   module: {
19 |     loaders: [
20 |       { test: /\.js$/, loader: firenpmWeb('babel-loader') },
21 |       { test: /\.json$/, loader: firenpmWeb('json-loader') },
22 |       { test: /\.css$/, loaders: [firenpmWeb('style-loader'), firenpmWeb('css-loader')] },
23 |       { test: /\.(png|jpg)$/, loader: firenpmWeb('url-loader') },
24 |       { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015'] }}
25 |     ]
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Demo</title>
 6 |     <script src="bundle.js"></script>
 7 | </head>
 8 | <body>
 9 |     <div id="react-app"></div>
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/demo/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import Popup from '../src'
 4 | import '../style.css'
 5 | 
 6 | document.addEventListener('DOMContentLoaded', () => {
 7 |   ReactDOM.render(
 8 |     <Popup />, 
 9 |     document.querySelector('#react-app')
10 |   )
11 | })


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | exports.sayHello = sayHello;
 7 | function sayHello() {
 8 |   var p = document.createElement('p');
 9 |   p.textContent = 'Hello. Seems that everything is working!';
10 |   document.body.appendChild(p);
11 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-popups",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "src/index.js",
 6 |   "author": "Tim Bochkarev",
 7 |   "license": "MIT",
 8 |   "scripts": {
 9 |     "test": "run test"
10 |   },
11 |   "dependencies": {
12 |     "react": "^15.5.4",
13 |     "react-dom": "^15.5.4",
14 |     "styled-components": "^1.4.5",
15 |     "babel-preset-es2015": "^6.1.18"
16 |   },
17 |   "devDependencies": {
18 |     "firenpm": "1.2.0",
19 |     "firenpm.web": "1.2.0",
20 |     "babel-preset-es2015": "^6.1.18"
21 |   },
22 |   "babel": {
23 |     "presets": [
24 |       "firenpm/babel-preset-es2015",
25 |       "firenpm/babel-preset-react",
26 |       "firenpm/babel-preset-stage-2"
27 |     ]
28 |   },
29 |   "runjs": {
30 |     "babel-register": "./node_modules/firenpm/babel-register"
31 |   },
32 |   "eslintConfig": {
33 |     "extends": [
34 |       "./node_modules/firenpm/eslint-config-standard.js",
35 |       "./node_modules/firenpm/eslint-config-standard-react.js"
36 |     ],
37 |     "parser": "./node_modules/firenpm/babel-eslint"
38 |   },
39 |   "repository": {
40 |     "type": "git",
41 |     "url": "git+ssh://git@github.com/Tim152/react-popups.git"
42 |   },
43 |   "bugs": {
44 |     "url": "https://github.com/Tim152/react-popups/issues"
45 |   },
46 |   "homepage": "https://github.com/Tim152/react-popups#readme"
47 | }
48 | 


--------------------------------------------------------------------------------
/runfile.js:
--------------------------------------------------------------------------------
 1 | import { run } from 'firenpm/runjs'
 2 | 
 3 | const task = {
 4 |   'clean': () => {
 5 |     run('rm -rf node_modules')
 6 |     run('rm -rf lib')
 7 |   },
 8 |   'build:clean': () => {
 9 |     run('rm -rf lib')
10 |     run('mkdir lib')
11 |   },
12 |   'build': () => {
13 |     task['build:clean']()
14 |     run('babel src --out-dir lib --ignore test.js')
15 |   },
16 |   'lint': (path = '.') => {
17 |     run(`eslint ${path}`)
18 |   },
19 |   'lint:fix': (path = '.') => {
20 |     run(`eslint ${path} --fix`)
21 |   },
22 |   'test': () => {
23 |     task['lint']()
24 |     task['build']()
25 |     run('mocha src/*.test.js --require firenpm/mochaccino/dom-setup --compilers js:firenpm/babel-register')
26 |   },
27 |   'publish': () => {
28 |     task['test']()
29 |     run('npm publish')
30 |   },
31 |   'web': () => {
32 |     run('webpack-dev-server --config config/webpack.js --progress --open')
33 |   }
34 | }
35 | 
36 | export default task
37 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  *
 3 |  * Popup
 4 |  *
 5 |  */
 6 | 
 7 | import React, { Children } from 'react';
 8 | 
 9 | import {
10 |   StyledPopup,
11 |   PopupContent,
12 |   PopupBackDrop,
13 |   PopupBtn,
14 | } from './styles';
15 | 
16 | export class Popup extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
17 |   constructor(props) {
18 |     super(props);
19 | 
20 |     this.state = {
21 |       visible: false,
22 |     };
23 | 
24 |     this.changeVisible = this.changeVisible.bind(this);
25 |     this.hide = this.hide.bind(this);
26 |   }
27 | 
28 |   changeVisible() {
29 |     this.setState({ visible: !this.state.visible });
30 |   }
31 | 
32 |   hide() {
33 |     this.setState({ visible: false });
34 |   }
35 | 
36 |   render() {
37 |     let content;
38 |     if (this.props.isControlled) {
39 |       content = this.props.isVisible && (
40 |         <div>
41 |           <PopupBackDrop onClick={this.props.handleClickOnBackdrop} />
42 |           <PopupContent onClick={(event) => event.stopPropagation()}>
43 |             {Children.toArray(this.props.children)}
44 |           </PopupContent>
45 |         </div>
46 |       );
47 |     } else {
48 |       content = (
49 |         <div>
50 |           <PopupBtn onClick={this.changeVisible} style={this.props.btnStyles}>{this.props.btnSign}</PopupBtn>
51 |           {this.state.visible &&
52 |             <div>
53 |               <PopupBackDrop onClick={this.hide} />
54 |               <PopupContent>
55 |                 {Children.toArray(this.props.children)}
56 |               </PopupContent>
57 |             </div>
58 |           }
59 |         </div>
60 |       );
61 |     }
62 |     return (
63 |       <StyledPopup>
64 |         {content}
65 |       </StyledPopup>
66 |     );
67 |   }
68 | }
69 | 
70 | Popup.propTypes = {
71 |   isControlled: React.PropTypes.bool,
72 |   isVisible: React.PropTypes.bool,
73 |   btnSign: React.PropTypes.string,
74 |   btnStyles: React.PropTypes.object,
75 |   handleClickOnBackdrop: React.PropTypes.func,
76 |   children: React.PropTypes.object,
77 | };
78 | 
79 | Popup.defaultProps = {
80 |   isControlled: false,
81 |   isVisible: false,
82 |   btnSign: 'Popup button',
83 |   btnStyles: {},
84 |   handleClickOnBackdrop: () => {},
85 | };
86 | 
87 | export default Popup;
88 | 


--------------------------------------------------------------------------------
/src/index.test.js:
--------------------------------------------------------------------------------
 1 | /* eslint-env mocha */
 2 | import { expect, dom } from 'firenpm/mochaccino'
 3 | import { sayHello } from '../lib/index'
 4 | 
 5 | describe('sayHello', () => {
 6 |   beforeEach(() => {
 7 |     dom.create()
 8 |     sayHello()
 9 |   })
10 | 
11 |   afterEach(() => {
12 |     dom.destroy()
13 |   })
14 | 
15 |   it('it adds <p> element to <body> in the document', () => {
16 |     expect(document.querySelectorAll('p').length).toEqual(1)
17 |   })
18 | })
19 | 


--------------------------------------------------------------------------------
/src/styles.js:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components';
 2 | 
 3 | const StyledPopup = styled.div`
 4 |   position: absolute;
 5 |   left: 0;
 6 |   top: 0;
 7 | `;
 8 | 
 9 | const PopupContent = styled.div`
10 |   position: relative;
11 |   z-index: 9999;
12 | `;
13 | 
14 | const PopupBackDrop = styled.div`
15 |   position: fixed;
16 |   top: 0;
17 |   bottom: 0;
18 |   left: 0;
19 |   right: 0;
20 |   z-index: 9998;
21 |   cursor: arrow;
22 | `;
23 | 
24 | const PopupBtn = styled.button`
25 |   box-sizing: border-box;
26 | `;
27 | 
28 | export {
29 |   StyledPopup,
30 |   PopupContent,
31 |   PopupBackDrop,
32 |   PopupBtn,
33 | };
34 | 
35 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body {
2 |     font-family: Arial;
3 |     text-align: center;
4 | }
5 | 


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