42
const DEFAULT_INDENTATION_SIZE = 12;
43
44
export type ItemData = {
45
- numElements: number,
45
isNavigatingWithKeyboard: boolean,
47
- lastScrolledIDRef: {current: number | null, ...},
46
onElementMouseEnter: (id: number) => void,
47
treeFocused: boolean,
48
};
49
52
-type Props = {};
53
-
54
-export default function Tree(props: Props): React.Node {
50
+export default function Tree(): React.Node {
51
const dispatch = useContext(TreeDispatcherContext);
52
const {
53
numElements,
92
);
93
94
// Picking an element in the inspector should put focus into the tree.
99
- // This ensures that keyboard navigation works right after picking a node.
95
+ // If possible, navigation works right after picking a node.
96
+ // NOTE: This is not guaranteed to work, because browser extension panels are hosted inside an iframe.
97
useEffect(() => {
98
function handleStopInspectingHost(didSelectNode: boolean) {
99
if (didSelectNode && focusTargetRef.current !== null) {
109
bridge.removeListener('stopInspectingHost', handleStopInspectingHost);
110
}, [bridge]);
111
115
- // This ref is passed down the context to elements.
116
- // It lets them avoid autoscrolling to the same item many times
117
- // when a selected virtual row goes in and out of the viewport.
118
- const lastScrolledIDRef = useRef<number | null>(null);
119
-
112
// Navigate the tree with up/down arrow keys.
113
useEffect(() => {
114
if (treeRef.current === null) {
206
207
// Focus management.
208
const handleBlur = useCallback(() => setTreeFocused(false), []);
217
- const handleFocus = useCallback(() => {
218
- setTreeFocused(true);
219
-
220
- if (selectedElementIndex === null && numElements > 0) {
221
- dispatch({
222
- type: 'SELECT_ELEMENT_AT_INDEX',
223
- payload: 0,
224
- });
225
- }
226
- }, [dispatch, numElements, selectedElementIndex]);
209
+ const handleFocus = useCallback(() => setTreeFocused(true), []);
210
211
const handleKeyPress = useCallback(
212
(event: $FlowFixMe) => {
277
// This includes the owner context, since it controls a filtered view of the tree.
278
const itemData = useMemo<ItemData>(
279
() => ({
297
- numElements,
280
isNavigatingWithKeyboard,
281
onElementMouseEnter: handleElementMouseEnter,
300
- lastScrolledIDRef,
282
treeFocused,
283
}),
303
- [
304
- numElements,
305
- isNavigatingWithKeyboard,
306
- handleElementMouseEnter,
307
- lastScrolledIDRef,
308
- treeFocused,
309
- ],
284
+ [isNavigatingWithKeyboard, handleElementMouseEnter, treeFocused],
285
);
286
287
const itemKey = useCallback(