86 |
87 |
94 |
105 |
106 | );
107 | }
108 |
109 | ReactDOM.render((subtitle = _subtitle)}>Hello
95 | 96 |I am a modal
97 |
104 | Alert
80 |
81 |
83 | Description goes here.
82 |{contentElement}
171 | /* Custom Overlay element. */}
172 |
173 | contentElement={
174 | (props, children) => {children}
175 | /* Custom Content element. */}
176 | >
177 | Modal Content
178 |Modal Content.
192 |Modal Content.
209 |Add modal content here
56 |Add modal content here
71 |
26 | {examples.map((example, key) => {
27 | const ExampleApp = example.app;
28 | return (
29 |
36 | );
37 | }
38 | }
39 |
40 | ReactDOM.render(
30 |
33 | );
34 | })}
35 | {`#${key + 1}. ${example.label}`}
31 |
27 |
28 |
39 |
69 |
70 | );
71 | }
72 | }
73 |
74 | export default {
75 | label: "Modal with forms fields.",
76 | app: Forms
77 | };
78 |
--------------------------------------------------------------------------------
/examples/basic/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Forms!
40 |
41 |
68 | This is a description of what it does: nothing :)
42 | 67 |react-modal
13 |an accessible React modal dialog component
14 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/examples/basic/multiple_modals/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Modal from 'react-modal';
3 |
4 | class List extends React.Component {
5 | render() {
6 | return (
7 |
8 | {this.props.items.map((x, i) => (
9 |
13 | );
14 | }
15 | }
16 |
17 | class MultipleModals extends Component {
18 | constructor(props) {
19 | super(props);
20 | this.state = {
21 | listItemsIsOpen: false,
22 | currentItem: -1,
23 | loading: false,
24 | items: []
25 | };
26 | }
27 |
28 | toggleModal = event => {
29 | event.preventDefault();
30 | if (this.state.listItemsIsOpen) {
31 | this.handleModalCloseRequest();
32 | return;
33 | }
34 | this.setState({
35 | items: [],
36 | listItemsIsOpen: true,
37 | loading: true
38 | });
39 | }
40 |
41 | handleModalCloseRequest = () => {
42 | // opportunity to validate something and keep the modal open even if it
43 | // requested to be closed
44 | this.setState({
45 | listItemsIsOpen: false,
46 | loading: false
47 | });
48 | }
49 |
50 | handleOnAfterOpenModal = () => {
51 | // when ready, we can access the available refs.
52 | (new Promise((resolve, reject) => {
53 | setTimeout(() => resolve(true), 500);
54 | })).then(res => {
55 | this.setState({
56 | items: [1, 2, 3, 4, 5].map(x => `Item ${x}`),
57 | loading: false
58 | });
59 | });
60 | }
61 |
62 | onItemClick = index => event => {
63 | this.setState({ currentItem: index });
64 | }
65 |
66 | cleanCurrentItem = () => {
67 | this.setState({ currentItem: -1 });
68 | }
69 |
70 | render() {
71 | const { listItemsIsOpen } = this.state;
72 | return (
73 |
10 | {x}
11 |
))}
12 |
74 |
75 |
82 |
89 | -1}
94 | onRequestClose={this.cleanCurrentItem}
95 | aria={{
96 | labelledby: "item_title",
97 | describedby: "item_info"
98 | }}>
99 |
106 |
107 | );
108 | }
109 | }
110 |
111 | export default {
112 | label: "Working with many modal.",
113 | app: MultipleModals
114 | };
115 |
--------------------------------------------------------------------------------
/examples/basic/nested_modals/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Modal from 'react-modal';
3 |
4 | class Item extends Component {
5 | constructor(props) {
6 | super(props);
7 | this.state = {
8 | isOpen: false
9 | };
10 | }
11 |
12 | toggleModal = index => event => {
13 | console.log("NESTED MODAL ITEM", event);
14 | this.setState({
15 | itemNumber: !this.state.isOpen ? index : null,
16 | isOpen: !this.state.isOpen
17 | });
18 | };
19 |
20 | render() {
21 | const { isOpen, itemNumber } = this.state;
22 | const { number, index } = this.props;
23 |
24 | const toggleModal = this.toggleModal(index);
25 |
26 | return (
27 | List of items
83 | {this.state.loading ? ( 84 |Loading...
85 | ) : ( 86 |Item: {this.state.items[this.state.currentItem]}
100 |
101 |
105 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pulvinar varius auctor. Aliquam maximus et justo ut faucibus. Nullam sit amet urna molestie turpis bibendum accumsan a id sem. Proin ullamcorper nisl sapien, gravida dictum nibh congue vel. Vivamus convallis dolor vitae ipsum ultricies, vitae pulvinar justo tincidunt. Maecenas a nunc elit. Phasellus fermentum, tellus ut consectetur scelerisque, eros nunc lacinia eros, aliquet efficitur tellus arcu a nibh. Praesent quis consequat nulla. Etiam dapibus ac sem vel efficitur. Nunc faucibus efficitur leo vitae vulputate. Nunc at quam vitae felis pretium vehicula vel eu quam. Quisque sapien mauris, condimentum eget dictum ut, congue id dolor. Donec vitae varius orci, eu faucibus turpis. Morbi eleifend orci non urna bibendum, ac scelerisque augue efficitur.
102 | 103 |Maecenas justo justo, laoreet vitae odio quis, lacinia porttitor arcu. Nunc nisl est, ultricies sed laoreet eu, semper in nisi. Phasellus lacinia porta purus, eu luctus neque. Nullam quis mi malesuada, vestibulum sem id, rhoncus purus. Aliquam erat volutpat. Duis nec turpis mi. Pellentesque eleifend nisl sed risus aliquet, eu feugiat elit auctor. Suspendisse ac neque vitae ligula consequat aliquam. Vivamus sit amet eros et ante mollis porta.
104 |
28 | {number}
29 |
37 |
42 |
43 | );
44 | }
45 | }
46 |
47 | class List extends Component {
48 | render() {
49 | return this.props.items.map((n, index) => (
50 | Item: {itemNumber + 1}
38 |
39 |
41 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pulvinar varius auctor. Aliquam maximus et justo ut faucibus. Nullam sit amet urna molestie turpis bibendum accumsan a id sem. Proin ullamcorper nisl sapien, gravida dictum nibh congue vel. Vivamus convallis dolor vitae ipsum ultricies, vitae pulvinar justo tincidunt. Maecenas a nunc elit. Phasellus fermentum, tellus ut consectetur scelerisque, eros nunc lacinia eros, aliquet efficitur tellus arcu a nibh. Praesent quis consequat nulla. Etiam dapibus ac sem vel efficitur. Nunc faucibus efficitur leo vitae vulputate. Nunc at quam vitae felis pretium vehicula vel eu quam. Quisque sapien mauris, condimentum eget dictum ut, congue id dolor. Donec vitae varius orci, eu faucibus turpis. Morbi eleifend orci non urna bibendum, ac scelerisque augue efficitur.
40 |
94 |
95 |
102 |
109 |
110 | );
111 | }
112 | }
113 |
114 | export default {
115 | label: "Working with nested modals.",
116 | app: NestedModals
117 | };
118 |
--------------------------------------------------------------------------------
/examples/basic/react-router/index.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React, { Component } from 'react';
3 | import createHistory from 'history/createBrowserHistory';
4 | import { Router, Route, Switch } from 'react-router';
5 | import { Link } from 'react-router-dom';
6 | import Modal from 'react-modal';
7 |
8 | const history = createHistory();
9 |
10 | const Content = label => () => List of items
103 | {this.state.loading ? ( 104 |Loading...
105 | ) : ( 106 |{`Content ${label}`}
; 11 | 12 | const shouldOpenModal = locationPath => /\bmodal\b/.test(locationPath); 13 | 14 | const ReactRouterModal = props => ( 15 |
19 | Link A
20 | Link B 21 |
28 | 20 | Link B 21 |
22 |
23 |
26 |
27 |
36 | Modal
37 |
39 |
60 |
61 |
62 |
82 |
88 |
89 | );
90 | }
91 | }
92 |
93 | export default {
94 | label: "Working with one modal at a time.",
95 | app: SimpleUsage
96 | };
97 |
--------------------------------------------------------------------------------
/examples/basic/simple_usage/modal.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Modal from 'react-modal';
3 |
4 | export default props => {
5 | const {
6 | title, isOpen, askToClose,
7 | onAfterOpen, onRequestClose, onChangeInput
8 | } = props;
9 |
10 | return (
11 | this.heading = h1}>This is the modal 2!
83 |
84 |
87 | This is a description of what it does: nothing :)
85 | 86 |{title}
19 | 20 |I am a modal. Use the first input to change the modal's title.
21 |
30 |
36 |
37 |
43 |
63 |
64 | );
65 | }
66 | }
67 |
68 | ReactDOM.render(
44 |
62 |
45 |
51 | Modal title
46 | 50 |
52 |
57 | Really long content...
53 |Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
54 |Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
55 |Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
56 |
58 |
59 |
60 |
61 | react-modal
13 |an accessible React modal dialog component
14 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | react-modal
12 |an accessible React modal dialog component
13 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/examples/wc/app.css:
--------------------------------------------------------------------------------
1 | .ReactModal__Overlay {
2 | -webkit-perspective: 600;
3 | perspective: 600;
4 | opacity: 0;
5 | overflow-x: hidden;
6 | overflow-y: auto;
7 | background-color: rgba(0, 0, 0, 0.5);
8 | }
9 |
10 | .ReactModal__Overlay--after-open {
11 | opacity: 1;
12 | transition: opacity 150ms ease-out;
13 | }
14 |
15 | .ReactModal__Content {
16 | -webkit-transform: scale(0.5) rotateX(-30deg);
17 | transform: scale(0.5) rotateX(-30deg);
18 | }
19 |
20 | .ReactModal__Content--after-open {
21 | -webkit-transform: scale(1) rotateX(0deg);
22 | transform: scale(1) rotateX(0deg);
23 | transition: all 150ms ease-in;
24 | }
25 |
26 | .ReactModal__Overlay--before-close {
27 | opacity: 0;
28 | }
29 |
30 | .ReactModal__Content--before-close {
31 | -webkit-transform: scale(0.5) rotateX(30deg);
32 | transform: scale(0.5) rotateX(30deg);
33 | transition: all 150ms ease-in;
34 | }
35 |
36 | .ReactModal__Content.modal-dialog {
37 | border: none;
38 | background-color: transparent;
39 | }
40 |
--------------------------------------------------------------------------------
/examples/wc/app.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import ReactDOM from 'react-dom';
3 | import Modal from 'react-modal';
4 |
5 | import '@webcomponents/custom-elements/src/native-shim';
6 |
7 | var appElement = document.getElementById('example');
8 |
9 | Modal.setAppElement(appElement);
10 |
11 | class App extends Component {
12 | constructor(props) {
13 | super(props);
14 | this.state = { modalIsOpen: false };
15 | }
16 |
17 | openModal = () => {
18 | this.setState({modalIsOpen: true});
19 | }
20 |
21 | closeModal = () => {
22 | this.setState({modalIsOpen: false});
23 | }
24 |
25 | handleModalCloseRequest = () => {
26 | // opportunity to validate something and keep the modal open even if it
27 | // requested to be closed
28 | this.setState({modalIsOpen: false});
29 | }
30 |
31 | handleSaveClicked = (e) => {
32 | alert('Save button was clicked');
33 | }
34 |
35 | render() {
36 | return (
37 |
38 |
39 |
45 |
68 |
69 | );
70 | }
71 | }
72 |
73 | ReactDOM.render(
46 |
67 |
47 |
56 | Modal title
48 |
49 |
55 |
57 |
62 | Really long content...
58 |Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
59 |Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
60 |Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
61 |
63 |
64 |
65 |
66 | react-modal
13 |an accessible React modal dialog component
14 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | let browsers = ['ChromeHeadless'];
2 | let coverageType = 'text';
3 |
4 | if (process.env.CONTINUOUS_INTEGRATION) {
5 | browsers = ['Firefox'];
6 | coverageType = 'lcovonly';
7 | }
8 |
9 | module.exports = function(config) {
10 | config.set({
11 | frameworks: ['mocha'],
12 |
13 | preprocessors: {
14 | './src/*.js': ['coverage'],
15 | './src/**/*.js': ['coverage'],
16 | './specs/index.js': ['webpack', 'sourcemap']
17 | },
18 |
19 | files: ['./specs/index.js'],
20 |
21 | webpack: require('./scripts/webpack.test.config'),
22 |
23 | webpackMiddleware: { stats: 'errors-only' },
24 |
25 | reporters: ['mocha', 'coverage'],
26 |
27 | mochaReporter: { showDiff: true },
28 |
29 | coverageReporter: {
30 | type : coverageType,
31 | dir : 'coverage/',
32 | subdir: '.'
33 | },
34 |
35 | port: 9876,
36 |
37 | colors: true,
38 |
39 | logLevel: config.LOG_INFO,
40 |
41 | autoWatch: true,
42 |
43 | browsers,
44 |
45 | // Increase timeouts to prevent the issue with disconnected tests (https://goo.gl/nstA69)
46 | captureTimeout: 4 * 60 * 1000,
47 |
48 | singleRun: (process.env.CONTINUOUS_INTEGRATION)
49 | });
50 | };
51 |
--------------------------------------------------------------------------------
/mkdocs.yml:
--------------------------------------------------------------------------------
1 | site_name: react-modal documentation
2 | site_dir: _book
3 | nav:
4 | - Overview: index.md
5 | - Accessibility: accessibility/index.md
6 | - Styles:
7 | - Inline Styles: styles/index.md
8 | - Classes: styles/classes.md
9 | - Transitions: styles/transitions.md
10 | - Examples:
11 | - Run local: examples/index.md
12 | - Minimal: examples/minimal.md
13 | - setAppElement: examples/set_app_element.md
14 | - shouldCloseOnOverlayClick: examples/should_close_on_overlay_click.md
15 | - onRequestClose: examples/on_request_close.md
16 | - Global Overrides: examples/global_overrides.md
17 | - Inline Styles: examples/inline_styles.md
18 | - Css Classes: examples/css_classes.md
19 | - Testing: testing/index.md
20 | - Contributing:
21 | - Overview: contributing/index.md
22 | - Development setup: contributing/development.md
23 | theme:
24 | name: 'material'
25 | markdown_extensions:
26 | - codehilite
27 | extra_css: [pygments.css]
28 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-modal",
3 | "version": "3.16.3",
4 | "description": "Accessible modal dialog component for React.JS",
5 | "main": "./lib/index.js",
6 | "module": "./lib/index.js",
7 | "repository": {
8 | "type": "git",
9 | "url": "https://github.com/reactjs/react-modal.git"
10 | },
11 | "homepage": "https://github.com/reactjs/react-modal",
12 | "bugs": "https://github.com/reactjs/react-modal/issues",
13 | "directories": {
14 | "example": "examples"
15 | },
16 | "scripts": {
17 | "start": "npx webpack-dev-server --config ./scripts/webpack.config.js --inline --host 127.0.0.1 --content-base examples/",
18 | "test": "cross-env NODE_ENV=test karma start",
19 | "lint": "eslint src/"
20 | },
21 | "authors": [
22 | "Ryan Florence"
23 | ],
24 | "license": "MIT",
25 | "devDependencies": {
26 | "@webcomponents/custom-elements": "^1.5.0",
27 | "babel-cli": "^6.26.0",
28 | "babel-core": "^6.25.0",
29 | "babel-eslint": "^8.0.1",
30 | "babel-loader": "^7.1.2",
31 | "babel-plugin-add-module-exports": "^0.2.1",
32 | "babel-preset-env": "^1.6.0",
33 | "babel-preset-react": "^6.24.1",
34 | "babel-preset-stage-2": "^6.24.1",
35 | "coveralls": "^3.1.0",
36 | "cross-env": "^5.2.1",
37 | "eslint": "^4.8.0",
38 | "eslint-config-prettier": "^2.6.0",
39 | "eslint-import-resolver-webpack": "^0.9.0",
40 | "eslint-plugin-import": "^2.23.2",
41 | "eslint-plugin-jsx-a11y": "^6.4.1",
42 | "eslint-plugin-prettier": "^2.3.1",
43 | "eslint-plugin-react": "^7.23.2",
44 | "istanbul-instrumenter-loader": "^3.0.0",
45 | "karma": "^6.3.6",
46 | "karma-chrome-launcher": "2.2.0",
47 | "karma-coverage": "^2.0.3",
48 | "karma-firefox-launcher": "1.0.1",
49 | "karma-mocha": "^2.0.1",
50 | "karma-mocha-reporter": "^2.2.1",
51 | "karma-sourcemap-loader": "^0.3.8",
52 | "karma-webpack": "^2.0.4",
53 | "mocha": "^8.4.0",
54 | "npm-run-all": "^4.1.1",
55 | "prettier": "^1.19.1",
56 | "react": "^17.0.2",
57 | "react-dom": "^17.0.2",
58 | "react-router": "^4.2.0",
59 | "react-router-dom": "^4.2.2",
60 | "should": "^13.1.0",
61 | "sinon": "next",
62 | "uglify-js": "3.1.1",
63 | "webpack": "^4.46.0",
64 | "webpack-cli": "^3.3.12",
65 | "webpack-dev-server": "^3.11.2"
66 | },
67 | "dependencies": {
68 | "exenv": "^1.2.0",
69 | "prop-types": "^15.7.2",
70 | "react-lifecycles-compat": "^3.0.0",
71 | "warning": "^4.0.3"
72 | },
73 | "peerDependencies": {
74 | "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 || ^19",
75 | "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 || ^19"
76 | },
77 | "tags": [
78 | "react",
79 | "modal",
80 | "dialog"
81 | ],
82 | "keywords": [
83 | "react",
84 | "react-component",
85 | "modal",
86 | "dialog"
87 | ]
88 | }
89 |
--------------------------------------------------------------------------------
/scripts/changelog.py:
--------------------------------------------------------------------------------
1 | # Requires python3 to work since, python 3< does not implement %z.
2 |
3 | import sys
4 |
5 | sys.path += ["/Users/diasbruno/.local/lib/python3.7/site-packages"]
6 |
7 | from datetime import datetime
8 | from subprocess import Popen, PIPE
9 | import semver
10 | import functools
11 |
12 |
13 | # 1: version, 2: date, 3: dashes, 4: entries
14 | LOG_ENTRY = """{}
15 | {}
16 |
17 | {}
18 | """
19 |
20 |
21 | head_version = "HEAD"
22 |
23 |
24 | def git_exec(args):
25 | p = Popen(" ".join(["git"] + args), shell=True, stdout=PIPE, stderr=PIPE)
26 | out, err = p.communicate()
27 | return out.decode('utf-8')
28 |
29 |
30 | def git_log(args):
31 | return git_exec(["log"] + args)
32 |
33 |
34 | def log_entry(entry):
35 | log = entry.split(' ')
36 | hash = log[0]
37 | log = ' '.join(log[1:])
38 |
39 | return "- [%s](../../commit/%s) %s" % (hash, hash, log)
40 |
41 |
42 | def get_tags_date(tag):
43 | args = [tag, "-1", '--format="%ad"']
44 | date_time = git_log(args).split('\n')[0]
45 |
46 | if date_time != '':
47 | dt = datetime.strptime(date_time, '%a %b %d %H:%M:%S %Y %z')
48 | else:
49 | dt = datetime.now()
50 | dt = dt.strftime('%a, %d %b %Y %H:%M:%S')
51 | return dt
52 |
53 |
54 | def log_in_between_versions(t):
55 | (a, b, logs) = t
56 |
57 | v = b and to_version(b) or head_version
58 | dt = get_tags_date(v)
59 |
60 | header = "{} - {} UTC".format(b or head_version, dt)
61 | dashes = ("-" * len(header))
62 |
63 | def write_log(acc, log):
64 | if log[8:8+7] == 'Release' or log[8:8+7] == 'release':
65 | return acc
66 | acc.append(log_entry(log))
67 | return acc
68 |
69 | actual_log = list(functools.reduce(write_log,
70 | logs.splitlines(),
71 | []))
72 |
73 | if len(actual_log) == 0:
74 | entries = '-\n\n'
75 | else:
76 | entries = "\n".join(actual_log)
77 |
78 | return LOG_ENTRY.format(header, dashes, entries)
79 |
80 |
81 | def adjacents(ls, f, res):
82 | if len(ls) == 0:
83 | return res
84 |
85 | first = ls[0]
86 | if len(ls) == 1:
87 | next = None
88 | else:
89 | next = ls[1]
90 |
91 | res.append(f(first, next))
92 | return adjacents(ls[1:], f, res)
93 |
94 |
95 | def to_version(tag):
96 | if not tag:
97 | return "HEAD"
98 | if tag.prerelease:
99 | return str(tag)
100 | return "v{}".format(tag)
101 |
102 |
103 | def logs_between(base, b):
104 | to = to_version(b)
105 | between = "{}..{}".format(to_version(base), to)
106 | logs = git_log([between, "--format='%h %s'"])
107 | return (base, b, logs)
108 |
109 |
110 | def parse_version(version):
111 | if version == 'HEAD':
112 | return version
113 | if version[0] == 'v':
114 | version = version[1:]
115 | return semver.parse_version_info(version)
116 |
117 |
118 | def get_all_tags():
119 | lines = git_exec(["tag", "-l"])
120 | versions = map(parse_version, lines.splitlines())
121 | return sorted(versions)
122 |
123 |
124 | def generate_current():
125 | versions = get_all_tags()
126 | base = versions[-1]
127 | logs = logs_between(base, None)
128 | return [log_in_between_versions(logs)]
129 |
130 |
131 | def generate_all():
132 | versions = get_all_tags()
133 | log_versions = adjacents(versions, logs_between, [])
134 | vs = map(log_in_between_versions, log_versions)
135 | return list(vs)
136 |
137 |
138 | if __name__ == "__main__":
139 | argc = len(sys.argv)
140 |
141 | if sys.argv[1] == '-a': # all
142 | head_version = sys.argv[2] if argc > 2 else "HEAD"
143 | log = generate_all()
144 | log.reverse()
145 |
146 | elif sys.argv[1] == '-c': # current
147 | head_version = sys.argv[2]
148 | log = generate_current()
149 |
150 | print("\n".join(log))
151 |
--------------------------------------------------------------------------------
/scripts/defaultConfig.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | module.exports = {
4 | mode: 'development',
5 | output: {
6 | filename: '[name].js',
7 | path: path.resolve(__dirname, './examples/__build__'),
8 | publicPath: '/__build__/'
9 | },
10 | module: {
11 | rules: [
12 | { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } }
13 | ]
14 | },
15 | resolve: {
16 | alias: {
17 | "react-modal": path.resolve(__dirname, "../src")
18 | }
19 | }
20 | };
21 |
--------------------------------------------------------------------------------
/scripts/repo_status:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | if [ ! -z "`git status -s`" ]; then
4 | echo "Working tree is not clean"
5 | git status -s
6 | read -p "Proceed? [Y/n] " OK
7 | if [[ "$OK" -eq "n" || "$OK" -eq "N" || -z "$OK" ]]; then
8 | echo "Stopping publish"
9 | exit 1
10 | fi
11 | fi
12 |
--------------------------------------------------------------------------------
/scripts/version:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 |
3 | JQ=$(which jq)
4 |
5 | if [[ -z "$JQ" ]]; then
6 | echo "jq is missing."
7 | fi
8 |
9 | echo "Current version is: $1"
10 |
11 | read -p "Bump to: " NEW_VERSION
12 |
13 | if [[ ! -z "$(git tag -l | grep v${NEW_VERSION})" ]]; then
14 | echo "Tag $NEW_VERSION already exists."
15 | exit 1
16 | fi
17 |
18 | FILES="package.json bower.json"
19 |
20 | for F in $FILES; do
21 | $JQ ".version = \"${NEW_VERSION}\"" "$F" > up.json
22 | cat up.json > "$F"
23 | done
24 |
25 | rm up.json
26 |
--------------------------------------------------------------------------------
/scripts/webpack.config.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 | const webpack = require('webpack');
4 | const defaultConfig = require('./defaultConfig');
5 |
6 | var EXAMPLES_DIR = path.resolve(__dirname, '../examples');
7 |
8 | function isDirectory(dir) {
9 | return fs.lstatSync(dir).isDirectory();
10 | }
11 |
12 | function buildEntries() {
13 | return fs.readdirSync(EXAMPLES_DIR).reduce(function (entries, dir) {
14 | if (dir === 'build')
15 | return entries;
16 |
17 | var isDraft = dir.charAt(0) === '_';
18 |
19 | if (!isDraft && isDirectory(path.join(EXAMPLES_DIR, dir)))
20 | entries[dir] = path.join(EXAMPLES_DIR, dir, 'app.js');
21 |
22 | return entries;
23 | }, {});
24 | }
25 |
26 | module.exports = {
27 | ...defaultConfig,
28 | entry: buildEntries(),
29 | };
30 |
--------------------------------------------------------------------------------
/scripts/webpack.dist.config.js:
--------------------------------------------------------------------------------
1 | const webpack = require('webpack');
2 | const path = require('path');
3 | const defaultConfig = require('./defaultConfig');
4 |
5 | const reactExternal = {
6 | root: 'React',
7 | commonjs2: 'react',
8 | commonjs: 'react',
9 | amd: 'react'
10 | };
11 | const reactDOMExternal = {
12 | root: 'ReactDOM',
13 | commonjs2: 'react-dom',
14 | commonjs: 'react-dom',
15 | amd: 'react-dom'
16 | };
17 |
18 | module.exports = {
19 | ...defaultConfig,
20 | mode: 'production',
21 | entry: {
22 | 'react-modal': path.resolve(__dirname, '../src/index.js'),
23 | 'react-modal.min': path.resolve(__dirname, '../src/index.js')
24 | },
25 | externals: {
26 | 'react': reactExternal,
27 | 'react-dom': reactDOMExternal
28 | },
29 | output: {
30 | filename: '[name].js',
31 | chunkFilename: '[id].chunk.js',
32 | path: path.resolve(__dirname, '../dist'),
33 | publicPath: '/',
34 | libraryTarget: 'umd',
35 | library: 'ReactModal'
36 | },
37 | optimization: {
38 | minimize: true
39 | },
40 | plugins: [
41 | new webpack.DefinePlugin({
42 | 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
43 | })
44 | ]
45 | };
46 |
--------------------------------------------------------------------------------
/scripts/webpack.test.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const defaultConfig = require('./defaultConfig');
3 |
4 | module.exports = {
5 | ...defaultConfig,
6 | plugins: [],
7 | entry: path.resolve(__dirname, '../specs/index.js'),
8 | devtool: 'inline-source-map',
9 | module: {
10 | ...defaultConfig.module,
11 | rules: [
12 | {
13 | test: /\.js$/,
14 | use: { loader: 'istanbul-instrumenter-loader' },
15 | enforce: 'post',
16 | include: path.resolve(__dirname, '../src')
17 | },
18 | ...defaultConfig.module.rules
19 | ]
20 | }
21 | };
22 |
--------------------------------------------------------------------------------
/specs/Modal.events.spec.js:
--------------------------------------------------------------------------------
1 | /* eslint-env mocha */
2 | import React from "react";
3 | import ReactDOM from "react-dom";
4 | import "should";
5 | import sinon from "sinon";
6 | import Modal from "react-modal";
7 | import {
8 | moverlay,
9 | mcontent,
10 | clickAt,
11 | mouseDownAt,
12 | mouseUpAt,
13 | escKeyDown,
14 | escKeyDownWithCode,
15 | tabKeyDown,
16 | tabKeyDownWithCode,
17 | withModal,
18 | withElementCollector,
19 | createHTMLElement
20 | } from "./helper";
21 |
22 | export default () => {
23 | it("should trigger the onAfterOpen callback", () => {
24 | const afterOpenCallback = sinon.spy();
25 | withElementCollector(() => {
26 | const props = { isOpen: true, onAfterOpen: afterOpenCallback };
27 | const node = createHTMLElement("div");
28 | ReactDOM.render(
102 | {topButton}
103 | {bottomButton}
104 |
105 | );
106 | const props = { isOpen: true };
107 | withModal(props, modalContent, modal => {
108 | const content = mcontent(modal);
109 | tabKeyDown(content, { shiftKey: true });
110 | document.activeElement.textContent.should.be.eql("bottom");
111 | });
112 | });
113 |
114 | it("traps tab in the modal on shift + tab with KeyboardEvent.code", () => {
115 | const topButton = ;
116 | const bottomButton = ;
117 | const modalContent = (
118 |
119 | {topButton}
120 | {bottomButton}
121 |
122 | );
123 | const props = { isOpen: true };
124 | withModal(props, modalContent, modal => {
125 | const content = mcontent(modal);
126 | tabKeyDownWithCode(content, { shiftKey: true });
127 | document.activeElement.textContent.should.be.eql("bottom");
128 | });
129 | });
130 |
131 | describe("shouldCloseOnEsc", () => {
132 | context("when true", () => {
133 | it("should close on Esc key event", () => {
134 | const requestCloseCallback = sinon.spy();
135 | withModal(
136 | {
137 | isOpen: true,
138 | shouldCloseOnEsc: true,
139 | onRequestClose: requestCloseCallback
140 | },
141 | null,
142 | modal => {
143 | escKeyDown(mcontent(modal));
144 | requestCloseCallback.called.should.be.ok();
145 | // Check if event is passed to onRequestClose callback.
146 | const event = requestCloseCallback.getCall(0).args[0];
147 | event.should.be.ok();
148 | }
149 | );
150 | });
151 |
152 | it("should close on Esc key event with KeyboardEvent.code", () => {
153 | const requestCloseCallback = sinon.spy();
154 | withModal(
155 | {
156 | isOpen: true,
157 | shouldCloseOnEsc: true,
158 | onRequestClose: requestCloseCallback
159 | },
160 | null,
161 | modal => {
162 | escKeyDownWithCode(mcontent(modal));
163 | requestCloseCallback.called.should.be.ok();
164 | // Check if event is passed to onRequestClose callback.
165 | const event = requestCloseCallback.getCall(0).args[0];
166 | event.should.be.ok();
167 | }
168 | );
169 | });
170 | });
171 |
172 | context("when false", () => {
173 | it("should not close on Esc key event", () => {
174 | const requestCloseCallback = sinon.spy();
175 | const props = {
176 | isOpen: true,
177 | shouldCloseOnEsc: false,
178 | onRequestClose: requestCloseCallback
179 | };
180 | withModal(props, null, modal => {
181 | escKeyDown(mcontent(modal));
182 | requestCloseCallback.called.should.be.false;
183 | });
184 | });
185 | });
186 | });
187 |
188 | describe("shouldCloseOnoverlayClick", () => {
189 | it("when false, click on overlay should not close", () => {
190 | const requestCloseCallback = sinon.spy();
191 | const props = {
192 | isOpen: true,
193 | shouldCloseOnOverlayClick: false
194 | };
195 | withModal(props, null, modal => {
196 | const overlay = moverlay(modal);
197 | clickAt(overlay);
198 | requestCloseCallback.called.should.not.be.ok();
199 | });
200 | });
201 |
202 | it("when true, click on overlay must close", () => {
203 | const requestCloseCallback = sinon.spy();
204 | const props = {
205 | isOpen: true,
206 | shouldCloseOnOverlayClick: true,
207 | onRequestClose: requestCloseCallback
208 | };
209 | withModal(props, null, modal => {
210 | clickAt(moverlay(modal));
211 | requestCloseCallback.called.should.be.ok();
212 | });
213 | });
214 |
215 | it("overlay mouse down and content mouse up, should not close", () => {
216 | const requestCloseCallback = sinon.spy();
217 | const props = {
218 | isOpen: true,
219 | shouldCloseOnOverlayClick: true,
220 | onRequestClose: requestCloseCallback
221 | };
222 | withModal(props, null, modal => {
223 | mouseDownAt(moverlay(modal));
224 | mouseUpAt(mcontent(modal));
225 | requestCloseCallback.called.should.not.be.ok();
226 | });
227 | });
228 |
229 | it("content mouse down and overlay mouse up, should not close", () => {
230 | const requestCloseCallback = sinon.spy();
231 | const props = {
232 | isOpen: true,
233 | shouldCloseOnOverlayClick: true,
234 | onRequestClose: requestCloseCallback
235 | };
236 | withModal(props, null, modal => {
237 | mouseDownAt(mcontent(modal));
238 | mouseUpAt(moverlay(modal));
239 | requestCloseCallback.called.should.not.be.ok();
240 | });
241 | });
242 | });
243 |
244 | it("should not stop event propagation", () => {
245 | let hasPropagated = false;
246 | const props = {
247 | isOpen: true,
248 | shouldCloseOnOverlayClick: true
249 | };
250 | withModal(props, null, modal => {
251 | const propagated = () => (hasPropagated = true);
252 | window.addEventListener("click", propagated);
253 | const event = new MouseEvent("click", { bubbles: true });
254 | moverlay(modal).dispatchEvent(event);
255 | hasPropagated.should.be.ok();
256 | window.removeEventListener("click", propagated);
257 | });
258 | });
259 |
260 | it("verify event passing on overlay click", () => {
261 | const requestCloseCallback = sinon.spy();
262 | const props = {
263 | isOpen: true,
264 | shouldCloseOnOverlayClick: true,
265 | onRequestClose: requestCloseCallback
266 | };
267 | withModal(props, null, modal => {
268 | // click the overlay
269 | clickAt(moverlay(modal), {
270 | // Used to test that this was the event received
271 | fakeData: "ABC"
272 | });
273 | requestCloseCallback.called.should.be.ok();
274 | // Check if event is passed to onRequestClose callback.
275 | const event = requestCloseCallback.getCall(0).args[0];
276 | event.should.be.ok();
277 | });
278 | });
279 |
280 | it("on nested modals, only the topmost should handle ESC key.", () => {
281 | const requestCloseCallback = sinon.spy();
282 | const innerRequestCloseCallback = sinon.spy();
283 | let innerModal = null;
284 | let innerModalRef = ref => {
285 | innerModal = ref;
286 | };
287 |
288 | withModal(
289 | {
290 | isOpen: true,
291 | onRequestClose: requestCloseCallback
292 | },
293 |
312 | {contentElement}
313 |
314 | );
315 |
316 | const props = { isOpen: true, overlayElement };
317 | withModal(props, null, modal => {
318 | const modalOverlay = moverlay(modal);
319 | modalOverlay.id.should.eql("custom");
320 | });
321 | });
322 |
323 | it("supports custom contentElement", () => {
324 | const contentElement = (props, children) => (
325 |
326 | {children}
327 |
328 | );
329 |
330 | const props = { isOpen: true, contentElement };
331 | withModal(props, "hello", modal => {
332 | const modalContent = mcontent(modal);
333 | modalContent.id.should.eql("custom");
334 | modalContent.textContent.should.be.eql("hello");
335 | });
336 | });
337 |
338 | it("supports overlayClassName", () => {
339 | const props = {
340 | isOpen: true,
341 | overlayClassName: "myOverlayClass"
342 | };
343 | withModal(props, null, modal => {
344 | moverlay(modal)
345 | .className.includes("myOverlayClass")
346 | .should.be.ok();
347 | });
348 | });
349 |
350 | it("overrides content classes with custom object className", () => {
351 | withElementCollector(() => {
352 | const props = {
353 | isOpen: true,
354 | className: {
355 | base: "myClass",
356 | afterOpen: "myClass_after-open",
357 | beforeClose: "myClass_before-close"
358 | }
359 | };
360 | const node = createHTMLElement("div");
361 | const modal = ReactDOM.render(