Implemented key bindings in the mode menu

This commit is contained in:
jos 2017-07-24 14:35:27 +02:00
parent 91c1fd823f
commit 239b702040
3 changed files with 46 additions and 6 deletions

View File

@ -212,7 +212,6 @@ export default class Menu extends Component {
} }
} }
// TODO: implement the same in ModeMenu
handleKeyDown = (event) => { handleKeyDown = (event) => {
const combo = keyComboFromEvent (event) const combo = keyComboFromEvent (event)
if (combo === 'Up') { if (combo === 'Up') {

View File

@ -12,9 +12,7 @@ export default class ModeButton extends Component {
} }
/** /**
* @param {{modes: string[], mode: string, onChangeMode: function, onError: function}} props * props {{modes: string[], mode: string, onChangeMode: function, onError: function}}
* @param state
* @return {*}
*/ */
render () { render () {
const { props, state} = this const { props, state} = this

View File

@ -1,5 +1,9 @@
import { createElement as h, Component } from 'react' import { createElement as h, Component } from 'react'
import { toCapital } from '../../utils/stringUtils' import { toCapital } from '../../utils/stringUtils'
import { keyComboFromEvent } from '../../utils/keyBindings'
const MENU_CLASS_NAME = 'jsoneditor-actionmenu'
const MODE_MENU_CLASS_NAME = MENU_CLASS_NAME + ' jsoneditor-modemenu'
export default class ModeMenu extends Component { export default class ModeMenu extends Component {
/** /**
@ -26,7 +30,9 @@ export default class ModeMenu extends Component {
}) })
return h('div', { return h('div', {
className: 'jsoneditor-actionmenu jsoneditor-modemenu' className: MODE_MENU_CLASS_NAME,
ref: 'menu',
onKeyDown: this.handleKeyDown
}, items) }, items)
} }
else { else {
@ -36,10 +42,18 @@ export default class ModeMenu extends Component {
componentDidMount () { componentDidMount () {
this.updateRequestCloseListener() this.updateRequestCloseListener()
if (this.props.open) {
this.focusToFirstEntry ()
}
} }
componentDidUpdate () { componentDidUpdate (prevProps) {
this.updateRequestCloseListener() this.updateRequestCloseListener()
if (this.props.open && !prevProps.open) {
this.focusToFirstEntry ()
}
} }
componentWillUnmount () { componentWillUnmount () {
@ -76,5 +90,34 @@ export default class ModeMenu extends Component {
} }
} }
focusToFirstEntry () {
if (this.refs.menu) {
const firstButton = this.refs.menu.querySelector('button')
if (firstButton) {
firstButton.focus()
}
}
}
handleKeyDown = (event) => {
const combo = keyComboFromEvent (event)
if (combo === 'Up') {
event.preventDefault()
if (event.target.previousSibling) {
event.target.previousSibling.focus()
}
}
if (combo === 'Down') {
event.preventDefault()
if (event.target.nextSibling) {
event.target.nextSibling.focus()
}
}
}
handleRequestClose = null handleRequestClose = null
} }