@nodeject/ui-components
Version:
UI library for non-trivial components
53 lines (52 loc) • 3.99 kB
JavaScript
import cc from 'classcat';
import * as React from 'react';
import { Breadcrumb } from './Breadcrumb';
import { Separator } from './Separator';
import * as styles from './Breadcrumbs.module.less';
export var Breadcrumbs = function (props) {
var _a, _b;
var children = props.children, className = props.className, Link = props.Link, islinkListLoading = props.islinkListLoading, onDropDownClick = props.onDropDownClick, onLinkClick = props.onLinkClick, routes = props.routes, showLastBreadcrumb = props.showLastBreadcrumb;
var breadcrumbsClassName = cc((_a = {},
_a[styles.breadcrumbsWrapper] = true,
_a[className] = Boolean(className),
_a));
var scrollableBreadcrumbsClassName = cc((_b = {
'breadcrumbsScrollable w-full overflow-x-auto overflow-y-hidden flex': true
},
_b[styles.scrollbarHidden] = true,
_b));
var copiedRoutes = routes.slice();
var firstRoute = copiedRoutes.shift();
var restRoutes = copiedRoutes;
return (React.createElement("div", { className: breadcrumbsClassName },
React.createElement("div", { className: "flex items-baseline", key: "breadcrumb" + (firstRoute === null || firstRoute === void 0 ? void 0 : firstRoute.label) + (firstRoute === null || firstRoute === void 0 ? void 0 : firstRoute.url) },
React.createElement(Breadcrumb, { className: "mr-2", label: firstRoute === null || firstRoute === void 0 ? void 0 : firstRoute.label, Link: Link, url: firstRoute === null || firstRoute === void 0 ? void 0 : firstRoute.url, onLinkClick: onLinkClick }),
React.createElement(Separator, { className: "mr-2", id: firstRoute === null || firstRoute === void 0 ? void 0 : firstRoute.id, islinkListLoading: islinkListLoading, path: firstRoute === null || firstRoute === void 0 ? void 0 : firstRoute.url, Link: Link, linkList: firstRoute === null || firstRoute === void 0 ? void 0 : firstRoute.children, onDropDownClick: onDropDownClick, onLinkClick: onLinkClick })),
React.createElement("span", { className: scrollableBreadcrumbsClassName }, restRoutes === null || restRoutes === void 0 ? void 0 : restRoutes.map(function (route, index) {
var _a;
var breadcrumb = (React.createElement(Breadcrumb, { className: "mr-2", label: route === null || route === void 0 ? void 0 : route.label, Link: Link, url: route === null || route === void 0 ? void 0 : route.url, onLinkClick: onLinkClick }));
var separator = (React.createElement(Separator, { className: "mr-2", id: route === null || route === void 0 ? void 0 : route.id, islinkListLoading: islinkListLoading, path: route === null || route === void 0 ? void 0 : route.url, Link: Link, linkList: route === null || route === void 0 ? void 0 : route.children, onDropDownClick: onDropDownClick, onLinkClick: onLinkClick }));
var showLastSeparator = true;
if (((_a = route.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
showLastSeparator = true;
}
else {
showLastSeparator = false;
}
// if (showLastBreadcrumb) {
// showLastSeparator = isLast ? false : true
// } else {
// showLastSeparator = true
// }
var show = showLastBreadcrumb
? true
: index !== restRoutes.length - 1;
return show ? (React.createElement("div", { className: "flex items-baseline", key: "breadcrumb" + (route === null || route === void 0 ? void 0 : route.label) + (route === null || route === void 0 ? void 0 : route.url) },
breadcrumb,
showLastSeparator && separator)) : (React.createElement(React.Fragment, null));
})),
children && React.createElement("span", { className: "ml-3" }, children)));
};
Breadcrumbs.defaultProps = {
showLastBreadcrumb: true
};