[DevTools] feat[Tree]: set initial scroll offset when inspected element index is set (#31968)
Stacked on https://github.com/facebook/react/pull/31956. See [commit on top](https://github.com/facebook/react/pull/31968/commits/ecb8df4175342cde7669cd4a6b008b3782eb5b61). Use `initialScrollOffset` prop for `FixedSizeList` from `react-window`. This happens when user selects an element in built-in Elements panel in DevTools, and then opens Components panel from React DevTools - elements will be synced and corresponding React Element will be pre-selected, we just have to scroll to its position now.
Ruslan Lesiutin committed
Jan 9, 2025 at 18:21 UTC
f2813ee33d37e20029c6698f34946d7f08eb7a95
1 file changed
+20
packages/react-devtools-shared/src/devtools/views/Components/Tree.js
+20
@@ -47,6 +47,22 @@ export type ItemData = {
47
treeFocused: boolean,
48
};
49
50
+function calculateInitialScrollOffset(
51
+ inspectedElementIndex: number | null,
52
+ elementHeight: number,
53
+): number | void {
54
+ if (inspectedElementIndex === null) {
55
+ return undefined;
56
+ }
57
+
58
+ if (inspectedElementIndex < 3) {
59
+ return undefined;
60
+ }
61
+
62
+ // Make 3 elements on top of the inspected one visible
63
+ return (inspectedElementIndex - 3) * elementHeight;
64
+}
65
+
66
export default function Tree(): React.Node {
67
const dispatch = useContext(TreeDispatcherContext);
68
const {
@@ -401,6 +417,10 @@ export default function Tree(): React.Node {
417
<FixedSizeList
418
className={styles.List}
419
height={height}
420
+ initialScrollOffset={calculateInitialScrollOffset(
421
+ inspectedElementIndex,
422
+ lineHeight,
423
+ )}
424
innerElementType={InnerElementType}
425
itemCount={numElements}
426
itemData={itemData}