@yandex/ui
Version:
Yandex UI components
39 lines (38 loc) • 2.77 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.withAdaptive = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var core_1 = require("@bem-react/core");
var desktop_1 = require("../../Select/Select.bundle/desktop");
var TabsMenu_1 = require("../TabsMenu");
var TabsMenu_Tab_1 = require("../Tab/TabsMenu-Tab");
var useAdaptiveTabs_1 = require("../TabsMenu.utils/useAdaptiveTabs");
require("./TabsMenu_adaptive@desktop.css");
exports.withAdaptive = core_1.withBemMod(TabsMenu_1.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 : react_1.useRef(null);
// eslint-disable-next-line react-hooks/rules-of-hooks
var tabsRefs = react_1.default.useMemo(function () { return tabs.map(function () { return react_1.default.createRef(); }); }, [tabs]);
var moreRef = react_1.useRef(null);
// Видимость табов
var _c = tslib_1.__read(useAdaptiveTabs_1.useAdaptiveTabs({
tabs: tabs,
wrapperRef: innerRef,
tabsRefs: tabsRefs,
moreRef: moreRef,
}), 2), visibleTabs = _c[0], hiddenTabs = _c[1];
var shouldRenderMoreTabs = Boolean(hiddenTabs.length);
return (react_1.default.createElement(TabsMenu, tslib_1.__assign({}, props, { innerRef: innerRef, tabs: visibleTabs, tabsRefs: tabsRefs, activeTab: activeTab, onChange: onChange, addonAfter: shouldRenderMoreTabs && (react_1.default.createElement(TabsMenu_Tab_1.TabsMenuTab, { className: TabsMenu_1.cnTabsMenu('Tab', { more: true, hiddenIcon: hideMoreIcon }), innerRef: moreRef, active: hiddenTabs.some(function (tab) { return tab.id === activeTab; }), content: react_1.default.createElement(desktop_1.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 }) })) })));
}; });