Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-grid-layout

Package Overview
Dependencies
Maintainers
1
Versions
105
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-grid-layout - npm Package Compare versions

Comparing version 1.2.5 to 1.3.0

foo.html

12

build/calculateUtils.js

@@ -91,5 +91,5 @@ "use strict";

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.

@@ -102,5 +102,5 @@

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]);
}

@@ -107,0 +107,0 @@ return out;

@@ -16,2 +16,4 @@ "use strict";

var _excluded = ["measureBeforeMount"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

@@ -41,3 +43,3 @@

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); }

@@ -130,3 +132,3 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

measureBeforeMount = _this$props.measureBeforeMount,
rest = _objectWithoutProperties(_this$props, ["measureBeforeMount"]);
rest = _objectWithoutProperties(_this$props, _excluded);

@@ -133,0 +135,0 @@ if (measureBeforeMount && !this.mounted) {

// 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);
};

@@ -44,3 +44,3 @@ "use strict";

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); }

@@ -47,0 +47,0 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

@@ -30,9 +30,9 @@ "use strict";

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

@@ -43,13 +43,13 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

@@ -68,3 +68,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

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); }

@@ -98,11 +98,3 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

// TODO publish internal ReactClass displayName transform
// Refactored to another module to make way for preval
function ReactGridLayout(props
/*: Props*/
, context
/*: any*/
)
/*: void*/
{
function ReactGridLayout() {
var _this;

@@ -112,8 +104,12 @@

_this = _super.call(this, props, context);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "state", {
activeDrag: null,
layout: (0, _utils.synchronizeLayoutWithChildren)(_this.props.layout, _this.props.children, _this.props.cols, // Legacy support for verticalCompact: false
(0, _utils.compactType)(_this.props)),
(0, _utils.compactType)(_this.props), _this.props.allowOverlap),
mounted: false,

@@ -129,23 +125,238 @@ oldDragItem: null,

_defineProperty(_assertThisInitialized(_this), "onDragStart", function (i
/*: string*/
, x
/*: number*/
, y
/*: number*/
, _ref) {
var e = _ref.e,
node = _ref.node;
var layout = _this.state.layout;
var l = (0, _utils.getLayoutItem)(layout, i);
if (!l) return;
_this.setState({
oldDragItem: (0, _utils.cloneLayoutItem)(l),
oldLayout: _this.state.layout
});
return _this.props.onDragStart(layout, l, l, null, e, node);
});
_defineProperty(_assertThisInitialized(_this), "onDrag", function (i, x, y, _ref2) {
var e = _ref2.e,
node = _ref2.node;
var oldDragItem = _this.state.oldDragItem;
var layout = _this.state.layout;
var _this$props = _this.props,
cols = _this$props.cols,
allowOverlap = _this$props.allowOverlap;
var l = (0, _utils.getLayoutItem)(layout, i);
if (!l) return; // Create placeholder (display only)
var placeholder = {
w: l.w,
h: l.h,
x: l.x,
y: l.y,
placeholder: true,
i: i
}; // Move the element to the dragged location.
var isUserAction = true;
layout = (0, _utils.moveElement)(layout, l, x, y, isUserAction, _this.props.preventCollision, (0, _utils.compactType)(_this.props), cols, allowOverlap);
_this.props.onDrag(layout, oldDragItem, l, placeholder, e, node);
_this.setState({
layout: allowOverlap ? layout : (0, _utils.compact)(layout, (0, _utils.compactType)(_this.props), cols),
activeDrag: placeholder
});
});
_defineProperty(_assertThisInitialized(_this), "onDragStop", function (i, x, y, _ref3) {
var e = _ref3.e,
node = _ref3.node;
if (!_this.state.activeDrag) return;
var oldDragItem = _this.state.oldDragItem;
var layout = _this.state.layout;
var _this$props2 = _this.props,
cols = _this$props2.cols,
preventCollision = _this$props2.preventCollision,
allowOverlap = _this$props2.allowOverlap;
var l = (0, _utils.getLayoutItem)(layout, i);
if (!l) return; // Move the element here
var isUserAction = true;
layout = (0, _utils.moveElement)(layout, l, x, y, isUserAction, preventCollision, (0, _utils.compactType)(_this.props), cols, allowOverlap);
_this.props.onDragStop(layout, oldDragItem, l, null, e, node); // Set state
var newLayout = allowOverlap ? layout : (0, _utils.compact)(layout, (0, _utils.compactType)(_this.props), cols);
var oldLayout = _this.state.oldLayout;
_this.setState({
activeDrag: null,
layout: newLayout,
oldDragItem: null,
oldLayout: null
});
_this.onLayoutMaybeChanged(newLayout, oldLayout);
});
_defineProperty(_assertThisInitialized(_this), "onResizeStart", function (i, w, h, _ref4) {
var e = _ref4.e,
node = _ref4.node;
var layout = _this.state.layout;
var l = (0, _utils.getLayoutItem)(layout, i);
if (!l) return;
_this.setState({
oldResizeItem: (0, _utils.cloneLayoutItem)(l),
oldLayout: _this.state.layout
});
_this.props.onResizeStart(layout, l, l, null, e, node);
});
_defineProperty(_assertThisInitialized(_this), "onResize", function (i, w, h, _ref5) {
var e = _ref5.e,
node = _ref5.node;
var _this$state = _this.state,
layout = _this$state.layout,
oldResizeItem = _this$state.oldResizeItem;
var _this$props3 = _this.props,
cols = _this$props3.cols,
preventCollision = _this$props3.preventCollision,
allowOverlap = _this$props3.allowOverlap;
var _withLayoutItem = (0, _utils.withLayoutItem)(layout, i, function (l) {
// Something like quad tree should be used
// to find collisions faster
var hasCollisions;
if (preventCollision && !allowOverlap) {
var collisions = (0, _utils.getAllCollisions)(layout, _objectSpread(_objectSpread({}, l), {}, {
w: w,
h: h
})).filter(function (layoutItem) {
return layoutItem.i !== l.i;
});
hasCollisions = collisions.length > 0; // If we're colliding, we need adjust the placeholder.
// If we're colliding, we need adjust the placeholder.
if (hasCollisions) {
// adjust w && h to maximum allowed space
var leastX = Infinity,
leastY = Infinity;
collisions.forEach(function (layoutItem) {
if (layoutItem.x > l.x) leastX = Math.min(leastX, layoutItem.x);
if (layoutItem.y > l.y) leastY = Math.min(leastY, layoutItem.y);
});
if (Number.isFinite(leastX)) l.w = leastX - l.x;
if (Number.isFinite(leastY)) l.h = leastY - l.y;
}
}
if (!hasCollisions) {
// Set new width and height.
l.w = w;
l.h = h;
}
return l;
}),
_withLayoutItem2 = _slicedToArray(_withLayoutItem, 2),
newLayout = _withLayoutItem2[0],
l = _withLayoutItem2[1]; // Shouldn't ever happen, but typechecking makes it necessary
if (!l) return; // Create placeholder element (display only)
var placeholder = {
w: l.w,
h: l.h,
x: l.x,
y: l.y,
static: true,
i: i
};
_this.props.onResize(newLayout, oldResizeItem, l, placeholder, e, node); // Re-compact the newLayout and set the drag placeholder.
_this.setState({
layout: allowOverlap ? newLayout : (0, _utils.compact)(newLayout, (0, _utils.compactType)(_this.props), cols),
activeDrag: placeholder
});
});
_defineProperty(_assertThisInitialized(_this), "onResizeStop", function (i, w, h, _ref6) {
var e = _ref6.e,
node = _ref6.node;
var _this$state2 = _this.state,
layout = _this$state2.layout,
oldResizeItem = _this$state2.oldResizeItem;
var _this$props4 = _this.props,
cols = _this$props4.cols,
allowOverlap = _this$props4.allowOverlap;
var l = (0, _utils.getLayoutItem)(layout, i);
_this.props.onResizeStop(layout, oldResizeItem, l, null, e, node); // Set state
var newLayout = allowOverlap ? layout : (0, _utils.compact)(layout, (0, _utils.compactType)(_this.props), cols);
var oldLayout = _this.state.oldLayout;
_this.setState({
activeDrag: null,
layout: newLayout,
oldResizeItem: null,
oldLayout: null
});
_this.onLayoutMaybeChanged(newLayout, oldLayout);
});
_defineProperty(_assertThisInitialized(_this), "onDragOver", function (e) {
var _e$nativeEvent$target;
// we should ignore events from layout's children in Firefox
e.preventDefault(); // Prevent any browser native action
e.stopPropagation(); // we should ignore events from layout's children in Firefox
// to avoid unpredictable jumping of a dropping placeholder
// FIXME remove this hack
if (isFirefox && // $FlowIgnore can't figure this out
!((_e$nativeEvent$target = e.nativeEvent.target) !== null && _e$nativeEvent$target !== void 0 && _e$nativeEvent$target.classList.contains(layoutClassName))) {
// without this Firefox will not allow drop if currently over droppingItem
e.preventDefault();
return false;
}
var _this$props = _this.props,
droppingItem = _this$props.droppingItem,
margin = _this$props.margin,
cols = _this$props.cols,
rowHeight = _this$props.rowHeight,
maxRows = _this$props.maxRows,
width = _this$props.width,
containerPadding = _this$props.containerPadding;
var _this$props5 = _this.props,
droppingItem = _this$props5.droppingItem,
onDropDragOver = _this$props5.onDropDragOver,
margin = _this$props5.margin,
cols = _this$props5.cols,
rowHeight = _this$props5.rowHeight,
maxRows = _this$props5.maxRows,
width = _this$props5.width,
containerPadding = _this$props5.containerPadding,
transformScale = _this$props5.transformScale; // Allow user to customize the dropping item or short-circuit the drop based on the results
// of the `onDragOver(e: Event)` callback.
var onDragOverResult = onDropDragOver === null || onDropDragOver === void 0 ? void 0 : onDropDragOver(e);
if (onDragOverResult === false) {
if (_this.state.droppingDOMNode) {
_this.removeDroppingPlaceholder();
}
return false;
}
var finalDroppingItem = _objectSpread(_objectSpread({}, droppingItem), onDragOverResult);
var layout = _this.state.layout; // This is relative to the DOM element that this event fired for.

@@ -157,4 +368,4 @@

var droppingPosition = {
left: layerX,
top: layerY,
left: layerX / transformScale,
top: layerY / transformScale,
e: e

@@ -174,10 +385,10 @@ };

};
var calculatedPosition = (0, _calculateUtils.calcXY)(positionParams, layerY, layerX, droppingItem.w, droppingItem.h);
var calculatedPosition = (0, _calculateUtils.calcXY)(positionParams, layerY, layerX, finalDroppingItem.w, finalDroppingItem.h);
_this.setState({
droppingDOMNode: /*#__PURE__*/React.createElement("div", {
key: droppingItem.i
key: finalDroppingItem.i
}),
droppingPosition: droppingPosition,
layout: [].concat(_toConsumableArray(layout), [_objectSpread(_objectSpread({}, droppingItem), {}, {
layout: [].concat(_toConsumableArray(layout), [_objectSpread(_objectSpread({}, finalDroppingItem), {}, {
x: calculatedPosition.x,

@@ -201,11 +412,8 @@ y: calculatedPosition.y,

}
e.stopPropagation();
e.preventDefault();
});
_defineProperty(_assertThisInitialized(_this), "removeDroppingPlaceholder", function () {
var _this$props2 = _this.props,
droppingItem = _this$props2.droppingItem,
cols = _this$props2.cols;
var _this$props6 = _this.props,
droppingItem = _this$props6.droppingItem,
cols = _this$props6.cols;
var layout = _this.state.layout;

@@ -224,3 +432,5 @@ var newLayout = (0, _utils.compact)(layout.filter(function (l) {

_defineProperty(_assertThisInitialized(_this), "onDragLeave", function () {
_defineProperty(_assertThisInitialized(_this), "onDragLeave", function (e) {
e.preventDefault(); // Prevent any browser native action
_this.dragEnterCounter--; // onDragLeave can be triggered on each layout's child.

@@ -237,3 +447,5 @@ // But we know that count of dragEnter and dragLeave events

_defineProperty(_assertThisInitialized(_this), "onDragEnter", function () {
_defineProperty(_assertThisInitialized(_this), "onDragEnter", function (e) {
e.preventDefault(); // Prevent any browser native action
_this.dragEnterCounter++;

@@ -245,2 +457,4 @@ });

) {
e.preventDefault(); // Prevent any browser native action
var droppingItem = _this.props.droppingItem;

@@ -259,3 +473,2 @@ var layout = _this.state.layout;

(0, _utils.autoBindHandlers)(_assertThisInitialized(_this), ["onDragStart", "onDrag", "onDragStop", "onResizeStart", "onResize", "onResizeStop"]);
return _this;

@@ -327,114 +540,2 @@ }

}, {
key: "onDragStart",
value: function onDragStart(i
/*: string*/
, x
/*: number*/
, y
/*: number*/
, _ref)
/*: void*/
{
var e = _ref.e,
node = _ref.node;
var layout = this.state.layout;
var l = (0, _utils.getLayoutItem)(layout, i);
if (!l) return;
this.setState({
oldDragItem: (0, _utils.cloneLayoutItem)(l),
oldLayout: this.state.layout
});
return this.props.onDragStart(layout, l, l, null, e, node);
}
/**
* Each drag movement create a new dragelement and move the element to the dragged location
* @param {String} i Id of the child
* @param {Number} x X position of the move
* @param {Number} y Y position of the move
* @param {Event} e The mousedown event
* @param {Element} node The current dragging DOM element
*/
}, {
key: "onDrag",
value: function onDrag(i
/*: string*/
, x
/*: number*/
, y
/*: number*/
, _ref2)
/*: void*/
{
var e = _ref2.e,
node = _ref2.node;
var oldDragItem = this.state.oldDragItem;
var layout = this.state.layout;
var cols = this.props.cols;
var l = (0, _utils.getLayoutItem)(layout, i);
if (!l) return; // Create placeholder (display only)
var placeholder = {
w: l.w,
h: l.h,
x: l.x,
y: l.y,
placeholder: true,
i: i
}; // Move the element to the dragged location.
var isUserAction = true;
layout = (0, _utils.moveElement)(layout, l, x, y, isUserAction, this.props.preventCollision, (0, _utils.compactType)(this.props), cols);
this.props.onDrag(layout, oldDragItem, l, placeholder, e, node);
this.setState({
layout: (0, _utils.compact)(layout, (0, _utils.compactType)(this.props), cols),
activeDrag: placeholder
});
}
/**
* When dragging stops, figure out which position the element is closest to and update its x and y.
* @param {String} i Index of the child.
* @param {Number} x X position of the move
* @param {Number} y Y position of the move
* @param {Event} e The mousedown event
* @param {Element} node The current dragging DOM element
*/
}, {
key: "onDragStop",
value: function onDragStop(i
/*: string*/
, x
/*: number*/
, y
/*: number*/
, _ref3)
/*: void*/
{
var e = _ref3.e,
node = _ref3.node;
if (!this.state.activeDrag) return;
var oldDragItem = this.state.oldDragItem;
var layout = this.state.layout;
var _this$props3 = this.props,
cols = _this$props3.cols,
preventCollision = _this$props3.preventCollision;
var l = (0, _utils.getLayoutItem)(layout, i);
if (!l) return; // Move the element here
var isUserAction = true;
layout = (0, _utils.moveElement)(layout, l, x, y, isUserAction, preventCollision, (0, _utils.compactType)(this.props), cols);
this.props.onDragStop(layout, oldDragItem, l, null, e, node); // Set state
var newLayout = (0, _utils.compact)(layout, (0, _utils.compactType)(this.props), cols);
var oldLayout = this.state.oldLayout;
this.setState({
activeDrag: null,
layout: newLayout,
oldDragItem: null,
oldLayout: null
});
this.onLayoutMaybeChanged(newLayout, oldLayout);
}
}, {
key: "onLayoutMaybeChanged",

@@ -453,125 +554,4 @@ value: function onLayoutMaybeChanged(newLayout

}, {
key: "onResizeStart",
value: function onResizeStart(i
/*: string*/
, w
/*: number*/
, h
/*: number*/
, _ref4) {
var e = _ref4.e,
node = _ref4.node;
var layout = this.state.layout;
var l = (0, _utils.getLayoutItem)(layout, i);
if (!l) return;
this.setState({
oldResizeItem: (0, _utils.cloneLayoutItem)(l),
oldLayout: this.state.layout
});
this.props.onResizeStart(layout, l, l, null, e, node);
}
}, {
key: "onResize",
value: function onResize(i
/*: string*/
, w
/*: number*/
, h
/*: number*/
, _ref5) {
var e = _ref5.e,
node = _ref5.node;
var _this$state = this.state,
layout = _this$state.layout,
oldResizeItem = _this$state.oldResizeItem;
var _this$props4 = this.props,
cols = _this$props4.cols,
preventCollision = _this$props4.preventCollision;
var _withLayoutItem = (0, _utils.withLayoutItem)(layout, i, function (l) {
// Something like quad tree should be used
// to find collisions faster
var hasCollisions;
if (preventCollision) {
var collisions = (0, _utils.getAllCollisions)(layout, _objectSpread(_objectSpread({}, l), {}, {
w: w,
h: h
})).filter(function (layoutItem) {
return layoutItem.i !== l.i;
});
hasCollisions = collisions.length > 0; // If we're colliding, we need adjust the placeholder.
// If we're colliding, we need adjust the placeholder.
if (hasCollisions) {
// adjust w && h to maximum allowed space
var leastX = Infinity,
leastY = Infinity;
collisions.forEach(function (layoutItem) {
if (layoutItem.x > l.x) leastX = Math.min(leastX, layoutItem.x);
if (layoutItem.y > l.y) leastY = Math.min(leastY, layoutItem.y);
});
if (Number.isFinite(leastX)) l.w = leastX - l.x;
if (Number.isFinite(leastY)) l.h = leastY - l.y;
}
}
if (!hasCollisions) {
// Set new width and height.
l.w = w;
l.h = h;
}
return l;
}),
_withLayoutItem2 = _slicedToArray(_withLayoutItem, 2),
newLayout = _withLayoutItem2[0],
l = _withLayoutItem2[1]; // Shouldn't ever happen, but typechecking makes it necessary
if (!l) return; // Create placeholder element (display only)
var placeholder = {
w: l.w,
h: l.h,
x: l.x,
y: l.y,
static: true,
i: i
};
this.props.onResize(newLayout, oldResizeItem, l, placeholder, e, node); // Re-compact the newLayout and set the drag placeholder.
this.setState({
layout: (0, _utils.compact)(newLayout, (0, _utils.compactType)(this.props), cols),
activeDrag: placeholder
});
}
}, {
key: "onResizeStop",
value: function onResizeStop(i
/*: string*/
, w
/*: number*/
, h
/*: number*/
, _ref6) {
var e = _ref6.e,
node = _ref6.node;
var _this$state2 = this.state,
layout = _this$state2.layout,
oldResizeItem = _this$state2.oldResizeItem;
var cols = this.props.cols;
var l = (0, _utils.getLayoutItem)(layout, i);
this.props.onResizeStop(layout, oldResizeItem, l, null, e, node); // Set state
var newLayout = (0, _utils.compact)(layout, (0, _utils.compactType)(this.props), cols);
var oldLayout = this.state.oldLayout;
this.setState({
activeDrag: null,
layout: newLayout,
oldResizeItem: null,
oldLayout: null
});
this.onLayoutMaybeChanged(newLayout, oldLayout);
}
key: "placeholder",
value:
/**

@@ -581,6 +561,3 @@ * Create a placeholder object.

*/
}, {
key: "placeholder",
value: function placeholder()
function placeholder()
/*: ?ReactElement<any>*/

@@ -590,11 +567,11 @@ {

if (!activeDrag) return null;
var _this$props5 = this.props,
width = _this$props5.width,
cols = _this$props5.cols,
margin = _this$props5.margin,
containerPadding = _this$props5.containerPadding,
rowHeight = _this$props5.rowHeight,
maxRows = _this$props5.maxRows,
useCSSTransforms = _this$props5.useCSSTransforms,
transformScale = _this$props5.transformScale; // {...this.state.activeDrag} is pretty slow, actually
var _this$props7 = this.props,
width = _this$props7.width,
cols = _this$props7.cols,
margin = _this$props7.margin,
containerPadding = _this$props7.containerPadding,
rowHeight = _this$props7.rowHeight,
maxRows = _this$props7.maxRows,
useCSSTransforms = _this$props7.useCSSTransforms,
transformScale = _this$props7.transformScale; // {...this.state.activeDrag} is pretty slow, actually

@@ -639,18 +616,18 @@ return /*#__PURE__*/React.createElement(_GridItem.default, {

if (!l) return null;
var _this$props6 = this.props,
width = _this$props6.width,
cols = _this$props6.cols,
margin = _this$props6.margin,
containerPadding = _this$props6.containerPadding,
rowHeight = _this$props6.rowHeight,
maxRows = _this$props6.maxRows,
isDraggable = _this$props6.isDraggable,
isResizable = _this$props6.isResizable,
isBounded = _this$props6.isBounded,
useCSSTransforms = _this$props6.useCSSTransforms,
transformScale = _this$props6.transformScale,
draggableCancel = _this$props6.draggableCancel,
draggableHandle = _this$props6.draggableHandle,
resizeHandles = _this$props6.resizeHandles,
resizeHandle = _this$props6.resizeHandle;
var _this$props8 = this.props,
width = _this$props8.width,
cols = _this$props8.cols,
margin = _this$props8.margin,
containerPadding = _this$props8.containerPadding,
rowHeight = _this$props8.rowHeight,
maxRows = _this$props8.maxRows,
isDraggable = _this$props8.isDraggable,
isResizable = _this$props8.isResizable,
isBounded = _this$props8.isBounded,
useCSSTransforms = _this$props8.useCSSTransforms,
transformScale = _this$props8.transformScale,
draggableCancel = _this$props8.draggableCancel,
draggableHandle = _this$props8.draggableHandle,
resizeHandles = _this$props8.resizeHandles,
resizeHandle = _this$props8.resizeHandle;
var _this$state3 = this.state,

@@ -712,7 +689,7 @@ mounted = _this$state3.mounted,

var _this$props7 = this.props,
className = _this$props7.className,
style = _this$props7.style,
isDroppable = _this$props7.isDroppable,
innerRef = _this$props7.innerRef;
var _this$props9 = this.props,
className = _this$props9.className,
style = _this$props9.style,
isDroppable = _this$props9.isDroppable,
innerRef = _this$props9.innerRef;
var mergedClassName = (0, _classnames.default)(layoutClassName, className);

@@ -764,3 +741,3 @@

if (newLayoutBase) {
var newLayout = (0, _utils.synchronizeLayoutWithChildren)(newLayoutBase, nextProps.children, nextProps.cols, (0, _utils.compactType)(nextProps));
var newLayout = (0, _utils.synchronizeLayoutWithChildren)(newLayoutBase, nextProps.children, nextProps.cols, (0, _utils.compactType)(nextProps), nextProps.allowOverlap);
return {

@@ -805,2 +782,3 @@ layout: newLayout,

isResizable: true,
allowOverlap: false,
isDroppable: false,

@@ -825,3 +803,4 @@ useCSSTransforms: true,

onResizeStop: _utils.noop,
onDrop: _utils.noop
onDrop: _utils.noop,
onDropDragOver: _utils.noop
});

@@ -59,2 +59,3 @@ "use strict";

resizeHandle?: ResizeHandle,
allowOverlap: boolean,

@@ -69,2 +70,3 @@ // Callbacks

onResizeStop: EventCallback,
onDropDragOver: (e: DragOverEvent) => ?({| w?: number, h?: number |} | false),
onDrop: (layout: Layout, item: ?LayoutItem, e: Event) => void,

@@ -152,2 +154,4 @@ children: ReactChildrenArray<ReactElement<any>>,

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.

@@ -205,2 +209,4 @@ preventCollision: _propTypes.default.bool,

_react.default.Children.forEach(children, function (child) {
if ((child === null || child === void 0 ? void 0 : child.key) == null) return;
if (keys[child.key]) {

@@ -207,0 +213,0 @@ throw new Error('Duplicate child key "' + child.key + '" found! This will cause problems in ReactGridLayout.');

@@ -22,2 +22,4 @@ "use strict";

var _excluded = ["breakpoint", "breakpoints", "cols", "layouts", "margin", "containerPadding", "onBreakpointChange", "onLayoutChange", "onWidthChange"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

@@ -51,3 +53,3 @@

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); }

@@ -62,2 +64,3 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

// $FlowFixMe[method-unbinding]
var type = function type(obj) {

@@ -123,2 +126,3 @@ return Object.prototype.toString.call(obj);

{|
allowOverlap: 0,
breakpoints: 0,

@@ -227,3 +231,3 @@ cols: 0,

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.

@@ -262,3 +266,3 @@ newLayouts[newBreakpoint] = layout; // callbacks

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 */

@@ -316,2 +320,3 @@

breakpoints: _propTypes.default.object,
allowOverlap: _propTypes.default.bool,
// # of cols. This is a breakpoint -> cols map

@@ -387,2 +392,3 @@ cols: _propTypes.default.object,

margin: [10, 10],
allowOverlap: false,
onBreakpointChange: _utils.noop,

@@ -389,0 +395,0 @@ onLayoutChange: _utils.noop,

@@ -32,3 +32,2 @@ "use strict";

exports.compactType = compactType;
exports.autoBindHandlers = autoBindHandlers;
exports.noop = exports.fastRGLPropsEqual = void 0;

@@ -168,5 +167,5 @@

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;
}));

@@ -511,2 +510,4 @@ }

/*: number*/
, allowOverlap
/*: ?boolean*/
)

@@ -538,6 +539,9 @@ /*: Layout*/

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;

@@ -684,3 +688,4 @@ } // Move each item that collides away from this element.

{
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;
}

@@ -752,2 +757,4 @@ /**

/*: CompactType*/
, allowOverlap
/*: ?boolean*/
)

@@ -764,10 +771,10 @@ /*: Layout*/

/*: 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 {

@@ -787,9 +794,9 @@ if (!isProduction && child.props._grid) {

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,

@@ -800,3 +807,3 @@ h: 1,

i: String(child.key)
});
}));
}

@@ -810,3 +817,3 @@ }

});
return compact(correctedLayout, compactType, cols);
return allowOverlap ? correctedLayout : compact(correctedLayout, compactType, cols);
}

@@ -863,15 +870,2 @@ /**

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);
});
}

@@ -878,0 +872,0 @@

# Changelog
1.3.0 (Aug 27, 2021)
---
### New Features
- `allowOverlap` prop, when `true`, allows overlapping grid items. [#1470](https://github.com/react-grid-layout/react-grid-layout/pull/1470)
- Add `onDropDragOver` callback. [#1395](https://github.com/react-grid-layout/react-grid-layout/pull/1395)
- Use this callback to dynamically adjust the `droppingItem` based on what is being dragged over. Return `w` and `h` to adjust the item. It is then [spread into the dropping placeholder](https://github.com/react-grid-layout/react-grid-layout/pull/1395/files#diff-83ab569936bfd4bf0460a4f23653ecbe8bc88509062c95e75c9402218b2b8733R609).
- This callback has the type:
- `onDragOver: (e: DragOverEvent) => { w: number, h: number } | false;`
- Return `false` to short-circuit the dragover.
### Bugfixes
- Remove sorting when `compactType` is `null`. [#1474](https://github.com/react-grid-layout/react-grid-layout/pull/1474)
- Droppable fixes for Chrome behavior. [#1442](https://github.com/react-grid-layout/react-grid-layout/issues/1442) [#1448](https://github.com/react-grid-layout/react-grid-layout/issues/1442)
- Allow `null` children as a convenience so that inline expressions don't break the library. [#1296](https://github.com/react-grid-layout/react-grid-layout/pull/1296)
- Various dependency upgrades.
### Documentation
- Add docs on using custom components as grid children.
- Note required class on resizable handles for proper styling.
1.2.5 (May 10, 2021)

@@ -4,0 +26,0 @@ ---

@@ -7,3 +7,2 @@ // @flow

import {
autoBindHandlers,
bottom,

@@ -99,2 +98,3 @@ childrenEqual,

isResizable: true,
allowOverlap: false,
isDroppable: false,

@@ -119,3 +119,4 @@ useCSSTransforms: true,

onResizeStop: noop,
onDrop: noop
onDrop: noop,
onDropDragOver: noop
};

@@ -130,3 +131,4 @@

// Legacy support for verticalCompact: false
compactType(this.props)
compactType(this.props),
this.props.allowOverlap
),

@@ -143,14 +145,2 @@ mounted: false,

constructor(props: Props, context: any): void {
super(props, context);
autoBindHandlers(this, [
"onDragStart",
"onDrag",
"onDragStop",
"onResizeStart",
"onResize",
"onResizeStop"
]);
}
componentDidMount() {

@@ -193,3 +183,4 @@ this.setState({ mounted: true });

nextProps.cols,
compactType(nextProps)
compactType(nextProps),
nextProps.allowOverlap
);

@@ -258,3 +249,3 @@

*/
onDragStart(
onDragStart: (i: string, x: number, y: number, GridDragEvent) => void = (
i: string,

@@ -264,3 +255,3 @@ x: number,

{ e, node }: GridDragEvent
): void {
) => {
const { layout } = this.state;

@@ -276,3 +267,3 @@ const l = getLayoutItem(layout, i);

return this.props.onDragStart(layout, l, l, null, e, node);
}
};

@@ -287,6 +278,11 @@ /**

*/
onDrag(i: string, x: number, y: number, { e, node }: GridDragEvent): void {
onDrag: (i: string, x: number, y: number, GridDragEvent) => void = (
i,
x,
y,
{ e, node }
) => {
const { oldDragItem } = this.state;
let { layout } = this.state;
const { cols } = this.props;
const { cols, allowOverlap } = this.props;
const l = getLayoutItem(layout, i);

@@ -315,3 +311,4 @@ if (!l) return;

compactType(this.props),
cols
cols,
allowOverlap
);

@@ -322,6 +319,8 @@

this.setState({
layout: compact(layout, compactType(this.props), cols),
layout: allowOverlap
? layout
: compact(layout, compactType(this.props), cols),
activeDrag: placeholder
});
}
};

@@ -336,8 +335,8 @@ /**

*/
onDragStop(
i: string,
x: number,
y: number,
{ e, node }: GridDragEvent
): void {
onDragStop: (i: string, x: number, y: number, GridDragEvent) => void = (
i,
x,
y,
{ e, node }
) => {
if (!this.state.activeDrag) return;

@@ -347,3 +346,3 @@

let { layout } = this.state;
const { cols, preventCollision } = this.props;
const { cols, preventCollision, allowOverlap } = this.props;
const l = getLayoutItem(layout, i);

@@ -362,3 +361,4 @@ if (!l) return;

compactType(this.props),
cols
cols,
allowOverlap
);

@@ -369,3 +369,5 @@

// Set state
const newLayout = compact(layout, compactType(this.props), cols);
const newLayout = allowOverlap
? layout
: compact(layout, compactType(this.props), cols);
const { oldLayout } = this.state;

@@ -380,3 +382,3 @@ this.setState({

this.onLayoutMaybeChanged(newLayout, oldLayout);
}
};

@@ -391,3 +393,8 @@ onLayoutMaybeChanged(newLayout: Layout, oldLayout: ?Layout) {

onResizeStart(i: string, w: number, h: number, { e, node }: GridResizeEvent) {
onResizeStart: (i: string, w: number, h: number, GridResizeEvent) => void = (
i,
w,
h,
{ e, node }
) => {
const { layout } = this.state;

@@ -403,7 +410,12 @@ const l = getLayoutItem(layout, i);

this.props.onResizeStart(layout, l, l, null, e, node);
}
};
onResize(i: string, w: number, h: number, { e, node }: GridResizeEvent) {
onResize: (i: string, w: number, h: number, GridResizeEvent) => void = (
i,
w,
h,
{ e, node }
) => {
const { layout, oldResizeItem } = this.state;
const { cols, preventCollision } = this.props;
const { cols, preventCollision, allowOverlap } = this.props;

@@ -414,3 +426,3 @@ const [newLayout, l] = withLayoutItem(layout, i, l => {

let hasCollisions;
if (preventCollision) {
if (preventCollision && !allowOverlap) {
const collisions = getAllCollisions(layout, { ...l, w, h }).filter(

@@ -462,10 +474,17 @@ layoutItem => layoutItem.i !== l.i

this.setState({
layout: compact(newLayout, compactType(this.props), cols),
layout: allowOverlap
? newLayout
: compact(newLayout, compactType(this.props), cols),
activeDrag: placeholder
});
}
};
onResizeStop(i: string, w: number, h: number, { e, node }: GridResizeEvent) {
onResizeStop: (i: string, w: number, h: number, GridResizeEvent) => void = (
i,
w,
h,
{ e, node }
) => {
const { layout, oldResizeItem } = this.state;
const { cols } = this.props;
const { cols, allowOverlap } = this.props;
const l = getLayoutItem(layout, i);

@@ -476,3 +495,5 @@

// Set state
const newLayout = compact(layout, compactType(this.props), cols);
const newLayout = allowOverlap
? layout
: compact(layout, compactType(this.props), cols);
const { oldLayout } = this.state;

@@ -487,3 +508,3 @@ this.setState({

this.onLayoutMaybeChanged(newLayout, oldLayout);
}
};

@@ -625,2 +646,5 @@ /**

onDragOver: DragOverEvent => void | false = e => {
e.preventDefault(); // Prevent any browser native action
e.stopPropagation();
// we should ignore events from layout's children in Firefox

@@ -634,4 +658,2 @@ // to avoid unpredictable jumping of a dropping placeholder

) {
// without this Firefox will not allow drop if currently over droppingItem
e.preventDefault();
return false;

@@ -642,2 +664,3 @@ }

droppingItem,
onDropDragOver,
margin,

@@ -648,8 +671,20 @@ cols,

width,
containerPadding
containerPadding,
transformScale
} = this.props;
// Allow user to customize the dropping item or short-circuit the drop based on the results
// of the `onDragOver(e: Event)` callback.
const onDragOverResult = onDropDragOver?.(e);
if (onDragOverResult === false) {
if (this.state.droppingDOMNode) {
this.removeDroppingPlaceholder();
}
return false;
}
const finalDroppingItem = { ...droppingItem, ...onDragOverResult };
const { layout } = this.state;
// This is relative to the DOM element that this event fired for.
const { layerX, layerY } = e.nativeEvent;
const droppingPosition = { left: layerX, top: layerY, e };
const droppingPosition = { left: layerX / transformScale, top: layerY / transformScale, e };

@@ -670,8 +705,8 @@ if (!this.state.droppingDOMNode) {

layerX,
droppingItem.w,
droppingItem.h
finalDroppingItem.w,
finalDroppingItem.h
);
this.setState({
droppingDOMNode: <div key={droppingItem.i} />,
droppingDOMNode: <div key={finalDroppingItem.i} />,
droppingPosition,

@@ -681,3 +716,3 @@ layout: [

{
...droppingItem,
...finalDroppingItem,
x: calculatedPosition.x,

@@ -697,5 +732,2 @@ y: calculatedPosition.y,

}
e.stopPropagation();
e.preventDefault();
};

@@ -721,3 +753,4 @@

onDragLeave: () => void = () => {
onDragLeave: EventHandler = e => {
e.preventDefault(); // Prevent any browser native action
this.dragEnterCounter--;

@@ -735,3 +768,4 @@

onDragEnter: () => void = () => {
onDragEnter: EventHandler = e => {
e.preventDefault(); // Prevent any browser native action
this.dragEnterCounter++;

@@ -741,2 +775,3 @@ };

onDrop: EventHandler = (e: Event) => {
e.preventDefault(); // Prevent any browser native action
const { droppingItem } = this.props;

@@ -743,0 +778,0 @@ const { layout } = this.state;

@@ -9,3 +9,9 @@ // @flow

} from "react";
import type { EventCallback, CompactType, Layout, LayoutItem } from "./utils";
import type {
DragOverEvent,
EventCallback,
CompactType,
Layout,
LayoutItem
} from "./utils";

@@ -17,8 +23,18 @@ // util

export type ResizeHandleAxis = "s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne";
export type ResizeHandleAxis =
| "s"
| "w"
| "e"
| "n"
| "sw"
| "nw"
| "se"
| "ne";
export type ResizeHandle =
| ReactElement<any>
| ((resizeHandleAxis: ResizeHandleAxis, ref: ReactRef<HTMLElement>) => ReactElement<any>);
| ((
resizeHandleAxis: ResizeHandleAxis,
ref: ReactRef<HTMLElement>
) => ReactElement<any>);
// Defines which resize handles should be rendered (default: 'se')

@@ -34,9 +50,9 @@ // Allows for any combination of:

// 'ne' - Northeast handle (top-right)
export const resizeHandleAxesType: ReactPropsChainableTypeChecker = PropTypes.arrayOf(
PropTypes.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"])
);
export const resizeHandleAxesType: ReactPropsChainableTypeChecker =
PropTypes.arrayOf(
PropTypes.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"])
);
// Custom component for resize handles
export const resizeHandleType: ReactPropsChainableTypeChecker = PropTypes.oneOfType(
[PropTypes.node, PropTypes.func]
);
export const resizeHandleType: ReactPropsChainableTypeChecker =
PropTypes.oneOfType([PropTypes.node, PropTypes.func]);

@@ -68,2 +84,3 @@ export type Props = {|

resizeHandle?: ResizeHandle,
allowOverlap: boolean,

@@ -78,2 +95,3 @@ // Callbacks

onResizeStop: EventCallback,
onDropDragOver: (e: DragOverEvent) => ?({| w?: number, h?: number |} | false),
onDrop: (layout: Layout, item: ?LayoutItem, e: Event) => void,

@@ -167,2 +185,4 @@ children: ReactChildrenArray<ReactElement<any>>,

isResizable: PropTypes.bool,
// If true, grid can be placed one over the other.
allowOverlap: PropTypes.bool,
// If true, grid items won't change position when being dragged over.

@@ -216,7 +236,8 @@ preventCollision: PropTypes.bool,

children: function (props: Props, propName: string) {
var children = props[propName];
const children = props[propName];
// Check children keys for duplicates. Throw if found.
var keys = {};
const keys = {};
React.Children.forEach(children, function (child) {
if (child?.key == null) return;
if (keys[child.key]) {

@@ -223,0 +244,0 @@ throw new Error(

@@ -24,2 +24,3 @@ // @flow

// $FlowFixMe[method-unbinding]
const type = obj => Object.prototype.toString.call(obj);

@@ -78,2 +79,3 @@

{|
allowOverlap: 0,
breakpoints: 0,

@@ -108,2 +110,4 @@ cols: 0,

allowOverlap: PropTypes.bool,
// # of cols. This is a breakpoint -> cols map

@@ -168,2 +172,3 @@ cols: PropTypes.object,

margin: [10, 10],
allowOverlap: false,
onBreakpointChange: noop,

@@ -284,3 +289,4 @@ onLayoutChange: noop,

newCols,
compactType
compactType,
this.props.allowOverlap
);

@@ -287,0 +293,0 @@

@@ -162,4 +162,4 @@ // @flow

return isEqual(
React.Children.map(a, c => c.key),
React.Children.map(b, c => c.key)
React.Children.map(a, c => c?.key),
React.Children.map(b, c => c?.key)
);

@@ -332,7 +332,7 @@ }

}
// Ensure that there are no negative positions
l.y = Math.max(l.y, 0);
l.x = Math.max(l.x, 0);
return l;

@@ -439,3 +439,4 @@ }

compactType: CompactType,
cols: number
cols: number,
allowOverlap: ?boolean
): Layout {

@@ -477,6 +478,8 @@ // If this is static and not explicitly enabled as draggable,

if (preventCollision && collisions.length) {
log(`Collision prevented on ${l.i}, reverting.`);
l.x = oldX;
l.y = oldY;
l.moved = false;
if (!allowOverlap) {
log(`Collision prevented on ${l.i}, reverting.`);
l.x = oldX;
l.y = oldY;
l.moved = false;
}
return layout;

@@ -633,3 +636,4 @@ }

if (compactType === "horizontal") return sortLayoutItemsByColRow(layout);
else return sortLayoutItemsByRowCol(layout);
if (compactType === "vertical") return sortLayoutItemsByRowCol(layout);
else return layout;
}

@@ -684,3 +688,4 @@

cols: number,
compactType: CompactType
compactType: CompactType,
allowOverlap: ?boolean
): Layout {

@@ -691,7 +696,10 @@ initialLayout = initialLayout || [];

const layout: LayoutItem[] = [];
React.Children.forEach(children, (child: ReactElement<any>, i: number) => {
React.Children.forEach(children, (child: ReactElement<any>) => {
// Child may not exist
if (child?.key == null) return;
// Don't overwrite if it already exists.
const exists = getLayoutItem(initialLayout, String(child.key));
if (exists) {
layout[i] = cloneLayoutItem(exists);
layout.push(cloneLayoutItem(exists));
} else {

@@ -712,7 +720,7 @@ if (!isProduction && child.props._grid) {

// FIXME clone not really necessary here
layout[i] = cloneLayoutItem({ ...g, i: child.key });
layout.push(cloneLayoutItem({ ...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,

@@ -723,3 +731,3 @@ h: 1,

i: String(child.key)
});
}));
}

@@ -731,3 +739,5 @@ }

const correctedLayout = correctBounds(layout, { cols: cols });
return compact(correctedLayout, compactType, cols);
return allowOverlap
? correctedLayout
: compact(correctedLayout, compactType, cols);
}

@@ -789,7 +799,2 @@

// Flow can't really figure this out, so we just use Object
export function autoBindHandlers(el: Object, fns: Array<string>): void {
fns.forEach(key => (el[key] = el[key].bind(el)));
}
function log(...args) {

@@ -796,0 +801,0 @@ if (!DEBUG) return;

{
"name": "react-grid-layout",
"version": "1.2.5",
"version": "1.3.0",
"description": "A draggable and resizable grid layout with responsive breakpoints, for React.",

@@ -42,19 +42,19 @@ "main": "index.js",

"react-draggable": "^4.0.0",
"react-resizable": "^3.0.1"
"react-resizable": "^3.0.4"
},
"devDependencies": {
"@babel/cli": "^7.13.16",
"@babel/core": "^7.14.0",
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/plugin-transform-flow-comments": "^7.12.13",
"@babel/preset-env": "^7.14.1",
"@babel/preset-flow": "^7.13.13",
"@babel/preset-react": "^7.13.13",
"@babel/register": "^7.13.16",
"@webpack-cli/serve": "^1.4.0",
"@babel/cli": "^7.14.8",
"@babel/core": "^7.15.0",
"@babel/plugin-proposal-class-properties": "^7.14.5",
"@babel/plugin-transform-flow-comments": "^7.14.5",
"@babel/preset-env": "^7.15.0",
"@babel/preset-flow": "^7.14.5",
"@babel/preset-react": "^7.14.5",
"@babel/register": "^7.15.3",
"@webpack-cli/serve": "^1.5.2",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.6.3",
"babel-jest": "^27.0.6",
"babel-loader": "^8.2.2",
"babel-plugin-preval": "^5.0.0",
"css-loader": "^5.2.4",
"css-loader": "^6.2.0",
"ejs": "^3.1.6",

@@ -64,15 +64,15 @@ "enzyme": "^3.11.0",

"enzyme-to-json": "^3.6.2",
"eslint": "^7.26.0",
"eslint-plugin-flowtype": "^5.7.2",
"eslint-plugin-mocha": "^8.1.0",
"eslint-plugin-react": "^7.23.2",
"exports-loader": "^2.0.0",
"flow-bin": "^0.150.1",
"husky": "^6.0.0",
"imports-loader": "^2.0.0",
"jest": "^26.6.3",
"lint-staged": "^11.0.0",
"eslint": "^7.32.0",
"eslint-plugin-flowtype": "^5.9.0",
"eslint-plugin-mocha": "^9.0.0",
"eslint-plugin-react": "^7.24.0",
"exports-loader": "^3.0.0",
"flow-bin": "^0.158.0",
"husky": "^7.0.2",
"imports-loader": "^3.0.0",
"jest": "^27.0.6",
"lint-staged": "^11.1.2",
"lodash": "^4.17.21",
"opener": "^1.5.2",
"prettier": "^2.3.0",
"prettier": "^2.3.2",
"react": "^16.13.1",

@@ -82,7 +82,7 @@ "react-dom": "^16.13.1",

"react-transform-hmr": "^1.0.2",
"style-loader": "^2.0.0",
"style-loader": "^3.2.1",
"timsort": "^0.3.0",
"webpack": "^5.36.2",
"webpack-cli": "^4.7.0",
"webpack-dev-server": "^3.11.2"
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.0.0"
},

@@ -106,2 +106,3 @@ "peerDependencies": {

],
"testEnvironment": "jsdom",
"testURL": "http://localhost"

@@ -108,0 +109,0 @@ },

@@ -58,2 +58,3 @@ # React-Grid-Layout

1. [Scaled Containers](https://react-grid-layout.github.io/react-grid-layout/examples/18-scale.html)
1. [Allow Overlap](https://react-grid-layout.github.io/react-grid-layout/examples/19-allow-overlap.html)

@@ -78,2 +79,3 @@ #### Projects Using React-Grid-Layout

- [Statsout](https://statsout.com/)
- [Datto RMM](https://www.datto.com/uk/products/rmm/)

@@ -271,2 +273,3 @@ *Know of others? Create a PR to let me know!*

// If you forget the leading . it will not work.
// .react-resizable-handle" is always prepended to this value.
draggableCancel: ?string = '',

@@ -321,5 +324,8 @@

// If true, grid can be placed one over the other.
allowOverlap: ?boolean = false,
// If true, grid items won't change position when being
// dragged over.
preventCollision: ?boolean = false;
preventCollision: ?boolean = false,

@@ -336,3 +342,3 @@ // If true, droppable elements (with `draggable={true}` attribute)

// @see https://bugzilla.mozilla.org/show_bug.cgi?id=568313
isDroppable: ?boolean = false
isDroppable: ?boolean = false,
// Defines which resize handles should be rendered

@@ -348,6 +354,8 @@ // Allows for any combination of:

// 'ne' - Northeast handle (top-right)
resizeHandles: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se']
resizeHandles: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se'],
// Custom component for resize handles
// See `handle` as used in https://github.com/react-grid-layout/react-resizable#props
resizeHandle?: ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis, ref: ReactRef<HTMLElement>) => ReactElement<any>)
// See `handle` as used in https://github.com/react-grid-layout/react-resizable#resize-handle
// Your component should have the class `.react-resizable-handle`, or you should add your custom
// class to the `draggableCancel` prop.
resizeHandle?: ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis, ref: ReactRef<HTMLElement>) => ReactElement<any>),

@@ -367,3 +375,3 @@ //

type ItemCallback = (layout: Layout, oldItem: LayoutItem, newItem: LayoutItem,
placeholder: LayoutItem, e: MouseEvent, element: HTMLElement) => void;
placeholder: LayoutItem, e: MouseEvent, element: HTMLElement) => void,

@@ -382,8 +390,17 @@ // Calls when drag starts.

onResizeStop: ItemCallback,
//
// Dropover functionality
//
// Calls when an element has been dropped into the grid from outside.
onDrop: (layout: Layout, item: ?LayoutItem, e: Event) => void
onDrop: (layout: Layout, item: ?LayoutItem, e: Event) => void,
// Calls when an element is being dragged over the grid from outside as above.
// This callback should return an object to dynamically change the droppingItem size
// Return false to short-circuit the dragover
onDropDragOver: (e: DragOverEvent) => ?({|w?: number, h?: number|} | false),
// Ref for getting a reference for the grid's wrapping div.
// You can use this instead of a regular ref and the deprecated `ReactDOM.findDOMNode()`` function.
innerRef: ?React.Ref<"div">
innerRef: ?React.Ref<"div">,
```

@@ -406,7 +423,7 @@

// margin (in pixels). Can be specified either as horizontal and vertical margin, e.g. `[10, 10]` or as a breakpoint -> margin map, e.g. `{lg: [10, 10], md: [10, 10], ...}.
margin: [number, number] | {[breakpoint: $Keys<breakpoints>]: [number, number]}
margin: [number, number] | {[breakpoint: $Keys<breakpoints>]: [number, number]},
// containerPadding (in pixels). Can be specified either as horizontal and vertical padding, e.g. `[10, 10]` or as a breakpoint -> containerPadding map, e.g. `{lg: [10, 10], md: [10, 10], ...}.
containerPadding: [number, number] | {[breakpoint: $Keys<breakpoints>]: [number, number]}
containerPadding: [number, number] | {[breakpoint: $Keys<breakpoints>]: [number, number]},

@@ -416,3 +433,3 @@

// e.g. {lg: Layout, md: Layout, ...}
layouts: {[key: $Keys<breakpoints>]: Layout}
layouts: {[key: $Keys<breakpoints>]: Layout},

@@ -520,2 +537,25 @@ //

### Custom Child Components and Draggable Handles
If you use React Components as grid children, they need to do a few things:
1. Forward refs to an underlying DOM node, and
2. Forward `style` and `className` to that same DOM node.
For example:
```js
const CustomGridItemComponent = React.forwardRef(({style, className, ...props}, ref) => {
return (
<div style={{ /* styles */, ...style}} className={className} ref={ref}>
{/* Some other content */}
</div>
);
}
```
The same is true of custom elements as draggable handles using the `draggableHandle` prop. This is so that
the underlying `react-draggable` library can get a reference to the DOM node underneath, manipulate
positioning via `style`, and set classes.
## Contribute

@@ -522,0 +562,0 @@

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc