react-grid-layout 0.18.2 → 1.1.1

package/lib/GridItem.jsx

@@ -5,7 +5,14 @@ import PropTypes from "prop-types";
 import { DraggableCore } from "react-draggable";
 import { Resizable } from "react-resizable";
 import { fastPositionEqual, perc, setTopLeft, setTransform } from "./utils";
-import { calcGridItemPosition, calcXY, calcWH } from "./calculateUtils";
+import {
+  calcGridItemPosition,
+  calcGridItemWHPx,
+  calcGridColWidth,
+  calcXY,
+  calcWH,
+  clamp
+} from "./calculateUtils";
 import classNames from "classnames";
 import type { Element as ReactElement, Node as ReactNode } from "react";
 
@@ -43,6 +50,7 @@ type Props = {
   maxRows: number,
   isDraggable: boolean,
   isResizable: boolean,
+  isBounded: boolean,
   static?: boolean,
   useCSSTransforms?: boolean,
   usePercentages?: boolean,
@@ -66,6 +74,8 @@ type Props = {
   maxH: number,
   i: string,
 
+  resizeHandles?: Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'>,
+
   onDrag?: GridItemCallback<GridDragEvent>,
   onDragStart?: GridItemCallback<GridDragEvent>,
   onDragStop?: GridItemCallback<GridDragEvent>,
@@ -97,28 +107,28 @@ export default class GridItem extends React.Component<Props, State> {
     h: PropTypes.number.isRequired,
 
     // All optional
-    minW: function(props: Props, propName: string) {
+    minW: function (props: Props, propName: string) {
       const value = props[propName];
       if (typeof value !== "number") return new Error("minWidth not Number");
       if (value > props.w || value > props.maxW)
         return new Error("minWidth larger than item width/maxWidth");
     },
 
-    maxW: function(props: Props, propName: string) {
+    maxW: function (props: Props, propName: string) {
       const value = props[propName];
       if (typeof value !== "number") return new Error("maxWidth not Number");
       if (value < props.w || value < props.minW)
         return new Error("maxWidth smaller than item width/minWidth");
     },
 
-    minH: function(props: Props, propName: string) {
+    minH: function (props: Props, propName: string) {
       const value = props[propName];
       if (typeof value !== "number") return new Error("minHeight not Number");
       if (value > props.h || value > props.maxH)
         return new Error("minHeight larger than item height/maxHeight");
     },
 
-    maxH: function(props: Props, propName: string) {
+    maxH: function (props: Props, propName: string) {
       const value = props[propName];
       if (typeof value !== "number") return new Error("maxHeight not Number");
       if (value < props.h || value < props.minH)
@@ -139,6 +149,7 @@ export default class GridItem extends React.Component<Props, State> {
     // Flags
     isDraggable: PropTypes.bool.isRequired,
     isResizable: PropTypes.bool.isRequired,
+    isBounded: PropTypes.bool.isRequired,
     static: PropTypes.bool,
 
     // Use CSS transforms instead of top/left
@@ -182,6 +193,7 @@ export default class GridItem extends React.Component<Props, State> {
     // We can't deeply compare children. If the developer memoizes them, we can
     // use this optimization.
     if (this.props.children !== nextProps.children) return true;
+    if (this.props.droppingPosition !== nextProps.droppingPosition) return true;
     // TODO memoize these calculations so they don't take so long?
     const oldPosition = calcGridItemPosition(
       this.getPositionParams(this.props),
@@ -205,6 +217,10 @@ export default class GridItem extends React.Component<Props, State> {
     );
   }
 
+  componentDidMount() {
+    this.moveDroppingItem({});
+  }
+
   componentDidUpdate(prevProps: Props) {
     this.moveDroppingItem(prevProps);
   }
@@ -213,12 +229,13 @@ export default class GridItem extends React.Component<Props, State> {
   // this element by `x, y` pixels.
   moveDroppingItem(prevProps: Props) {
     const { droppingPosition } = this.props;
-    const prevDroppingPosition = prevProps.droppingPosition;
-    const { dragging } = this.state;
+    if (!droppingPosition) return;
 
-    if (!droppingPosition || !prevDroppingPosition) {
-      return;
-    }
+    const prevDroppingPosition = prevProps.droppingPosition || {
+      left: 0,
+      top: 0
+    };
+    const { dragging } = this.state;
 
     if (!this.currentNode) {
       // eslint-disable-next-line react/no-find-dom-node
@@ -327,7 +344,16 @@ export default class GridItem extends React.Component<Props, State> {
     position: Position,
     isResizable: boolean
   ): ReactElement<any> {
-    const { cols, x, minW, minH, maxW, maxH, transformScale } = this.props;
+    const {
+      cols,
+      x,
+      minW,
+      minH,
+      maxW,
+      maxH,
+      transformScale,
+      resizeHandles
+    } = this.props;
     const positionParams = this.getPositionParams();
 
     // This is the max possible width - doesn't go to infinity because of the width of the window
@@ -356,6 +382,7 @@ export default class GridItem extends React.Component<Props, State> {
         onResizeStart={this.onResizeStart}
         onResize={this.onResize}
         transformScale={transformScale}
+        resizeHandles={resizeHandles}
       >
         {child}
       </Resizable>
@@ -368,7 +395,8 @@ export default class GridItem extends React.Component<Props, State> {
    * @param  {Object} callbackData  an object with node, delta and position information
    */
   onDragStart = (e: Event, { node }: ReactDraggableCallbackData) => {
-    if (!this.props.onDragStart) return;
+    const { onDragStart } = this.props;
+    if (!onDragStart) return;
 
     const newPosition: PartialPosition = { top: 0, left: 0 };
 
@@ -385,6 +413,7 @@ export default class GridItem extends React.Component<Props, State> {
     newPosition.top = cTop - pTop + offsetParent.scrollTop;
     this.setState({ dragging: newPosition });
 
+    // Call callback with this data
     const { x, y } = calcXY(
       this.getPositionParams(),
       newPosition.top,
@@ -393,14 +422,11 @@ export default class GridItem extends React.Component<Props, State> {
       this.props.h
     );
 
-    return (
-      this.props.onDragStart &&
-      this.props.onDragStart.call(this, this.props.i, x, y, {
-        e,
-        node,
-        newPosition
-      })
-    );
+    return onDragStart.call(this, this.props.i, x, y, {
+      e,
+      node,
+      newPosition
+    });
   };
 
   /**
@@ -414,30 +440,42 @@ export default class GridItem extends React.Component<Props, State> {
     deltaX /= transformScale;
     deltaY /= transformScale;
 
-    const newPosition: PartialPosition = { top: 0, left: 0 };
-
-    if (!this.state.dragging)
+    if (!this.state.dragging) {
       throw new Error("onDrag called before onDragStart.");
-    newPosition.left = this.state.dragging.left + deltaX;
-    newPosition.top = this.state.dragging.top + deltaY;
-    this.setState({ dragging: newPosition });
+    }
+    let top = this.state.dragging.top + deltaY;
+    let left = this.state.dragging.left + deltaX;
 
-    const { x, y } = calcXY(
-      this.getPositionParams(),
-      newPosition.top,
-      newPosition.left,
-      this.props.w,
-      this.props.h
-    );
+    const { isBounded, i, w, h, containerWidth } = this.props;
+    const positionParams = this.getPositionParams();
 
-    return (
-      onDrag &&
-      onDrag.call(this, this.props.i, x, y, {
-        e,
-        node,
-        newPosition
-      })
-    );
+    // Boundary calculations; keeps items within the grid
+    if (isBounded) {
+      const { offsetParent } = node;
+
+      if (offsetParent) {
+        const { margin, rowHeight } = this.props;
+        const bottomBoundary =
+          offsetParent.clientHeight - calcGridItemWHPx(h, rowHeight, margin[1]);
+        top = clamp(top, 0, bottomBoundary);
+
+        const colWidth = calcGridColWidth(positionParams);
+        const rightBoundary =
+          containerWidth - calcGridItemWHPx(w, colWidth, margin[0]);
+        left = clamp(left, 0, rightBoundary);
+      }
+    }
+
+    const newPosition: PartialPosition = { top, left };
+    this.setState({ dragging: newPosition });
+
+    // Call callback with this data
+    const { x, y } = calcXY(positionParams, top, left, w, h);
+    return onDrag.call(this, i, x, y, {
+      e,
+      node,
+      newPosition
+    });
   };
 
   /**
@@ -446,32 +484,24 @@ export default class GridItem extends React.Component<Props, State> {
    * @param  {Object} callbackData  an object with node, delta and position information
    */
   onDragStop = (e: Event, { node }: ReactDraggableCallbackData) => {
-    if (!this.props.onDragStop) return;
-
-    const newPosition: PartialPosition = { top: 0, left: 0 };
+    const { onDragStop } = this.props;
+    if (!onDragStop) return;
 
-    if (!this.state.dragging)
+    if (!this.state.dragging) {
       throw new Error("onDragEnd called before onDragStart.");
-    newPosition.left = this.state.dragging.left;
-    newPosition.top = this.state.dragging.top;
+    }
+    const { w, h, i } = this.props;
+    const { left, top } = this.state.dragging;
+    const newPosition: PartialPosition = { top, left };
     this.setState({ dragging: null });
 
-    const { x, y } = calcXY(
-      this.getPositionParams(),
-      newPosition.top,
-      newPosition.left,
-      this.props.w,
-      this.props.h
-    );
+    const { x, y } = calcXY(this.getPositionParams(), top, left, w, h);
 
-    return (
-      this.props.onDragStop &&
-      this.props.onDragStop.call(this, this.props.i, x, y, {
-        e,
-        node,
-        newPosition
-      })
-    );
+    return onDragStop.call(this, i, x, y, {
+      e,
+      node,
+      newPosition
+    });
   };
 
   /**
@@ -525,7 +555,8 @@ export default class GridItem extends React.Component<Props, State> {
   ) {
     const handler = this.props[handlerName];
     if (!handler) return;
-    const { cols, x, y, i, maxW, minW, maxH, minH } = this.props;
+    const { cols, x, y, i, maxH, minH } = this.props;
+    let { minW, maxW } = this.props;
 
     // Get new XY
     let { w, h } = calcWH(
@@ -536,14 +567,15 @@ export default class GridItem extends React.Component<Props, State> {
       y
     );
 
-    // Cap w at numCols
-    w = Math.min(w, cols - x);
-    // Ensure w is at least 1
-    w = Math.max(w, 1);
+    // 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 = Math.max(Math.min(w, maxW), minW);
-    h = Math.max(Math.min(h, maxH), minH);
+    w = clamp(w, minW, maxW);
+    h = clamp(h, minH, maxH);
 
     this.setState({ resizing: handlerName === "onResizeStop" ? null : size });
 

package/lib/ReactGridLayout.jsx

@@ -91,6 +91,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     maxRows: Infinity, // infinite vertical growth
     layout: [],
     margin: [10, 10],
+    isBounded: false,
     isDraggable: true,
     isResizable: true,
     isDroppable: false,
@@ -104,6 +105,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
       h: 1,
       w: 1
     },
+    resizeHandles: ["se"],
     onLayoutChange: noop,
     onDragStart: noop,
     onDrag: noop,
@@ -202,7 +204,9 @@ export default class ReactGridLayout extends React.Component<Props, State> {
       // handle changes properly, performance will increase.
       this.props.children !== nextProps.children ||
       !fastRGLPropsEqual(this.props, nextProps, isEqual) ||
-      !isEqual(this.state.activeDrag, nextState.activeDrag)
+      this.state.activeDrag !== nextState.activeDrag ||
+      this.state.mounted !== nextState.mounted ||
+      this.state.droppingPosition !== nextState.droppingPosition
     );
   }
 
@@ -476,6 +480,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
         rowHeight={rowHeight}
         isDraggable={false}
         isResizable={false}
+        isBounded={false}
         useCSSTransforms={useCSSTransforms}
         transformScale={transformScale}
       >
@@ -505,10 +510,12 @@ export default class ReactGridLayout extends React.Component<Props, State> {
       maxRows,
       isDraggable,
       isResizable,
+      isBounded,
       useCSSTransforms,
       transformScale,
       draggableCancel,
-      draggableHandle
+      draggableHandle,
+      resizeHandles
     } = this.props;
     const { mounted, droppingPosition } = this.state;
 
@@ -523,6 +530,10 @@ export default class ReactGridLayout extends React.Component<Props, State> {
       typeof l.isResizable === "boolean"
         ? l.isResizable
         : !l.static && isResizable;
+    const resizeHandlesOptions = l.resizeHandles || resizeHandles;
+
+    // isBounded set on child if set on parent, and child is not explicitly false
+    const bounded = draggable && isBounded && l.isBounded !== false;
 
     return (
       <GridItem
@@ -542,6 +553,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
         onResizeStop={this.onResizeStop}
         isDraggable={draggable}
         isResizable={resizable}
+        isBounded={bounded}
         useCSSTransforms={useCSSTransforms && mounted}
         usePercentages={!mounted}
         transformScale={transformScale}
@@ -556,6 +568,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
         maxW={l.maxW}
         static={l.static}
         droppingPosition={isDroppingItem ? droppingPosition : undefined}
+        resizeHandles={resizeHandlesOptions}
       >
         {child}
       </GridItem>
@@ -671,18 +684,18 @@ export default class ReactGridLayout extends React.Component<Props, State> {
   onDrop = (e: Event) => {
     const { droppingItem } = this.props;
     const { layout } = this.state;
-    const { x, y, w, h } = layout.find(l => l.i === droppingItem.i) || {};
+    const item = layout.find(l => l.i === droppingItem.i);
 
     // reset gragEnter counter on drop
     this.dragEnterCounter = 0;
 
     this.removeDroppingPlaceholder();
 
-    this.props.onDrop({ x, y, w, h, e });
+    this.props.onDrop(layout, item, e);
   };
 
   render() {
-    const { className, style, isDroppable } = this.props;
+    const { className, style, isDroppable, innerRef } = this.props;
 
     const mergedClassName = classNames(layoutClassName, className);
     const mergedStyle = {
@@ -692,6 +705,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
 
     return (
       <div
+        ref={innerRef}
         className={mergedClassName}
         style={mergedStyle}
         onDrop={isDroppable ? this.onDrop : noop}

package/lib/ReactGridLayoutPropTypes.js

@@ -2,6 +2,7 @@
 import PropTypes from "prop-types";
 import React from "react";
 import type {
+  Ref,
   ChildrenArray as ReactChildrenArray,
   Element as ReactElement
 } from "react";
@@ -19,9 +20,10 @@ export type Props = {|
   compactType: CompactType,
   layout: Layout,
   margin: [number, number],
-  containerPadding: [number, number] | null,
+  containerPadding: ?[number, number],
   rowHeight: number,
   maxRows: number,
+  isBounded: boolean,
   isDraggable: boolean,
   isResizable: boolean,
   isDroppable: boolean,
@@ -29,6 +31,7 @@ export type Props = {|
   useCSSTransforms: boolean,
   transformScale: number,
   droppingItem: $Shape<LayoutItem>,
+  resizeHandles: Array<"s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne">,
 
   // Callbacks
   onLayoutChange: Layout => void,
@@ -38,14 +41,9 @@ export type Props = {|
   onResize: EventCallback,
   onResizeStart: EventCallback,
   onResizeStop: EventCallback,
-  onDrop: (itemPosition: {
-    x: number,
-    y: number,
-    w: number,
-    h: number,
-    e: Event
-  }) => void,
-  children: ReactChildrenArray<ReactElement<any>>
+  onDrop: (layout: Layout, item: ?LayoutItem, e: Event) => void,
+  children: ReactChildrenArray<ReactElement<any>>,
+  innerRef?: Ref<"div">
 |};
 
 export default {
@@ -71,7 +69,7 @@ export default {
   draggableHandle: PropTypes.string,
 
   // Deprecated
-  verticalCompact: function(props: Props) {
+  verticalCompact: function (props: Props) {
     if (
       props.verticalCompact === false &&
       process.env.NODE_ENV !== "production"
@@ -88,7 +86,7 @@ export default {
 
   // layout is an array of object with the format:
   // {x: Number, y: Number, w: Number, h: Number, i: String}
-  layout: function(props: Props) {
+  layout: function (props: Props) {
     var layout = props.layout;
     // I hope you're setting the data-grid property on the grid items
     if (layout === undefined) return;
@@ -115,6 +113,7 @@ export default {
   //
   // Flags
   //
+  isBounded: PropTypes.bool,
   isDraggable: PropTypes.bool,
   isResizable: PropTypes.bool,
   // If true, grid items won't change position when being dragged over.
@@ -125,6 +124,19 @@ export default {
   transformScale: PropTypes.number,
   // If true, an external element can trigger onDrop callback with a specific grid position as a parameter
   isDroppable: PropTypes.bool,
+  // Defines which resize handles should be rendered (default: 'se')
+  // Allows for any combination of:
+  // 's' - South handle (bottom-center)
+  // 'w' - West handle (left-center)
+  // 'e' - East handle (right-center)
+  // 'n' - North handle (top-center)
+  // 'sw' - Southwest handle (bottom-left)
+  // 'nw' - Northwest handle (top-left)
+  // 'se' - Southeast handle (bottom-right)
+  // 'ne' - Northeast handle (top-right)
+  resizeHandles: PropTypes.arrayOf(
+    PropTypes.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"])
+  ),
 
   //
   // Callbacks
@@ -160,12 +172,12 @@ export default {
   }),
 
   // Children must not have duplicate keys.
-  children: function(props: Props, propName: string) {
+  children: function (props: Props, propName: string) {
     var children = props[propName];
 
     // Check children keys for duplicates. Throw if found.
     var keys = {};
-    React.Children.forEach(children, function(child) {
+    React.Children.forEach(children, function (child) {
       if (keys[child.key]) {
         throw new Error(
           'Duplicate child key "' +
@@ -175,5 +187,8 @@ export default {
       }
       keys[child.key] = true;
     });
-  }
+  },
+
+  // Optional ref for getting a reference for the wrapping div.
+  innerRef: PropTypes.any
 };

package/lib/ResponsiveReactGridLayout.jsx

@@ -7,15 +7,17 @@ import {
   cloneLayout,
   synchronizeLayoutWithChildren,
   validateLayout,
-  noop
+  noop,
+  type Layout
 } from "./utils";
 import {
   getBreakpointFromWidth,
   getColsFromBreakpoint,
-  findOrGenerateResponsiveLayout
+  findOrGenerateResponsiveLayout,
+  type ResponsiveLayout,
+  type Breakpoints
 } from "./responsiveUtils";
 import ReactGridLayout from "./ReactGridLayout";
-import type { Layout } from "./utils";
 
 const type = obj => Object.prototype.toString.call(obj);
 
@@ -27,10 +29,12 @@ const type = obj => Object.prototype.toString.call(obj);
  * @return {Array}
  */
 
-function getIndentationValue(
-  param: { [key: string]: [number, number] } | [number, number],
+function getIndentationValue<T: ?[number, number]>(
+  param: { [key: string]: T } | T,
   breakpoint: string
-) {
+): T {
+  // $FlowIssue doesn't seem to understand this
+  if (param == null) return null;
   return Array.isArray(param) ? param : param[breakpoint];
 }
 
@@ -46,12 +50,13 @@ type Props<Breakpoint: string = string> = {|
 
   // Responsive config
   breakpoint?: ?Breakpoint,
-  breakpoints: { [key: Breakpoint]: number },
+  breakpoints: Breakpoints<Breakpoint>,
   cols: { [key: Breakpoint]: number },
-  layouts: { [key: Breakpoint]: Layout },
+  layouts: ResponsiveLayout<Breakpoint>,
   width: number,
   margin: { [key: Breakpoint]: [number, number] } | [number, number],
-  containerPadding: { [key: Breakpoint]: [number, number] } | [number, number],
+  /* prettier-ignore */
+  containerPadding: { [key: Breakpoint]: ?[number, number] } | ?[number, number],
 
   // Callbacks
   onBreakpointChange: (Breakpoint, cols: number) => void,
@@ -60,7 +65,7 @@ type Props<Breakpoint: string = string> = {|
     containerWidth: number,
     margin: [number, number],
     cols: number,
-    containerPadding: [number, number] | null
+    containerPadding: ?[number, number]
   ) => void
 |};
 
@@ -140,13 +145,7 @@ export default class ResponsiveReactGridLayout extends React.Component<
     cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
     layouts: {},
     margin: [10, 10],
-    containerPadding: {
-      lg: [0, 0],
-      md: [0, 0],
-      sm: [0, 0],
-      xs: [0, 0],
-      xxs: [0, 0]
-    },
+    containerPadding: { lg: null, md: null, sm: null, xs: null, xxs: null },
     onBreakpointChange: noop,
     onLayoutChange: noop,
     onWidthChange: noop

package/lib/calculateUtils.js

@@ -18,6 +18,22 @@ export function calcGridColWidth(positionParams: PositionParams): number {
   );
 }
 
+// This can either be called:
+// calcGridItemWHPx(w, colWidth, margin[0])
+// or
+// calcGridItemWHPx(h, rowHeight, margin[1])
+export function calcGridItemWHPx(
+  gridUnits: number,
+  colOrRowSize: number,
+  marginPx: number
+) {
+  // 0 * Infinity === NaN, which causes problems with resize contraints
+  if (!Number.isFinite(gridUnits)) return gridUnits;
+  return Math.round(
+    colOrRowSize * gridUnits + Math.max(0, gridUnits - 1) * marginPx
+  );
+}
+
 /**
  * Return position on the page given an x, y, w, h.
  * left, top, width, height are all in pixels.
@@ -47,17 +63,8 @@ export function calcGridItemPosition(
   }
   // Otherwise, calculate from grid units.
   else {
-    // 0 * Infinity === NaN, which causes problems with resize constraints;
-    // Fix this if it occurs.
-    // Note we do it here rather than later because Math.round(Infinity) causes deopt
-    out.width =
-      w === Infinity
-        ? w
-        : Math.round(colWidth * w + Math.max(0, w - 1) * margin[0]);
-    out.height =
-      h === Infinity
-        ? h
-        : Math.round(rowHeight * h + Math.max(0, h - 1) * margin[1]);
+    out.width = calcGridItemWHPx(w, colWidth, margin[0]);
+    out.height = calcGridItemWHPx(h, rowHeight, margin[1]);
   }
 
   // If dragging, use the exact width and height as returned from dragging callbacks.
@@ -104,9 +111,8 @@ export function calcXY(
   let y = Math.round((top - margin[1]) / (rowHeight + margin[1]));
 
   // Capping
-  x = Math.max(Math.min(x, cols - w), 0);
-  y = Math.max(Math.min(y, maxRows - h), 0);
-
+  x = clamp(x, 0, cols - w);
+  y = clamp(y, 0, maxRows - h);
   return { x, y };
 }
 
@@ -136,7 +142,12 @@ export function calcWH(
   let h = Math.round((height + margin[1]) / (rowHeight + margin[1]));
 
   // Capping
-  w = Math.max(Math.min(w, cols - x), 0);
-  h = Math.max(Math.min(h, maxRows - y), 0);
+  w = clamp(w, 0, cols - x);
+  h = clamp(h, 0, maxRows - y);
   return { w, h };
 }
+
+// Similar to _.clamp
+export function clamp(num: number, lowerBound: number, upperBound: number) {
+  return Math.max(Math.min(num, upperBound), lowerBound);
+}