Merge pull request #1814 from react-toolbox/update-v2-react16

Update v2 to React 16

components/chip/__test__/index.spec.js

@@ -17,7 +17,7 @@ describe('Chip', () => {
           <span>Test</span>
         </Chip>,
       );
-      const chipNode = wrapper.find('div').node;
+      const chipNode = wrapper.find('div').instance();
       expect(chipNode.className).toMatch(/\bavatar-class\b/);
     });
 
@@ -29,7 +29,7 @@ describe('Chip', () => {
           <span>Test</span>
         </TooltippedChip>,
       );
-      const chipNode = wrapper.find('div').node;
+      const chipNode = wrapper.find('div').instance();
       expect(chipNode.className).toMatch(/\bavatar-class\b/);
     });
   });
@@ -41,7 +41,7 @@ describe('Chip', () => {
           <span>Test</span>
         </Chip>,
       );
-      const chipNode = wrapper.find('div').node;
+      const chipNode = wrapper.find('div').instance();
       expect(chipNode.className).not.toMatch(/\bavatar-class\b/);
     });
   });

components/date_picker/Calendar.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import CssTransitionGroup from 'react-transition-group/CSSTransitionGroup';
+import TransitionGroup from 'react-transition-group/TransitionGroup';
+import CSSTransition from 'react-transition-group/CSSTransition';
 import { range, getAnimationModule } from '../utils/utils';
 import time from '../utils/time';
 import CalendarMonth from './CalendarMonth';
@@ -135,25 +136,23 @@ const factory = (IconButton) => {
         <div data-react-toolbox="calendar">
           <IconButton id="left" className={theme.prev} icon="chevron_left" onClick={this.changeViewMonth} />
           <IconButton id="right" className={theme.next} icon="chevron_right" onClick={this.changeViewMonth} />
-          <CssTransitionGroup
+          <TransitionGroup>
-            transitionName={animationModule}
+            <CSSTransition classNames={animationModule} timeout={350}>
-            transitionEnterTimeout={350}
+              <CalendarMonth
-            transitionLeaveTimeout={350}
+                enabledDates={this.props.enabledDates}
-          >
+                disabledDates={this.props.disabledDates}
-            <CalendarMonth
+                key={this.state.viewDate.getMonth()}
-              enabledDates={this.props.enabledDates}
+                locale={this.props.locale}
-              disabledDates={this.props.disabledDates}
+                maxDate={this.props.maxDate}
-              key={this.state.viewDate.getMonth()}
+                minDate={this.props.minDate}
-              locale={this.props.locale}
+                onDayClick={this.handleDayClick}
-              maxDate={this.props.maxDate}
+                selectedDate={this.props.selectedDate}
-              minDate={this.props.minDate}
+                sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek}
-              onDayClick={this.handleDayClick}
+                theme={this.props.theme}
-              selectedDate={this.props.selectedDate}
+                viewDate={this.state.viewDate}
-              sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek}
+              />
-              theme={this.props.theme}
+            </CSSTransition>
-              viewDate={this.state.viewDate}
+          </TransitionGroup>
-            />
-          </CssTransitionGroup>
         </div>
       );
     }

components/hoc/ActivableRenderer.js

@@ -28,13 +28,6 @@ const ActivableRendererFactory = (options = { delay: 500 }) =>
       clearTimeout(this.unrenderTimeout);
     }
 
-    renderAndActivate() {
-      if (this.unrenderTimeout) clearTimeout(this.unrenderTimeout);
-      this.setState({ rendered: true, active: false }, () => {
-        this.activateTimeout = setTimeout(() => this.setState({ active: true }), 20);
-      });
-    }
-
     deactivateAndUnrender() {
       this.setState({ rendered: true, active: false }, () => {
         this.unrenderTimeout = setTimeout(() => {
@@ -44,6 +37,13 @@ const ActivableRendererFactory = (options = { delay: 500 }) =>
       });
     }
 
+    renderAndActivate() {
+      if (this.unrenderTimeout) clearTimeout(this.unrenderTimeout);
+      this.setState({ rendered: true, active: false }, () => {
+        this.activateTimeout = setTimeout(() => this.setState({ active: true }), 20);
+      });
+    }
+
     render() {
       const { delay, ...others } = this.props; // eslint-disable-line no-unused-vars
       const { active, rendered } = this.state;

components/progress_bar/__test__/index.spec.js

@@ -27,25 +27,25 @@ describe('ProgressBar', () => {
   describe('#render', () => {
     it('renders the value and buffer bars when it is linear', () => {
       const wrapper = mount(<ProgressBar theme={theme} />);
-      expect(wrapper.childAt(0).props().children.length).toEqual(2);
+      expect(wrapper.childAt(0).childAt(0).props().children.length).toEqual(2);
     });
 
     it('renders the value and buffer bars when it is linear', () => {
       const wrapper = mount(<ProgressBar mode="determinate" value={30} buffer={60} theme={theme} />);
-      const buffer = wrapper.childAt(0).childAt(0);
+      const buffer = wrapper.childAt(0).childAt(0).childAt(0);
-      const value = wrapper.childAt(0).childAt(1);
+      const value = wrapper.childAt(0).childAt(0).childAt(1);
       expect(buffer.props().style.transform).toEqual(`scaleX(${0.6})`);
       expect(value.props().style.transform).toEqual(`scaleX(${0.3})`);
     });
 
     it('renders the svg circle when it is circular', () => {
       const wrapper = mount(<ProgressBar type="circular" theme={theme} />);
-      expect(wrapper.childAt(0).props().children.type).toEqual('circle');
+      expect(wrapper.childAt(0).childAt(0).props().children.type).toEqual('circle');
     });
 
     it('renders the proper circle length style when it is circular and determinate', () => {
       const wrapper = mount(<ProgressBar type="circular" mode="determinate" value={30} theme={theme} />);
-      const circle = wrapper.childAt(0).props().children;
+      const circle = wrapper.childAt(0).childAt(0).props().children;
       const strokeLength = 2 * Math.PI * circle.props.r * 0.3;
       expect(circle.props.style.strokeDasharray).toEqual(`${strokeLength}, 400`);
     });

components/slider/__tests__/index.spec.js

@@ -93,7 +93,7 @@ describe('Slider', () => {
     it('sets pressed state when knob is clicked', () => {
       const onChange = jest.fn();
       const wrapper = mount(<Slider min={-500} max={500} onChange={onChange} />);
-      const knob = wrapper.childAt(0).childAt(0);
+      const knob = wrapper.childAt(0).childAt(0).childAt(0);
       knob.simulate('mouseDown');
       expect(wrapper.state().pressed).toEqual(true);
     });
@@ -102,7 +102,7 @@ describe('Slider', () => {
       const onChange = jest.fn();
       const event = { touches: [{ pageX: 200 }] };
       const wrapper = mount(<Slider min={-500} max={500} onChange={onChange} />);
-      const knob = wrapper.childAt(0).childAt(0);
+      const knob = wrapper.childAt(0).childAt(0).childAt(0);
       knob.simulate('touchStart', event);
       expect(wrapper.state().pressed).toEqual(true);
     });
@@ -114,7 +114,7 @@ describe('Slider', () => {
       const instance = wrapper.instance();
       instance.setState({ sliderStart: 0, sliderLength: 1000 });
       instance.handleResize = (evt, callback) => { callback(); };
-      wrapper.childAt(0).simulate('mouseDown', event);
+      wrapper.childAt(0).childAt(0).simulate('mouseDown', event);
       expect(onChange).toHaveBeenCalledWith(-300);
     });
 
@@ -125,7 +125,7 @@ describe('Slider', () => {
       const instance = wrapper.instance();
       instance.setState({ sliderStart: 0, sliderLength: 1000 });
       instance.handleResize = (evt, callback) => { callback(); };
-      wrapper.childAt(0).simulate('touchStart', event);
+      wrapper.childAt(0).childAt(0).simulate('touchStart', event);
       expect(onChange).toHaveBeenCalledWith(-300);
     });
 
@@ -136,7 +136,7 @@ describe('Slider', () => {
       const instance = wrapper.instance();
       instance.setState({ sliderStart: 0, sliderLength: 1000 });
       instance.handleResize = (evt, callback) => { callback(); };
-      wrapper.childAt(0).simulate('mouseDown', event);
+      wrapper.childAt(0).childAt(0).simulate('mouseDown', event);
       expect(onChange).toHaveBeenCalledWith(90);
     });
 
@@ -154,7 +154,7 @@ describe('Slider', () => {
       const onChange = jest.fn();
       const wrapper = mount(<Slider editable value={50} onChange={onChange} />);
       wrapper.instance().setState({ sliderStart: 0, sliderLength: 1000 });
-      wrapper.childAt(0).simulate('mouseDown', { pageX: 900, pageY: 0 });
+      wrapper.childAt(0).childAt(0).simulate('mouseDown', { pageX: 900, pageY: 0 });
       expect(onChange).toHaveBeenCalled();
     });
   });

components/snackbar/Snackbar.js

@@ -19,7 +19,7 @@ const factory = (Button) => {
         PropTypes.element,
       ]),
       onClick: PropTypes.func,
-      onTimeout: PropTypes.func,
+      onTimeout: PropTypes.func, // eslint-disable-line
       theme: PropTypes.shape({
         accept: PropTypes.string,
         active: PropTypes.string,

components/tabs/TabContent.js

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { TABS } from '../identifiers';
 
-class TabContent extends Component {
+class TabContent extends Component { // eslint-disable-line react/prefer-stateless-function
   static propTypes = {
     active: PropTypes.bool,
     children: PropTypes.node,

components/tabs/__tests__/index.spec.js

@@ -24,21 +24,27 @@ describe('Tabs', () => {
 
   it('defaults to only rendering the current tab', () => {
     const wrapper = mount(<Composition />);
+
     expect(wrapper.find(TabContent).length).toEqual(1);
     expect(wrapper.find(TabContent).first().prop('tabIndex')).toEqual(0);
 
     wrapper.instance().setState({ index: 1 });
+    wrapper.update();
+
     expect(wrapper.find(TabContent).length).toEqual(1);
     expect(wrapper.find(TabContent).first().prop('tabIndex')).toEqual(1);
   });
 
   it('renders inactive tabs when hideMode is set to display', () => {
     const wrapper = mount(<Composition hideMode="display" />);
+
     expect(wrapper.find(TabContent).length).toEqual(2);
     expect(wrapper.find(TabContent).at(0).prop('hidden')).toEqual(false);
     expect(wrapper.find(TabContent).at(1).prop('hidden')).toEqual(true);
 
     wrapper.instance().setState({ index: 1 });
+    wrapper.update();
+
     expect(wrapper.find(TabContent).length).toEqual(2);
     expect(wrapper.find(TabContent).at(0).prop('hidden')).toEqual(true);
     expect(wrapper.find(TabContent).at(1).prop('hidden')).toEqual(false);

components/time_picker/Clock.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import CssTransitionGroup from 'react-transition-group/CSSTransitionGroup';
+import TransitionGroup from 'react-transition-group/TransitionGroup';
+import CSSTransition from 'react-transition-group/CSSTransition';
 import { getAnimationModule } from '../utils/utils';
 import time from '../utils/time';
 import Hours from './ClockHours';
@@ -116,20 +117,18 @@ class Clock extends Component {
           style={{ height: this.state.radius * 2 }}
           ref={(node) => { this.placeholderNode = node; }}
         >
-          <CssTransitionGroup
+          <TransitionGroup>
-            transitionName={animationModule}
+            <CSSTransition classNames={animationModule} timeout={500}>
-            transitionEnterTimeout={500}
+              <div
-            transitionLeaveTimeout={500}
+                key={this.props.display}
-          >
+                className={theme.clockWrapper}
-            <div
+                style={{ height: this.state.radius * 2 }}
-              key={this.props.display}
+              >
-              className={theme.clockWrapper}
+                {this.props.display === 'hours' ? this.renderHours() : null}
-              style={{ height: this.state.radius * 2 }}
+                {this.props.display === 'minutes' ? this.renderMinutes() : null}
-            >
+              </div>
-              {this.props.display === 'hours' ? this.renderHours() : null}
+            </CSSTransition>
-              {this.props.display === 'minutes' ? this.renderMinutes() : null}
+          </TransitionGroup>
-            </div>
-          </CssTransitionGroup>
         </div>
       </div>
     );

components/utils/testing.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import TestUtils from 'react-addons-test-utils';
+import TestUtils from 'react-dom/test-utils';
 
 export default {
   renderComponent(Component, props = {}, state = {}) {

jest.polyfills.js

@@ -0,0 +1,3 @@
+global.requestAnimationFrame = function (callback) {
+  setTimeout(callback, 0);
+};

jest.setup.js

@@ -1 +1,7 @@
-Object.defineProperty(window, 'requestAnimationFrame', { value: fn => fn() });
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({
+  adapter: new Adapter(),
+  disableLifecycleMethods: true,
+});

package.json

@@ -26,38 +26,42 @@
     "toolkit"
   ],
   "dependencies": {
+    "@types/prop-types": "^15.5.2",
     "classnames": "^2.2.5",
     "core-js": "^2.4.0",
     "ramda": "^0.23.0",
     "react-css-themr": "^2.1.2",
     "react-style-proptype": "^3.0.0",
-    "react-transition-group": "^1.1.3"
+    "react-transition-group": "^2.2.1"
   },
   "devDependencies": {
     "@types/node": "^7.0.4",
-    "@types/react": "^15.0.0",
+    "@types/react": "^16.0.7",
-    "babel-cli": "^6.24.1",
+    "ajv": "^6.1.1",
-    "babel-core": "^6.24.1",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
     "babel-eslint": "^7.2.3",
-    "babel-loader": "^7.0.0",
+    "babel-loader": "^7.1.2",
     "babel-plugin-react-transform": "^2.0.2",
     "babel-polyfill": "^6.23.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
+    "caniuse-db": "^1.0.30000652",
     "cpx": "^1.5.0",
     "cross-env": "^5.0.0",
     "css-loader": "^0.28.2",
-    "enzyme": "^2.8.2",
+    "enzyme": "^3.3.0",
-    "enzyme-to-json": "^1.5.1",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-to-json": "^3.0.1",
     "eslint": "^3.19.0",
     "eslint-config-airbnb": "^15.0.1",
-    "eslint-import-resolver-webpack": "^0.8.1",
+    "eslint-import-resolver-webpack": "^0.8.3",
-    "eslint-plugin-babel": "^4.1.1",
+    "eslint-plugin-babel": "^4.1.2",
-    "eslint-plugin-compat": "^1.0.2",
+    "eslint-plugin-compat": "^1.0.4",
-    "eslint-plugin-import": "^2.3.0",
+    "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-jsx-a11y": "^5.0.3",
-    "eslint-plugin-react": "^7.0.1",
+    "eslint-plugin-react": "^7.4.0",
     "express": "^4.15.3",
     "extract-text-webpack-plugin": "^2.1.0",
     "git-dirty": "^1.0.2",
@@ -79,21 +83,20 @@
     "postcss-nesting": "^4.0.1",
     "postcss-reporter": "^3.0.0",
     "pre-commit": "^1.2.2",
-    "prop-types": "^15.5.10",
+    "prop-types": "^15.6.0",
-    "react": "^15.5.0",
+    "react": "^16.2.0",
-    "react-addons-test-utils": "^15.5.0",
+    "react-dom": "^16.2.0",
-    "react-dom": "^15.5.0",
+    "react-test-renderer": "^16.2.0",
-    "react-test-renderer": "^15.5.0",
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.4",
-    "redbox-react": "^1.3.6",
+    "redbox-react": "^1.5.0",
     "rimraf": "^2.6.1",
     "sinon": "^2.0.0-pre.2",
     "style-loader": "^0.18.1",
     "stylelint": "^7.10.1",
     "stylelint-config-standard": "^16.0.0",
     "stylelint-order": "^0.4.4",
-    "typescript": "^2.1.5",
+    "typescript": "^2.3.0",
     "webpack": "^2.6.0",
     "webpack-dev-middleware": "^1.10.2",
     "webpack-hot-middleware": "^2.18.0"
@@ -132,6 +135,7 @@
       "<rootDir>/components"
     ],
     "setupFiles": [
+      "./jest.polyfills.js",
       "./jest.setup.js"
     ],
     "snapshotSerializers": [
@@ -140,10 +144,10 @@
   },
   "peerDependencies": {
     "classnames": "^2.2.0",
-    "prop-types": "^15.5.7",
+    "prop-types": "^15.6.0",
-    "react": "^15.5.0",
+    "react": "^15.5.0 || ^16.0.0",
-    "react-dom": "^15.5.0",
+    "react-dom": "^15.5.0 || ^16.0.0",
-    "react-transition-group": "^1.1.3"
+    "react-transition-group": "^2.2.0"
   },
   "pre-commit": "lint:staged"
 }

spec/ts/dialog.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import * as PropTypes from 'prop-types';
 import Button from '../../components/button';
 import Dialog from '../../components/dialog';
 import Dropdown from '../../components/dropdown';
@@ -64,11 +65,11 @@ class DialogTest extends React.Component<any, any> {
 
 class ContextComponent extends React.Component<any, any> {
   static propTypes = {
-    children: React.PropTypes.any,
+    children: PropTypes.any,
   };
 
   static childContextTypes = {
-    message: React.PropTypes.string,
+    message: PropTypes.string,
   }
 
   getChildContext() {
@@ -84,7 +85,7 @@ class ContextComponent extends React.Component<any, any> {
 
 class DialogChild extends React.Component<any, any> {
   static contextTypes = {
-    message: React.PropTypes.string,
+    message: PropTypes.string,
   }
 
   render() {

spec/ts/pickers.tsx

@@ -3,8 +3,8 @@ import DatePicker from '../../components/date_picker';
 import TimePicker from '../../components/time_picker';
 
 const datetime = new Date(2015, 10, 16);
-const min_datetime = new Date(new Date(datetime).setDate(8));
+const min_datetime = new Date(new Date(datetime.toString()).setDate(8));
-const max_datetime = new Date(new Date(datetime).setDate(24));
+const max_datetime = new Date(new Date(datetime.toString()).setDate(24));
 datetime.setHours(17);
 datetime.setMinutes(28);
 const today = new Date();