@gravity-ui/uikit
Version:
Gravity UI base styling and components
44 lines (43 loc) • 2.47 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabMore = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const icons_1 = require("@gravity-ui/icons");
const Icon_1 = require("../Icon/index.js");
const Menu_1 = require("../lab/Menu/index.js");
const Tab_1 = require("./Tab.js");
const TabContent_1 = require("./TabContent.js");
const constants_1 = require("./constants.js");
const i18n_1 = tslib_1.__importDefault(require("./i18n/index.js"));
const utils_1 = require("./utils.js");
require("./TabMore.css");
const CHEVRON_SIZE = {
m: 16,
l: 16,
xl: 20,
};
exports.TabMore = React.forwardRef(({ children, triggerChild, moreLabel, size = 'm' }, ref) => {
const { t } = i18n_1.default.useTranslation();
const childrenCount = React.Children.count(children);
if (!childrenCount && !triggerChild) {
return null;
}
const triggerChildTabProps = triggerChild
? (0, utils_1.getTabNodePropsFromReactNode)(triggerChild)
: undefined;
const trigger = ((0, jsx_runtime_1.jsxs)("button", { ref: ref, type: "button", className: (0, constants_1.bTab)({ active: Boolean(triggerChildTabProps) }, (0, constants_1.bTabMore)({ lone: Boolean(triggerChildTabProps) })), children: [triggerChildTabProps ? ((0, jsx_runtime_1.jsx)(TabContent_1.TabContent, { ...triggerChildTabProps })) : ((0, jsx_runtime_1.jsx)(TabContent_1.TabContent, { value: "", children: moreLabel === undefined ? t('label_more') : moreLabel })), (0, jsx_runtime_1.jsx)("span", { className: (0, constants_1.bTabMore)('count'), children: childrenCount }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { data: icons_1.ChevronDown, size: CHEVRON_SIZE[size], className: (0, constants_1.bTabMore)('chevron') })] }));
return ((0, jsx_runtime_1.jsx)(Menu_1.Menu, { placement: ['bottom-start', 'bottom-end'], trigger: trigger, children: React.Children.map(children, (child, index) => {
if (!React.isValidElement(child)) {
return null;
}
const tabProps = (0, utils_1.getTabNodePropsFromReactNode)(child);
if (!tabProps) {
return null;
}
return (0, jsx_runtime_1.jsx)(Tab_1.TabInner, { isMenuItem: true, ...tabProps }, child.key ?? index);
}) }));
});
exports.TabMore.displayName = 'TabMore';
//# sourceMappingURL=TabMore.js.map