glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

split out a separate MapLink component for code reuse

Browse source
This commit is contained in:
Devin Howard 2016-08-02 09:36:48 +08:00 committed by Connor Turland
parent 1774f8c530
commit 2274155801
1 changed files with 52 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
frontend/src/components/Header.js
View file

@ -1,5 +1,19 @@
import React, { Component, PropTypes } from 'react' import React, { Component, PropTypes } from 'react'
const MapLink = props => {
const { show, linkText, href, linkClass, ...otherProps } = props
if (!show) {
return null
}
return (
<a { ...otherProps } href={href} className={linkClass}>
<div className="exploreMapsIcon"></div>
{linkText}
</a>
)
}
class Header extends Component { class Header extends Component {
render = () => { render = () => {
const { signedIn, section } = this.props const { signedIn, section } = this.props
@ -20,35 +34,47 @@ class Header extends Component {
<div className="exploreMapsBar exploreElement"> <div className="exploreMapsBar exploreElement">
<div className="exploreMapsMenu"> <div className="exploreMapsMenu">
<div className="exploreMapsCenter"> <div className="exploreMapsCenter">
{signedIn && explore ? <a href="/explore/mine" className={activeClass("my")}> <MapLink show={signedIn && explore}
<div className="exploreMapsIcon"></div> href="/explore/mine"
My Maps linkClass={activeClass("my")}
</a> : null } text="My Maps"
{signedIn && explore ? <a href="/explore/shared" className={activeClass("shared")}> />
<div className="exploreMapsIcon"></div> <MapLink show={signedIn && explore}
Shared With Me href="/explore/shared"
</a> : null } linkClass={activeClass("shared")}
{explore ? <a href={signedIn ? "/" : "/explore/active"} className={activeClass("active")}> text="Shared With Me"
<div className="exploreMapsIcon"></div> />
Recently Active <MapLink show={explore}
</a> : null } href={signedIn ? "/" : "/explore/active"}
{!signedIn && explore ? <a href="/explore/featured" className={activeClass("featured")}> linkClass={activeClass("active")}
<div className="exploreMapsIcon"></div> text="Recently Active"
Featured Maps />
</a> : null } <MapLink show={!signedIn && explore}
{mapper ? <div className='exploreMapsButton active mapperButton'> href="/explore/featured"
linkClass={activeClass("featured")}
text="Featured Maps"
/>
{mapper ? (
<div className='exploreMapsButton active mapperButton'>
<img className='exploreMapperImage' width='24' height='24' src={this.props.userAvatar} /> <img className='exploreMapperImage' width='24' height='24' src={this.props.userAvatar} />
<div className='exploreMapperName'>{this.props.userName}&rsquo;s Maps</div> <div className='exploreMapperName'>{this.props.userName}&rsquo;s Maps</div>
<div className='clearfloat'></div> <div className='clearfloat'></div>
</div> : null } </div>
{apps ? <a href="/oauth/applications" className={"activeMaps exploreMapsButton" + (section == "registered" ? " active" : "")} data-bypass="true"> ) : null }
<div className="exploreMapsIcon"></div>
Registered Apps <MapLink show={apps}
</a> : null } href="/oauth/applications"
{apps ? <a href="/oauth/authorized_applications" className={"featuredMaps exploreMapsButton" + (section == "authorized" ? " active" : "")} data-bypass="true"> linkClass={"activeMaps exploreMapsButton" + (section == "registered" ? " active" : "")}
<div className="exploreMapsIcon"></div> data-bypass="true"
Authorized Apps text="Registered Apps"
</a> : null } />
<MapLink show={apps}
href="/oauth/applications"
linkClass={"activeMaps exploreMapsButton" + (section == "authorized" ? " active" : "")}
data-bypass="true"
text="Authorized Apps"
/>
</div> </div>
</div> </div>
</div> </div>