Browse Source

Start using react navigation header

keplyx 4 years ago
parent
commit
14960794bc

+ 23
- 4
navigation/MainTabNavigator.js View File

@@ -3,7 +3,6 @@ import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';
3 3
 import {createMaterialBottomTabNavigator} from "@react-navigation/material-bottom-tabs";
4 4
 
5 5
 import HomeScreen from '../screens/HomeScreen';
6
-import PerfHomeScreen from '../screens/PerfHomeScreen';
7 6
 import PlanningScreen from '../screens/PlanningScreen';
8 7
 import PlanningDisplayScreen from '../screens/PlanningDisplayScreen';
9 8
 import ProxiwashScreen from '../screens/Proxiwash/ProxiwashScreen';
@@ -15,6 +14,8 @@ import PlanexScreen from '../screens/Websites/PlanexScreen';
15 14
 import {MaterialCommunityIcons} from "@expo/vector-icons";
16 15
 import ThemeManager from "../utils/ThemeManager";
17 16
 import AsyncStorageManager from "../utils/AsyncStorageManager";
17
+import {StyleSheet, View} from "react-native";
18
+import Touchable from "react-native-platform-touchable";
18 19
 
19 20
 const TAB_ICONS = {
20 21
     Home: 'triangle',
@@ -26,13 +27,24 @@ const TAB_ICONS = {
26 27
 
27 28
 const ProximoStack = createStackNavigator();
28 29
 
30
+const styles = StyleSheet.create({
31
+    header: {
32
+        backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
33
+    },
34
+    headerTitle: {
35
+        color: "#ffffff",
36
+    },
37
+});
38
+
39
+
29 40
 function ProximoStackComponent() {
30 41
     return (
31 42
         <ProximoStack.Navigator
32 43
             initialRouteName="ProximoMainScreen"
33
-            mode='card'
34
-            headerMode="none"
44
+            headerMode="float"
35 45
             screenOptions={{
46
+                headerTintColor: 'white',
47
+                headerStyle: styles.header,
36 48
                 gestureEnabled: true,
37 49
                 cardOverlayEnabled: true,
38 50
                 ...TransitionPresets.SlideFromRightIOS,
@@ -40,16 +52,23 @@ function ProximoStackComponent() {
40 52
         >
41 53
             <ProximoStack.Screen
42 54
                 name="ProximoMainScreen"
55
+                options={{
56
+                    title: 'Proximo',
57
+                }}
43 58
                 component={ProximoMainScreen}
44 59
             />
45 60
             <ProximoStack.Screen
46 61
                 name="ProximoListScreen"
62
+                options={{
63
+                    title: 'Articles'
64
+                }}
47 65
                 component={ProximoListScreen}
48 66
             />
49 67
             <ProximoStack.Screen
50 68
                 name="ProximoAboutScreen"
51 69
                 component={ProximoAboutScreen}
52 70
                 options={{
71
+                    title: 'Proximo',
53 72
                     ...TransitionPresets.ModalSlideFromBottomIOS,
54 73
                 }}
55 74
             />
@@ -116,7 +135,7 @@ function HomeStackComponent() {
116 135
         <HomeStack.Navigator
117 136
             initialRouteName="HomeScreen"
118 137
             mode='card'
119
-            headerMode="none"
138
+            headerMode="float"
120 139
             screenOptions={{
121 140
                 gestureEnabled: true,
122 141
                 cardOverlayEnabled: true,

+ 0
- 1
screens/Proximo/ProximoAboutScreen.js View File

@@ -20,7 +20,6 @@ export default class ProximoAboutScreen extends React.Component<Props> {
20 20
         const nav = this.props.navigation;
21 21
         return (
22 22
             <Container>
23
-                <CustomHeader navigation={nav} title={i18n.t('screens.proximo')} hasBackButton={true}/>
24 23
                 <Content padder>
25 24
                     <View style={{
26 25
                         width: '100%',

+ 32
- 11
screens/Proximo/ProximoListScreen.js View File

@@ -1,7 +1,7 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Body, Container, Content, H1, H3, Left, ListItem, Right, Text, Thumbnail} from 'native-base';
4
+import {Body, Container, Content, H1, H3, Input, Item, Left, ListItem, Right, Text, Thumbnail} from 'native-base';
5 5
 import CustomHeader from "../../components/CustomHeader";
6 6
 import {FlatList, Image, Platform, View} from "react-native";
7 7
 import Touchable from 'react-native-platform-touchable';
@@ -147,16 +147,45 @@ export default class ProximoListScreen extends React.Component<Props, State> {
147 147
                 break;
148 148
         }
149 149
         this.setupSortIcons(mode, isReverse);
150
-        this.sortMenuRef.hide();
150
+        if (this.sortMenuRef !== undefined)
151
+            this.sortMenuRef.hide();
151 152
     }
152 153
 
153 154
     /**
154 155
      * Set the sort mode from state when components are ready
155 156
      */
156 157
     componentDidMount() {
158
+        const button = this.getSortMenu.bind(this);
159
+        const title = this.getSearchBar.bind(this);
160
+        this.props.navigation.setOptions({
161
+            headerRight: button,
162
+            headerTitle: title,
163
+        });
157 164
         this.setSortMode(this.state.currentSortMode, this.state.isSortReversed);
158 165
     }
159 166
 
167
+    getSearchBar() {
168
+        return (
169
+            <Body style={{width: '100%'}}>
170
+                <Item
171
+                    style={{
172
+                        width: '100%',
173
+                        marginBottom: 7
174
+                    }}>
175
+                    <MaterialCommunityIcons
176
+                        name={'magnify'}
177
+                        size={26}
178
+                        color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
179
+                    <Input
180
+                        ref="searchInput"
181
+                        placeholder={i18n.t('proximoScreen.search')}
182
+                        placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
183
+                        onChangeText={this.onSearchStringChange}/>
184
+                </Item>
185
+            </Body>
186
+        );
187
+    }
188
+
160 189
     /**
161 190
      * get color depending on quantity available
162 191
      *
@@ -299,7 +328,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
299 328
                 ref={this.onMenuRef}
300 329
                 button={
301 330
                     <Touchable
302
-                        style={{padding: 6}}
331
+                        style={{padding: 6, marginRight: 10}}
303 332
                         onPress={this.onSortMenuPress}>
304 333
                         <MaterialCommunityIcons
305 334
                             color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
@@ -364,14 +393,6 @@ export default class ProximoListScreen extends React.Component<Props, State> {
364 393
                           modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
365 394
                     {this.getModalContent()}
366 395
                 </Modalize>
367
-                <CustomHeader
368
-                    hasBackButton={true}
369
-                    navigation={nav}
370
-                    hasSearchField={true}
371
-                    searchCallback={this.onSearchStringChange}
372
-                    shouldFocusSearchBar={this.shouldFocusSearchBar}
373
-                    rightButton={this.getSortMenu()}
374
-                />
375 396
                 <FlatList
376 397
                     data={this.state.currentlyDisplayedData}
377 398
                     extraData={this.state.currentlyDisplayedData}

+ 13
- 8
screens/Proximo/ProximoMainScreen.js View File

@@ -2,12 +2,11 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import {Platform, View} from 'react-native'
5
-import {Body, Left, ListItem, Right, Text} from 'native-base';
5
+import {Body, Left, ListItem, Right, Text, Container} from 'native-base';
6 6
 import i18n from "i18n-js";
7 7
 import {MaterialCommunityIcons} from "@expo/vector-icons";
8 8
 import ThemeManager from "../../utils/ThemeManager";
9 9
 import Touchable from "react-native-platform-touchable";
10
-import BaseContainer from "../../components/BaseContainer";
11 10
 import WebSectionList from "../../components/WebSectionList";
12 11
 
13 12
 const DATA_URL = "https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json";
@@ -41,6 +40,14 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
41 40
         this.createDataset = this.createDataset.bind(this);
42 41
     }
43 42
 
43
+    componentDidMount() {
44
+        const button = this.getRightButton.bind(this);
45
+        this.props.navigation.setOptions({
46
+            headerRight: button
47
+            ,
48
+        });
49
+    }
50
+
44 51
     static sortFinalData(a: Object, b: Object) {
45 52
         let str1 = a.type.name.toLowerCase();
46 53
         let str2 = b.type.name.toLowerCase();
@@ -150,7 +157,8 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
150 157
         return (
151 158
             <View
152 159
                 style={{
153
-                    flexDirection: 'row'
160
+                    flexDirection: 'row',
161
+                    marginRight: 10,
154 162
                 }}>
155 163
                 <Touchable
156 164
                     style={{padding: 6}}
@@ -215,10 +223,7 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
215 223
     render() {
216 224
         const nav = this.props.navigation;
217 225
         return (
218
-            <BaseContainer
219
-                navigation={nav}
220
-                headerTitle={i18n.t('screens.proximo')}
221
-                headerRightButton={this.getRightButton()}>
226
+            <Container>
222 227
                 <WebSectionList
223 228
                     createDataset={this.createDataset}
224 229
                     navigation={nav}
@@ -226,7 +231,7 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
226 231
                     fetchUrl={DATA_URL}
227 232
                     renderItem={this.getRenderItem}
228 233
                     updateErrorText={i18n.t("homeScreen.listUpdateFail")}/>
229
-            </BaseContainer>
234
+            </Container>
230 235
         );
231 236
     }
232 237
 }

Loading…
Cancel
Save