@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
89 lines (88 loc) • 3.44 kB
JavaScript
import { HvTypography } from "../Typography/Typography.js";
import { SvgBase } from "../icons.js";
import { HvIconButton } from "../IconButton/IconButton.js";
import { useClasses } from "./BreadCrumb.styles.js";
import { HvBreadCrumbPage } from "./Page/Page.js";
import { HvPathElement } from "./PathElement/PathElement.js";
import { pathWithSubMenu, removeExtension } from "./utils.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { forwardRef, isValidElement } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/BreadCrumb/BreadCrumb.tsx
var HomeIcon = (props) => /* @__PURE__ */ jsx(SvgBase, {
viewBox: "0 0 256 256",
width: "16",
height: "16",
...props,
children: /* @__PURE__ */ jsx("path", { d: "M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z" })
});
/**
* A breadcrumb is a graphical control element frequently used as a navigational aid.
*/
var HvBreadCrumb = forwardRef(function HvBreadCrumb(props, ref) {
const { classes: classesProp, className, id, listRoute = [], home, maxVisible, url, onClick, component, dropDownMenuProps, separator, ...others } = useDefaultProps("HvBreadCrumb", props);
const { classes, cx } = useClasses(classesProp);
const maxVisibleElem = maxVisible && maxVisible < 2 ? 2 : maxVisible;
let listPath = listRoute.slice();
if (url != null) {
const baseUrl = url.match(/^.*\/\/[^/]+/) ?? "";
const pathNames = url.replace(/^.*\/\/[^/]+/, "").split("/").filter(Boolean);
listPath = pathNames.map((elem, index) => ({
label: decodeURI(elem),
path: `${baseUrl}/${pathNames.slice(0, index + 1).join("/")}`
}));
}
const breadcrumbPath = maxVisibleElem && listPath.length > maxVisibleElem ? pathWithSubMenu(id, listPath, maxVisibleElem, onClick, dropDownMenuProps) : listPath;
return /* @__PURE__ */ jsx("nav", {
ref,
id,
className: cx(classes.root, className),
...others,
children: /* @__PURE__ */ jsxs("ol", {
className: classes.orderedList,
children: [home && /* @__PURE__ */ jsx(HvPathElement, {
classes: {
centerContainer: classes.centerContainer,
separatorContainer: classes.separatorContainer
},
separator,
children: /* @__PURE__ */ jsx(HvIconButton, {
title: home.label,
component: component || "a",
href: home.path,
onClick: (event) => {
event.preventDefault();
onClick?.(event, home);
},
children: /* @__PURE__ */ jsx(HomeIcon, {})
})
}), listPath.map((elem, index) => {
const key = `key_${index}`;
const isLast = index === breadcrumbPath.length - 1;
return /* @__PURE__ */ jsx(HvPathElement, {
classes: {
centerContainer: classes.centerContainer,
separatorContainer: classes.separatorContainer
},
last: isLast,
separator,
children: isValidElement(elem) && elem || isLast && /* @__PURE__ */ jsx(HvTypography, {
className: classes.currentPage,
variant: "caption1",
children: removeExtension(elem.label)
}) || /* @__PURE__ */ jsx(HvBreadCrumbPage, {
elem,
classes: {
a: classes.a,
link: classes.link
},
component,
onClick
})
}, key);
})]
})
});
});
//#endregion
export { HvBreadCrumb };