@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
73 lines (72 loc) • 2.51 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { forwardRef, isValidElement } from "react";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { useClasses } from "./BreadCrumb.styles.js";
import { staticClasses } from "./BreadCrumb.styles.js";
import { pathWithSubMenu, removeExtension } from "./utils.js";
import { HvPathElement } from "./PathElement/PathElement.js";
import { HvBreadCrumbPage } from "./Page/Page.js";
import { HvTypography } from "../Typography/Typography.js";
const HvBreadCrumb = forwardRef(function HvBreadCrumb2(props, ref) {
const {
classes: classesProp,
className,
id,
listRoute = [],
maxVisible,
url,
onClick,
component,
dropDownMenuProps,
...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__ */ jsx("ol", { className: classes.orderedList, children: 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,
children: isValidElement(elem) && elem || isLast && /* @__PURE__ */ jsx(HvTypography, { className: classes.currentPage, variant: "body", children: removeExtension(elem.label) }) || /* @__PURE__ */ jsx(
HvBreadCrumbPage,
{
elem,
classes: {
a: classes.a,
link: classes.link
},
component,
onClick
}
)
},
key
);
}) }) });
});
export {
HvBreadCrumb,
staticClasses as breadCrumbClasses
};