react-grid-layout 1.4.0 → 1.4.1

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/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.1",
   "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",

package/.packj.yaml

@@ -1,153 +0,0 @@
-#
-# Audit policies
-#
-audit:
-  alerts:
-    #
-    # category: malicious packages (publicly known and unknown)
-    #
-    malicious:
-      contains known malware:
-        - reason: package is known to contain a dangerous malware
-        - enabled: true
-      typo-squatting or repo-jacking package:
-        - reason: package impersonates another popular package to propagate malware
-        - enabled: true
-
-    #
-    # alert category: suspicious packages (potentially malicious)
-    #
-    suspicious:
-      inconsistent with repo source:
-        - reason: package code inconsistent with the public repo source code
-        - enabled: false # WIP
-      overwrites system binaries:
-        - reason: package code inconsistent with the public repo source code
-        - enabled: false # WIP
-
-    #
-    # alert category: packages vulnerable to code exploits
-    #
-    vulnerable:
-      contains known vulnerabilities:
-        - reason: known vulnerabilities (CVEs) in package code could be exploited
-        - enabled: true
-      insecure network communication:
-        - reason: package code uses insecure network communication (not https)
-        - enabled: false # WIP
-
-    #
-    # packages with undesirable or "risky" attributes
-    #
-    undesirable:
-      package is old or abandoned:
-        - reason: old or abandoned packages receive no security updates and are risky
-        - enabled: true
-
-      invalid or no author email:
-        - reason: a package with lack of or invalid author email suggests 2FA not enabled
-        - enabled: true
-
-      invalid or no homepage:
-        - reason: a package with no or invalid homepage may not be preferable
-        - enabled: false
-
-      no source repo:
-        - reason: lack of public source repo may suggest malicious intention
-        - enabled: true
-
-      fewer downloads:
-        - reason: a package with few downloads may not be preferable
-        - enabled: true
-
-      no or insufficient readme:
-        - reason: a package with lack of documentation may not be preferable
-        - enabled: false
-
-      fewer versions or releases:
-        - reason: few versions suggest unstable or inactive project
-        - enabled: true
-
-      too many dependencies:
-        - reason: too many dependencies increase attack surface
-        - enabled: false
-
-      version release after a long gap:
-        - reason: a release after a long time may indicate account hijacking
-        - enabled: false
-
-      contains custom installation hooks:
-        - reason: custom installation hooks may download or execute malicious code
-        - enabled: false # WIP
-
-      #
-      # type: repo stats
-      #
-      few source repo stars:
-        - reason: a package with few repo stars may not be preferable
-        - enabled: false
-
-      few source repo forks:
-        - reason: a package with few repo forks may not be preferable
-        - enabled: false
-
-      forked source repo:
-        - reason: a forked copy of a popular package may contain malicious code
-        - enabled: true
-
-      #
-      # type: APIs and permissions
-      #
-      generates new code:
-        - reason: package generates new code at runtime, which could be malicious
-        - enabled: false
-      forks or exits OS processes:
-        - reason: package spawns new operating system processes, which could be malicious
-        - enabled: false
-      accesses obfuscated (hidden) code:
-        - enabled: true
-      accesses environment variables:
-        - enabled: false
-      changes system/environment variables:
-        - enabled: false
-      accesses files and dirs:
-        - enabled: false
-      communicates with external network:
-        - enabled: false
-      reads user input:
-        - enabled: false
-
-#
-# Sandboxing policies
-#
-sandbox:
-  rules:
-    #
-    # File system (allow or block accesses to file/dirs)
-    #
-    #   ~/ represents home dir
-    #   . represents cwd dir
-    #
-    # NOTE: only ONE 'allow' and 'block' lines are allowed
-    #
-    fs:
-      # TODO: customize as per your threat model
-
-      # block access to home dir and all other locations (except the ones below)
-      block: ~/, /
-      allow: ., ~/.cache, ~/.npm, ~/.local, ~/.ruby, /tmp, /proc, /etc, /var, /bin, /usr/include, /usr/local, /usr/bin, /usr/lib, /usr/share, /lib
-
-    #
-    # Network (allow or block domains/ports)
-    #
-    # NOTE: only ONE 'allow' and 'block' lines are allowed
-    #
-    network:
-
-      # TODO: customize as per your threat model
-
-      # block all external network communication (except the ones below)
-      block: 0.0.0.0
-
-      # For NPM packages
-      allow: registry.yarnpkg.com:0, npmjs.org:0, npmjs.com:0