@yandex/ui
Version:
Yandex UI components
36 lines (35 loc) • 2.5 kB
JavaScript
import { __assign, __read } from "tslib";
import React, { useRef } from 'react';
import { withBemMod } from '@bem-react/core';
import { Select } from '../../Select/Select.bundle/desktop';
import { cnTabsMenu } from '../TabsMenu';
import { TabsMenuTab } from '../Tab/TabsMenu-Tab';
import { useAdaptiveTabs } from '../TabsMenu.utils/useAdaptiveTabs';
import './TabsMenu_adaptive@desktop.css';
export var withAdaptive = withBemMod(cnTabsMenu(), { adaptive: true }, function (TabsMenu) { return function (props) {
var tabs = props.tabs, size = props.size, _a = props.moreText, moreText = _a === void 0 ? 'Ещё' : _a, staticMoreText = props.staticMoreText, hideMoreIcon = props.hideMoreIcon, activeTab = props.activeTab, onChange = props.onChange,
// @ts-ignore
_b = props.theme,
// @ts-ignore
theme = _b === void 0 ? 'normal' : _b;
var innerRef = props.innerRef !== undefined ? props.innerRef : useRef(null);
// eslint-disable-next-line react-hooks/rules-of-hooks
var tabsRefs = React.useMemo(function () { return tabs.map(function () { return React.createRef(); }); }, [tabs]);
var moreRef = useRef(null);
// Видимость табов
var _c = __read(useAdaptiveTabs({
tabs: tabs,
wrapperRef: innerRef,
tabsRefs: tabsRefs,
moreRef: moreRef,
}), 2), visibleTabs = _c[0], hiddenTabs = _c[1];
var shouldRenderMoreTabs = Boolean(hiddenTabs.length);
return (React.createElement(TabsMenu, __assign({}, props, { innerRef: innerRef, tabs: visibleTabs, tabsRefs: tabsRefs, activeTab: activeTab, onChange: onChange, addonAfter: shouldRenderMoreTabs && (React.createElement(TabsMenuTab, { className: cnTabsMenu('Tab', { more: true, hiddenIcon: hideMoreIcon }), innerRef: moreRef, active: hiddenTabs.some(function (tab) { return tab.id === activeTab; }), content: React.createElement(Select, { placeholder: moreText, size: size, theme: theme, value: hiddenTabs.some(function (tab) { return tab.id === activeTab; }) ? activeTab : undefined, onChange: function (event) {
if (onChange !== undefined) {
onChange(event.target.value);
}
}, options: hiddenTabs.map(function (tab) { return ({
value: tab.id || '',
content: tab.content,
}); }), showAlwaysPlaceholder: staticMoreText, iconProps: hideMoreIcon ? { type: undefined, glyph: undefined } : undefined, baseline: true }) })) })));
}; });