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

The React UI library from HeyCar

import { u as useBreakpoint, _ as __rest, a as __assign } from './useBreakpoint.hook-e540747d.js';
import React, { useState } from 'react';
import cn from 'classnames';
import { v4 } from 'uuid';

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"};

var DefaultLink = function (_a) {
    var link = _a.link, className = _a.className, children = _a.children, rest = __rest(_a, ["link", "className", "children"]);
    return (React.createElement("a", __assign({ className: className, href: link }, rest), children));
};
var Breadcrumbs = function (_a) {
    var breadcrumbs = _a.breadcrumbs, LinkComponent = _a.LinkComponent, dataTestId = _a.dataTestId, className = _a.className;
    // eslint-disable-next-line @typescript-eslint/naming-convention
    var _b = useState(false), showHiddenBreadcrumbs = _b[0], setShowHiddenBreadcrumbs = _b[1];
    var breakpoints = useBreakpoint().breakpoints;
    var isMobile = breakpoints.isMobile;
    if (breadcrumbs.length === 0) {
        return null;
    }
    // Link component
    var Link = (LinkComponent || DefaultLink);
    var firstBreadcrumb = breadcrumbs[0];
    var lastBreadcrumb = breadcrumbs[breadcrumbs.length - 1];
    var hiddenBreadcrumbs = breadcrumbs.slice(1, -1);
    var toggleHiddenBreadcrumbs = function () {
        setShowHiddenBreadcrumbs(!showHiddenBreadcrumbs);
    };
    return (React.createElement("ul", { className: cn(styles.breadcrumbWrapper, className), "data-test-id": dataTestId },
        (firstBreadcrumb === null || firstBreadcrumb === void 0 ? void 0 : 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(function (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 === null || lastBreadcrumb === void 0 ? void 0 : 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 };