2017-01-17 18:46:33 +02:00
|
|
|
const React = require('react');
|
|
|
|
const ReactRouter = require('react-router');
|
|
|
|
const ReactRedux = require('react-redux');
|
|
|
|
const Styled = require('styled-components');
|
|
|
|
|
|
|
|
const Avatar = require('@ui/components/avatar');
|
|
|
|
const Container = require('@ui/components/container');
|
|
|
|
const PropTypes = require('@root/prop-types');
|
|
|
|
const selectors = require('@state/selectors');
|
|
|
|
const Ul = require('@ui/components/horizontal-list/ul');
|
|
|
|
const fns = require('@ui/shared/functions');
|
|
|
|
|
|
|
|
const {
|
|
|
|
connect
|
|
|
|
} = ReactRedux;
|
|
|
|
|
|
|
|
const {
|
|
|
|
Link,
|
|
|
|
} = ReactRouter;
|
|
|
|
|
|
|
|
const {
|
|
|
|
default: styled
|
|
|
|
} = Styled;
|
|
|
|
|
|
|
|
const {
|
|
|
|
orgsSelector
|
|
|
|
} = selectors;
|
|
|
|
|
|
|
|
const {
|
|
|
|
remcalc
|
|
|
|
} = fns;
|
|
|
|
|
|
|
|
const StyledNav = styled.div`
|
|
|
|
background-color: #f2f2f2;
|
|
|
|
border-bottom: ${remcalc(1)} solid #d8d8d8;
|
|
|
|
|
|
|
|
& ul {
|
|
|
|
height: ${remcalc(60)};
|
|
|
|
margin: 0px 0px 0px 0px !important;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
// TODO: refactor colours into constants in UI
|
|
|
|
const NavigationLinkContainer = styled.div`
|
2017-01-19 17:08:08 +02:00
|
|
|
position: relative;
|
2017-01-17 18:46:33 +02:00
|
|
|
padding: ${remcalc(11)} ${remcalc(12)} ${remcalc(12)};
|
|
|
|
color: #646464;
|
|
|
|
border: solid ${remcalc(1)} #d8d8d8;
|
|
|
|
height: ${remcalc(24)};
|
|
|
|
background-color: #f2f2f2;
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
background-color: #fafafa;
|
|
|
|
border-bottom: solid ${remcalc(1)} #fafafa;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const OrgImage = styled.div`
|
|
|
|
float: left;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const OrgAvatar = styled(Avatar)`
|
|
|
|
display: block !important;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const OrgName = styled.span`
|
|
|
|
margin-left: ${remcalc(12)};
|
|
|
|
margin-top: ${remcalc(3)};
|
|
|
|
`;
|
|
|
|
|
|
|
|
const NavLi = styled.li`
|
|
|
|
display: inline-block;
|
|
|
|
padding-top: ${remcalc(12)};
|
|
|
|
padding-left: ${remcalc(3)};
|
|
|
|
|
|
|
|
& a {
|
|
|
|
text-decoration: none !important;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2017-01-19 17:08:08 +02:00
|
|
|
const Shadow = styled.div`
|
|
|
|
z-index: 1;
|
|
|
|
position: absolute;
|
|
|
|
height: ${remcalc(5)};
|
|
|
|
width: 100%;
|
|
|
|
left: 0;
|
|
|
|
bottom: 0;
|
|
|
|
background-image:
|
|
|
|
linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.06));
|
|
|
|
`;
|
|
|
|
|
2017-01-17 18:46:33 +02:00
|
|
|
const OrgNavigation = ({
|
|
|
|
orgs = []
|
|
|
|
}) => {
|
|
|
|
const navLinks = orgs.map(({
|
|
|
|
id,
|
|
|
|
name,
|
|
|
|
image,
|
|
|
|
}) => {
|
|
|
|
const to = `/${id}`;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<NavLi key={to}>
|
|
|
|
<Link activeClassName='active' to={to}>
|
|
|
|
{
|
|
|
|
({
|
|
|
|
isActive,
|
|
|
|
href,
|
|
|
|
onClick,
|
|
|
|
}) =>
|
|
|
|
<a href={href} onClick={onClick}>
|
|
|
|
<NavigationLinkContainer className={isActive ? 'active' : ''}>
|
2017-01-19 17:08:08 +02:00
|
|
|
{ !isActive && <Shadow />}
|
2017-01-17 18:46:33 +02:00
|
|
|
<OrgImage>
|
|
|
|
<OrgAvatar
|
|
|
|
height={remcalc(26)}
|
|
|
|
name={name}
|
|
|
|
src={image}
|
|
|
|
width={remcalc(26)}
|
|
|
|
/>
|
|
|
|
</OrgImage>
|
|
|
|
<OrgName>
|
|
|
|
{name}
|
|
|
|
</OrgName>
|
|
|
|
</NavigationLinkContainer>
|
|
|
|
</a>
|
|
|
|
}
|
|
|
|
</Link>
|
|
|
|
</NavLi>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
return (
|
|
|
|
<StyledNav>
|
|
|
|
<Container>
|
|
|
|
<Ul>
|
|
|
|
{navLinks}
|
|
|
|
</Ul>
|
|
|
|
</Container>
|
|
|
|
</StyledNav>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
OrgNavigation.propTypes = {
|
|
|
|
orgs: React.PropTypes.arrayOf(PropTypes.org)
|
|
|
|
};
|
|
|
|
|
|
|
|
const mapStateToProps = (state) => ({
|
|
|
|
orgs: orgsSelector(state)
|
|
|
|
});
|
|
|
|
|
|
|
|
module.exports = connect(mapStateToProps)(OrgNavigation);
|