react-grid-layout 1.2.5 → 1.3.0

package/build/ReactGridLayoutPropTypes.js

@@ -56,6 +56,7 @@ var resizeHandleType
   droppingItem: $Shape<LayoutItem>,
   resizeHandles: ResizeHandleAxis[],
   resizeHandle?: ResizeHandle,
+  allowOverlap: boolean,
 
   // Callbacks
   onLayoutChange: Layout => void,
@@ -65,6 +66,7 @@ var resizeHandleType
   onResize: EventCallback,
   onResizeStart: EventCallback,
   onResizeStop: EventCallback,
+  onDropDragOver: (e: DragOverEvent) => ?({| w?: number, h?: number |} | false),
   onDrop: (layout: Layout, item: ?LayoutItem, e: Event) => void,
   children: ReactChildrenArray<ReactElement<any>>,
   innerRef?: Ref<"div">
@@ -147,6 +149,8 @@ var _default = {
   isBounded: _propTypes.default.bool,
   isDraggable: _propTypes.default.bool,
   isResizable: _propTypes.default.bool,
+  // If true, grid can be placed one over the other.
+  allowOverlap: _propTypes.default.bool,
   // If true, grid items won't change position when being dragged over.
   preventCollision: _propTypes.default.bool,
   // Use CSS transforms instead of top/left
@@ -199,6 +203,8 @@ var _default = {
     var keys = {};
 
     _react.default.Children.forEach(children, function (child) {
+      if ((child === null || child === void 0 ? void 0 : child.key) == null) return;
+
       if (keys[child.key]) {
         throw new Error('Duplicate child key "' + child.key + '" found! This will cause problems in ReactGridLayout.');
       }

package/build/ResponsiveReactGridLayout.js

@@ -19,6 +19,8 @@ var _responsiveUtils = require("./responsiveUtils");
 
 var _ReactGridLayout = _interopRequireDefault(require("./ReactGridLayout"));
 
+var _excluded = ["breakpoint", "breakpoints", "cols", "layouts", "margin", "containerPadding", "onBreakpointChange", "onLayoutChange", "onWidthChange"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -47,7 +49,7 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
@@ -57,6 +59,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+// $FlowFixMe[method-unbinding]
 var type = function type(obj) {
   return Object.prototype.toString.call(obj);
 };
@@ -117,6 +120,7 @@ function getIndentationValue
 /*:: type DefaultProps = Pick<
   Props<>,
   {|
+    allowOverlap: 0,
     breakpoints: 0,
     cols: 0,
     containerPadding: 0,
@@ -220,7 +224,7 @@ var ResponsiveReactGridLayout = /*#__PURE__*/function (_React$Component) {
 
         var layout = (0, _responsiveUtils.findOrGenerateResponsiveLayout)(newLayouts, breakpoints, newBreakpoint, lastBreakpoint, newCols, compactType); // This adds missing items.
 
-        layout = (0, _utils.synchronizeLayoutWithChildren)(layout, this.props.children, newCols, compactType); // Store the new layout.
+        layout = (0, _utils.synchronizeLayoutWithChildren)(layout, this.props.children, newCols, compactType, this.props.allowOverlap); // Store the new layout.
 
         newLayouts[newBreakpoint] = layout; // callbacks
 
@@ -254,7 +258,7 @@ var ResponsiveReactGridLayout = /*#__PURE__*/function (_React$Component) {
           onBreakpointChange = _this$props3.onBreakpointChange,
           onLayoutChange = _this$props3.onLayoutChange,
           onWidthChange = _this$props3.onWidthChange,
-          other = _objectWithoutProperties(_this$props3, ["breakpoint", "breakpoints", "cols", "layouts", "margin", "containerPadding", "onBreakpointChange", "onLayoutChange", "onWidthChange"]);
+          other = _objectWithoutProperties(_this$props3, _excluded);
       /* eslint-enable no-unused-vars */
 
 
@@ -307,6 +311,7 @@ _defineProperty(ResponsiveReactGridLayout, "propTypes", {
   breakpoint: _propTypes.default.string,
   // {name: pxVal}, e.g. {lg: 1200, md: 996, sm: 768, xs: 480}
   breakpoints: _propTypes.default.object,
+  allowOverlap: _propTypes.default.bool,
   // # of cols. This is a breakpoint -> cols map
   cols: _propTypes.default.object,
   // # of margin. This is a breakpoint -> margin map
@@ -377,6 +382,7 @@ _defineProperty(ResponsiveReactGridLayout, "defaultProps", {
   },
   layouts: {},
   margin: [10, 10],
+  allowOverlap: false,
   onBreakpointChange: _utils.noop,
   onLayoutChange: _utils.noop,
   onWidthChange: _utils.noop

package/build/calculateUtils.js

@@ -88,9 +88,9 @@ function calcGridItemPosition(positionParams
     out.height = Math.round(state.resizing.height);
   } // Otherwise, calculate from grid units.
   else {
-      out.width = calcGridItemWHPx(w, colWidth, margin[0]);
-      out.height = calcGridItemWHPx(h, rowHeight, margin[1]);
-    } // If dragging, use the exact width and height as returned from dragging callbacks.
+    out.width = calcGridItemWHPx(w, colWidth, margin[0]);
+    out.height = calcGridItemWHPx(h, rowHeight, margin[1]);
+  } // If dragging, use the exact width and height as returned from dragging callbacks.
 
 
   if (state && state.dragging) {
@@ -98,9 +98,9 @@ function calcGridItemPosition(positionParams
     out.left = Math.round(state.dragging.left);
   } // Otherwise, calculate from grid units.
   else {
-      out.top = Math.round((rowHeight + margin[1]) * y + containerPadding[1]);
-      out.left = Math.round((colWidth + margin[0]) * x + containerPadding[0]);
-    }
+    out.top = Math.round((rowHeight + margin[1]) * y + containerPadding[1]);
+    out.left = Math.round((colWidth + margin[0]) * x + containerPadding[0]);
+  }
 
   return out;
 }

package/build/components/WidthProvider.js

@@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _excluded = ["measureBeforeMount"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -37,7 +39,7 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
@@ -125,7 +127,7 @@ function WidthProvideRGL
       value: function render() {
         var _this$props = this.props,
             measureBeforeMount = _this$props.measureBeforeMount,
-            rest = _objectWithoutProperties(_this$props, ["measureBeforeMount"]);
+            rest = _objectWithoutProperties(_this$props, _excluded);
 
         if (measureBeforeMount && !this.mounted) {
           return /*#__PURE__*/React.createElement("div", {

package/build/fastRGLPropsEqual.js

@@ -1,5 +1,5 @@
 // this file was prevaled
 module.exports = function fastRGLPropsEqual(a, b, isEqualImpl) {
   if (a === b) return true;
-  return a.className === b.className && isEqualImpl(a.style, b.style) && a.width === b.width && a.autoSize === b.autoSize && a.cols === b.cols && a.draggableCancel === b.draggableCancel && a.draggableHandle === b.draggableHandle && isEqualImpl(a.verticalCompact, b.verticalCompact) && isEqualImpl(a.compactType, b.compactType) && isEqualImpl(a.layout, b.layout) && isEqualImpl(a.margin, b.margin) && isEqualImpl(a.containerPadding, b.containerPadding) && a.rowHeight === b.rowHeight && a.maxRows === b.maxRows && a.isBounded === b.isBounded && a.isDraggable === b.isDraggable && a.isResizable === b.isResizable && a.preventCollision === b.preventCollision && a.useCSSTransforms === b.useCSSTransforms && a.transformScale === b.transformScale && a.isDroppable === b.isDroppable && isEqualImpl(a.resizeHandles, b.resizeHandles) && isEqualImpl(a.resizeHandle, b.resizeHandle) && a.onLayoutChange === b.onLayoutChange && a.onDragStart === b.onDragStart && a.onDrag === b.onDrag && a.onDragStop === b.onDragStop && a.onResizeStart === b.onResizeStart && a.onResize === b.onResize && a.onResizeStop === b.onResizeStop && a.onDrop === b.onDrop && isEqualImpl(a.droppingItem, b.droppingItem) && isEqualImpl(a.innerRef, b.innerRef);
+  return a.className === b.className && isEqualImpl(a.style, b.style) && a.width === b.width && a.autoSize === b.autoSize && a.cols === b.cols && a.draggableCancel === b.draggableCancel && a.draggableHandle === b.draggableHandle && isEqualImpl(a.verticalCompact, b.verticalCompact) && isEqualImpl(a.compactType, b.compactType) && isEqualImpl(a.layout, b.layout) && isEqualImpl(a.margin, b.margin) && isEqualImpl(a.containerPadding, b.containerPadding) && a.rowHeight === b.rowHeight && a.maxRows === b.maxRows && a.isBounded === b.isBounded && a.isDraggable === b.isDraggable && a.isResizable === b.isResizable && a.allowOverlap === b.allowOverlap && a.preventCollision === b.preventCollision && a.useCSSTransforms === b.useCSSTransforms && a.transformScale === b.transformScale && a.isDroppable === b.isDroppable && isEqualImpl(a.resizeHandles, b.resizeHandles) && isEqualImpl(a.resizeHandle, b.resizeHandle) && a.onLayoutChange === b.onLayoutChange && a.onDragStart === b.onDragStart && a.onDrag === b.onDrag && a.onDragStop === b.onDragStop && a.onResizeStart === b.onResizeStart && a.onResize === b.onResize && a.onResizeStop === b.onResizeStop && a.onDrop === b.onDrop && isEqualImpl(a.droppingItem, b.droppingItem) && isEqualImpl(a.innerRef, b.innerRef);
 };

package/build/utils.js

@@ -29,7 +29,6 @@ exports.sortLayoutItemsByColRow = sortLayoutItemsByColRow;
 exports.synchronizeLayoutWithChildren = synchronizeLayoutWithChildren;
 exports.validateLayout = validateLayout;
 exports.compactType = compactType;
-exports.autoBindHandlers = autoBindHandlers;
 exports.noop = exports.fastRGLPropsEqual = void 0;
 
 var _lodash = _interopRequireDefault(require("lodash.isequal"));
@@ -164,9 +163,9 @@ function childrenEqual(a
 /*: boolean*/
 {
   return (0, _lodash.default)(_react.default.Children.map(a, function (c) {
-    return c.key;
+    return c === null || c === void 0 ? void 0 : c.key;
   }), _react.default.Children.map(b, function (c) {
-    return c.key;
+    return c === null || c === void 0 ? void 0 : c.key;
   }));
 }
 /**
@@ -506,6 +505,8 @@ function moveElement(layout
 /*: CompactType*/
 , cols
 /*: number*/
+, allowOverlap
+/*: ?boolean*/
 )
 /*: Layout*/
 {
@@ -532,10 +533,13 @@ function moveElement(layout
   var collisions = getAllCollisions(sorted, l); // There was a collision; abort
 
   if (preventCollision && collisions.length) {
-    log("Collision prevented on ".concat(l.i, ", reverting."));
-    l.x = oldX;
-    l.y = oldY;
-    l.moved = false;
+    if (!allowOverlap) {
+      log("Collision prevented on ".concat(l.i, ", reverting."));
+      l.x = oldX;
+      l.y = oldY;
+      l.moved = false;
+    }
+
     return layout;
   } // Move each item that collides away from this element.
 
@@ -677,7 +681,8 @@ function sortLayoutItems(layout
 )
 /*: Layout*/
 {
-  if (compactType === "horizontal") return sortLayoutItemsByColRow(layout);else return sortLayoutItemsByRowCol(layout);
+  if (compactType === "horizontal") return sortLayoutItemsByColRow(layout);
+  if (compactType === "vertical") return sortLayoutItemsByRowCol(layout);else return layout;
 }
 /**
  * Sort layout items by row ascending and column ascending.
@@ -744,6 +749,8 @@ function synchronizeLayoutWithChildren(initialLayout
 /*: number*/
 , compactType
 /*: CompactType*/
+, allowOverlap
+/*: ?boolean*/
 )
 /*: Layout*/
 {
@@ -755,14 +762,14 @@ function synchronizeLayoutWithChildren(initialLayout
 
   _react.default.Children.forEach(children, function (child
   /*: ReactElement<any>*/
-  , i
-  /*: number*/
   ) {
-    // Don't overwrite if it already exists.
+    // Child may not exist
+    if ((child === null || child === void 0 ? void 0 : child.key) == null) return; // Don't overwrite if it already exists.
+
     var exists = getLayoutItem(initialLayout, String(child.key));
 
     if (exists) {
-      layout[i] = cloneLayoutItem(exists);
+      layout.push(cloneLayoutItem(exists));
     } else {
       if (!isProduction && child.props._grid) {
         console.warn("`_grid` properties on children have been deprecated as of React 15.2. " + // eslint-disable-line
@@ -777,19 +784,19 @@ function synchronizeLayoutWithChildren(initialLayout
         } // FIXME clone not really necessary here
 
 
-        layout[i] = cloneLayoutItem(_objectSpread(_objectSpread({}, g), {}, {
+        layout.push(cloneLayoutItem(_objectSpread(_objectSpread({}, g), {}, {
           i: child.key
-        }));
+        })));
       } else {
         // Nothing provided: ensure this is added to the bottom
         // FIXME clone not really necessary here
-        layout[i] = cloneLayoutItem({
+        layout.push(cloneLayoutItem({
           w: 1,
           h: 1,
           x: 0,
           y: bottom(layout),
           i: String(child.key)
-        });
+        }));
       }
     }
   }); // Correct the layout.
@@ -798,7 +805,7 @@ function synchronizeLayoutWithChildren(initialLayout
   var correctedLayout = correctBounds(layout, {
     cols: cols
   });
-  return compact(correctedLayout, compactType, cols);
+  return allowOverlap ? correctedLayout : compact(correctedLayout, compactType, cols);
 }
 /**
  * Validate a layout. Throws errors.
@@ -850,19 +857,6 @@ function compactType(props
       compactType = _ref3.compactType;
 
   return verticalCompact === false ? null : compactType;
-} // Flow can't really figure this out, so we just use Object
-
-
-function autoBindHandlers(el
-/*: Object*/
-, fns
-/*: Array<string>*/
-)
-/*: void*/
-{
-  fns.forEach(function (key) {
-    return el[key] = el[key].bind(el);
-  });
 }
 
 function log() {