@gravity-ui/uikit
Version:
Gravity UI base styling and components
178 lines (177 loc) • 7.28 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { createElement as _createElement } from "react";
import * as React from 'react';
import { useForkRef, useResizeObserver } from "../../hooks/index.js";
import { filterDOMProps } from "../utils/filterDOMProps.js";
import { BreadcrumbsDropdownMenu } from "./BreadcrumbsDropdownMenu.js";
import { BreadcrumbsItem } from "./BreadcrumbsItem.js";
import { BreadcrumbsSeparator } from "./BreadcrumbsSeparator.js";
import { b } from "./utils.js";
import "./Breadcrumbs.css";
export const Breadcrumbs = React.forwardRef(function Breadcrumbs(props, ref) {
const listRef = React.useRef(null);
const containerRef = useForkRef(ref, listRef);
const endContentRef = React.useRef(null);
const items = [];
React.Children.forEach(props.children, (child, index) => {
if (React.isValidElement(child)) {
if (child.key === undefined || child.key === null) {
child = React.cloneElement(child, { key: index });
}
items.push(child);
}
});
const [visibleItemsCount, setVisibleItemsCount] = React.useState(items.length);
const [calculated, setCalculated] = React.useState(false);
const recalculate = (visibleItems) => {
const list = listRef.current;
if (!list) {
return;
}
const listItems = Array.from(list.children);
const endElement = endContentRef.current;
if (endElement) {
listItems.pop();
}
if (listItems.length === 0) {
setCalculated(true);
return;
}
const containerWidth = list.offsetWidth - (endElement?.offsetWidth ?? 0);
let newVisibleItemsCount = 0;
let calculatedWidth = 0;
let maxItems = props.maxItems || Infinity;
let rootWidth = 0;
if (props.showRoot) {
const item = listItems.shift();
if (item) {
rootWidth = item.scrollWidth;
calculatedWidth += rootWidth;
}
newVisibleItemsCount++;
}
const hasMenu = items.length > visibleItems;
if (hasMenu) {
const item = listItems.shift();
if (item) {
calculatedWidth += item.offsetWidth;
}
maxItems--;
}
if (props.showRoot && calculatedWidth >= containerWidth) {
calculatedWidth -= rootWidth;
newVisibleItemsCount--;
}
const lastItem = listItems.pop();
if (lastItem) {
calculatedWidth += Math.min(lastItem.offsetWidth, 200);
if (calculatedWidth < containerWidth) {
newVisibleItemsCount++;
}
}
for (let i = listItems.length - 1; i >= 0; i--) {
const item = listItems[i];
calculatedWidth += item.offsetWidth;
if (calculatedWidth >= containerWidth) {
break;
}
newVisibleItemsCount++;
}
newVisibleItemsCount = Math.max(Math.min(maxItems, newVisibleItemsCount), 1);
if (newVisibleItemsCount === visibleItemsCount) {
setCalculated(true);
}
else {
setVisibleItemsCount(newVisibleItemsCount);
}
};
const handleResize = React.useCallback(() => {
setCalculated(false);
setVisibleItemsCount(items.length);
}, [items.length]);
useResizeObserver({
ref: listRef,
onResize: handleResize,
});
useResizeObserver({
ref: props.endContent ? endContentRef : undefined,
onResize: handleResize,
});
const lastChildren = React.useRef(null);
React.useLayoutEffect(() => {
if (calculated && props.children !== lastChildren.current) {
lastChildren.current = props.children;
setCalculated(false);
setVisibleItemsCount(items.length);
}
}, [calculated, items.length, props.children]);
React.useLayoutEffect(() => {
if (!calculated) {
recalculate(visibleItemsCount);
}
});
let contents = items;
if (items.length > visibleItemsCount) {
contents = [];
const breadcrumbs = [...items];
let endItems = visibleItemsCount;
if (props.showRoot && visibleItemsCount > 1) {
const rootItem = breadcrumbs.shift();
if (rootItem) {
contents.push(rootItem);
}
endItems--;
}
const hiddenItems = breadcrumbs.slice(0, -endItems);
const menuItem = (_jsx(BreadcrumbsDropdownMenu, { disabled: props.disabled, popupPlacement: props.popupPlacement, popupStyle: props.popupStyle, "data-breadcrumbs-menu-item": true, children: hiddenItems.map((child, index) => {
const Component = props.itemComponent ?? BreadcrumbsItem;
const key = child.key ?? index;
const handleAction = () => {
if (typeof props.onAction === 'function') {
props.onAction(key);
}
};
const innerProps = {
__index: index,
__disabled: props.disabled || child.props.disabled,
__onAction: handleAction,
};
return (_createElement(Component, { ...child.props, key: key, ...innerProps }, child.props.children));
}) }));
contents.push(menuItem);
contents.push(...breadcrumbs.slice(-endItems));
}
const lastIndex = contents.length - 1;
const breadcrumbsItems = contents.map((child, index) => {
const isCurrent = index === lastIndex;
const key = child.key ?? index;
const { 'data-breadcrumbs-menu-item': isMenu, ...childProps } = child.props;
let item;
if (isMenu) {
item = child;
}
else {
const Component = props.itemComponent ?? BreadcrumbsItem;
const handleAction = () => {
if (typeof props.onAction === 'function') {
props.onAction(key);
}
};
const innerProps = {
__current: isCurrent,
__disabled: props.disabled || childProps.disabled,
__onAction: handleAction,
};
item = (_createElement(Component, { ...childProps, key: key, ...innerProps }, childProps.children));
}
return (_jsxs("li", { className: b('item', { calculating: isCurrent && !calculated, current: isCurrent }), children: [item, isCurrent ? null : _jsx(BreadcrumbsSeparator, { separator: props.separator })] }, isMenu ? 'menu' : `item-${key}`));
});
if (props.endContent) {
breadcrumbsItems.push(_jsx("li", { ref: endContentRef, className: b('item'), children: props.endContent }, "end-content"));
}
return (_jsx("ol", { ref: containerRef, ...filterDOMProps(props, { labelable: true }), "data-qa": props.qa, className: b(null, props.className), style: props.style, children: breadcrumbsItems }));
});
Breadcrumbs.Item = BreadcrumbsItem;
Breadcrumbs.displayName = 'Breadcrumbs';
//# sourceMappingURL=Breadcrumbs.js.map