2019-06-29 13:37:21 +02:00
|
|
|
// @flow
|
|
|
|
|
|
|
|
|
|
import * as React from "react";
|
2020-01-31 16:51:43 +01:00
|
|
|
import {Body, Header, Input, Item, Left, Right, Title} from "native-base";
|
2019-08-07 10:24:35 +02:00
|
|
|
import {Platform, StyleSheet, View} from "react-native";
|
2019-06-25 22:20:24 +02:00
|
|
|
import {getStatusBarHeight} from "react-native-status-bar-height";
|
2019-06-27 10:17:51 +02:00
|
|
|
import Touchable from 'react-native-platform-touchable';
|
2019-08-05 14:05:51 +02:00
|
|
|
import ThemeManager from "../utils/ThemeManager";
|
|
|
|
|
import CustomMaterialIcon from "./CustomMaterialIcon";
|
2019-11-15 15:58:05 +01:00
|
|
|
import i18n from "i18n-js";
|
2020-02-04 10:50:51 +01:00
|
|
|
import { NavigationActions } from 'react-navigation';
|
2019-06-27 10:17:51 +02:00
|
|
|
|
2019-06-29 13:37:21 +02:00
|
|
|
type Props = {
|
2019-08-07 10:24:35 +02:00
|
|
|
hasBackButton: boolean,
|
2019-11-15 15:58:05 +01:00
|
|
|
hasSearchField: boolean,
|
|
|
|
|
searchCallback: Function,
|
2019-11-15 18:41:25 +01:00
|
|
|
shouldFocusSearchBar: boolean,
|
2019-08-07 10:24:35 +02:00
|
|
|
leftButton: React.Node,
|
2019-08-07 11:10:17 +02:00
|
|
|
rightButton: React.Node,
|
2019-06-29 13:37:21 +02:00
|
|
|
title: string,
|
|
|
|
|
navigation: Object,
|
2019-07-28 12:40:35 +02:00
|
|
|
hasTabs: boolean,
|
2019-06-29 13:37:21 +02:00
|
|
|
};
|
|
|
|
|
|
2019-06-29 15:43:57 +02:00
|
|
|
/**
|
|
|
|
|
* Custom component defining a header using native base
|
|
|
|
|
*
|
2019-08-07 10:24:35 +02:00
|
|
|
* @prop hasBackButton {boolean} Whether to show a back button or a burger menu. Use burger if unspecified
|
2019-06-29 15:43:57 +02:00
|
|
|
* @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
|
|
|
|
|
*/
|
2019-06-29 13:37:21 +02:00
|
|
|
export default class CustomHeader extends React.Component<Props> {
|
|
|
|
|
|
|
|
|
|
static defaultProps = {
|
2019-08-07 10:24:35 +02:00
|
|
|
hasBackButton: false,
|
2019-11-15 15:58:05 +01:00
|
|
|
hasSearchField: false,
|
|
|
|
|
searchCallback: () => null,
|
2019-11-15 18:41:25 +01:00
|
|
|
shouldFocusSearchBar: false,
|
2019-11-15 15:58:05 +01:00
|
|
|
title: '',
|
2019-08-07 10:24:35 +02:00
|
|
|
leftButton: <View/>,
|
2019-08-07 11:10:17 +02:00
|
|
|
rightButton: <View/>,
|
2019-07-28 12:40:35 +02:00
|
|
|
hasTabs: false,
|
2019-06-29 13:37:21 +02:00
|
|
|
};
|
2019-06-25 22:20:24 +02:00
|
|
|
|
2019-11-15 18:41:25 +01:00
|
|
|
componentDidMount() {
|
2019-11-15 19:38:43 +01:00
|
|
|
if (this.refs.searchInput !== undefined && this.refs.searchInput._root !== undefined && this.props.shouldFocusSearchBar) {
|
2019-11-15 19:29:25 +01:00
|
|
|
// does not work if called to early for some reason...
|
2019-11-15 19:38:43 +01:00
|
|
|
setTimeout(() => this.refs.searchInput._root.focus(), 500);
|
2019-11-15 19:29:25 +01:00
|
|
|
}
|
2019-11-15 18:41:25 +01:00
|
|
|
}
|
|
|
|
|
|
2019-11-15 15:58:05 +01:00
|
|
|
getSearchBar() {
|
|
|
|
|
return (
|
|
|
|
|
<Item
|
|
|
|
|
style={{
|
|
|
|
|
width: '100%',
|
|
|
|
|
marginBottom: 7
|
|
|
|
|
}}>
|
2019-11-15 16:44:10 +01:00
|
|
|
<CustomMaterialIcon
|
|
|
|
|
icon={'magnify'}
|
|
|
|
|
color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
|
|
|
|
|
<Input
|
2019-11-15 19:29:25 +01:00
|
|
|
ref="searchInput"
|
2019-11-15 16:44:10 +01:00
|
|
|
placeholder={i18n.t('proximoScreen.search')}
|
|
|
|
|
placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
|
|
|
|
|
onChangeText={(text) => this.props.searchCallback(text)}/>
|
2019-11-15 15:58:05 +01:00
|
|
|
</Item>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2019-06-25 22:20:24 +02:00
|
|
|
render() {
|
2019-06-27 10:17:51 +02:00
|
|
|
let button;
|
2019-08-06 13:28:11 +02:00
|
|
|
// Does the app have a back button or a burger menu ?
|
2019-08-07 10:24:35 +02:00
|
|
|
if (this.props.hasBackButton)
|
2019-06-27 10:17:51 +02:00
|
|
|
button =
|
|
|
|
|
<Touchable
|
|
|
|
|
style={{padding: 6}}
|
2020-02-04 10:50:51 +01:00
|
|
|
onPress={() => {
|
|
|
|
|
const backAction = NavigationActions.back();
|
|
|
|
|
this.props.navigation.dispatch(backAction);
|
|
|
|
|
}}>
|
2019-08-05 14:05:51 +02:00
|
|
|
<CustomMaterialIcon
|
|
|
|
|
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
|
2020-02-04 10:50:51 +01:00
|
|
|
icon={Platform.OS === 'chevron-left' ? "" : "arrow-left"}/>
|
2019-06-27 10:17:51 +02:00
|
|
|
</Touchable>;
|
|
|
|
|
else
|
2019-08-07 10:24:35 +02:00
|
|
|
button = this.props.leftButton;
|
2019-06-27 10:17:51 +02:00
|
|
|
|
2019-06-25 22:20:24 +02:00
|
|
|
return (
|
2019-09-17 10:37:52 +02:00
|
|
|
<Header style={styles.header}
|
|
|
|
|
hasTabs={this.props.hasTabs}>
|
2019-11-15 16:44:10 +01:00
|
|
|
<Left style={{flex: 0}}>
|
2019-06-27 10:17:51 +02:00
|
|
|
{button}
|
2019-06-25 22:20:24 +02:00
|
|
|
</Left>
|
|
|
|
|
<Body>
|
2019-11-15 15:58:05 +01:00
|
|
|
{this.props.hasSearchField ?
|
|
|
|
|
this.getSearchBar() :
|
2019-11-16 12:35:33 +01:00
|
|
|
<Title style={{
|
2020-02-01 20:50:02 +01:00
|
|
|
paddingLeft: 10,
|
|
|
|
|
color: ThemeManager.getCurrentThemeVariables().toolbarTextColor
|
2019-11-16 12:35:33 +01:00
|
|
|
}}>{this.props.title}</Title>}
|
2019-06-25 22:20:24 +02:00
|
|
|
</Body>
|
2019-11-15 16:44:10 +01:00
|
|
|
<Right style={{flex: this.props.hasSearchField ? 0 : 1}}>
|
2019-08-07 11:10:17 +02:00
|
|
|
{this.props.rightButton}
|
|
|
|
|
</Right>
|
2019-06-25 22:20:24 +02:00
|
|
|
</Header>);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Fix header in status bar on Android
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
|
header: {
|
|
|
|
|
paddingTop: getStatusBarHeight(),
|
|
|
|
|
height: 54 + getStatusBarHeight(),
|
|
|
|
|
},
|
2019-06-27 10:17:51 +02:00
|
|
|
});
|
