73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
import { Link, useLocation, useParams } from "react-router-dom";
|
|
import { findElementInFlatRoutes } from "../utils/RoutingTableUtils";
|
|
import { capitalizeFirstLetter } from "../utils/StringTransformationUtils";
|
|
|
|
const BREADCRUMB_BAR_CLASSES =
|
|
"text-sm breadcrumbs max-w pl-6 shadow-neutral-focus shadow-sm sticky top-2 z-10 bg-neutral transition-all rounded-md m-2 w-auto";
|
|
|
|
const Breadcrumbs = () => {
|
|
const location = useLocation();
|
|
const pathnames = location.pathname.split("/").filter((x) => x);
|
|
const pathParams = useParams();
|
|
|
|
const hideBreadcrumbBar = (path: string) => {
|
|
// if (Object.keys(pathParams).length !== 0) return true;
|
|
const _route = findElementInFlatRoutes(path);
|
|
return _route?.disableBreadcrumbBar || false;
|
|
};
|
|
|
|
const findRouteNameByPath = (path: string) => {
|
|
const _route = findElementInFlatRoutes(path);
|
|
return _route?.name || path;
|
|
};
|
|
|
|
const renderLinkBreadcrumb = (
|
|
value: string,
|
|
index: number,
|
|
pathnames: string[],
|
|
) => {
|
|
if (value === pathParams.id) return null;
|
|
const to = `/${pathnames.slice(0, index + 1).join("/")}`;
|
|
const routeName = capitalizeFirstLetter(findRouteNameByPath(value));
|
|
return (
|
|
<li key={to} className="text-neutral-content">
|
|
<Link to={to}>{routeName}</Link>
|
|
</li>
|
|
);
|
|
};
|
|
|
|
const renderTextBreadcrumb = (value: string) => {
|
|
if (value === pathParams.id) return null;
|
|
const routeName = capitalizeFirstLetter(findRouteNameByPath(value));
|
|
return (
|
|
<li key={value} className="text-neutral-content">
|
|
{routeName}
|
|
</li>
|
|
);
|
|
};
|
|
|
|
if (hideBreadcrumbBar(location.pathname)) {
|
|
return (
|
|
<div className={BREADCRUMB_BAR_CLASSES}>{pathnames[0].toUpperCase()}</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={BREADCRUMB_BAR_CLASSES}>
|
|
<ul>
|
|
<li className="text-neutral-content">
|
|
<Link to="/">Home</Link>
|
|
</li>
|
|
{pathnames.map((value, index) => {
|
|
const isLast = index === pathnames.length - 1;
|
|
return isLast
|
|
? renderTextBreadcrumb(value)
|
|
: renderLinkBreadcrumb(value, index, pathnames);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Breadcrumbs;
|