Left and right arrows only traverse parents
Dan Abramov committed
Apr 10, 2019 at 18:49 UTC
6420f11d65f3c8aea5f352b36f5d78b101856b5d
2 files changed
+42
-18
src/devtools/views/Components/Tree.js
+13
-16
@@ -41,6 +41,7 @@ export default function Tree(props: Props) {
41
ownerStack,
42
selectedElementID,
43
selectedElementIndex,
44
+ selectChildElementInTree,
45
selectElementAtIndex,
46
selectNextElementInTree,
47
selectOwner,
@@ -113,14 +114,12 @@ export default function Tree(props: Props) {
114
selectedElementID !== null
115
? store.getElementByID(selectedElementID)
116
: null;
116
- if (
117
- element !== null &&
118
- element.children.length > 0 &&
119
- !element.isCollapsed
120
- ) {
121
- store.toggleIsCollapsed(element.id, true);
122
- } else {
123
- selectParentElementInTree();
117
+ if (element !== null) {
118
+ if (element.children.length > 0 && !element.isCollapsed) {
119
+ store.toggleIsCollapsed(element.id, true);
120
+ } else {
121
+ selectParentElementInTree();
122
+ }
123
}
124
break;
125
case 'ArrowRight':
@@ -129,14 +128,12 @@ export default function Tree(props: Props) {
128
selectedElementID !== null
129
? store.getElementByID(selectedElementID)
130
: null;
132
- if (
133
- element !== null &&
134
- element.children.length > 0 &&
135
- element.isCollapsed
136
- ) {
137
- store.toggleIsCollapsed(element.id, false);
138
- } else {
139
- selectNextElementInTree();
131
+ if (element !== null) {
132
+ if (element.children.length > 0 && element.isCollapsed) {
133
+ store.toggleIsCollapsed(element.id, false);
134
+ } else {
135
+ selectChildElementInTree();
136
+ }
137
}
138
break;
139
case 'ArrowUp':
src/devtools/views/Components/TreeContext.js
+29
-2
@@ -40,6 +40,7 @@ type Context = {|
40
selectedElementID: number | null,
41
selectedElementIndex: number | null,
42
getElementAtIndex(index: number): Element | null,
43
+ selectChildElementInTree(): void,
44
selectElementAtIndex(index: number): void,
45
selectElementByID(id: number | null): void,
46
selectNextElementInTree(): void,
@@ -91,6 +92,7 @@ type Action = {|
92
| 'GO_TO_PREVIOUS_SEARCH_RESULT'
93
| 'HANDLE_STORE_MUTATION'
94
| 'RESET_OWNER_STACK'
95
+ | 'SELECT_CHILD_ELEMENT_IN_TREE'
96
| 'SELECT_ELEMENT_AT_INDEX'
97
| 'SELECT_ELEMENT_BY_ID'
98
| 'SELECT_NEXT_ELEMENT_IN_TREE'
@@ -127,6 +129,20 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
129
selectedElementIndex = null;
130
}
131
break;
132
+ case 'SELECT_CHILD_ELEMENT_IN_TREE':
133
+ if (selectedElementIndex !== null) {
134
+ const selectedElement = store.getElementAtIndex(
135
+ ((selectedElementIndex: any): number)
136
+ );
137
+ if (selectedElement !== null && selectedElement.children.length > 0) {
138
+ const firstChildID = selectedElement.children[0];
139
+ const firstChildIndex = store.getIndexOfElementID(firstChildID);
140
+ if (firstChildIndex !== null) {
141
+ selectedElementIndex = firstChildIndex;
142
+ }
143
+ }
144
+ }
145
+ break;
146
case 'SELECT_ELEMENT_AT_INDEX':
147
selectedElementIndex = ((payload: any): number | null);
148
break;
@@ -157,8 +173,12 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
173
((selectedElementIndex: any): number)
174
);
175
if (selectedElement !== null && selectedElement.parentID !== null) {
160
- selectedElementIndex =
161
- store.getIndexOfElementID(selectedElement.parentID) || 0;
176
+ const parentIndex = store.getIndexOfElementID(
177
+ selectedElement.parentID
178
+ );
179
+ if (parentIndex !== null) {
180
+ selectedElementIndex = parentIndex;
181
+ }
182
}
183
}
184
break;
@@ -568,6 +588,7 @@ function TreeContextController({ children, viewElementSource }: Props) {
588
case 'RESET_OWNER_STACK':
589
case 'SELECT_ELEMENT_AT_INDEX':
590
case 'SELECT_ELEMENT_BY_ID':
591
+ case 'SELECT_CHILD_ELEMENT_IN_TREE':
592
case 'SELECT_NEXT_ELEMENT_IN_TREE':
593
case 'SELECT_PARENT_ELEMENT_IN_TREE':
594
case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':
@@ -636,6 +657,10 @@ function TreeContextController({ children, viewElementSource }: Props) {
657
() => dispatch({ type: 'RESET_OWNER_STACK' }),
658
[dispatch]
659
);
660
+ const selectChildElementInTree = useCallback(
661
+ () => dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }),
662
+ [dispatch]
663
+ );
664
const selectNextElementInTree = useCallback(
665
() => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }),
666
[dispatch]
@@ -661,6 +686,7 @@ function TreeContextController({ children, viewElementSource }: Props) {
686
selectedElementID: state.selectedElementID,
687
selectedElementIndex: state.selectedElementIndex,
688
getElementAtIndex,
689
+ selectChildElementInTree,
690
selectElementByID,
691
selectElementAtIndex,
692
selectNextElementInTree,
@@ -689,6 +715,7 @@ function TreeContextController({ children, viewElementSource }: Props) {
715
goToNextSearchResult,
716
goToPreviousSearchResult,
717
resetOwnerStack,
718
+ selectChildElementInTree,
719
selectElementAtIndex,
720
selectElementByID,
721
selectNextElementInTree,