lpitault/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Moved search header into custom header + search on key press

Browse source
This commit is contained in:
keplyx 2019-11-15 15:58:05 +01:00
parent e3bc2f7e8e
commit dd11fcc2c7
4 changed files with 66 additions and 135 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
components/CustomHeader.js
View file

@ -1,15 +1,18 @@
// @flow // @flow
import * as React from "react"; 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 {Platform, StyleSheet, View} from "react-native";
import {getStatusBarHeight} from "react-native-status-bar-height"; import {getStatusBarHeight} from "react-native-status-bar-height";
import Touchable from 'react-native-platform-touchable'; import Touchable from 'react-native-platform-touchable';
import ThemeManager from "../utils/ThemeManager"; import ThemeManager from "../utils/ThemeManager";
import CustomMaterialIcon from "./CustomMaterialIcon"; import CustomMaterialIcon from "./CustomMaterialIcon";
import i18n from "i18n-js";
type Props = { type Props = {
hasBackButton: boolean, hasBackButton: boolean,
hasSearchField: boolean,
searchCallback: Function,
leftButton: React.Node, leftButton: React.Node,
rightButton: React.Node, rightButton: React.Node,
title: string, title: string,
@ -29,11 +32,27 @@ export default class CustomHeader extends React.Component<Props> {
static defaultProps = { static defaultProps = {
hasBackButton: false, hasBackButton: false,
hasSearchField: false,
searchCallback: () => null,
title: '',
leftButton: <View/>, leftButton: <View/>,
rightButton: <View/>, rightButton: <View/>,
hasTabs: false, hasTabs: false,
}; };
getSearchBar() {
return (
<Item
style={{
width: '100%',
marginBottom: 7
}}>
<Input placeholder={i18n.t('proximoScreen.search')}
onChangeText={(text) => this.props.searchCallback(text)}/>
</Item>
);
}
render() { render() {
let button; let button;
// Does the app have a back button or a burger menu ? // Does the app have a back button or a burger menu ?
@ -56,7 +75,9 @@ export default class CustomHeader extends React.Component<Props> {
{button} {button}
</Left> </Left>
<Body> <Body>
<Title>{this.props.title}</Title> {this.props.hasSearchField ?
this.getSearchBar() :
<Title>{this.props.title}</Title>}
</Body> </Body>
<Right> <Right>
{this.props.rightButton} {this.props.rightButton}

103
components/SearchHeader.js
View file

@ -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(),
},
});

33
screens/Proximo/ProximoListScreen.js
View file

@ -232,18 +232,8 @@ export default class ProximoListScreen extends React.Component<Props, State> {
} }
} }
render() { getSortMenu() {
const nav = this.props.navigation;
const navType = nav.getParam('type', '{name: "Error"}');
return ( return (
<Container>
<Modalize ref={this.modalRef}
adjustToContentHeight
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
{this.getModalContent()}
</Modalize>
<CustomHeader hasBackButton={true} navigation={nav} title={navType.name} rightButton={
<Menu <Menu
ref={this.setMenuRef} ref={this.setMenuRef}
button={ button={
@ -269,7 +259,26 @@ export default class ProximoListScreen extends React.Component<Props, State> {
{i18n.t('proximoScreen.sortPrice')} {i18n.t('proximoScreen.sortPrice')}
</MenuItem> </MenuItem>
</Menu> </Menu>
}/> );
}
render() {
const nav = this.props.navigation;
const navType = nav.getParam('type', '{name: "Error"}');
return (
<Container>
<Modalize ref={this.modalRef}
adjustToContentHeight
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
{this.getModalContent()}
</Modalize>
<CustomHeader
hasBackButton={true}
navigation={nav}
hasSearchField={true}
searchCallback={(text) => console.log(text)}
rightButton={this.getSortMenu()}/>
<Content> <Content>
<FlatList <FlatList

8
screens/Proximo/ProximoSearchScreen.js
View file

@ -5,7 +5,7 @@ import {Body, Container, Content, Left, ListItem, Right, Text, Thumbnail,} from
import {FlatList} from "react-native"; import {FlatList} from "react-native";
import i18n from "i18n-js"; import i18n from "i18n-js";
import ThemeManager from "../../utils/ThemeManager"; import ThemeManager from "../../utils/ThemeManager";
import SearchHeader from "../../components/SearchHeader"; import CustomHeader from "../../components/CustomHeader";
type Props = { type Props = {
navigation: Object, navigation: Object,
@ -73,7 +73,11 @@ export default class ProximoSearchScreen extends React.Component<Props, State> {
render() { render() {
return ( return (
<Container> <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> <Content>
<FlatList <FlatList
data={this.state.filteredData} data={this.state.filteredData}