DevTools: Switch between "Rendered At" renders using keyboard arrow keys (#18586)
* Add keyboard navigation to fibre info sidebar Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
Chris Dobson committed
Apr 13, 2020 at 21:00 UTC
6c43a62c0ff942329431cee709114b56bcda995f
1 file changed
+39
-2
packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
+39
-2
@@ -8,7 +8,7 @@
8
*/
9
10
import * as React from 'react';
11
-import {Fragment, useContext} from 'react';
11
+import {Fragment, useContext, useEffect, useRef} from 'react';
12
import WhatChanged from './WhatChanged';
13
import {ProfilerContext} from './ProfilerContext';
14
import {formatDuration, formatTime} from './utils';
@@ -31,12 +31,48 @@ export default function SidebarSelectedFiberInfo(_: Props) {
31
selectFiber,
32
} = useContext(ProfilerContext);
33
const {profilingCache} = profilerStore;
34
+ const selectedListItemRef = useRef<HTMLElement | null>(null);
35
36
const commitIndices = profilingCache.getFiberCommits({
37
fiberID: ((selectedFiberID: any): number),
38
rootID: ((rootID: any): number),
39
});
40
41
+ const handleKeyDown = event => {
42
+ switch (event.key) {
43
+ case 'ArrowUp':
44
+ if (selectedCommitIndex !== null) {
45
+ const prevIndex = commitIndices.indexOf(selectedCommitIndex);
46
+ const nextIndex =
47
+ prevIndex > 0 ? prevIndex - 1 : commitIndices.length - 1;
48
+ selectCommitIndex(commitIndices[nextIndex]);
49
+ }
50
+ event.preventDefault();
51
+ break;
52
+ case 'ArrowDown':
53
+ if (selectedCommitIndex !== null) {
54
+ const prevIndex = commitIndices.indexOf(selectedCommitIndex);
55
+ const nextIndex =
56
+ prevIndex < commitIndices.length - 1 ? prevIndex + 1 : 0;
57
+ selectCommitIndex(commitIndices[nextIndex]);
58
+ }
59
+ event.preventDefault();
60
+ break;
61
+ default:
62
+ break;
63
+ }
64
+ };
65
+
66
+ useEffect(() => {
67
+ const selectedElement = selectedListItemRef.current;
68
+ if (
69
+ selectedElement !== null &&
70
+ typeof selectedElement.scrollIntoView === 'function'
71
+ ) {
72
+ selectedElement.scrollIntoView({block: 'nearest', inline: 'nearest'});
73
+ }
74
+ }, [selectedCommitIndex]);
75
+
76
const listItems = [];
77
let i = 0;
78
for (i = 0; i < commitIndices.length; i++) {
@@ -50,6 +86,7 @@ export default function SidebarSelectedFiberInfo(_: Props) {
86
listItems.push(
87
<button
88
key={commitIndex}
89
+ ref={selectedCommitIndex === commitIndex ? selectedListItemRef : null}
90
className={
91
selectedCommitIndex === commitIndex
92
? styles.CurrentCommit
@@ -75,7 +112,7 @@ export default function SidebarSelectedFiberInfo(_: Props) {
112
<ButtonIcon type="close" />
113
</Button>
114
</div>
78
- <div className={styles.Content}>
115
+ <div className={styles.Content} onKeyDown={handleKeyDown} tabIndex={0}>
116
<WhatChanged fiberID={((selectedFiberID: any): number)} />
117
{listItems.length > 0 && (
118
<Fragment>