react-grid-layout 1.2.4 → 1.3.2

package/lib/utils.js

@@ -159,8 +159,8 @@ export function cloneLayoutItem(layoutItem: LayoutItem): LayoutItem {
  */
 export function childrenEqual(a: ReactChildren, b: ReactChildren): boolean {
   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)
   );
 }
 
@@ -328,6 +328,11 @@ export function compactItem(
       l.y++;
     }
   }
+
+  // Ensure that there are no negative positions
+  l.y = Math.max(l.y, 0);
+  l.x = Math.max(l.x, 0);
+
   return l;
 }
 
@@ -429,7 +434,8 @@ export function moveElement(
   isUserAction: ?boolean,
   preventCollision: ?boolean,
   compactType: CompactType,
-  cols: number
+  cols: number,
+  allowOverlap: ?boolean
 ): Layout {
   // If this is static and not explicitly enabled as draggable,
   // no move is possible, so we can short-circuit this immediately.
@@ -463,14 +469,23 @@ export function moveElement(
   // $FlowIgnore acceptable modification of read-only array as it was recently cloned
   if (movingUp) sorted = sorted.reverse();
   const collisions = getAllCollisions(sorted, l);
-
-  // There was a collision; abort
-  if (preventCollision && collisions.length) {
+  const hasCollisions = collisions.length > 0;
+
+  // We may have collisions. We can short-circuit if we've turned off collisions or
+  // allowed overlap.
+  if (hasCollisions && allowOverlap) {
+    // Easy, we don't need to resolve collisions. But we *did* change the layout,
+    // so clone it on the way out.
+    return cloneLayout(layout);
+  } else if (hasCollisions && preventCollision) {
+    // If we are preventing collision but not allowing overlap, we need to
+    // revert the position of this element so it goes to where it came from, rather
+    // than the user's desired location.
     log(`Collision prevented on ${l.i}, reverting.`);
     l.x = oldX;
     l.y = oldY;
     l.moved = false;
-    return layout;
+    return layout; // did not change so don't clone
   }
 
   // Move each item that collides away from this element.
@@ -621,7 +636,8 @@ export function sortLayoutItems(
   compactType: CompactType
 ): Layout {
   if (compactType === "horizontal") return sortLayoutItemsByColRow(layout);
-  else return sortLayoutItemsByRowCol(layout);
+  if (compactType === "vertical") return sortLayoutItemsByRowCol(layout);
+  else return layout;
 }
 
 /**
@@ -671,21 +687,25 @@ export function synchronizeLayoutWithChildren(
   initialLayout: Layout,
   children: ReactChildren,
   cols: number,
-  compactType: CompactType
+  compactType: CompactType,
+  allowOverlap: ?boolean
 ): Layout {
   initialLayout = initialLayout || [];
 
   // Generate one layout item per child.
   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 {
       if (!isProduction && child.props._grid) {
         console.warn(
-          "`_grid` properties on children have been deprecated as of React 15.2. " + // eslint-disable-line
+          "`_grid` properties on children have been deprecated as of React 15.2. " +
             "Please use `data-grid` or add your properties directly to the `layout`."
         );
       }
@@ -697,24 +717,28 @@ export function synchronizeLayoutWithChildren(
           validateLayout([g], "ReactGridLayout.children");
         }
         // 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({
-          w: 1,
-          h: 1,
-          x: 0,
-          y: bottom(layout),
-          i: String(child.key)
-        });
+        layout.push(
+          cloneLayoutItem({
+            w: 1,
+            h: 1,
+            x: 0,
+            y: bottom(layout),
+            i: String(child.key)
+          })
+        );
       }
     }
   });
 
   // Correct the layout.
   const correctedLayout = correctBounds(layout, { cols: cols });
-  return compact(correctedLayout, compactType, cols);
+  return allowOverlap
+    ? correctedLayout
+    : compact(correctedLayout, compactType, cols);
 }
 
 /**
@@ -746,20 +770,6 @@ export function validateLayout(
         );
       }
     }
-    if (item.i && typeof item.i !== "string") {
-      throw new Error(
-        "ReactGridLayout: " + contextName + "[" + i + "].i must be a string!"
-      );
-    }
-    if (item.static !== undefined && typeof item.static !== "boolean") {
-      throw new Error(
-        "ReactGridLayout: " +
-          contextName +
-          "[" +
-          i +
-          "].static must be a boolean!"
-      );
-    }
   }
 }
 
@@ -771,11 +781,6 @@ export function compactType(
   return verticalCompact === false ? null : compactType;
 }
 
-// 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) {
   if (!DEBUG) return;
   // eslint-disable-next-line no-console

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-grid-layout",
-  "version": "1.2.4",
+  "version": "1.3.2",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
   "main": "index.js",
   "scripts": {
@@ -12,7 +12,9 @@
     "dev": "make dev",
     "prepublishOnly": "make build",
     "validate": "npm ls",
-    "flow": "flow"
+    "flow": "flow",
+    "fmt": "prettier --write ./**.{json,js,yml,md}",
+    "fmt:check": "prettier --check ./**.{json,js,yml,md}"
   },
   "repository": {
     "type": "git",
@@ -35,52 +37,54 @@
   },
   "homepage": "https://github.com/STRML/react-grid-layout",
   "dependencies": {
-    "classnames": "2.x",
+    "@babel/eslint-parser": "^7.16.3",
+    "clsx": "^1.1.1",
     "lodash.isequal": "^4.0.0",
     "prop-types": "^15.0.0",
     "react-draggable": "^4.0.0",
-    "react-resizable": "^1.10.0"
+    "react-resizable": "^3.0.4"
   },
   "devDependencies": {
-    "@babel/cli": "^7.13.0",
-    "@babel/core": "^7.13.8",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-transform-flow-comments": "^7.12.13",
-    "@babel/preset-env": "^7.13.8",
-    "@babel/preset-flow": "^7.12.13",
-    "@babel/preset-react": "^7.12.13",
-    "@babel/register": "^7.13.8",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.6.3",
+    "@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-jest": "^27.0.6",
     "babel-loader": "^8.2.2",
     "babel-plugin-preval": "^5.0.0",
-    "css-loader": "^5.1.1",
+    "css-loader": "^6.2.0",
     "ejs": "^3.1.6",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
-    "enzyme-to-json": "^3.6.1",
-    "eslint": "^7.21.0",
-    "eslint-plugin-flowtype": "^5.3.1",
-    "eslint-plugin-mocha": "^8.0.0",
-    "eslint-plugin-react": "^7.22.0",
-    "exports-loader": "^2.0.0",
-    "flow-bin": "^0.145.0",
-    "husky": "^5.1.2",
-    "imports-loader": "^2.0.0",
-    "jest": "^26.6.3",
-    "lint-staged": "^10.5.4",
+    "enzyme-to-json": "^3.6.2",
+    "eslint": "^7.32.0",
+    "eslint-plugin-flowtype": "^5.9.0",
+    "eslint-plugin-mocha": "^9.0.0",
+    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-unicorn": "^39.0.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.2.1",
+    "prettier": "^2.3.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-hot-loader": "^4.13.0",
     "react-transform-hmr": "^1.0.2",
-    "style-loader": "^2.0.0",
+    "style-loader": "^3.2.1",
     "timsort": "^0.3.0",
-    "webpack": "^5.24.2",
-    "webpack-cli": "^4.5.0",
-    "webpack-dev-server": "^3.11.2"
+    "webpack": "^5.51.1",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.0.0"
   },
   "peerDependencies": {
     "react": ">= 16.3.0",
@@ -99,11 +103,21 @@
     "testMatch": [
       "<rootDir>/test/spec/*.js"
     ],
-    "testURL": "http://localhost"
+    "testEnvironment": "jsdom",
+    "testURL": "http://localhost",
+    "coverageThreshold": {
+      "global": {
+        "statements": 77.43,
+        "branches": 72.02,
+        "functions": 77.12,
+        "lines": 78.93
+      }
+    }
   },
   "lint-staged": {
     "*.{js,jsx,css}": [
-      "prettier --write"
+      "eslint --ext .js,.jsx --fix",
+      "yarn fmt"
     ]
   }
-}
+}

package/.husky/pre-commit

@@ -1,6 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-yarn lint-staged
-make lint
-make test

package/.travis.yml

@@ -1,9 +0,0 @@
-language: node_js
-node_js:
-  - 10
-  - 12
-  - "lts/*"
-script:
-  - make build test
-cache: yarn
-

package/dist/react-grid-layout.min.js.LICENSE.txt

@@ -1,5 +0,0 @@
-/*!
-  Copyright (c) 2017 Jed Watson.
-  Licensed under the MIT License (MIT), see
-  http://jedwatson.github.io/classnames
-*/