react-grid-layout 1.4.4 → 1.5.1

package/CHANGELOG.md

@@ -5,7 +5,7 @@
 ### Bugfixes
 
 - Fix position logic when draggable item is dragged into the grid. We no longer use the deprecated / non-standard `e.nativeEvent.layer{X,Y}` properties. [#1915](https://github.com/react-grid-layout/react-grid-layout/pull/1915)
-- Fix drag values according to containerPadding. Previously, when dragging an item, the intuited position within the grid was *not* modified by `containerPadding`, causing it to off by that value. On most grids, this is only set to `[10, 10]`, so this may not have been noticeable, but for higher values it was very obvious. Thanks @hywlss9. [#1323](https://github.com/react-grid-layout/react-grid-layout/pull/1323)
+- Fix drag values according to containerPadding. Previously, when dragging an item, the intuited position within the grid was _not_ modified by `containerPadding`, causing it to off by that value. On most grids, this is only set to `[10, 10]`, so this may not have been noticeable, but for higher values it was very obvious. Thanks @hywlss9. [#1323](https://github.com/react-grid-layout/react-grid-layout/pull/1323)
 - Various lint/dependency fixes.
 
 ## 1.4.3 (Nov 8, 2023)

package/README.md

@@ -37,16 +37,16 @@ RGL is React-only and does not require jQuery.
 
 ## Demos
 
-1. [Showcase](https://react-grid-layout.github.io/react-grid-layout/examples/0-showcase.html)
-1. [Basic](https://react-grid-layout.github.io/react-grid-layout/examples/1-basic.html)
-1. [No Dragging/Resizing (Layout Only)](https://react-grid-layout.github.io/react-grid-layout/examples/2-no-dragging.html)
-1. [Messy Layout Autocorrect](https://react-grid-layout.github.io/react-grid-layout/examples/3-messy.html)
-1. [Layout Defined on Children](https://react-grid-layout.github.io/react-grid-layout/examples/4-grid-property.html)
-1. [Static Elements](https://react-grid-layout.github.io/react-grid-layout/examples/5-static-elements.html)
-1. [Adding/Removing Elements](https://react-grid-layout.github.io/react-grid-layout/examples/6-dynamic-add-remove.html)
-1. [Saving Layout to LocalStorage](https://react-grid-layout.github.io/react-grid-layout/examples/7-localstorage.html)
-1. [Saving a Responsive Layout to LocalStorage](https://react-grid-layout.github.io/react-grid-layout/examples/8-localstorage-responsive.html)
-1. [Minimum and Maximum Width/Height](https://react-grid-layout.github.io/react-grid-layout/examples/9-min-max-wh.html)
+1. [Showcase](https://react-grid-layout.github.io/react-grid-layout/examples/00-showcase.html)
+1. [Basic](https://react-grid-layout.github.io/react-grid-layout/examples/01-basic.html)
+1. [No Dragging/Resizing (Layout Only)](https://react-grid-layout.github.io/react-grid-layout/examples/02-no-dragging.html)
+1. [Messy Layout Autocorrect](https://react-grid-layout.github.io/react-grid-layout/examples/03-messy.html)
+1. [Layout Defined on Children](https://react-grid-layout.github.io/react-grid-layout/examples/04-grid-property.html)
+1. [Static Elements](https://react-grid-layout.github.io/react-grid-layout/examples/05-static-elements.html)
+1. [Adding/Removing Elements](https://react-grid-layout.github.io/react-grid-layout/examples/06-dynamic-add-remove.html)
+1. [Saving Layout to LocalStorage](https://react-grid-layout.github.io/react-grid-layout/examples/07-localstorage.html)
+1. [Saving a Responsive Layout to LocalStorage](https://react-grid-layout.github.io/react-grid-layout/examples/08-localstorage-responsive.html)
+1. [Minimum and Maximum Width/Height](https://react-grid-layout.github.io/react-grid-layout/examples/09-min-max-wh.html)
 1. [Dynamic Minimum and Maximum Width/Height](https://react-grid-layout.github.io/react-grid-layout/examples/10-dynamic-min-max-wh.html)
 1. [No Vertical Compacting (Free Movement)](https://react-grid-layout.github.io/react-grid-layout/examples/11-no-vertical-compact.html)
 1. [Prevent Collision](https://react-grid-layout.github.io/react-grid-layout/examples/12-prevent-collision.html)
@@ -54,7 +54,7 @@ RGL is React-only and does not require jQuery.
 1. [Toolbox](https://react-grid-layout.github.io/react-grid-layout/examples/14-toolbox.html)
 1. [Drag From Outside](https://react-grid-layout.github.io/react-grid-layout/examples/15-drag-from-outside.html)
 1. [Bounded Layout](https://react-grid-layout.github.io/react-grid-layout/examples/16-bounded.html)
-1. [Resizable Handles](https://react-grid-layout.github.io/react-grid-layout/examples/17-resizable-handles.html)
+1. [Responsive Bootstrap-style Layout](https://react-grid-layout.github.io/react-grid-layout/examples/17-responsive-bootstrap-style.html)
 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)
 1. [All Resizable Handles](https://react-grid-layout.github.io/react-grid-layout/examples/20-resizable-handles.html)
@@ -301,13 +301,11 @@ draggableHandle: ?string = '',
 // Compaction type.
 compactType: ?('vertical' | 'horizontal' | null) = 'vertical';
 
-// Layout is an array of object with the format:
-// {x: number, y: number, w: number, h: number}
+// Layout is an array of objects with the format:
 // The index into the layout must match the key used on each item component.
 // If you choose to use custom keys, you can specify that key in the layout
-// array objects like so:
-// {i: string, x: number, y: number, w: number, h: number}
-layout: ?array = null, // If not provided, use data-grid props on children
+// array objects using the `i` prop.
+layout: ?Array<{i?: string, x: number, y: number, w: number, h: number}> = null, // If not provided, use data-grid props on children
 
 // Margin between items [x, y] in px.
 margin: ?[number, number] = [10, 10],

package/build/GridItem.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _reactDom = require("react-dom");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactDraggable = require("react-draggable");
 var _reactResizable = require("react-resizable");
@@ -166,8 +167,9 @@ class GridItem extends _react.default.Component /*:: <Props, State>*/{
      * onDrag event handler
      * @param  {Event}  e             event data
      * @param  {Object} callbackData  an object with node, delta and position information
+     * @param  {boolean} dontFlush    if true, will not call flushSync
      */
-    _defineProperty(this, "onDrag", (e, _ref2) => {
+    _defineProperty(this, "onDrag", (e, _ref2, dontFlush) => {
       let {
         node,
         deltaX,
@@ -213,18 +215,25 @@ class GridItem extends _react.default.Component /*:: <Props, State>*/{
         top,
         left
       };
-      this.setState({
-        dragging: newPosition
-      });
+
+      // dontFlush is set if we're calling from inside
+      if (dontFlush) {
+        this.setState({
+          dragging: newPosition
+        });
+      } else {
+        (0, _reactDom.flushSync)(() => {
+          this.setState({
+            dragging: newPosition
+          });
+        });
+      }
 
       // Call callback with this data
-      const {
-        containerPadding
-      } = this.props;
       const {
         x,
         y
-      } = (0, _calculateUtils.calcXY)(positionParams, top - containerPadding[1], left - containerPadding[0], w, h);
+      } = (0, _calculateUtils.calcXY)(positionParams, top, left, w, h);
       return onDrag.call(this, i, x, y, {
         e,
         node,
@@ -250,8 +259,7 @@ class GridItem extends _react.default.Component /*:: <Props, State>*/{
       const {
         w,
         h,
-        i,
-        containerPadding
+        i
       } = this.props;
       const {
         left,
@@ -267,7 +275,7 @@ class GridItem extends _react.default.Component /*:: <Props, State>*/{
       const {
         x,
         y
-      } = (0, _calculateUtils.calcXY)(this.getPositionParams(), top - containerPadding[1], left - containerPadding[0], w, h);
+      } = (0, _calculateUtils.calcXY)(this.getPositionParams(), top, left, w, h);
       return onDragStop.call(this, i, x, y, {
         e,
         node,
@@ -333,9 +341,11 @@ class GridItem extends _react.default.Component /*:: <Props, State>*/{
         node,
         deltaX,
         deltaY
-      });
+      }, true // dontFLush: avoid flushSync to temper warnings
+      );
     }
   }
+
   getPositionParams() /*: PositionParams*/{
     let props /*: Props*/ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
     return {
@@ -485,8 +495,10 @@ class GridItem extends _react.default.Component /*:: <Props, State>*/{
     let updatedSize = size;
     if (node) {
       updatedSize = (0, _utils.resizeItemInDirection)(handle, position, size, containerWidth);
-      this.setState({
-        resizing: handlerName === "onResizeStop" ? null : updatedSize
+      (0, _reactDom.flushSync)(() => {
+        this.setState({
+          resizing: handlerName === "onResizeStop" ? null : updatedSize
+        });
       });
     }
 

package/build/ResponsiveReactGridLayout.js

@@ -170,8 +170,8 @@ class ResponsiveReactGridLayout extends React.Component
       newLayouts[newBreakpoint] = layout;
 
       // callbacks
-      this.props.onLayoutChange(layout, newLayouts);
       this.props.onBreakpointChange(newBreakpoint, newCols);
+      this.props.onLayoutChange(layout, newLayouts);
       this.setState({
         breakpoint: newBreakpoint,
         layout: layout,

package/build/calculateUtils.js

@@ -97,21 +97,18 @@ function calcGridItemPosition(positionParams /*: PositionParams*/, x /*: number*
 function calcXY(positionParams /*: PositionParams*/, top /*: number*/, left /*: number*/, w /*: number*/, h /*: number*/) /*: { x: number, y: number }*/{
   const {
     margin,
+    containerPadding,
     cols,
     rowHeight,
     maxRows
   } = positionParams;
   const colWidth = calcGridColWidth(positionParams);
 
-  // left = colWidth * x + margin * (x + 1)
-  // l = cx + m(x+1)
-  // l = cx + mx + m
-  // l - m = cx + mx
-  // l - m = x(c + m)
-  // (l - m) / (c + m) = x
-  // x = (left - margin) / (coldWidth + margin)
-  let x = Math.round((left - margin[0]) / (colWidth + margin[0]));
-  let y = Math.round((top - margin[1]) / (rowHeight + margin[1]));
+  // left = containerPaddingX + x * (colWidth + marginX)
+  // x * (colWidth + marginX) = left - containerPaddingX
+  // x = (left - containerPaddingX) / (colWidth + marginX)
+  let x = Math.round((left - containerPadding[0]) / (colWidth + margin[0]));
+  let y = Math.round((top - containerPadding[1]) / (rowHeight + margin[1]));
 
   // Capping
   x = clamp(x, 0, cols - w);

package/build/utils.js

@@ -805,10 +805,15 @@ function validateLayout(layout /*: Layout*/) /*: void*/{
   for (let i = 0, len = layout.length; i < len; i++) {
     const item = layout[i];
     for (let j = 0; j < subProps.length; j++) {
-      if (typeof item[subProps[j]] !== "number") {
-        throw new Error("ReactGridLayout: " + contextName + "[" + i + "]." + subProps[j] + " must be a number!");
+      const key = subProps[j];
+      const value = item[key];
+      if (typeof value !== "number" || Number.isNaN(value)) {
+        throw new Error(`ReactGridLayout: ${contextName}[${i}].${key} must be a number! Received: ${value} (${typeof value})`);
       }
     }
+    if (typeof item.i !== "undefined" && typeof item.i !== "string") {
+      throw new Error(`ReactGridLayout: ${contextName}[${i}].i must be a string! Received: ${item.i} (${typeof item.i})`);
+    }
   }
 }