1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- // @flow
-
- import * as React from "react";
- import {Header} from "native-base";
- import {Platform, StyleSheet} from "react-native";
- import {getStatusBarHeight} from "react-native-status-bar-height";
- import Touchable from 'react-native-platform-touchable';
- import ThemeManager from "../utils/ThemeManager";
- import CustomMaterialIcon from "./CustomMaterialIcon";
- import {TextInput} from "react-native-paper";
- import i18n from "i18n-js";
-
-
- type Props = {
- navigation: Object,
- searchFunction: Function
- };
-
- type State = {
- searchString: string
- }
-
-
- /**
- * Custom component defining a search header using native base
- */
- export default class SearchHeader extends React.Component<Props, State> {
- state = {
- searchString: "Test",
- };
-
- render() {
- /* TODO:
- - hard coded color (not theme-specific),
- - bugs with placeHolder and underlineColorAndroid (do not work),
- - subtle offset of the text to fix in the inputText
- - not tested on iOS
- */
- return (
- <Header style={styles.header}>
- <Touchable
- style={{
- alignItems: "center",
- flexDirection: "row",
- padding: 7,
- }}
- onPress={() => this.props.navigation.goBack()}>
- <CustomMaterialIcon
- color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
- icon="arrow-left" />
- </Touchable>
-
- <TextInput
- style={{
- flex: 1,
- backgroundColor: "#CA535D",
- margin: 7,
- }}
- underlineColorAndroid={"transparent"}
- placeHolder={i18n.t("proximoScreen.search")}
- autoFocus={true}
- onChangeText={text => this.setState({searchString: text})}
- onSubmitEditing={text => {
- this.setState({searchString: text});
- this.props.searchFunction(this.state.searchString);
- }}
- />
-
- <Touchable
- style={{
- alignItems: "center",
- flexDirection: "row",
- padding: 7,
- }}
- onPress={() => this.props.searchFunction(this.state.searchString)}>
- <CustomMaterialIcon
- color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
- icon="magnify"/>
- </Touchable>
- </Header>
- );
- }
- };
-
-
- // Fix header in status bar on Android
- const styles = StyleSheet.create({
- header: {
- paddingTop: getStatusBarHeight(),
- height: 54 + getStatusBarHeight(),
- },
- });
|