@kadconsulting/dry
Version:
KAD Reusable Component Library
51 lines • 2.71 kB
JavaScript
// // CLI Version 1.0.1
// Component Version 1.0.0
// TODO-p1: Update the Breadcrumbs component to use the non Next.js version of the usePathname, use client
'use client';
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { forwardRef, useState, useEffect } from 'react';
import { usePathname } from 'next/navigation';
import { Link } from '../@primitives';
import classnames from 'classnames';
import './Breadcrumbs.scss';
const Breadcrumbs = forwardRef(({ id, className, homeRoute, noShowRoutes, paramRoutes, ...props }, ref) => {
const [breadcrumbs, setBreadcrumbs] = useState([]);
const pathFromNextNavigation = usePathname();
const pathname = pathFromNextNavigation ??
(typeof window !== 'undefined' ? window?.location?.pathname : '/');
useEffect(() => {
const titleCase = (str) => {
return str.charAt(0).toUpperCase() + str.slice(1);
};
const createBreadcrumbs = (pathname) => {
const paths = pathname.split('/').filter(Boolean);
const breadcrumbElements = [];
const home = homeRoute ? `${homeRoute}/` : '/';
paths.forEach((path, index) => {
if (noShowRoutes && noShowRoutes.includes(path.toLowerCase())) {
return;
}
let href = '/' + paths.slice(0, index + 1).join('/');
const param = paramRoutes && paramRoutes[path];
if (param) {
href = `${href}?${param}`;
}
const isLast = index === paths.length - 1;
if (index === 0 && path.toLowerCase() !== 'home') {
breadcrumbElements.push(_jsx("li", { className: 'breadcrumbs__item', children: _jsx(Link, { href: home, children: 'Home' }) }, 'home'));
}
breadcrumbElements.push(_jsx("li", { className: 'breadcrumbs__item', children: isLast ? (_jsx("span", { className: 'breadcrumbs__link', children: titleCase(path.replace(/-/g, ' ')).replace(/%20/g, ' ') })) : (_jsx(Link, { href: href, children: _jsx(_Fragment, { children: titleCase(path.replace(/-/g, ' ')).replace(/%20/g, ' ') }) })) }, href));
});
setBreadcrumbs(breadcrumbElements);
};
if (pathname) {
createBreadcrumbs(pathname);
}
}, [pathname]);
if (pathname === '/') {
return null;
}
return (_jsx("nav", { "aria-label": 'breadcrumbs', id: id, ref: ref, className: classnames(className, 'breadcrumbs'), ...props, children: _jsx("ol", { className: 'breadcrumbs', children: breadcrumbs }) }));
});
export default Breadcrumbs;
//# sourceMappingURL=Breadcrumbs.js.map