react-grid-layout 0.16.4 → 0.17.1

package/css/styles.css

@@ -20,6 +20,10 @@
   will-change: transform;
 }
 
+.react-grid-item.dropping {
+  visibility: hidden;
+}
+
 .react-grid-item.react-grid-placeholder {
   background: red;
   opacity: 0.2;

package/index.js

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

package/index.js.flow

@@ -1,10 +1,8 @@
 // @flow
 
-import * as utils from './build/utils';
-export { default } from './build/ReactGridLayout';
-export { default as Responsive } from './build/ResponsiveReactGridLayout';
-export { default as WidthProvider } from './build/components/WidthProvider';
+import * as utils from "./lib/utils";
+export { default } from "./lib/ReactGridLayout";
+export { default as Responsive } from "./lib/ResponsiveReactGridLayout";
+export { default as WidthProvider } from "./lib/components/WidthProvider";
 
-export {
-  utils
-};
+export { utils };

package/interfaces/classnames.js

@@ -1,3 +1,4 @@
+// @flow
 // flow-typed signature: 3fba12a77525f37b0492c8dab3e04f0e
 // flow-typed version: 94e9f7e0a4/classnames_v2.x.x/flow_>=v0.28.x
 

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

@@ -1,5 +1,6 @@
 // @flow
 import React from "react";
+import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 import { DraggableCore } from "react-draggable";
 import { Resizable } from "react-resizable";
@@ -11,6 +12,7 @@ import type {
   ReactDraggableCallbackData,
   GridDragEvent,
   GridResizeEvent,
+  DroppingPosition,
   Position
 } from "./utils";
 
@@ -41,6 +43,8 @@ type Props = {
   static?: boolean,
   useCSSTransforms?: boolean,
   usePercentages?: boolean,
+  transformScale: number,
+  droppingPosition?: DroppingPosition,
 
   className: string,
   style?: Object,
@@ -136,13 +140,20 @@ export default class GridItem extends React.Component<Props, State> {
 
     // Use CSS transforms instead of top/left
     useCSSTransforms: PropTypes.bool.isRequired,
+    transformScale: PropTypes.number,
 
     // Others
     className: PropTypes.string,
     // Selector for draggable handle
     handle: PropTypes.string,
     // Selector for draggable cancel (see react-draggable)
-    cancel: PropTypes.string
+    cancel: PropTypes.string,
+    // Current position of a dropping element
+    droppingPosition: PropTypes.shape({
+      e: PropTypes.object.isRequired,
+      x: PropTypes.number.isRequired,
+      y: PropTypes.number.isRequired
+    })
   };
 
   static defaultProps = {
@@ -152,7 +163,8 @@ export default class GridItem extends React.Component<Props, State> {
     minH: 1,
     minW: 1,
     maxH: Infinity,
-    maxW: Infinity
+    maxW: Infinity,
+    transformScale: 1
   };
 
   state: State = {
@@ -161,6 +173,49 @@ export default class GridItem extends React.Component<Props, State> {
     className: ""
   };
 
+  currentNode: HTMLElement;
+
+  componentDidUpdate(prevProps: Props) {
+    if (this.props.droppingPosition && prevProps.droppingPosition) {
+      this.moveDroppingItem(prevProps);
+    }
+  }
+
+  moveDroppingItem(prevProps: Props) {
+    const { droppingPosition } = this.props;
+    const { dragging } = this.state;
+
+    if (!droppingPosition || !prevProps.droppingPosition) {
+      return;
+    }
+
+    if (!this.currentNode) {
+      // eslint-disable-next-line react/no-find-dom-node
+      this.currentNode = ((ReactDOM.findDOMNode(this): any): HTMLElement);
+    }
+
+    const shouldDrag =
+      (dragging && droppingPosition.x !== prevProps.droppingPosition.x) ||
+      droppingPosition.y !== prevProps.droppingPosition.y;
+
+    if (!dragging) {
+      this.onDragStart(droppingPosition.e, {
+        node: this.currentNode,
+        deltaX: droppingPosition.x,
+        deltaY: droppingPosition.y
+      });
+    } else if (shouldDrag) {
+      const deltaX = droppingPosition.x - dragging.left;
+      const deltaY = droppingPosition.y - dragging.top;
+
+      this.onDrag(droppingPosition.e, {
+        node: this.currentNode,
+        deltaX,
+        deltaY
+      });
+    }
+  }
+
   // Helper for generating column width
   calcColWidth(): number {
     const { margin, containerPadding, containerWidth, cols } = this.props;
@@ -187,32 +242,38 @@ export default class GridItem extends React.Component<Props, State> {
   ): Position {
     const { margin, containerPadding, rowHeight } = this.props;
     const colWidth = this.calcColWidth();
+    const out = {};
 
-    const out = {
-      left: Math.round((colWidth + margin[0]) * x + containerPadding[0]),
-      top: Math.round((rowHeight + margin[1]) * y + containerPadding[1]),
+    // If resizing, use the exact width and height as returned from resizing callbacks.
+    if (state && state.resizing) {
+      out.width = Math.round(state.resizing.width);
+      out.height = Math.round(state.resizing.height);
+    }
+    // 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
-      width:
+      out.width =
         w === Infinity
           ? w
-          : Math.round(colWidth * w + Math.max(0, w - 1) * margin[0]),
-      height:
+          : 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])
-    };
-
-    if (state && state.resizing) {
-      out.width = Math.round(state.resizing.width);
-      out.height = Math.round(state.resizing.height);
+          : Math.round(rowHeight * h + Math.max(0, h - 1) * margin[1]);
     }
 
+    // If dragging, use the exact width and height as returned from dragging callbacks.
     if (state && state.dragging) {
       out.top = Math.round(state.dragging.top);
       out.left = Math.round(state.dragging.left);
     }
+    // Otherwise, calculate from grid units.
+    else {
+      out.top = Math.round((rowHeight + margin[1]) * y + containerPadding[1]);
+      out.left = Math.round((colWidth + margin[0]) * x + containerPadding[0]);
+    }
 
     return out;
   }
@@ -311,14 +372,15 @@ export default class GridItem extends React.Component<Props, State> {
   mixinDraggable(child: ReactElement<any>): ReactElement<any> {
     return (
       <DraggableCore
-        onStart={this.onDragHandler("onDragStart")}
-        onDrag={this.onDragHandler("onDrag")}
-        onStop={this.onDragHandler("onDragStop")}
+        onStart={this.onDragStart}
+        onDrag={this.onDrag}
+        onStop={this.onDragStop}
         handle={this.props.handle}
         cancel={
           ".react-resizable-handle" +
           (this.props.cancel ? "," + this.props.cancel : "")
         }
+        scale={this.props.transformScale}
       >
         {child}
       </DraggableCore>
@@ -354,9 +416,9 @@ export default class GridItem extends React.Component<Props, State> {
         height={position.height}
         minConstraints={minConstraints}
         maxConstraints={maxConstraints}
-        onResizeStop={this.onResizeHandler("onResizeStop")}
-        onResizeStart={this.onResizeHandler("onResizeStart")}
-        onResize={this.onResizeHandler("onResize")}
+        onResizeStop={this.onResizeStop}
+        onResizeStart={this.onResizeStart}
+        onResize={this.onResize}
       >
         {child}
       </Resizable>
@@ -364,60 +426,131 @@ export default class GridItem extends React.Component<Props, State> {
   }
 
   /**
-   * 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.
+   * onDragStart event handler
+   * @param  {Event}  e             event data
+   * @param  {Object} callbackData  an object with node, delta and position information
    */
-  onDragHandler(handlerName: string) {
-    return (e: Event, { node, deltaX, deltaY }: ReactDraggableCallbackData) => {
-      const handler = this.props[handlerName];
-      if (!handler) return;
-
-      const newPosition: PartialPosition = { top: 0, left: 0 };
-
-      // Get new XY
-      switch (handlerName) {
-        case "onDragStart": {
-          // TODO: this wont work on nested parents
-          const { offsetParent } = node;
-          if (!offsetParent) return;
-          const parentRect = offsetParent.getBoundingClientRect();
-          const clientRect = node.getBoundingClientRect();
-          newPosition.left =
-            clientRect.left - parentRect.left + offsetParent.scrollLeft;
-          newPosition.top =
-            clientRect.top - parentRect.top + offsetParent.scrollTop;
-          this.setState({ dragging: newPosition });
-          break;
-        }
-        case "onDrag":
-          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 });
-          break;
-        case "onDragStop":
-          if (!this.state.dragging)
-            throw new Error("onDragEnd called before onDragStart.");
-          newPosition.left = this.state.dragging.left;
-          newPosition.top = this.state.dragging.top;
-          this.setState({ dragging: null });
-          break;
-        default:
-          throw new Error(
-            "onDragHandler called with unrecognized handlerName: " + handlerName
-          );
-      }
+  onDragStart = (e: Event, { node }: ReactDraggableCallbackData) => {
+    if (!this.props.onDragStart) return;
+
+    const newPosition: PartialPosition = { top: 0, left: 0 };
+
+    // TODO: this wont work on nested parents
+    const { offsetParent } = node;
+    if (!offsetParent) return;
+    const parentRect = offsetParent.getBoundingClientRect();
+    const clientRect = node.getBoundingClientRect();
+    const cLeft = clientRect.left / this.props.transformScale;
+    const pLeft = parentRect.left / this.props.transformScale;
+    const cTop = clientRect.top / this.props.transformScale;
+    const pTop = parentRect.top / this.props.transformScale;
+    newPosition.left = cLeft - pLeft + offsetParent.scrollLeft;
+    newPosition.top = cTop - pTop + offsetParent.scrollTop;
+    this.setState({ dragging: newPosition });
+
+    const { x, y } = this.calcXY(newPosition.top, newPosition.left);
 
-      const { x, y } = this.calcXY(newPosition.top, newPosition.left);
+    return (
+      this.props.onDragStart &&
+      this.props.onDragStart.call(this, this.props.i, x, y, {
+        e,
+        node,
+        newPosition
+      })
+    );
+  };
 
-      return handler.call(this, this.props.i, x, y, { e, node, newPosition });
-    };
-  }
+  /**
+   * onDrag event handler
+   * @param  {Event}  e             event data
+   * @param  {Object} callbackData  an object with node, delta and position information
+   */
+  onDrag = (e: Event, { node, deltaX, deltaY }: ReactDraggableCallbackData) => {
+    if (!this.props.onDrag) return;
+
+    const newPosition: PartialPosition = { top: 0, left: 0 };
+
+    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 });
+
+    const { x, y } = this.calcXY(newPosition.top, newPosition.left);
+
+    return (
+      this.props.onDrag &&
+      this.props.onDrag.call(this, this.props.i, x, y, {
+        e,
+        node,
+        newPosition
+      })
+    );
+  };
+
+  /**
+   * onDragStop event handler
+   * @param  {Event}  e             event data
+   * @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 };
+
+    if (!this.state.dragging)
+      throw new Error("onDragEnd called before onDragStart.");
+    newPosition.left = this.state.dragging.left;
+    newPosition.top = this.state.dragging.top;
+    this.setState({ dragging: null });
+
+    const { x, y } = this.calcXY(newPosition.top, newPosition.left);
+
+    return (
+      this.props.onDragStop &&
+      this.props.onDragStop.call(this, this.props.i, x, y, {
+        e,
+        node,
+        newPosition
+      })
+    );
+  };
+
+  /**
+   * onResizeStop event handler
+   * @param  {Event}  e             event data
+   * @param  {Object} callbackData  an object with node and size information
+   */
+  onResizeStop = (
+    e: Event,
+    callbackData: { node: HTMLElement, size: Position }
+  ) => {
+    this.onResizeHandler(e, callbackData, "onResizeStop");
+  };
+
+  /**
+   * onResizeStart event handler
+   * @param  {Event}  e             event data
+   * @param  {Object} callbackData  an object with node and size information
+   */
+  onResizeStart = (
+    e: Event,
+    callbackData: { node: HTMLElement, size: Position }
+  ) => {
+    this.onResizeHandler(e, callbackData, "onResizeStart");
+  };
+
+  /**
+   * onResize event handler
+   * @param  {Event}  e             event data
+   * @param  {Object} callbackData  an object with node and size information
+   */
+  onResize = (
+    e: Event,
+    callbackData: { node: HTMLElement, size: Position }
+  ) => {
+    this.onResizeHandler(e, callbackData, "onResize");
+  };
 
   /**
    * Wrapper around drag events to provide more useful data.
@@ -427,31 +560,30 @@ export default class GridItem extends React.Component<Props, State> {
    * @param  {String} handlerName Handler name to wrap.
    * @return {Function}           Handler function.
    */
-  onResizeHandler(handlerName: string) {
-    return (
-      e: Event,
-      { node, size }: { node: HTMLElement, size: Position }
-    ) => {
-      const handler = this.props[handlerName];
-      if (!handler) return;
-      const { cols, x, i, maxW, minW, maxH, minH } = this.props;
-
-      // Get new XY
-      let { w, h } = this.calcWH(size);
-
-      // Cap w at numCols
-      w = Math.min(w, cols - x);
-      // Ensure w is at least 1
-      w = Math.max(w, 1);
-
-      // Min/max capping
-      w = Math.max(Math.min(w, maxW), minW);
-      h = Math.max(Math.min(h, maxH), minH);
-
-      this.setState({ resizing: handlerName === "onResizeStop" ? null : size });
-
-      handler.call(this, i, w, h, { e, node, size });
-    };
+  onResizeHandler(
+    e: Event,
+    { node, size }: { node: HTMLElement, size: Position },
+    handlerName: string
+  ) {
+    const handler = this.props[handlerName];
+    if (!handler) return;
+    const { cols, x, i, maxW, minW, maxH, minH } = this.props;
+
+    // Get new XY
+    let { w, h } = this.calcWH(size);
+
+    // Cap w at numCols
+    w = Math.min(w, cols - x);
+    // Ensure w is at least 1
+    w = Math.max(w, 1);
+
+    // Min/max capping
+    w = Math.max(Math.min(w, maxW), minW);
+    h = Math.max(Math.min(h, maxH), minH);
+
+    this.setState({ resizing: handlerName === "onResizeStop" ? null : size });
+
+    handler.call(this, i, w, h, { e, node, size });
   }
 
   render(): ReactNode {
@@ -462,6 +594,7 @@ export default class GridItem extends React.Component<Props, State> {
       h,
       isDraggable,
       isResizable,
+      droppingPosition,
       useCSSTransforms
     } = this.props;
 
@@ -479,6 +612,7 @@ export default class GridItem extends React.Component<Props, State> {
           resizing: Boolean(this.state.resizing),
           "react-draggable": isDraggable,
           "react-draggable-dragging": Boolean(this.state.dragging),
+          dropping: Boolean(droppingPosition),
           cssTransforms: useCSSTransforms
         }
       ),