@kelvininc/ui-components
Version:
Kelvin UI Components
24 lines (23 loc) • 1.34 kB
JavaScript
import { EComponentSize } from "../../types";
import { FONT_DESCRIPTOR_SIZE_MAP, TAB_ITEM_ICON_WIDTH_PX, TAB_ITEM_NOTIFICATION_DOT_WITH_MARGIN, TAB_ITEM_PADDING_PX, TAB_ITEM_SMALL_ADDED_MARGIN } from "./tab-navigation.config";
export const calculateTabWidths = (tabs, notifications, size) => {
const measuringCanvas = document.createElement('canvas');
const font = FONT_DESCRIPTOR_SIZE_MAP[size];
const ctx = measuringCanvas.getContext('2d');
ctx.font = font;
const values = tabs.reduce((acc, { tabKey, label, icon }, idx) => {
var _a;
const previousTab = idx > 0 ? tabs[idx - 1] : undefined;
const leftOffset = previousTab ? +acc[previousTab.tabKey].width + +acc[previousTab.tabKey].left : 0;
const notificationDotWidth = ((_a = notifications[tabKey]) === null || _a === void 0 ? void 0 : _a.active) ? TAB_ITEM_NOTIFICATION_DOT_WITH_MARGIN : 0;
const iconWidth = icon ? TAB_ITEM_ICON_WIDTH_PX : 0;
const small = size === EComponentSize.Small ? TAB_ITEM_SMALL_ADDED_MARGIN : 0;
const textWidth = Math.ceil(ctx.measureText(label).width);
acc[tabKey] = {
left: `${leftOffset}`,
width: `${textWidth + TAB_ITEM_PADDING_PX + notificationDotWidth + small + iconWidth}`
};
return acc;
}, {});
return values;
};