chore(build): upgrade to babel 7

Unified browserslistrc with react-grid-layout

Author: STRML

.babelrc

@@ -1,10 +1,16 @@
 {
   "presets": [
-    ["es2015", {"loose": true}],
-    "react"
+    [
+      "@babel/preset-env",
+      {
+        "loose": true
+      }
+    ],
+    "@babel/preset-react",
+    "@babel/preset-flow"
   ],
   "plugins": [
-    "transform-class-properties",
-    "transform-object-rest-spread",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-object-rest-spread"
   ]
 }

.browserslistrc

@@ -0,0 +1,3 @@
+> 0.25%
+ie 11
+not dead

.flowconfig

@@ -1,9 +1,8 @@
 [version]
-^0.98.0
+^0.110.0
 
 [ignore]
-.*/node_modules/babel.*
-.*/node_modules/fbjs/.*
+.*/node_modules/@babel.*
 .*/node_modules/express/.*
 .*/node_modules/serve-index/.*
 <PROJECT_ROOT>/build/.*

lib/Resizable.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {DraggableCore} from 'react-draggable';
-import cloneElement from './cloneElement';
+import {cloneElement} from './utils';
 import type {Element as ReactElement, Node as ReactNode} from 'react';
 
 type Axis = 'both' | 'x' | 'y' | 'none';

lib/cloneElement.js renamed to lib/utils.js

@@ -3,12 +3,12 @@ import React from 'react';
 import type {Element as ReactElement} from 'react';
 
 // React.addons.cloneWithProps look-alike that merges style & className.
-module.exports = function cloneElement(element: ReactElement<any>, props: Object): ReactElement<any> {
+export function cloneElement(element: ReactElement<any>, props: Object): ReactElement<any> {
   if (props.style && element.props.style) {
     props.style = {...element.props.style, ...props.style};
   }
   if (props.className && element.props.className) {
     props.className = `${element.props.className} ${props.className}`;
   }
   return React.cloneElement(element, props);
-};
+}

package.json

@@ -33,30 +33,32 @@
   },
   "homepage": "https://github.com/STRML/react-resizable",
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^10.0.1",
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "cross-env": "^5.0.5",
-    "css-loader": "^2.1.1",
-    "eslint": "^5.16.0",
-    "eslint-plugin-react": "^7.4.0",
-    "flow-bin": "^0.98.1",
-    "lodash": "^4.3.0",
+    "cross-env": "^6.0.3",
+    "css-loader": "^3.2.0",
+    "eslint": "^6.5.1",
+    "eslint-plugin-react": "^7.16.0",
+    "flow-bin": "^0.110.0",
+    "lodash": "^4.17.15",
     "pre-commit": "^1.1.2",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "style-loader": "^0.23.1",
-    "webpack": "^4.31.0",
-    "webpack-dev-server": "^3.3.1"
+    "react": "^16.10.2",
+    "react-dom": "^16.10.2",
+    "style-loader": "^1.0.0",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.9",
+    "webpack-dev-server": "^3.8.2",
+    "@babel/preset-flow": "^7.0.0"
   },
   "dependencies": {
     "prop-types": "15.x",
-    "react-draggable": "^3.0.3"
+    "react-draggable": "^4.0.3"
   },
   "peerDependencies": {
     "react": "0.14.x || 15.x || 16.x",

test/TestLayout.js

@@ -26,7 +26,7 @@ export default class TestLayout extends React.Component<{}, {width: number, heig
             </div>
           </Resizable>
           <ResizableBox className="box" width={200} height={200}>
-            <span className="text">{"<ResizableBox>, same as above."}</span>
+            <span className="text">{"<ResizableBox>"}</span>
           </ResizableBox>
           <ResizableBox
             className="custom-box box"