Left/right arrow toggles node collapsed state as well
Brian Vaughn committed
Apr 9, 2019 at 18:27 UTC
55b3635f2837b7bf1fc2e4f6d9bffcb7259b9d12
1 file changed
+33
-3
src/devtools/views/Components/Tree.js
+33
-3
@@ -12,7 +12,7 @@ import AutoSizer from 'react-virtualized-auto-sizer';
12
import { FixedSizeList } from 'react-window';
13
import { TreeContext } from './TreeContext';
14
import { SettingsContext } from '../Settings/SettingsContext';
15
-import { BridgeContext } from '../context';
15
+import { BridgeContext, StoreContext } from '../context';
16
import ElementView from './Element';
17
import InspectHostNodesToggle from './InspectHostNodesToggle';
18
import OwnersStack from './OwnersStack';
@@ -37,12 +37,14 @@ export default function Tree(props: Props) {
37
getElementAtIndex,
38
numElements,
39
ownerStack,
40
+ selectedElementID,
41
selectedElementIndex,
42
selectNextElementInTree,
43
selectParentElementInTree,
44
selectPreviousElementInTree,
45
} = useContext(TreeContext);
46
const bridge = useContext(BridgeContext);
47
+ const store = useContext(StoreContext);
48
// $FlowFixMe https://github.com/facebook/flow/issues/7341
49
const listRef = useRef<FixedSizeList<ItemData> | null>(null);
50
const treeRef = useRef<HTMLDivElement | null>(null);
@@ -77,6 +79,8 @@ export default function Tree(props: Props) {
79
return;
80
}
81
82
+ let element;
83
+
84
// eslint-disable-next-line default-case
85
switch (event.key) {
86
case 'ArrowDown':
@@ -84,10 +88,34 @@ export default function Tree(props: Props) {
88
event.preventDefault();
89
break;
90
case 'ArrowLeft':
87
- selectParentElementInTree();
91
+ element =
92
+ selectedElementID !== null
93
+ ? store.getElementByID(selectedElementID)
94
+ : null;
95
+ if (
96
+ element !== null &&
97
+ element.children.length > 0 &&
98
+ !element.isCollapsed
99
+ ) {
100
+ store.toggleIsCollapsed(element.id, true);
101
+ } else {
102
+ selectParentElementInTree();
103
+ }
104
break;
105
case 'ArrowRight':
90
- selectNextElementInTree();
106
+ element =
107
+ selectedElementID !== null
108
+ ? store.getElementByID(selectedElementID)
109
+ : null;
110
+ if (
111
+ element !== null &&
112
+ element.children.length > 0 &&
113
+ element.isCollapsed
114
+ ) {
115
+ store.toggleIsCollapsed(element.id, false);
116
+ } else {
117
+ selectNextElementInTree();
118
+ }
119
event.preventDefault();
120
break;
121
case 'ArrowUp':
@@ -107,9 +135,11 @@ export default function Tree(props: Props) {
135
ownerDocument.removeEventListener('keydown', handleKeyDown);
136
};
137
}, [
138
+ selectedElementID,
139
selectNextElementInTree,
140
selectParentElementInTree,
141
selectPreviousElementInTree,
142
+ store,
143
]);
144
145
// Let react-window know to re-render any time the underlying tree data changes.