Added for itemData
Brian Vaughn committed
Apr 8, 2019 at 10:40 UTC
7115408751aa19e51494a3be28d6a394b7321f99
2 files changed
+19
-8
src/devtools/views/Components/Element.js
+3
-3
@@ -13,18 +13,18 @@ import { createRegExp } from '../utils';
13
import { TreeContext } from './TreeContext';
14
import { BridgeContext, StoreContext } from '../context';
15
16
+import type { ItemData } from './Tree';
17
import type { Element } from './types';
18
19
import styles from './Element.css';
20
21
type Props = {
22
+ data: ItemData,
23
index: number,
24
style: Object,
23
- // TODO: I can't get the correct type to work here:
24
- data: Object,
25
};
26
27
-export default function ElementView({ index, style, data }: Props) {
27
+export default function ElementView({ data, index, style }: Props) {
28
const {
29
baseDepth,
30
getElementAtIndex,
src/devtools/views/Components/Tree.js
+16
-5
@@ -13,13 +13,22 @@ import { FixedSizeList } from 'react-window';
13
import { TreeContext } from './TreeContext';
14
import { SettingsContext } from '../Settings/SettingsContext';
15
import { BridgeContext } from '../context';
16
-import Element from './Element';
16
+import ElementView from './Element';
17
import InspectHostNodesToggle from './InspectHostNodesToggle';
18
import OwnersStack from './OwnersStack';
19
import SearchInput from './SearchInput';
20
21
import styles from './Tree.css';
22
23
+import type { Element } from './types';
24
+
25
+export type ItemData = {|
26
+ baseDepth: number,
27
+ numElements: number,
28
+ getElementAtIndex: (index: number) => Element | null,
29
+ lastScrolledIDRef: { current: number | null },
30
+|};
31
+
32
type Props = {||};
33
34
export default function Tree(props: Props) {
@@ -34,7 +43,8 @@ export default function Tree(props: Props) {
43
selectPreviousElementInTree,
44
} = useContext(TreeContext);
45
const bridge = useContext(BridgeContext);
37
- const listRef = useRef<FixedSizeList<any> | null>(null);
46
+ // $FlowFixMe https://github.com/facebook/flow/issues/7341
47
+ const listRef = useRef<FixedSizeList<ItemData> | null>(null);
48
const treeRef = useRef<HTMLDivElement | null>(null);
49
50
const { lineHeight } = useContext(SettingsContext);
@@ -54,7 +64,7 @@ export default function Tree(props: Props) {
64
// This ref is passed down the context to elements.
65
// It lets them avoid autoscrolling to the same item many times
66
// when a selected virtual row goes in and out of the viewport.
57
- const lastScrolledIDRef = useRef(null);
67
+ const lastScrolledIDRef = useRef<number | null>(null);
68
69
// Navigate the tree with up/down arrow keys.
70
useEffect(() => {
@@ -104,7 +114,7 @@ export default function Tree(props: Props) {
114
115
// Let react-window know to re-render any time the underlying tree data changes.
116
// This includes the owner context, since it controls a filtered view of the tree.
107
- const itemData = useMemo(
117
+ const itemData = useMemo<ItemData>(
118
() => ({
119
baseDepth,
120
numElements,
@@ -127,6 +137,7 @@ export default function Tree(props: Props) {
137
<div className={styles.AutoSizerWrapper} onMouseLeave={handleMouseLeave}>
138
<AutoSizer>
139
{({ height, width }) => (
140
+ // $FlowFixMe https://github.com/facebook/flow/issues/7341
141
<FixedSizeList
142
className={styles.List}
143
height={height}
@@ -138,7 +149,7 @@ export default function Tree(props: Props) {
149
ref={listRef}
150
width={width}
151
>
141
- {Element}
152
+ {ElementView}
153
</FixedSizeList>
154
)}
155
</AutoSizer>