fix(React): Don't use import * to avoid warnings

See facebook/react#10583

Fixes #584

lib/ReactGridLayout.jsx

@@ -1,11 +1,12 @@
 // @flow
-import * as React from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash.isequal';
 import classNames from 'classnames';
 import {autoBindHandlers, bottom, childrenEqual, cloneLayoutItem, compact, getLayoutItem, moveElement,
   synchronizeLayoutWithChildren, validateLayout} from './utils';
 import GridItem from './GridItem';
+import type {ChildrenArray as ReactChildrenArray, Element as ReactElement} from 'react';
 const noop = function() {};
 
 // Types
@@ -45,7 +46,7 @@ export type Props = {
   onResize: EventCallback,
   onResizeStart: EventCallback,
   onResizeStop: EventCallback,
-  children: React.ChildrenArray<React.Element<any>>,
+  children: ReactChildrenArray<ReactElement<any>>,
 };
 // End Types
 
@@ -380,7 +381,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
    * Create a placeholder object.
    * @return {Element} Placeholder div.
    */
-  placeholder(): ?React.Element<any> {
+  placeholder(): ?ReactElement<any> {
     const {activeDrag} = this.state;
     if (!activeDrag) return null;
     const {width, cols, margin, containerPadding, rowHeight, maxRows, useCSSTransforms} = this.props;
@@ -413,7 +414,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
    * @param  {Element} child React element.
    * @return {Element}       Element wrapped in draggable and properly placed.
    */
-  processGridItem(child: React.Element<any>): ?React.Element<any> {
+  processGridItem(child: ReactElement<any>): ?ReactElement<any> {
     if (!child.key) return;
     const l = getLayoutItem(this.state.layout, String(child.key));
     if (!l) return null;

lib/utils.js

@@ -1,6 +1,7 @@
 // @flow
 import isEqual from 'lodash.isequal';
-import * as React from 'react';
+import React from 'react';
+import type {ChildrenArray as ReactChildrenArray, Element as ReactElement} from 'react';
 export type LayoutItem = {
   w: number, h: number, x: number, y: number, i: string,
   minW?: number, minH?: number, maxW?: number, maxH?: number,
@@ -21,8 +22,8 @@ export type Size = {width: number, height: number};
 export type GridDragEvent = {e: Event, node: HTMLElement, newPosition: PartialPosition};
 export type GridResizeEvent = {e: Event, node: HTMLElement, size: Size};
 
-type REl = React.Element<any>;
-export type ReactChildren = React.ChildrenArray<REl>;
+type REl = ReactElement<any>;
+export type ReactChildren = ReactChildrenArray<REl>;
 
 // All callbacks are of the signature (layout, oldItem, newItem, placeholder, e).
 export type EventCallback =
@@ -373,7 +374,7 @@ export function synchronizeLayoutWithChildren(initialLayout: Layout, children: R
 
   // Generate one layout item per child.
   let layout: Layout = [];
-  React.Children.forEach(children, (child: React.Element<any>, i: number) => {
+  React.Children.forEach(children, (child: ReactElement<any>, i: number) => {
     // Don't overwrite if it already exists.
     const exists = getLayoutItem(initialLayout, String(child.key));
     if (exists) {

package.json

@@ -10,7 +10,8 @@
     "build-example": "make build-example",
     "dev": "make dev",
     "prepublishOnly": "make build",
-    "validate": "npm ls"
+    "validate": "npm ls",
+    "flow": "flow"
   },
   "repository": {
     "type": "git",
@@ -83,4 +84,4 @@
   "pre-commit": [
     "lint"
   ]
-}
+}