@gravity-ui/uikit
Version:
Gravity UI base styling and components
119 lines (118 loc) • 6.14 kB
JavaScript
'use client';
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Breadcrumbs = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const React = tslib_1.__importStar(require("react"));
const hooks_1 = require("../../hooks/index.js");
const useDefaultProps_1 = require("../theme/useDefaultProps.js");
const filterDOMProps_1 = require("../utils/filterDOMProps.js");
const BreadcrumbsDropdownMenu_1 = require("./BreadcrumbsDropdownMenu.js");
const BreadcrumbsItem_1 = require("./BreadcrumbsItem.js");
const BreadcrumbsSeparator_1 = require("./BreadcrumbsSeparator.js");
const utils_1 = require("./utils.js");
require("./Breadcrumbs.css");
exports.Breadcrumbs = React.forwardRef(function Breadcrumbs(rawProps, ref) {
const props = (0, useDefaultProps_1.useDefaultProps)('Breadcrumbs', rawProps);
const listRef = React.useRef(null);
const containerRef = (0, hooks_1.useForkRef)(ref, listRef);
const menuRef = React.useRef(null);
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 { calculated, recalculate, visibleCount: visibleItemsCount, } = (0, hooks_1.useCollapseChildren)({
containerRef: listRef,
preservedRefs: [menuRef, endContentRef],
direction: 'start',
minCount: 1,
maxCount: typeof props.maxItems === 'number' && props.maxItems < items.length
? props.maxItems - 1
: undefined,
childSelector: `.${(0, utils_1.b)('item')}`,
getChildWidth: (child) => {
const width = child.getBoundingClientRect().width;
const maxWidth = child.dataset.current ? 200 : Infinity;
return Math.min(maxWidth, width);
},
});
(0, hooks_1.useResizeObserver)({
ref: endContentRef,
onResize: recalculate,
});
const childrenHash = (0, utils_1.getReactNodeHash)(props.children);
const separatorHash = (0, utils_1.getReactNodeHash)(props.separator);
React.useEffect(() => {
recalculate();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [childrenHash, separatorHash, props.itemComponent]);
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 = ((0, jsx_runtime_1.jsx)(BreadcrumbsDropdownMenu_1.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_1.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 ((0, react_1.createElement)(Component, { ...child.props, key: key, ...innerProps }, child.props.children));
}) }));
contents.push(menuItem);
contents.push(...breadcrumbs.slice(-endItems));
}
return ((0, jsx_runtime_1.jsxs)("ol", { ref: containerRef, ...(0, filterDOMProps_1.filterDOMProps)(props, { labelable: true }), "data-qa": props.qa, className: (0, utils_1.b)(null, props.className), style: props.style, children: [contents.map((child, index) => {
const key = child.key ?? index;
const isCurrent = index === contents.length - 1;
const { 'data-breadcrumbs-menu-item': isMenu, ...childProps } = child.props;
let item;
if (isMenu) {
item = child;
}
else {
const Component = props.itemComponent ?? BreadcrumbsItem_1.BreadcrumbsItem;
const handleAction = () => {
if (typeof props.onAction === 'function') {
props.onAction(key);
}
};
const innerProps = {
__current: isCurrent,
__disabled: props.disabled || childProps.disabled,
__onAction: handleAction,
};
item = ((0, react_1.createElement)(Component, { ...childProps, key: key, ...innerProps }, childProps.children));
}
return ((0, jsx_runtime_1.jsxs)("li", { ref: isMenu ? menuRef : undefined, className: (0, utils_1.b)('item', {
calculating: isCurrent && !calculated,
current: isCurrent,
}), "data-current": isCurrent ? isCurrent : undefined, children: [item, isCurrent ? null : (0, jsx_runtime_1.jsx)(BreadcrumbsSeparator_1.BreadcrumbsSeparator, { separator: props.separator })] }, isMenu ? 'menu' : `item-${key}`));
}), props.endContent && ((0, jsx_runtime_1.jsx)("li", { ref: endContentRef, className: (0, utils_1.b)('item'), children: props.endContent }))] }));
});
exports.Breadcrumbs.Item = BreadcrumbsItem_1.BreadcrumbsItem;
exports.Breadcrumbs.displayName = 'Breadcrumbs';
//# sourceMappingURL=Breadcrumbs.js.map