72 lines
1.6 KiB
JavaScript
72 lines
1.6 KiB
JavaScript
import { Component } from 'react'
|
|
import Router from 'next/router'
|
|
import getUrl from '../util/getUrl'
|
|
import { getKey } from '../util/keys'
|
|
import { doLogout } from '../redux/actions/userAct'
|
|
|
|
/* - keyboard shortcuts
|
|
g then h -> navigate home
|
|
g then n -> navigate to new doc
|
|
g then s -> navigate to settings
|
|
g then l -> logout
|
|
e (when on doc page) -> edit doc
|
|
/ (when on home page) -> focus search
|
|
ctrl/cmd + enter -> submit new doc (handled in CodeMirror component)
|
|
*/
|
|
const keyToUrl = {
|
|
72: '/',
|
|
78: '/new',
|
|
83: '/settings',
|
|
}
|
|
const keyToEl = {
|
|
69: { sel: '#edit', func: 'click' },
|
|
191: { sel: '.search', func: 'focus' },
|
|
}
|
|
|
|
class KeyShortcuts extends Component {
|
|
handleDown = e => {
|
|
const tag = e.target.tagName
|
|
if (tag === 'INPUT' || tag === 'TEXTAREA') return
|
|
const key = getKey(e)
|
|
if (this.prevKey === 71) {
|
|
// prev key was g
|
|
switch (key) {
|
|
case 72:
|
|
case 78:
|
|
case 83: {
|
|
const url = keyToUrl[key]
|
|
Router.push(url, getUrl(url))
|
|
break
|
|
}
|
|
case 76: {
|
|
setTimeout(doLogout, 1)
|
|
break
|
|
}
|
|
default:
|
|
break
|
|
}
|
|
}
|
|
switch (key) {
|
|
case 69:
|
|
case 191: {
|
|
const { sel, func } = keyToEl[key]
|
|
const el = document.querySelector(sel)
|
|
if (el) setTimeout(() => el[func](), 1)
|
|
break
|
|
}
|
|
default:
|
|
break
|
|
}
|
|
this.prevKey = key
|
|
}
|
|
componentDidMount() {
|
|
window.addEventListener('keydown', this.handleDown)
|
|
}
|
|
componentWillUnmount() {
|
|
window.removeEventListener('keydown', this.handleDown)
|
|
}
|
|
render = () => null
|
|
}
|
|
|
|
export default KeyShortcuts
|