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

45 lines
1.0 KiB
Vue
Raw Normal View History

2019-01-12 03:33:27 +00:00
import PropTypes from '../../_util/vue-types';
import KeyCode from '../../_util/KeyCode';
2020-06-23 09:34:41 +00:00
import { getSlot } from '../../_util/props-util';
2018-12-14 15:31:02 +00:00
2019-01-12 03:33:27 +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: {
2019-01-12 03:33:27 +00:00
onKeyDown({ target, which, shiftKey }) {
const { nextElement, prevElement } = this.$props;
if (which !== KeyCode.TAB || document.activeElement !== target) return;
2018-12-14 15:31:02 +00:00
// Tab next
if (!shiftKey && nextElement) {
2019-01-12 03:33:27 +00:00
nextElement.focus();
2018-12-14 15:31:02 +00:00
}
// Tab prev
if (shiftKey && prevElement) {
2019-01-12 03:33:27 +00:00
prevElement.focus();
2018-12-14 15:31:02 +00:00
}
},
},
2019-01-12 03:33:27 +00:00
render() {
const { setRef } = this.$props;
2018-12-14 15:31:02 +00:00
return (
<div
tabindex={0}
2020-06-24 15:45:36 +00:00
ref={setRef}
2018-12-14 15:31:02 +00:00
style={sentinelStyle}
onKeydown={this.onKeyDown}
2019-01-12 03:33:27 +00:00
role="presentation"
>
2020-06-23 09:34:41 +00:00
{getSlot(this)}
2019-01-12 03:33:27 +00:00
</div>
);
2018-12-14 15:31:02 +00:00
},
2019-01-12 03:33:27 +00:00
};