svelte-dnd-action - npm Package Compare versions

Comparing version 0.4.3 to 0.5.0

package.json

@@ -29,3 +29,3 @@ {
   "description": "*An awesome drag and drop library for Svelte 3 (not using the browser's built-in dnd, thanks god): Rich animations, nested containers, touch support and more *",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "repository": {
@@ -32,0 +32,0 @@ "type": "git",

README.md

@@ -91,3 +91,3 @@ # SVELTE DND ACTION ![Dependencies](https://david-dm.org/isaacHagoel/svelte-dnd-action.svg) [![Known Vulnerabilities](https://snyk.io/test/github/isaacHagoel/svelte-dnd-action/badge.svg?targetFile=package.json)](https://snyk.io/test/github/isaacHagoel/svelte-dnd-action?targetFile=package.json)
 | ------------------------- | -------------- | ------------------------------------------------------------ | ------------------------------------------------- | ------------------------------------------------------------ |
-| `items`                   | Array<Object>  | Yes. Each object in the array **has to have** an `id` property with a unique value (within all dnd-zones of the same type) | N/A                                               | The data array that is used to produce the list with the draggable items (the same thing you run your #each block on) |
+| `items`                   | Array<Object>  | Yes. Each object in the array **has to have** an `id` property (key name can be overridden globally) with a unique value (within all dnd-zones of the same type) | N/A                                               | The data array that is used to produce the list with the draggable items (the same thing you run your #each block on) |
 | `flipDurationMs`          | Number         | No                                                           | `0`                                               | The same value you give the flip animation on the items (to make them animated as they "make space" for the dragged item). Set to zero or leave out if you don't want animations |
@@ -120,3 +120,3 @@ | `type`                    | String         | No                                                           | Internal                                          | dnd-zones that share the same type can have elements from one dragged into another. By default, all dnd-zones have the same type |
 * The data that represents items within dnd-zones **of the same type** is expected to have the same shape (as in a data object that represents an item in one container can be added to another without conversion).
-* Item ids (#each keys) are unique in all dnd containers of the same type. EVERY DRAGGABLE ITEM (passed in through `items`) MUST HAVE AN ID PROPERTY CALLED `id`.
+* Item ids (#each keys) are unique in all dnd containers of the same type. EVERY DRAGGABLE ITEM (passed in through `items`) MUST HAVE AN ID PROPERTY CALLED `id`. You can override it globally if you'd like to use a different key (see below)
 * The items in the list that is passed-in are in the same order as the children of the container (i.e the items are rendered in an #each block).
@@ -128,2 +128,12 @@ * The host component should refresh the items that are passed in to the custom-action when receiving consider and finalize events.
 
+### Overriding the item id key name
+Sometimes it is useful to use a different key for your items instead of `id`, for example when working with PouchDB which expects `_id`. It can save some annoying conversions back and forth.
+In such cases you can import and call `overrideItemIdKeyNameBeforeInitialisingDndZones`. This function accepts one parameter of type `string` which is the new id key name.
+For example:
+```javascript
+import {overrideItemIdKeyNameBeforeInitialisingDndZones} from 'svelte-dnd-action';
+overrideItemIdKeyNameBeforeInitialisingDndZones('_id');
+``` 
+It applies globally (as in, all of your items everywhere are expected to have a unique identifier with this name). It can only be called when there are no rendered dndzones (I recommend calling it within the top-level <script> tag, ex: in the App component).
+
 ### Examples
@@ -130,0 +140,0 @@ * [Super basic, single list, no animation](https://svelte.dev/repl/bbd709b1a00b453e94658392c97a018a?version=3.24.1)

src/action.js

@@ -17,3 +17,3 @@ import { observe, unobserve } from './helpers/observer';
 export const SHADOW_ITEM_MARKER_PROPERTY_NAME = 'isDndShadowItem';
-const ITEM_ID_KEY = "id";
+
 const DEFAULT_DROP_ZONE_TYPE = '--any--';
@@ -47,2 +47,21 @@ const MIN_OBSERVATION_INTERVAL_MS = 100;
 
+let ITEM_ID_KEY = "id";
+
+/**
+ * Allows using another key instead of "id" in the items data. This is global and applies to all dndzones.
+ * Has to be called when there are no rendered dndzones whatsoever.
+ * @param {String} newKeyName
+ * @throws {Error} if it was called when there are rendered dndzones or if it is given the wrong type (not a string)
+ */
+export function overrideItemIdKeyNameBeforeInitialisingDndZones(newKeyName) {
+    if (dzToConfig.size > 0) {
+        throw new Error("can only override the id key before initialising any dndzone");
+    }
+    if (typeof newKeyName !== "string") {
+        throw new Error("item id key has to be a string");
+    }
+    console.debug("overriding item id key name", newKeyName)
+    ITEM_ID_KEY = newKeyName;
+}
+
 /* drop-zones registration management */
@@ -102,3 +121,3 @@ function registerDropZone(dropZoneEl, type) {
     // this deals with another svelte related race condition. in rare occasions (super rapid operations) the list hasn't updated yet
-    items = items.filter(i => i.id !== shadowElData.id)
+    items = items.filter(i => i[ITEM_ID_KEY] !== shadowElData[ITEM_ID_KEY])
     console.debug(`dragged entered items ${toString(items)}`);
@@ -109,3 +128,3 @@ const {index, isProximityBased} = e.detail.indexObj;
     items.splice( shadowElIdx, 0, shadowElData);
-    dispatchConsiderEvent(e.currentTarget, items, {trigger: TRIGGERS.DRAGGED_ENTERED, id: draggedElData.id});
+    dispatchConsiderEvent(e.currentTarget, items, {trigger: TRIGGERS.DRAGGED_ENTERED, id: draggedElData[ITEM_ID_KEY]});
 }
@@ -122,3 +141,3 @@ function handleDraggedLeft(e) {
     shadowElDropZone = undefined;
-    dispatchConsiderEvent(e.currentTarget, items, {trigger: TRIGGERS.DRAGGED_LEFT, id: draggedElData.id});
+    dispatchConsiderEvent(e.currentTarget, items, {trigger: TRIGGERS.DRAGGED_LEFT, id: draggedElData[ITEM_ID_KEY]});
 }
@@ -136,3 +155,3 @@ function handleDraggedIsOverIndex(e) {
     shadowElIdx = index;
-    dispatchConsiderEvent(e.currentTarget, items, {trigger: TRIGGERS.DRAGGED_OVER_INDEX, id: draggedElData.id});
+    dispatchConsiderEvent(e.currentTarget, items, {trigger: TRIGGERS.DRAGGED_OVER_INDEX, id: draggedElData[ITEM_ID_KEY]});
 }
@@ -164,6 +183,6 @@
         function finalizeWithinZone() {
-            dispatchFinalizeEvent(shadowElDropZone, items, {trigger: TRIGGERS.DROPPED_INTO_ZONE, id: draggedElData.id});
+            dispatchFinalizeEvent(shadowElDropZone, items, {trigger: TRIGGERS.DROPPED_INTO_ZONE, id: draggedElData[ITEM_ID_KEY]});
             if (shadowElDropZone !== originDropZone) {
                 // letting the origin drop zone know the element was permanently taken away
-                dispatchFinalizeEvent(originDropZone, dzToConfig.get(originDropZone).items, {trigger: TRIGGERS.DROPPED_INTO_ANOTHER, id: draggedElData.id});
+                dispatchFinalizeEvent(originDropZone, dzToConfig.get(originDropZone).items, {trigger: TRIGGERS.DROPPED_INTO_ANOTHER, id: draggedElData[ITEM_ID_KEY]});
             }
@@ -182,6 +201,6 @@ shadowElDropZone.children[shadowElIdx].style.visibility = '';
         shadowElIdx = originIndex;
-        dispatchConsiderEvent(originDropZone, items, {trigger: TRIGGERS.DROPPED_OUTSIDE_OF_ANY, id: draggedElData.id});
+        dispatchConsiderEvent(originDropZone, items, {trigger: TRIGGERS.DROPPED_OUTSIDE_OF_ANY, id: draggedElData[ITEM_ID_KEY]});
         function finalizeBackToOrigin() {
             items.splice(originIndex, 1, draggedElData);
-            dispatchFinalizeEvent(originDropZone, items, {trigger: TRIGGERS.DROPPED_OUTSIDE_OF_ANY, id: draggedElData.id});
+            dispatchFinalizeEvent(originDropZone, items, {trigger: TRIGGERS.DROPPED_OUTSIDE_OF_ANY, id: draggedElData[ITEM_ID_KEY]});
             shadowElDropZone.children[shadowElIdx].style.visibility = '';
@@ -346,3 +365,3 @@ cleanupPostDrop();
         items.splice(currentIdx, 1);
-        dispatchConsiderEvent(originDropZone, items, {trigger: TRIGGERS.DRAG_STARTED, id: draggedElData.id});
+        dispatchConsiderEvent(originDropZone, items, {trigger: TRIGGERS.DRAG_STARTED, id: draggedElData[ITEM_ID_KEY]});
 
@@ -349,0 +368,0 @@ // handing over to global handlers - starting to watch the element

src/index.js

@@ -1,1 +0,1 @@
-export { dndzone, TRIGGERS, SHADOW_ITEM_MARKER_PROPERTY_NAME } from './action.js';
+export { dndzone, TRIGGERS, SHADOW_ITEM_MARKER_PROPERTY_NAME, overrideItemIdKeyNameBeforeInitialisingDndZones } from './action.js';

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

56684

increased by3.34%

Lines of code

988

increased by1.65%

Number of lines in readme file

157

increased by6.8%

No dependency changes