Only render a single context menu for the entire tree

Summary: There is no reason to have a context menu rendered by react for each item in the tree, its pretty wastefull. It also means less props drilled to the tree node

Reviewed By: lblasa

Differential Revision: D41872778

fbshipit-source-id: b13491a310c03334d7f3056207f5de23d20c3e61

desktop/plugins/public/ui-debugger/components/Tree2.tsx

@@ -83,6 +83,12 @@ export function Tree2({
     <HighlightProvider
       text={searchTerm}
       highlightColor={theme.searchHighlightBackground.yellow}>
+      <ContextMenu
+        focusedNode={focusedNode}
+        hoveredNode={hoveredNode}
+        nodes={nodes}
+        onContextMenuOpen={instance.uiActions.onContextMenuOpen}
+        onFocusNode={instance.uiActions.onFocusNode}>
         <div
           onMouseLeave={() => {
             if (isContextMenuOpen === false) {
@@ -96,18 +102,16 @@ export function Tree2({
               treeNode={treeNode}
               selectedNode={selectedNode}
               hoveredNode={hoveredNode}
-            focusedNode={focusedNode}
               isUsingKBToScroll={isUsingKBToScroll}
               isContextMenuOpen={isContextMenuOpen}
               onSelectNode={onSelectNode}
               onExpandNode={instance.uiActions.onExpandNode}
               onCollapseNode={instance.uiActions.onCollapseNode}
-            onContextMenuOpen={instance.uiActions.onContextMenuOpen}
-            onFocusNode={instance.uiActions.onFocusNode}
               onHoverNode={instance.uiActions.onHoverNode}
             />
           ))}
         </div>
+      </ContextMenu>
     </HighlightProvider>
   );
 }
@@ -138,11 +142,8 @@ function TreeItemContainer({
   treeNode,
   selectedNode,
   hoveredNode,
-  focusedNode,
   isUsingKBToScroll,
   isContextMenuOpen,
-  onFocusNode,
-  onContextMenuOpen,
   onSelectNode,
   onExpandNode,
   onCollapseNode,
@@ -152,32 +153,20 @@ function TreeItemContainer({
   treeNode: TreeNode;
   selectedNode?: Id;
   hoveredNode?: Id;
-  focusedNode?: Id;
   isUsingKBToScroll: RefObject<boolean>;
   isContextMenuOpen: boolean;
-  onFocusNode: (id?: Id) => void;
-  onContextMenuOpen: (open: boolean) => void;
   onSelectNode: (node?: Id) => void;
   onExpandNode: (node: Id) => void;
   onCollapseNode: (node: Id) => void;
   onHoverNode: (node: Id) => void;
 }) {
   return (
-    <ContextMenu
-      onContextMenuOpen={onContextMenuOpen}
-      onFocusNode={onFocusNode}
-      focusedNode={focusedNode}
-      hoveredNode={hoveredNode}
-      node={treeNode}>
     <TreeItem
       ref={innerRef}
       isSelected={treeNode.id === selectedNode}
       isHovered={hoveredNode === treeNode.id}
       onMouseEnter={() => {
-          if (
-            isUsingKBToScroll.current === false &&
-            isContextMenuOpen == false
-          ) {
+        if (isUsingKBToScroll.current === false && isContextMenuOpen == false) {
           onHoverNode(treeNode.id);
         }
       }}
@@ -200,7 +189,6 @@ function TreeItemContainer({
       <HighlightedText text={treeNode.name} />
       <InlineAttributes attributes={treeNode.inlineAttributes} />
     </TreeItem>
-    </ContextMenu>
   );
 }
 
@@ -291,13 +279,13 @@ const DecorationImage = styled.img({
 const renderDepthOffset = 4;
 
 const ContextMenu: React.FC<{
-  node: TreeNode;
+  nodes: Map<Id, UINode>;
   hoveredNode?: Id;
   focusedNode?: Id;
   onFocusNode: (id?: Id) => void;
   onContextMenuOpen: (open: boolean) => void;
 }> = ({
-  node,
+  nodes,
   hoveredNode,
   children,
   focusedNode,
@@ -311,12 +299,12 @@ const ContextMenu: React.FC<{
       }}
       overlay={() => (
         <Menu>
-          {focusedNode !== hoveredNode && (
+          {hoveredNode != null && focusedNode !== hoveredNode && (
             <UIDebuggerMenuItem
               key="focus"
-              text={`Focus ${node.name}`}
+              text={`Focus ${nodes.get(hoveredNode)?.name}`}
               onClick={() => {
-                onFocusNode(node.id);
+                onFocusNode(hoveredNode);
               }}
             />
           )}