react-grid-layout 0.16.4 → 0.17.1

package/{build/ReactGridLayout.js.flow → lib/ReactGridLayout.jsx}

@@ -28,7 +28,9 @@ import type {
   CompactType,
   GridResizeEvent,
   GridDragEvent,
+  DragOverEvent,
   Layout,
+  DroppingPosition,
   LayoutItem
 } from "./utils";
 
@@ -38,7 +40,13 @@ type State = {
   mounted: boolean,
   oldDragItem: ?LayoutItem,
   oldLayout: ?Layout,
-  oldResizeItem: ?LayoutItem
+  oldResizeItem: ?LayoutItem,
+  droppingDOMNode: ?ReactElement<any>,
+  droppingPosition?: DroppingPosition,
+  // Mirrored props
+  children: ReactChildrenArray<ReactElement<any>>,
+  compactType?: CompactType,
+  propsLayout?: Layout
 };
 
 export type Props = {
@@ -50,7 +58,7 @@ export type Props = {
   draggableCancel: string,
   draggableHandle: string,
   verticalCompact: boolean,
-  compactType: ?("horizontal" | "vertical"),
+  compactType: CompactType,
   layout: Layout,
   margin: [number, number],
   containerPadding: [number, number] | null,
@@ -58,8 +66,11 @@ export type Props = {
   maxRows: number,
   isDraggable: boolean,
   isResizable: boolean,
+  isDroppable: boolean,
   preventCollision: boolean,
   useCSSTransforms: boolean,
+  transformScale: number,
+  droppingItem: $Shape<LayoutItem>,
 
   // Callbacks
   onLayoutChange: Layout => void,
@@ -69,10 +80,31 @@ export type Props = {
   onResize: EventCallback,
   onResizeStart: EventCallback,
   onResizeStop: EventCallback,
+  onDrop: (itemPosition: {
+    x: number,
+    y: number,
+    w: number,
+    h: number
+  }) => void,
   children: ReactChildrenArray<ReactElement<any>>
 };
 // End Types
 
+const compactType = (props: Props): CompactType => {
+  const { verticalCompact, compactType } = props || {};
+
+  return verticalCompact === false ? null : compactType;
+};
+
+const layoutClassName = "react-grid-layout";
+let isFirefox = false;
+// Try...catch will protect from navigator not existing (e.g. node) or a bad implementation of navigator
+try {
+  isFirefox = navigator.userAgent.toLowerCase().includes("firefox");
+} catch (e) {
+  /* Ignore */
+}
+
 /**
  * A reactive, fluid grid layout with draggable, resizable components.
  */
@@ -154,6 +186,10 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     preventCollision: PropTypes.bool,
     // Use CSS transforms instead of top/left
     useCSSTransforms: PropTypes.bool,
+    // parent layout transform scale
+    transformScale: PropTypes.number,
+    // If true, an external element can trigger onDrop callback with a specific grid position as a parameter
+    isDroppable: PropTypes.bool,
 
     //
     // Callbacks
@@ -175,11 +211,19 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     onResize: PropTypes.func,
     // Calls when resize is complete.
     onResizeStop: PropTypes.func,
+    // Calls when some element is dropped.
+    onDrop: PropTypes.func,
 
     //
     // Other validations
     //
 
+    droppingItem: PropTypes.shape({
+      i: PropTypes.string.isRequired,
+      w: PropTypes.number.isRequired,
+      h: PropTypes.number.isRequired
+    }),
+
     // Children must not have duplicate keys.
     children: function(props: Props, propName: string) {
       var children = props[propName];
@@ -213,17 +257,25 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     margin: [10, 10],
     isDraggable: true,
     isResizable: true,
+    isDroppable: false,
     useCSSTransforms: true,
+    transformScale: 1,
     verticalCompact: true,
     compactType: "vertical",
     preventCollision: false,
+    droppingItem: {
+      i: "__dropping-elem__",
+      h: 1,
+      w: 1
+    },
     onLayoutChange: noop,
     onDragStart: noop,
     onDrag: noop,
     onDragStop: noop,
     onResizeStart: noop,
     onResize: noop,
-    onResizeStop: noop
+    onResizeStop: noop,
+    onDrop: noop
   };
 
   state: State = {
@@ -233,14 +285,18 @@ export default class ReactGridLayout extends React.Component<Props, State> {
       this.props.children,
       this.props.cols,
       // Legacy support for verticalCompact: false
-      this.compactType()
+      compactType(this.props)
     ),
     mounted: false,
     oldDragItem: null,
     oldLayout: null,
-    oldResizeItem: null
+    oldResizeItem: null,
+    droppingDOMNode: null,
+    children: []
   };
 
+  dragEnterCounter = 0;
+
   constructor(props: Props, context: any): void {
     super(props, context);
     autoBindHandlers(this, [
@@ -260,20 +316,25 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     this.onLayoutMaybeChanged(this.state.layout, this.props.layout);
   }
 
-  componentWillReceiveProps(nextProps: Props) {
+  static getDerivedStateFromProps(nextProps: Props, prevState: State) {
     let newLayoutBase;
+
+    if (prevState.activeDrag) {
+      return null;
+    }
+
     // Legacy support for compactType
     // Allow parent to set layout directly.
     if (
-      !isEqual(nextProps.layout, this.props.layout) ||
-      nextProps.compactType !== this.props.compactType
+      !isEqual(nextProps.layout, prevState.propsLayout) ||
+      nextProps.compactType !== prevState.compactType
     ) {
       newLayoutBase = nextProps.layout;
-    } else if (!childrenEqual(this.props.children, nextProps.children)) {
+    } else if (!childrenEqual(nextProps.children, prevState.children)) {
       // If children change, also regenerate the layout. Use our state
       // as the base in case because it may be more up to date than
       // what is in props.
-      newLayoutBase = this.state.layout;
+      newLayoutBase = prevState.layout;
     }
 
     // We need to regenerate the layout.
@@ -282,10 +343,27 @@ export default class ReactGridLayout extends React.Component<Props, State> {
         newLayoutBase,
         nextProps.children,
         nextProps.cols,
-        this.compactType(nextProps)
+        compactType(nextProps)
       );
-      const oldLayout = this.state.layout;
-      this.setState({ layout: newLayout });
+
+      return {
+        layout: newLayout,
+        // We need to save these props to state for using
+        // getDerivedStateFromProps instead of componentDidMount (in which we would get extra rerender)
+        compactType: nextProps.compactType,
+        children: nextProps.children,
+        propsLayout: nextProps.layout
+      };
+    }
+
+    return null;
+  }
+
+  componentDidUpdate(prevProps: Props, prevState: State) {
+    if (!this.state.activeDrag) {
+      const newLayout = this.state.layout;
+      const oldLayout = prevState.layout;
+
       this.onLayoutMaybeChanged(newLayout, oldLayout);
     }
   }
@@ -308,11 +386,6 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     );
   }
 
-  compactType(props: ?Object): CompactType {
-    if (!props) props = this.props;
-    return props.verticalCompact === false ? null : props.compactType;
-  }
-
   /**
    * When dragging starts
    * @param {String} i Id of the child
@@ -368,14 +441,14 @@ export default class ReactGridLayout extends React.Component<Props, State> {
       y,
       isUserAction,
       this.props.preventCollision,
-      this.compactType(),
+      compactType(this.props),
       cols
     );
 
     this.props.onDrag(layout, oldDragItem, l, placeholder, e, node);
 
     this.setState({
-      layout: compact(layout, this.compactType(), cols),
+      layout: compact(layout, compactType(this.props), cols),
       activeDrag: placeholder
     });
   }
@@ -404,14 +477,15 @@ export default class ReactGridLayout extends React.Component<Props, State> {
       y,
       isUserAction,
       preventCollision,
-      this.compactType(),
+      compactType(this.props),
       cols
     );
-
-    this.props.onDragStop(layout, oldDragItem, l, null, e, node);
+    if (this.state.activeDrag) {
+      this.props.onDragStop(layout, oldDragItem, l, null, e, node);
+    }
 
     // Set state
-    const newLayout = compact(layout, this.compactType(), cols);
+    const newLayout = compact(layout, compactType(this.props), cols);
     const { oldLayout } = this.state;
     this.setState({
       activeDrag: null,
@@ -425,6 +499,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)) {
       this.props.onLayoutChange(newLayout);
     }
@@ -453,14 +528,17 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     // to find collisions faster
     let hasCollisions;
     if (preventCollision) {
-      const collisions = getAllCollisions(layout, { ...l, w, h }).filter((layoutItem) => layoutItem.i !== l.i);
+      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) => {
+        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);
         });
@@ -490,7 +568,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
 
     // Re-compact the layout and set the drag placeholder.
     this.setState({
-      layout: compact(layout, this.compactType(), cols),
+      layout: compact(layout, compactType(this.props), cols),
       activeDrag: placeholder
     });
   }
@@ -503,7 +581,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     this.props.onResizeStop(layout, oldResizeItem, l, null, e, node);
 
     // Set state
-    const newLayout = compact(layout, this.compactType(), cols);
+    const newLayout = compact(layout, compactType(this.props), cols);
     const { oldLayout } = this.state;
     this.setState({
       activeDrag: null,
@@ -529,7 +607,8 @@ export default class ReactGridLayout extends React.Component<Props, State> {
       containerPadding,
       rowHeight,
       maxRows,
-      useCSSTransforms
+      useCSSTransforms,
+      transformScale
     } = this.props;
 
     // {...this.state.activeDrag} is pretty slow, actually
@@ -550,6 +629,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
         isDraggable={false}
         isResizable={false}
         useCSSTransforms={useCSSTransforms}
+        transformScale={transformScale}
       >
         <div />
       </GridItem>
@@ -561,7 +641,10 @@ export default class ReactGridLayout extends React.Component<Props, State> {
    * @param  {Element} child React element.
    * @return {Element}       Element wrapped in draggable and properly placed.
    */
-  processGridItem(child: ReactElement<any>): ?ReactElement<any> {
+  processGridItem(
+    child: ReactElement<any>,
+    isDroppingItem?: boolean
+  ): ?ReactElement<any> {
     if (!child || !child.key) return;
     const l = getLayoutItem(this.state.layout, String(child.key));
     if (!l) return null;
@@ -575,10 +658,11 @@ export default class ReactGridLayout extends React.Component<Props, State> {
       isDraggable,
       isResizable,
       useCSSTransforms,
+      transformScale,
       draggableCancel,
       draggableHandle
     } = this.props;
-    const { mounted } = this.state;
+    const { mounted, droppingPosition } = this.state;
 
     // Parse 'static'. Any properties defined directly on the grid item will take precedence.
     const draggable = Boolean(
@@ -608,6 +692,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
         isResizable={resizable}
         useCSSTransforms={useCSSTransforms && mounted}
         usePercentages={!mounted}
+        transformScale={transformScale}
         w={l.w}
         h={l.h}
         x={l.x}
@@ -618,26 +703,126 @@ export default class ReactGridLayout extends React.Component<Props, State> {
         maxH={l.maxH}
         maxW={l.maxW}
         static={l.static}
+        droppingPosition={isDroppingItem ? droppingPosition : undefined}
       >
         {child}
       </GridItem>
     );
   }
 
+  onDragOver = (e: DragOverEvent) => {
+    // we should ignore events from layout's children in Firefox
+    // to avoid unpredictable jumping of a dropping placeholder
+    if (
+      isFirefox &&
+      !e.nativeEvent.target.className.includes(layoutClassName)
+    ) {
+      return false;
+    }
+
+    const { droppingItem } = this.props;
+    const { layout } = this.state;
+    const { layerX, layerY } = e.nativeEvent;
+    const droppingPosition = { x: layerX, y: layerY, e };
+
+    if (!this.state.droppingDOMNode) {
+      this.setState({
+        droppingDOMNode: <div key={droppingItem.i} />,
+        droppingPosition,
+        layout: [
+          ...layout,
+          {
+            ...droppingItem,
+            x: 0,
+            y: 0,
+            static: false,
+            isDraggable: true
+          }
+        ]
+      });
+    } else if (this.state.droppingPosition) {
+      const shouldUpdatePosition =
+        this.state.droppingPosition.x != layerX ||
+        this.state.droppingPosition.y != layerY;
+      shouldUpdatePosition && this.setState({ droppingPosition });
+    }
+
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  removeDroppingPlaceholder = () => {
+    const { droppingItem, cols } = this.props;
+    const { layout } = this.state;
+
+    const newLayout = compact(
+      layout.filter(l => l.i !== droppingItem.i),
+      compactType(this.props),
+      cols
+    );
+
+    this.setState({
+      layout: newLayout,
+      droppingDOMNode: null,
+      activeDrag: null,
+      droppingPosition: undefined
+    });
+  };
+
+  onDragLeave = () => {
+    this.dragEnterCounter--;
+
+    // onDragLeave can be triggered on each layout's child.
+    // But we know that count of dragEnter and dragLeave events
+    // will be balanced after leaving the layout's container
+    // so we can increase and decrease count of dragEnter and
+    // when it'll be equal to 0 we'll remove the placeholder
+    if (this.dragEnterCounter === 0) {
+      this.removeDroppingPlaceholder();
+    }
+  };
+
+  onDragEnter = () => {
+    this.dragEnterCounter++;
+  };
+
+  onDrop = () => {
+    const { droppingItem } = this.props;
+    const { layout } = this.state;
+    const { x, y, w, h } = layout.find(l => l.i === droppingItem.i) || {};
+
+    // reset gragEnter counter on drop
+    this.dragEnterCounter = 0;
+
+    this.removeDroppingPlaceholder();
+
+    this.props.onDrop({ x, y, w, h });
+  };
+
   render() {
-    const { className, style } = this.props;
+    const { className, style, isDroppable } = this.props;
 
-    const mergedClassName = classNames("react-grid-layout", className);
+    const mergedClassName = classNames(layoutClassName, className);
     const mergedStyle = {
       height: this.containerHeight(),
       ...style
     };
 
     return (
-      <div className={mergedClassName} style={mergedStyle}>
+      <div
+        className={mergedClassName}
+        style={mergedStyle}
+        onDrop={isDroppable ? this.onDrop : noop}
+        onDragLeave={isDroppable ? this.onDragLeave : noop}
+        onDragEnter={isDroppable ? this.onDragEnter : noop}
+        onDragOver={isDroppable ? this.onDragOver : noop}
+      >
         {React.Children.map(this.props.children, child =>
           this.processGridItem(child)
         )}
+        {isDroppable &&
+          this.state.droppingDOMNode &&
+          this.processGridItem(this.state.droppingDOMNode, true)}
         {this.placeholder()}
       </div>
     );

package/{build/ResponsiveReactGridLayout.js.flow → lib/ResponsiveReactGridLayout.jsx}

@@ -20,10 +20,26 @@ import type { Layout } from "./utils";
 
 const type = obj => Object.prototype.toString.call(obj);
 
+/**
+ * Get a value of margin or containerPadding.
+ *
+ * @param  {Array | Object} param Margin | containerPadding, e.g. [10, 10] | {lg: [10, 10], ...}.
+ * @param  {String} breakpoint   Breakpoint: lg, md, sm, xs and etc.
+ * @return {Array}
+ */
+
+function getIndentationValue(
+  param: { [key: string]: [number, number] } | [number, number],
+  breakpoint: string
+) {
+  return Array.isArray(param) ? param : param[breakpoint];
+}
+
 type State = {
   layout: Layout,
   breakpoint: string,
-  cols: number
+  cols: number,
+  layouts?: { [key: string]: Layout }
 };
 
 type Props<Breakpoint: string = string> = {
@@ -35,6 +51,8 @@ type Props<Breakpoint: string = string> = {
   cols: { [key: Breakpoint]: number },
   layouts: { [key: Breakpoint]: Layout },
   width: number,
+  margin: { [key: Breakpoint]: [number, number] } | [number, number],
+  containerPadding: { [key: Breakpoint]: [number, number] } | [number, number],
 
   // Callbacks
   onBreakpointChange: (Breakpoint, cols: number) => void,
@@ -68,6 +86,18 @@ export default class ResponsiveReactGridLayout extends React.Component<
     // # of cols. This is a breakpoint -> cols map
     cols: PropTypes.object,
 
+    // # of margin. This is a breakpoint -> margin map
+    // e.g. { lg: [5, 5], md: [10, 10], sm: [15, 15] }
+    // Margin between items [x, y] in px
+    // e.g. [10, 10]
+    margin: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+
+    // # of containerPadding. This is a breakpoint -> containerPadding map
+    // e.g. { lg: [5, 5], md: [10, 10], sm: [15, 15] }
+    // Padding inside the container [x, y] in px
+    // e.g. [10, 10]
+    containerPadding: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+
     // layouts is an object mapping breakpoints to layouts.
     // e.g. {lg: Layout, md: Layout, ...}
     layouts(props: Props<>, propName: string) {
@@ -110,6 +140,8 @@ export default class ResponsiveReactGridLayout extends React.Component<
     breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 },
     cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
     layouts: {},
+    margin: [10, 10],
+    containerPadding: { lg: null, md: null, sm: null, xs: null, xxs: null },
     onBreakpointChange: noop,
     onLayoutChange: noop,
     onWidthChange: noop
@@ -142,18 +174,10 @@ export default class ResponsiveReactGridLayout extends React.Component<
     };
   }
 
-  componentWillReceiveProps(nextProps: Props<*>) {
-    // Allow parent to set width or breakpoint directly.
-    if (
-      nextProps.width != this.props.width ||
-      nextProps.breakpoint !== this.props.breakpoint ||
-      !isEqual(nextProps.breakpoints, this.props.breakpoints) ||
-      !isEqual(nextProps.cols, this.props.cols)
-    ) {
-      this.onWidthChange(nextProps);
-    } else if (!isEqual(nextProps.layouts, this.props.layouts)) {
+  static getDerivedStateFromProps(nextProps: Props<*>, prevState: State) {
+    if (!isEqual(nextProps.layouts, prevState.layouts)) {
       // Allow parent to set layouts directly.
-      const { breakpoint, cols } = this.state;
+      const { breakpoint, cols } = prevState;
 
       // Since we're setting an entirely new layout object, we must generate a new responsive layout
       // if one does not exist.
@@ -165,7 +189,21 @@ export default class ResponsiveReactGridLayout extends React.Component<
         cols,
         nextProps.compactType
       );
-      this.setState({ layout: newLayout });
+      return { layout: newLayout, layouts: nextProps.layouts };
+    }
+
+    return null;
+  }
+
+  componentDidUpdate(prevProps: Props<*>) {
+    // Allow parent to set width or breakpoint directly.
+    if (
+      this.props.width != prevProps.width ||
+      this.props.breakpoint !== prevProps.breakpoint ||
+      !isEqual(this.props.breakpoints, prevProps.breakpoints) ||
+      !isEqual(this.props.cols, prevProps.cols)
+    ) {
+      this.onWidthChange(this.props);
     }
   }
 
@@ -188,6 +226,7 @@ export default class ResponsiveReactGridLayout extends React.Component<
       getBreakpointFromWidth(nextProps.breakpoints, nextProps.width);
 
     const lastBreakpoint = this.state.breakpoint;
+    const newCols: number = getColsFromBreakpoint(newBreakpoint, cols);
 
     // Breakpoint change
     if (
@@ -200,7 +239,6 @@ export default class ResponsiveReactGridLayout extends React.Component<
         layouts[lastBreakpoint] = cloneLayout(this.state.layout);
 
       // Find or generate a new layout.
-      const newCols: number = getColsFromBreakpoint(newBreakpoint, cols);
       let layout = findOrGenerateResponsiveLayout(
         layouts,
         breakpoints,
@@ -224,12 +262,6 @@ export default class ResponsiveReactGridLayout extends React.Component<
       // callbacks
       this.props.onLayoutChange(layout, layouts);
       this.props.onBreakpointChange(newBreakpoint, newCols);
-      this.props.onWidthChange(
-        nextProps.width,
-        nextProps.margin,
-        newCols,
-        nextProps.containerPadding
-      );
 
       this.setState({
         breakpoint: newBreakpoint,
@@ -237,6 +269,20 @@ export default class ResponsiveReactGridLayout extends React.Component<
         cols: newCols
       });
     }
+
+    const margin = getIndentationValue(nextProps.margin, newBreakpoint);
+    const containerPadding = getIndentationValue(
+      nextProps.containerPadding,
+      newBreakpoint
+    );
+
+    //call onWidthChange on every change of width, not only on breakpoint changes
+    this.props.onWidthChange(
+      nextProps.width,
+      margin,
+      newCols,
+      containerPadding
+    );
   }
 
   render() {
@@ -246,6 +292,8 @@ export default class ResponsiveReactGridLayout extends React.Component<
       breakpoints,
       cols,
       layouts,
+      margin,
+      containerPadding,
       onBreakpointChange,
       onLayoutChange,
       onWidthChange,
@@ -256,6 +304,11 @@ export default class ResponsiveReactGridLayout extends React.Component<
     return (
       <ReactGridLayout
         {...other}
+        margin={getIndentationValue(margin, this.state.breakpoint)}
+        containerPadding={getIndentationValue(
+          containerPadding,
+          this.state.breakpoint
+        )}
         onLayoutChange={this.onLayoutChange}
         layout={this.state.layout}
         cols={this.state.cols}

package/{build/components/WidthProvider.js.flow → lib/components/WidthProvider.jsx}

@@ -57,7 +57,7 @@ export default function WidthProvider<
 
     onWindowResize = () => {
       if (!this.mounted) return;
-      // eslint-disable-next-line
+      // eslint-disable-next-line react/no-find-dom-node
       const node = ReactDOM.findDOMNode(this); // Flow casts this to Text | Element
       if (node instanceof HTMLElement)
         this.setState({ width: node.offsetWidth });