Merge pull request #73 from notion/upgradeReact-15

Migrate to React 15.5
brijeshb42 · May 3, 2017 · fd3008c · fd3008c
2 parents f715d3b + fd6cff6
commit fd3008c
Show file tree

Hide file tree

Showing 15 changed files with 60 additions and 47 deletions.
diff --git a/package.json b/package.json
@@ -29,7 +29,8 @@
   "dependencies": {
     "draft-js": "^0.10.0",
     "immutable": "^3.7.6",
-    "react-addons-css-transition-group": "^15.0.0"
+    "prop-types": "^15.5.8",
+    "react-transition-group": "^1.1.2"
   },
   "peerDependencies": {
     "react": "^15.0.0",
@@ -48,7 +49,7 @@
     "babel-preset-react": "^6.5.0",
     "chai": "^3.5.0",
     "css-loader": "^0.23.1",
-    "enzyme": "^2.5.1",
+    "enzyme": "^2.8.2",
     "eslint": "^3.3.1",
     "eslint-config-airbnb": "^10.0.1",
     "eslint-loader": "^1.5.0",
@@ -64,7 +65,6 @@
     "mocha": "^2.4.5",
     "mocha-loader": "^0.7.1",
     "node-sass": "^3.4.2",
-    "react-addons-test-utils": "^15.0.0",
     "react-hot-loader": "^1.3.0",
     "sass-loader": "^3.2.0",
     "style-loader": "^0.13.1",

diff --git a/src/components/addbutton.js b/src/components/addbutton.js
@@ -1,7 +1,8 @@
+import PropTypes from 'prop-types';
 // import './addbutton.scss';
 
-import React, { PropTypes } from 'react';
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+import React from 'react';
+import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 
 import { getSelectedBlockNode } from '../util';
 
@@ -150,7 +151,7 @@ export default class AddButton extends React.Component {
             <i className="fa fa-plus-circle fa-lg" />
           </button>
           {this.state.isOpen ? (
-            <ReactCSSTransitionGroup
+            <CSSTransitionGroup
               transitionName="md-example"
               transitionEnterTimeout={200}
               transitionLeaveTimeout={100}
@@ -168,7 +169,7 @@ export default class AddButton extends React.Component {
                   />
                 );
               })}
-            </ReactCSSTransitionGroup>
+            </CSSTransitionGroup>
           ) : null}
         </div>
       );

diff --git a/src/components/blocks/atomic.js b/src/components/blocks/atomic.js
@@ -1,6 +1,7 @@
+import PropTypes from 'prop-types';
 // import './atomic.scss';
 
-import React, { PropTypes } from 'react';
+import React from 'react';
 
 const AtomicBlock = (props) => {
   const content = props.getEditorState().getCurrentContent();

diff --git a/src/components/blocks/image.js b/src/components/blocks/image.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 import { EditorBlock } from 'draft-js';
 

diff --git a/src/components/blocks/todo.js b/src/components/blocks/todo.js
@@ -1,6 +1,7 @@
+import PropTypes from 'prop-types';
 // import './todo.scss';
 
-import React, { PropTypes } from 'react';
+import React from 'react';
 import { EditorBlock } from 'draft-js';
 
 import { updateDataOfBlock } from '../../model/';

diff --git a/src/components/blocktoolbar.js b/src/components/blocktoolbar.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { RichUtils } from 'draft-js';
 
 import StyleButton from './stylebutton';

diff --git a/src/components/entities/link.js b/src/components/entities/link.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 import { Entity } from '../../util/constants';
 

diff --git a/src/components/inlinetoolbar.js b/src/components/inlinetoolbar.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 import StyleButton from './stylebutton';
 

diff --git a/src/components/sides/break.js b/src/components/sides/break.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 import { addNewBlock } from '../../model';
 import { Block } from '../../util/constants';

diff --git a/src/components/sides/image.js b/src/components/sides/image.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 import { addNewBlock } from '../../model';
 import { Block } from '../../util/constants';

diff --git a/src/components/stylebutton.js b/src/components/stylebutton.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 import { HYPERLINK } from '../util/constants.js';
 

diff --git a/src/components/toolbar.js b/src/components/toolbar.js
@@ -1,6 +1,7 @@
+import PropTypes from 'prop-types';
 // import './toolbar.scss';
 
-import React, { PropTypes } from 'react';
+import React from 'react';
 import ReactDOM from 'react-dom';
 
 import BlockToolbar from './blocktoolbar';
@@ -330,15 +331,15 @@ export const INLINE_BUTTONS = [
     description: 'Add a link',
   },
 ];
-  // {
-  //   label: 'S',
-  //   style: 'STRIKETHROUGH',
-  //   icon: 'strikethrough',
-  //   description: 'Strikethrough',
-  // },
-  // {
-  //   label: 'Code',
-  //   style: 'CODE',
-  //   description: 'Inline Code',
-  // },
+// {
+//   label: 'S',
+//   style: 'STRIKETHROUGH',
+//   icon: 'strikethrough',
+//   description: 'Strikethrough',
+// },
+// {
+//   label: 'Code',
+//   style: 'CODE',
+//   description: 'Inline Code',
+// },
 
diff --git a/src/editor.js b/src/editor.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import {
   Editor,
   EditorState,
@@ -43,16 +44,16 @@ class MediumDraftEditor extends React.Component {
     stringToTypeMap: PropTypes.object,
     blockRenderMap: PropTypes.object,
     blockButtons: PropTypes.arrayOf(PropTypes.shape({
-      label: React.PropTypes.string.isRequired,
-      style: React.PropTypes.string.isRequired,
-      icon: React.PropTypes.string,
-      description: React.PropTypes.string,
+      label: PropTypes.string.isRequired,
+      style: PropTypes.string.isRequired,
+      icon: PropTypes.string,
+      description: PropTypes.string,
     })),
     inlineButtons: PropTypes.arrayOf(PropTypes.shape({
-      label: React.PropTypes.string.isRequired,
-      style: React.PropTypes.string.isRequired,
-      icon: React.PropTypes.string,
-      description: React.PropTypes.string,
+      label: PropTypes.string.isRequired,
+      style: PropTypes.string.isRequired,
+      icon: PropTypes.string,
+      description: PropTypes.string,
     })),
     placeholder: PropTypes.string,
     continuousBlocks: PropTypes.arrayOf(PropTypes.string),

diff --git a/src/example.js b/src/example.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 /* eslint-disable */
 
 import React from 'react';
@@ -157,9 +158,9 @@ class SeparatorSideButton extends React.Component {
 class EmbedSideButton extends React.Component {
 
   static propTypes = {
-    setEditorState: React.PropTypes.func,
-    getEditorState: React.PropTypes.func,
-    close: React.PropTypes.func,
+    setEditorState: PropTypes.func,
+    getEditorState: PropTypes.func,
+    close: PropTypes.func,
   };
 
   constructor(props) {
@@ -211,7 +212,7 @@ class EmbedSideButton extends React.Component {
 class AtomicEmbedComponent extends React.Component {
 
   static propTypes = {
-    data: React.PropTypes.object.isRequired,
+    data: PropTypes.object.isRequired,
   }
 
   constructor(props) {
@@ -520,7 +521,7 @@ class App extends React.Component {
       </div>
     );
   }
-};
+}
 
 if (!__PROD__) {
   window.ga = function() {

diff --git a/webpack.config.js b/webpack.config.js
@@ -188,11 +188,11 @@ if (isProd) {
       }
     },
     {
-      'react-addons-css-transition-group': {
-        root: ['React','addons','CSSTransitionGroup'],
-        commonjs2: 'react-addons-css-transition-group',
-        commonjs: 'react-addons-css-transition-group',
-        amd: 'react-addons-css-transition-group',
+      'react-transition-group/CSSTransitionGroup': {
+        root: ['React', 'addons', 'CSSTransitionGroup'],
+        commonjs2: 'react-transition-group/CSSTransitionGroup',
+        commonjs: 'react-transition-group/CSSTransitionGroup',
+        amd: 'react-transition-group/CSSTransitionGroup',
       }
     },
     {