react-grid-layout 0.16.4 → 0.17.1

package/build/ReactGridLayout.js

@@ -1,353 +1,528 @@
 "use strict";
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+var _react = _interopRequireDefault(require("react"));
 
-var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react2 = _interopRequireDefault(_react);
+var _lodash = _interopRequireDefault(require("lodash.isequal"));
 
-var _propTypes = require("prop-types");
+var _classnames = _interopRequireDefault(require("classnames"));
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+var _utils = require("./utils");
 
-var _lodash = require("lodash.isequal");
+var _GridItem = _interopRequireDefault(require("./GridItem"));
 
-var _lodash2 = _interopRequireDefault(_lodash);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _classnames = require("classnames");
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-var _classnames2 = _interopRequireDefault(_classnames);
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-var _utils = require("./utils");
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-var _GridItem = require("./GridItem");
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
 
-var _GridItem2 = _interopRequireDefault(_GridItem);
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-// End Types
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-/**
- * A reactive, fluid grid layout with draggable, resizable components.
- */
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-// Types
-var ReactGridLayout = function (_React$Component) {
-  _inherits(ReactGridLayout, _React$Component);
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
 
-  // TODO publish internal ReactClass displayName transform
-  function ReactGridLayout(props, context) {
-    _classCallCheck(this, ReactGridLayout);
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props, context));
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-    _initialiseProps.call(_this);
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
-    (0, _utils.autoBindHandlers)(_this, ["onDragStart", "onDrag", "onDragStop", "onResizeStart", "onResize", "onResizeStop"]);
-    return _this;
-  }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
-  ReactGridLayout.prototype.componentDidMount = function componentDidMount() {
-    this.setState({ mounted: true });
-    // Possibly call back with layout on mount. This should be done after correcting the layout width
-    // to ensure we don't rerender with the wrong width.
-    this.onLayoutMaybeChanged(this.state.layout, this.props.layout);
-  };
-
-  ReactGridLayout.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-    var newLayoutBase = void 0;
-    // Legacy support for compactType
-    // Allow parent to set layout directly.
-    if (!(0, _lodash2.default)(nextProps.layout, this.props.layout) || nextProps.compactType !== this.props.compactType) {
-      newLayoutBase = nextProps.layout;
-    } else if (!(0, _utils.childrenEqual)(this.props.children, nextProps.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;
-    }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-    // We need to regenerate the layout.
-    if (newLayoutBase) {
-      var newLayout = (0, _utils.synchronizeLayoutWithChildren)(newLayoutBase, nextProps.children, nextProps.cols, this.compactType(nextProps));
-      var _oldLayout = this.state.layout;
-      this.setState({ layout: newLayout });
-      this.onLayoutMaybeChanged(newLayout, _oldLayout);
-    }
-  };
-
-  /**
-   * Calculates a pixel value for the container.
-   * @return {String} Container height in pixels.
-   */
-
-
-  ReactGridLayout.prototype.containerHeight = function containerHeight() {
-    if (!this.props.autoSize) return;
-    var nbRow = (0, _utils.bottom)(this.state.layout);
-    var containerPaddingY = this.props.containerPadding ? this.props.containerPadding[1] : this.props.margin[1];
-    return nbRow * this.props.rowHeight + (nbRow - 1) * this.props.margin[1] + containerPaddingY * 2 + "px";
-  };
-
-  ReactGridLayout.prototype.compactType = function compactType(props) {
-    if (!props) props = this.props;
-    return props.verticalCompact === false ? null : props.compactType;
-  };
-
-  /**
-   * When dragging starts
-   * @param {String} i Id of the child
-   * @param {Number} x X position of the move
-   * @param {Number} y Y position of the move
-   * @param {Event} e The mousedown event
-   * @param {Element} node The current dragging DOM element
-   */
-
-
-  ReactGridLayout.prototype.onDragStart = function onDragStart(i, x, y, _ref) {
-    var e = _ref.e,
-        node = _ref.node;
-    var layout = this.state.layout;
-
-    var l = (0, _utils.getLayoutItem)(layout, i);
-    if (!l) return;
-
-    this.setState({
-      oldDragItem: (0, _utils.cloneLayoutItem)(l),
-      oldLayout: this.state.layout
-    });
+// End Types
+var compactType = function compactType(props
+/*: Props*/
+)
+/*: CompactType*/
+{
+  var _ref = props || {},
+      verticalCompact = _ref.verticalCompact,
+      compactType = _ref.compactType;
+
+  return verticalCompact === false ? null : compactType;
+};
 
-    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
-   * @param {String} i Id of the child
-   * @param {Number} x X position of the move
-   * @param {Number} y Y position of the move
-   * @param {Event} e The mousedown event
-   * @param {Element} node The current dragging DOM element
-   */
-
-
-  ReactGridLayout.prototype.onDrag = function onDrag(i, x, y, _ref2) {
-    var e = _ref2.e,
-        node = _ref2.node;
-    var oldDragItem = this.state.oldDragItem;
-    var layout = this.state.layout;
-    var cols = this.props.cols;
-
-    var l = (0, _utils.getLayoutItem)(layout, i);
-    if (!l) return;
-
-    // Create placeholder (display only)
-    var placeholder = {
-      w: l.w,
-      h: l.h,
-      x: l.x,
-      y: l.y,
-      placeholder: true,
-      i: i
-    };
-
-    // Move the element to the dragged location.
-    var isUserAction = true;
-    layout = (0, _utils.moveElement)(layout, l, x, y, isUserAction, this.props.preventCollision, this.compactType(), cols);
-
-    this.props.onDrag(layout, oldDragItem, l, placeholder, e, node);
-
-    this.setState({
-      layout: (0, _utils.compact)(layout, this.compactType(), cols),
-      activeDrag: placeholder
-    });
-  };
+var layoutClassName = "react-grid-layout";
+var isFirefox = false; // Try...catch will protect from navigator not existing (e.g. node) or a bad implementation of navigator
 
-  /**
-   * When dragging stops, figure out which position the element is closest to and update its x and y.
-   * @param  {String} i Index of the child.
-   * @param {Number} x X position of the move
-   * @param {Number} y Y position of the move
-   * @param {Event} e The mousedown event
-   * @param {Element} node The current dragging DOM element
-   */
+try {
+  isFirefox = navigator.userAgent.toLowerCase().includes("firefox");
+} catch (e) {}
+/* Ignore */
 
+/**
+ * A reactive, fluid grid layout with draggable, resizable components.
+ */
 
-  ReactGridLayout.prototype.onDragStop = function onDragStop(i, x, y, _ref3) {
-    var e = _ref3.e,
-        node = _ref3.node;
-    var oldDragItem = this.state.oldDragItem;
-    var layout = this.state.layout;
-    var _props = this.props,
-        cols = _props.cols,
-        preventCollision = _props.preventCollision;
 
-    var l = (0, _utils.getLayoutItem)(layout, i);
-    if (!l) return;
+var ReactGridLayout =
+/*#__PURE__*/
+function (_React$Component) {
+  _inherits(ReactGridLayout, _React$Component);
 
-    // Move the element here
-    var isUserAction = true;
-    layout = (0, _utils.moveElement)(layout, l, x, y, isUserAction, preventCollision, this.compactType(), cols);
+  // TODO publish internal ReactClass displayName transform
+  function ReactGridLayout(props
+  /*: Props*/
+  , context
+  /*: any*/
+  )
+  /*: void*/
+  {
+    var _this;
 
-    this.props.onDragStop(layout, oldDragItem, l, null, e, node);
+    _classCallCheck(this, ReactGridLayout);
 
-    // Set state
-    var newLayout = (0, _utils.compact)(layout, this.compactType(), cols);
-    var oldLayout = this.state.oldLayout;
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(ReactGridLayout).call(this, props, context));
 
-    this.setState({
+    _defineProperty(_assertThisInitialized(_this), "state", {
       activeDrag: null,
-      layout: newLayout,
+      layout: (0, _utils.synchronizeLayoutWithChildren)(_this.props.layout, _this.props.children, _this.props.cols, // Legacy support for verticalCompact: false
+      compactType(_this.props)),
+      mounted: false,
       oldDragItem: null,
-      oldLayout: null
+      oldLayout: null,
+      oldResizeItem: null,
+      droppingDOMNode: null,
+      children: []
     });
 
-    this.onLayoutMaybeChanged(newLayout, oldLayout);
-  };
-
-  ReactGridLayout.prototype.onLayoutMaybeChanged = function onLayoutMaybeChanged(newLayout, oldLayout) {
-    if (!oldLayout) oldLayout = this.state.layout;
-    if (!(0, _lodash2.default)(oldLayout, newLayout)) {
-      this.props.onLayoutChange(newLayout);
-    }
-  };
+    _defineProperty(_assertThisInitialized(_this), "dragEnterCounter", 0);
 
-  ReactGridLayout.prototype.onResizeStart = function onResizeStart(i, w, h, _ref4) {
-    var e = _ref4.e,
-        node = _ref4.node;
-    var layout = this.state.layout;
+    _defineProperty(_assertThisInitialized(_this), "onDragOver", function (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;
+      }
 
-    var l = (0, _utils.getLayoutItem)(layout, i);
-    if (!l) return;
+      var droppingItem = _this.props.droppingItem;
+      var layout = _this.state.layout;
+      var _e$nativeEvent = e.nativeEvent,
+          layerX = _e$nativeEvent.layerX,
+          layerY = _e$nativeEvent.layerY;
+      var droppingPosition = {
+        x: layerX,
+        y: layerY,
+        e: e
+      };
+
+      if (!_this.state.droppingDOMNode) {
+        _this.setState({
+          droppingDOMNode: _react.default.createElement("div", {
+            key: droppingItem.i
+          }),
+          droppingPosition: droppingPosition,
+          layout: [].concat(_toConsumableArray(layout), [_objectSpread({}, droppingItem, {
+            x: 0,
+            y: 0,
+            static: false,
+            isDraggable: true
+          })])
+        });
+      } else if (_this.state.droppingPosition) {
+        var shouldUpdatePosition = _this.state.droppingPosition.x != layerX || _this.state.droppingPosition.y != layerY;
+        shouldUpdatePosition && _this.setState({
+          droppingPosition: droppingPosition
+        });
+      }
 
-    this.setState({
-      oldResizeItem: (0, _utils.cloneLayoutItem)(l),
-      oldLayout: this.state.layout
+      e.stopPropagation();
+      e.preventDefault();
     });
 
-    this.props.onResizeStart(layout, l, l, null, e, node);
-  };
-
-  ReactGridLayout.prototype.onResize = function onResize(i, w, h, _ref5) {
-    var e = _ref5.e,
-        node = _ref5.node;
-    var _state = this.state,
-        layout = _state.layout,
-        oldResizeItem = _state.oldResizeItem;
-    var _props2 = this.props,
-        cols = _props2.cols,
-        preventCollision = _props2.preventCollision;
-
-    var l = (0, _utils.getLayoutItem)(layout, i);
-    if (!l) return;
-
-    // Something like quad tree should be used
-    // to find collisions faster
-    var hasCollisions = void 0;
-    if (preventCollision) {
-      var collisions = (0, _utils.getAllCollisions)(layout, _extends({}, l, { w: w, h: h })).filter(function (layoutItem) {
-        return layoutItem.i !== l.i;
+    _defineProperty(_assertThisInitialized(_this), "removeDroppingPlaceholder", function () {
+      var _this$props = _this.props,
+          droppingItem = _this$props.droppingItem,
+          cols = _this$props.cols;
+      var layout = _this.state.layout;
+      var newLayout = (0, _utils.compact)(layout.filter(function (l) {
+        return l.i !== droppingItem.i;
+      }), compactType(_this.props), cols);
+
+      _this.setState({
+        layout: newLayout,
+        droppingDOMNode: null,
+        activeDrag: null,
+        droppingPosition: undefined
       });
-      hasCollisions = collisions.length > 0;
-
-      // If we're colliding, we need adjust the placeholder.
-      if (hasCollisions) {
-        // adjust w && h to maximum allowed space
-        var leastX = Infinity,
-            leastY = Infinity;
-        collisions.forEach(function (layoutItem) {
-          if (layoutItem.x > l.x) leastX = Math.min(leastX, layoutItem.x);
-          if (layoutItem.y > l.y) leastY = Math.min(leastY, layoutItem.y);
-        });
+    });
 
-        if (Number.isFinite(leastX)) l.w = leastX - l.x;
-        if (Number.isFinite(leastY)) l.h = leastY - l.y;
-      }
-    }
+    _defineProperty(_assertThisInitialized(_this), "onDragLeave", function () {
+      _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 (!hasCollisions) {
-      // Set new width and height.
-      l.w = w;
-      l.h = h;
-    }
+      if (_this.dragEnterCounter === 0) {
+        _this.removeDroppingPlaceholder();
+      }
+    });
 
-    // Create placeholder element (display only)
-    var placeholder = {
-      w: l.w,
-      h: l.h,
-      x: l.x,
-      y: l.y,
-      static: true,
-      i: i
-    };
-
-    this.props.onResize(layout, oldResizeItem, l, placeholder, e, node);
-
-    // Re-compact the layout and set the drag placeholder.
-    this.setState({
-      layout: (0, _utils.compact)(layout, this.compactType(), cols),
-      activeDrag: placeholder
+    _defineProperty(_assertThisInitialized(_this), "onDragEnter", function () {
+      _this.dragEnterCounter++;
     });
-  };
 
-  ReactGridLayout.prototype.onResizeStop = function onResizeStop(i, w, h, _ref6) {
-    var e = _ref6.e,
-        node = _ref6.node;
-    var _state2 = this.state,
-        layout = _state2.layout,
-        oldResizeItem = _state2.oldResizeItem;
-    var cols = this.props.cols;
+    _defineProperty(_assertThisInitialized(_this), "onDrop", function () {
+      var droppingItem = _this.props.droppingItem;
+      var layout = _this.state.layout;
 
-    var l = (0, _utils.getLayoutItem)(layout, i);
+      var _ref2 = layout.find(function (l) {
+        return l.i === droppingItem.i;
+      }) || {},
+          x = _ref2.x,
+          y = _ref2.y,
+          w = _ref2.w,
+          h = _ref2.h; // reset gragEnter counter on drop
 
-    this.props.onResizeStop(layout, oldResizeItem, l, null, e, node);
 
-    // Set state
-    var newLayout = (0, _utils.compact)(layout, this.compactType(), cols);
-    var oldLayout = this.state.oldLayout;
+      _this.dragEnterCounter = 0;
 
-    this.setState({
-      activeDrag: null,
-      layout: newLayout,
-      oldResizeItem: null,
-      oldLayout: null
-    });
+      _this.removeDroppingPlaceholder();
 
-    this.onLayoutMaybeChanged(newLayout, oldLayout);
-  };
+      _this.props.onDrop({
+        x: x,
+        y: y,
+        w: w,
+        h: h
+      });
+    });
 
-  /**
-   * Create a placeholder object.
-   * @return {Element} Placeholder div.
-   */
+    (0, _utils.autoBindHandlers)(_assertThisInitialized(_this), ["onDragStart", "onDrag", "onDragStop", "onResizeStart", "onResize", "onResizeStop"]);
+    return _this;
+  }
 
+  _createClass(ReactGridLayout, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.setState({
+        mounted: true
+      }); // Possibly call back with layout on mount. This should be done after correcting the layout width
+      // to ensure we don't rerender with the wrong width.
 
-  ReactGridLayout.prototype.placeholder = function placeholder() {
-    var activeDrag = this.state.activeDrag;
+      this.onLayoutMaybeChanged(this.state.layout, this.props.layout);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps
+    /*: Props*/
+    , prevState
+    /*: State*/
+    ) {
+      if (!this.state.activeDrag) {
+        var newLayout = this.state.layout;
+        var oldLayout = prevState.layout;
+        this.onLayoutMaybeChanged(newLayout, oldLayout);
+      }
+    }
+    /**
+     * Calculates a pixel value for the container.
+     * @return {String} Container height in pixels.
+     */
+
+  }, {
+    key: "containerHeight",
+    value: function containerHeight() {
+      if (!this.props.autoSize) return;
+      var nbRow = (0, _utils.bottom)(this.state.layout);
+      var containerPaddingY = this.props.containerPadding ? this.props.containerPadding[1] : this.props.margin[1];
+      return nbRow * this.props.rowHeight + (nbRow - 1) * this.props.margin[1] + containerPaddingY * 2 + "px";
+    }
+    /**
+     * When dragging starts
+     * @param {String} i Id of the child
+     * @param {Number} x X position of the move
+     * @param {Number} y Y position of the move
+     * @param {Event} e The mousedown event
+     * @param {Element} node The current dragging DOM element
+     */
+
+  }, {
+    key: "onDragStart",
+    value: function onDragStart(i
+    /*: string*/
+    , x
+    /*: number*/
+    , y
+    /*: number*/
+    , _ref3) {
+      var e = _ref3.e,
+          node = _ref3.node;
+      var layout = this.state.layout;
+      var l = (0, _utils.getLayoutItem)(layout, i);
+      if (!l) return;
+      this.setState({
+        oldDragItem: (0, _utils.cloneLayoutItem)(l),
+        oldLayout: this.state.layout
+      });
+      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
+     * @param {String} i Id of the child
+     * @param {Number} x X position of the move
+     * @param {Number} y Y position of the move
+     * @param {Event} e The mousedown event
+     * @param {Element} node The current dragging DOM element
+     */
+
+  }, {
+    key: "onDrag",
+    value: function onDrag(i
+    /*: string*/
+    , x
+    /*: number*/
+    , y
+    /*: number*/
+    , _ref4) {
+      var e = _ref4.e,
+          node = _ref4.node;
+      var oldDragItem = this.state.oldDragItem;
+      var layout = this.state.layout;
+      var cols = this.props.cols;
+      var l = (0, _utils.getLayoutItem)(layout, i);
+      if (!l) return; // Create placeholder (display only)
+
+      var placeholder = {
+        w: l.w,
+        h: l.h,
+        x: l.x,
+        y: l.y,
+        placeholder: true,
+        i: i
+      }; // Move the element to the dragged location.
+
+      var isUserAction = true;
+      layout = (0, _utils.moveElement)(layout, l, x, y, isUserAction, this.props.preventCollision, compactType(this.props), cols);
+      this.props.onDrag(layout, oldDragItem, l, placeholder, e, node);
+      this.setState({
+        layout: (0, _utils.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.
+     * @param  {String} i Index of the child.
+     * @param {Number} x X position of the move
+     * @param {Number} y Y position of the move
+     * @param {Event} e The mousedown event
+     * @param {Element} node The current dragging DOM element
+     */
+
+  }, {
+    key: "onDragStop",
+    value: function onDragStop(i
+    /*: string*/
+    , x
+    /*: number*/
+    , y
+    /*: number*/
+    , _ref5) {
+      var e = _ref5.e,
+          node = _ref5.node;
+      var oldDragItem = this.state.oldDragItem;
+      var layout = this.state.layout;
+      var _this$props2 = this.props,
+          cols = _this$props2.cols,
+          preventCollision = _this$props2.preventCollision;
+      var l = (0, _utils.getLayoutItem)(layout, i);
+      if (!l) return; // Move the element here
+
+      var isUserAction = true;
+      layout = (0, _utils.moveElement)(layout, l, x, y, isUserAction, preventCollision, compactType(this.props), cols);
+
+      if (this.state.activeDrag) {
+        this.props.onDragStop(layout, oldDragItem, l, null, e, node);
+      } // Set state
+
+
+      var newLayout = (0, _utils.compact)(layout, compactType(this.props), cols);
+      var oldLayout = this.state.oldLayout;
+      this.setState({
+        activeDrag: null,
+        layout: newLayout,
+        oldDragItem: null,
+        oldLayout: null
+      });
+      this.onLayoutMaybeChanged(newLayout, oldLayout);
+    }
+  }, {
+    key: "onLayoutMaybeChanged",
+    value: function onLayoutMaybeChanged(newLayout
+    /*: Layout*/
+    , oldLayout
+    /*: ?Layout*/
+    ) {
+      if (!oldLayout) oldLayout = this.state.layout;
+
+      if (!(0, _lodash.default)(oldLayout, newLayout)) {
+        this.props.onLayoutChange(newLayout);
+      }
+    }
+  }, {
+    key: "onResizeStart",
+    value: function onResizeStart(i
+    /*: string*/
+    , w
+    /*: number*/
+    , h
+    /*: number*/
+    , _ref6) {
+      var e = _ref6.e,
+          node = _ref6.node;
+      var layout = this.state.layout;
+      var l = (0, _utils.getLayoutItem)(layout, i);
+      if (!l) return;
+      this.setState({
+        oldResizeItem: (0, _utils.cloneLayoutItem)(l),
+        oldLayout: this.state.layout
+      });
+      this.props.onResizeStart(layout, l, l, null, e, node);
+    }
+  }, {
+    key: "onResize",
+    value: function onResize(i
+    /*: string*/
+    , w
+    /*: number*/
+    , h
+    /*: number*/
+    , _ref7) {
+      var e = _ref7.e,
+          node = _ref7.node;
+      var _this$state = this.state,
+          layout = _this$state.layout,
+          oldResizeItem = _this$state.oldResizeItem;
+      var _this$props3 = this.props,
+          cols = _this$props3.cols,
+          preventCollision = _this$props3.preventCollision;
+      var l
+      /*: ?LayoutItem*/
+      = (0, _utils.getLayoutItem)(layout, i);
+      if (!l) return; // Something like quad tree should be used
+      // to find collisions faster
+
+      var hasCollisions;
+
+      if (preventCollision) {
+        var collisions = (0, _utils.getAllCollisions)(layout, _objectSpread({}, l, {
+          w: w,
+          h: h
+        })).filter(function (layoutItem) {
+          return 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
+          var leastX = Infinity,
+              leastY = Infinity;
+          collisions.forEach(function (layoutItem) {
+            if (layoutItem.x > l.x) leastX = Math.min(leastX, layoutItem.x);
+            if (layoutItem.y > l.y) leastY = Math.min(leastY, layoutItem.y);
+          });
+          if (Number.isFinite(leastX)) l.w = leastX - l.x;
+          if (Number.isFinite(leastY)) l.h = leastY - l.y;
+        }
+      }
 
-    if (!activeDrag) return null;
-    var _props3 = this.props,
-        width = _props3.width,
-        cols = _props3.cols,
-        margin = _props3.margin,
-        containerPadding = _props3.containerPadding,
-        rowHeight = _props3.rowHeight,
-        maxRows = _props3.maxRows,
-        useCSSTransforms = _props3.useCSSTransforms;
+      if (!hasCollisions) {
+        // Set new width and height.
+        l.w = w;
+        l.h = h;
+      } // Create placeholder element (display only)
 
-    // {...this.state.activeDrag} is pretty slow, actually
 
-    return _react2.default.createElement(
-      _GridItem2.default,
-      {
+      var placeholder = {
+        w: l.w,
+        h: l.h,
+        x: l.x,
+        y: l.y,
+        static: true,
+        i: i
+      };
+      this.props.onResize(layout, oldResizeItem, l, placeholder, e, node); // Re-compact the layout and set the drag placeholder.
+
+      this.setState({
+        layout: (0, _utils.compact)(layout, compactType(this.props), cols),
+        activeDrag: placeholder
+      });
+    }
+  }, {
+    key: "onResizeStop",
+    value: function onResizeStop(i
+    /*: string*/
+    , w
+    /*: number*/
+    , h
+    /*: number*/
+    , _ref8) {
+      var e = _ref8.e,
+          node = _ref8.node;
+      var _this$state2 = this.state,
+          layout = _this$state2.layout,
+          oldResizeItem = _this$state2.oldResizeItem;
+      var cols = this.props.cols;
+      var l = (0, _utils.getLayoutItem)(layout, i);
+      this.props.onResizeStop(layout, oldResizeItem, l, null, e, node); // Set state
+
+      var newLayout = (0, _utils.compact)(layout, compactType(this.props), cols);
+      var oldLayout = this.state.oldLayout;
+      this.setState({
+        activeDrag: null,
+        layout: newLayout,
+        oldResizeItem: null,
+        oldLayout: null
+      });
+      this.onLayoutMaybeChanged(newLayout, oldLayout);
+    }
+    /**
+     * Create a placeholder object.
+     * @return {Element} Placeholder div.
+     */
+
+  }, {
+    key: "placeholder",
+    value: function placeholder()
+    /*: ?ReactElement<any>*/
+    {
+      var activeDrag = this.state.activeDrag;
+      if (!activeDrag) return null;
+      var _this$props4 = this.props,
+          width = _this$props4.width,
+          cols = _this$props4.cols,
+          margin = _this$props4.margin,
+          containerPadding = _this$props4.containerPadding,
+          rowHeight = _this$props4.rowHeight,
+          maxRows = _this$props4.maxRows,
+          useCSSTransforms = _this$props4.useCSSTransforms,
+          transformScale = _this$props4.transformScale; // {...this.state.activeDrag} is pretty slow, actually
+
+      return _react.default.createElement(_GridItem.default, {
         w: activeDrag.w,
         h: activeDrag.h,
         x: activeDrag.x,
@@ -362,45 +537,48 @@ var ReactGridLayout = function (_React$Component) {
         rowHeight: rowHeight,
         isDraggable: false,
         isResizable: false,
-        useCSSTransforms: useCSSTransforms
-      },
-      _react2.default.createElement("div", null)
-    );
-  };
-
-  /**
-   * Given a grid item, set its style attributes & surround in a <Draggable>.
-   * @param  {Element} child React element.
-   * @return {Element}       Element wrapped in draggable and properly placed.
-   */
-
-
-  ReactGridLayout.prototype.processGridItem = function processGridItem(child) {
-    if (!child || !child.key) return;
-    var l = (0, _utils.getLayoutItem)(this.state.layout, String(child.key));
-    if (!l) return null;
-    var _props4 = this.props,
-        width = _props4.width,
-        cols = _props4.cols,
-        margin = _props4.margin,
-        containerPadding = _props4.containerPadding,
-        rowHeight = _props4.rowHeight,
-        maxRows = _props4.maxRows,
-        isDraggable = _props4.isDraggable,
-        isResizable = _props4.isResizable,
-        useCSSTransforms = _props4.useCSSTransforms,
-        draggableCancel = _props4.draggableCancel,
-        draggableHandle = _props4.draggableHandle;
-    var mounted = this.state.mounted;
-
-    // Parse 'static'. Any properties defined directly on the grid item will take precedence.
-
-    var draggable = Boolean(!l.static && isDraggable && (l.isDraggable || l.isDraggable == null));
-    var resizable = Boolean(!l.static && isResizable && (l.isResizable || l.isResizable == null));
-
-    return _react2.default.createElement(
-      _GridItem2.default,
-      {
+        useCSSTransforms: useCSSTransforms,
+        transformScale: transformScale
+      }, _react.default.createElement("div", null));
+    }
+    /**
+     * Given a grid item, set its style attributes & surround in a <Draggable>.
+     * @param  {Element} child React element.
+     * @return {Element}       Element wrapped in draggable and properly placed.
+     */
+
+  }, {
+    key: "processGridItem",
+    value: function processGridItem(child
+    /*: ReactElement<any>*/
+    , isDroppingItem
+    /*: boolean*/
+    )
+    /*: ?ReactElement<any>*/
+    {
+      if (!child || !child.key) return;
+      var l = (0, _utils.getLayoutItem)(this.state.layout, String(child.key));
+      if (!l) return null;
+      var _this$props5 = this.props,
+          width = _this$props5.width,
+          cols = _this$props5.cols,
+          margin = _this$props5.margin,
+          containerPadding = _this$props5.containerPadding,
+          rowHeight = _this$props5.rowHeight,
+          maxRows = _this$props5.maxRows,
+          isDraggable = _this$props5.isDraggable,
+          isResizable = _this$props5.isResizable,
+          useCSSTransforms = _this$props5.useCSSTransforms,
+          transformScale = _this$props5.transformScale,
+          draggableCancel = _this$props5.draggableCancel,
+          draggableHandle = _this$props5.draggableHandle;
+      var _this$state3 = this.state,
+          mounted = _this$state3.mounted,
+          droppingPosition = _this$state3.droppingPosition; // Parse 'static'. Any properties defined directly on the grid item will take precedence.
+
+      var draggable = Boolean(!l.static && isDraggable && (l.isDraggable || l.isDraggable == null));
+      var resizable = Boolean(!l.static && isResizable && (l.isResizable || l.isResizable == null));
+      return _react.default.createElement(_GridItem.default, {
         containerWidth: width,
         cols: cols,
         margin: margin,
@@ -419,6 +597,7 @@ var ReactGridLayout = function (_React$Component) {
         isResizable: resizable,
         useCSSTransforms: useCSSTransforms && mounted,
         usePercentages: !mounted,
+        transformScale: transformScale,
         w: l.w,
         h: l.h,
         x: l.x,
@@ -428,148 +607,200 @@ var ReactGridLayout = function (_React$Component) {
         minW: l.minW,
         maxH: l.maxH,
         maxW: l.maxW,
-        "static": l.static
-      },
-      child
-    );
-  };
-
-  ReactGridLayout.prototype.render = function render() {
-    var _this2 = this;
-
-    var _props5 = this.props,
-        className = _props5.className,
-        style = _props5.style;
+        static: l.static,
+        droppingPosition: isDroppingItem ? droppingPosition : undefined
+      }, child);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props6 = this.props,
+          className = _this$props6.className,
+          style = _this$props6.style,
+          isDroppable = _this$props6.isDroppable;
+      var mergedClassName = (0, _classnames.default)(layoutClassName, className);
+
+      var mergedStyle = _objectSpread({
+        height: this.containerHeight()
+      }, style);
+
+      return _react.default.createElement("div", {
+        className: mergedClassName,
+        style: mergedStyle,
+        onDrop: isDroppable ? this.onDrop : _utils.noop,
+        onDragLeave: isDroppable ? this.onDragLeave : _utils.noop,
+        onDragEnter: isDroppable ? this.onDragEnter : _utils.noop,
+        onDragOver: isDroppable ? this.onDragOver : _utils.noop
+      }, _react.default.Children.map(this.props.children, function (child) {
+        return _this2.processGridItem(child);
+      }), isDroppable && this.state.droppingDOMNode && this.processGridItem(this.state.droppingDOMNode, true), this.placeholder());
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps
+    /*: Props*/
+    , prevState
+    /*: State*/
+    ) {
+      var newLayoutBase;
+
+      if (prevState.activeDrag) {
+        return null;
+      } // Legacy support for compactType
+      // Allow parent to set layout directly.
+
+
+      if (!(0, _lodash.default)(nextProps.layout, prevState.propsLayout) || nextProps.compactType !== prevState.compactType) {
+        newLayoutBase = nextProps.layout;
+      } else if (!(0, _utils.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 = prevState.layout;
+      } // We need to regenerate the layout.
+
+
+      if (newLayoutBase) {
+        var newLayout = (0, _utils.synchronizeLayoutWithChildren)(newLayoutBase, nextProps.children, nextProps.cols, compactType(nextProps));
+        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;
+    }
+  }]);
 
-    var mergedClassName = (0, _classnames2.default)("react-grid-layout", className);
-    var mergedStyle = _extends({
-      height: this.containerHeight()
-    }, style);
+  return ReactGridLayout;
+}(_react.default.Component);
 
-    return _react2.default.createElement(
-      "div",
-      { className: mergedClassName, style: mergedStyle },
-      _react2.default.Children.map(this.props.children, function (child) {
-        return _this2.processGridItem(child);
-      }),
-      this.placeholder()
-    );
-  };
+exports.default = ReactGridLayout;
 
-  return ReactGridLayout;
-}(_react2.default.Component);
+_defineProperty(ReactGridLayout, "displayName", "ReactGridLayout");
 
-ReactGridLayout.displayName = "ReactGridLayout";
-ReactGridLayout.propTypes = {
+_defineProperty(ReactGridLayout, "propTypes", {
   //
   // Basic props
   //
-  className: _propTypes2.default.string,
-  style: _propTypes2.default.object,
-
+  className: _propTypes.default.string,
+  style: _propTypes.default.object,
   // This can be set explicitly. If it is not set, it will automatically
   // be set to the container width. Note that resizes will *not* cause this to adjust.
   // If you need that behavior, use WidthProvider.
-  width: _propTypes2.default.number,
-
+  width: _propTypes.default.number,
   // If true, the container height swells and contracts to fit contents
-  autoSize: _propTypes2.default.bool,
+  autoSize: _propTypes.default.bool,
   // # of cols.
-  cols: _propTypes2.default.number,
-
+  cols: _propTypes.default.number,
   // A selector that will not be draggable.
-  draggableCancel: _propTypes2.default.string,
+  draggableCancel: _propTypes.default.string,
   // A selector for the draggable handler
-  draggableHandle: _propTypes2.default.string,
-
+  draggableHandle: _propTypes.default.string,
   // Deprecated
-  verticalCompact: function verticalCompact(props) {
+  verticalCompact: function verticalCompact(props
+  /*: Props*/
+  ) {
     if (props.verticalCompact === false && process.env.NODE_ENV !== "production") {
-      console.warn(
-      // eslint-disable-line no-console
+      console.warn( // eslint-disable-line no-console
       "`verticalCompact` on <ReactGridLayout> is deprecated and will be removed soon. " + 'Use `compactType`: "horizontal" | "vertical" | null.');
     }
   },
   // Choose vertical or hotizontal compaction
-  compactType: _propTypes2.default.oneOf(["vertical", "horizontal"]),
-
+  compactType: _propTypes.default.oneOf(["vertical", "horizontal"]),
   // layout is an array of object with the format:
   // {x: Number, y: Number, w: Number, h: Number, i: String}
-  layout: function layout(props) {
-    var layout = props.layout;
-    // I hope you're setting the data-grid property on the grid items
+  layout: function layout(props
+  /*: Props*/
+  ) {
+    var layout = props.layout; // I hope you're setting the data-grid property on the grid items
+
     if (layout === undefined) return;
     (0, _utils.validateLayout)(layout, "layout");
   },
-
   //
   // Grid Dimensions
   //
-
   // Margin between items [x, y] in px
-  margin: _propTypes2.default.arrayOf(_propTypes2.default.number),
+  margin: _propTypes.default.arrayOf(_propTypes.default.number),
   // Padding inside the container [x, y] in px
-  containerPadding: _propTypes2.default.arrayOf(_propTypes2.default.number),
+  containerPadding: _propTypes.default.arrayOf(_propTypes.default.number),
   // Rows have a static height, but you can change this based on breakpoints if you like
-  rowHeight: _propTypes2.default.number,
+  rowHeight: _propTypes.default.number,
   // Default Infinity, but you can specify a max here if you like.
   // Note that this isn't fully fleshed out and won't error if you specify a layout that
   // extends beyond the row capacity. It will, however, not allow users to drag/resize
   // an item past the barrier. They can push items beyond the barrier, though.
   // Intentionally not documented for this reason.
-  maxRows: _propTypes2.default.number,
-
+  maxRows: _propTypes.default.number,
   //
   // Flags
   //
-  isDraggable: _propTypes2.default.bool,
-  isResizable: _propTypes2.default.bool,
+  isDraggable: _propTypes.default.bool,
+  isResizable: _propTypes.default.bool,
   // If true, grid items won't change position when being dragged over.
-  preventCollision: _propTypes2.default.bool,
+  preventCollision: _propTypes.default.bool,
   // Use CSS transforms instead of top/left
-  useCSSTransforms: _propTypes2.default.bool,
-
+  useCSSTransforms: _propTypes.default.bool,
+  // parent layout transform scale
+  transformScale: _propTypes.default.number,
+  // If true, an external element can trigger onDrop callback with a specific grid position as a parameter
+  isDroppable: _propTypes.default.bool,
   //
   // Callbacks
   //
-
   // Callback so you can save the layout. Calls after each drag & resize stops.
-  onLayoutChange: _propTypes2.default.func,
-
+  onLayoutChange: _propTypes.default.func,
   // Calls when drag starts. Callback is of the signature (layout, oldItem, newItem, placeholder, e, ?node).
   // All callbacks below have the same signature. 'start' and 'stop' callbacks omit the 'placeholder'.
-  onDragStart: _propTypes2.default.func,
+  onDragStart: _propTypes.default.func,
   // Calls on each drag movement.
-  onDrag: _propTypes2.default.func,
+  onDrag: _propTypes.default.func,
   // Calls when drag is complete.
-  onDragStop: _propTypes2.default.func,
+  onDragStop: _propTypes.default.func,
   //Calls when resize starts.
-  onResizeStart: _propTypes2.default.func,
+  onResizeStart: _propTypes.default.func,
   // Calls when resize movement happens.
-  onResize: _propTypes2.default.func,
+  onResize: _propTypes.default.func,
   // Calls when resize is complete.
-  onResizeStop: _propTypes2.default.func,
-
+  onResizeStop: _propTypes.default.func,
+  // Calls when some element is dropped.
+  onDrop: _propTypes.default.func,
   //
   // Other validations
   //
-
+  droppingItem: _propTypes.default.shape({
+    i: _propTypes.default.string.isRequired,
+    w: _propTypes.default.number.isRequired,
+    h: _propTypes.default.number.isRequired
+  }),
   // Children must not have duplicate keys.
-  children: function children(props, propName) {
-    var children = props[propName];
+  children: function children(props
+  /*: Props*/
+  , propName
+  /*: string*/
+  ) {
+    var children = props[propName]; // Check children keys for duplicates. Throw if found.
 
-    // Check children keys for duplicates. Throw if found.
     var keys = {};
-    _react2.default.Children.forEach(children, function (child) {
+
+    _react.default.Children.forEach(children, function (child) {
       if (keys[child.key]) {
         throw new Error('Duplicate child key "' + child.key + '" found! This will cause problems in ReactGridLayout.');
       }
+
       keys[child.key] = true;
     });
   }
-};
-ReactGridLayout.defaultProps = {
+});
+
+_defineProperty(ReactGridLayout, "defaultProps", {
   autoSize: true,
   cols: 12,
   className: "",
@@ -578,35 +809,29 @@ ReactGridLayout.defaultProps = {
   draggableCancel: "",
   containerPadding: null,
   rowHeight: 150,
-  maxRows: Infinity, // infinite vertical growth
+  maxRows: Infinity,
+  // infinite vertical growth
   layout: [],
   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: _utils.noop,
   onDragStart: _utils.noop,
   onDrag: _utils.noop,
   onDragStop: _utils.noop,
   onResizeStart: _utils.noop,
   onResize: _utils.noop,
-  onResizeStop: _utils.noop
-};
-
-var _initialiseProps = function _initialiseProps() {
-  this.state = {
-    activeDrag: null,
-    layout: (0, _utils.synchronizeLayoutWithChildren)(this.props.layout, this.props.children, this.props.cols,
-    // Legacy support for verticalCompact: false
-    this.compactType()),
-    mounted: false,
-    oldDragItem: null,
-    oldLayout: null,
-    oldResizeItem: null
-  };
-};
-
-exports.default = ReactGridLayout;
+  onResizeStop: _utils.noop,
+  onDrop: _utils.noop
+});