172 lines
4.3 KiB
JavaScript
172 lines
4.3 KiB
JavaScript
import React, { Component } from "react"
|
|
import Radium from "radium"
|
|
import PropTypes from "prop-types"
|
|
import { Icon, Image, Box, Row } from "."
|
|
import { colorInfo, sizeInfo, fontInfo } from "./style"
|
|
|
|
export class Header extends Component {
|
|
static propTypes = {
|
|
history: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
|
|
location: PropTypes.object,
|
|
left: PropTypes.arrayOf(PropTypes.object),
|
|
right: PropTypes.arrayOf(PropTypes.object),
|
|
}
|
|
|
|
render() {
|
|
const { location } = this.props
|
|
|
|
const renderHeaderitem = (item, index) => {
|
|
if (item.image) {
|
|
return (
|
|
<Header.Button
|
|
key={index}
|
|
image={item.image}
|
|
onClick={() => this.props.history.push(item.path)}
|
|
/>
|
|
)
|
|
} else if (item.icon) {
|
|
return (
|
|
<Header.Button
|
|
key={index}
|
|
icon={item.icon}
|
|
onClick={() => this.props.history.push(item.path)}
|
|
/>
|
|
)
|
|
} else if (item.text) {
|
|
return (
|
|
<Header.TextButton
|
|
key={index}
|
|
active={location.pathname.endsWith(item.path)}
|
|
text={item.text}
|
|
onClick={() => this.props.history.push(item.path)}
|
|
/>
|
|
)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Box
|
|
background={colorInfo.headerButtonBackground}
|
|
borderBottom={{
|
|
width: sizeInfo.headerBorderWidth,
|
|
color: colorInfo.headerBorder,
|
|
}}
|
|
style={{ boxSizing: "content" }}>
|
|
<Row fillParent>
|
|
<Row.Item>{this.props.left.map(renderHeaderitem)}</Row.Item>
|
|
<Row.Item grow />
|
|
<Row.Item>{this.props.right.map(renderHeaderitem)}</Row.Item>
|
|
</Row>
|
|
</Box>
|
|
)
|
|
}
|
|
}
|
|
|
|
Header.Button = Radium(
|
|
class HeaderButton extends Component {
|
|
static propTypes = {
|
|
onClick: PropTypes.func,
|
|
icon: PropTypes.string,
|
|
image: PropTypes.string,
|
|
}
|
|
|
|
static style = {
|
|
background: colorInfo.headerButtonBackground,
|
|
verticalAlign: "middle",
|
|
borderWidth: 0,
|
|
padding: "0 0 0 0",
|
|
outline: "none",
|
|
":hover": {
|
|
background: colorInfo.headerButtonBackgroundHover,
|
|
},
|
|
":active": {
|
|
background: colorInfo.headerButtonBackgroundActive,
|
|
},
|
|
}
|
|
|
|
render() {
|
|
// Times two to account for zooming
|
|
const size = sizeInfo.headerHeight - sizeInfo.headerBorderWidth
|
|
const { onClick, icon, image } = this.props
|
|
let content = null
|
|
|
|
if (image) {
|
|
content = (
|
|
<Image
|
|
source={image}
|
|
width={size}
|
|
height={size}
|
|
margin={sizeInfo.headerButtonMargin}
|
|
/>
|
|
)
|
|
} else if (icon) {
|
|
content = (
|
|
<Icon name={icon} size={size} margin={sizeInfo.headerButtonMargin} />
|
|
)
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
style={[{ height: size, width: size }, HeaderButton.style]}
|
|
onClick={onClick}>
|
|
{content}
|
|
</button>
|
|
)
|
|
}
|
|
}
|
|
)
|
|
|
|
Header.TextButton = Radium(
|
|
class HeaderTextButton extends Component {
|
|
static propTypes = {
|
|
active: PropTypes.bool,
|
|
text: PropTypes.string,
|
|
onClick: PropTypes.func,
|
|
}
|
|
|
|
static style = {
|
|
display: "inline-block",
|
|
position: "relative",
|
|
top: 3,
|
|
fontSize: fontInfo.size.header,
|
|
fontFamily: fontInfo.family,
|
|
color: fontInfo.color.normal,
|
|
textAlign: "left",
|
|
outline: "none",
|
|
background: "transparent",
|
|
verticalAlign: "middle",
|
|
borderWidth: 0,
|
|
paddingLeft: sizeInfo.headerSpacing,
|
|
paddingRight: sizeInfo.headerSpacing,
|
|
paddingTop: 0,
|
|
paddingBottom: 0,
|
|
":hover": {
|
|
background: colorInfo.headerButtonBackgroundHover,
|
|
},
|
|
":active": {
|
|
background: colorInfo.headerButtonBackgroundActive,
|
|
},
|
|
}
|
|
|
|
render() {
|
|
const height = sizeInfo.headerHeight - sizeInfo.headerBorderWidth
|
|
const { text, active, onClick } = this.props
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
style={[{ height }, HeaderTextButton.style]}
|
|
onClick={onClick}>
|
|
<div
|
|
style={{
|
|
textDecoration: active ? "underline" : "initial",
|
|
}}>
|
|
{text}
|
|
</div>
|
|
</button>
|
|
)
|
|
}
|
|
}
|
|
)
|