Moving Breadcrumb to a component

This commit is contained in:
Tom Gallacher 2017-01-19 13:58:46 +00:00
parent bf635b3596
commit 87e3e38510
2 changed files with 109 additions and 63 deletions

View File

@ -0,0 +1,100 @@
const Container = require('@ui/components/container');
const PropTypes = require('@root/prop-types');
const React = require('react');
const ReactRouter = require('react-router');
const Styled = require('styled-components');
const flatten = require('lodash.flatten');
const fns = require('@ui/shared/functions');
const {
remcalc
} = fns;
const {
default: styled
} = Styled;
// Main Contonent Wrapper Styles
const StyledDiv = styled.div`
background-color: #FAFAFA;
height: ${remcalc(91)};
border-bottom: solid ${remcalc(1)} #d8d8d8;
`;
const BreadcrumbA = styled.a`
text-decoration: none !important;
`;
const BreadcrumbSpan = styled.span`
color: #646464;
`;
const H1 = styled.h1`
margin: 0 0 0 0;
padding-top: ${remcalc(31)};
padding-bottom: ${remcalc(31)};
`;
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>
<StyledDiv>
<H1
style={{
fontSize: remcalc(24)
}}
>
{getNameLink(name)}
</H1>
</StyledDiv>
</Container>
);
};
Breadcrumb.propTypes = {
children: React.PropTypes.node,
links: React.PropTypes.arrayOf(PropTypes.link),
name: React.PropTypes.arrayOf(PropTypes.link)
};
module.exports = Breadcrumb;

View File

@ -1,30 +1,11 @@
const flatten = require('lodash.flatten');
const React = require('react');
const ReactIntl = require('react-intl');
const Styled = require('styled-components');
const ReactRouter = require('react-router');
const H1 = require('@ui/components/base-elements').H1;
const Li = require('@ui/components/horizontal-list/li');
const PropTypes = require('@root/prop-types');
const Ul = require('@ui/components/horizontal-list/ul');
const fns = require('@ui/shared/functions');
const {
default: styled
} = Styled;
const BreadcrumbA = styled.a`
text-decoration: none !important;
`;
const BreadcrumbSpan = styled.span`
color: #646464;
`;
const {
remcalc
} = fns;
const Breadcrumb = require('@components/breadcrumb');
const {
FormattedMessage
@ -34,11 +15,12 @@ const {
Link
} = ReactRouter;
const Section = ({
children,
links = [],
name = []
}) => {
const Section = (props) => {
const {
children,
links = [],
} = props;
const navLinks = links.map((link) => (
<Li key={link.name}>
<Link activeClassName='active' to={link.pathname}>
@ -47,44 +29,9 @@ const Section = ({
</Li>
));
const nameLinks = 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 slash = (
<BreadcrumbSpan key={`${part.pathname}${i}`}> / </BreadcrumbSpan>
);
return (i === 0) ? link : [
slash,
link
];
}));
return (
<div>
<H1
style={{
fontSize: remcalc(24)
}}
>
{nameLinks}
</H1>
<Breadcrumb {...props} />
<Ul>
{navLinks}
</Ul>
@ -95,8 +42,7 @@ const Section = ({
Section.propTypes = {
children: React.PropTypes.node,
links: React.PropTypes.arrayOf(PropTypes.link),
name: React.PropTypes.arrayOf(PropTypes.link)
links: React.PropTypes.arrayOf(PropTypes.link)
};
module.exports = Section;