[change] v2.0.0.

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015", "react"]
-}
+  "presets": ["es2015", "stage-2", "react"]
+}

.codeclimate.yml

@@ -0,0 +1,17 @@
+engines:
+  eslint:
+    enabled: true
+    channel: "eslint-3"
+  duplication:
+    enabled: true
+    config:
+      languages:
+        javascript:
+ratings:
+  paths:
+    - lib/**
+    - "**.js"
+exclude_paths:
+  - "specs/"
+  - "dist/"
+  - "examples/"

.eslintrc

@@ -0,0 +1,32 @@
+{
+  "env": {
+    "es6": true,
+    "browser": true
+  },
+  "extends": "airbnb",
+  "parserOptions": {
+    "ecmaVersion": 7,
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "parser": "babel-eslint",
+  "rules": {
+    "quotes": [0],
+    "comma-dangle": [2, "only-multiline"],
+    "max-len": [1, {"code": 80}],
+    "no-unused-expressions": [0],
+    "no-continue": [0],
+    "no-plusplus": [0],
+    "func-names": [0],
+    "arrow-parens": [0],
+    "space-before-function-paren": [0],
+    "import/no-extraneous-dependencies": [2, {"devDependencies": true}],
+    "jsx-a11y/no-static-element-interactions": [0],
+    "react/no-find-dom-node": [0],
+    "react/jsx-closing-bracket-location": [0],
+    "react/jsx-filename-extension": ["error", {"extensions": [".js"]}]
+  }
+}

.gitignore

@@ -4,7 +4,7 @@ examples/**/*-bundle.js
 node_modules/
 .idea/
 _book
-coverage/*
 *.patch
 *.diff
 examples/__build__
+coverage

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2014 Ryan Florence
+Copyright (c) 2017 Ryan Florence
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

Makefile

@@ -2,26 +2,32 @@ NODE=$(shell which node)
 NPM=$(shell which npm)
 YARN=$(shell which yarn)
 JQ=$(shell which jq)
+COVERALLS=./node_modules/coveralls/bin/coveralls.js
 
 REMOTE="git@github.com:reactjs/react-modal"
 
 VERSION=$(shell jq ".version" package.json)
 
+COVERAGE?=true
+
 help: info
 	@echo
 	@echo "Current version: $(VERSION)"
 	@echo
 	@echo "List of commands:"
 	@echo
-	@echo "  make info         - display node, npm and yarn versions..."
-	@echo "  make deps         - install all dependencies."
-	@echo "  make serve        - start the server."
-	@echo "  make tests        - run tests."
-	@echo "  make docs         - build and serve the docs."
-	@echo "  make build        - build project artifacts."
-	@echo "  make publish      - build and publish version on npm."
-	@echo "  make publish-docs - build the docs and publish to gh-pages."
-	@echo "  make publish-all  - publish version and docs."
+	@echo "  make info             - display node, npm and yarn versions..."
+	@echo "  make deps             - install all dependencies."
+	@echo "  make serve            - start the server."
+	@echo "  make tests            - run tests."
+	@echo "  make tests-single-run - run tests (used by continuous integration)."
+	@echo "  make coveralls        - show coveralls."
+	@echo "  make lint             - run lint."
+	@echo "  make docs             - build and serve the docs."
+	@echo "  make build            - build project artifacts."
+	@echo "  make publish          - build and publish version on npm."
+	@echo "  make publish-docs     - build the docs and publish to gh-pages."
+	@echo "  make publish-all      - publish version and docs."
 
 info:
 	@echo node version: `$(NODE) --version` "($(NODE))"
@@ -45,9 +51,18 @@ serve:
 tests:
 	@npm run test
 
-tests-ci:
+tests-single-run:
 	@npm run test -- --single-run
 
+coveralls:
+	-cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js 2>/dev/null
+
+tests-ci: clean lint
+	@COVERAGE=$(COVERAGE) make tests-single-run coveralls
+
+lint:
+	@npm run lint
+
 docs: build-docs
 	gitbook serve
 
@@ -87,9 +102,6 @@ publish-version: release-commit release-tag
 
 publish-finished: clean
 
-clean:
-	@rm -rf .version .branch
-
 pre-publish: clean .branch .version deps-project tests-ci build
 
 publish: pre-publish publish-version publish-finished
@@ -107,3 +119,6 @@ publish-docs: deps-docs build-docs
 	cd ..
 
 publish-all: publish publish-docs
+
+clean:
+	@rm -rf .version .branch ./coverage/*

README.md

@@ -3,6 +3,8 @@
 Accessible modal dialog component for React.JS
 
 [![Build Status](https://travis-ci.org/reactjs/react-modal.svg?branch=v1)](https://travis-ci.org/reactjs/react-modal)
+[![Code Climate](https://codeclimate.com/github/reactjs/react-modal/badges/gpa.svg)](https://codeclimate.com/github/reactjs/react-modal)
+[![Coverage Status](https://coveralls.io/repos/github/reactjs/react-modal/badge.svg?branch=master)](https://coveralls.io/github/reactjs/react-modal?branch=master)
 ![gzip size](http://img.badgesize.io/https://unpkg.com/react-modal/dist/react-modal.min.js?compression=gzip)
 
 ## Active Development
@@ -142,9 +144,9 @@ You can use this to remove scrolling on the the body while the modal is open.
 Inside an app:
 
 ```js
-var React = require('react');
-var ReactDOM = require('react-dom');
-var Modal = require('react-modal');
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Modal from 'react-modal';
 
 
 /*
@@ -159,7 +161,7 @@ Modal.setAppElement(appElement);
 Modal.setAppElement('#your-app-element');
 
 */
-var appElement = document.getElementById('your-app-element');
+const appElement = document.getElementById('your-app-element');
 
 
 
@@ -175,26 +177,33 @@ const customStyles = {
 };
 
 
-var App = React.createClass({
+class App extends React.Component {
+  constructor() {
+    super();
 
-  getInitialState: function() {
-    return { modalIsOpen: false };
-  },
+    this.state = {
+      modalIsOpen: false
+    };
+
+    this.openModal = this.openModal.bind(this);
+    this.afterOpenModal = this.afterOpenModal.bind(this);
+    this.closeModal = this.closeModal.bind(this);
+  }
 
-  openModal: function() {
+  openModal() {
     this.setState({modalIsOpen: true});
-  },
+  }
 
-  afterOpenModal: function() {
+  afterOpenModal() {
     // references are now sync'd and can be accessed.
-    this.refs.subtitle.style.color = '#f00';
-  },
+    this.subtitle.style.color = '#f00';
+  }
 
-  closeModal: function() {
+  closeModal() {
     this.setState({modalIsOpen: false});
-  },
+  }
 
-  render: function() {
+  render() {
     return (
       <div>
         <button onClick={this.openModal}>Open Modal</button>
@@ -206,7 +215,7 @@ var App = React.createClass({
           contentLabel="Example Modal"
         >
 
-          <h2 ref="subtitle">Hello</h2>
+          <h2 ref={subtitle => this.subtitle = subtitle}>Hello</h2>
           <button onClick={this.closeModal}>close</button>
           <div>I am a modal</div>
           <form>
@@ -220,9 +229,9 @@ var App = React.createClass({
       </div>
     );
   }
-});
+}
 
-ReactDOM.render(<App/>, appElement);
+ReactDOM.render(<App />, appElement);
 ```
 # Testing
 

examples/basic/app.js

@@ -1,64 +1,57 @@
-var React = require('react');
-var ReactDOM = require('react-dom');
-var Modal = require('../../lib/index');
-var createReactClass = require('create-react-class');
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import Modal from '../../lib/index';
 
-var appElement = document.getElementById('example');
+const appElement = document.getElementById('example');
 
 Modal.setAppElement('#example');
 
-var App = createReactClass({
-
-  getInitialState: function() {
-    return { modalIsOpen: false, modal2: false };
-  },
-
-  openModal: function() {
-    this.setState(Object.assign({}, this.state, { modalIsOpen: true }));
-  },
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { modal1: false, modal2: false };
+  }
 
-  closeModal: function() {
-    this.setState(Object.assign({}, this.state, { modalIsOpen: false }));
-  },
+  toggleModal_1 = () => {
+    this.setState({ ...this.state, modal1: !this.state.modal1 });
+  }
 
-  openSecondModal: function(event) {
+  toggleModal_2 = event => {
     event.preventDefault();
-    this.setState(Object.assign ({}, this.state, { modal2: true }));
-  },
-
-  closeSecondModal: function() {
-    this.setState(Object.assign ({}, this.state, { modal2: false }));
-  },
+    this.setState({ ...this.state, modal2: !this.state.modal2 });
+  }
 
-  handleModalCloseRequest: function() {
+  handleModalCloseRequest = () => {
     // opportunity to validate something and keep the modal open even if it
     // requested to be closed
-    this.setState(Object.assign ({}, this.state, { modalIsOpen: false }));
-  },
+    this.setState({ ...this.state, modal1: false });
+  }
 
-  handleInputChange: function() {
-    this.setState({ foo: 'bar' });
-  },
+  handleInputChange = () => {
+    this.setState({ ...this.state, foo: 'bar' });
+  }
 
-  handleOnAfterOpenModal: function() {
+  handleOnAfterOpenModal = () => {
     // when ready, we can access the available refs.
     this.refs.title.style.color = '#F00';
-  },
+  }
 
-  render: function() {
+  render() {
+    const { modal1, modal2 } = this.state;
     return (
       <div>
-        <button onClick={this.openModal}>Open Modal A</button>
-        <button onClick={this.openSecondModal}>Open Modal B</button>
+        <button onClick={this.toggleModal_1}>Open Modal A</button>
+        <button onClick={this.toggleModal_2}>Open Modal B</button>
         <Modal
           ref="mymodal"
           id="test"
           closeTimeoutMS={150}
-          isOpen={this.state.modalIsOpen}
+          isOpen={modal1}
+          contentLabel="modalA"
           onAfterOpen={this.handleOnAfterOpenModal}
           onRequestClose={this.handleModalCloseRequest}>
           <h1 ref="title">Hello</h1>
-          <button onClick={this.closeModal}>close</button>
+          <button onClick={this.toggleModal_1}>close</button>
           <div>I am a modal</div>
           <form>
             <input onChange={this.handleInputChange} />
@@ -71,20 +64,21 @@ var App = createReactClass({
             <button>hi</button>
             <button>hi</button>
             <button>hi</button>
-            <button onClick={this.openSecondModal}>Open Modal B</button>
+            <button onClick={this.toggleModal_2}>Open Modal B</button>
           </form>
         </Modal>
         <Modal ref="mymodal2"
                id="test2"
                closeTimeoutMS={150}
-               isOpen={this.state.modal2}
+               contentLabel="modalB"
+               isOpen={modal2}
                onAfterOpen={() => {}}
-               onRequestClose={this.closeSecondModal}>
+               onRequestClose={this.toggleModal_2}>
           <p>test</p>
         </Modal>
       </div>
     );
   }
-});
+}
 
 ReactDOM.render(<App/>, appElement);