ysimard/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
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}

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

65
screens/Proximo/ProximoListScreen.js
View file

@ -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

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 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}