useTreeData - add getDescendantKeys method which is used to determine if a parent node can be dropped into its children

Author: rob-clayburn

packages/@react-spectrum/tree/stories/TreeView.stories.tsx

@@ -262,6 +262,12 @@ export const TreeExampleDynamicDragNDrop = (
         return;
       }
 
+      // you shouldn't be able to drop a parent into a child
+      const dragNode = list.getItem(k);
+      const childTreeKeys = list.getDescendantKeys(dragNode);
+      if (childTreeKeys.includes(e.target.key)) {
+        return null;
+      }
       // node list index...
       let i = 0;
       if (parent) {

packages/@react-stately/data/src/useTreeData.ts

@@ -51,6 +51,7 @@ export interface TreeData<T extends object> {
    */
   getItem(key: Key): TreeNode<T> | undefined,
 
+  getDescendantKeys(node?: TreeNode<T>): Key[],
   /**
    * Inserts an item into a parent node as a child.
    * @param parentKey - The key of the parent item to insert into. `null` for the root.
@@ -250,10 +251,29 @@ export function useTreeData<T extends object>(options: TreeOptions<T>): TreeData
     }
   }
 
+  function getDescendantKeys(node?: TreeNode<T>): Key[] {
+    let descendantKeys: Key[] = [];
+    if (!node) {
+      return descendantKeys;
+    }
+    function recurse(currentNode: TreeNode<T>) {
+      if (currentNode.children) {
+        for (let child of currentNode.children) {
+          descendantKeys.push(child.key);
+          recurse(child);
+        }
+      }
+    }
+  
+    recurse(node);
+    return descendantKeys;
+  }
+  
   return {
     items,
     selectedKeys,
     setSelectedKeys,
+    getDescendantKeys,
     getItem(key: Key) {
       return nodeMap.get(key);
     },

packages/@react-stately/data/test/useTreeData.test.js

@@ -745,4 +745,58 @@ describe('useTreeData', function () {
     expect(result.current.items[1].key).toEqual('Emily');
     expect(result.current.items.length).toEqual(2);
   });
+
+  it('gets the decentants of a node', function () {
+    const initialItems = [...initial, {name: 'Emily'}, {name: 'Eli'}];
+    let {result} = renderHook(() =>
+      useTreeData({initialItems, getChildren, getKey})
+    );
+    let decendants; 
+    act(() => {
+      const top = result.current.getItem('David');
+      decendants = result.current.getDescendantKeys(top);
+    });
+    expect(decendants).toEqual(['John', 'Suzie', 'Sam', 'Stacy', 'Brad', 'Jane']);
+  });
+
+
+  it('gets the decentants of a child node', function () {
+    const initialItems = [...initial, {name: 'Emily'}, {name: 'Eli'}];
+    let {result} = renderHook(() =>
+      useTreeData({initialItems, getChildren, getKey})
+    );
+    let descendants; 
+    act(() => {
+      const top = result.current.getItem('Sam');
+      descendants = result.current.getDescendantKeys(top);
+    });
+    expect(descendants).toEqual(['Stacy', 'Brad']);
+  });
+
+  it('returns an empty array when getting the decendant keys for a leaf node', function () {
+    const initialItems = [...initial, {name: 'Emily'}, {name: 'Eli'}];
+    let {result} = renderHook(() =>
+      useTreeData({initialItems, getChildren, getKey})
+    );
+    let descendants; 
+    act(() => {
+      const top = result.current.getItem('Eli');
+      descendants = result.current.getDescendantKeys(top);
+    });
+    expect(descendants).toEqual([]);
+  });
+
+  it('returns an empty array when an undefined key is supplied', function () {
+    const initialItems = [...initial, {name: 'Emily'}, {name: 'Eli'}];
+    let {result} = renderHook(() =>
+      useTreeData({initialItems, getChildren, getKey})
+    );
+    let descendants; 
+    act(() => {
+      descendants = result.current.getDescendantKeys(undefined);
+    });
+    expect(descendants).toEqual([]);
+  });
+
+
 });