react-grid-layout 1.4.0 → 1.4.2

package/lib/GridItem.jsx

@@ -3,7 +3,13 @@ import React from "react";
 import PropTypes from "prop-types";
 import { DraggableCore } from "react-draggable";
 import { Resizable } from "react-resizable";
-import { fastPositionEqual, perc, setTopLeft, setTransform } from "./utils";
+import {
+  fastPositionEqual,
+  perc,
+  resizeItemInDirection,
+  setTopLeft,
+  setTransform
+} from "./utils";
 import {
   calcGridItemPosition,
   calcGridItemWHPx,
@@ -24,15 +30,12 @@ import type {
   GridDragEvent,
   GridResizeEvent,
   DroppingPosition,
-  Position
+  Position,
+  ResizeHandleAxis
 } from "./utils";
 
 import type { PositionParams } from "./calculateUtils";
-import type {
-  ResizeHandleAxis,
-  ResizeHandle,
-  ReactRef
-} from "./ReactGridLayoutPropTypes";
+import type { ResizeHandle, ReactRef } from "./ReactGridLayoutPropTypes";
 
 type PartialPosition = { top: number, left: number };
 type GridItemCallback<Data: GridDragEvent | GridResizeEvent> = (
@@ -41,16 +44,18 @@ type GridItemCallback<Data: GridDragEvent | GridResizeEvent> = (
   h: number,
   Data
 ) => void;
+
+type ResizeCallbackData = {
+  node: HTMLElement,
+  size: Position,
+  handle: ResizeHandleAxis
+};
+
 type GridItemResizeCallback = (
   e: Event,
   data: ResizeCallbackData,
   position: Position
 ) => void;
-type ResizeCallbackData = {
-  node: HTMLElement,
-  size: Position,
-  handle: string
-};
 
 type State = {
   resizing: ?{ top: number, left: number, width: number, height: number },
@@ -370,8 +375,8 @@ export default class GridItem extends React.Component<Props, State> {
    * Utility function to setup callback handler definitions for
    * similarily structured resize events.
    */
-  curryResizeHandler(position: Position, handler: function): function {
-    return (e: Event, data: ResizeCallbackData): function =>
+  curryResizeHandler(position: Position, handler: Function): Function {
+    return (e: Event, data: ResizeCallbackData): Function =>
       handler(e, data, position);
   }
 
@@ -388,7 +393,6 @@ export default class GridItem extends React.Component<Props, State> {
   ): ReactElement<any> {
     const {
       cols,
-      x,
       minW,
       minH,
       maxW,
@@ -566,144 +570,51 @@ export default class GridItem extends React.Component<Props, State> {
     this.onResizeHandler(e, callbackData, position, "onResize");
 
   /**
-   * Wrapper around drag events to provide more useful data.
-   * All drag events call the function with the given handler name,
-   * with the signature (index, x, y).
+   * Wrapper around resize events to provide more useful data.
    */
   onResizeHandler(
     e: Event,
-    { node, size, handle }: ResizeCallbackData,
-    position: Position,
+    { node, size, handle }: ResizeCallbackData, // 'size' is updated position
+    position: Position, // existing position
     handlerName: string
   ): void {
     const handler = this.props[handlerName];
     if (!handler) return;
-    const { x, y, i, maxH, minH } = this.props;
-    let { minW, maxW } = this.props;
+    const { x, y, i, maxH, minH, containerWidth } = this.props;
+    const { minW, maxW } = this.props;
+
+    // Clamping of dimensions based on resize direction
+    let updatedSize = size;
+    if (node) {
+      updatedSize = resizeItemInDirection(
+        handle,
+        position,
+        size,
+        containerWidth
+      );
+      this.setState({
+        resizing: handlerName === "onResizeStop" ? null : updatedSize
+      });
+    }
 
-    // Get new XY
+    // Get new XY based on pixel size
     let { w, h } = calcWH(
       this.getPositionParams(),
-      size.width,
-      size.height,
+      updatedSize.width,
+      updatedSize.height,
       x,
       y,
       handle
     );
 
+    // Min/max capping.
     // minW should be at least 1 (TODO propTypes validation?)
-    minW = Math.max(minW, 1);
-
-    // Min/max capping
-    w = clamp(w, minW, maxW);
+    w = clamp(w, Math.max(minW, 1), maxW);
     h = clamp(h, minH, maxH);
 
-    let updatedSize = size;
-    if (node) {
-      const currentLeft = position.left;
-      const currentTop = position.top;
-      const currentWidth = position.width;
-      const currentHeight = position.height;
-
-      const resizeNorth = ({ left, height, width }) => {
-        const top = currentTop - (height - currentHeight);
-
-        return {
-          top,
-          left,
-          width,
-          height: this.constrainHeight(top, currentHeight, height),
-          top: this.constrainTop(top)
-        };
-      };
-
-      const resizeEast = ({ top, left, height, width }) => ({
-        top,
-        height,
-        width: this.constrainWidth(currentLeft, currentWidth, width),
-        left: this.constrainLeft(left)
-      });
-
-      const resizeWest = ({ top, height, width }) => {
-        const left = currentLeft - (width - currentWidth);
-
-        return {
-          height,
-          width:
-            left <= 0
-              ? currentWidth
-              : this.constrainWidth(currentLeft, currentWidth, width),
-          top: this.constrainTop(top),
-          left: this.constrainLeft(left)
-        };
-      };
-
-      const resizeSouth = ({ top, left, height, width }) => ({
-        width,
-        left,
-        height: this.constrainHeight(top, currentHeight, height),
-        top: this.constrainTop(top)
-      });
-
-      const resizeNorthEast = (...args) => resizeNorth(resizeEast(...args));
-      const resizeNorthWest = (...args) => resizeNorth(resizeWest(...args));
-      const resizeSouthEast = (...args) => resizeSouth(resizeEast(...args));
-      const resizeSouthWest = (...args) => resizeSouth(resizeWest(...args));
-
-      const ordinalResizeHandlerMap = {
-        n: resizeNorth,
-        ne: resizeNorthEast,
-        e: resizeEast,
-        se: resizeSouthEast,
-        s: resizeSouth,
-        sw: resizeSouthWest,
-        w: resizeWest,
-        nw: resizeNorthWest
-      };
-
-      const resizeHandler = ordinalResizeHandlerMap[handle];
-      updatedSize = resizeHandler
-        ? resizeHandler({
-            top: currentTop,
-            left: currentLeft,
-            height: currentHeight,
-            width: currentWidth,
-            ...size
-          })
-        : size;
-      this.setState({
-        resizing: handlerName === "onResizeStop" ? null : updatedSize
-      });
-    }
-
     handler.call(this, i, w, h, { e, node, size: updatedSize, handle });
   }
 
-  /**
-   * Helper functions to constrain dimensions of a GridItem
-   */
-  constrainWidth(left: number, currentWidth: number, newWidth: number): number {
-    return left + newWidth > this.props.containerWidth
-      ? currentWidth
-      : newWidth;
-  }
-
-  constrainHeight(
-    top: number,
-    currentHeight: number,
-    newHeight: number
-  ): number {
-    return top <= 0 ? currentHeight : newHeight;
-  }
-
-  constrainLeft(left: number): number {
-    return Math.max(0, left);
-  }
-
-  constrainTop(top: number): number {
-    return Math.max(0, top);
-  }
-
   render(): ReactNode {
     const {
       x,

package/lib/ReactGridLayout.jsx

@@ -405,55 +405,65 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     let { layout } = this.state;
     const { cols, preventCollision, allowOverlap } = this.props;
 
+    let shouldMoveItem = false;
+    let finalLayout;
+    let x;
+    let y;
+
     const [newLayout, l] = withLayoutItem(layout, i, l => {
+      let hasCollisions;
+      x = l.x;
+      y = l.y;
+      if (["sw", "w", "nw", "n", "ne"].indexOf(handle) !== -1) {
+        if (["sw", "nw", "w"].indexOf(handle) !== -1) {
+          x = l.x + (l.w - w);
+          w = l.x !== x && x < 0 ? l.w : w;
+          x = x < 0 ? 0 : x;
+        }
+
+        if (["ne", "n", "nw"].indexOf(handle) !== -1) {
+          y = l.y + (l.h - h);
+          h = l.y !== y && y < 0 ? l.h : h;
+          y = y < 0 ? 0 : y;
+        }
+
+        shouldMoveItem = true;
+      }
+
       // Something like quad tree should be used
       // to find collisions faster
-      let hasCollisions;
       if (preventCollision && !allowOverlap) {
-        const collisions = getAllCollisions(layout, { ...l, w, h }).filter(
-          layoutItem => layoutItem.i !== l.i
-        );
+        const collisions = getAllCollisions(layout, {
+          ...l,
+          w,
+          h,
+          x,
+          y
+        }).filter(layoutItem => 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
-          let leastX = Infinity,
-            leastY = Infinity;
-          collisions.forEach(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;
+          // Reset layoutItem dimensions if there were collisions
+          y = l.y;
+          h = l.h;
+          x = l.x;
+          w = l.w;
+          shouldMoveItem = false;
         }
       }
 
+      l.w = w;
+      l.h = h;
+
       return l;
     });
 
     // Shouldn't ever happen, but typechecking makes it necessary
     if (!l) return;
 
-    let finalLayout;
-    if (["sw", "w", "nw", "n", "ne"].indexOf(handle) !== -1) {
-      let x = l.x;
-      let y = l.y;
-      if (["sw", "nw", "w"].indexOf(handle) !== -1) {
-        x = l.x + (l.w - w);
-        w = l.x !== x && x < 0 ? l.w : w;
-        x = x < 0 ? 0 : x;
-      }
-
-      if (["ne", "n", "nw"].indexOf(handle) !== -1) {
-        y = l.y + (l.h - h);
-        h = l.y !== y && y < 0 ? l.h : h;
-        y = y < 0 ? 0 : y;
-      }
-
-      l.w = w;
-      l.h = h;
+    finalLayout = newLayout;
+    if (shouldMoveItem) {
       // Move the element to the new position.
       const isUserAction = true;
       finalLayout = moveElement(
@@ -467,10 +477,6 @@ export default class ReactGridLayout extends React.Component<Props, State> {
         cols,
         allowOverlap
       );
-    } else {
-      l.w = w;
-      l.h = h;
-      finalLayout = newLayout;
     }
 
     // Create placeholder element (display only)

package/lib/ReactGridLayoutPropTypes.js

@@ -11,7 +11,8 @@ import type {
   EventCallback,
   CompactType,
   Layout,
-  LayoutItem
+  LayoutItem,
+  ResizeHandleAxis
 } from "./utils";
 
 // util
@@ -19,15 +20,6 @@ export type ReactRef<T: HTMLElement> = {|
   +current: T | null
 |};
 
-export type ResizeHandleAxis =
-  | "s"
-  | "w"
-  | "e"
-  | "n"
-  | "sw"
-  | "nw"
-  | "se"
-  | "ne";
 export type ResizeHandle =
   | ReactElement<any>
   | ((

package/lib/utils.js

@@ -5,6 +5,17 @@ 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>;
@@ -661,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)`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-grid-layout",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
   "main": "index.js",
   "scripts": {
@@ -38,12 +38,15 @@
   "homepage": "https://github.com/STRML/react-grid-layout",
   "dependencies": {
     "clsx": "^2.0.0",
-    "fast-equals": "^5.0.1",
+    "fast-equals": "^4.0.3",
     "prop-types": "^15.8.1",
     "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.22.15",
     "@babel/core": "^7.22.17",
@@ -119,9 +122,11 @@
     }
   },
   "lint-staged": {
-    "*.{js,jsx,css}": [
-      "eslint --ext .js,.jsx --fix",
-      "yarn fmt"
+    "*.{js,jsx}": [
+      "eslint --ext .js,.jsx --fix"
+    ],
+    "*": [
+      "prettier --ignore-unknown --write"
     ]
   }
 }