react-grid-layout 0.16.4 → 0.17.1

package/{build/utils.js.flow → lib/utils.js}

@@ -29,15 +29,16 @@ export type Position = {
 };
 export type ReactDraggableCallbackData = {
   node: HTMLElement,
-  x: number,
-  y: number,
+  x?: number,
+  y?: number,
   deltaX: number,
   deltaY: number,
-  lastX: number,
-  lastY: number
+  lastX?: number,
+  lastY?: number
 };
 
 export type PartialPosition = { left: number, top: number };
+export type DroppingPosition = { x: number, y: number, e: Event };
 export type Size = { width: number, height: number };
 export type GridDragEvent = {
   e: Event,
@@ -45,6 +46,15 @@ export type GridDragEvent = {
   newPosition: PartialPosition
 };
 export type GridResizeEvent = { e: Event, node: HTMLElement, size: Size };
+export type DragOverEvent = MouseEvent & {
+  nativeEvent: {
+    layerX: number,
+    layerY: number,
+    target: {
+      className: String
+    }
+  }
+};
 
 type REl = ReactElement<any>;
 export type ReactChildren = ReactChildrenArray<REl>;
@@ -122,7 +132,7 @@ export function childrenEqual(a: ReactChildren, b: ReactChildren): boolean {
  * Given two layoutitems, check if they collide.
  */
 export function collides(l1: LayoutItem, l2: LayoutItem): boolean {
-  if (l1 === l2) return false; // same element
+  if (l1.i === l2.i) return false; // same element
   if (l1.x + l1.w <= l2.x) return false; // l1 is left of l2
   if (l1.x >= l2.x + l2.w) return false; // l1 is right of l2
   if (l1.y + l1.h <= l2.y) return false; // l1 is above l2
@@ -185,15 +195,22 @@ function resolveCompactionCollision(
 ) {
   const sizeProp = heightWidth[axis];
   item[axis] += 1;
-  const itemIndex = layout.indexOf(item);
+  const itemIndex = layout
+    .map(layoutItem => {
+      return layoutItem.i;
+    })
+    .indexOf(item.i);
 
   // Go through each item we collide with.
   for (let i = itemIndex + 1; i < layout.length; i++) {
     const otherItem = layout[i];
-
     // Ignore static items
     if (otherItem.static) continue;
 
+    // Optimization: we can break early if we know we're past this el
+    // We can do this b/c it's a sorted layout
+    if (otherItem.y > item.y + item.h) break;
+
     if (collides(item, otherItem)) {
       resolveCompactionCollision(
         layout,
@@ -342,25 +359,27 @@ export function getStatics(layout: Layout): Array<LayoutItem> {
 export function moveElement(
   layout: Layout,
   l: LayoutItem,
-  x: number,
-  y: number,
+  x: ?number,
+  y: ?number,
   isUserAction: ?boolean,
   preventCollision: ?boolean,
   compactType: CompactType,
   cols: number
 ): Layout {
   if (l.static) return layout;
-  log(`Moving element ${l.i} to [${x},${y}] from [${l.x},${l.y}]`);
 
   // Short-circuit if nothing to do.
   if (l.y === y && l.x === x) return layout;
 
+  log(
+    `Moving element ${l.i} to [${String(x)},${String(y)}] from [${l.x},${l.y}]`
+  );
   const oldX = l.x;
   const oldY = l.y;
 
   // This is quite a bit faster than extending the object
-  l.x = x;
-  l.y = y;
+  if (typeof x === "number") l.x = x;
+  if (typeof y === "number") l.y = y;
   l.moved = true;
 
   // If this collides with anything, move it.
@@ -369,9 +388,11 @@ export function moveElement(
   // nearest collision.
   let sorted = sortLayoutItems(layout, compactType);
   const movingUp =
-    compactType === "vertical"
+    compactType === "vertical" && typeof y === "number"
       ? oldY >= y
-      : compactType === "horizontal" ? oldX >= x : false;
+      : compactType === "horizontal" && typeof x === "number"
+      ? oldX >= x
+      : false;
   if (movingUp) sorted = sorted.reverse();
   const collisions = getAllCollisions(sorted, l);
 
@@ -388,9 +409,7 @@ export function moveElement(
   for (let i = 0, len = collisions.length; i < len; i++) {
     const collision = collisions[i];
     log(
-      `Resolving collision between ${l.i} at [${l.x},${l.y}] and ${
-        collision.i
-      } at [${collision.x},${collision.y}]`
+      `Resolving collision between ${l.i} at [${l.x},${l.y}] and ${collision.i} at [${collision.x},${collision.y}]`
     );
 
     // Short circuit so we can't infinite loop
@@ -438,43 +457,36 @@ export function moveElementAwayFromCollision(
   cols: number
 ): Layout {
   const compactH = compactType === "horizontal";
-  const compactV = compactType === "vertical";
-  const preventCollision = false; // we're already colliding
+  // Compact vertically if not set to horizontal
+  const compactV = compactType !== "horizontal";
+  const preventCollision = collidesWith.static; // we're already colliding (not for static items)
 
   // If there is enough space above the collision to put this element, move it there.
   // We only do this on the main collision as this can get funky in cascades and cause
   // unwanted swapping behavior.
   if (isUserAction) {
+    // Reset isUserAction flag because we're not in the main collision anymore.
+    isUserAction = false;
+
     // Make a mock item so we don't modify the item here, only modify in moveElement.
     const fakeItem: LayoutItem = {
       x: compactH ? Math.max(collidesWith.x - itemToMove.w, 0) : itemToMove.x,
-      y: !compactH ? Math.max(collidesWith.y - itemToMove.h, 0) : itemToMove.y,
+      y: compactV ? Math.max(collidesWith.y - itemToMove.h, 0) : itemToMove.y,
       w: itemToMove.w,
       h: itemToMove.h,
       i: "-1"
     };
 
-    // This makes it feel a bit more precise by waiting to swap for just a bit when moving up.
-    const [axis, dimension] =
-      compactType === "horizontal" ? ["x", "w"] : ["y", "h"];
-    const shouldSkip =
-      false &&
-      // Our collision is below the item to move, and only encroaches by 25% of its dimension; ignore
-      (collidesWith[axis] > itemToMove[axis] &&
-        collidesWith[axis] - itemToMove[axis] > itemToMove[dimension] / 4);
-
     // No collision? If so, we can go up there; otherwise, we'll end up moving down as normal
-    if (!shouldSkip && !getFirstCollision(layout, fakeItem)) {
+    if (!getFirstCollision(layout, fakeItem)) {
       log(
-        `Doing reverse collision on ${itemToMove.i} up to [${fakeItem.x},${
-          fakeItem.y
-        }].`
+        `Doing reverse collision on ${itemToMove.i} up to [${fakeItem.x},${fakeItem.y}].`
       );
       return moveElement(
         layout,
         itemToMove,
-        fakeItem.x,
-        fakeItem.y,
+        compactH ? fakeItem.x : undefined,
+        compactV ? fakeItem.y : undefined,
         isUserAction,
         preventCollision,
         compactType,
@@ -486,8 +498,8 @@ export function moveElementAwayFromCollision(
   return moveElement(
     layout,
     itemToMove,
-    compactH ? collidesWith.x + collidesWith.w : itemToMove.x,
-    compactV ? collidesWith.y + collidesWith.h : itemToMove.y,
+    compactH ? itemToMove.x + 1 : undefined,
+    compactV ? itemToMove.y + 1 : undefined,
     isUserAction,
     preventCollision,
     compactType,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-grid-layout",
-  "version": "0.16.4",
+  "version": "0.17.1",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
   "main": "index.js",
   "scripts": {
@@ -38,48 +38,45 @@
   "dependencies": {
     "classnames": "2.x",
     "lodash.isequal": "^4.0.0",
-    "prop-types": "15.x",
-    "react-draggable": "3.x",
-    "react-resizable": "1.x"
+    "prop-types": "^15.0.0",
+    "react-draggable": "^4.0.0",
+    "react-resizable": "^1.9.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.24.1",
-    "babel-core": "^6.24.1",
-    "babel-eslint": "^8.2.1",
-    "babel-jest": "^22.2.2",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-espower": "^2.4.0",
-    "babel-plugin-react-transform": "^3.0.0",
-    "babel-plugin-transform-react-constant-elements": "^6.5.0",
-    "babel-plugin-transform-react-inline-elements": "^6.6.5",
-    "babel-plugin-typecheck": "^3.6.1",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-1": "^6.24.1",
-    "css-loader": "^0.28.9",
-    "ejs": "^2.4.1",
-    "eslint": "^4.17.0",
-    "eslint-plugin-flowtype": "^2.44.0",
-    "eslint-plugin-mocha": "^4.11.0",
-    "eslint-plugin-react": "^7.6.1",
+    "@babel/cli": "^7.6.4",
+    "@babel/core": "^7.6.4",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-transform-flow-comments": "^7.6.0",
+    "@babel/preset-env": "^7.6.0",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-eslint": "^10.0.3",
+    "babel-jest": "^24.9.0",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-espower": "^3.0.1",
+    "css-loader": "^3.2.0",
+    "ejs": "^2.7.1",
+    "eslint": "^6.4.0",
+    "eslint-plugin-flowtype": "^4.3.0",
+    "eslint-plugin-mocha": "^6.2.0",
+    "eslint-plugin-react": "^7.14.3",
     "exports-loader": "^0.7.0",
-    "flow-bin": "^0.65.0",
-    "husky": "^0.14.3",
-    "imports-loader": "^0.7.1",
-    "jest-cli": "^22.3.0",
-    "lint-staged": "^6.1.0",
+    "flow-bin": "^0.110.1",
+    "husky": "^3.0.9",
+    "imports-loader": "^0.8.0",
+    "jest-cli": "^24.9.0",
+    "lint-staged": "^9.2.5",
     "lodash": "^4.17.5",
     "opener": "^1.4.3",
-    "power-assert": "^1.4.4",
-    "prettier": "^1.10.2",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-hot-loader": "^3.1.3",
+    "prettier": "^1.18.2",
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
+    "react-hot-loader": "^4.12.13",
     "react-transform-hmr": "^1.0.2",
-    "style-loader": "^0.20.2",
-    "valiquire": "^0.3.0",
-    "webpack": "^3.11.0",
-    "webpack-dev-server": "^2.11.1"
+    "style-loader": "^1.0.0",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.9",
+    "webpack-dev-server": "^3.9.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -87,14 +84,11 @@
   "jest": {
     "testMatch": [
       "<rootDir>/test/spec/*.js"
-    ]
+    ],
+    "testURL": "http://localhost"
   },
   "lint-staged": {
-    "*.{js,jsx}": [
-      "prettier --write",
-      "git add"
-    ],
-    "*.css": [
+    "*.{js,jsx,css}": [
       "prettier --write",
       "git add"
     ]

package/.babelrc

@@ -1,12 +0,0 @@
-{
-  "presets": [
-    ["es2015", {"loose": true}],
-    "stage-1",
-    "react"
-  ],
-  "env": {
-    "test": {
-      "plugins": ["espower"]
-    }
-  }
-}

package/.jshintignore

@@ -1 +0,0 @@
-node_modules

package/.jshintrc

@@ -1,10 +0,0 @@
-{
-  "node": true,
-
-  "curly": true,
-  "latedef": true,
-  "quotmark": true,
-  "undef": true,
-  "unused": true,
-  "trailing": true
-}