(subtitle = _subtitle)}>Hello
I am a modal
Alert
Description goes here.
{contentElement}
/* Custom Overlay element. */}
contentElement={
(props, children) => {children}
/* Custom Content element. */}
>
Modal Content
Modal Content.
Modal Content.
Add modal content here
Add modal content here
{examples.map((example, key) => {
const ExampleApp = example.app;
return (
);
}
}
ReactDOM.render({`#${key + 1}. ${example.label}`}
Forms!
This is a description of what it does: nothing :)
react-modal
an accessible React modal dialog component
================================================
FILE: examples/basic/multiple_modals/index.js
================================================
import React, { Component } from 'react';
import Modal from 'react-modal';
class List extends React.Component {
render() {
return (
{this.props.items.map((x, i) => (
))}
);
}
}
class MultipleModals extends Component {
constructor(props) {
super(props);
this.state = {
listItemsIsOpen: false,
currentItem: -1,
loading: false,
items: []
};
}
toggleModal = event => {
event.preventDefault();
if (this.state.listItemsIsOpen) {
this.handleModalCloseRequest();
return;
}
this.setState({
items: [],
listItemsIsOpen: true,
loading: true
});
}
handleModalCloseRequest = () => {
// opportunity to validate something and keep the modal open even if it
// requested to be closed
this.setState({
listItemsIsOpen: false,
loading: false
});
}
handleOnAfterOpenModal = () => {
// when ready, we can access the available refs.
(new Promise((resolve, reject) => {
setTimeout(() => resolve(true), 500);
})).then(res => {
this.setState({
items: [1, 2, 3, 4, 5].map(x => `Item ${x}`),
loading: false
});
});
}
onItemClick = index => event => {
this.setState({ currentItem: index });
}
cleanCurrentItem = () => {
this.setState({ currentItem: -1 });
}
render() {
const { listItemsIsOpen } = this.state;
return (
List of items
{this.state.loading ? (Loading...
) : (Item: {this.state.items[this.state.currentItem]}
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.
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.
{number}
);
}
}
class List extends Component {
render() {
return this.props.items.map((n, index) => (
Item: {itemNumber + 1}
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.
List of items
{this.state.loading ? (Loading...
) : ({`Content ${label}`}
; const shouldOpenModal = locationPath => /\bmodal\b/.test(locationPath); const ReactRouterModal = props => (
Link A
Link B
Link B
Modal
this.heading = h1}>This is the modal 2!
This is a description of what it does: nothing :)
{title}
I am a modal. Use the first input to change the modal's title.
Modal title
Really long content...
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
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
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
react-modal
an accessible React modal dialog component
================================================
FILE: examples/index.html
================================================
react-modal
an accessible React modal dialog component
================================================
FILE: examples/wc/app.css
================================================
.ReactModal__Overlay {
-webkit-perspective: 600;
perspective: 600;
opacity: 0;
overflow-x: hidden;
overflow-y: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.ReactModal__Overlay--after-open {
opacity: 1;
transition: opacity 150ms ease-out;
}
.ReactModal__Content {
-webkit-transform: scale(0.5) rotateX(-30deg);
transform: scale(0.5) rotateX(-30deg);
}
.ReactModal__Content--after-open {
-webkit-transform: scale(1) rotateX(0deg);
transform: scale(1) rotateX(0deg);
transition: all 150ms ease-in;
}
.ReactModal__Overlay--before-close {
opacity: 0;
}
.ReactModal__Content--before-close {
-webkit-transform: scale(0.5) rotateX(30deg);
transform: scale(0.5) rotateX(30deg);
transition: all 150ms ease-in;
}
.ReactModal__Content.modal-dialog {
border: none;
background-color: transparent;
}
================================================
FILE: examples/wc/app.js
================================================
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';
import '@webcomponents/custom-elements/src/native-shim';
var appElement = document.getElementById('example');
Modal.setAppElement(appElement);
class App extends Component {
constructor(props) {
super(props);
this.state = { modalIsOpen: false };
}
openModal = () => {
this.setState({modalIsOpen: true});
}
closeModal = () => {
this.setState({modalIsOpen: false});
}
handleModalCloseRequest = () => {
// opportunity to validate something and keep the modal open even if it
// requested to be closed
this.setState({modalIsOpen: false});
}
handleSaveClicked = (e) => {
alert('Save button was clicked');
}
render() {
return (
Modal title
Really long content...
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
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
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
react-modal
an accessible React modal dialog component
================================================
FILE: flake.nix
================================================
{
description = "react-modal flake";
inputs = {
nixpkgs.url = "github:nixos/nixpkgs?ref=nixos-25.05";
};
outputs = { self, nixpkgs, flake-utils }:
flake-utils.lib.eachDefaultSystem (system:
let
pkgs = import nixpkgs { inherit system; };
inputs = with pkgs; [pkg-config nodejs_22 openssl];
in {
devShell = pkgs.mkShell {
name = "react-modal";
buildInputs = inputs;
shellHook = ''
export EDITOR=emacs;
export NODE_OPTIONS=--openssl-legacy-provider;
export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:${pkgs.lib.makeLibraryPath[
pkgs.openssl
]};
'';
};
});
}
================================================
FILE: karma.conf.js
================================================
let browsers = ['ChromeHeadless'];
let coverageType = 'text';
if (process.env.CONTINUOUS_INTEGRATION) {
browsers = ['Firefox'];
coverageType = 'lcovonly';
}
module.exports = function(config) {
config.set({
frameworks: ['mocha'],
preprocessors: {
'./src/*.js': ['coverage'],
'./src/**/*.js': ['coverage'],
'./specs/index.js': ['webpack', 'sourcemap']
},
files: ['./specs/index.js'],
webpack: require('./scripts/webpack.test.config'),
webpackMiddleware: { stats: 'errors-only' },
reporters: ['mocha', 'coverage'],
mochaReporter: { showDiff: true },
coverageReporter: {
type : coverageType,
dir : 'coverage/',
subdir: '.'
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers,
// Increase timeouts to prevent the issue with disconnected tests (https://goo.gl/nstA69)
captureTimeout: 4 * 60 * 1000,
singleRun: (process.env.CONTINUOUS_INTEGRATION)
});
};
================================================
FILE: mkdocs.yml
================================================
site_name: react-modal documentation
site_dir: _book
nav:
- Overview: index.md
- Accessibility: accessibility/index.md
- Styles:
- Inline Styles: styles/index.md
- Classes: styles/classes.md
- Transitions: styles/transitions.md
- Examples:
- Run local: examples/index.md
- Minimal: examples/minimal.md
- setAppElement: examples/set_app_element.md
- shouldCloseOnOverlayClick: examples/should_close_on_overlay_click.md
- onRequestClose: examples/on_request_close.md
- Global Overrides: examples/global_overrides.md
- Inline Styles: examples/inline_styles.md
- Css Classes: examples/css_classes.md
- Testing: testing/index.md
- Contributing:
- Overview: contributing/index.md
- Development setup: contributing/development.md
theme:
name: 'material'
markdown_extensions:
- codehilite
extra_css: [pygments.css]
================================================
FILE: package.json
================================================
{
"name": "react-modal",
"version": "3.16.3",
"description": "Accessible modal dialog component for React.JS",
"main": "./lib/index.js",
"module": "./lib/index.js",
"repository": {
"type": "git",
"url": "https://github.com/reactjs/react-modal.git"
},
"homepage": "https://github.com/reactjs/react-modal",
"bugs": "https://github.com/reactjs/react-modal/issues",
"directories": {
"example": "examples"
},
"scripts": {
"start": "npx webpack-dev-server --config ./scripts/webpack.config.js --inline --host 127.0.0.1 --content-base examples/",
"test": "cross-env NODE_ENV=test karma start",
"lint": "eslint src/"
},
"authors": [
"Ryan Florence"
],
"license": "MIT",
"devDependencies": {
"@webcomponents/custom-elements": "^1.5.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.25.0",
"babel-eslint": "^8.0.1",
"babel-loader": "^7.1.2",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"coveralls": "^3.1.0",
"cross-env": "^5.2.1",
"eslint": "^4.8.0",
"eslint-config-prettier": "^2.6.0",
"eslint-import-resolver-webpack": "^0.9.0",
"eslint-plugin-import": "^2.23.2",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^2.3.1",
"eslint-plugin-react": "^7.23.2",
"istanbul-instrumenter-loader": "^3.0.0",
"karma": "^6.3.6",
"karma-chrome-launcher": "2.2.0",
"karma-coverage": "^2.0.3",
"karma-firefox-launcher": "1.0.1",
"karma-mocha": "^2.0.1",
"karma-mocha-reporter": "^2.2.1",
"karma-sourcemap-loader": "^0.3.8",
"karma-webpack": "^2.0.4",
"mocha": "^8.4.0",
"npm-run-all": "^4.1.1",
"prettier": "^1.19.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"should": "^13.1.0",
"sinon": "v14.0.2",
"uglify-js": "3.1.1",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"exenv": "^1.2.0",
"prop-types": "^15.7.2",
"react-lifecycles-compat": "^3.0.0",
"warning": "^4.0.3"
},
"peerDependencies": {
"react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 || ^19",
"react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 || ^19"
},
"tags": [
"react",
"modal",
"dialog"
],
"keywords": [
"react",
"react-component",
"modal",
"dialog"
]
}
================================================
FILE: scripts/changelog.py
================================================
# Requires python3 to work since, python 3< does not implement %z.
import sys
sys.path += ["/Users/diasbruno/.local/lib/python3.7/site-packages"]
from datetime import datetime
from subprocess import Popen, PIPE
import semver
import functools
# 1: version, 2: date, 3: dashes, 4: entries
LOG_ENTRY = """{}
{}
{}
"""
head_version = "HEAD"
def git_exec(args):
p = Popen(" ".join(["git"] + args), shell=True, stdout=PIPE, stderr=PIPE)
out, err = p.communicate()
return out.decode('utf-8')
def git_log(args):
return git_exec(["log"] + args)
def log_entry(entry):
log = entry.split(' ')
hash = log[0]
log = ' '.join(log[1:])
return "- [%s](../../commit/%s) %s" % (hash, hash, log)
def get_tags_date(tag):
args = [tag, "-1", '--format="%ad"']
date_time = git_log(args).split('\n')[0]
if date_time != '':
dt = datetime.strptime(date_time, '%a %b %d %H:%M:%S %Y %z')
else:
dt = datetime.now()
dt = dt.strftime('%a, %d %b %Y %H:%M:%S')
return dt
def log_in_between_versions(t):
(a, b, logs) = t
v = b and to_version(b) or head_version
dt = get_tags_date(v)
header = "{} - {} UTC".format(b or head_version, dt)
dashes = ("-" * len(header))
def write_log(acc, log):
if log[8:8+7] == 'Release' or log[8:8+7] == 'release':
return acc
acc.append(log_entry(log))
return acc
actual_log = list(functools.reduce(write_log,
logs.splitlines(),
[]))
if len(actual_log) == 0:
entries = '-\n\n'
else:
entries = "\n".join(actual_log)
return LOG_ENTRY.format(header, dashes, entries)
def adjacents(ls, f, res):
if len(ls) == 0:
return res
first = ls[0]
if len(ls) == 1:
next = None
else:
next = ls[1]
res.append(f(first, next))
return adjacents(ls[1:], f, res)
def to_version(tag):
if not tag:
return "HEAD"
if tag.prerelease:
return str(tag)
return "v{}".format(tag)
def logs_between(base, b):
to = to_version(b)
between = "{}..{}".format(to_version(base), to)
logs = git_log([between, "--format='%h %s'"])
return (base, b, logs)
def parse_version(version):
if version == 'HEAD':
return version
if version[0] == 'v':
version = version[1:]
return semver.parse_version_info(version)
def get_all_tags():
lines = git_exec(["tag", "-l"])
versions = map(parse_version, lines.splitlines())
return sorted(versions)
def generate_current():
versions = get_all_tags()
base = versions[-1]
logs = logs_between(base, None)
return [log_in_between_versions(logs)]
def generate_all():
versions = get_all_tags()
log_versions = adjacents(versions, logs_between, [])
vs = map(log_in_between_versions, log_versions)
return list(vs)
if __name__ == "__main__":
argc = len(sys.argv)
if sys.argv[1] == '-a': # all
head_version = sys.argv[2] if argc > 2 else "HEAD"
log = generate_all()
log.reverse()
elif sys.argv[1] == '-c': # current
head_version = sys.argv[2]
log = generate_current()
print("\n".join(log))
================================================
FILE: scripts/defaultConfig.js
================================================
const path = require('path');
module.exports = {
mode: 'development',
output: {
filename: '[name].js',
path: path.resolve(__dirname, './examples/__build__'),
publicPath: '/__build__/'
},
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } }
]
},
resolve: {
alias: {
"react-modal": path.resolve(__dirname, "../src")
}
}
};
================================================
FILE: scripts/repo_status
================================================
#!/bin/bash
if [ ! -z "`git status -s`" ]; then
echo "Working tree is not clean"
git status -s
read -p "Proceed? [Y/n] " OK
if [[ "$OK" -eq "n" || "$OK" -eq "N" || -z "$OK" ]]; then
echo "Stopping publish"
exit 1
fi
fi
================================================
FILE: scripts/version
================================================
#!/bin/sh
JQ=$(which jq)
if [[ -z "$JQ" ]]; then
echo "jq is missing."
fi
echo "Current version is: $1"
read -p "Bump to: " NEW_VERSION
if [[ ! -z "$(git tag -l | grep v${NEW_VERSION})" ]]; then
echo "Tag $NEW_VERSION already exists."
exit 1
fi
FILES="package.json bower.json"
for F in $FILES; do
$JQ ".version = \"${NEW_VERSION}\"" "$F" > up.json
cat up.json > "$F"
done
rm up.json
================================================
FILE: scripts/webpack.config.js
================================================
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const defaultConfig = require('./defaultConfig');
var EXAMPLES_DIR = path.resolve(__dirname, '../examples');
function isDirectory(dir) {
return fs.lstatSync(dir).isDirectory();
}
function buildEntries() {
return fs.readdirSync(EXAMPLES_DIR).reduce(function (entries, dir) {
if (dir === 'build')
return entries;
var isDraft = dir.charAt(0) === '_';
if (!isDraft && isDirectory(path.join(EXAMPLES_DIR, dir)))
entries[dir] = path.join(EXAMPLES_DIR, dir, 'app.js');
return entries;
}, {});
}
module.exports = {
...defaultConfig,
entry: buildEntries(),
};
================================================
FILE: scripts/webpack.dist.config.js
================================================
const webpack = require('webpack');
const path = require('path');
const defaultConfig = require('./defaultConfig');
const reactExternal = {
root: 'React',
commonjs2: 'react',
commonjs: 'react',
amd: 'react'
};
const reactDOMExternal = {
root: 'ReactDOM',
commonjs2: 'react-dom',
commonjs: 'react-dom',
amd: 'react-dom'
};
module.exports = {
...defaultConfig,
mode: 'production',
entry: {
'react-modal': path.resolve(__dirname, '../src/index.js'),
'react-modal.min': path.resolve(__dirname, '../src/index.js')
},
externals: {
'react': reactExternal,
'react-dom': reactDOMExternal
},
output: {
filename: '[name].js',
chunkFilename: '[id].chunk.js',
path: path.resolve(__dirname, '../dist'),
publicPath: '/',
libraryTarget: 'umd',
library: 'ReactModal'
},
optimization: {
minimize: true
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})
]
};
================================================
FILE: scripts/webpack.test.config.js
================================================
const path = require('path');
const defaultConfig = require('./defaultConfig');
module.exports = {
...defaultConfig,
plugins: [],
entry: path.resolve(__dirname, '../specs/index.js'),
devtool: 'inline-source-map',
module: {
...defaultConfig.module,
rules: [
{
test: /\.js$/,
use: { loader: 'istanbul-instrumenter-loader' },
enforce: 'post',
include: path.resolve(__dirname, '../src')
},
...defaultConfig.module.rules
]
}
};
================================================
FILE: specs/Modal.events.spec.js
================================================
/* eslint-env mocha */
import React from "react";
import ReactDOM from "react-dom";
import "should";
import sinon from "sinon";
import Modal from "react-modal";
import {
moverlay,
mcontent,
clickAt,
mouseDownAt,
mouseUpAt,
escKeyDown,
escKeyDownWithCode,
tabKeyDown,
tabKeyDownWithCode,
withModal,
withElementCollector,
createHTMLElement
} from "./helper";
export default () => {
it("should trigger the onAfterOpen callback", () => {
const afterOpenCallback = sinon.spy();
withElementCollector(() => {
const props = { isOpen: true, onAfterOpen: afterOpenCallback };
const node = createHTMLElement("div");
ReactDOM.render(
{topButton}
{bottomButton}
);
const props = { isOpen: true };
withModal(props, modalContent, modal => {
const content = mcontent(modal);
tabKeyDown(content, { shiftKey: true });
document.activeElement.textContent.should.be.eql("bottom");
});
});
it("traps tab in the modal on shift + tab with KeyboardEvent.code", () => {
const topButton = ;
const bottomButton = ;
const modalContent = (
{topButton}
{bottomButton}
);
const props = { isOpen: true };
withModal(props, modalContent, modal => {
const content = mcontent(modal);
tabKeyDownWithCode(content, { shiftKey: true });
document.activeElement.textContent.should.be.eql("bottom");
});
});
describe("shouldCloseOnEsc", () => {
context("when true", () => {
it("should close on Esc key event", () => {
const requestCloseCallback = sinon.spy();
withModal(
{
isOpen: true,
shouldCloseOnEsc: true,
onRequestClose: requestCloseCallback
},
null,
modal => {
escKeyDown(mcontent(modal));
requestCloseCallback.called.should.be.ok();
// Check if event is passed to onRequestClose callback.
const event = requestCloseCallback.getCall(0).args[0];
event.should.be.ok();
}
);
});
it("should close on Esc key event with KeyboardEvent.code", () => {
const requestCloseCallback = sinon.spy();
withModal(
{
isOpen: true,
shouldCloseOnEsc: true,
onRequestClose: requestCloseCallback
},
null,
modal => {
escKeyDownWithCode(mcontent(modal));
requestCloseCallback.called.should.be.ok();
// Check if event is passed to onRequestClose callback.
const event = requestCloseCallback.getCall(0).args[0];
event.should.be.ok();
}
);
});
});
context("when false", () => {
it("should not close on Esc key event", () => {
const requestCloseCallback = sinon.spy();
const props = {
isOpen: true,
shouldCloseOnEsc: false,
onRequestClose: requestCloseCallback
};
withModal(props, null, modal => {
escKeyDown(mcontent(modal));
requestCloseCallback.called.should.be.false;
});
});
});
});
describe("shouldCloseOnoverlayClick", () => {
it("when false, click on overlay should not close", () => {
const requestCloseCallback = sinon.spy();
const props = {
isOpen: true,
shouldCloseOnOverlayClick: false
};
withModal(props, null, modal => {
const overlay = moverlay(modal);
clickAt(overlay);
requestCloseCallback.called.should.not.be.ok();
});
});
it("when true, click on overlay must close", () => {
const requestCloseCallback = sinon.spy();
const props = {
isOpen: true,
shouldCloseOnOverlayClick: true,
onRequestClose: requestCloseCallback
};
withModal(props, null, modal => {
clickAt(moverlay(modal));
requestCloseCallback.called.should.be.ok();
});
});
it("overlay mouse down and content mouse up, should not close", () => {
const requestCloseCallback = sinon.spy();
const props = {
isOpen: true,
shouldCloseOnOverlayClick: true,
onRequestClose: requestCloseCallback
};
withModal(props, null, modal => {
mouseDownAt(moverlay(modal));
mouseUpAt(mcontent(modal));
requestCloseCallback.called.should.not.be.ok();
});
});
it("content mouse down and overlay mouse up, should not close", () => {
const requestCloseCallback = sinon.spy();
const props = {
isOpen: true,
shouldCloseOnOverlayClick: true,
onRequestClose: requestCloseCallback
};
withModal(props, null, modal => {
mouseDownAt(mcontent(modal));
mouseUpAt(moverlay(modal));
requestCloseCallback.called.should.not.be.ok();
});
});
});
it("should not stop event propagation", () => {
let hasPropagated = false;
const props = {
isOpen: true,
shouldCloseOnOverlayClick: true
};
withModal(props, null, modal => {
const propagated = () => (hasPropagated = true);
window.addEventListener("click", propagated);
const event = new MouseEvent("click", { bubbles: true });
moverlay(modal).dispatchEvent(event);
hasPropagated.should.be.ok();
window.removeEventListener("click", propagated);
});
});
it("verify event passing on overlay click", () => {
const requestCloseCallback = sinon.spy();
const props = {
isOpen: true,
shouldCloseOnOverlayClick: true,
onRequestClose: requestCloseCallback
};
withModal(props, null, modal => {
// click the overlay
clickAt(moverlay(modal), {
// Used to test that this was the event received
fakeData: "ABC"
});
requestCloseCallback.called.should.be.ok();
// Check if event is passed to onRequestClose callback.
const event = requestCloseCallback.getCall(0).args[0];
event.should.be.ok();
});
});
it("on nested modals, only the topmost should handle ESC key.", () => {
const requestCloseCallback = sinon.spy();
const innerRequestCloseCallback = sinon.spy();
let innerModal = null;
let innerModalRef = ref => {
innerModal = ref;
};
withModal(
{
isOpen: true,
onRequestClose: requestCloseCallback
},
{contentElement}
);
const props = { isOpen: true, overlayElement };
withModal(props, null, modal => {
const modalOverlay = moverlay(modal);
modalOverlay.id.should.eql("custom");
});
});
it("supports custom contentElement", () => {
const contentElement = (props, children) => (
{children}
);
const props = { isOpen: true, contentElement };
withModal(props, "hello", modal => {
const modalContent = mcontent(modal);
modalContent.id.should.eql("custom");
modalContent.textContent.should.be.eql("hello");
});
});
it("supports overlayClassName", () => {
const props = {
isOpen: true,
overlayClassName: "myOverlayClass"
};
withModal(props, null, modal => {
moverlay(modal)
.className.includes("myOverlayClass")
.should.be.ok();
});
});
it("overrides content classes with custom object className", () => {
withElementCollector(() => {
const props = {
isOpen: true,
className: {
base: "myClass",
afterOpen: "myClass_after-open",
beforeClose: "myClass_before-close"
}
};
const node = createHTMLElement("div");
const modal = ReactDOM.render({contentEl}
,
contentElement: (props, children) => {children}
};
static defaultStyles = {
overlay: {
position: "fixed",
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: "rgba(255, 255, 255, 0.75)"
},
content: {
position: "absolute",
top: "40px",
left: "40px",
right: "40px",
bottom: "40px",
border: "1px solid #ccc",
background: "#fff",
overflow: "auto",
WebkitOverflowScrolling: "touch",
borderRadius: "4px",
outline: "none",
padding: "20px"
}
};
constructor(props) {
super(props);
this.removePortalTimer = null;
}
componentDidMount() {
if (!canUseDOM) return;
clearTimeout(this.removePortalTimer);
if (!isReact16) {
this.node = createHTMLElement("div");
}
this.node.className = this.props.portalClassName;
const parent = getParentElement(this.props.parentSelector);
parent.appendChild(this.node);
!isReact16 && this.renderPortal(this.props);
}
getSnapshotBeforeUpdate(prevProps) {
const prevParent = getParentElement(prevProps.parentSelector);
const nextParent = getParentElement(this.props.parentSelector);
return { prevParent, nextParent };
}
componentDidUpdate(prevProps, _, snapshot) {
if (!canUseDOM) return;
const { isOpen, portalClassName } = this.props;
if (prevProps.portalClassName !== portalClassName) {
this.node.className = portalClassName;
}
const { prevParent, nextParent } = snapshot;
if (nextParent !== prevParent) {
prevParent.removeChild(this.node);
nextParent.appendChild(this.node);
}
// Stop unnecessary renders if modal is remaining closed
if (!prevProps.isOpen && !isOpen) return;
!isReact16 && this.renderPortal(this.props);
}
componentWillUnmount() {
if (!canUseDOM || !this.node || !this.portal) return;
const state = this.portal.state;
const now = Date.now();
const closesAt =
state.isOpen &&
this.props.closeTimeoutMS &&
(state.closesAt || now + this.props.closeTimeoutMS);
if (closesAt) {
if (!state.beforeClose) {
this.portal.closeWithTimeout();
}
this.removePortalTimer = setTimeout(this.removePortal, closesAt - now);
} else {
this.removePortal();
}
}
removePortal = () => {
!isReact16 && ReactDOM.unmountComponentAtNode(this.node);
const parent = getParentElement(this.props.parentSelector);
if (parent && parent.contains(this.node)) {
parent.removeChild(this.node);
} else {
// eslint-disable-next-line no-console
console.warn(
'React-Modal: "parentSelector" prop did not returned any DOM ' +
"element. Make sure that the parent element is unmounted to " +
"avoid any memory leaks."
);
}
};
portalRef = ref => {
this.portal = ref;
};
renderPortal = props => {
const createPortal = getCreatePortal();
const portal = createPortal(
this,