@atlaskit/drag-and-drop-hitbox - npm Package Compare versions

Comparing version 0.2.7 to 0.3.0

CHANGELOG.md

 # @atlaskit/drag-and-drop-hitbox
 
+## 0.3.0
+
+### Minor Changes
+
+- [`f004dadb4fc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f004dadb4fc) - `reorderWithEdge` has changed API in order to more accurately reflect the values that are being passed in
+
+  ```diff
+  function reorderWithEdge<Value>(args: {
+      list: Value[];
+  -   edge: Edge | null;
+  +   // the reorder operation is based on what the closest edge of the target is
+  +   closestEdgeOfTarget: Edge | null;
+      startIndex: number;
+  -   finalIndex: number
+  +   // we are reordering relative to the target
+  +   indexOfTarget: number;
+      axis: 'vertical' | 'horizontal';
+  }): Value[];
+  ```
+
+  Adding new utility: `getReorderDestinationIndex`
+
+  When you are rendering _drop indicators_ (eg lines) between items in a list, it can be difficult to know what the `index` the dropped item should go into. The final `index` will depend on what the closest `Edge` is. `getReorderDestinationIndex` can give you the final `index` for a reordering operation, taking into account which `Edge` is closest
+
+  ```ts
+  import { getReorderDestinationIndex } from '@atlaskit/drag-and-drop-hitbox/util/get-reorder-destination-index';
+
+  // Dragging A on the left of B
+  // A should stay in the same spot
+  expect(
+    getReorderDestinationIndex({
+      // list: ['A', 'B', 'C'],
+      // move A to left of B
+      startIndex: 0,
+      indexOfTarget: 1,
+      closestEdgeOfTarget: 'left',
+      axis: 'horizontal',
+    }),
+    // results in no change: ['A', 'B', 'C']
+  ).toEqual(0);
+
+  // Dragging A on the right of B
+  // A should go after B
+  expect(
+    getReorderDestinationIndex({
+      // list: ['A', 'B', 'C'],
+      // move A to right of B
+      startIndex: 0,
+      indexOfTarget: 1,
+      closestEdgeOfTarget: 'right',
+      axis: 'horizontal',
+    }),
+    // A moved forward ['B', 'A', 'C']
+  ).toEqual(1);
+  ```
+
 ## 0.2.7
@@ -4,0 +60,0 @@

dist/cjs/reorder-with-edge.js

@@ -10,40 +10,20 @@ "use strict";
 
+var _getReorderDestinationIndex = require("./get-reorder-destination-index");
+
 function reorderWithEdge(_ref) {
-  var edge = _ref.edge,
-      list = _ref.list,
+  var list = _ref.list,
       startIndex = _ref.startIndex,
-      finishIndex = _ref.finishIndex,
+      closestEdgeOfTarget = _ref.closestEdgeOfTarget,
+      indexOfTarget = _ref.indexOfTarget,
       axis = _ref.axis;
-
-  // invalid index's
-  if (startIndex === -1 || finishIndex === -1) {
-    return list;
-  } // if we are targeting the same index we don't need to do anything
-
-
-  if (startIndex === finishIndex) {
-    return list;
-  }
-
-  var destinationIndex = function () {
-    if (edge == null) {
-      return finishIndex;
-    }
-
-    var isGoingAfter = axis === 'vertical' && edge === 'bottom' || axis === 'horizontal' && edge === 'right';
-    var isMovingForward = startIndex < finishIndex; // moving forward
-
-    if (isMovingForward) {
-      return isGoingAfter ? finishIndex : finishIndex - 1;
-    } // moving backwards
-
-
-    return isGoingAfter ? finishIndex + 1 : finishIndex;
-  }();
-
   return (0, _reorder.reorder)({
     list: list,
     startIndex: startIndex,
-    finishIndex: destinationIndex
+    finishIndex: (0, _getReorderDestinationIndex.getReorderDestinationIndex)({
+      closestEdgeOfTarget: closestEdgeOfTarget,
+      startIndex: startIndex,
+      indexOfTarget: indexOfTarget,
+      axis: axis
+    })
   });
 }

dist/cjs/version.json

 {
 	"name": "@atlaskit/drag-and-drop-hitbox",
-	"version": "0.2.7",
+	"version": "0.3.0",
 	"sideEffects": false
 }

dist/es2019/reorder-with-edge.js

 import { reorder } from '@atlaskit/drag-and-drop/util/reorder';
+import { getReorderDestinationIndex } from './get-reorder-destination-index';
 export function reorderWithEdge({
-  edge,
   list,
   startIndex,
-  finishIndex,
+  closestEdgeOfTarget,
+  indexOfTarget,
   axis
 }) {
-  // invalid index's
-  if (startIndex === -1 || finishIndex === -1) {
-    return list;
-  } // if we are targeting the same index we don't need to do anything
-
-
-  if (startIndex === finishIndex) {
-    return list;
-  }
-
-  const destinationIndex = (() => {
-    if (edge == null) {
-      return finishIndex;
-    }
-
-    const isGoingAfter = axis === 'vertical' && edge === 'bottom' || axis === 'horizontal' && edge === 'right';
-    const isMovingForward = startIndex < finishIndex; // moving forward
-
-    if (isMovingForward) {
-      return isGoingAfter ? finishIndex : finishIndex - 1;
-    } // moving backwards
-
-
-    return isGoingAfter ? finishIndex + 1 : finishIndex;
-  })();
-
   return reorder({
     list,
     startIndex,
-    finishIndex: destinationIndex
+    finishIndex: getReorderDestinationIndex({
+      closestEdgeOfTarget,
+      startIndex,
+      indexOfTarget,
+      axis
+    })
   });
 }

dist/es2019/version.json

 {
 	"name": "@atlaskit/drag-and-drop-hitbox",
-	"version": "0.2.7",
+	"version": "0.3.0",
 	"sideEffects": false
 }

dist/esm/reorder-with-edge.js

 import { reorder } from '@atlaskit/drag-and-drop/util/reorder';
+import { getReorderDestinationIndex } from './get-reorder-destination-index';
 export function reorderWithEdge(_ref) {
-  var edge = _ref.edge,
-      list = _ref.list,
+  var list = _ref.list,
       startIndex = _ref.startIndex,
-      finishIndex = _ref.finishIndex,
+      closestEdgeOfTarget = _ref.closestEdgeOfTarget,
+      indexOfTarget = _ref.indexOfTarget,
       axis = _ref.axis;
-
-  // invalid index's
-  if (startIndex === -1 || finishIndex === -1) {
-    return list;
-  } // if we are targeting the same index we don't need to do anything
-
-
-  if (startIndex === finishIndex) {
-    return list;
-  }
-
-  var destinationIndex = function () {
-    if (edge == null) {
-      return finishIndex;
-    }
-
-    var isGoingAfter = axis === 'vertical' && edge === 'bottom' || axis === 'horizontal' && edge === 'right';
-    var isMovingForward = startIndex < finishIndex; // moving forward
-
-    if (isMovingForward) {
-      return isGoingAfter ? finishIndex : finishIndex - 1;
-    } // moving backwards
-
-
-    return isGoingAfter ? finishIndex + 1 : finishIndex;
-  }();
-
   return reorder({
     list: list,
     startIndex: startIndex,
-    finishIndex: destinationIndex
+    finishIndex: getReorderDestinationIndex({
+      closestEdgeOfTarget: closestEdgeOfTarget,
+      startIndex: startIndex,
+      indexOfTarget: indexOfTarget,
+      axis: axis
+    })
   });
 }

dist/esm/version.json

 {
 	"name": "@atlaskit/drag-and-drop-hitbox",
-	"version": "0.2.7",
+	"version": "0.3.0",
 	"sideEffects": false
 }

dist/types/reorder-with-edge.d.ts

 import type { Edge } from './types';
-export declare function reorderWithEdge<Value>({ edge, list, startIndex, finishIndex, axis, }: {
-    edge: Edge | null;
+export declare function reorderWithEdge<Value>({ list, startIndex, closestEdgeOfTarget, indexOfTarget, axis, }: {
     list: Value[];
+    closestEdgeOfTarget: Edge | null;
     startIndex: number;
-    finishIndex: number;
+    indexOfTarget: number;
     axis: 'vertical' | 'horizontal';
 }): Value[];

package.json

 {
   "name": "@atlaskit/drag-and-drop-hitbox",
-  "version": "0.2.7",
+  "version": "0.3.0",
   "description": "An addon for `@atlaskit/drag-and-drop` with helpers for attaching interaction information to a drop target when it is being dragged over",
@@ -25,9 +25,2 @@ "author": "Atlassian Pty Ltd",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*"
-      ]
-    }
-  },
   "sideEffects": false,
@@ -40,2 +33,3 @@ "atlaskit:src": "src/index.ts",
     "./util/reorder-with-edge": "./src/reorder-with-edge.ts",
+    "./util/get-reorder-destination-index": "./src/get-reorder-destination-index.ts",
     "./experimental/tree": "./src/experimental/tree.ts"
@@ -42,0 +36,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

33207

increased by16.03%

Lines of code

480

increased by1.48%

Worsened metrics

Number of package files

38

decreased by-2.56%

No dependency changes