From dd11fcc2c763c7e06c64d3bd02539420af4a4dbe Mon Sep 17 00:00:00 2001 From: keplyx Date: Fri, 15 Nov 2019 15:58:05 +0100 Subject: [PATCH] Moved search header into custom header + search on key press --- components/CustomHeader.js | 25 +++++- components/SearchHeader.js | 103 ------------------------- screens/Proximo/ProximoListScreen.js | 65 +++++++++------- screens/Proximo/ProximoSearchScreen.js | 8 +- 4 files changed, 66 insertions(+), 135 deletions(-) delete mode 100644 components/SearchHeader.js diff --git a/components/CustomHeader.js b/components/CustomHeader.js index eefc355..b966c1e 100644 --- a/components/CustomHeader.js +++ b/components/CustomHeader.js @@ -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 { static defaultProps = { hasBackButton: false, + hasSearchField: false, + searchCallback: () => null, + title: '', leftButton: , rightButton: , hasTabs: false, }; + getSearchBar() { + return ( + + this.props.searchCallback(text)}/> + + ); + } + 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 { {button} - {this.props.title} + {this.props.hasSearchField ? + this.getSearchBar() : + {this.props.title}} {this.props.rightButton} diff --git a/components/SearchHeader.js b/components/SearchHeader.js deleted file mode 100644 index 2e393c3..0000000 --- a/components/SearchHeader.js +++ /dev/null @@ -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 { - 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 ( -
- - this.props.navigation.goBack()}> - - - - - - - - - {/* this.setState({searchString: text})}*/} - {/* onSubmitEditing={text => {*/} - {/* this.setState({searchString: text});*/} - {/* this.props.searchFunction(this.state.searchString);*/} - {/* }}*/} - {/*/>*/} - - - this.props.searchFunction(this.state.searchString)}> - - - -
- ); - } -}; - - -// Fix header in status bar on Android -const styles = StyleSheet.create({ - header: { - paddingTop: getStatusBarHeight(), - height: 54 + getStatusBarHeight(), - }, -}); diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index 7c70a1b..8e367c2 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -58,7 +58,7 @@ type State = { */ export default class ProximoListScreen extends React.Component { - modalRef: { current: null | Modalize }; + modalRef: { current: null | Modalize }; constructor(props: any) { super(props); @@ -232,6 +232,36 @@ export default class ProximoListScreen extends React.Component { } } + getSortMenu() { + return ( + + this._menu.show() + }> + + + } + > + this.sortModeSelected(sortMode.name)}> + {this.state.sortNameIcon} + {i18n.t('proximoScreen.sortName')} + + this.sortModeSelected(sortMode.price)}> + {this.state.sortPriceIcon} + {i18n.t('proximoScreen.sortPrice')} + + + ); + } + render() { const nav = this.props.navigation; const navType = nav.getParam('type', '{name: "Error"}'); @@ -243,33 +273,12 @@ export default class ProximoListScreen extends React.Component { modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}> {this.getModalContent()} - - this._menu.show() - }> - - - } - > - this.sortModeSelected(sortMode.name)}> - {this.state.sortNameIcon} - {i18n.t('proximoScreen.sortName')} - - this.sortModeSelected(sortMode.price)}> - {this.state.sortPriceIcon} - {i18n.t('proximoScreen.sortPrice')} - - - }/> + console.log(text)} + rightButton={this.getSortMenu()}/> { render() { return ( - + this.search(text)}/>