@react-stately/dnd - npm Package Compare versions

Comparing version 3.0.0-alpha.6 to 3.0.0-alpha.7

dist/main.js

@@ -27,14 +27,14 @@ 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 , allowsDraggingItem: allowsDraggingItem = ()=>true
-      } = props;
-    let [draggingKeys, setDraggingKeys] = $1IdlX$react.useState(new Set());
-    let getKeys = (key1)=>{
+    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)=>{
         // The clicked item is always added to the drag. If it is selected, then all of the
         // other selected items are also dragged. If it is not selected, the only the clicked
         // item is dragged. This matches native macOS behavior.
-        let keys = new Set(selectionManager.isSelected(key1) ? new Set([
+        let keys = new Set(selectionManager.isSelected(key) ? new Set([
             ...selectionManager.selectedKeys
-        ].filter((key)=>allowsDraggingItem ? allowsDraggingItem(key) : true
-        )) : []);
-        keys.add(key1);
+        ]) : []);
+        keys.add(key);
         return keys;
@@ -45,4 +45,10 @@ };
         selectionManager: selectionManager,
+        get draggedKey () {
+            return draggedKey.current;
+        },
+        get draggingKeys () {
+            return draggingKeys.current;
+        },
         isDragging (key) {
-            return draggingKeys.has(key);
+            return draggingKeys.current.has(key);
         },
@@ -53,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({
@@ -69,3 +74,3 @@ ...event,
                 ...event,
-                keys: draggingKeys
+                keys: draggingKeys.current
             });
@@ -76,7 +81,8 @@ },
                 ...event,
-                keys: draggingKeys
+                keys: draggingKeys.current
             });
-            setDraggingKeys(new Set());
-        },
-        isDraggable: (key)=>allowsDraggingItem(key)
+            setDragging(false);
+            draggingKeys.current = new Set();
+            draggedKey.current = null;
+        }
     };
@@ -83,0 +89,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,14 +11,14 @@ 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 , allowsDraggingItem: allowsDraggingItem = ()=>true
-      } = props;
-    let [draggingKeys, setDraggingKeys] = $bBNwq$useState(new Set());
-    let getKeys = (key1)=>{
+    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)=>{
         // The clicked item is always added to the drag. If it is selected, then all of the
         // other selected items are also dragged. If it is not selected, the only the clicked
         // item is dragged. This matches native macOS behavior.
-        let keys = new Set(selectionManager.isSelected(key1) ? new Set([
+        let keys = new Set(selectionManager.isSelected(key) ? new Set([
             ...selectionManager.selectedKeys
-        ].filter((key)=>allowsDraggingItem ? allowsDraggingItem(key) : true
-        )) : []);
-        keys.add(key1);
+        ]) : []);
+        keys.add(key);
         return keys;
@@ -29,4 +29,10 @@ };
         selectionManager: selectionManager,
+        get draggedKey () {
+            return draggedKey.current;
+        },
+        get draggingKeys () {
+            return draggingKeys.current;
+        },
         isDragging (key) {
-            return draggingKeys.has(key);
+            return draggingKeys.current.has(key);
         },
@@ -37,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({
@@ -53,3 +58,3 @@ ...event,
                 ...event,
-                keys: draggingKeys
+                keys: draggingKeys.current
             });
@@ -60,7 +65,8 @@ },
                 ...event,
-                keys: draggingKeys
+                keys: draggingKeys.current
             });
-            setDraggingKeys(new Set());
-        },
-        isDraggable: (key)=>allowsDraggingItem(key)
+            setDragging(false);
+            draggingKeys.current = new Set();
+            draggedKey.current = null;
+        }
     };
@@ -67,0 +73,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,13 +11,14 @@ 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;
     moveDrag(event: DragMoveEvent): void;
     endDrag(event: DragEndEvent): void;
-    isDraggable(key: Key): boolean;
 }
 export function useDraggableCollectionState(props: DraggableCollectionOptions): DraggableCollectionState;
-interface DroppableCollectionStateOptions extends DroppableCollectionProps {
+export interface DroppableCollectionStateOptions extends DroppableCollectionProps {
     collection: Collection<Node<unknown>>;
@@ -24,0 +25,0 @@ selectionManager: MultipleSelectionManager;

package.json

 {
   "name": "@react-stately/dnd",
-  "version": "3.0.0-alpha.6",
+  "version": "3.0.0-alpha.7",
   "description": "Spectrum UI components in React",
@@ -21,8 +21,8 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-stately/selection": "^3.9.4",
-    "@react-stately/utils": "^3.4.1",
-    "@react-types/shared": "^3.12.0"
+    "@react-stately/selection": "^3.10.0",
+    "@react-stately/utils": "^3.5.0",
+    "@react-types/shared": "^3.13.0"
   },
   "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": "6a503b715e0dbbf92038cd7f08b1bcdde4c78e82"
+  "gitHead": "8f921ec5094e7c2b3c301bcb6133372e35a2052b"
 }

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,10 +26,11 @@
   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,
   moveDrag(event: DragMoveEvent): void,
-  endDrag(event: DragEndEvent): void,
-  isDraggable(key: Key): boolean
+  endDrag(event: DragEndEvent): void
 }
@@ -45,6 +46,7 @@
     onDragEnd,
-    renderPreview,
-    allowsDraggingItem = () => true
+    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) => {
@@ -56,3 +58,3 @@ // The clicked item is always added to the drag. If it is selected, then all of the
       selectionManager.isSelected(key)
-        ? new Set([...selectionManager.selectedKeys].filter(key => allowsDraggingItem ? allowsDraggingItem(key) : true))
+        ? new Set([...selectionManager.selectedKeys])
         : []
@@ -68,4 +70,10 @@ );
     selectionManager,
+    get draggedKey() {
+      return draggedKey.current;
+    },
+    get draggingKeys() {
+      return draggingKeys.current;
+    },
     isDragging(key) {
-      return draggingKeys.has(key);
+      return draggingKeys.current.has(key);
     },
@@ -76,12 +84,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') {
@@ -98,3 +102,3 @@ onDragStart({
           ...event,
-          keys: draggingKeys
+          keys: draggingKeys.current
         });
@@ -107,10 +111,11 @@ }
           ...event,
-          keys: draggingKeys
+          keys: draggingKeys.current
         });
       }
 
-      setDraggingKeys(new Set());
-    },
-    isDraggable: (key: Key) => allowsDraggingItem(key)
+      setDragging(false);
+      draggingKeys.current = new Set();
+      draggedKey.current = null;
+    }
   };
 }

src/useDroppableCollectionState.ts

@@ -17,3 +17,3 @@ /*
 
-interface DroppableCollectionStateOptions extends DroppableCollectionProps {
+export interface DroppableCollectionStateOptions extends DroppableCollectionProps {
   collection: Collection<Node<unknown>>,
@@ -20,0 +20,0 @@ selectionManager: MultipleSelectionManager

No alert changes

Improved metrics

Total package byte prevSize

61617

increased by1.18%

Lines of code

526

increased by3.75%

Dependency changes

• + Addedreact@18.3.1(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedreact@17.0.2(transitive)

• Updated@react-stately/selection@^3.10.0

• Updated@react-stately/utils@^3.5.0

• Updated@react-types/shared@^3.13.0