react-grid-layout 1.2.2 → 1.3.0

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.
@@ -466,10 +472,12 @@ export function moveElement(
 
   // There was a collision; abort
   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;
   }
 
@@ -621,7 +629,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,17 +680,21 @@ 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(
@@ -697,24 +710,26 @@ 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({
+        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);
 }
 
 /**
@@ -771,11 +786,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.2",
+  "version": "1.3.0",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
   "main": "index.js",
   "scripts": {
@@ -35,52 +35,57 @@
   },
   "homepage": "https://github.com/STRML/react-grid-layout",
   "dependencies": {
-    "classnames": "2.x",
+    "classnames": "2.3.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/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.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",
+    "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",
+    "react-dom": ">= 16.3.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -95,6 +100,7 @@
     "testMatch": [
       "<rootDir>/test/spec/*.js"
     ],
+    "testEnvironment": "jsdom",
     "testURL": "http://localhost"
   },
   "lint-staged": {

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
-