Scroll to newly selected component if it's out of view
Jessica committed
Feb 19, 2019 at 12:22 UTC
28ea0a352e5ed617d24962b7b9474b6c04d447a3
1 file changed
+16
-2
src/devtools/views/Element.js
+16
-2
@@ -1,6 +1,13 @@
1
// @flow
2
3
-import React, { Fragment, useCallback, useContext, useMemo } from 'react';
3
+import React, {
4
+ Fragment,
5
+ useCallback,
6
+ useContext,
7
+ useMemo,
8
+ useRef,
9
+ useEffect,
10
+} from 'react';
11
import { ElementTypeClass, ElementTypeFunction } from 'src/devtools/types';
12
import { createRegExp } from './utils';
13
import { TreeContext } from './TreeContext';
@@ -45,6 +52,13 @@ export default function ElementView({ index, style }: Props) {
52
const showDollarR =
53
isSelected && (type === ElementTypeClass || type === ElementTypeFunction);
54
55
+ const component = useRef(null);
56
+ useEffect(() => {
57
+ if (isSelected && component.current !== null) {
58
+ component.current.scrollIntoView();
59
+ }
60
+ }, [isSelected]);
61
+
62
// TODO styles.SelectedElement is 100% width but it doesn't take horizontal overflow into account.
63
64
return (
@@ -57,7 +71,7 @@ export default function ElementView({ index, style }: Props) {
71
paddingLeft: `${(depth - baseDepth) * 0.75 + 0.25}rem`,
72
}}
73
>
60
- <span className={styles.Component}>
74
+ <span ref={component} className={styles.Component}>
75
<DisplayName displayName={displayName} id={id} />
76
{key && (
77
<Fragment>