@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
96 lines (95 loc) • 4.39 kB
JavaScript
import { __assign } from "tslib";
import React, { useRef, useEffect } from 'react';
import clsx from 'clsx';
import styles from './styles.css.js';
import useFocusVisible from '../internal/hooks/focus-visible';
import { KeyCode } from '../internal/keycode';
export function TabHeaderBar(_a) {
var _b;
var onChange = _a.onChange, activeTabId = _a.activeTabId, tabs = _a.tabs, variant = _a.variant, idNamespace = _a.idNamespace, ariaLabel = _a.ariaLabel, ariaLabelledby = _a.ariaLabelledby;
var focusVisible = useFocusVisible();
var classes = clsx((_b = {},
_b[styles['tabs-header']] = true,
_b[styles['tabs-header--variant-default']] = variant === 'default',
_b));
var headerBarRef = useRef(null);
var activeTabHeaderRef = useRef(null);
useEffect(function () {
var _a, _b;
if ((_a = headerBarRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) {
if (document.activeElement !== activeTabHeaderRef.current) {
(_b = activeTabHeaderRef.current) === null || _b === void 0 ? void 0 : _b.focus();
}
}
}, [activeTabId]);
return (React.createElement("ul", { className: classes, role: "tablist", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ref: headerBarRef }, tabs.map(renderTabHeader)));
function renderTabHeader(tab) {
var _a;
var enabledTabsWithCurrentTab = tabs.filter(function (tab) { return !tab.disabled || tab.id === activeTabId; });
var highlightTab = function (enabledTabIndex) {
var tab = enabledTabsWithCurrentTab[enabledTabIndex];
onChange({ activeTabId: tab.id, activeTabHref: tab.href });
};
var moveHighlight = function (event) {
if (event.keyCode !== KeyCode.right && event.keyCode !== KeyCode.left) {
return;
}
var activeIndex = enabledTabsWithCurrentTab.indexOf(tab);
if (event.keyCode === KeyCode.right) {
if (activeIndex + 1 === enabledTabsWithCurrentTab.length) {
highlightTab(0);
}
else {
highlightTab(activeIndex + 1);
}
}
else if (event.keyCode === KeyCode.left) {
if (activeIndex === 0) {
highlightTab(enabledTabsWithCurrentTab.length - 1);
}
else {
highlightTab(activeIndex - 1);
}
}
};
var clickTab = function (event) {
if (tab.disabled) {
event.preventDefault();
return;
}
var specialKey = event.button !== 0 || event.ctrlKey || event.altKey || event.shiftKey || event.metaKey;
if (specialKey && tab.href) {
return;
}
event.preventDefault();
if (tab.id === activeTabId) {
return;
}
onChange({ activeTabId: tab.id, activeTabHref: tab.href });
};
var classes = clsx((_a = {},
_a[styles['tabs-tab-link']] = true,
_a[styles['tabs-tab-active']] = activeTabId === tab.id && !tab.disabled,
_a[styles['tabs-tab-disabled']] = tab.disabled,
_a));
var linkAttributes = __assign(__assign({ className: classes }, focusVisible), { role: 'tab', 'aria-selected': tab.id === activeTabId, 'aria-controls': idNamespace + "-" + tab.id + "-panel" });
if (tab.disabled) {
linkAttributes['aria-disabled'] = 'true';
}
else {
linkAttributes.href = tab.href || '#';
linkAttributes.onClick = clickTab;
}
if (tab.id === activeTabId) {
linkAttributes.ref = activeTabHeaderRef;
linkAttributes.tabIndex = 0;
linkAttributes.onKeyDown = function (event) { return moveHighlight(event); };
}
else {
linkAttributes.tabIndex = -1;
}
return (React.createElement("li", { className: styles['tabs-tab'], role: "presentation", key: tab.id },
React.createElement("a", __assign({}, linkAttributes, { "data-testid": tab.id }),
React.createElement("span", { className: styles['tabs-tab-label'] }, tab.label))));
}
}