Flow fixes, dep rearranging

Author: STRML

lib/Resizable.jsx

@@ -1,9 +1,20 @@
 import {default as React, PropTypes} from 'react';
 import {DraggableCore} from 'react-draggable';
-import assign from 'object-assign';
 import cloneElement from './cloneElement';
 
+type Position = {
+  deltaX: number,
+  deltaY: number
+};
+type State = {
+  aspectRatio: number,
+  resizing: boolean,
+  height: number,
+  width: number,
+};
+
 export default class Resizable extends React.Component {
+
   static propTypes = {
     //
     // Required Props
@@ -40,8 +51,8 @@ export default class Resizable extends React.Component {
     handleSize: [20, 20]
   };
 
-  state = {
     bounds: this.constraintsToBounds(),
+  state: State = {
     width: this.props.width,
     height: this.props.height
   };
@@ -74,8 +85,8 @@ export default class Resizable extends React.Component {
    * @param  {String} handlerName Handler name to wrap.
    * @return {Function}           Handler function.
    */
-  resizeHandler(handlerName: string) {
-    return (e, {node, position}) => {
+  resizeHandler(handlerName: string): Function {
+    return (e, {node, position}: {node: HTMLElement, position: Position}) => {
       let width = this.state.width + position.deltaX, height = this.state.height + position.deltaY;
       this.props[handlerName] && this.props[handlerName](e, {node, size: {width, height}});
 
@@ -89,17 +100,18 @@ export default class Resizable extends React.Component {
     };
   }
 
-  render() {
+  render(): ReactElement {
     let p = this.props;
     let className = p.className ?
       `${p.className} react-resizable`:
-      'react-resizable'
+      'react-resizable';
 
     // What we're doing here is getting the child of this element, and cloning it with this element's props.
     // We are then defining its children as:
     // Its original children (resizable's child's children), and
     // A draggable handle.
-    return cloneElement(p.children, assign({}, p, {
+    return cloneElement(p.children, {
+      ...p,
       className,
       children: [
         p.children.props.children,
@@ -114,6 +126,6 @@ export default class Resizable extends React.Component {
           <span className="react-resizable-handle" />
         </DraggableCore>
       ]
-    }));
+    });
   }
 }

lib/ResizableBox.jsx

@@ -1,6 +1,7 @@
 import {default as React, PropTypes} from 'react';
 import Resizable from './Resizable';
 
+type State = {width: number, height: number, aspectRatio: number};
 type Size = {width: number, height: number};
 type ResizeData = {element: Element, size: Size};
 
@@ -19,15 +20,13 @@ export default class ResizableBox extends React.Component {
     handleSize: [20,20]
   };
 
-  state = {
+  state: State = {
     width: this.props.width,
     height: this.props.height,
     aspectRatio: this.props.width / this.props.height
   };
 
-  // TODO data is ResizeData type, but that doesn't work in babel-typecheck pre-babel6
-  onResize = (event: Event, data: Object) => {
-    let {element, size} = data;
+  onResize = (event, {element, size}) => {
     let {width, height} = size;
     let widthChanged = width !== this.state.width, heightChanged = height !== this.state.height;
     if (!widthChanged && !heightChanged) return;
@@ -60,8 +59,9 @@ export default class ResizableBox extends React.Component {
     }
     return [width, height];
   };
+  onResize: (event: Event, data: ResizeData) => void;
 
-  render() {
+  render(): ReactElement {
     // Basic wrapper around a Resizable instance.
     // If you use Resizable directly, you are responsible for updating the component
     // with a new width and height.

lib/cloneElement.js

@@ -1,13 +1,13 @@
-import assign from 'object-assign';
+// @flow
 import React from 'react';
 
 // React.addons.cloneWithProps look-alike that merges style & className.
-module.exports = function cloneElement(element: React.Component, props: Object) {
+module.exports = function cloneElement(element: ReactElement, props: Object): ReactElement {
   if (props.style && element.props.style) {
-    props.style = assign({}, element.props.style, props.style);
+    props.style = {...element.props.style, ...props.style};
   }
   if (props.className && element.props.className) {
-    props.className = element.props.className + ' ' + props.className;
+    props.className = `${element.props.className} ${props.className}`;
   }
   return React.cloneElement(element, props);
 };

package.json

@@ -41,16 +41,19 @@
     "eslint-plugin-react": "^3.16.1",
     "lodash": "^4.3.0",
     "pre-commit": "^1.1.2",
-    "react": "^0.14.7",
     "style-loader": "^0.13.0",
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7",
     "webpack": "^1.12.13",
     "webpack-dev-server": "^1.14.1"
   },
   "dependencies": {
-    "react-dom": "^0.14.7",
-    "object-assign": "^4.0.1",
     "react-draggable": "^1.2.0"
   },
+  "peerDependencies": {
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7"
+  },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },