2017-01-19 15:58:46 +02:00
|
|
|
const Container = require('@ui/components/container');
|
2017-02-03 14:35:33 +02:00
|
|
|
const Row = require('@ui/components/row');
|
|
|
|
const Column = require('@ui/components/column');
|
2017-02-06 14:05:58 +02:00
|
|
|
const BaseElements = require('@ui/components/base-elements');
|
2017-01-19 15:58:46 +02:00
|
|
|
const PropTypes = require('@root/prop-types');
|
|
|
|
const React = require('react');
|
2017-02-06 16:51:55 +02:00
|
|
|
const ReactRouter = require('react-router-dom');
|
2017-01-19 15:58:46 +02:00
|
|
|
const Styled = require('styled-components');
|
|
|
|
const flatten = require('lodash.flatten');
|
|
|
|
const fns = require('@ui/shared/functions');
|
2017-02-06 14:05:58 +02:00
|
|
|
const constants = require('@ui/shared/constants');
|
2017-01-19 15:58:46 +02:00
|
|
|
|
|
|
|
const {
|
|
|
|
remcalc
|
|
|
|
} = fns;
|
|
|
|
|
2017-02-06 14:05:58 +02:00
|
|
|
const {
|
|
|
|
colors,
|
|
|
|
} = constants;
|
|
|
|
|
|
|
|
const {
|
|
|
|
H1,
|
|
|
|
} = BaseElements;
|
|
|
|
|
2017-01-19 15:58:46 +02:00
|
|
|
const {
|
|
|
|
default: styled
|
|
|
|
} = Styled;
|
|
|
|
|
|
|
|
// Main Contonent Wrapper Styles
|
|
|
|
const StyledDiv = styled.div`
|
|
|
|
border-bottom: solid ${remcalc(1)} #d8d8d8;
|
2017-02-06 14:05:58 +02:00
|
|
|
padding: ${remcalc(30)} 0;
|
|
|
|
margin-bottom: ${remcalc(21)};
|
2017-01-19 15:58:46 +02:00
|
|
|
`;
|
|
|
|
|
|
|
|
const BreadcrumbA = styled.a`
|
2017-02-06 14:05:58 +02:00
|
|
|
text-decoration: none;
|
2017-01-19 15:58:46 +02:00
|
|
|
`;
|
|
|
|
|
|
|
|
const BreadcrumbSpan = styled.span`
|
2017-02-06 14:05:58 +02:00
|
|
|
color: ${colors.base.secondaryDark};
|
2017-01-19 15:58:46 +02:00
|
|
|
`;
|
|
|
|
|
|
|
|
const {
|
|
|
|
Link
|
|
|
|
} = ReactRouter;
|
|
|
|
|
|
|
|
function getNameLink(name) {
|
|
|
|
return flatten(name.map((part, i) => {
|
|
|
|
if (!part.name) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
const link = (
|
|
|
|
<Link key={part.pathname} to={part.pathname}>
|
|
|
|
{
|
|
|
|
({
|
|
|
|
href,
|
|
|
|
onClick,
|
|
|
|
}) =>
|
|
|
|
<BreadcrumbA href={href} onClick={onClick}>
|
|
|
|
{part.name}
|
|
|
|
</BreadcrumbA>
|
|
|
|
}
|
|
|
|
</Link>
|
|
|
|
);
|
|
|
|
|
|
|
|
const key = `${part.pathname}${i}`;
|
|
|
|
const slash = (
|
|
|
|
<BreadcrumbSpan key={key}> / </BreadcrumbSpan>
|
|
|
|
);
|
|
|
|
|
|
|
|
return (i === 0) ? link : [
|
|
|
|
slash,
|
|
|
|
link
|
|
|
|
];
|
|
|
|
}));
|
|
|
|
}
|
|
|
|
|
|
|
|
const Breadcrumb = ({
|
|
|
|
children,
|
|
|
|
links = [],
|
|
|
|
name = []
|
|
|
|
}) => {
|
|
|
|
return (
|
|
|
|
<Container>
|
2017-02-03 14:35:33 +02:00
|
|
|
<Row>
|
|
|
|
<Column xs={12}>
|
|
|
|
<StyledDiv>
|
2017-02-06 14:05:58 +02:00
|
|
|
<H1>
|
2017-02-03 14:35:33 +02:00
|
|
|
{getNameLink(name)}
|
|
|
|
</H1>
|
|
|
|
</StyledDiv>
|
|
|
|
</Column>
|
|
|
|
</Row>
|
2017-01-19 15:58:46 +02:00
|
|
|
</Container>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
Breadcrumb.propTypes = {
|
|
|
|
children: React.PropTypes.node,
|
|
|
|
links: React.PropTypes.arrayOf(PropTypes.link),
|
|
|
|
name: React.PropTypes.arrayOf(PropTypes.link)
|
|
|
|
};
|
|
|
|
|
|
|
|
module.exports = Breadcrumb;
|