react-grid-layout 1.2.1 → 1.2.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+1.2.2 (Mar 1, 2021)
+---
+
+### Bugfixes
+  - `onResize` as changed in 1.2.1 did not correctly save the layout. This is now fixed.
+    - As you might guess, we need more test coverage! PRs are very welcome, I'll buy you beers on Cashapp or Patreon or whatever you like.
+
 1.2.1 (Mar 1, 2021)
 ---
 

package/build/ReactGridLayout.js

@@ -27,6 +27,14 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+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 _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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 _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -464,45 +472,49 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
       var _this$props4 = this.props,
           cols = _this$props4.cols,
           preventCollision = _this$props4.preventCollision;
-      var originalLayoutItem
-      /*: ?LayoutItem*/
-      = (0, _utils.getLayoutItem)(layout, i);
-      if (!originalLayoutItem) return; // We're going to modify this object now, so clone it first.
-
-      var l = (0, _utils.cloneLayoutItem)(originalLayoutItem); // 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 (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);
+
+      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;
           });
-          if (Number.isFinite(leastX)) l.w = leastX - l.x;
-          if (Number.isFinite(leastY)) l.h = leastY - l.y;
+          hasCollisions = collisions.length > 0; // 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;
         }
-      }
 
-      if (!hasCollisions) {
-        // Set new width and height.
-        l.w = w;
-        l.h = h;
-      } // Create placeholder element (display only)
+        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,
@@ -511,10 +523,10 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
         static: true,
         i: i
       };
-      this.props.onResize(layout, oldResizeItem, l, placeholder, e, node); // Re-compact the layout and set the drag placeholder.
+      this.props.onResize(newLayout, oldResizeItem, l, placeholder, e, node); // Re-compact the newLayout and set the drag placeholder.
 
       this.setState({
-        layout: (0, _utils.compact)(layout, (0, _utils.compactType)(this.props), cols),
+        layout: (0, _utils.compact)(newLayout, (0, _utils.compactType)(this.props), cols),
         activeDrag: placeholder
       });
     }

package/build/utils.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.bottom = bottom;
 exports.cloneLayout = cloneLayout;
+exports.modifyLayout = modifyLayout;
+exports.withLayoutItem = withLayoutItem;
 exports.cloneLayoutItem = cloneLayoutItem;
 exports.childrenEqual = childrenEqual;
 exports.fastPositionEqual = fastPositionEqual;
@@ -79,6 +81,48 @@ function cloneLayout(layout
   }
 
   return newLayout;
+} // Modify a layoutItem inside a layout. Returns a new Layout,
+// does not mutate. Carries over all other LayoutItems unmodified.
+
+
+function modifyLayout(layout
+/*: Layout*/
+, layoutItem
+/*: LayoutItem*/
+)
+/*: Layout*/
+{
+  var newLayout = Array(layout.length);
+
+  for (var i = 0, len = layout.length; i < len; i++) {
+    if (layoutItem.i === layout[i].i) {
+      newLayout[i] = layoutItem;
+    } else {
+      newLayout[i] = layout[i];
+    }
+  }
+
+  return newLayout;
+} // Function to be called to modify a layout item.
+// Does defensive clones to ensure the layout is not modified.
+
+
+function withLayoutItem(layout
+/*: Layout*/
+, itemKey
+/*: string*/
+, cb
+/*: LayoutItem => LayoutItem*/
+)
+/*: [Layout, ?LayoutItem]*/
+{
+  var item = getLayoutItem(layout, itemKey);
+  if (!item) return [layout, null];
+  item = cb(cloneLayoutItem(item)); // defensive clone then modify
+  // FIXME could do this faster if we already knew the index
+
+  layout = modifyLayout(layout, item);
+  return [layout, item];
 } // Fast path to cloning, since this is monomorphic
 
 
@@ -727,13 +771,15 @@ function synchronizeLayoutWithChildren(initialLayout
       if (g) {
         if (!isProduction) {
           validateLayout([g], "ReactGridLayout.children");
-        }
+        } // FIXME clone not really necessary here
+
 
         layout[i] = 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({
           w: 1,
           h: 1,