45 lines
1019 B
Vue
45 lines
1019 B
Vue
import PropTypes from '../../_util/vue-types'
|
|
import KeyCode from '../../_util/KeyCode'
|
|
|
|
const sentinelStyle = { width: 0, height: 0, overflow: 'hidden' }
|
|
export default {
|
|
name: 'Sentinel',
|
|
props: {
|
|
setRef: PropTypes.func,
|
|
prevElement: PropTypes.any,
|
|
nextElement: PropTypes.any,
|
|
},
|
|
methods: {
|
|
onKeyDown ({ target, which, shiftKey }) {
|
|
const { nextElement, prevElement } = this.$props
|
|
if (which !== KeyCode.TAB || document.activeElement !== target) return
|
|
|
|
// Tab next
|
|
if (!shiftKey && nextElement) {
|
|
nextElement.focus()
|
|
}
|
|
|
|
// Tab prev
|
|
if (shiftKey && prevElement) {
|
|
prevElement.focus()
|
|
}
|
|
},
|
|
},
|
|
render () {
|
|
const { setRef } = this.$props
|
|
|
|
return (
|
|
<div
|
|
tabIndex={0}
|
|
{...{ directives: [{
|
|
name: 'ant-ref',
|
|
value: setRef,
|
|
}] }}
|
|
style={sentinelStyle}
|
|
onKeydown={this.onKeyDown}
|
|
role='presentation'
|
|
>{this.$slots.default}</div>
|
|
)
|
|
},
|
|
}
|