react-grid-layout
Advanced tools
Comparing version 1.2.5 to 1.3.0
@@ -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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
790139
35
6328
572
Updatedreact-resizable@^3.0.4