123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150 |
- // @flow
-
- import * as React from "react";
- import {Body, Header, Input, Item, Left, Right, Subtitle, Title} from "native-base";
- import {Platform, StyleSheet, View} from "react-native";
- import {getStatusBarHeight} from "react-native-status-bar-height";
- import Touchable from 'react-native-platform-touchable';
- import ThemeManager from "../utils/ThemeManager";
- import {MaterialCommunityIcons} from "@expo/vector-icons";
- import i18n from "i18n-js";
-
- type Props = {
- hasBackButton: boolean,
- hasSearchField: boolean,
- searchCallback: Function,
- shouldFocusSearchBar: boolean,
- leftButton: React.Node,
- rightButton: React.Node,
- title: string,
- subtitle: string,
- navigation: Object,
- hasTabs: boolean,
- };
-
- /**
- * Custom component defining a header using native base
- *
- * @prop hasBackButton {boolean} Whether to show a back button or a burger menu. Use burger if unspecified
- * @prop rightMenu {React.Node} Element to place at the right of the header. Use nothing if unspecified
- * @prop title {string} This header title
- * @prop navigation {Object} The navigation object from react navigation
- */
- export default class CustomHeader extends React.Component<Props> {
- static defaultProps = {
- hasBackButton: false,
- hasSearchField: false,
- searchCallback: null,
- shouldFocusSearchBar: false,
- title: '',
- subtitle: '',
- leftButton: <View/>,
- rightButton: <View/>,
- hasTabs: false,
- };
-
- onPressBack: Function;
-
- constructor() {
- super();
- this.onPressBack = this.onPressBack.bind(this);
- }
-
- shouldComponentUpdate(nextProps: Props): boolean {
- return nextProps.title !== this.props.title ||
- nextProps.subtitle !== this.props.subtitle ||
- nextProps.hasBackButton !== this.props.hasBackButton ||
- nextProps.hasSearchField !== this.props.hasSearchField ||
- nextProps.shouldFocusSearchBar !== this.props.shouldFocusSearchBar ||
- nextProps.hasTabs !== this.props.hasTabs ||
- nextProps.rightButton !== this.props.rightButton ||
- nextProps.leftButton !== this.props.leftButton;
- }
-
- componentDidMount() {
- if (this.refs.searchInput !== undefined && this.refs.searchInput._root !== undefined && this.props.shouldFocusSearchBar) {
- // does not work if called too early for some reason...
- setTimeout(this.refs.searchInput._root.focus, 500);
- }
- }
-
- getSearchBar() {
- return (
- <Body>
- <Item
- style={{
- width: '100%',
- marginBottom: 7
- }}>
- <MaterialCommunityIcons
- name={'magnify'}
- size={26}
- color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
- <Input
- ref="searchInput"
- placeholder={i18n.t('proximoScreen.search')}
- placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
- onChangeText={this.props.searchCallback}/>
- </Item>
- </Body>
- );
- }
-
- getHeaderTitle() {
- return (
- <Body>
- <Title style={{
- color: ThemeManager.getCurrentThemeVariables().toolbarTextColor
- }}>
- {this.props.title}
- </Title>
- {this.props.subtitle !== '' ? <Subtitle>{this.props.subtitle}</Subtitle> : null}
- </Body>
- );
- }
-
-
- onPressBack() {
- this.props.navigation.goBack();
- }
-
- render() {
- // console.log("rendering CustomHeader");
- let button;
- // Does the app have a back button or a burger menu ?
- if (this.props.hasBackButton)
- button =
- <Touchable
- style={{padding: 6}}
- onPress={this.onPressBack}>
- <MaterialCommunityIcons
- color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
- name={Platform.OS === 'ios' ? 'chevron-left' : "arrow-left"}
- size={26}/>
- </Touchable>;
- else
- button = this.props.leftButton;
-
- return (
- <Header style={styles.header}
- hasTabs={this.props.hasTabs}>
- <Left style={{flex: 0}}>
- {button}
- </Left>
- {this.props.hasSearchField ?
- this.getSearchBar() :
- this.getHeaderTitle()}
- <Right style={{flex: this.props.hasSearchField ? 0 : 1}}>
- {this.props.rightButton}
- </Right>
- </Header>);
- }
- };
-
- // Fix header in status bar on Android
- const styles = StyleSheet.create({
- header: {
- paddingTop: getStatusBarHeight(),
- height: 54 + getStatusBarHeight(),
- },
- });
|