react-grid-layout 1.2.5 → 1.3.0

package/lib/ReactGridLayout.jsx

@@ -4,7 +4,6 @@ import * as React from "react";
 import isEqual from "lodash.isequal";
 import classNames from "classnames";
 import {
-  autoBindHandlers,
   bottom,
   childrenEqual,
   cloneLayoutItem,
@@ -95,6 +94,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     isBounded: false,
     isDraggable: true,
     isResizable: true,
+    allowOverlap: false,
     isDroppable: false,
     useCSSTransforms: true,
     transformScale: 1,
@@ -114,7 +114,8 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     onResizeStart: noop,
     onResize: noop,
     onResizeStop: noop,
-    onDrop: noop
+    onDrop: noop,
+    onDropDragOver: noop
   };
 
   state: State = {
@@ -124,7 +125,8 @@ export default class ReactGridLayout extends React.Component<Props, State> {
       this.props.children,
       this.props.cols,
       // Legacy support for verticalCompact: false
-      compactType(this.props)
+      compactType(this.props),
+      this.props.allowOverlap
     ),
     mounted: false,
     oldDragItem: null,
@@ -136,18 +138,6 @@ export default class ReactGridLayout extends React.Component<Props, State> {
 
   dragEnterCounter: number = 0;
 
-  constructor(props: Props, context: any): void {
-    super(props, context);
-    autoBindHandlers(this, [
-      "onDragStart",
-      "onDrag",
-      "onDragStop",
-      "onResizeStart",
-      "onResize",
-      "onResizeStop"
-    ]);
-  }
-
   componentDidMount() {
     this.setState({ mounted: true });
     // Possibly call back with layout on mount. This should be done after correcting the layout width
@@ -185,7 +175,8 @@ export default class ReactGridLayout extends React.Component<Props, State> {
         newLayoutBase,
         nextProps.children,
         nextProps.cols,
-        compactType(nextProps)
+        compactType(nextProps),
+        nextProps.allowOverlap
       );
 
       return {
@@ -249,12 +240,12 @@ export default class ReactGridLayout extends React.Component<Props, State> {
    * @param {Event} e The mousedown event
    * @param {Element} node The current dragging DOM element
    */
-  onDragStart(
+  onDragStart: (i: string, x: number, y: number, GridDragEvent) => void = (
     i: string,
     x: number,
     y: number,
     { e, node }: GridDragEvent
-  ): void {
+  ) => {
     const { layout } = this.state;
     const l = getLayoutItem(layout, i);
     if (!l) return;
@@ -265,7 +256,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     });
 
     return this.props.onDragStart(layout, l, l, null, e, node);
-  }
+  };
 
   /**
    * Each drag movement create a new dragelement and move the element to the dragged location
@@ -275,10 +266,15 @@ export default class ReactGridLayout extends React.Component<Props, State> {
    * @param {Event} e The mousedown event
    * @param {Element} node The current dragging DOM element
    */
-  onDrag(i: string, x: number, y: number, { e, node }: GridDragEvent): void {
+  onDrag: (i: string, x: number, y: number, GridDragEvent) => void = (
+    i,
+    x,
+    y,
+    { e, node }
+  ) => {
     const { oldDragItem } = this.state;
     let { layout } = this.state;
-    const { cols } = this.props;
+    const { cols, allowOverlap } = this.props;
     const l = getLayoutItem(layout, i);
     if (!l) return;
 
@@ -302,16 +298,19 @@ export default class ReactGridLayout extends React.Component<Props, State> {
       isUserAction,
       this.props.preventCollision,
       compactType(this.props),
-      cols
+      cols,
+      allowOverlap
     );
 
     this.props.onDrag(layout, oldDragItem, l, placeholder, e, node);
 
     this.setState({
-      layout: compact(layout, compactType(this.props), cols),
+      layout: allowOverlap
+        ? layout
+        : compact(layout, compactType(this.props), cols),
       activeDrag: placeholder
     });
-  }
+  };
 
   /**
    * When dragging stops, figure out which position the element is closest to and update its x and y.
@@ -321,17 +320,17 @@ export default class ReactGridLayout extends React.Component<Props, State> {
    * @param {Event} e The mousedown event
    * @param {Element} node The current dragging DOM element
    */
-  onDragStop(
-    i: string,
-    x: number,
-    y: number,
-    { e, node }: GridDragEvent
-  ): void {
+  onDragStop: (i: string, x: number, y: number, GridDragEvent) => void = (
+    i,
+    x,
+    y,
+    { e, node }
+  ) => {
     if (!this.state.activeDrag) return;
 
     const { oldDragItem } = this.state;
     let { layout } = this.state;
-    const { cols, preventCollision } = this.props;
+    const { cols, preventCollision, allowOverlap } = this.props;
     const l = getLayoutItem(layout, i);
     if (!l) return;
 
@@ -345,13 +344,16 @@ export default class ReactGridLayout extends React.Component<Props, State> {
       isUserAction,
       preventCollision,
       compactType(this.props),
-      cols
+      cols,
+      allowOverlap
     );
 
     this.props.onDragStop(layout, oldDragItem, l, null, e, node);
 
     // Set state
-    const newLayout = compact(layout, compactType(this.props), cols);
+    const newLayout = allowOverlap
+      ? layout
+      : compact(layout, compactType(this.props), cols);
     const { oldLayout } = this.state;
     this.setState({
       activeDrag: null,
@@ -361,7 +363,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     });
 
     this.onLayoutMaybeChanged(newLayout, oldLayout);
-  }
+  };
 
   onLayoutMaybeChanged(newLayout: Layout, oldLayout: ?Layout) {
     if (!oldLayout) oldLayout = this.state.layout;
@@ -371,7 +373,12 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     }
   }
 
-  onResizeStart(i: string, w: number, h: number, { e, node }: GridResizeEvent) {
+  onResizeStart: (i: string, w: number, h: number, GridResizeEvent) => void = (
+    i,
+    w,
+    h,
+    { e, node }
+  ) => {
     const { layout } = this.state;
     const l = getLayoutItem(layout, i);
     if (!l) return;
@@ -382,17 +389,22 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     });
 
     this.props.onResizeStart(layout, l, l, null, e, node);
-  }
+  };
 
-  onResize(i: string, w: number, h: number, { e, node }: GridResizeEvent) {
+  onResize: (i: string, w: number, h: number, GridResizeEvent) => void = (
+    i,
+    w,
+    h,
+    { e, node }
+  ) => {
     const { layout, oldResizeItem } = this.state;
-    const { cols, preventCollision } = this.props;
+    const { cols, preventCollision, allowOverlap } = this.props;
 
     const [newLayout, l] = withLayoutItem(layout, i, l => {
       // Something like quad tree should be used
       // to find collisions faster
       let hasCollisions;
-      if (preventCollision) {
+      if (preventCollision && !allowOverlap) {
         const collisions = getAllCollisions(layout, { ...l, w, h }).filter(
           layoutItem => layoutItem.i !== l.i
         );
@@ -439,20 +451,29 @@ export default class ReactGridLayout extends React.Component<Props, State> {
 
     // Re-compact the newLayout and set the drag placeholder.
     this.setState({
-      layout: compact(newLayout, compactType(this.props), cols),
+      layout: allowOverlap
+        ? newLayout
+        : compact(newLayout, compactType(this.props), cols),
       activeDrag: placeholder
     });
-  }
+  };
 
-  onResizeStop(i: string, w: number, h: number, { e, node }: GridResizeEvent) {
+  onResizeStop: (i: string, w: number, h: number, GridResizeEvent) => void = (
+    i,
+    w,
+    h,
+    { e, node }
+  ) => {
     const { layout, oldResizeItem } = this.state;
-    const { cols } = this.props;
+    const { cols, allowOverlap } = this.props;
     const l = getLayoutItem(layout, i);
 
     this.props.onResizeStop(layout, oldResizeItem, l, null, e, node);
 
     // Set state
-    const newLayout = compact(layout, compactType(this.props), cols);
+    const newLayout = allowOverlap
+      ? layout
+      : compact(layout, compactType(this.props), cols);
     const { oldLayout } = this.state;
     this.setState({
       activeDrag: null,
@@ -462,7 +483,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     });
 
     this.onLayoutMaybeChanged(newLayout, oldLayout);
-  }
+  };
 
   /**
    * Create a placeholder object.
@@ -599,6 +620,9 @@ export default class ReactGridLayout extends React.Component<Props, State> {
   // Called while dragging an element. Part of browser native drag/drop API.
   // Native event target might be the layout itself, or an element within the layout.
   onDragOver: DragOverEvent => void | false = e => {
+    e.preventDefault(); // Prevent any browser native action
+    e.stopPropagation();
+
     // we should ignore events from layout's children in Firefox
     // to avoid unpredictable jumping of a dropping placeholder
     // FIXME remove this hack
@@ -607,24 +631,35 @@ export default class ReactGridLayout extends React.Component<Props, State> {
       // $FlowIgnore can't figure this out
       !e.nativeEvent.target?.classList.contains(layoutClassName)
     ) {
-      // without this Firefox will not allow drop if currently over droppingItem
-      e.preventDefault();
       return false;
     }
 
     const {
       droppingItem,
+      onDropDragOver,
       margin,
       cols,
       rowHeight,
       maxRows,
       width,
-      containerPadding
+      containerPadding,
+      transformScale
     } = this.props;
+    // Allow user to customize the dropping item or short-circuit the drop based on the results
+    // of the `onDragOver(e: Event)` callback.
+    const onDragOverResult = onDropDragOver?.(e);
+    if (onDragOverResult === false) {
+      if (this.state.droppingDOMNode) {
+        this.removeDroppingPlaceholder();
+      }
+      return false;
+    }
+    const finalDroppingItem = { ...droppingItem, ...onDragOverResult };
+
     const { layout } = this.state;
     // This is relative to the DOM element that this event fired for.
     const { layerX, layerY } = e.nativeEvent;
-    const droppingPosition = { left: layerX, top: layerY, e };
+    const droppingPosition = { left: layerX / transformScale, top: layerY / transformScale, e };
 
     if (!this.state.droppingDOMNode) {
       const positionParams: PositionParams = {
@@ -640,17 +675,17 @@ export default class ReactGridLayout extends React.Component<Props, State> {
         positionParams,
         layerY,
         layerX,
-        droppingItem.w,
-        droppingItem.h
+        finalDroppingItem.w,
+        finalDroppingItem.h
       );
 
       this.setState({
-        droppingDOMNode: <div key={droppingItem.i} />,
+        droppingDOMNode: <div key={finalDroppingItem.i} />,
         droppingPosition,
         layout: [
           ...layout,
           {
-            ...droppingItem,
+            ...finalDroppingItem,
             x: calculatedPosition.x,
             y: calculatedPosition.y,
             static: false,
@@ -665,9 +700,6 @@ export default class ReactGridLayout extends React.Component<Props, State> {
         this.setState({ droppingPosition });
       }
     }
-
-    e.stopPropagation();
-    e.preventDefault();
   };
 
   removeDroppingPlaceholder: () => void = () => {
@@ -688,7 +720,8 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     });
   };
 
-  onDragLeave: () => void = () => {
+  onDragLeave: EventHandler = e => {
+    e.preventDefault(); // Prevent any browser native action
     this.dragEnterCounter--;
 
     // onDragLeave can be triggered on each layout's child.
@@ -701,11 +734,13 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     }
   };
 
-  onDragEnter: () => void = () => {
+  onDragEnter: EventHandler = e => {
+    e.preventDefault(); // Prevent any browser native action
     this.dragEnterCounter++;
   };
 
   onDrop: EventHandler = (e: Event) => {
+    e.preventDefault(); // Prevent any browser native action
     const { droppingItem } = this.props;
     const { layout } = this.state;
     const item = layout.find(l => l.i === droppingItem.i);

package/lib/ReactGridLayoutPropTypes.js

@@ -6,18 +6,34 @@ import type {
   ChildrenArray as ReactChildrenArray,
   Element as ReactElement
 } from "react";
-import type { EventCallback, CompactType, Layout, LayoutItem } from "./utils";
+import type {
+  DragOverEvent,
+  EventCallback,
+  CompactType,
+  Layout,
+  LayoutItem
+} from "./utils";
 
 // util
 export type ReactRef<T: HTMLElement> = {|
   +current: T | null
 |};
 
-export type ResizeHandleAxis = "s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne";
+export type ResizeHandleAxis =
+  | "s"
+  | "w"
+  | "e"
+  | "n"
+  | "sw"
+  | "nw"
+  | "se"
+  | "ne";
 export type ResizeHandle =
   | ReactElement<any>
-  | ((resizeHandleAxis: ResizeHandleAxis, ref: ReactRef<HTMLElement>) => ReactElement<any>);
-
+  | ((
+      resizeHandleAxis: ResizeHandleAxis,
+      ref: ReactRef<HTMLElement>
+    ) => ReactElement<any>);
 
 // Defines which resize handles should be rendered (default: 'se')
 // Allows for any combination of:
@@ -29,13 +45,13 @@ export type ResizeHandle =
 // 'nw' - Northwest handle (top-left)
 // 'se' - Southeast handle (bottom-right)
 // 'ne' - Northeast handle (top-right)
-export const resizeHandleAxesType: ReactPropsChainableTypeChecker = PropTypes.arrayOf(
-  PropTypes.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"])
-);
+export const resizeHandleAxesType: ReactPropsChainableTypeChecker =
+  PropTypes.arrayOf(
+    PropTypes.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"])
+  );
 // Custom component for resize handles
-export const resizeHandleType: ReactPropsChainableTypeChecker = PropTypes.oneOfType(
-  [PropTypes.node, PropTypes.func]
-);
+export const resizeHandleType: ReactPropsChainableTypeChecker =
+  PropTypes.oneOfType([PropTypes.node, PropTypes.func]);
 
 export type Props = {|
   className: string,
@@ -62,6 +78,7 @@ export type Props = {|
   droppingItem: $Shape<LayoutItem>,
   resizeHandles: ResizeHandleAxis[],
   resizeHandle?: ResizeHandle,
+  allowOverlap: boolean,
 
   // Callbacks
   onLayoutChange: Layout => void,
@@ -71,6 +88,7 @@ export type Props = {|
   onResize: EventCallback,
   onResizeStart: EventCallback,
   onResizeStop: EventCallback,
+  onDropDragOver: (e: DragOverEvent) => ?({| w?: number, h?: number |} | false),
   onDrop: (layout: Layout, item: ?LayoutItem, e: Event) => void,
   children: ReactChildrenArray<ReactElement<any>>,
   innerRef?: Ref<"div">
@@ -159,6 +177,8 @@ export default {
   isBounded: PropTypes.bool,
   isDraggable: PropTypes.bool,
   isResizable: PropTypes.bool,
+  // If true, grid can be placed one over the other.
+  allowOverlap: PropTypes.bool,
   // If true, grid items won't change position when being dragged over.
   preventCollision: PropTypes.bool,
   // Use CSS transforms instead of top/left
@@ -207,11 +227,12 @@ export default {
 
   // Children must not have duplicate keys.
   children: function (props: Props, propName: string) {
-    var children = props[propName];
+    const children = props[propName];
 
     // Check children keys for duplicates. Throw if found.
-    var keys = {};
+    const keys = {};
     React.Children.forEach(children, function (child) {
+      if (child?.key == null) return;
       if (keys[child.key]) {
         throw new Error(
           'Duplicate child key "' +

package/lib/ResponsiveReactGridLayout.jsx

@@ -21,6 +21,7 @@ import {
 } from "./responsiveUtils";
 import ReactGridLayout from "./ReactGridLayout";
 
+// $FlowFixMe[method-unbinding]
 const type = obj => Object.prototype.toString.call(obj);
 
 /**
@@ -74,6 +75,7 @@ type Props<Breakpoint: string = string> = {|
 type DefaultProps = Pick<
   Props<>,
   {|
+    allowOverlap: 0,
     breakpoints: 0,
     cols: 0,
     containerPadding: 0,
@@ -103,6 +105,8 @@ export default class ResponsiveReactGridLayout extends React.Component<
     // {name: pxVal}, e.g. {lg: 1200, md: 996, sm: 768, xs: 480}
     breakpoints: PropTypes.object,
 
+    allowOverlap: PropTypes.bool,
+
     // # of cols. This is a breakpoint -> cols map
     cols: PropTypes.object,
 
@@ -162,6 +166,7 @@ export default class ResponsiveReactGridLayout extends React.Component<
     containerPadding: { lg: null, md: null, sm: null, xs: null, xxs: null },
     layouts: {},
     margin: [10, 10],
+    allowOverlap: false,
     onBreakpointChange: noop,
     onLayoutChange: noop,
     onWidthChange: noop
@@ -277,7 +282,8 @@ export default class ResponsiveReactGridLayout extends React.Component<
         layout,
         this.props.children,
         newCols,
-        compactType
+        compactType,
+        this.props.allowOverlap
       );
 
       // Store the new layout.

package/lib/utils.js

@@ -159,8 +159,8 @@ export function cloneLayoutItem(layoutItem: LayoutItem): LayoutItem {
  */
 export function childrenEqual(a: ReactChildren, b: ReactChildren): boolean {
   return isEqual(
-    React.Children.map(a, c => c.key),
-    React.Children.map(b, c => c.key)
+    React.Children.map(a, c => c?.key),
+    React.Children.map(b, c => c?.key)
   );
 }
 
@@ -328,11 +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;
 }
 
@@ -434,7 +434,8 @@ export function moveElement(
   isUserAction: ?boolean,
   preventCollision: ?boolean,
   compactType: CompactType,
-  cols: number
+  cols: number,
+  allowOverlap: ?boolean
 ): Layout {
   // If this is static and not explicitly enabled as draggable,
   // no move is possible, so we can short-circuit this immediately.
@@ -471,10 +472,12 @@ export function moveElement(
 
   // There was a collision; abort
   if (preventCollision && collisions.length) {
-    log(`Collision prevented on ${l.i}, reverting.`);
-    l.x = oldX;
-    l.y = oldY;
-    l.moved = false;
+    if (!allowOverlap) {
+      log(`Collision prevented on ${l.i}, reverting.`);
+      l.x = oldX;
+      l.y = oldY;
+      l.moved = false;
+    }
     return layout;
   }
 
@@ -626,7 +629,8 @@ export function sortLayoutItems(
   compactType: CompactType
 ): Layout {
   if (compactType === "horizontal") return sortLayoutItemsByColRow(layout);
-  else return sortLayoutItemsByRowCol(layout);
+  if (compactType === "vertical") return sortLayoutItemsByRowCol(layout);
+  else return layout;
 }
 
 /**
@@ -676,17 +680,21 @@ export function synchronizeLayoutWithChildren(
   initialLayout: Layout,
   children: ReactChildren,
   cols: number,
-  compactType: CompactType
+  compactType: CompactType,
+  allowOverlap: ?boolean
 ): Layout {
   initialLayout = initialLayout || [];
 
   // Generate one layout item per child.
   const layout: LayoutItem[] = [];
-  React.Children.forEach(children, (child: ReactElement<any>, i: number) => {
+  React.Children.forEach(children, (child: ReactElement<any>) => {
+    // Child may not exist
+    if (child?.key == null) return;
+
     // Don't overwrite if it already exists.
     const exists = getLayoutItem(initialLayout, String(child.key));
     if (exists) {
-      layout[i] = cloneLayoutItem(exists);
+      layout.push(cloneLayoutItem(exists));
     } else {
       if (!isProduction && child.props._grid) {
         console.warn(
@@ -702,24 +710,26 @@ export function synchronizeLayoutWithChildren(
           validateLayout([g], "ReactGridLayout.children");
         }
         // FIXME clone not really necessary here
-        layout[i] = cloneLayoutItem({ ...g, i: child.key });
+        layout.push(cloneLayoutItem({ ...g, i: child.key }));
       } else {
         // Nothing provided: ensure this is added to the bottom
         // FIXME clone not really necessary here
-        layout[i] = cloneLayoutItem({
+        layout.push(cloneLayoutItem({
           w: 1,
           h: 1,
           x: 0,
           y: bottom(layout),
           i: String(child.key)
-        });
+        }));
       }
     }
   });
 
   // Correct the layout.
   const correctedLayout = correctBounds(layout, { cols: cols });
-  return compact(correctedLayout, compactType, cols);
+  return allowOverlap
+    ? correctedLayout
+    : compact(correctedLayout, compactType, cols);
 }
 
 /**
@@ -776,11 +786,6 @@ export function compactType(
   return verticalCompact === false ? null : compactType;
 }
 
-// Flow can't really figure this out, so we just use Object
-export function autoBindHandlers(el: Object, fns: Array<string>): void {
-  fns.forEach(key => (el[key] = el[key].bind(el)));
-}
-
 function log(...args) {
   if (!DEBUG) return;
   // eslint-disable-next-line no-console