chore(pkg): Upgrade flow, react-draggable

Author: STRML

.eslintrc

@@ -44,8 +44,7 @@
   },
   "globals": {
     // For Flow
-    "ReactElement",
-    "ReactClass",
-    "$PropertyType"
+    "$PropertyType",
+    "$Exact"
   }
 }

.flowconfig

@@ -1,11 +1,9 @@
 [version]
-0.44.1
+0.53.1
 
 [ignore]
-.*/node_modules/react/.*
-.*/node_modules/babel.*
-.*/node_modules/fbjs/.*
 .*test
+/build
 
 [include]
 ./lib
@@ -20,5 +18,5 @@ suppress_comment=\\(.\\|\n\\)*\\s*\\$FlowBug.*
 suppress_comment=\\(.\\|\n\\)*\\s*\\$FlowIgnore.*
 suppress_comment=\\(.\\|\n\\)*\\s*\\$FlowNewLine.*
 suppress_comment=\\(.\\|\n\\)*\\s*\\$FlowIssue
-esproposal.class_instance_fields=ignore
-esproposal.class_static_fields=ignore
+esproposal.class_instance_fields=enable
+esproposal.class_static_fields=enable

dist/react-grid-layout.min.js

@@ -1,23 +1,65 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import {DraggableCore} from 'react-draggable';
 import {Resizable} from 'react-resizable';
 import {perc, setTopLeft, setTransform} from './utils';
 import classNames from 'classnames';
 
-import type {DragCallbackData, Position} from './utils';
+import type {ReactDraggableCallbackData, GridDragEvent, GridResizeEvent, Position, Size} from './utils';
+
+type PartialPosition = {top: number, left: number};
+type GridItemCallback<Data: GridDragEvent | GridResizeEvent> = (i: string, w: number, h: number, Data) => void;
 
 type State = {
   resizing: ?{width: number, height: number},
   dragging: ?{top: number, left: number},
   className: string
 };
 
+type Props = {
+  children: React.Element<any>,
+  cols: number,
+  containerWidth: number,
+  margin: [number, number],
+  containerPadding: [number, number],
+  rowHeight: number,
+  maxRows: number,
+  isDraggable: boolean,
+  isResizable: boolean,
+  static?: boolean,
+  useCSSTransforms?: boolean,
+  usePercentages?: boolean,
+
+  className: string,
+  style?: Object,
+  // Draggability
+  cancel: string,
+  handle: string,
+
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+
+  minW: number,
+  maxW: number,
+  minH: number,
+  maxH: number,
+  i: string,
+
+  onDrag?: GridItemCallback<GridDragEvent>,
+  onDragStart?: GridItemCallback<GridDragEvent>,
+  onDragStop?: GridItemCallback<GridDragEvent>,
+  onResize?: GridItemCallback<GridResizeEvent>,
+  onResizeStart?: GridItemCallback<GridResizeEvent>,
+  onResizeStop?: GridItemCallback<GridResizeEvent>,
+};
+
 /**
  * An individual item within a ReactGridLayout.
  */
-export default class GridItem extends React.Component {
+export default class GridItem extends React.Component<Props, State> {
 
   static propTypes = {
     // Children must be only a single element
@@ -92,10 +134,11 @@ export default class GridItem extends React.Component {
   static defaultProps = {
     className: '',
     cancel: '',
+    handle: '',
     minH: 1,
     minW: 1,
     maxH: Infinity,
-    maxW: Infinity
+    maxW: Infinity,
   };
 
   state: State = {
@@ -285,10 +328,11 @@ export default class GridItem extends React.Component {
    * @return {Function}           Handler function.
    */
   onDragHandler(handlerName:string) {
-    return (e:Event, {node, deltaX, deltaY}: DragCallbackData) => {
-      if (!this.props[handlerName]) return;
+    return (e:Event, {node, deltaX, deltaY}: ReactDraggableCallbackData) => {
+      const handler = this.props[handlerName];
+      if (!handler) return;
 
-      const newPosition: {top: number, left: number} = {top: 0, left: 0};
+      const newPosition: PartialPosition = {top: 0, left: 0};
 
       // Get new XY
       switch (handlerName) {
@@ -319,7 +363,7 @@ export default class GridItem extends React.Component {
 
       const {x, y} = this.calcXY(newPosition.top, newPosition.left);
 
-      this.props[handlerName](this.props.i, x, y, {e, node, newPosition});
+      handler.call(this, this.props.i, x, y, {e, node, newPosition});
     };
   }
 
@@ -333,7 +377,8 @@ export default class GridItem extends React.Component {
    */
   onResizeHandler(handlerName: string) {
     return (e:Event, {node, size}: {node: HTMLElement, size: Position}) => {
-      if (!this.props[handlerName]) return;
+      const handler = this.props[handlerName];
+      if (!handler) return;
       const {cols, x, i, maxW, minW, maxH, minH} = this.props;
 
       // Get new XY
@@ -350,11 +395,11 @@ export default class GridItem extends React.Component {
 
       this.setState({resizing: handlerName === 'onResizeStop' ? null : size});
 
-      this.props[handlerName](i, w, h, {e, node, size});
+      handler.call(this, i, w, h, {e, node, size});
     };
   }
 
-  render(): React.Element<any> {
+  render(): React.Node {
     const {x, y, w, h, isDraggable, isResizable, useCSSTransforms} = this.props;
 
     const pos = this.calcPosition(x, y, w, h, this.state);

lib/GridItem.jsx

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash.isequal';
 import classNames from 'classnames';
@@ -9,7 +9,7 @@ import GridItem from './GridItem';
 const noop = function() {};
 
 // Types
-import type {ResizeEvent, DragEvent, Layout, LayoutItem} from './utils';
+import type {EventCallback, GridResizeEvent, GridDragEvent, Layout, LayoutItem} from './utils';
 type State = {
   activeDrag: ?LayoutItem,
   layout: Layout,
@@ -18,13 +18,42 @@ type State = {
   oldLayout: ?Layout,
   oldResizeItem: ?LayoutItem
 };
+
+export type Props = {
+  className: string,
+  style: Object,
+  width: number,
+  autoSize: boolean,
+  cols: number,
+  draggableCancel: string,
+  draggableHandle: string,
+  verticalCompact: boolean,
+  layout: Layout,
+  margin: [number, number],
+  containerPadding: [number, number],
+  rowHeight: number,
+  maxRows: number,
+  isDraggable: boolean,
+  isResizable: boolean,
+  useCSSTransforms: boolean,
+
+  // Callbacks
+  onLayoutChange: (Layout) => void,
+  onDrag: EventCallback,
+  onDragStart: EventCallback,
+  onDragStop: EventCallback,
+  onResize: EventCallback,
+  onResizeStart: EventCallback,
+  onResizeStop: EventCallback,
+  children: React.ChildrenArray<React.Element<any>>,
+};
 // End Types
 
 /**
  * A reactive, fluid grid layout with draggable, resizable components.
  */
 
-export default class ReactGridLayout extends React.Component {
+export default class ReactGridLayout extends React.Component<Props, State> {
   // TODO publish internal ReactClass displayName transform
   static displayName = "ReactGridLayout";
 
@@ -94,7 +123,7 @@ export default class ReactGridLayout extends React.Component {
     // Callback so you can save the layout. Calls after each drag & resize stops.
     onLayoutChange: PropTypes.func,
 
-    // Calls when drag starts. Callback is of the signature (layout, oldItem, newItem, placeholder, e).
+    // Calls when drag starts. Callback is of the signature (layout, oldItem, newItem, placeholder, e, ?node).
     // All callbacks below have the same signature. 'start' and 'stop' callbacks omit the 'placeholder'.
     onDragStart: PropTypes.func,
     // Calls on each drag movement.
@@ -158,7 +187,7 @@ export default class ReactGridLayout extends React.Component {
     oldResizeItem: null,
   };
 
-  constructor(props: $PropertyType<ReactGridLayout, 'props'>, context: any): void {
+  constructor(props: Props, context: any): void {
     super(props, context);
     autoBindHandlers(this, ['onDragStart', 'onDrag', 'onDragStop', 'onResizeStart', 'onResize', 'onResizeStop']);
   }
@@ -170,7 +199,7 @@ export default class ReactGridLayout extends React.Component {
     this.onLayoutMaybeChanged(this.state.layout, this.props.layout);
   }
 
-  componentWillReceiveProps(nextProps: $PropertyType<ReactGridLayout, 'props'>) {
+  componentWillReceiveProps(nextProps: Props) {
     let newLayoutBase;
     // Allow parent to set layout directly.
     if (!isEqual(nextProps.layout, this.props.layout)) {
@@ -213,7 +242,7 @@ export default class ReactGridLayout extends React.Component {
    * @param {Event} e The mousedown event
    * @param {Element} node The current dragging DOM element
    */
-  onDragStart(i:string, x:number, y:number, {e, node}: DragEvent) {
+  onDragStart(i:string, x:number, y:number, {e, node}: GridDragEvent) {
     const {layout} = this.state;
     var l = getLayoutItem(layout, i);
     if (!l) return;
@@ -231,7 +260,7 @@ export default class ReactGridLayout extends React.Component {
    * @param {Event} e The mousedown event
    * @param {Element} node The current dragging DOM element
    */
-  onDrag(i:string, x:number, y:number, {e, node}: DragEvent) {
+  onDrag(i:string, x:number, y:number, {e, node}: GridDragEvent) {
     const {oldDragItem} = this.state;
     let {layout} = this.state;
     var l = getLayoutItem(layout, i);
@@ -261,7 +290,7 @@ export default class ReactGridLayout extends React.Component {
    * @param {Event} e The mousedown event
    * @param {Element} node The current dragging DOM element
    */
-  onDragStop(i:string, x:number, y:number, {e, node}: DragEvent) {
+  onDragStop(i:string, x:number, y:number, {e, node}: GridDragEvent) {
     const {oldDragItem} = this.state;
     let {layout} = this.state;
     const l = getLayoutItem(layout, i);
@@ -292,7 +321,7 @@ export default class ReactGridLayout extends React.Component {
     }
   }
 
-  onResizeStart(i:string, w:number, h:number, {e, node}: ResizeEvent) {
+  onResizeStart(i:string, w:number, h:number, {e, node}: GridResizeEvent) {
     const {layout} = this.state;
     var l = getLayoutItem(layout, i);
     if (!l) return;
@@ -305,7 +334,7 @@ export default class ReactGridLayout extends React.Component {
     this.props.onResizeStart(layout, l, l, null, e, node);
   }
 
-  onResize(i:string, w:number, h:number, {e, node}: ResizeEvent) {
+  onResize(i:string, w:number, h:number, {e, node}: GridResizeEvent) {
     const {layout, oldResizeItem} = this.state;
     var l = getLayoutItem(layout, i);
     if (!l) return;
@@ -328,7 +357,7 @@ export default class ReactGridLayout extends React.Component {
     });
   }
 
-  onResizeStop(i:string, w:number, h:number, {e, node}: ResizeEvent) {
+  onResizeStop(i:string, w:number, h:number, {e, node}: GridResizeEvent) {
     const {layout, oldResizeItem} = this.state;
     var l = getLayoutItem(layout, i);
 
@@ -386,7 +415,7 @@ export default class ReactGridLayout extends React.Component {
    */
   processGridItem(child: React.Element<any>): ?React.Element<any> {
     if (!child.key) return;
-    const l = getLayoutItem(this.state.layout, child.key);
+    const l = getLayoutItem(this.state.layout, String(child.key));
     if (!l) return null;
     const {width, cols, margin, containerPadding, rowHeight,
            maxRows, isDraggable, isResizable, useCSSTransforms,
@@ -444,7 +473,10 @@ export default class ReactGridLayout extends React.Component {
 
     return (
       <div className={classNames('react-grid-layout', className)} style={mergedStyle}>
-        {React.Children.map(this.props.children, (child) => this.processGridItem(child))}
+        {
+          // $FlowIgnore: Appears to think map calls back w/array
+          React.Children.map(this.props.children, (child) => this.processGridItem(child))
+        }
         {this.placeholder()}
       </div>
     );

lib/ReactGridLayout.jsx

@@ -1,23 +1,41 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash.isequal';
 
 import {cloneLayout, synchronizeLayoutWithChildren, validateLayout} from './utils';
 import {getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout} from './responsiveUtils';
 import ReactGridLayout from './ReactGridLayout';
+import type {Props as RGLProps} from './ReactGridLayout';
+import type {Layout} from './utils';
 
 const noop = function(){};
 const type = (obj) => Object.prototype.toString.call(obj);
 
-import type {Layout} from './utils';
 type State = {
   layout: Layout,
   breakpoint: string,
   cols: number
 };
 
-export default class ResponsiveReactGridLayout extends React.Component {
+type Props<Breakpoint: string = string> = {
+  ...$Exact<RGLProps>,
+
+  // Responsive config
+  breakpoint: Breakpoint,
+  breakpoints: {[key: Breakpoint]: number},
+  cols: {[key: Breakpoint]: number},
+  layouts: {[key: Breakpoint]: Layout},
+  width: number,
+
+  // Callbacks
+  onBreakpointChange: (Breakpoint, cols: number) => void,
+  onLayoutChange: (Layout, {[key: Breakpoint]: Layout}) => void,
+  onWidthChange:
+    (containerWidth: number, margin: [number, number], cols: number, containerPadding: [number, number]) => void
+};
+
+export default class ResponsiveReactGridLayout extends React.Component<Props<>, State> {
 
   // This should only include propTypes needed in this code; RGL itself
   // will do validation of the rest props passed to it.
@@ -79,7 +97,7 @@ export default class ResponsiveReactGridLayout extends React.Component {
     onWidthChange: noop,
   };
 
-  state: State = this.generateInitialState();
+  state = this.generateInitialState();
 
   generateInitialState(): State {
     const {width, breakpoints, layouts, verticalCompact, cols} = this.props;
@@ -97,7 +115,7 @@ export default class ResponsiveReactGridLayout extends React.Component {
     };
   }
 
-  componentWillReceiveProps(nextProps: Object) {
+  componentWillReceiveProps(nextProps: Props<*>) {
 
     // Allow parent to set width or breakpoint directly.
     if (
@@ -132,7 +150,7 @@ export default class ResponsiveReactGridLayout extends React.Component {
    * When the width changes work through breakpoints and reset state with the new width & breakpoint.
    * Width changes are necessary to figure out the widget widths.
    */
-  onWidthChange(nextProps: typeof ResponsiveReactGridLayout.prototype.props) {
+  onWidthChange(nextProps: Props<*>) {
     const {breakpoints, cols, layouts, verticalCompact} = nextProps;
     const newBreakpoint = nextProps.breakpoint || getBreakpointFromWidth(nextProps.breakpoints, nextProps.width);