From e9f385591e37129f7fb8e43779c994302949184e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 10 Apr 2019 12:36:26 -0700
Subject: [PATCH] Double clicking on a name toggles expanded state in KeyValue

---
 src/devtools/views/Components/KeyValue.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/devtools/views/Components/KeyValue.js b/src/devtools/views/Components/KeyValue.js
index a980ef46d3..ee9d0b965b 100644
--- a/src/devtools/views/Components/KeyValue.js
+++ b/src/devtools/views/Components/KeyValue.js
@@ -26,7 +26,12 @@ export default function KeyValue({
   path = [],
   value,
 }: KeyValueProps) {
-  const [isOpen, setIsOpen] = useState<boolean>(true);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const toggleIsOpen = useCallback(
+    () => setIsOpen(prevIsOpen => !prevIsOpen),
+    []
+  );
 
   const dataType = typeof value;
   const isSimpleType =
@@ -103,7 +108,12 @@ export default function KeyValue({
           ) : (
             <div className={styles.ExpandCollapseToggle} />
           )}
-          <span className={styles.Name}>{name}</span>
+          <span
+            className={styles.Name}
+            onDoubleClick={hasChildren ? toggleIsOpen : undefined}
+          >
+            {name}
+          </span>
           <span>Array</span>
         </div>
       );
@@ -129,7 +139,12 @@ export default function KeyValue({
           ) : (
             <div className={styles.ExpandCollapseToggle} />
           )}
-          <span className={styles.Name}>{name}</span>
+          <span
+            className={styles.Name}
+            onDoubleClick={hasChildren ? toggleIsOpen : undefined}
+          >
+            {name}
+          </span>
           <span>Object</span>
         </div>
       );