/
Breadcrumbs.js
80 lines (70 loc) · 2.32 KB
/
Breadcrumbs.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import React from 'react';
import { withBreadcrumbs } from 'react-router-breadcrumbs-hoc';
import { flatten, capitalize } from 'lodash';
import chrome from 'ui/chrome';
import { toQuery } from '../../shared/Links/url_helpers';
import { routes } from './routeConfig';
class Breadcrumbs extends React.Component {
updateHeaderBreadcrumbs() {
const { _g = '', kuery = '' } = toQuery(this.props.location.search);
const breadcrumbs = this.props.breadcrumbs.map(({ breadcrumb, match }) => ({
text: breadcrumb,
href: `#${match.url}?_g=${_g}&kuery=${kuery}`
}));
chrome.breadcrumbs.set(breadcrumbs);
}
componentDidMount() {
this.updateHeaderBreadcrumbs();
}
componentDidUpdate() {
this.updateHeaderBreadcrumbs();
}
render() {
const { breadcrumbs, location, showPluginBreadcrumbs } = this.props;
const { _g = '', kuery = '' } = toQuery(location.search);
// If we don't display plugin breadcrumbs, render null, but continue
// to push updates to header.
if (!showPluginBreadcrumbs) {
return null;
}
return (
<div className="kuiLocalBreadcrumbs">
{breadcrumbs.map(({ breadcrumb, path, match }, i) => {
const isLast = i === breadcrumbs.length - 1;
return (
<div
key={path}
className="kuiLocalBreadcrumb"
style={{ lineHeight: '29px' }}
>
{isLast ? (
<span
ref={node => {
if (node && document.title !== node.textContent) {
document.title = capitalize(node.textContent);
}
}}
>
{breadcrumb}
</span>
) : (
<a href={`#${match.url}?_g=${_g}&kuery=${kuery}`}>
{breadcrumb}
</a>
)}
</div>
);
})}
</div>
);
}
}
const flatRoutes = flatten(
routes.map(route => (route.switch ? route.routes : route))
);
export default withBreadcrumbs(flatRoutes)(Breadcrumbs);