@react-stately/dnd - npm Package Compare versions

Comparing version 3.0.0-nightly.3263 to 3.0.0-nightly.3266

dist/main.js

@@ -27,4 +27,6 @@ var $1IdlX$react = require("react");
 function $481a240e3d51b276$export$29efd034f1d79f81(props) {
-    let { getItems: getItems , collection: collection , selectionManager: selectionManager , onDragStart: onDragStart , onDragMove: onDragMove , onDragEnd: onDragEnd , renderPreview: renderPreview  } = props;
-    let [draggingKeys, setDraggingKeys] = $1IdlX$react.useState(new Set());
+    let { getItems: getItems , collection: collection , selectionManager: selectionManager , onDragStart: onDragStart , onDragMove: onDragMove , onDragEnd: onDragEnd , preview: preview  } = props;
+    let [, setDragging] = $1IdlX$react.useState(false);
+    let draggingKeys = $1IdlX$react.useRef(new Set());
+    let draggedKey = $1IdlX$react.useRef(null);
     let getKeys = (key)=>{
@@ -43,4 +45,10 @@ // The clicked item is always added to the drag. If it is selected, then all of the
         selectionManager: selectionManager,
+        get draggedKey () {
+            return draggedKey.current;
+        },
+        get draggingKeys () {
+            return draggingKeys.current;
+        },
         isDragging (key) {
-            return draggingKeys.has(key);
+            return draggingKeys.current.has(key);
         },
@@ -51,9 +59,8 @@ getKeysForDrag: getKeys,
         },
-        renderPreview (key) {
-            if (typeof renderPreview === 'function') return renderPreview(getKeys(key), key);
-            return null;
-        },
+        preview: preview,
         startDrag (key, event) {
+            setDragging(true);
             let keys = getKeys(key);
-            setDraggingKeys(keys);
+            draggingKeys.current = keys;
+            draggedKey.current = key;
             if (typeof onDragStart === 'function') onDragStart({
@@ -67,3 +74,3 @@ ...event,
                 ...event,
-                keys: draggingKeys
+                keys: draggingKeys.current
             });
@@ -74,5 +81,7 @@ },
                 ...event,
-                keys: draggingKeys
+                keys: draggingKeys.current
             });
-            setDraggingKeys(new Set());
+            setDragging(false);
+            draggingKeys.current = new Set();
+            draggedKey.current = null;
         }
@@ -79,0 +88,0 @@ };

dist/module.js

@@ -1,2 +0,2 @@
-import {useState as $bBNwq$useState} from "react";
+import {useState as $bBNwq$useState, useRef as $bBNwq$useRef} from "react";
 
@@ -11,4 +11,6 @@ function $parcel$export(e, n, v, s) {
 function $b45bbbaf0c3785df$export$29efd034f1d79f81(props) {
-    let { getItems: getItems , collection: collection , selectionManager: selectionManager , onDragStart: onDragStart , onDragMove: onDragMove , onDragEnd: onDragEnd , renderPreview: renderPreview  } = props;
-    let [draggingKeys, setDraggingKeys] = $bBNwq$useState(new Set());
+    let { getItems: getItems , collection: collection , selectionManager: selectionManager , onDragStart: onDragStart , onDragMove: onDragMove , onDragEnd: onDragEnd , preview: preview  } = props;
+    let [, setDragging] = $bBNwq$useState(false);
+    let draggingKeys = $bBNwq$useRef(new Set());
+    let draggedKey = $bBNwq$useRef(null);
     let getKeys = (key)=>{
@@ -27,4 +29,10 @@ // The clicked item is always added to the drag. If it is selected, then all of the
         selectionManager: selectionManager,
+        get draggedKey () {
+            return draggedKey.current;
+        },
+        get draggingKeys () {
+            return draggingKeys.current;
+        },
         isDragging (key) {
-            return draggingKeys.has(key);
+            return draggingKeys.current.has(key);
         },
@@ -35,9 +43,8 @@ getKeysForDrag: getKeys,
         },
-        renderPreview (key) {
-            if (typeof renderPreview === 'function') return renderPreview(getKeys(key), key);
-            return null;
-        },
+        preview: preview,
         startDrag (key, event) {
+            setDragging(true);
             let keys = getKeys(key);
-            setDraggingKeys(keys);
+            draggingKeys.current = keys;
+            draggedKey.current = key;
             if (typeof onDragStart === 'function') onDragStart({
@@ -51,3 +58,3 @@ ...event,
                 ...event,
-                keys: draggingKeys
+                keys: draggingKeys.current
             });
@@ -58,5 +65,7 @@ },
                 ...event,
-                keys: draggingKeys
+                keys: draggingKeys.current
             });
-            setDraggingKeys(new Set());
+            setDragging(false);
+            draggingKeys.current = new Set();
+            draggedKey.current = null;
         }
@@ -63,0 +72,0 @@ };

dist/types.d.ts

@@ -1,3 +0,3 @@
-import { Collection, DragEndEvent, DraggableCollectionProps, DragItem, DragMoveEvent, DragStartEvent, Node, DragTypes, DropOperation, DroppableCollectionProps, DropTarget } from "@react-types/shared";
-import { Key } from "react";
+import { Collection, DragEndEvent, DraggableCollectionProps, DragItem, DragMoveEvent, DragPreviewRenderer, DragStartEvent, Node, DragTypes, DropOperation, DroppableCollectionProps, DropTarget } from "@react-types/shared";
+import { Key, RefObject } from "react";
 import { MultipleSelectionManager } from "@react-stately/selection";
@@ -11,6 +11,8 @@ export interface DraggableCollectionOptions extends DraggableCollectionProps {
     selectionManager: MultipleSelectionManager;
+    draggedKey: Key | null;
+    draggingKeys: Set<Key>;
     isDragging(key: Key): boolean;
     getKeysForDrag(key: Key): Set<Key>;
     getItems(key: Key): DragItem[];
-    renderPreview(key: Key): JSX.Element;
+    preview?: RefObject<DragPreviewRenderer>;
     startDrag(key: Key, event: DragStartEvent): void;
@@ -17,0 +19,0 @@ moveDrag(event: DragMoveEvent): void;

package.json

 {
   "name": "@react-stately/dnd",
-  "version": "3.0.0-nightly.3263+b4977a1d6",
+  "version": "3.0.0-nightly.3266+dfdf81134",
   "description": "Spectrum UI components in React",
@@ -21,8 +21,8 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-stately/selection": "3.0.0-nightly.1564+b4977a1d6",
-    "@react-stately/utils": "3.0.0-nightly.1564+b4977a1d6",
-    "@react-types/shared": "3.0.0-nightly.1564+b4977a1d6"
+    "@react-stately/selection": "3.0.0-nightly.1567+dfdf81134",
+    "@react-stately/utils": "3.0.0-nightly.1567+dfdf81134",
+    "@react-types/shared": "3.0.0-nightly.1567+dfdf81134"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
@@ -32,3 +32,3 @@ "publishConfig": {
   },
-  "gitHead": "b4977a1d6279337d75d6b8b5c2645ffbb88fdee8"
+  "gitHead": "dfdf81134737beac86a1b7f03d492db14d3466d2"
 }

src/useDraggableCollectionState.ts

@@ -13,4 +13,4 @@ /*
 
-import {Collection, DragEndEvent, DraggableCollectionProps, DragItem, DragMoveEvent, DragStartEvent, Node} from '@react-types/shared';
-import {Key, useState} from 'react';
+import {Collection, DragEndEvent, DraggableCollectionProps, DragItem, DragMoveEvent, DragPreviewRenderer, DragStartEvent, Node} from '@react-types/shared';
+import {Key, RefObject, useRef, useState} from 'react';
 import {MultipleSelectionManager} from '@react-stately/selection';
@@ -26,6 +26,8 @@
   selectionManager: MultipleSelectionManager,
+  draggedKey: Key | null,
+  draggingKeys: Set<Key>,
   isDragging(key: Key): boolean,
   getKeysForDrag(key: Key): Set<Key>,
   getItems(key: Key): DragItem[],
-  renderPreview(key: Key): JSX.Element,
+  preview?: RefObject<DragPreviewRenderer>,
   startDrag(key: Key, event: DragStartEvent): void,
@@ -44,5 +46,7 @@ moveDrag(event: DragMoveEvent): void,
     onDragEnd,
-    renderPreview
+    preview
   } = props;
-  let [draggingKeys, setDraggingKeys] = useState(new Set<Key>());
+  let [, setDragging] = useState(false);
+  let draggingKeys = useRef(new Set<Key>());
+  let draggedKey = useRef(null);
   let getKeys = (key: Key) => {
@@ -65,4 +69,10 @@ // The clicked item is always added to the drag. If it is selected, then all of the
     selectionManager,
+    get draggedKey() {
+      return draggedKey.current;
+    },
+    get draggingKeys() {
+      return draggingKeys.current;
+    },
     isDragging(key) {
-      return draggingKeys.has(key);
+      return draggingKeys.current.has(key);
     },
@@ -73,12 +83,8 @@ getKeysForDrag: getKeys,
     },
-    renderPreview(key) {
-      if (typeof renderPreview === 'function') {
-        return renderPreview(getKeys(key), key);
-      }
-
-      return null;
-    },
+    preview,
     startDrag(key, event) {
+      setDragging(true);
       let keys = getKeys(key);
-      setDraggingKeys(keys);
+      draggingKeys.current = keys;
+      draggedKey.current = key;
       if (typeof onDragStart === 'function') {
@@ -95,3 +101,3 @@ onDragStart({
           ...event,
-          keys: draggingKeys
+          keys: draggingKeys.current
         });
@@ -104,9 +110,11 @@ }
           ...event,
-          keys: draggingKeys
+          keys: draggingKeys.current
         });
       }
 
-      setDraggingKeys(new Set());
+      setDragging(false);
+      draggingKeys.current = new Set();
+      draggedKey.current = null;
     }
   };
 }

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

61696

increased by3.35%

Lines of code

526

increased by5.84%

Dependency changes

• + Addedreact@18.3.1(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedreact@17.0.2(transitive)

• Updated@react-stately/selection@3.0.0-nightly.1567+dfdf81134

• Updated@react-stately/utils@3.0.0-nightly.1567+dfdf81134

• Updated@react-types/shared@3.0.0-nightly.1567+dfdf81134