ant-design-vue/components/vc-tabs/src/Sentinel.jsx

45 lines
1.0 KiB
Vue
Raw Normal View History

2018-12-14 15:31:02 +00:00
import PropTypes from '../../_util/vue-types'
import KeyCode from '../../_util/KeyCode'
2019-01-09 13:49:33 +00:00
const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', position: 'absolute' }
2018-12-14 15:31:02 +00:00
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>
)
},
}