79 lines
2.0 KiB
JavaScript
79 lines
2.0 KiB
JavaScript
import React, { Component } from "react"
|
|
import { View, Platform, TouchableOpacity, Text } from "react-native"
|
|
import { Icon } from "./Icon"
|
|
import PropTypes from "prop-types"
|
|
import { ifIphoneX } from "react-native-iphone-x-helper"
|
|
|
|
const headerButtonShape = {
|
|
icon: PropTypes.string.isRequired,
|
|
onPress: PropTypes.func,
|
|
}
|
|
|
|
export class Header extends Component {
|
|
static propTypes = {
|
|
title: PropTypes.string.isRequired,
|
|
leftButton: PropTypes.shape(headerButtonShape).isRequired,
|
|
rightButton: PropTypes.shape(headerButtonShape),
|
|
disabled: PropTypes.bool,
|
|
}
|
|
|
|
static defaultProps = {
|
|
rightButton: { icon: "none" },
|
|
leftButton: { icon: "none" },
|
|
visible: true,
|
|
}
|
|
|
|
render() {
|
|
const { title, leftButton, rightButton, disabled, visible } = this.props
|
|
let right = null
|
|
|
|
if (!rightButton) {
|
|
right = <Icon name="" size={24} style={{ marginRight: 15 }} />
|
|
} else if (disabled) {
|
|
right = (
|
|
<Icon
|
|
name={rightButton.icon}
|
|
size={24}
|
|
style={{ marginRight: 15, tintColor: "lightgrey" }}
|
|
/>
|
|
)
|
|
} else {
|
|
right = (
|
|
<TouchableOpacity onPress={rightButton.onPress}>
|
|
<Icon
|
|
name={rightButton.icon}
|
|
size={24}
|
|
style={{ marginRight: 15, tintColor: "grey" }}
|
|
/>
|
|
</TouchableOpacity>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<View
|
|
style={[
|
|
{
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
width: "100%",
|
|
height: 45,
|
|
backgroundColor: "#F4F4F4",
|
|
},
|
|
Platform.OS === "ios" &&
|
|
ifIphoneX({ marginTop: 50 }, { marginTop: 20 }),
|
|
]}>
|
|
<TouchableOpacity onPress={leftButton.onPress}>
|
|
<Icon
|
|
name={leftButton.icon}
|
|
size={24}
|
|
style={{ marginLeft: 15, tintColor: "gray" }}
|
|
/>
|
|
</TouchableOpacity>
|
|
<Text style={{ color: "gray", fontSize: 18 }}>{title}</Text>
|
|
{right}
|
|
</View>
|
|
)
|
|
}
|
|
}
|