@neovici/cosmoz-utils 5.33.0 → 5.34.0

package/dist/hooks/use-drag-items.d.ts

@@ -1,5 +1,8 @@
 export declare const applyMove: <T>(list: T[], from: number, to: number) => T[];
-export declare const useDragItems: (onMove?: ((from: number, to: number) => void) | undefined) => {
+interface Opts {
+    prefix?: string;
+}
+export declare const useDragItems: (onMove?: ((from: number, to: number) => void) | undefined, { prefix }?: Opts) => {
     onDown: (e: MouseEvent) => void;
     onDragStart: (e: DragEvent) => void;
     onDragEnter: (e: DragEvent) => void;
@@ -7,3 +10,4 @@ export declare const useDragItems: (onMove?: ((from: number, to: number) => void
     onDragLeave: (e: DragEvent) => void;
     onDrop: (e: DragEvent) => void;
 };
+export {};

package/dist/hooks/use-drag-items.js

@@ -6,10 +6,27 @@ export const applyMove = (list, from, to) => {
     newList.splice(to + (from >= to ? 0 : -1), 0, newList.splice(from, 1)[0]);
     return newList;
 };
-export const useDragItems = (onMove) => {
+const getIndexer = (prefix) => {
+    const key = ['move-index', prefix].filter(Boolean).join('-');
+    return {
+        set(dt, index) {
+            const idx = index.toString();
+            dt.setData(key, idx);
+            dt.setData('text/plain', idx);
+        },
+        get(dt) {
+            return parse(dt.getData(key));
+        },
+        has(dt) {
+            return dt.types.includes(key);
+        },
+    };
+};
+export const useDragItems = (onMove, { prefix } = {}) => {
     const meta = useMeta({
         onMove,
     });
+    const indexer = getIndexer(prefix);
     return {
         onDown: useCallback((e) => {
             if (!e.target.closest('[data-pull]')) {
@@ -24,23 +41,23 @@ export const useDragItems = (onMove) => {
             }
             meta.handle = undefined;
             const dt = e.dataTransfer;
-            const idx = index.toString();
             dt.effectAllowed = 'move';
-            dt.setData('move-index', idx);
-            dt.setData('text/plain', idx);
+            indexer.set(dt, index);
             setTimeout(() => (target.dataset.drag = ''), 0);
             target.addEventListener('dragend', (e) => delete e.target.dataset.drag, { once: true });
         }, [meta]),
         onDragEnter: useCallback((e) => {
             const ctg = e.currentTarget;
-            if (ctg !== e.target) {
+            const dt = e.dataTransfer;
+            if (ctg !== e.target || !indexer.has(dt))
                 return;
-            }
             e.preventDefault();
-            e.dataTransfer.dropEffect = 'move';
+            dt.dropEffect = 'move';
             ctg.dataset.dragover = '';
         }, []),
         onDragOver: useCallback((e) => {
+            if (!indexer.has(e.dataTransfer))
+                return;
             e.preventDefault();
             e.currentTarget.dataset.dragover = '';
         }, []),
@@ -52,9 +69,13 @@ export const useDragItems = (onMove) => {
             delete ctg.dataset.dragover;
         }, []),
         onDrop: useCallback((e) => {
-            const from = parse(e.dataTransfer.getData('move-index')) || 0;
-            const to = parse(e.currentTarget.dataset.index) || 0;
-            delete e.currentTarget.dataset.dragover;
+            const ctg = e.currentTarget;
+            const dt = e.dataTransfer;
+            delete ctg.dataset.dragover;
+            if (!indexer.has(dt))
+                return;
+            const from = indexer.get(dt) || 0;
+            const to = parse(ctg.dataset.index) || 0;
             e.preventDefault();
             meta.onMove?.(from, to);
         }, [meta]),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-utils",
-	"version": "5.33.0",
+	"version": "5.34.0",
 	"description": "Date, money and template management functions commonly needed in Cosmoz views.",
 	"keywords": [
 		"polymer",