react-grid-layout 1.3.3 → 1.4.0

package/index.js

@@ -1,5 +1,6 @@
 module.exports = require("./build/ReactGridLayout").default;
 module.exports.utils = require("./build/utils");
+module.exports.calculateUtils = require("./build/calculateUtils");
 module.exports.Responsive =
   require("./build/ResponsiveReactGridLayout").default;
 module.exports.Responsive.utils = require("./build/responsiveUtils");

package/lib/GridItem.jsx

@@ -41,9 +41,19 @@ type GridItemCallback<Data: GridDragEvent | GridResizeEvent> = (
   h: number,
   Data
 ) => void;
+type GridItemResizeCallback = (
+  e: Event,
+  data: ResizeCallbackData,
+  position: Position
+) => void;
+type ResizeCallbackData = {
+  node: HTMLElement,
+  size: Position,
+  handle: string
+};
 
 type State = {
-  resizing: ?{ width: number, height: number },
+  resizing: ?{ top: number, left: number, width: number, height: number },
   dragging: ?{ top: number, left: number },
   className: string
 };
@@ -356,6 +366,15 @@ 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 =>
+      handler(e, data, position);
+  }
+
   /**
    * Mix a Resizable instance into a child.
    * @param  {Element} child    Child element.
@@ -381,13 +400,7 @@ export default class GridItem extends React.Component<Props, State> {
     const positionParams = this.getPositionParams();
 
     // This is the max possible width - doesn't go to infinity because of the width of the window
-    const maxWidth = calcGridItemPosition(
-      positionParams,
-      0,
-      0,
-      cols - x,
-      0
-    ).width;
+    const maxWidth = calcGridItemPosition(positionParams, 0, 0, cols, 0).width;
 
     // Calculate min/max constraints using our min & maxes
     const mins = calcGridItemPosition(positionParams, 0, 0, minW, minH);
@@ -408,9 +421,9 @@ export default class GridItem extends React.Component<Props, State> {
         height={position.height}
         minConstraints={minConstraints}
         maxConstraints={maxConstraints}
-        onResizeStop={this.onResizeStop}
-        onResizeStart={this.onResizeStart}
-        onResize={this.onResize}
+        onResizeStop={this.curryResizeHandler(position, this.onResizeStop)}
+        onResizeStart={this.curryResizeHandler(position, this.onResizeStart)}
+        onResize={this.curryResizeHandler(position, this.onResize)}
         transformScale={transformScale}
         resizeHandles={resizeHandles}
         handle={resizeHandle}
@@ -541,53 +554,31 @@ export default class GridItem extends React.Component<Props, State> {
    * @param  {Event}  e             event data
    * @param  {Object} callbackData  an object with node and size information
    */
-  onResizeStop: (Event, { node: HTMLElement, size: Position }) => void = (
-    e,
-    callbackData
-  ) => {
-    this.onResizeHandler(e, callbackData, "onResizeStop");
-  };
+  onResizeStop: GridItemResizeCallback = (e, callbackData, position) =>
+    this.onResizeHandler(e, callbackData, position, "onResizeStop");
 
-  /**
-   * onResizeStart event handler
-   * @param  {Event}  e             event data
-   * @param  {Object} callbackData  an object with node and size information
-   */
-  onResizeStart: (Event, { node: HTMLElement, size: Position }) => void = (
-    e,
-    callbackData
-  ) => {
-    this.onResizeHandler(e, callbackData, "onResizeStart");
-  };
+  // onResizeStart event handler
+  onResizeStart: GridItemResizeCallback = (e, callbackData, position) =>
+    this.onResizeHandler(e, callbackData, position, "onResizeStart");
 
-  /**
-   * onResize event handler
-   * @param  {Event}  e             event data
-   * @param  {Object} callbackData  an object with node and size information
-   */
-  onResize: (Event, { node: HTMLElement, size: Position }) => void = (
-    e,
-    callbackData
-  ) => {
-    this.onResizeHandler(e, callbackData, "onResize");
-  };
+  // onResize event handler
+  onResize: GridItemResizeCallback = (e, callbackData, position) =>
+    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).
-   *
-   * @param  {String} handlerName Handler name to wrap.
-   * @return {Function}           Handler function.
    */
   onResizeHandler(
     e: Event,
-    { node, size }: { node: HTMLElement, size: Position },
+    { node, size, handle }: ResizeCallbackData,
+    position: Position,
     handlerName: string
   ): void {
     const handler = this.props[handlerName];
     if (!handler) return;
-    const { cols, x, y, i, maxH, minH } = this.props;
+    const { x, y, i, maxH, minH } = this.props;
     let { minW, maxW } = this.props;
 
     // Get new XY
@@ -596,22 +587,121 @@ export default class GridItem extends React.Component<Props, State> {
       size.width,
       size.height,
       x,
-      y
+      y,
+      handle
     );
 
     // minW should be at least 1 (TODO propTypes validation?)
     minW = Math.max(minW, 1);
 
-    // maxW should be at most (cols - x)
-    maxW = Math.min(maxW, cols - x);
-
     // Min/max capping
     w = clamp(w, minW, maxW);
     h = clamp(h, minH, maxH);
 
-    this.setState({ resizing: handlerName === "onResizeStop" ? null : size });
+    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);
+  }
 
-    handler.call(this, i, w, h, { e, node, size });
+  constrainTop(top: number): number {
+    return Math.max(0, top);
   }
 
   render(): ReactNode {

package/lib/ReactGridLayout.jsx

@@ -1,7 +1,7 @@
 // @flow
 import * as React from "react";
 
-import isEqual from "lodash.isequal";
+import { deepEqual } from "fast-equals";
 import clsx from "clsx";
 import {
   bottom,
@@ -47,6 +47,7 @@ type State = {
   oldDragItem: ?LayoutItem,
   oldLayout: ?Layout,
   oldResizeItem: ?LayoutItem,
+  resizing: boolean,
   droppingDOMNode: ?ReactElement<any>,
   droppingPosition?: DroppingPosition,
   // Mirrored props
@@ -132,6 +133,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     oldDragItem: null,
     oldLayout: null,
     oldResizeItem: null,
+    resizing: false,
     droppingDOMNode: null,
     children: []
   };
@@ -158,7 +160,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     // Legacy support for compactType
     // Allow parent to set layout directly.
     if (
-      !isEqual(nextProps.layout, prevState.propsLayout) ||
+      !deepEqual(nextProps.layout, prevState.propsLayout) ||
       nextProps.compactType !== prevState.compactType
     ) {
       newLayoutBase = nextProps.layout;
@@ -198,7 +200,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
       // from SCU is if the user intentionally memoizes children. If they do, and they can
       // handle changes properly, performance will increase.
       this.props.children !== nextProps.children ||
-      !fastRGLPropsEqual(this.props, nextProps, isEqual) ||
+      !fastRGLPropsEqual(this.props, nextProps, deepEqual) ||
       this.state.activeDrag !== nextState.activeDrag ||
       this.state.mounted !== nextState.mounted ||
       this.state.droppingPosition !== nextState.droppingPosition
@@ -348,12 +350,13 @@ export default class ReactGridLayout extends React.Component<Props, State> {
       allowOverlap
     );
 
-    this.props.onDragStop(layout, oldDragItem, l, null, e, node);
-
     // Set state
     const newLayout = allowOverlap
       ? layout
       : compact(layout, compactType(this.props), cols);
+
+    this.props.onDragStop(newLayout, oldDragItem, l, null, e, node);
+
     const { oldLayout } = this.state;
     this.setState({
       activeDrag: null,
@@ -368,7 +371,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
   onLayoutMaybeChanged(newLayout: Layout, oldLayout: ?Layout) {
     if (!oldLayout) oldLayout = this.state.layout;
 
-    if (!isEqual(oldLayout, newLayout)) {
+    if (!deepEqual(oldLayout, newLayout)) {
       this.props.onLayoutChange(newLayout);
     }
   }
@@ -385,7 +388,8 @@ export default class ReactGridLayout extends React.Component<Props, State> {
 
     this.setState({
       oldResizeItem: cloneLayoutItem(l),
-      oldLayout: this.state.layout
+      oldLayout: this.state.layout,
+      resizing: true
     });
 
     this.props.onResizeStart(layout, l, l, null, e, node);
@@ -395,9 +399,10 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     i,
     w,
     h,
-    { e, node }
+    { e, node, size, handle }
   ) => {
-    const { layout, oldResizeItem } = this.state;
+    const { oldResizeItem } = this.state;
+    let { layout } = this.state;
     const { cols, preventCollision, allowOverlap } = this.props;
 
     const [newLayout, l] = withLayoutItem(layout, i, l => {
@@ -425,18 +430,49 @@ export default class ReactGridLayout extends React.Component<Props, State> {
         }
       }
 
-      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;
 
+    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;
+      // Move the element to the new position.
+      const isUserAction = true;
+      finalLayout = moveElement(
+        newLayout,
+        l,
+        x,
+        y,
+        isUserAction,
+        this.props.preventCollision,
+        compactType(this.props),
+        cols,
+        allowOverlap
+      );
+    } else {
+      l.w = w;
+      l.h = h;
+      finalLayout = newLayout;
+    }
+
     // Create placeholder element (display only)
     const placeholder = {
       w: l.w,
@@ -447,13 +483,13 @@ export default class ReactGridLayout extends React.Component<Props, State> {
       i: i
     };
 
-    this.props.onResize(newLayout, oldResizeItem, l, placeholder, e, node);
+    this.props.onResize(finalLayout, oldResizeItem, l, placeholder, e, node);
 
     // Re-compact the newLayout and set the drag placeholder.
     this.setState({
       layout: allowOverlap
-        ? newLayout
-        : compact(newLayout, compactType(this.props), cols),
+        ? finalLayout
+        : compact(finalLayout, compactType(this.props), cols),
       activeDrag: placeholder
     });
   };
@@ -468,18 +504,20 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     const { cols, allowOverlap } = this.props;
     const l = getLayoutItem(layout, i);
 
-    this.props.onResizeStop(layout, oldResizeItem, l, null, e, node);
-
     // Set state
     const newLayout = allowOverlap
       ? layout
       : compact(layout, compactType(this.props), cols);
+
+    this.props.onResizeStop(newLayout, oldResizeItem, l, null, e, node);
+
     const { oldLayout } = this.state;
     this.setState({
       activeDrag: null,
       layout: newLayout,
       oldResizeItem: null,
-      oldLayout: null
+      oldLayout: null,
+      resizing: false
     });
 
     this.onLayoutMaybeChanged(newLayout, oldLayout);
@@ -511,7 +549,9 @@ export default class ReactGridLayout extends React.Component<Props, State> {
         x={activeDrag.x}
         y={activeDrag.y}
         i={activeDrag.i}
-        className="react-grid-placeholder"
+        className={`react-grid-placeholder ${
+          this.state.resizing ? "placeholder-resizing" : ""
+        }`}
         containerWidth={width}
         cols={cols}
         margin={margin}
@@ -713,7 +753,8 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     const newLayout = compact(
       layout.filter(l => l.i !== droppingItem.i),
       compactType(this.props),
-      cols
+      cols,
+      this.props.allowOverlap
     );
 
     this.setState({
@@ -726,6 +767,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
 
   onDragLeave: EventHandler = e => {
     e.preventDefault(); // Prevent any browser native action
+    e.stopPropagation();
     this.dragEnterCounter--;
 
     // onDragLeave can be triggered on each layout's child.
@@ -740,11 +782,13 @@ export default class ReactGridLayout extends React.Component<Props, State> {
 
   onDragEnter: EventHandler = e => {
     e.preventDefault(); // Prevent any browser native action
+    e.stopPropagation();
     this.dragEnterCounter++;
   };
 
   onDrop: EventHandler = (e: Event) => {
     e.preventDefault(); // Prevent any browser native action
+    e.stopPropagation();
     const { droppingItem } = this.props;
     const { layout } = this.state;
     const item = layout.find(l => l.i === droppingItem.i);

package/lib/ResponsiveReactGridLayout.jsx

@@ -1,7 +1,7 @@
 // @flow
 import * as React from "react";
 import PropTypes from "prop-types";
-import isEqual from "lodash.isequal";
+import { deepEqual } from "fast-equals";
 
 import {
   cloneLayout,
@@ -203,7 +203,7 @@ export default class ResponsiveReactGridLayout extends React.Component<
     nextProps: Props<*>,
     prevState: State
   ): ?$Shape<State> {
-    if (!isEqual(nextProps.layouts, prevState.layouts)) {
+    if (!deepEqual(nextProps.layouts, prevState.layouts)) {
       // Allow parent to set layouts directly.
       const { breakpoint, cols } = prevState;
 
@@ -228,8 +228,8 @@ export default class ResponsiveReactGridLayout extends React.Component<
     if (
       this.props.width != prevProps.width ||
       this.props.breakpoint !== prevProps.breakpoint ||
-      !isEqual(this.props.breakpoints, prevProps.breakpoints) ||
-      !isEqual(this.props.cols, prevProps.cols)
+      !deepEqual(this.props.breakpoints, prevProps.breakpoints) ||
+      !deepEqual(this.props.cols, prevProps.cols)
     ) {
       this.onWidthChange(prevProps);
     }

package/lib/calculateUtils.js

@@ -71,6 +71,14 @@ export function calcGridItemPosition(
   if (state && state.dragging) {
     out.top = Math.round(state.dragging.top);
     out.left = Math.round(state.dragging.left);
+  } else if (
+    state &&
+    state.resizing &&
+    typeof state.resizing.top === "number" &&
+    typeof state.resizing.left === "number"
+  ) {
+    out.top = Math.round(state.resizing.top);
+    out.left = Math.round(state.resizing.left);
   }
   // Otherwise, calculate from grid units.
   else {
@@ -123,6 +131,7 @@ export function calcXY(
  * @param  {Number} width                   Width in pixels.
  * @param  {Number} x                       X coordinate in grid units.
  * @param  {Number} y                       Y coordinate in grid units.
+ * @param {String} handle Resize Handle.
  * @return {Object}                         w, h as grid units.
  */
 export function calcWH(
@@ -130,7 +139,8 @@ export function calcWH(
   width: number,
   height: number,
   x: number,
-  y: number
+  y: number,
+  handle: string
 ): { w: number, h: number } {
   const { margin, maxRows, cols, rowHeight } = positionParams;
   const colWidth = calcGridColWidth(positionParams);
@@ -142,9 +152,15 @@ export function calcWH(
   let h = Math.round((height + margin[1]) / (rowHeight + margin[1]));
 
   // Capping
-  w = clamp(w, 0, cols - x);
-  h = clamp(h, 0, maxRows - y);
-  return { w, h };
+  let _w = clamp(w, 0, cols - x);
+  let _h = clamp(h, 0, maxRows - y);
+  if (["sw", "w", "nw"].indexOf(handle) !== -1) {
+    _w = clamp(w, 0, cols);
+  }
+  if (["nw", "n", "ne"].indexOf(handle) !== -1) {
+    _h = clamp(h, 0, maxRows);
+  }
+  return { w: _w, h: _h };
 }
 
 // Similar to _.clamp

package/lib/components/WidthProvider.jsx

@@ -1,6 +1,7 @@
 // @flow
 import * as React from "react";
 import PropTypes from "prop-types";
+import ResizeObserver from "resize-observer-polyfill";
 import clsx from "clsx";
 import type { ReactRef } from "../ReactGridLayoutPropTypes";
 
@@ -58,30 +59,31 @@ export default function WidthProvideRGL<Config>(
 
     elementRef: ReactRef<HTMLDivElement> = React.createRef();
     mounted: boolean = false;
+    resizeObserver: ResizeObserver;
 
     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
-      // appears because of the grid. In that case, fire your own resize event, or set `overflow: scroll` on your body.
-      this.onWindowResize();
+      this.resizeObserver = new ResizeObserver(entries => {
+        const node = this.elementRef.current;
+        if (node instanceof HTMLElement) {
+          const width = entries[0].contentRect.width;
+          this.setState({ width });
+        }
+      });
+      const node = this.elementRef.current;
+      if (node instanceof HTMLElement) {
+        this.resizeObserver.observe(node);
+      }
     }
 
     componentWillUnmount() {
       this.mounted = false;
-      window.removeEventListener("resize", this.onWindowResize);
-    }
-
-    onWindowResize = () => {
-      if (!this.mounted) return;
-      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 });
+      const node = this.elementRef.current;
+      if (node instanceof HTMLElement) {
+        this.resizeObserver.unobserve(node);
       }
-    };
+      this.resizeObserver.disconnect();
+    }
 
     render() {
       const { measureBeforeMount, ...rest } = this.props;