Browse Source

Moved search header into custom header + search on key press

keplyx 2 years ago
parent
commit
dd11fcc2c7

+ 23
- 2
components/CustomHeader.js View File

@@ -1,15 +1,18 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from "react";
4
-import {Body, Header, Left, Right, Title} from "native-base";
4
+import {Body, Header, Input, Item, Left, Right, Title} from "native-base";
5 5
 import {Platform, StyleSheet, View} from "react-native";
6 6
 import {getStatusBarHeight} from "react-native-status-bar-height";
7 7
 import Touchable from 'react-native-platform-touchable';
8 8
 import ThemeManager from "../utils/ThemeManager";
9 9
 import CustomMaterialIcon from "./CustomMaterialIcon";
10
+import i18n from "i18n-js";
10 11
 
11 12
 type Props = {
12 13
     hasBackButton: boolean,
14
+    hasSearchField: boolean,
15
+    searchCallback: Function,
13 16
     leftButton: React.Node,
14 17
     rightButton: React.Node,
15 18
     title: string,
@@ -29,11 +32,27 @@ export default class CustomHeader extends React.Component<Props> {
29 32
 
30 33
     static defaultProps = {
31 34
         hasBackButton: false,
35
+        hasSearchField: false,
36
+        searchCallback: () => null,
37
+        title: '',
32 38
         leftButton: <View/>,
33 39
         rightButton: <View/>,
34 40
         hasTabs: false,
35 41
     };
36 42
 
43
+    getSearchBar() {
44
+        return (
45
+            <Item
46
+                style={{
47
+                    width: '100%',
48
+                    marginBottom: 7
49
+                }}>
50
+                <Input placeholder={i18n.t('proximoScreen.search')}
51
+                onChangeText={(text) => this.props.searchCallback(text)}/>
52
+            </Item>
53
+        );
54
+    }
55
+
37 56
     render() {
38 57
         let button;
39 58
         // Does the app have a back button or a burger menu ?
@@ -56,7 +75,9 @@ export default class CustomHeader extends React.Component<Props> {
56 75
                     {button}
57 76
                 </Left>
58 77
                 <Body>
59
-                    <Title>{this.props.title}</Title>
78
+                    {this.props.hasSearchField ?
79
+                        this.getSearchBar() :
80
+                        <Title>{this.props.title}</Title>}
60 81
                 </Body>
61 82
                 <Right>
62 83
                     {this.props.rightButton}

+ 0
- 103
components/SearchHeader.js View File

@@ -1,103 +0,0 @@
1
-// @flow
2
-
3
-import * as React from "react";
4
-import {Header, Item, Input, Left, Right, Body} from "native-base";
5
-import {Platform, StyleSheet} from "react-native";
6
-import {getStatusBarHeight} from "react-native-status-bar-height";
7
-import Touchable from 'react-native-platform-touchable';
8
-import ThemeManager from "../utils/ThemeManager";
9
-import CustomMaterialIcon from "./CustomMaterialIcon";
10
-import i18n from "i18n-js";
11
-
12
-
13
-type Props = {
14
-    navigation: Object,
15
-    searchFunction: Function
16
-};
17
-
18
-type State = {
19
-    searchString: string
20
-}
21
-
22
-
23
-/**
24
- * Custom component defining a search header using native base
25
- */
26
-export default class SearchHeader extends React.Component<Props, State> {
27
-    state = {
28
-        searchString: "Test",
29
-    };
30
-
31
-    render() {
32
-        /* TODO:
33
-            - hard coded color (not theme-specific),
34
-            - bugs with placeHolder and underlineColorAndroid (do not work),
35
-            - subtle offset of the text to fix in the inputText
36
-            - not tested on iOS
37
-         */
38
-        return (
39
-            <Header style={styles.header}>
40
-                <Left>
41
-                    <Touchable
42
-                        style={{
43
-                            alignItems: "center",
44
-                            flexDirection: "row",
45
-                            padding: 7,
46
-                        }}
47
-                        onPress={() => this.props.navigation.goBack()}>
48
-                        <CustomMaterialIcon
49
-                            color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
50
-                            icon="arrow-left"/>
51
-                    </Touchable>
52
-                </Left>
53
-                <Body>
54
-                    <Item
55
-                    style={{
56
-                        width: '100%',
57
-                        marginBottom: 7
58
-                    }}>
59
-                        <Input placeholder={i18n.t('proximoScreen.search')} />
60
-                    </Item>
61
-
62
-                    {/*<TextInput*/}
63
-                    {/*    style={{*/}
64
-                    {/*        flex: 1,*/}
65
-                    {/*        backgroundColor: "#CA535D",*/}
66
-                    {/*        margin: 7,*/}
67
-                    {/*    }}*/}
68
-                    {/*    underlineColorAndroid={"transparent"}*/}
69
-                    {/*    placeHolder={i18n.t("proximoScreen.search")}*/}
70
-                    {/*    autoFocus={true}*/}
71
-                    {/*    onChangeText={text => this.setState({searchString: text})}*/}
72
-                    {/*    onSubmitEditing={text => {*/}
73
-                    {/*        this.setState({searchString: text});*/}
74
-                    {/*        this.props.searchFunction(this.state.searchString);*/}
75
-                    {/*    }}*/}
76
-                    {/*/>*/}
77
-                </Body>
78
-                <Right>
79
-                    <Touchable
80
-                        style={{
81
-                            alignItems: "center",
82
-                            flexDirection: "row",
83
-                            padding: 7,
84
-                        }}
85
-                        onPress={() => this.props.searchFunction(this.state.searchString)}>
86
-                        <CustomMaterialIcon
87
-                            color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
88
-                            icon="magnify"/>
89
-                    </Touchable>
90
-                </Right>
91
-            </Header>
92
-        );
93
-    }
94
-};
95
-
96
-
97
-// Fix header in status bar on Android
98
-const styles = StyleSheet.create({
99
-    header: {
100
-        paddingTop: getStatusBarHeight(),
101
-        height: 54 + getStatusBarHeight(),
102
-    },
103
-});

+ 37
- 28
screens/Proximo/ProximoListScreen.js View File

@@ -58,7 +58,7 @@ type State = {
58 58
  */
59 59
 export default class ProximoListScreen extends React.Component<Props, State> {
60 60
 
61
-    modalRef:  { current: null | Modalize };
61
+    modalRef: { current: null | Modalize };
62 62
 
63 63
     constructor(props: any) {
64 64
         super(props);
@@ -232,6 +232,36 @@ export default class ProximoListScreen extends React.Component<Props, State> {
232 232
         }
233 233
     }
234 234
 
235
+    getSortMenu() {
236
+        return (
237
+            <Menu
238
+                ref={this.setMenuRef}
239
+                button={
240
+                    <Touchable
241
+                        style={{padding: 6}}
242
+                        onPress={() =>
243
+                            this._menu.show()
244
+                        }>
245
+                        <CustomMaterialIcon
246
+                            color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
247
+                            icon={'sort'}/>
248
+                    </Touchable>
249
+                }
250
+            >
251
+                <MenuItem
252
+                    onPress={() => this.sortModeSelected(sortMode.name)}>
253
+                    {this.state.sortNameIcon}
254
+                    {i18n.t('proximoScreen.sortName')}
255
+                </MenuItem>
256
+                <MenuItem
257
+                    onPress={() => this.sortModeSelected(sortMode.price)}>
258
+                    {this.state.sortPriceIcon}
259
+                    {i18n.t('proximoScreen.sortPrice')}
260
+                </MenuItem>
261
+            </Menu>
262
+        );
263
+    }
264
+
235 265
     render() {
236 266
         const nav = this.props.navigation;
237 267
         const navType = nav.getParam('type', '{name: "Error"}');
@@ -243,33 +273,12 @@ export default class ProximoListScreen extends React.Component<Props, State> {
243 273
                           modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
244 274
                     {this.getModalContent()}
245 275
                 </Modalize>
246
-                <CustomHeader hasBackButton={true} navigation={nav} title={navType.name} rightButton={
247
-                    <Menu
248
-                        ref={this.setMenuRef}
249
-                        button={
250
-                            <Touchable
251
-                                style={{padding: 6}}
252
-                                onPress={() =>
253
-                                    this._menu.show()
254
-                                }>
255
-                                <CustomMaterialIcon
256
-                                    color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
257
-                                    icon={'sort'}/>
258
-                            </Touchable>
259
-                        }
260
-                    >
261
-                        <MenuItem
262
-                            onPress={() => this.sortModeSelected(sortMode.name)}>
263
-                            {this.state.sortNameIcon}
264
-                            {i18n.t('proximoScreen.sortName')}
265
-                        </MenuItem>
266
-                        <MenuItem
267
-                            onPress={() => this.sortModeSelected(sortMode.price)}>
268
-                            {this.state.sortPriceIcon}
269
-                            {i18n.t('proximoScreen.sortPrice')}
270
-                        </MenuItem>
271
-                    </Menu>
272
-                }/>
276
+                <CustomHeader
277
+                    hasBackButton={true}
278
+                    navigation={nav}
279
+                    hasSearchField={true}
280
+                    searchCallback={(text) => console.log(text)}
281
+                    rightButton={this.getSortMenu()}/>
273 282
 
274 283
                 <Content>
275 284
                     <FlatList

+ 6
- 2
screens/Proximo/ProximoSearchScreen.js View File

@@ -5,7 +5,7 @@ import {Body, Container, Content, Left, ListItem, Right, Text, Thumbnail,} from
5 5
 import {FlatList} from "react-native";
6 6
 import i18n from "i18n-js";
7 7
 import ThemeManager from "../../utils/ThemeManager";
8
-import SearchHeader from "../../components/SearchHeader";
8
+import CustomHeader from "../../components/CustomHeader";
9 9
 
10 10
 type Props = {
11 11
     navigation: Object,
@@ -73,7 +73,11 @@ export default class ProximoSearchScreen extends React.Component<Props, State> {
73 73
     render() {
74 74
         return (
75 75
             <Container>
76
-                <SearchHeader searchFunction={this.search.bind(this)} navigation={this.props.navigation}/>
76
+                <CustomHeader
77
+                    hasBackButton={true}
78
+                    navigation={this.props.navigation}
79
+                    hasSearchField={true}
80
+                    searchCallback={(text) => this.search(text)}/>
77 81
                 <Content>
78 82
                     <FlatList
79 83
                         data={this.state.filteredData}

Loading…
Cancel
Save