1 | import React from 'react';
|
2 | import PropTypes from 'prop-types';
|
3 | import { Breadcrumb, BreadcrumbItem } from 'reactstrap';
|
4 |
|
5 | const Breadcrumbs = ({ crumbs, active, emptyState, children, linkTag: LinkTag, homeUrl, ...rest }) => {
|
6 | const renderBreadCrumb = (crumb) => {
|
7 |
|
8 | let breadCrumbItemChildren = <span>{emptyState}</span>;
|
9 |
|
10 | if (crumb.name && crumb.url) {
|
11 | breadCrumbItemChildren = (
|
12 | <LinkTag aria-label={crumb.name} href={crumb.url}>
|
13 | {crumb.name}
|
14 | </LinkTag>
|
15 | );
|
16 | }
|
17 | return <BreadcrumbItem key={crumb.name + crumb.url}>{breadCrumbItemChildren}</BreadcrumbItem>;
|
18 | };
|
19 |
|
20 | return (
|
21 | <Breadcrumb {...rest}>
|
22 | <BreadcrumbItem>
|
23 | <LinkTag aria-label="Home" href={homeUrl}>
|
24 | Home
|
25 | </LinkTag>
|
26 | </BreadcrumbItem>
|
27 | {crumbs && crumbs.length > 0 && crumbs.map((crumb) => renderBreadCrumb(crumb))}
|
28 | {children}
|
29 | <BreadcrumbItem active>{active || emptyState}</BreadcrumbItem>
|
30 | </Breadcrumb>
|
31 | );
|
32 | };
|
33 |
|
34 | Breadcrumbs.propTypes = {
|
35 | crumbs: PropTypes.arrayOf(
|
36 | PropTypes.shape({
|
37 | name: PropTypes.string,
|
38 | url: PropTypes.string,
|
39 | })
|
40 | ),
|
41 | linkTag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
42 | active: PropTypes.string.isRequired,
|
43 | emptyState: PropTypes.string,
|
44 | children: PropTypes.node,
|
45 | homeUrl: PropTypes.string,
|
46 | };
|
47 |
|
48 | Breadcrumbs.defaultProps = {
|
49 | emptyState: '…',
|
50 | homeUrl: '/public/apps/dashboard',
|
51 | linkTag: 'a',
|
52 | };
|
53 |
|
54 | export default Breadcrumbs;
|