Keyboard navigation

Summary: Adding keyboard navigation for bookmarks

Reviewed By: jknoxville

Differential Revision: D17419667

fbshipit-source-id: 851f93d662b6071c3478dca5c9d20b9814e15c1b
This commit is contained in:
Daniel Büchele
2019-09-17 10:15:33 -07:00
committed by Facebook Github Bot
parent 1666cf5ee5
commit bd1fc342c8

View File

@@ -13,6 +13,7 @@ import {readBookmarksFromDB} from '../plugins/navigation/util/indexedDB';
import {PersistedState as NavPluginState} from '../plugins/navigation/types';
import BaseDevice from '../devices/BaseDevice';
import {State as PluginState} from 'src/reducers/pluginStates';
import {platform} from 'os';
type State = {
bookmarks: Array<Bookmark>;
@@ -59,6 +60,14 @@ class LocationsButton extends Component<Props, State> {
retreivingBookmarks: false,
};
componentWillMount() {
document.addEventListener('keydown', this.keyDown);
}
componentWillUnmount() {
document.removeEventListener('keydown', this.keyDown);
}
goToLocation = (location: string) => {
const {selectedDevice} = this.props;
if (selectedDevice != null) {
@@ -66,6 +75,17 @@ class LocationsButton extends Component<Props, State> {
}
};
keyDown = (e: KeyboardEvent) => {
if (
((platform() === 'darwin' && e.metaKey) ||
(platform() !== 'darwin' && e.ctrlKey)) &&
/^\d$/.test(e.key) &&
this.state.bookmarks.length >= parseInt(e.key, 10)
) {
this.goToLocation(this.state.bookmarks[parseInt(e.key, 10) - 1].uri);
}
};
updateBookmarks = () => {
readBookmarksFromDB().then(bookmarksMap => {
const bookmarks: Array<Bookmark> = [];
@@ -92,11 +112,12 @@ class LocationsButton extends Component<Props, State> {
label: 'Bookmarks',
enabled: false,
},
...bookmarks.map(bookmark => {
...bookmarks.map((bookmark, i) => {
return {
click: () => {
this.goToLocation(bookmark.uri);
},
accelerator: i < 9 ? `CmdOrCtrl+${i + 1}` : undefined,
label: shortenText(
bookmark.commonName + ' - ' + bookmark.uri,
100,