@gravity-ui/uikit
Version:
Gravity UI base styling and components
40 lines (39 loc) • 2.02 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { ChevronDown } from '@gravity-ui/icons';
import { Icon } from "../Icon/index.js";
import { Menu } from "../lab/Menu/index.js";
import { TabInner } from "./Tab.js";
import { TabContent } from "./TabContent.js";
import { bTab, bTabMore } from "./constants.js";
import i18n from "./i18n/index.js";
import { getTabNodePropsFromReactNode } from "./utils.js";
import "./TabMore.css";
const CHEVRON_SIZE = {
m: 16,
l: 16,
xl: 20,
};
export const TabMore = React.forwardRef(({ children, triggerChild, moreLabel, size = 'm' }, ref) => {
const { t } = i18n.useTranslation();
const childrenCount = React.Children.count(children);
if (!childrenCount && !triggerChild) {
return null;
}
const triggerChildTabProps = triggerChild
? getTabNodePropsFromReactNode(triggerChild)
: undefined;
const trigger = (_jsxs("button", { ref: ref, type: "button", className: bTab({ active: Boolean(triggerChildTabProps) }, bTabMore({ lone: Boolean(triggerChildTabProps) })), children: [triggerChildTabProps ? (_jsx(TabContent, { ...triggerChildTabProps })) : (_jsx(TabContent, { value: "", children: moreLabel === undefined ? t('label_more') : moreLabel })), _jsx("span", { className: bTabMore('count'), children: childrenCount }), _jsx(Icon, { data: ChevronDown, size: CHEVRON_SIZE[size], className: bTabMore('chevron') })] }));
return (_jsx(Menu, { placement: ['bottom-start', 'bottom-end'], trigger: trigger, children: React.Children.map(children, (child, index) => {
if (!React.isValidElement(child)) {
return null;
}
const tabProps = getTabNodePropsFromReactNode(child);
if (!tabProps) {
return null;
}
return _jsx(TabInner, { isMenuItem: true, ...tabProps }, child.key ?? index);
}) }));
});
TabMore.displayName = 'TabMore';
//# sourceMappingURL=TabMore.js.map