design-react-kit
Version:
Componenti React per Bootstrap 5
63 lines • 2.81 kB
JavaScript
import classNames from 'classnames';
import React, { useRef } from 'react';
import { Nav } from 'react-bootstrap';
export const TabNav = ({ className, vertical = false, dark = false, card = false, tag = 'ul', testId, ...attributes }) => {
const Tag = tag;
const rootRef = useRef();
const classes = classNames(className, 'nav-tabs', { 'nav-tabs-vertical': vertical }, { 'nav-dark': dark }, { 'nav-tabs-cards': card });
let currentTabIndex = 0;
let activeTabIndex = -1;
// Ugly workaround to keep Bootstrap Italia behaviour
const handleKeyDown = (event, disabled = false) => {
const queriedElements = rootRef.current?.querySelectorAll('.nav-link');
if (queriedElements) {
for (let i = 0; i < queriedElements.length; i++) {
if (queriedElements[i].ariaSelected === 'true') {
activeTabIndex = i;
}
// Disabled elements ignore current focused tab
if (!disabled && document.activeElement === queriedElements[i]) {
currentTabIndex = i;
}
queriedElements[i].ariaSelected = 'false';
}
switch (event.key) {
case 'ArrowLeft':
case 'ArrowUp':
event.stopPropagation();
event.preventDefault();
if (currentTabIndex - 1 < 0) {
currentTabIndex = queriedElements.length;
}
currentTabIndex = (currentTabIndex - 1) % queriedElements.length;
break;
case 'ArrowRight':
case 'ArrowDown':
event.stopPropagation();
event.preventDefault();
currentTabIndex = (currentTabIndex + 1) % queriedElements.length;
break;
case 'Enter':
event.stopPropagation();
event.preventDefault();
queriedElements[currentTabIndex].click();
break;
case 'Tab':
break;
default:
return;
}
if (queriedElements[currentTabIndex].ariaDisabled === 'true') {
handleKeyDown(event, true);
}
else {
queriedElements[currentTabIndex].focus({ preventScroll: true });
setTimeout(() => {
queriedElements[activeTabIndex].ariaSelected = 'true';
}, 300);
}
}
};
return (React.createElement(Nav, { ref: rootRef, as: Tag, className: classes, "data-testid": testId, ...attributes, onKeyDown: handleKeyDown }));
};
//# sourceMappingURL=TabNav.js.map