Double clicking on a name toggles expanded state in KeyValue
Brian Vaughn committed
Apr 10, 2019 at 12:36 UTC
e9f385591e37129f7fb8e43779c994302949184e
1 file changed
+18
-3
src/devtools/views/Components/KeyValue.js
+18
-3
@@ -26,7 +26,12 @@ export default function KeyValue({
26
path = [],
27
value,
28
}: KeyValueProps) {
29
- const [isOpen, setIsOpen] = useState<boolean>(true);
29
+ const [isOpen, setIsOpen] = useState<boolean>(false);
30
+
31
+ const toggleIsOpen = useCallback(
32
+ () => setIsOpen(prevIsOpen => !prevIsOpen),
33
+ []
34
+ );
35
36
const dataType = typeof value;
37
const isSimpleType =
@@ -103,7 +108,12 @@ export default function KeyValue({
108
) : (
109
<div className={styles.ExpandCollapseToggle} />
110
)}
106
- <span className={styles.Name}>{name}</span>
111
+ <span
112
+ className={styles.Name}
113
+ onDoubleClick={hasChildren ? toggleIsOpen : undefined}
114
+ >
115
+ {name}
116
+ </span>
117
<span>Array</span>
118
</div>
119
);
@@ -129,7 +139,12 @@ export default function KeyValue({
139
) : (
140
<div className={styles.ExpandCollapseToggle} />
141
)}
132
- <span className={styles.Name}>{name}</span>
142
+ <span
143
+ className={styles.Name}
144
+ onDoubleClick={hasChildren ? toggleIsOpen : undefined}
145
+ >
146
+ {name}
147
+ </span>
148
<span>Object</span>
149
</div>
150
);