devtools: Display shortcuts for prev/next search result (#20470)
Sebastian Silbermann committed
Dec 21, 2020 at 03:48 UTC
6cbb9394d1474e3a728b49dc7f3a11d61a421ce3
2 files changed
+13
-24
packages/react-devtools-shared/src/devtools/views/Button.js
+2
-2
@@ -16,14 +16,14 @@ import tooltipStyles from './Tooltip.css';
16
type Props = {
17
children: React$Node,
18
className?: string,
19
- title?: string,
19
+ title: React$Node,
20
...
21
};
22
23
export default function Button({
24
children,
25
className = '',
26
- title = '',
26
+ title,
27
...rest
28
}: Props) {
29
let button = (
packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js
+11
-22
@@ -34,25 +34,6 @@ export default function SearchInput(props: Props) {
34
[dispatch],
35
);
36
37
- const handleKeyDown = useCallback(
38
- event => {
39
- // For convenience, let up/down arrow keys change Tree selection.
40
- switch (event.key) {
41
- case 'ArrowDown':
42
- dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'});
43
- event.preventDefault();
44
- break;
45
- case 'ArrowUp':
46
- dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'});
47
- event.preventDefault();
48
- break;
49
- default:
50
- break;
51
- }
52
- },
53
- [dispatch],
54
- );
55
-
37
const handleInputKeyPress = useCallback(
38
({key, shiftKey}) => {
39
if (key === 'Enter') {
@@ -98,7 +79,6 @@ export default function SearchInput(props: Props) {
79
<input
80
className={styles.Input}
81
onChange={handleTextChange}
101
- onKeyDown={handleKeyDown}
82
onKeyPress={handleInputKeyPress}
83
placeholder="Search (text or /regex/)"
84
ref={inputRef}
@@ -115,14 +95,23 @@ export default function SearchInput(props: Props) {
95
className={styles.IconButton}
96
disabled={!searchText}
97
onClick={() => dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'})}
118
- title="Scroll to previous search result">
98
+ title={
99
+ <React.Fragment>
100
+ Scroll to previous search result (<kbd>Shift</kbd> +{' '}
101
+ <kbd>Enter</kbd>)
102
+ </React.Fragment>
103
+ }>
104
<ButtonIcon type="up" />
105
</Button>
106
<Button
107
className={styles.IconButton}
108
disabled={!searchText}
109
onClick={() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'})}
125
- title="Scroll to next search result">
110
+ title={
111
+ <React.Fragment>
112
+ Scroll to next search result (<kbd>Enter</kbd>)
113
+ </React.Fragment>
114
+ }>
115
<ButtonIcon type="down" />
116
</Button>
117
<Button