react-grid-layout 1.2.2 → 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,13 +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
+|};
 
-type ResizeHandleAxis = "s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne";
-export type ResizeHandles = Array<ResizeHandleAxis>;
+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,13 +45,13 @@ export type ResizeHandle =
 // 'nw' - Northwest handle (top-left)
 // 'se' - Southeast handle (bottom-right)
 // 'ne' - Northeast handle (top-right)
-export const resizeHandlesType: 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,
@@ -55,8 +76,9 @@ export type Props = {|
   useCSSTransforms: boolean,
   transformScale: number,
   droppingItem: $Shape<LayoutItem>,
-  resizeHandles: ResizeHandles,
+  resizeHandles: ResizeHandleAxis[],
   resizeHandle?: ResizeHandle,
+  allowOverlap: boolean,
 
   // Callbacks
   onLayoutChange: Layout => void,
@@ -66,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">
@@ -154,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
@@ -164,7 +189,7 @@ export default {
   isDroppable: PropTypes.bool,
 
   // Resize handle options
-  resizeHandles: resizeHandlesType,
+  resizeHandles: resizeHandleAxesType,
   resizeHandle: resizeHandleType,
 
   //
@@ -202,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/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}
+        />
+      );
     }
   };
 }