@heycar-uikit/core/breadcrumbs/modern/Breadcrumbs.js

The React UI library from HeyCar

import React, { useState } from 'react';
import cn from 'classnames';
import { v4 } from 'uuid';
import useBreakpoint from './hooks/useBreakpoint.hook.js';

var styles = {"breadcrumbWrapper":"breadcrumbs__breadcrumbWrapper_d65xi","breadcrumbsList":"breadcrumbs__breadcrumbsList_d65xi","threeDots":"breadcrumbs__threeDots_d65xi","breadcrumbLink":"breadcrumbs__breadcrumbLink_d65xi","currentBreadcrumb":"breadcrumbs__currentBreadcrumb_d65xi","disabled":"breadcrumbs__disabled_d65xi"};
 require('./styles/default.css');

const DefaultLink = ({ link, className, children, ...rest }) => (React.createElement("a", { className: className, href: link, ...rest }, children));
const Breadcrumbs = ({ breadcrumbs, LinkComponent, dataTestId, className, }) => {
    // eslint-disable-next-line @typescript-eslint/naming-convention
    const [showHiddenBreadcrumbs, setShowHiddenBreadcrumbs] = useState(false);
    const { breakpoints } = useBreakpoint();
    const isMobile = breakpoints.isMobile;
    if (breadcrumbs.length === 0) {
        return null;
    }
    // Link component
    const Link = (LinkComponent || DefaultLink);
    const firstBreadcrumb = breadcrumbs[0];
    const lastBreadcrumb = breadcrumbs[breadcrumbs.length - 1];
    const hiddenBreadcrumbs = breadcrumbs.slice(1, -1);
    const toggleHiddenBreadcrumbs = () => {
        setShowHiddenBreadcrumbs(!showHiddenBreadcrumbs);
    };
    return (React.createElement("ul", { className: cn(styles.breadcrumbWrapper, className), "data-test-id": dataTestId },
        firstBreadcrumb?.link ? (React.createElement("li", { className: styles.breadcrumbsList, key: `${firstBreadcrumb.title}-${0}` },
            React.createElement(Link, { className: styles.breadcrumbLink, link: firstBreadcrumb.link },
                React.createElement("span", { itemProp: "name" }, firstBreadcrumb.title)))) : (firstBreadcrumb.title && (React.createElement("li", { className: styles.breadcrumbsList, key: firstBreadcrumb.title },
            React.createElement("span", { itemProp: "name" }, firstBreadcrumb.title)))),
        isMobile && hiddenBreadcrumbs.length > 0 && !showHiddenBreadcrumbs ? (React.createElement("li", { className: styles.threeDots, onClick: toggleHiddenBreadcrumbs }, "\u2026")) : (React.createElement(React.Fragment, null, hiddenBreadcrumbs &&
            hiddenBreadcrumbs.map((breadcrumb, i) => {
                if (breadcrumb.link && i + 1 !== breadcrumbs.length) {
                    return (React.createElement("li", { className: styles.breadcrumbsList, key: `${v4()}` },
                        React.createElement(Link, { className: styles.breadcrumbLink, link: breadcrumb.link },
                            React.createElement("span", { itemProp: "name" }, breadcrumb.title))));
                }
                return (React.createElement("li", { className: styles.breadcrumbsList, key: breadcrumb.title },
                    React.createElement("span", { className: styles.disabled, itemProp: "name" }, breadcrumb.title)));
            }))),
        lastBreadcrumb?.link ? (React.createElement("li", { className: styles.currentBreadcrumb, key: `${lastBreadcrumb.title}-${breadcrumbs.length - 1}` },
            React.createElement(Link, { className: cn(styles.currentBreadcrumb, styles.breadcrumbLink), link: lastBreadcrumb.link },
                React.createElement("span", { itemProp: "name" }, lastBreadcrumb.title)))) : (lastBreadcrumb.title && (React.createElement("li", { key: lastBreadcrumb.title },
            React.createElement("span", { className: styles.currentBreadcrumb, itemProp: "name" }, lastBreadcrumb.title))))));
};

export { Breadcrumbs as default };