joyent-portal/frontend/src/components/breadcrumb/index.js

83 lines
1.8 KiB
JavaScript
Raw Normal View History

import React from 'react';
import styled from 'styled-components';
import flatten from 'lodash.flatten';
import Container from '@ui/components/container';
import Row from '@ui/components/row';
import Column from '@ui/components/column';
import { H2 } from '@ui/components/base-elements';
import NavLink from '@ui/components/nav-link';
import PropTypes from '@root/prop-types';
import { remcalc, unitcalc } from '@ui/shared/functions';
import { colors } from '@ui/shared/constants';
2017-01-19 15:58:46 +02:00
// Main Contonent Wrapper Styles
const StyledDiv = styled.div`
border-bottom: solid ${remcalc(1)} ${colors.base.grey};
padding: ${unitcalc(4.5)} 0 ${unitcalc(4.5)} 0;
2017-02-22 19:31:25 +02:00
margin-bottom: ${remcalc(18)};
2017-01-19 15:58:46 +02:00
`;
2017-02-07 00:44:50 +02:00
const BreadcrumbA = styled(NavLink)`
text-decoration: none;
2017-01-19 15:58:46 +02:00
`;
const BreadcrumbSpan = styled.span`
2017-02-22 17:18:18 +02:00
color: ${colors.base.text};
2017-01-19 15:58:46 +02:00
`;
function getNameLink(name) {
return flatten(name.map((part, i) => {
if (!part.name) {
return null;
}
const link = (
2017-02-07 00:44:50 +02:00
<BreadcrumbA key={part.pathname} to={part.pathname}>
{part.name}
</BreadcrumbA>
2017-01-19 15:58:46 +02:00
);
const key = `${part.pathname}${i}`;
const slash = (
<BreadcrumbSpan key={key}> / </BreadcrumbSpan>
);
return (i === 0) ? link : [
slash,
link
];
}));
}
const StyledH2 = styled(H2)`
color: ${colors.base.primary};
2017-02-20 17:18:41 +02:00
margin: 0;
`;
2017-01-19 15:58:46 +02:00
const Breadcrumb = ({
children,
links = [],
name = []
}) => (
<Container>
<Row>
<Column xs={12}>
<StyledDiv>
<StyledH2>
{getNameLink(name)}
</StyledH2>
</StyledDiv>
</Column>
</Row>
</Container>
);
2017-01-19 15:58:46 +02:00
Breadcrumb.propTypes = {
children: React.PropTypes.node,
links: React.PropTypes.arrayOf(PropTypes.link),
name: React.PropTypes.arrayOf(PropTypes.link)
};
export default Breadcrumb;