Merge pull request elementalui#214 from access-watch/react16

Add support for React 16. Resolves elementalui#200
takeratta · Oct 5, 2017 · a2d459b · a2d459b
2 parents fda14de + 1aac41b
commit a2d459b
Show file tree

Hide file tree

Showing 53 changed files with 591 additions and 494 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -10,7 +10,7 @@ var taskConfig = {
 			'blacklist',
 			'classNames',
 			'react',
-			'react-addons-css-transition-group',
+			'react-transition-group',
 			'react-dom',
 			'react-router'
 		],

diff --git a/package.json b/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "blacklist": "^1.1.4",
-    "classnames": "^2.2.5"
+    "classnames": "^2.2.5",
+    "create-react-class": "^15.6.2"
   },
   "devDependencies": {
     "babel": "^5.8.23",
@@ -21,20 +22,21 @@
     "glob": "^7.0.5",
     "gulp": "^3.9.1",
     "isparta": "^4.0.0",
-    "react": "^15.0.0",
-    "react-addons-css-transition-group": "^15.0.0",
+    "react": "^16.0.0",
     "react-component-gulp-tasks": "^0.7.7",
-    "react-dom": "^15.0.0",
-    "react-router": "^2.6.0",
+    "react-dom": "^16.0.0",
+    "react-router": "^4.2.0",
+    "react-router-dom": "^4.2.2",
+    "react-transition-group": "^1.2.1",
     "rimraf": "^2.5.4",
     "tap-xunit": "^1.4.0",
     "tape": "^4.6.0",
     "teaspoon": "^6.4.1"
   },
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0",
-    "react-dom": "^0.14.0 || ^15.0.0",
-    "react-addons-css-transition-group": "^0.14.0 || ^15.0.0"
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-transition-group": "^1.2.1"
   },
   "browserify-shim": {
     "react": "global:React"

diff --git a/site/src/components/DemoBox.js b/site/src/components/DemoBox.js
@@ -1,4 +1,6 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import classnames from 'classnames';
 import E from '../../../src/constants';
 
@@ -8,13 +10,13 @@ const ALIGN_TRANSFORM = {
 	'right': 'flex-end',
 };
 
-var DemoBox = React.createClass({
+var DemoBox = createReactClass({
 	propTypes: {
-		align: React.PropTypes.oneOf(['center', 'left', 'right']),
-		children: React.PropTypes.node.isRequired,
-		className: React.PropTypes.string,
-		inverted: React.PropTypes.bool,
-		style: React.PropTypes.object,
+		align: PropTypes.oneOf(['center', 'left', 'right']),
+		children: PropTypes.node.isRequired,
+		className: PropTypes.string,
+		inverted: PropTypes.bool,
+		style: PropTypes.object,
 	},
 	getDefaultProps () {
 		return {

diff --git a/site/src/components/ExampleSource.js b/site/src/components/ExampleSource.js
@@ -1,11 +1,13 @@
 /* global Prism */
 var classNames = require('classnames');
 var React = require('react');
+var createReactClass = require('create-react-class');
+var PropTypes = require('prop-types');
 
-var ExampleSource = React.createClass({
+var ExampleSource = createReactClass({
 	propTypes: {
-		children: React.PropTypes.string.isRequired,
-		language: React.PropTypes.string
+		children: PropTypes.string.isRequired,
+		language: PropTypes.string
 	},
 	getDefaultProps () {
 		return {

diff --git a/site/src/pages/Buttons.js b/site/src/pages/Buttons.js
@@ -2,6 +2,7 @@
 
 var React = require('react');
 var { Button, ButtonGroup, Container, Dropdown, Table } = require('elemental');
+var createReactClass = require('create-react-class');
 
 var ExampleSource = require('../components/ExampleSource');
 
@@ -53,7 +54,7 @@ const BUTTON_LINK_VARIANTS = [
 	{ label: 'Link Delete',      value: 'link-delete' }
 ];
 
-var Buttons = React.createClass({
+var Buttons = createReactClass({
 	displayName: 'VIEW_Buttons',
 	getInitialState() {
 		return {

diff --git a/site/src/pages/CSS.js b/site/src/pages/CSS.js
@@ -2,14 +2,15 @@
 
 const React = require('react');
 const classNames = require('classnames');
+const createReactClass = require('create-react-class');
 
 const ExampleSource = require('../components/ExampleSource');
 const { Container, Table } = require('elemental');
 
 const USERS = require('../data/users');
 const TABLE_HEADERS = ['', 'User', 'Age', 'Gender Identity'];
 
-var CSSExamples = React.createClass({
+var CSSExamples = createReactClass({
 
 	getInitialState() {
 		return {

diff --git a/site/src/pages/DatePicker.js b/site/src/pages/DatePicker.js
@@ -1,8 +1,9 @@
 var React = require('react');
 var Button = require('elemental').Button;
 var DateSelect = require('react-date-select');
+var createReactClass = require('create-react-class');
 
-var DateSelectExamples = React.createClass({
+var DateSelectExamples = createReactClass({
 	getInitialState() {
 		return {
 			singleDateValue: new Date(),

diff --git a/site/src/pages/Forms.js b/site/src/pages/Forms.js
@@ -1,6 +1,7 @@
 /* eslint no-alert: 0 */
 
 const React = require('react');
+const createReactClass = require('create-react-class');
 
 const {
 	Button,
@@ -41,7 +42,7 @@ const COLOR_VARIANTS = [
 	{ label: 'Danger',  icon: 'stop', value: 'danger' }
 ];
 
-var Forms = React.createClass({
+var Forms = createReactClass({
 	displayName: 'VIEW_Forms',
 
 	getInitialState () {

diff --git a/site/src/pages/Glyphs.js b/site/src/pages/Glyphs.js
@@ -1,6 +1,7 @@
 /* eslint no-script-url: 0 */
 
 var React = require('react');
+var createReactClass = require('create-react-class');
 var { Glyph, Container, Table, Col, Row, Card, Button } = require('elemental');
 
 var ExampleSource = require('../components/ExampleSource');
@@ -14,7 +15,7 @@ const GLYPH_COLOR_TYPES = [
 	'warning'
 ];
 
-var Glyphs = React.createClass({
+var Glyphs = createReactClass({
 	displayName: 'VIEW_Glyphs',
 	renderGlyphColorTypes() {
 		return GLYPH_COLOR_TYPES.map(color => {

diff --git a/site/src/pages/Grid.js b/site/src/pages/Grid.js
@@ -1,12 +1,13 @@
 /* eslint no-script-url: 0 */
 
 const React = require('react');
+const createReactClass = require('create-react-class');
 const { Col, Container, Row, ResponsiveText } = require('elemental');
 
 const DemoBox = require('../components/DemoBox');
 const ExampleSource = require('../components/ExampleSource');
 
-var GridExample = React.createClass({
+var GridExample = createReactClass({
 	render() {
 		return (
 			<Container maxWidth={800} className="demo-container">

diff --git a/site/src/pages/Home.js b/site/src/pages/Home.js
@@ -1,5 +1,6 @@
-const React = require('react');
-const Router = require('react-router');
+import React from 'react';
+import { Link } from 'react-router-dom';
+import createReactClass from 'create-react-class';
 
 const NavItems = [
 	{ value: 'css', icon: 'paintcan', label: 'CSS' },
@@ -14,19 +15,19 @@ const NavItems = [
 const { Col, Container, Row } = require('elemental');
 const ExampleSource = require('../components/ExampleSource');
 
-var Home = React.createClass({
+var Home = createReactClass({
 	displayName: 'VIEW_Home',
 
 	render () {
 		var menuItems = NavItems.map(function (item) {
 			return (
 				<Col xs="1/3" sm="1/6" key={item.label} className="demo-banner-nav__col col-xs-4 col-sm-2">
-					<Router.Link key={item.value} className="demo-banner-nav__item" to={'/' + item.value}>
+					<Link key={item.value} className="demo-banner-nav__item" to={'/' + item.value}>
 						<span className={'demo-banner-nav__icon octicon octicon-' + item.icon} />
 						<div className="demo-banner-nav__label">
 							<span className="demo-banner-nav__label-inner">{item.label}</span>
 						</div>
-					</Router.Link>
+					</Link>
 				</Col>
 			);
 		});
@@ -130,4 +131,4 @@ var Home = React.createClass({
 	},
 });
 
-module.exports = Home;
+export default Home;
diff --git a/site/src/pages/Misc.js b/site/src/pages/Misc.js
@@ -1,12 +1,13 @@
 const React = require('react');
+const createReactClass = require('create-react-class');
 const DemoBox = require('../components/DemoBox');
 const ExampleSource = require('../components/ExampleSource');
 const { Alert, Card, Col, Container, FormField, FormInput, InputGroup, Pagination, Pill, Row, Table } = require('elemental');
 
 const MAX_PAGESIZE = 100;
 const MAX_RECORDS = 1000;
 
-var Misc = React.createClass({
+var Misc = createReactClass({
 	displayName: 'VIEW_Misc',
 
 	getInitialState () {

diff --git a/site/src/pages/Modal.js b/site/src/pages/Modal.js
@@ -1,4 +1,5 @@
 const React = require('react');
+const createReactClass = require('create-react-class');
 
 const {
 	Button,
@@ -15,7 +16,7 @@ const {
 
 const ExampleSource = require('../components/ExampleSource');
 
-module.exports = React.createClass({
+module.exports = createReactClass({
 	displayName: 'VIEW_Modal',
 	getInitialState() {
 		return {

diff --git a/site/src/pages/Spinner.js b/site/src/pages/Spinner.js
@@ -1,9 +1,10 @@
 const React = require('react');
+const createReactClass = require('create-react-class');
 const { Button, Col, Container, Row, Spinner, Table } = require('elemental');
 const DemoBox = require('../components/DemoBox');
 const ExampleSource = require('../components/ExampleSource');
 
-var Buttons = React.createClass({
+var Buttons = createReactClass({
 	displayName: 'VIEW_Spinner',
 	render () {
 		return (

diff --git a/site/src/site.js b/site/src/site.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { browserHistory, Router, Route, Link, IndexRoute } from 'react-router';
+import createReactClass from 'create-react-class';
+import classNames from 'classnames';
+import createHistory from 'history/createBrowserHistory';
+import { Router, Route, Link, Switch } from 'react-router-dom';
+
+const browserHistory = createHistory();
 
 const NavItems = [
 	{ value: '/css',         label: 'CSS' },
@@ -14,7 +19,7 @@ const NavItems = [
 	// { value: 'date-picker', label: 'Date Picker' }
 ];
 
-const PageNav = React.createClass({
+const PageNav = createReactClass({
 	getInitialState () {
 		return {
 			mobileMenuIsVisible: false,
@@ -45,9 +50,11 @@ const PageNav = React.createClass({
 		var menuClass = this.state.mobileMenuIsVisible ? 'primary-nav-menu is-visible' : 'primary-nav-menu is-hidden';
 		var menuItems = NavItems.map(function(item) {
 			return (
-				<Link key={item.value} className="primary-nav__item" activeClassName="active" onClick={self.toggleMenu} to={item.value}>
-					<span className="primary-nav__item-inner">{item.label}</span>
-				</Link>
+				<Route key={item.value} path={item.value} exact children={({ match }) => (
+					<Link className={classNames('primary-nav__item', { active: match })} onClick={self.toggleMenu} to={item.value}>
+						<span className="primary-nav__item-inner">{item.label}</span>
+					</Link>
+				)}/>
 			);
 		});
 		return (
@@ -73,7 +80,7 @@ const PageNav = React.createClass({
 	}
 });
 
-const App = React.createClass({
+const App = createReactClass({
 	render () {
 		return (
 			<div className="page-wrapper">
@@ -95,19 +102,20 @@ const basepath = (window.location.pathname.slice(0, 10) === '/elemental') ? '/el
 
 ReactDOM.render(
 	<Router history={browserHistory} onUpdate={() => window.scrollTo(0, 0)}>
-		<Route path="/" component={App}>
-			<IndexRoute component={require('./pages/Home')} />
-			<Route path="home" component={require('./pages/Home')} />
-			<Route path="css" component={require('./pages/CSS')} />
-			<Route path="grid" component={require('./pages/Grid')} />
-			<Route path="buttons" component={require('./pages/Buttons')} />
-			<Route path="glyphs" component={require('./pages/Glyphs')} />
-			<Route path="forms" component={require('./pages/Forms')} />
-			<Route path="spinner" component={require('./pages/Spinner')} />
-			<Route path="modal" component={require('./pages/Modal')} />
-			<Route path="misc" component={require('./pages/Misc')} />
-			<Route path="*" component={require('./pages/Home')} />
-		</Route>
+		<App>
+			<Switch>
+				<Route path="/home" component={require('./pages/Home')} />
+				<Route path="/css" component={require('./pages/CSS')} />
+				<Route path="/grid" component={require('./pages/Grid')} />
+				<Route path="/buttons" component={require('./pages/Buttons')} />
+				<Route path="/glyphs" component={require('./pages/Glyphs')} />
+				<Route path="/forms" component={require('./pages/Forms')} />
+				<Route path="/spinner" component={require('./pages/Spinner')} />
+				<Route path="/modal" component={require('./pages/Modal')} />
+				<Route path="/misc" component={require('./pages/Misc')} />
+				<Route component={require('./pages/Home')} />
+			</Switch>
+		</App>
 	</Router>,
 	document.getElementById('app')
 );
diff --git a/src/components/Alert.js b/src/components/Alert.js
@@ -1,7 +1,9 @@
-var React = require('react');
-var classNames = require('classnames');
+const React = require('react');
+const PropTypes = require('prop-types');
+const classNames = require('classnames');
+const createReactClass = require('create-react-class');
 
-var ALERT_TYPES = [
+const ALERT_TYPES = [
 	'danger',
 	'error', // alias for danger
 	'info',
@@ -10,15 +12,15 @@ var ALERT_TYPES = [
 	'warning',
 ];
 
-export default React.createClass({
+export default createReactClass({
 	displayName: 'ElementalAlert',
 	propTypes: {
-		children: React.PropTypes.node.isRequired,
-		className: React.PropTypes.string,
-		type: React.PropTypes.oneOf(ALERT_TYPES).isRequired,
+		children: PropTypes.node.isRequired,
+		className: PropTypes.string,
+		type: PropTypes.oneOf(ALERT_TYPES).isRequired,
 	},
 	render () {
-		var componentClass = classNames(
+		const componentClass = classNames(
 			'Alert',
 			'Alert--' + this.props.type,
 			this.props.className