react-grid-layout 1.2.1 → 1.2.5

package/lib/GridItem.jsx

@@ -1,6 +1,5 @@
 // @flow
 import React from "react";
-import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 import { DraggableCore } from "react-draggable";
 import { Resizable } from "react-resizable";
@@ -14,7 +13,7 @@ import {
   clamp
 } from "./calculateUtils";
 import {
-  resizeHandlesType,
+  resizeHandleAxesType,
   resizeHandleType
 } from "./ReactGridLayoutPropTypes";
 import classNames from "classnames";
@@ -29,7 +28,11 @@ import type {
 } from "./utils";
 
 import type { PositionParams } from "./calculateUtils";
-import type { ResizeHandles, ResizeHandle } from "./ReactGridLayoutPropTypes";
+import type {
+  ResizeHandleAxis,
+  ResizeHandle,
+  ReactRef
+} from "./ReactGridLayoutPropTypes";
 
 type PartialPosition = { top: number, left: number };
 type GridItemCallback<Data: GridDragEvent | GridResizeEvent> = (
@@ -79,7 +82,7 @@ type Props = {
   maxH: number,
   i: string,
 
-  resizeHandles?: ResizeHandles,
+  resizeHandles?: ResizeHandleAxis[],
   resizeHandle?: ResizeHandle,
 
   onDrag?: GridItemCallback<GridDragEvent>,
@@ -156,7 +159,7 @@ export default class GridItem extends React.Component<Props, State> {
     i: PropTypes.string.isRequired,
 
     // Resize handle options
-    resizeHandles: resizeHandlesType,
+    resizeHandles: resizeHandleAxesType,
     resizeHandle: resizeHandleType,
 
     // Functions
@@ -208,7 +211,7 @@ export default class GridItem extends React.Component<Props, State> {
     className: ""
   };
 
-  currentNode: HTMLElement;
+  elementRef: ReactRef<HTMLDivElement> = React.createRef();
 
   shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
     // We can't deeply compare children. If the developer memoizes them, we can
@@ -251,6 +254,9 @@ export default class GridItem extends React.Component<Props, State> {
   moveDroppingItem(prevProps: Props) {
     const { droppingPosition } = this.props;
     if (!droppingPosition) return;
+    const node = this.elementRef.current;
+    // Can't find DOM node (are we unmounted?)
+    if (!node) return;
 
     const prevDroppingPosition = prevProps.droppingPosition || {
       left: 0,
@@ -258,18 +264,13 @@ export default class GridItem extends React.Component<Props, State> {
     };
     const { dragging } = this.state;
 
-    if (!this.currentNode) {
-      // eslint-disable-next-line react/no-find-dom-node
-      this.currentNode = ((ReactDOM.findDOMNode(this): any): HTMLElement);
-    }
-
     const shouldDrag =
       (dragging && droppingPosition.left !== prevDroppingPosition.left) ||
       droppingPosition.top !== prevDroppingPosition.top;
 
     if (!dragging) {
       this.onDragStart(droppingPosition.e, {
-        node: this.currentNode,
+        node,
         deltaX: droppingPosition.left,
         deltaY: droppingPosition.top
       });
@@ -278,7 +279,7 @@ export default class GridItem extends React.Component<Props, State> {
       const deltaY = droppingPosition.top - dragging.top;
 
       this.onDrag(droppingPosition.e, {
-        node: this.currentNode,
+        node,
         deltaX,
         deltaY
       });
@@ -348,6 +349,7 @@ export default class GridItem extends React.Component<Props, State> {
           (this.props.cancel ? "," + this.props.cancel : "")
         }
         scale={this.props.transformScale}
+        nodeRef={this.elementRef}
       >
         {child}
       </DraggableCore>
@@ -392,8 +394,9 @@ export default class GridItem extends React.Component<Props, State> {
     ];
     return (
       <Resizable
+        // These are opts for the resize handle itself
         draggableOpts={{
-          disabled: !isResizable
+          disabled: !isResizable,
         }}
         className={isResizable ? undefined : "react-resizable-hide"}
         width={position.width}
@@ -630,6 +633,7 @@ export default class GridItem extends React.Component<Props, State> {
 
     // Create the child element. We clone the existing element but modify its className and style.
     let newChild = React.cloneElement(child, {
+      ref: this.elementRef,
       className: classNames(
         "react-grid-item",
         child.props.className,

package/lib/ReactGridLayout.jsx

@@ -9,13 +9,14 @@ import {
   childrenEqual,
   cloneLayoutItem,
   compact,
+  compactType,
+  fastRGLPropsEqual,
+  getAllCollisions,
   getLayoutItem,
   moveElement,
-  synchronizeLayoutWithChildren,
-  getAllCollisions,
-  compactType,
   noop,
-  fastRGLPropsEqual
+  synchronizeLayoutWithChildren,
+  withLayoutItem
 } from "./utils";
 
 import { calcXY } from "./calculateUtils";
@@ -255,7 +256,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     { e, node }: GridDragEvent
   ): void {
     const { layout } = this.state;
-    var l = getLayoutItem(layout, i);
+    const l = getLayoutItem(layout, i);
     if (!l) return;
 
     this.setState({
@@ -278,11 +279,11 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     const { oldDragItem } = this.state;
     let { layout } = this.state;
     const { cols } = this.props;
-    var l = getLayoutItem(layout, i);
+    const l = getLayoutItem(layout, i);
     if (!l) return;
 
     // Create placeholder (display only)
-    var placeholder = {
+    const placeholder = {
       w: l.w,
       h: l.h,
       x: l.x,
@@ -372,7 +373,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
 
   onResizeStart(i: string, w: number, h: number, { e, node }: GridResizeEvent) {
     const { layout } = this.state;
-    var l = getLayoutItem(layout, i);
+    const l = getLayoutItem(layout, i);
     if (!l) return;
 
     this.setState({
@@ -386,44 +387,46 @@ export default class ReactGridLayout extends React.Component<Props, State> {
   onResize(i: string, w: number, h: number, { e, node }: GridResizeEvent) {
     const { layout, oldResizeItem } = this.state;
     const { cols, preventCollision } = this.props;
-    const originalLayoutItem: ?LayoutItem = getLayoutItem(layout, i);
-    if (!originalLayoutItem) return;
-
-    // We're going to modify this object now, so clone it first.
-    const l = cloneLayoutItem(originalLayoutItem);
-
-    // Something like quad tree should be used
-    // to find collisions faster
-    let hasCollisions;
-    if (preventCollision) {
-      const collisions = getAllCollisions(layout, { ...l, w, h }).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;
+
+    const [newLayout, l] = withLayoutItem(layout, i, l => {
+      // Something like quad tree should be used
+      // to find collisions faster
+      let hasCollisions;
+      if (preventCollision) {
+        const collisions = getAllCollisions(layout, { ...l, w, h }).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;
+        }
       }
-    }
 
-    if (!hasCollisions) {
-      // Set new width and height.
-      l.w = w;
-      l.h = h;
-    }
+      if (!hasCollisions) {
+        // Set new width and height.
+        l.w = w;
+        l.h = h;
+      }
+
+      return l;
+    });
+
+    // Shouldn't ever happen, but typechecking makes it necessary
+    if (!l) return;
 
     // Create placeholder element (display only)
-    var placeholder = {
+    const placeholder = {
       w: l.w,
       h: l.h,
       x: l.x,
@@ -432,11 +435,11 @@ export default class ReactGridLayout extends React.Component<Props, State> {
       i: i
     };
 
-    this.props.onResize(layout, oldResizeItem, l, placeholder, e, node);
+    this.props.onResize(newLayout, oldResizeItem, l, placeholder, e, node);
 
-    // Re-compact the layout and set the drag placeholder.
+    // Re-compact the newLayout and set the drag placeholder.
     this.setState({
-      layout: compact(layout, compactType(this.props), cols),
+      layout: compact(newLayout, compactType(this.props), cols),
       activeDrag: placeholder
     });
   }
@@ -444,7 +447,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
   onResizeStop(i: string, w: number, h: number, { e, node }: GridResizeEvent) {
     const { layout, oldResizeItem } = this.state;
     const { cols } = this.props;
-    var l = getLayoutItem(layout, i);
+    const l = getLayoutItem(layout, i);
 
     this.props.onResizeStop(layout, oldResizeItem, l, null, e, node);
 

package/lib/ReactGridLayoutPropTypes.js

@@ -8,11 +8,16 @@ import type {
 } from "react";
 import type { EventCallback, CompactType, Layout, LayoutItem } from "./utils";
 
-type ResizeHandleAxis = "s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne";
-export type ResizeHandles = Array<ResizeHandleAxis>;
+// util
+export type ReactRef<T: HTMLElement> = {|
+  +current: T | null
+|};
+
+export type ResizeHandleAxis = "s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne";
 export type ResizeHandle =
   | ReactElement<any>
-  | ((resizeHandleAxis: ResizeHandleAxis) => ReactElement<any>);
+  | ((resizeHandleAxis: ResizeHandleAxis, ref: ReactRef<HTMLElement>) => ReactElement<any>);
+
 
 // Defines which resize handles should be rendered (default: 'se')
 // Allows for any combination of:
@@ -24,7 +29,7 @@ export type ResizeHandle =
 // 'nw' - Northwest handle (top-left)
 // 'se' - Southeast handle (bottom-right)
 // 'ne' - Northeast handle (top-right)
-export const resizeHandlesType: ReactPropsChainableTypeChecker = PropTypes.arrayOf(
+export const resizeHandleAxesType: ReactPropsChainableTypeChecker = PropTypes.arrayOf(
   PropTypes.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"])
 );
 // Custom component for resize handles
@@ -55,7 +60,7 @@ export type Props = {|
   useCSSTransforms: boolean,
   transformScale: number,
   droppingItem: $Shape<LayoutItem>,
-  resizeHandles: ResizeHandles,
+  resizeHandles: ResizeHandleAxis[],
   resizeHandle?: ResizeHandle,
 
   // Callbacks
@@ -164,7 +169,7 @@ export default {
   isDroppable: PropTypes.bool,
 
   // Resize handle options
-  resizeHandles: resizeHandlesType,
+  resizeHandles: resizeHandleAxesType,
   resizeHandle: resizeHandleType,
 
   //

package/lib/components/WidthProvider.jsx

@@ -1,7 +1,8 @@
 // @flow
 import * as React from "react";
 import PropTypes from "prop-types";
-import ReactDOM from "react-dom";
+import classNames from "classnames";
+import type { ReactRef } from "../ReactGridLayoutPropTypes";
 
 type WPDefaultProps = {|
   measureBeforeMount: boolean
@@ -18,29 +19,27 @@ type WPState = {|
   width: number
 |};
 
+type ComposedProps<Config> = {|
+  ...Config,
+  measureBeforeMount?: boolean,
+  className?: string,
+  style?: Object,
+  width?: number
+|};
+
+const layoutClassName = "react-grid-layout";
+
 /*
  * A simple HOC that provides facility for listening to container resizes.
  *
  * The Flow type is pretty janky here. I can't just spread `WPProps` into this returned object - I wish I could - but it triggers
  * a flow bug of some sort that causes it to stop typechecking.
  */
-export default function WidthProvider<Config>(
+export default function WidthProvideRGL<Config>(
   ComposedComponent: React.AbstractComponent<Config>
-): React.AbstractComponent<{|
-  ...Config,
-  measureBeforeMount?: boolean,
-  className?: string,
-  style?: Object,
-  width?: number
-|}> {
+): React.AbstractComponent<ComposedProps<Config>> {
   return class WidthProvider extends React.Component<
-    {|
-      ...Config,
-      measureBeforeMount?: boolean,
-      className?: string,
-      style?: Object,
-      width?: number
-    |},
+    ComposedProps<Config>,
     WPState
   > {
     static defaultProps: WPDefaultProps = {
@@ -53,15 +52,15 @@ export default function WidthProvider<Config>(
       measureBeforeMount: PropTypes.bool
     };
 
-    state = {
+    state: WPState = {
       width: 1280
     };
 
+    elementRef: ReactRef<HTMLDivElement> = React.createRef();
     mounted: boolean = false;
 
     componentDidMount() {
       this.mounted = true;
-
       window.addEventListener("resize", this.onWindowResize);
       // Call to properly set the breakpoint and resize the elements.
       // Note that if you're doing a full-width element, this can get a little wonky if a scrollbar
@@ -76,21 +75,34 @@ export default function WidthProvider<Config>(
 
     onWindowResize = () => {
       if (!this.mounted) return;
-      // eslint-disable-next-line react/no-find-dom-node
-      const node = ReactDOM.findDOMNode(this); // Flow casts this to Text | Element
-      if (node instanceof HTMLElement)
+      const node = this.elementRef.current; // Flow casts this to Text | Element
+      // fix: grid position error when node or parentNode display is none by window resize
+      // #924 #1084
+      if (node instanceof HTMLElement && node.offsetWidth) {
         this.setState({ width: node.offsetWidth });
+      }
     };
 
     render() {
       const { measureBeforeMount, ...rest } = this.props;
       if (measureBeforeMount && !this.mounted) {
         return (
-          <div className={this.props.className} style={this.props.style} />
+          <div
+            className={classNames(this.props.className, layoutClassName)}
+            style={this.props.style}
+            // $FlowIgnore ref types
+            ref={this.elementRef}
+          />
         );
       }
 
-      return <ComposedComponent {...rest} {...this.state} />;
+      return (
+        <ComposedComponent
+          innerRef={this.elementRef}
+          {...rest}
+          {...this.state}
+        />
+      );
     }
   };
 }

package/lib/utils.js

@@ -102,6 +102,35 @@ export function cloneLayout(layout: Layout): Layout {
   return newLayout;
 }
 
+// Modify a layoutItem inside a layout. Returns a new Layout,
+// does not mutate. Carries over all other LayoutItems unmodified.
+export function modifyLayout(layout: Layout, layoutItem: LayoutItem): Layout {
+  const newLayout = Array(layout.length);
+  for (let i = 0, len = layout.length; i < len; i++) {
+    if (layoutItem.i === layout[i].i) {
+      newLayout[i] = layoutItem;
+    } else {
+      newLayout[i] = layout[i];
+    }
+  }
+  return newLayout;
+}
+
+// Function to be called to modify a layout item.
+// Does defensive clones to ensure the layout is not modified.
+export function withLayoutItem(
+  layout: Layout,
+  itemKey: string,
+  cb: LayoutItem => LayoutItem
+): [Layout, ?LayoutItem] {
+  let item = getLayoutItem(layout, itemKey);
+  if (!item) return [layout, null];
+  item = cb(cloneLayoutItem(item)); // defensive clone then modify
+  // FIXME could do this faster if we already knew the index
+  layout = modifyLayout(layout, item);
+  return [layout, item];
+}
+
 // Fast path to cloning, since this is monomorphic
 export function cloneLayoutItem(layoutItem: LayoutItem): LayoutItem {
   return {
@@ -299,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;
 }
 
@@ -667,9 +701,11 @@ export function synchronizeLayoutWithChildren(
         if (!isProduction) {
           validateLayout([g], "ReactGridLayout.children");
         }
+        // FIXME clone not really necessary here
         layout[i] = 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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-grid-layout",
-  "version": "1.2.1",
+  "version": "1.2.5",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
   "main": "index.js",
   "scripts": {
@@ -35,53 +35,58 @@
   },
   "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.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.13.0",
-    "@babel/core": "^7.13.8",
+    "@babel/cli": "^7.13.16",
+    "@babel/core": "^7.14.0",
     "@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/preset-env": "^7.14.1",
+    "@babel/preset-flow": "^7.13.13",
+    "@babel/preset-react": "^7.13.13",
+    "@babel/register": "^7.13.16",
+    "@webpack-cli/serve": "^1.4.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "babel-plugin-preval": "^5.0.0",
-    "css-loader": "^5.1.1",
+    "css-loader": "^5.2.4",
     "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",
+    "enzyme-to-json": "^3.6.2",
+    "eslint": "^7.26.0",
+    "eslint-plugin-flowtype": "^5.7.2",
+    "eslint-plugin-mocha": "^8.1.0",
+    "eslint-plugin-react": "^7.23.2",
     "exports-loader": "^2.0.0",
-    "flow-bin": "^0.145.0",
-    "husky": "^5.1.2",
+    "flow-bin": "^0.150.1",
+    "husky": "^6.0.0",
     "imports-loader": "^2.0.0",
     "jest": "^26.6.3",
-    "lint-staged": "^10.5.4",
+    "lint-staged": "^11.0.0",
     "lodash": "^4.17.21",
     "opener": "^1.5.2",
-    "prettier": "^2.2.1",
+    "prettier": "^2.3.0",
     "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",
     "timsort": "^0.3.0",
-    "webpack": "^5.24.2",
-    "webpack-cli": "^4.5.0",
+    "webpack": "^5.36.2",
+    "webpack-cli": "^4.7.0",
     "webpack-dev-server": "^3.11.2"
   },
+  "peerDependencies": {
+    "react": ">= 16.3.0",
+    "react-dom": ">= 16.3.0"
+  },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },

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
-