@yandex/ui
Version:
Yandex UI components
79 lines (78 loc) • 4.64 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabsMenu = exports.cnTabsMenu = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var classname_1 = require("@bem-react/classname");
var keyboard_1 = require("../lib/keyboard");
var TabsMenu_Tab_1 = require("./Tab/TabsMenu-Tab");
require("./TabsMenu.css");
exports.cnTabsMenu = classname_1.cn('TabsMenu');
/**
* Компонент для создания горизонтального меню.
* @param {ITabsMenuProps} props
*/
var TabsMenu = function (_a) {
var activeTab = _a.activeTab, onChange = _a.onChange, className = _a.className, innerRef = _a.innerRef, tabs = _a.tabs, addonAfter = _a.addonAfter, _b = _a.orientation, orientation = _b === void 0 ? 'vertical' : _b, externalTabsRefs = _a.tabsRefs,
// @ts-ignore
_theme = _a.theme,
// @ts-ignore
_layout = _a.layout, props = tslib_1.__rest(_a, ["activeTab", "onChange", "className", "innerRef", "tabs", "addonAfter", "orientation", "tabsRefs", "theme", "layout"]);
// eslint-disable-next-line react-hooks/rules-of-hooks
var tabsRefs = externalTabsRefs || react_1.useMemo(function () { return tabs.map(function () { return react_1.createRef(); }); }, [tabs]);
var onKeyDown = react_1.useCallback(function (event) {
if (keyboard_1.isKeyCode(event.keyCode, [keyboard_1.Keys.LEFT, keyboard_1.Keys.DOWN, keyboard_1.Keys.RIGHT, keyboard_1.Keys.UP])) {
event.preventDefault();
var nextTabMenuIndex = 0;
var direction = keyboard_1.isKeyCode(event.keyCode, [keyboard_1.Keys.LEFT, keyboard_1.Keys.UP]) ? -1 : 1;
for (var i = 0; i < tabs.length; i++) {
if (tabs[i].id === activeTab) {
nextTabMenuIndex = i;
break;
}
}
for (var i = nextTabMenuIndex; i < tabs.length; i += direction) {
nextTabMenuIndex += direction;
// При необходимости тут можно реализовать цикличный выбор табов,
// при попадании индекса за границу списка,
// выставлять nextTabMenuIndex в противоположное значение.
var isEdge = nextTabMenuIndex >= tabs.length || nextTabMenuIndex < 0;
var isTabNonDisabled = tabs[nextTabMenuIndex] && !tabs[nextTabMenuIndex].disabled;
if (isEdge || isTabNonDisabled) {
break;
}
}
var nextTabMenu = tabs[nextTabMenuIndex];
var nextTabMenuRef = tabsRefs[nextTabMenuIndex];
if (nextTabMenu !== undefined &&
nextTabMenuRef !== undefined &&
nextTabMenuRef.current !== null &&
(nextTabMenu.onClick !== undefined || onChange !== undefined)) {
nextTabMenuRef.current.focus();
// Не совем удачное решение, переключать табики через onClick,
// тут могут возникнуть проблемы с event, т.к. в этом кейсе это KeyboardEvent.
if (nextTabMenu.onClick !== undefined) {
nextTabMenu.onClick(event);
}
if (onChange !== undefined) {
onChange(nextTabMenuIndex.toString());
}
}
}
}, [activeTab, tabsRefs, tabs, onChange]);
return (react_1.default.createElement("ul", tslib_1.__assign({}, props, { "aria-orientation": orientation, className: exports.cnTabsMenu(null, [className]), ref: innerRef, role: "tablist" }),
tabs.map(function (_a, index) {
var id = _a.id, disabled = _a.disabled, tabProps = tslib_1.__rest(_a, ["id", "disabled"]);
return (react_1.default.createElement(TabsMenu_Tab_1.TabsMenuTab, tslib_1.__assign({}, tabProps, { innerRef: tabsRefs[index], first: index === 0, disabled: disabled, onClick: disabled || (!onChange && !tabProps.onClick) ? undefined : function (event) {
if (tabProps.onClick !== undefined) {
tabProps.onClick(event);
}
if (onChange !== undefined) {
onChange(id);
}
}, active: id === activeTab, key: id, onKeyDown: onKeyDown })));
}),
addonAfter));
};
exports.TabsMenu = TabsMenu;
exports.TabsMenu.displayName = exports.cnTabsMenu();