Moved search header into custom header + search on key press
This commit is contained in:
keplyx
parent
e3bc2f7e8e
commit
dd11fcc2c7
4 changed files with 66 additions and 135 deletions
|
|
@ -1,15 +1,18 @@
|
|||
// @flow
|
||||
|
||||
import * as React from "react";
|
||||
import {Body, Header, Left, Right, Title} from "native-base";
|
||||
import {Body, Header, Input, Item, Left, Right, 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 CustomMaterialIcon from "./CustomMaterialIcon";
|
||||
import i18n from "i18n-js";
|
||||
|
||||
type Props = {
|
||||
hasBackButton: boolean,
|
||||
hasSearchField: boolean,
|
||||
searchCallback: Function,
|
||||
leftButton: React.Node,
|
||||
rightButton: React.Node,
|
||||
title: string,
|
||||
|
|
@ -29,11 +32,27 @@ export default class CustomHeader extends React.Component<Props> {
|
|||
|
||||
static defaultProps = {
|
||||
hasBackButton: false,
|
||||
hasSearchField: false,
|
||||
searchCallback: () => null,
|
||||
title: '',
|
||||
leftButton: <View/>,
|
||||
rightButton: <View/>,
|
||||
hasTabs: false,
|
||||
};
|
||||
|
||||
getSearchBar() {
|
||||
return (
|
||||
<Item
|
||||
style={{
|
||||
width: '100%',
|
||||
marginBottom: 7
|
||||
}}>
|
||||
<Input placeholder={i18n.t('proximoScreen.search')}
|
||||
onChangeText={(text) => this.props.searchCallback(text)}/>
|
||||
</Item>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
let button;
|
||||
// Does the app have a back button or a burger menu ?
|
||||
|
|
@ -56,7 +75,9 @@ export default class CustomHeader extends React.Component<Props> {
|
|||
{button}
|
||||
</Left>
|
||||
<Body>
|
||||
<Title>{this.props.title}</Title>
|
||||
{this.props.hasSearchField ?
|
||||
this.getSearchBar() :
|
||||
<Title>{this.props.title}</Title>}
|
||||
</Body>
|
||||
<Right>
|
||||
{this.props.rightButton}
|
||||
|
|
|
|||
|
|
@ -1,103 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import * as React from "react";
|
||||
import {Header, Item, Input, Left, Right, Body} 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 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}>
|
||||
<Left>
|
||||
<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>
|
||||
</Left>
|
||||
<Body>
|
||||
<Item
|
||||
style={{
|
||||
width: '100%',
|
||||
marginBottom: 7
|
||||
}}>
|
||||
<Input placeholder={i18n.t('proximoScreen.search')} />
|
||||
</Item>
|
||||
|
||||
{/*<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);*/}
|
||||
{/* }}*/}
|
||||
{/*/>*/}
|
||||
</Body>
|
||||
<Right>
|
||||
<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>
|
||||
</Right>
|
||||
</Header>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Fix header in status bar on Android
|
||||
const styles = StyleSheet.create({
|
||||
header: {
|
||||
paddingTop: getStatusBarHeight(),
|
||||
height: 54 + getStatusBarHeight(),
|
||||
},
|
||||
});
|
||||
|
|
@ -58,7 +58,7 @@ type State = {
|
|||
*/
|
||||
export default class ProximoListScreen extends React.Component<Props, State> {
|
||||
|
||||
modalRef: { current: null | Modalize };
|
||||
modalRef: { current: null | Modalize };
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
|
|
@ -232,6 +232,36 @@ export default class ProximoListScreen extends React.Component<Props, State> {
|
|||
}
|
||||
}
|
||||
|
||||
getSortMenu() {
|
||||
return (
|
||||
<Menu
|
||||
ref={this.setMenuRef}
|
||||
button={
|
||||
<Touchable
|
||||
style={{padding: 6}}
|
||||
onPress={() =>
|
||||
this._menu.show()
|
||||
}>
|
||||
<CustomMaterialIcon
|
||||
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
|
||||
icon={'sort'}/>
|
||||
</Touchable>
|
||||
}
|
||||
>
|
||||
<MenuItem
|
||||
onPress={() => this.sortModeSelected(sortMode.name)}>
|
||||
{this.state.sortNameIcon}
|
||||
{i18n.t('proximoScreen.sortName')}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onPress={() => this.sortModeSelected(sortMode.price)}>
|
||||
{this.state.sortPriceIcon}
|
||||
{i18n.t('proximoScreen.sortPrice')}
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const nav = this.props.navigation;
|
||||
const navType = nav.getParam('type', '{name: "Error"}');
|
||||
|
|
@ -243,33 +273,12 @@ export default class ProximoListScreen extends React.Component<Props, State> {
|
|||
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
|
||||
{this.getModalContent()}
|
||||
</Modalize>
|
||||
<CustomHeader hasBackButton={true} navigation={nav} title={navType.name} rightButton={
|
||||
<Menu
|
||||
ref={this.setMenuRef}
|
||||
button={
|
||||
<Touchable
|
||||
style={{padding: 6}}
|
||||
onPress={() =>
|
||||
this._menu.show()
|
||||
}>
|
||||
<CustomMaterialIcon
|
||||
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
|
||||
icon={'sort'}/>
|
||||
</Touchable>
|
||||
}
|
||||
>
|
||||
<MenuItem
|
||||
onPress={() => this.sortModeSelected(sortMode.name)}>
|
||||
{this.state.sortNameIcon}
|
||||
{i18n.t('proximoScreen.sortName')}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onPress={() => this.sortModeSelected(sortMode.price)}>
|
||||
{this.state.sortPriceIcon}
|
||||
{i18n.t('proximoScreen.sortPrice')}
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
}/>
|
||||
<CustomHeader
|
||||
hasBackButton={true}
|
||||
navigation={nav}
|
||||
hasSearchField={true}
|
||||
searchCallback={(text) => console.log(text)}
|
||||
rightButton={this.getSortMenu()}/>
|
||||
|
||||
<Content>
|
||||
<FlatList
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import {Body, Container, Content, Left, ListItem, Right, Text, Thumbnail,} from
|
|||
import {FlatList} from "react-native";
|
||||
import i18n from "i18n-js";
|
||||
import ThemeManager from "../../utils/ThemeManager";
|
||||
import SearchHeader from "../../components/SearchHeader";
|
||||
import CustomHeader from "../../components/CustomHeader";
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
|
|
@ -73,7 +73,11 @@ export default class ProximoSearchScreen extends React.Component<Props, State> {
|
|||
render() {
|
||||
return (
|
||||
<Container>
|
||||
<SearchHeader searchFunction={this.search.bind(this)} navigation={this.props.navigation}/>
|
||||
<CustomHeader
|
||||
hasBackButton={true}
|
||||
navigation={this.props.navigation}
|
||||
hasSearchField={true}
|
||||
searchCallback={(text) => this.search(text)}/>
|
||||
<Content>
|
||||
<FlatList
|
||||
data={this.state.filteredData}
|
||||
|
|
|
|||
Loading…
Reference in a new issue