react-grid-layout - npm Package Compare versions

Comparing version 0.12.0 to 0.12.1

build/components/WidthProvider.js

@@ -28,4 +28,8 @@ 'use strict';
  */
+/*:: type State = {
+  mounted: boolean,
+  width: number
+};*/
 
-exports.default = function (ComposedComponent) {
+exports.default = function (ComposedComponent /*: ReactClass*/) /*: ReactClass*/ {
   var _class, _temp2;
@@ -48,3 +52,3 @@
         width: 1280
-      }, _this.onWindowResize = function (_event, cb) {
+      }, _this.onWindowResize = function (_event /*: Event*/, cb /*: ?Function*/) {
         var node = _reactDom2.default.findDOMNode(_this);
@@ -51,0 +55,0 @@ _this.setState({ width: node.offsetWidth }, cb);

build/GridItem.js

@@ -25,5 +25,13 @@ 'use strict';
 
+/*:: import type {CorePosition, Position} from './utils';*/
+
+
 /**
  * An individual item within a ReactGridLayout.
  */
+/*:: type State = {
+  resizing: ?{width: number, height: number},
+  dragging: ?{top: number, left: number},
+  className: string
+};*/
 
@@ -71,3 +79,3 @@ var GridItem = function (_React$Component) {
 
-  GridItem.prototype.calcPosition = function calcPosition(x, y, w, h, state) {
+  GridItem.prototype.calcPosition = function calcPosition(x /*: number*/, y /*: number*/, w /*: number*/, h /*: number*/, state /*: ?Object*/) {
     var _props2 = this.props;
@@ -110,3 +118,3 @@ var margin = _props2.margin;
 
-  GridItem.prototype.calcXY = function calcXY(top, left) {
+  GridItem.prototype.calcXY = function calcXY(top /*: number*/, left /*: number*/) {
     var _props3 = this.props;
@@ -184,3 +192,3 @@ var margin = _props3.margin;
 
-  GridItem.prototype.createStyle = function createStyle(pos) {
+  GridItem.prototype.createStyle = function createStyle(pos /*: Position*/) {
     var _props5 = this.props;
@@ -218,3 +226,3 @@ var usePercentages = _props5.usePercentages;
 
-  GridItem.prototype.mixinDraggable = function mixinDraggable(child) {
+  GridItem.prototype.mixinDraggable = function mixinDraggable(child /*: React.Element*/) {
     return _react2.default.createElement(
@@ -240,3 +248,3 @@ _reactDraggable.DraggableCore,
 
-  GridItem.prototype.mixinResizable = function mixinResizable(child, position) {
+  GridItem.prototype.mixinResizable = function mixinResizable(child /*: React.Element*/, position /*: Position*/) {
     var _props6 = this.props;
@@ -283,6 +291,6 @@ var cols = _props6.cols;
 
-  GridItem.prototype.onDragHandler = function onDragHandler(handlerName) {
+  GridItem.prototype.onDragHandler = function onDragHandler(handlerName /*:string*/) {
     var _this2 = this;
 
-    return function (e, _ref2) {
+    return function (e /*:Event*/, _ref2) {
       var node = _ref2.node;
@@ -293,3 +301,3 @@ var position = _ref2.position;
 
-      var newPosition = { top: 0, left: 0 };
+      var newPosition /*: {top: number, left: number}*/ = { top: 0, left: 0 };
 
@@ -342,6 +350,6 @@ // Get new XY
 
-  GridItem.prototype.onResizeHandler = function onResizeHandler(handlerName) {
+  GridItem.prototype.onResizeHandler = function onResizeHandler(handlerName /*:string*/) {
     var _this3 = this;
 
-    return function (e, _ref3) {
+    return function (e /*:Event*/, _ref3) {
       var element = _ref3.element;
@@ -348,0 +356,0 @@ var size = _ref3.size;

build/ReactGridLayout.js

@@ -30,2 +30,9 @@ 'use strict';
 // Types
+/*:: import type {ResizeEvent, DragEvent, Layout, LayoutItem} from './utils';*/
+/*:: type State = {
+  activeDrag: ?LayoutItem,
+  layout: Layout,
+  oldDragItem: ?LayoutItem,
+  oldResizeItem: ?LayoutItem
+};*/
 
@@ -44,3 +51,3 @@ var noop = function noop() {};
 
-  function ReactGridLayout(props, context) {
+  function ReactGridLayout(props /*: Object*/, context /*: ?Object*/) /*: void*/ {
     _classCallCheck(this, ReactGridLayout);
@@ -62,3 +69,3 @@
 
-  ReactGridLayout.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+  ReactGridLayout.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps /*: Object*/) {
     var newLayoutBase = void 0;
@@ -106,3 +113,3 @@ // Allow parent to set layout directly.
 
-  ReactGridLayout.prototype.onDragStart = function onDragStart(i, x, y, _ref) {
+  ReactGridLayout.prototype.onDragStart = function onDragStart(i /*:string*/, x /*:number*/, y /*:number*/, _ref) {
     var e = _ref.e;
@@ -130,3 +137,3 @@ var node = _ref.node;
 
-  ReactGridLayout.prototype.onDrag = function onDrag(i, x, y, _ref2) {
+  ReactGridLayout.prototype.onDrag = function onDrag(i /*:string*/, x /*:number*/, y /*:number*/, _ref2) {
     var e = _ref2.e;
@@ -166,3 +173,3 @@ var node = _ref2.node;
 
-  ReactGridLayout.prototype.onDragStop = function onDragStop(i, x, y, _ref3) {
+  ReactGridLayout.prototype.onDragStop = function onDragStop(i /*:string*/, x /*:number*/, y /*:number*/, _ref3) {
     var e = _ref3.e;
@@ -191,3 +198,3 @@ var node = _ref3.node;
 
-  ReactGridLayout.prototype.onResizeStart = function onResizeStart(i, w, h, _ref4) {
+  ReactGridLayout.prototype.onResizeStart = function onResizeStart(i /*:string*/, w /*:number*/, h /*:number*/, _ref4) {
     var e = _ref4.e;
@@ -205,3 +212,3 @@ var node = _ref4.node;
 
-  ReactGridLayout.prototype.onResize = function onResize(i, w, h, _ref5) {
+  ReactGridLayout.prototype.onResize = function onResize(i /*:string*/, w /*:number*/, h /*:number*/, _ref5) {
     var e = _ref5.e;
@@ -231,3 +238,3 @@ var node = _ref5.node;
 
-  ReactGridLayout.prototype.onResizeStop = function onResizeStop(i, w, h, _ref6) {
+  ReactGridLayout.prototype.onResizeStop = function onResizeStop(i /*:string*/, w /*:number*/, h /*:number*/, _ref6) {
     var e = _ref6.e;
@@ -301,3 +308,3 @@ var node = _ref6.node;
 
-  ReactGridLayout.prototype.processGridItem = function processGridItem(child) {
+  ReactGridLayout.prototype.processGridItem = function processGridItem(child /*: React.Element*/) {
     if (!child.key) return;
@@ -304,0 +311,0 @@ var l = (0, _utils.getLayoutItem)(this.state.layout, child.key);

build/ResponsiveReactGridLayout.js

@@ -35,2 +35,9 @@ 'use strict';
 
+/*:: import type {Layout} from './utils';*/
+/*:: type State = {
+  layout: Layout,
+  breakpoint: string,
+  cols: number
+};*/
+
 var ResponsiveReactGridLayout = function (_React$Component) {
@@ -80,3 +87,3 @@ _inherits(ResponsiveReactGridLayout, _React$Component);
 
-  ResponsiveReactGridLayout.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+  ResponsiveReactGridLayout.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps /*: Object*/) {
 
@@ -89,13 +96,13 @@ // Allow parent to set width or breakpoint directly.
     // Allow parent to set layouts directly.
-    if (!(0, _lodash2.default)(nextProps.layouts, this.props.layouts)) {
-      var _state = this.state;
-      var _breakpoint = _state.breakpoint;
-      var _cols = _state.cols;
+    else if (!(0, _lodash2.default)(nextProps.layouts, this.props.layouts)) {
+        var _state = this.state;
+        var _breakpoint = _state.breakpoint;
+        var _cols = _state.cols;
 
-      // Since we're setting an entirely new layout object, we must generate a new responsive layout
-      // if one does not exist.
+        // Since we're setting an entirely new layout object, we must generate a new responsive layout
+        // if one does not exist.
 
-      var newLayout = (0, _responsiveUtils.findOrGenerateResponsiveLayout)(nextProps.layouts, nextProps.breakpoints, _breakpoint, _breakpoint, _cols, nextProps.verticalLayout);
-      this.setState({ layout: newLayout });
-    }
+        var newLayout = (0, _responsiveUtils.findOrGenerateResponsiveLayout)(nextProps.layouts, nextProps.breakpoints, _breakpoint, _breakpoint, _cols, nextProps.verticalLayout);
+        this.setState({ layout: newLayout });
+      }
   };
@@ -111,3 +118,3 @@
 
-  ResponsiveReactGridLayout.prototype.onWidthChange = function onWidthChange(nextProps) {
+  ResponsiveReactGridLayout.prototype.onWidthChange = function onWidthChange(nextProps /*: Object*/) {
     var breakpoints = nextProps.breakpoints;
@@ -130,3 +137,3 @@ var verticalLayout = nextProps.verticalLayout;
       // Find or generate a new one.
-      var newCols = (0, _responsiveUtils.getColsFromBreakpoint)(newBreakpoint, cols);
+      var newCols /*: number*/ = (0, _responsiveUtils.getColsFromBreakpoint)(newBreakpoint, cols);
       var _layout = (0, _responsiveUtils.findOrGenerateResponsiveLayout)(layouts, breakpoints, newBreakpoint, lastBreakpoint, newCols, verticalLayout);
@@ -133,0 +140,0 @@

build/responsiveUtils.js

@@ -11,2 +11,7 @@ 'use strict';
 
+/*:: import type {Layout} from './utils';*/
+/*:: export type ResponsiveLayout = {lg?: Layout, md?: Layout, sm?: Layout, xs?: Layout, xxs?: Layout};*/
+/*:: type Breakpoint = string;*/
+
+
 /**
@@ -19,3 +24,4 @@ * Given a width, find the highest breakpoint that matches is valid for it (width > breakpoint).
  */
-function getBreakpointFromWidth(breakpoints, width) {
+/*:: type Breakpoints = {lg?: number, md?: number, sm?: number, xs?: number, xxs?: number};*/
+function getBreakpointFromWidth(breakpoints /*: Breakpoints*/, width /*: number*/) /*: Breakpoint*/ {
   var sorted = sortBreakpoints(breakpoints);
@@ -36,3 +42,3 @@ var matching = sorted[0];
  */
-function getColsFromBreakpoint(breakpoint, cols) {
+function getColsFromBreakpoint(breakpoint /*: Breakpoint*/, cols /*: Breakpoints*/) /*: number*/ {
   if (!cols[breakpoint]) {
@@ -58,3 +64,3 @@ throw new Error("ResponsiveReactGridLayout: `cols` entry for breakpoint " + breakpoint + " is missing!");
  */
-function findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, lastBreakpoint, cols, verticalCompact) {
+function findOrGenerateResponsiveLayout(layouts /*: ResponsiveLayout*/, breakpoints /*: Breakpoints*/, breakpoint /*: Breakpoint*/, lastBreakpoint /*: Breakpoint*/, cols /*: number*/, verticalCompact /*: boolean*/) /*: Layout*/ {
   // If it already exists, just return it.
@@ -84,4 +90,4 @@ if (layouts[breakpoint]) return (0, _utils.cloneLayout)(layouts[breakpoint]);
  */
-function sortBreakpoints(breakpoints) {
-  var keys = Object.keys(breakpoints);
+function sortBreakpoints(breakpoints /*: Breakpoints*/) /*: Array<Breakpoint>*/ {
+  var keys /*: Array<string>*/ = Object.keys(breakpoints);
   return keys.sort(function (a, b) {
@@ -88,0 +94,0 @@ return breakpoints[a] - breakpoints[b];

build/utils.js

@@ -27,2 +27,14 @@ 'use strict';
 exports.autoBindHandlers = autoBindHandlers;
+/*:: export type LayoutItemRequired = {w: number, h: number, x: number, y: number, i: string};*/
+/*:: export type LayoutItem = LayoutItemRequired &
+                         {minW?: number, minH?: number, maxW?: number, maxH?: number,
+                          moved?: boolean, static?: boolean,
+                          isDraggable?: ?boolean, isResizable?: ?boolean};*/
+/*:: export type Layout = Array<LayoutItem>;*/
+/*:: export type Position = {left: number, top: number, width: number, height: number};*/
+/*:: export type CorePosition = {deltaX: number, deltaY: number, position: {left: number, top: number}};*/
+/*:: export type Size = {width: number, height: number};*/
+/*:: export type DragEvent = {e: Event, node: HTMLElement, position: Position};*/
+/*:: export type ResizeEvent = {e: Event, node: HTMLElement, size: Size};*/
+/*:: import type React from 'react';*/
 
@@ -38,3 +50,3 @@
  */
-function bottom(layout) {
+function bottom(layout /*: Layout*/) /*: number*/ {
   var max = 0,
@@ -49,3 +61,3 @@ bottomY = void 0;
 
-function cloneLayout(layout) {
+function cloneLayout(layout /*: Layout*/) /*: Layout*/ {
   var newLayout = Array(layout.length);
@@ -59,3 +71,3 @@ for (var _i2 = 0, len = layout.length; _i2 < len; _i2++) {
 // Fast path to cloning, since this is monomorphic
-function cloneLayoutItem(layoutItem) {
+function cloneLayoutItem(layoutItem /*: LayoutItem*/) /*: LayoutItem*/ {
   return {
@@ -75,3 +87,3 @@ w: layoutItem.w, h: layoutItem.h, x: layoutItem.x, y: layoutItem.y, i: layoutItem.i,
  */
-function collides(l1, l2) {
+function collides(l1 /*: LayoutItem*/, l2 /*: LayoutItem*/) /*: boolean*/ {
   if (l1 === l2) return false; // same element
@@ -94,3 +106,3 @@ if (l1.x + l1.w <= l2.x) return false; // l1 is left of l2
  */
-function compact(layout, verticalCompact) {
+function compact(layout /*: Layout*/, verticalCompact /*: boolean*/) /*: Layout*/ {
   // Statics go in the compareWith array right away so items flow around them.
@@ -128,3 +140,3 @@ var compareWith = getStatics(layout);
  */
-function compactItem(compareWith, l, verticalCompact) {
+function compactItem(compareWith /*: Layout*/, l /*: LayoutItem*/, verticalCompact /*: boolean*/) /*: LayoutItem*/ {
   if (verticalCompact) {
@@ -151,3 +163,3 @@ // Move the element up as far as it can go without colliding.
  */
-function correctBounds(layout, bounds) {
+function correctBounds(layout /*: Layout*/, bounds /*: {cols: number}*/) /*: Layout*/ {
   var collidesWith = getStatics(layout);
@@ -181,3 +193,3 @@ for (var _i4 = 0, len = layout.length; _i4 < len; _i4++) {
  */
-function getLayoutItem(layout, id) {
+function getLayoutItem(layout /*: Layout*/, id /*: string*/) /*: ?LayoutItem*/ {
   for (var _i5 = 0, len = layout.length; _i5 < len; _i5++) {
@@ -196,3 +208,3 @@ if (layout[_i5].i === id) return layout[_i5];
  */
-function getFirstCollision(layout, layoutItem) {
+function getFirstCollision(layout /*: Layout*/, layoutItem /*: LayoutItem*/) /*: ?LayoutItem*/ {
   for (var _i6 = 0, len = layout.length; _i6 < len; _i6++) {
@@ -203,3 +215,3 @@ if (collides(layout[_i6], layoutItem)) return layout[_i6];
 
-function getAllCollisions(layout, layoutItem) {
+function getAllCollisions(layout /*: Layout*/, layoutItem /*: LayoutItem*/) /*: Array<LayoutItem>*/ {
   var out = [];
@@ -217,3 +229,3 @@ for (var _i7 = 0, len = layout.length; _i7 < len; _i7++) {
  */
-function getStatics(layout) {
+function getStatics(layout /*: Layout*/) /*: Array<LayoutItem>*/ {
   var out = [];
@@ -236,3 +248,3 @@ for (var _i8 = 0, len = layout.length; _i8 < len; _i8++) {
  */
-function moveElement(layout, l, x, y, isUserAction) {
+function moveElement(layout /*: Layout*/, l /*: LayoutItem*/, x /*: ?number*/, y /*: ?number*/, isUserAction /*: ?boolean*/) /*: Layout*/ {
   if (l.static) return layout;
@@ -289,3 +301,3 @@
  */
-function moveElementAwayFromCollision(layout, collidesWith, itemToMove, isUserAction) {
+function moveElementAwayFromCollision(layout /*: Layout*/, collidesWith /*: LayoutItem*/, itemToMove /*: LayoutItem*/, isUserAction /*: ?boolean*/) /*: Layout*/ {
 
@@ -297,3 +309,3 @@ // If there is enough space above the collision to put this element, move it there.
     // Make a mock item so we don't modify the item here, only modify in moveElement.
-    var fakeItem = {
+    var fakeItem /*: LayoutItem*/ = {
       x: itemToMove.x,
@@ -322,7 +334,7 @@ y: itemToMove.y,
  */
-function perc(num) {
+function perc(num /*: number*/) /*: string*/ {
   return num * 100 + '%';
 }
 
-function setTransform(_ref) {
+function setTransform(_ref) /*: Object*/ {
   var top = _ref.top;
@@ -347,3 +359,3 @@ var left = _ref.left;
 
-function setTopLeft(_ref2) {
+function setTopLeft(_ref2) /*: Object*/ {
   var top = _ref2.top;
@@ -369,3 +381,3 @@ var left = _ref2.left;
  */
-function sortLayoutItemsByRowCol(layout) {
+function sortLayoutItemsByRowCol(layout /*: Layout*/) /*: Layout*/ {
   return [].concat(layout).sort(function (a, b) {
@@ -388,3 +400,3 @@ if (a.y > b.y || a.y === b.y && a.x > b.x) {
  */
-function synchronizeLayoutWithChildren(initialLayout, children, cols, verticalCompact) {
+function synchronizeLayoutWithChildren(initialLayout /*: Layout*/, children /*: Array<React.Element>|React.Element*/, cols /*: number*/, verticalCompact /*: boolean*/) /*: Layout*/ {
   // ensure 'children' is always an array
@@ -397,3 +409,3 @@ if (!Array.isArray(children)) {
   // Generate one layout item per child.
-  var layout = [];
+  var layout /*: Layout*/ = [];
   for (var _i10 = 0, len = children.length; _i10 < len; _i10++) {
@@ -445,3 +457,3 @@ var newItem = void 0;
  */
-function validateLayout(layout, contextName) {
+function validateLayout(layout /*: Layout*/, contextName /*: string*/) /*: void*/ {
   contextName = contextName || "Layout";
@@ -467,3 +479,3 @@ var subProps = ['x', 'y', 'w', 'h'];
 // Flow can't really figure this out, so we just use Object
-function autoBindHandlers(el, fns) {
+function autoBindHandlers(el /*: Object*/, fns /*: Array<string>*/) /*: void*/ {
   fns.forEach(function (key) {
@@ -470,0 +482,0 @@ return el[key] = el[key].bind(el);

CHANGELOG.md

 # Changelog
 
+0.12.1 (Apr 19, 2016)
+------
+
+- Bugfix: Don't set `layout` twice on width change. See #217 - thanks @damienleroux
+- Enhancement: Add Flow type comments
+
 0.12.0 (Apr 14, 2016)
@@ -4,0 +10,0 @@ ------

package.json

 {
   "name": "react-grid-layout",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
@@ -49,2 +49,3 @@ "main": "index.js",
     "babel-plugin-react-transform": "^2.0.0",
+    "babel-plugin-transform-flow-comments": "^6.7.0",
     "babel-plugin-transform-react-constant-elements": "^6.5.0",
@@ -51,0 +52,0 @@ "babel-plugin-transform-react-inline-elements": "^6.6.5",

README.md

 # React-Grid-Layout
 
 [![npm package](https://img.shields.io/npm/v/react-grid-layout.svg?style=flat-square)](https://www.npmjs.org/package/react-grid-layout)
+[![npm downloads](https://img.shields.io/npm/dt/react-grid-layout.svg?maxAge=2592000)]()
 
@@ -25,6 +26,6 @@ React-Grid-Layout is a grid layout system much like [Packery](http://packery.metafizzy.co/) or
 - [Responsive Usage](#responsive-usage)
+- [Providing Grid Width](#providing-grid-width)
 - [Grid Layout Props](#grid-layout-props)
 - [Responsive Grid Layout Props](#responsive-grid-layout-props)
 - [Grid Item Props](#grid-item-props)
-- [Grid Item Defaults](#grid-item-defaults)
 - [Contribute](#contribute)
@@ -175,3 +176,4 @@ - [TODO List](#todo-list)
 
-You will also need to provide a `width`, when using `<ResponsiveReactGridLayout>` it is suggested you use the HOC `<WidthProvider>` as per the instructions below.
+You will also need to provide a `width`, when using `<ResponsiveReactGridLayout>` it is suggested you use the HOC
+`WidthProvider` as per the instructions below.
 
@@ -184,12 +186,11 @@ For the time being, it is not possible to supply responsive mappings via the `_grid` property on individual
 Both `<ResponsiveReactGridLayout>` and `<ReactGridLayout>` take `width` to calculate
-positions on drag events. In simple cases a HOC `<WidthProvider>` can be used to automatically determine
+positions on drag events. In simple cases a HOC `WidthProvider` can be used to automatically determine
 width upon initialization and window resize events.
 
 ```javascript
-var WidthProvider = require('react-grid-layout').WidthProvider;
-var ResponsiveReactGridLayout = require('react-grid-layout').Responsive;
-ResponsiveReactGridLayout = WidthProvider(ResponsiveReactGridLayout);
+import {Responsive, WidthProvider} from 'react-grid-layout';
+const ResponsiveReactGridLayout = WidthProvider(Responsive);
 
 //...
-render: function() {
+render() {
   // {lg: layout1, md: layout2, ...}
@@ -209,8 +210,11 @@ var layouts = getLayoutsFromSomewhere();
 
-This allows you to easily replace `<WidthProvider>` with your own Provider HOC if you need more sophisticated logic.
+This allows you to easily replace `WidthProvider` with your own Provider HOC if you need more sophisticated logic.
 
-`<WidthProvider>` accepts a single prop, `measureBeforeMount`. If `true`, `<WidthProvider>` will measure the
+`WidthProvider` accepts a single prop, `measureBeforeMount`. If `true`, `WidthProvider` will measure the
 container's width before mounting children. Use this if you'd like to completely eliminate any resizing animation
 on application/component mount.
 
+Have a more complicated layout? `WidthProvider` [is very simple](/lib/components/WidthProvider.jsx) and only
+listens to window `'resize'` events. If you need more power and flexibility, try the
+[SizeMe React HOC](https://github.com/ctrlplusb/react-sizeme) as an alternative to WidthProvider.
 
@@ -228,35 +232,32 @@ ### Grid Layout Props
 // This is required unless using the HOC <WidthProvider> or similar
-width: React.PropTypes.number.isRequired,
+width: number,
 
 // If true, the container height swells and contracts to fit contents
-autoSize: React.PropTypes.bool,
+autoSize: ?boolean = true,
 
-// {name: pxVal}, e.g. {lg: 1200, md: 996, sm: 768, xs: 480}
-breakpoints: React.PropTypes.object,
-
 // Number of columns in this layout.
-cols: React.PropTypes.number,
+cols: ?number = 12,
 
 // A selector that will not be draggable.
-draggableCancel: React.PropTypes.string,
+draggableCancel: ?string = '',
 // A selector for the draggable handler
-draggableHandle: React.PropTypes.string,
+draggableHandle: ?string = '',
 
 // If true, the layout will compact vertically
-verticalCompact: React.PropTypes.bool,
+verticalCompact: ?boolean = true,
 
 // Layout is an array of object with the format:
-// {x: Number, y: Number, w: Number, h: Number}
+// {x: number, y: number, w: number, h: number}
 // The index into the layout must match the key used on each item component.
 // If you choose to use custom keys, you can specify that key in the layout
 // array objects like so:
-// {i: String, x: Number, y: Number, w: Number, h: Number}
-layout: React.PropTypes.array,
+// {i: string, x: number, y: number, w: number, h: number}
+layout: ?array = null, // If not provided, use _grid props on children
 
 // Margin between items [x, y] in px.
-margin: React.PropTypes.array,
+margin: ?[number, number] = [10, 10],
 
 // Rows have a static height, but you can change this based on breakpoints
 // if you like.
-rowHeight: React.PropTypes.number,
+rowHeight: ?number = 150,
 
@@ -266,12 +267,8 @@ //
 //
-isDraggable: React.PropTypes.bool,
-isResizable: React.PropTypes.bool,
+isDraggable: ?boolean = true,
+isResizable: ?boolean = true,
 // Uses CSS3 translate() instead of position top/left.
 // This makes about 6x faster paint performance
-useCSSTransforms: React.PropTypes.bool,
+useCSSTransforms: ?boolean = true,
 
-// If false, you should supply width yourself. Good if you want to debounce
-// resize events or reuse a handler from somewhere else.
-listenToWindowResize: React.PropTypes.bool,
-
 //
@@ -283,3 +280,3 @@ // Callbacks
 // Calls back with (currentLayout) after every drag or resize stop.
-onLayoutChange: React.PropTypes.func,
+onLayoutChange: (layout: Layout) => void,
 
@@ -290,15 +287,17 @@ //
 //
+type ItemCallback = (layout: Layout, oldItem: LayoutItem, newItem: LayoutItem,
+                     placeholder: LayoutItem, e: MouseEvent, element: HTMLElement) => void;
 
 // Calls when drag starts.
-onDragStart: React.PropTypes.func,
+onDragStart: ItemCallback,
 // Calls on each drag movement.
-onDrag: React.PropTypes.func,
+onDrag: ItemCallback,
 // Calls when drag is complete.
-onDragStop: React.PropTypes.func,
+onDragStop: ItemCallback,
 // Calls when resize starts.
-onResizeStart: React.PropTypes.func,
+onResizeStart: ItemCallback,
 // Calls when resize movement happens.
-onResize: React.PropTypes.func,
+onResize: ItemCallback,
 // Calls when resize is complete.
-onResizeStop: React.PropTypes.func
+onResizeStop: ItemCallback
 ```
@@ -314,10 +313,10 @@
 // Breakpoint names are arbitrary but must match in the cols and layouts objects.
-breakpoints: React.PropTypes.object,
+breakpoints: ?Object = {lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0},
 
 // # of cols. This is a breakpoint -> cols map, e.g. {lg: 12, md: 10, ...}
-cols: React.PropTypes.object,
+cols: ?Object = {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2},
 
 // layouts is an object mapping breakpoints to layouts.
 // e.g. {lg: Layout, md: Layout, ...}
-layouts: React.PropTypes.object
+layouts: {[key: $Keys<breakpoints>]: Layout}
 
@@ -329,11 +328,11 @@ //
 // Calls back with breakpoint and new # cols
-onBreakpointChange: React.PropTypes.func,
+onBreakpointChange: (newBreakpoint: string, newCols: number) => void,
 
 // Callback so you can save the layout.
-// Calls back with (currentLayout, allLayouts). allLayouts are keyed by breakpoint.
-onLayoutChange: React.PropTypes.func
+// AllLayouts are keyed by breakpoint.
+onLayoutChange: (currentLayout: Layout, allLayouts: {[key: $Keys<breakpoints]: Layout}) => void,
 
 // Callback when the width changes, so you can modify the layout as needed.
-// Calls back with (containerWidth, margin, cols)
-onWidthChange: React.Proptypes.func
+onWidthChange: (containerWidth: number, margin: [number, number], cols: number) => void;
+
 ```
@@ -364,36 +363,23 @@
   // A string corresponding to the component key
-  i: React.PropTypes.string.isRequired,
+  i: string,
 
   // These are all in grid units, not pixels
-  x: React.PropTypes.number.isRequired,
-  y: React.PropTypes.number.isRequired,
-  w: React.PropTypes.number.isRequired,
-  h: React.PropTypes.number.isRequired,
-  minW: React.PropTypes.number,
-  maxW: React.PropTypes.number,
-  minH: React.PropTypes.number,
-  maxH: React.PropTypes.number,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  minW: ?number = 0,
+  maxW: ?number = Infinity,
+  minH: ?number = 0,
+  maxH: ?number = Infinity,
 
   // If true, equal to `isDraggable: false, isResizable: false`.
-  static: React.PropTypes.bool,
+  static: ?boolean = false,
   // If false, will not be draggable. Overrides `static`.
-  isDraggable: React.PropTypes.bool,
+  isDraggable: ?boolean = true,
   // If false, will not be resizable. Overrides `static`.
-  isResizable: React.PropTypes.bool,
+  isResizable: ?boolean = true
 }
 ```
 
-### Grid Item Defaults
-
-```javascript
-{
-  minH: 1,
-  minW: 1,
-  maxH: Infinity,
-  maxW: Infinity,
-  isDraggable: true,
-  isResizable: true
-}
-```
-
 ## Contribute
@@ -400,0 +386,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

109745

increased by9.08%

Number of package files

26

increased by4%

Lines of code

1732

increased by2.3%

Worsened metrics

Dev dependency count

31

increased by3.33%

Number of lines in readme file

393

decreased by-3.44%

No dependency changes