react-grid-layout 1.3.4 → 1.4.1

package/lib/utils.js

@@ -1,10 +1,21 @@
 // @flow
-import isEqual from "lodash.isequal";
+import { deepEqual } from "fast-equals";
 import React from "react";
 import type {
   ChildrenArray as ReactChildrenArray,
   Element as ReactElement
 } from "react";
+
+export type ResizeHandleAxis =
+  | "s"
+  | "w"
+  | "e"
+  | "n"
+  | "sw"
+  | "nw"
+  | "se"
+  | "ne";
+
 export type LayoutItem = {
   w: number,
   h: number,
@@ -19,7 +30,7 @@ export type LayoutItem = {
   static?: boolean,
   isDraggable?: ?boolean,
   isResizable?: ?boolean,
-  resizeHandles?: Array<"s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne">,
+  resizeHandles?: Array<ResizeHandleAxis>,
   isBounded?: ?boolean
 };
 export type Layout = $ReadOnlyArray<LayoutItem>;
@@ -47,7 +58,12 @@ export type GridDragEvent = {
   node: HTMLElement,
   newPosition: PartialPosition
 };
-export type GridResizeEvent = { e: Event, node: HTMLElement, size: Size };
+export type GridResizeEvent = {
+  e: Event,
+  node: HTMLElement,
+  size: Size,
+  handle: string
+};
 export type DragOverEvent = MouseEvent & {
   nativeEvent: {
     layerX: number,
@@ -158,9 +174,15 @@ export function cloneLayoutItem(layoutItem: LayoutItem): LayoutItem {
  * This will catch differences in keys, order, and length.
  */
 export function childrenEqual(a: ReactChildren, b: ReactChildren): boolean {
-  return isEqual(
-    React.Children.map(a, c => c?.key),
-    React.Children.map(b, c => c?.key)
+  return (
+    deepEqual(
+      React.Children.map(a, c => c?.key),
+      React.Children.map(b, c => c?.key)
+    ) &&
+    deepEqual(
+      React.Children.map(a, c => c?.props["data-grid"]),
+      React.Children.map(b, c => c?.props["data-grid"])
+    )
   );
 }
 
@@ -206,12 +228,14 @@ export function collides(l1: LayoutItem, l2: LayoutItem): boolean {
  * @param  {Array} layout Layout.
  * @param  {Boolean} verticalCompact Whether or not to compact the layout
  *   vertically.
+ * @param  {Boolean} allowOverlap When `true`, allows overlapping grid items.
  * @return {Array}       Compacted Layout.
  */
 export function compact(
   layout: Layout,
   compactType: CompactType,
-  cols: number
+  cols: number,
+  allowOverlap: ?boolean
 ): Layout {
   // Statics go in the compareWith array right away so items flow around them.
   const compareWith = getStatics(layout);
@@ -225,7 +249,7 @@ export function compact(
 
     // Don't move static elements
     if (!l.static) {
-      l = compactItem(compareWith, l, compactType, cols, sorted);
+      l = compactItem(compareWith, l, compactType, cols, sorted, allowOverlap);
 
       // Add to comparison array. We only collide with items before this one.
       // Statics are already in this array.
@@ -294,7 +318,8 @@ export function compactItem(
   l: LayoutItem,
   compactType: CompactType,
   cols: number,
-  fullLayout: Layout
+  fullLayout: Layout,
+  allowOverlap: ?boolean
 ): LayoutItem {
   const compactV = compactType === "vertical";
   const compactH = compactType === "horizontal";
@@ -316,7 +341,11 @@ export function compactItem(
 
   // Move it down, and keep moving it down if it's colliding.
   let collides;
-  while ((collides = getFirstCollision(compareWith, l))) {
+  // Checking the compactType null value to avoid breaking the layout when overlapping is allowed.
+  while (
+    (collides = getFirstCollision(compareWith, l)) &&
+    !(compactType === null && allowOverlap)
+  ) {
     if (compactH) {
       resolveCompactionCollision(fullLayout, l, collides.x + collides.w, "x");
     } else {
@@ -326,6 +355,10 @@ export function compactItem(
     if (compactH && l.x + l.w > cols) {
       l.x = cols - l.w;
       l.y++;
+      // ALso move element as left as we can
+      while (l.x > 0 && !getFirstCollision(compareWith, l)) {
+        l.x--;
+      }
     }
   }
 
@@ -541,7 +574,7 @@ export function moveElementAwayFromCollision(
 ): Layout {
   const compactH = compactType === "horizontal";
   // Compact vertically if not set to horizontal
-  const compactV = compactType !== "horizontal";
+  const compactV = compactType === "vertical";
   const preventCollision = collidesWith.static; // we're already colliding (not for static items)
 
   // If there is enough space above the collision to put this element, move it there.
@@ -560,8 +593,14 @@ export function moveElementAwayFromCollision(
       i: "-1"
     };
 
+    const firstCollision = getFirstCollision(layout, fakeItem);
+    const collisionNorth =
+      firstCollision && firstCollision.y + firstCollision.h > collidesWith.y;
+    const collisionWest =
+      firstCollision && collidesWith.x + collidesWith.w > firstCollision.x;
+
     // No collision? If so, we can go up there; otherwise, we'll end up moving down as normal
-    if (!getFirstCollision(layout, fakeItem)) {
+    if (!firstCollision) {
       log(
         `Doing reverse collision on ${itemToMove.i} up to [${fakeItem.x},${fakeItem.y}].`
       );
@@ -575,9 +614,42 @@ export function moveElementAwayFromCollision(
         compactType,
         cols
       );
+    } else if (collisionNorth && compactV) {
+      return moveElement(
+        layout,
+        itemToMove,
+        undefined,
+        collidesWith.y + 1,
+        isUserAction,
+        preventCollision,
+        compactType,
+        cols
+      );
+    } else if (collisionNorth && compactType == null) {
+      collidesWith.y = itemToMove.y;
+      itemToMove.y = itemToMove.y + itemToMove.h;
+
+      return layout;
+    } else if (collisionWest && compactH) {
+      return moveElement(
+        layout,
+        collidesWith,
+        itemToMove.x,
+        undefined,
+        isUserAction,
+        preventCollision,
+        compactType,
+        cols
+      );
     }
   }
 
+  const newX = compactH ? itemToMove.x + 1 : undefined;
+  const newY = compactV ? itemToMove.y + 1 : undefined;
+
+  if (newX == null && newY == null) {
+    return layout;
+  }
   return moveElement(
     layout,
     itemToMove,
@@ -600,6 +672,126 @@ export function perc(num: number): string {
   return num * 100 + "%";
 }
 
+/**
+ * Helper functions to constrain dimensions of a GridItem
+ */
+const constrainWidth = (
+  left: number,
+  currentWidth: number,
+  newWidth: number,
+  containerWidth: number
+) => {
+  return left + newWidth > containerWidth ? currentWidth : newWidth;
+};
+
+const constrainHeight = (
+  top: number,
+  currentHeight: number,
+  newHeight: number
+) => {
+  return top < 0 ? currentHeight : newHeight;
+};
+
+const constrainLeft = (left: number) => Math.max(0, left);
+
+const constrainTop = (top: number) => Math.max(0, top);
+
+const resizeNorth = (currentSize, { left, height, width }, _containerWidth) => {
+  const top = currentSize.top - (height - currentSize.height);
+
+  return {
+    left,
+    width,
+    height: constrainHeight(top, currentSize.height, height),
+    top: constrainTop(top)
+  };
+};
+
+const resizeEast = (
+  currentSize,
+  { top, left, height, width },
+  containerWidth
+) => ({
+  top,
+  height,
+  width: constrainWidth(
+    currentSize.left,
+    currentSize.width,
+    width,
+    containerWidth
+  ),
+  left: constrainLeft(left)
+});
+
+const resizeWest = (currentSize, { top, height, width }, containerWidth) => {
+  const left = currentSize.left - (width - currentSize.width);
+
+  return {
+    height,
+    width:
+      left < 0
+        ? currentSize.width
+        : constrainWidth(
+            currentSize.left,
+            currentSize.width,
+            width,
+            containerWidth
+          ),
+    top: constrainTop(top),
+    left: constrainLeft(left)
+  };
+};
+
+const resizeSouth = (
+  currentSize,
+  { top, left, height, width },
+  containerWidth
+) => ({
+  width,
+  left,
+  height: constrainHeight(top, currentSize.height, height),
+  top: constrainTop(top)
+});
+
+const resizeNorthEast = (...args) =>
+  resizeNorth(args[0], resizeEast(...args), args[2]);
+const resizeNorthWest = (...args) =>
+  resizeNorth(args[0], resizeWest(...args), args[2]);
+const resizeSouthEast = (...args) =>
+  resizeSouth(args[0], resizeEast(...args), args[2]);
+const resizeSouthWest = (...args) =>
+  resizeSouth(args[0], resizeWest(...args), args[2]);
+
+const ordinalResizeHandlerMap = {
+  n: resizeNorth,
+  ne: resizeNorthEast,
+  e: resizeEast,
+  se: resizeSouthEast,
+  s: resizeSouth,
+  sw: resizeSouthWest,
+  w: resizeWest,
+  nw: resizeNorthWest
+};
+
+/**
+ * Helper for clamping width and position when resizing an item.
+ */
+export function resizeItemInDirection(
+  direction: ResizeHandleAxis,
+  currentSize: Position,
+  newSize: Position,
+  containerWidth: number
+): Position {
+  const ordinalHandler = ordinalResizeHandlerMap[direction];
+  // Shouldn't be possible given types; that said, don't fail hard
+  if (!ordinalHandler) return newSize;
+  return ordinalHandler(
+    currentSize,
+    { ...currentSize, ...newSize },
+    containerWidth
+  );
+}
+
 export function setTransform({ top, left, width, height }: Position): Object {
   // Replace unitless items with px
   const translate = `translate(${left}px,${top}px)`;
@@ -698,19 +890,13 @@ export function synchronizeLayoutWithChildren(
     // 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) {
+    const g = child.props["data-grid"];
+    // Don't overwrite the layout item if it's already in the initial layout.
+    // If it has a `data-grid` property, prefer that over what's in the layout.
+    if (exists && g == null) {
       layout.push(cloneLayoutItem(exists));
     } else {
-      if (!isProduction && child.props._grid) {
-        console.warn(
-          "`_grid` properties on children have been deprecated as of React 15.2. " +
-            "Please use `data-grid` or add your properties directly to the `layout`."
-        );
-      }
-      const g = child.props["data-grid"] || child.props._grid;
-
       // Hey, this item has a data-grid property, use it.
       if (g) {
         if (!isProduction) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-grid-layout",
-  "version": "1.3.4",
+  "version": "1.4.1",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
   "main": "index.js",
   "scripts": {
@@ -37,54 +37,59 @@
   },
   "homepage": "https://github.com/STRML/react-grid-layout",
   "dependencies": {
-    "clsx": "^1.1.1",
-    "lodash.isequal": "^4.0.0",
+    "clsx": "^2.0.0",
+    "fast-equals": "^4.0.3",
     "prop-types": "^15.8.1",
-    "react-draggable": "^4.0.0",
-    "react-resizable": "^3.0.4"
+    "react-draggable": "^4.4.5",
+    "react-resizable": "^3.0.5",
+    "resize-observer-polyfill": "^1.5.1"
+  },
+  "_dependencyNotes": {
+    "fast-equals": "Bug in CRA5 causes fast-equals@5 to fail to import due to .cjs file. See https://github.com/react-grid-layout/react-grid-layout/issues/1904"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.3",
-    "@babel/core": "^7.17.5",
-    "@babel/eslint-parser": "^7.17.0",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-transform-flow-comments": "^7.16.7",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-flow": "^7.16.7",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/register": "^7.17.0",
-    "@webpack-cli/serve": "^1.6.1",
-    "babel-jest": "^27.5.1",
-    "babel-loader": "^8.2.2",
+    "@babel/cli": "^7.22.15",
+    "@babel/core": "^7.22.17",
+    "@babel/eslint-parser": "^7.22.15",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-transform-flow-comments": "^7.22.10",
+    "@babel/preset-env": "^7.22.15",
+    "@babel/preset-flow": "^7.22.15",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/register": "^7.22.15",
+    "@webpack-cli/serve": "^2.0.5",
+    "babel-jest": "^29.6.4",
+    "babel-loader": "^9.1.3",
     "babel-plugin-preval": "^5.1.0",
-    "css-loader": "^6.6.0",
-    "ejs": "^3.1.6",
+    "css-loader": "^6.8.1",
+    "ejs": "^3.1.9",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
+    "enzyme-adapter-react-16": "^1.15.7",
     "enzyme-to-json": "^3.6.2",
-    "eslint": "^8.9.0",
+    "eslint": "^8.49.0",
     "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-mocha": "^10.0.3",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-unicorn": "^41.0.0",
-    "exports-loader": "^3.0.0",
+    "eslint-plugin-mocha": "^10.1.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-unicorn": "^48.0.1",
+    "exports-loader": "^4.0.0",
     "flow-bin": "^0.172.0",
-    "husky": "^7.0.2",
-    "imports-loader": "^3.0.0",
-    "jest": "^27.5.1",
-    "lint-staged": "^12.3.4",
+    "husky": "^8.0.3",
+    "imports-loader": "^4.0.1",
+    "jest": "^29.6.4",
+    "jest-environment-jsdom": "^29.6.4",
+    "lint-staged": "^14.0.1",
     "lodash": "^4.17.21",
     "opener": "^1.5.2",
-    "prettier": "^2.3.2",
+    "prettier": "^3.0.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-hot-loader": "^4.13.0",
+    "react-hot-loader": "^4.13.1",
     "react-transform-hmr": "^1.0.2",
-    "style-loader": "^3.2.1",
+    "style-loader": "^3.3.3",
     "timsort": "^0.3.0",
-    "webpack": "^5.69.1",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4"
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   },
   "peerDependencies": {
     "react": ">= 16.3.0",
@@ -104,7 +109,9 @@
       "<rootDir>/test/spec/*.js"
     ],
     "testEnvironment": "jsdom",
-    "testURL": "http://localhost",
+    "testEnvironmentOptions": {
+      "url": "http://localhost"
+    },
     "coverageThreshold": {
       "global": {
         "statements": 77,