92 lines
2.8 KiB
JavaScript
92 lines
2.8 KiB
JavaScript
import React, { Component, PropTypes } from 'react'
|
|
import _ from 'lodash'
|
|
|
|
const MapLink = props => {
|
|
const { show, text, href, linkClass } = props
|
|
const otherProps = _.omit(props, ['show', 'text', 'href', 'linkClass'])
|
|
if (!show) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<a { ...otherProps } href={href} className={linkClass}>
|
|
<div className="exploreMapsIcon"></div>
|
|
{text}
|
|
</a>
|
|
)
|
|
}
|
|
|
|
class Header extends Component {
|
|
render = () => {
|
|
const { signedIn, section } = this.props
|
|
|
|
const activeClass = (title) => {
|
|
let forClass = 'exploreMapsButton'
|
|
forClass += ' ' + title + 'Maps'
|
|
if (title === 'my' && section === 'mine' ||
|
|
title === section) forClass += ' active'
|
|
return forClass
|
|
}
|
|
|
|
const explore = section === 'mine' || section === 'active' || section === 'starred' || section === 'shared' || section === 'featured'
|
|
const mapper = section === 'mapper'
|
|
|
|
return (
|
|
<div id="exploreMapsHeader">
|
|
<div className="exploreMapsBar exploreElement">
|
|
<div className="exploreMapsMenu">
|
|
<div className="exploreMapsCenter">
|
|
<MapLink show={signedIn && explore}
|
|
href="/explore/mine"
|
|
linkClass={activeClass('my')}
|
|
data-router="true"
|
|
text="My Maps"
|
|
/>
|
|
<MapLink show={signedIn && explore}
|
|
href="/explore/shared"
|
|
linkClass={activeClass('shared')}
|
|
data-router="true"
|
|
text="Shared With Me"
|
|
/>
|
|
<MapLink show={signedIn && explore}
|
|
href="/explore/starred"
|
|
linkClass={activeClass('starred')}
|
|
data-router="true"
|
|
text="Starred By Me"
|
|
/>
|
|
<MapLink show={explore}
|
|
href={signedIn ? '/' : '/explore/active'}
|
|
linkClass={activeClass('active')}
|
|
data-router="true"
|
|
text="All Maps"
|
|
/>
|
|
<MapLink show={!signedIn && explore}
|
|
href="/explore/featured"
|
|
linkClass={activeClass('featured')}
|
|
data-router="true"
|
|
text="Featured Maps"
|
|
/>
|
|
|
|
{mapper ? (
|
|
<div className='exploreMapsButton active mapperButton'>
|
|
<img className='exploreMapperImage' width='24' height='24' src={this.props.user.image} />
|
|
<div className='exploreMapperName'>{this.props.user.name}’s Maps</div>
|
|
<div className='clearfloat'></div>
|
|
</div>
|
|
) : null }
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
Header.propTypes = {
|
|
signedIn: PropTypes.bool.isRequired,
|
|
section: PropTypes.string.isRequired,
|
|
user: PropTypes.object
|
|
}
|
|
|
|
export default Header
|