Browse Source

Use external library to render header buttons

Arnaud Vergnet 2 years ago
parent
commit
f3b7bafdca

+ 3
- 2
package.json View File

@@ -28,6 +28,8 @@
28 28
     "@react-navigation/native": "^5.0.9",
29 29
     "@react-navigation/stack": "^5.1.1",
30 30
     "expo": "^37.0.0",
31
+    "expo-barcode-scanner": "~8.1.0",
32
+    "expo-camera": "latest",
31 33
     "expo-linear-gradient": "~8.1.0",
32 34
     "expo-localization": "~8.1.0",
33 35
     "expo-permissions": "~8.1.0",
@@ -50,8 +52,7 @@
50 52
     "react-native-safe-area-context": "0.7.3",
51 53
     "react-native-screens": "~2.2.0",
52 54
     "react-native-webview": "8.1.1",
53
-    "expo-barcode-scanner": "~8.1.0",
54
-    "expo-camera": "latest"
55
+    "react-navigation-header-buttons": "^3.0.5"
55 56
   },
56 57
   "devDependencies": {
57 58
     "@babel/cli": "^7.8.4",

+ 31
- 16
src/components/Custom/HeaderButton.js View File

@@ -1,22 +1,37 @@
1
+// @flow
2
+
1 3
 import * as React from 'react';
2
-import {IconButton, withTheme} from 'react-native-paper';
4
+import {MaterialCommunityIcons} from "@expo/vector-icons";
5
+import {HeaderButton, HeaderButtons} from 'react-navigation-header-buttons';
6
+import {withTheme} from "react-native-paper";
7
+import * as Touchable from "react-native/Libraries/Components/Touchable/TouchableNativeFeedback.android";
8
+
9
+const MaterialHeaderButton = (props: Object) => (
10
+    <HeaderButton
11
+        {...props}
12
+        IconComponent={MaterialCommunityIcons}
13
+        iconSize={26}
14
+        color={props.theme.colors.text}
15
+        background={Touchable.Ripple(props.theme.colors.ripple, true)}
16
+    />
17
+);
3 18
 
4
-/**
5
- * Component used to display a header button
6
- *
7
- * @param props Props to pass to the component
8
- * @return {*}
9
- */
10
-function HeaderButton(props) {
11
-    const {colors} = props.theme;
19
+const MaterialHeaderButtons = (props: Object) => {
12 20
     return (
13
-        <IconButton
14
-            icon={props.icon}
15
-            size={26}
16
-            color={props.color !== undefined ? props.color : colors.text}
17
-            onPress={props.onPress}
21
+        <HeaderButtons
22
+            {...props}
23
+            HeaderButtonComponent={withTheme(MaterialHeaderButton)}
24
+            OverflowIcon={
25
+                <MaterialCommunityIcons
26
+                    name="dots-vertical"
27
+                    size={26}
28
+                    color={props.theme.colors.text}
29
+                />
30
+            }
18 31
         />
19 32
     );
20
-}
33
+};
34
+
35
+export default withTheme(MaterialHeaderButtons);
21 36
 
22
-export default withTheme(HeaderButton);
37
+export {Item} from 'react-navigation-header-buttons';

+ 7
- 3
src/components/Screens/WebViewScreen.js View File

@@ -2,10 +2,10 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import WebView from "react-native-webview";
5
-import HeaderButton from "../Custom/HeaderButton";
6 5
 import BasicLoadingScreen from "../Custom/BasicLoadingScreen";
7 6
 import ErrorView from "../Custom/ErrorView";
8
-import {ERROR_TYPE} from "../../managers/ConnectionManager";
7
+import {ERROR_TYPE} from "../../utils/WebData";
8
+import MaterialHeaderButtons, {Item} from '../Custom/HeaderButton';
9 9
 
10 10
 type Props = {
11 11
     navigation: Object,
@@ -55,7 +55,11 @@ class WebViewScreen extends React.PureComponent<Props> {
55 55
      * @return {*}
56 56
      */
57 57
     getRefreshButton() {
58
-        return <HeaderButton icon={'refresh'} onPress={this.onRefreshClicked}/>
58
+        return (
59
+            <MaterialHeaderButtons>
60
+                <Item title="refresh" iconName="refresh" onPress={this.onRefreshClicked}/>
61
+            </MaterialHeaderButtons>
62
+        );
59 63
     };
60 64
 
61 65
     /**

+ 2
- 0
src/managers/ThemeManager.js View File

@@ -34,6 +34,7 @@ export default class ThemeManager {
34 34
                 tabIcon: "#929292",
35 35
                 card: "rgb(255, 255, 255)",
36 36
                 dividerBackground: '#e2e2e2',
37
+                ripple: "rgba(0,0,0,0.2)",
37 38
                 textDisabled: '#c1c1c1',
38 39
                 icon: '#5d5d5d',
39 40
                 subtitle: '#707070',
@@ -91,6 +92,7 @@ export default class ThemeManager {
91 92
                 tabIcon: "#6d6d6d",
92 93
                 card: "rgb(18, 18, 18)",
93 94
                 dividerBackground: '#222222',
95
+                ripple: "rgba(255,255,255,0.2)",
94 96
                 textDisabled: '#5b5b5b',
95 97
                 icon: '#b3b3b3',
96 98
                 subtitle: '#aaaaaa',

+ 6
- 3
src/navigation/DrawerNavigator.js View File

@@ -13,7 +13,6 @@ import TetrisScreen from "../screens/Tetris/TetrisScreen";
13 13
 import DebugScreen from '../screens/About/DebugScreen';
14 14
 import Sidebar from "../components/Sidebar/Sidebar";
15 15
 import {createStackNavigator, TransitionPresets} from "@react-navigation/stack";
16
-import HeaderButton from "../components/Custom/HeaderButton";
17 16
 import i18n from "i18n-js";
18 17
 import LoginScreen from "../screens/Amicale/LoginScreen";
19 18
 import ProfileScreen from "../screens/Amicale/ProfileScreen";
@@ -22,6 +21,7 @@ import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
22 21
 import ClubAboutScreen from "../screens/Amicale/Clubs/ClubAboutScreen";
23 22
 import VoteScreen from "../screens/Amicale/VoteScreen";
24 23
 import AmicaleContactScreen from "../screens/Amicale/AmicaleContactScreen";
24
+import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";
25 25
 
26 26
 const defaultScreenOptions = {
27 27
     gestureEnabled: true,
@@ -31,7 +31,9 @@ const defaultScreenOptions = {
31 31
 
32 32
 function getDrawerButton(navigation: Object) {
33 33
     return (
34
-        <HeaderButton icon={'menu'} onPress={navigation.openDrawer}/>
34
+        <MaterialHeaderButtons left={true}>
35
+            <Item title="menu" iconName="menu" onPress={navigation.openDrawer}/>
36
+        </MaterialHeaderButtons>
35 37
     );
36 38
 }
37 39
 
@@ -365,7 +367,8 @@ export default class DrawerNavigator extends React.Component<Props> {
365 367
     constructor(props: Object) {
366 368
         super(props);
367 369
 
368
-        this.createTabNavigator = () => <TabNavigator defaultRoute={props.defaultRoute} defaultData={props.defaultData}/>
370
+        this.createTabNavigator = () => <TabNavigator defaultRoute={props.defaultRoute}
371
+                                                      defaultData={props.defaultData}/>
369 372
     }
370 373
 
371 374
     render() {

+ 5
- 3
src/navigation/MainTabNavigator.js View File

@@ -13,11 +13,11 @@ import ProximoAboutScreen from "../screens/Proximo/ProximoAboutScreen";
13 13
 import PlanexScreen from '../screens/Websites/PlanexScreen';
14 14
 import {MaterialCommunityIcons} from "@expo/vector-icons";
15 15
 import AsyncStorageManager from "../managers/AsyncStorageManager";
16
-import HeaderButton from "../components/Custom/HeaderButton";
17 16
 import {withTheme} from 'react-native-paper';
18 17
 import i18n from "i18n-js";
19 18
 import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
20 19
 import ScannerScreen from "../screens/ScannerScreen";
20
+import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";
21 21
 
22 22
 
23 23
 const TAB_ICONS = {
@@ -36,7 +36,9 @@ const defaultScreenOptions = {
36 36
 
37 37
 function getDrawerButton(navigation: Object) {
38 38
     return (
39
-        <HeaderButton icon={'menu'} onPress={navigation.openDrawer}/>
39
+        <MaterialHeaderButtons left={true}>
40
+            <Item title="menu" iconName="menu" onPress={navigation.openDrawer}/>
41
+        </MaterialHeaderButtons>
40 42
     );
41 43
 }
42 44
 
@@ -231,7 +233,7 @@ type Props = {
231 233
     defaultData: Object
232 234
 }
233 235
 
234
-class TabNavigator extends React.Component<Props>{
236
+class TabNavigator extends React.Component<Props> {
235 237
 
236 238
     createHomeStackComponent: Object;
237 239
 

+ 4
- 2
src/screens/Amicale/Clubs/ClubListScreen.js View File

@@ -8,7 +8,7 @@ import i18n from "i18n-js";
8 8
 import ClubListItem from "../../../components/Lists/ClubListItem";
9 9
 import {isItemInCategoryFilter, stringMatchQuery} from "../../../utils/Search";
10 10
 import ClubListHeader from "../../../components/Lists/ClubListHeader";
11
-import HeaderButton from "../../../components/Custom/HeaderButton";
11
+import MaterialHeaderButtons, {Item} from "../../../components/Custom/HeaderButton";
12 12
 
13 13
 type Props = {
14 14
     navigation: Object,
@@ -72,7 +72,9 @@ class ClubListScreen extends React.Component<Props, State> {
72 72
      */
73 73
     getHeaderButtons = () => {
74 74
         const onPress = () => this.props.navigation.navigate("club-about");
75
-        return <HeaderButton icon={'information'} onPress={onPress}/>;
75
+        return <MaterialHeaderButtons>
76
+            <Item title="main" iconName="information" onPress={onPress}/>
77
+        </MaterialHeaderButtons>;
76 78
     };
77 79
 
78 80
     /**

+ 4
- 2
src/screens/Amicale/ProfileScreen.js View File

@@ -5,9 +5,9 @@ import {FlatList, StyleSheet, View} from "react-native";
5 5
 import {Avatar, Button, Card, Divider, List, withTheme} from 'react-native-paper';
6 6
 import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
7 7
 import {openBrowser} from "../../utils/WebBrowser";
8
-import HeaderButton from "../../components/Custom/HeaderButton";
9 8
 import i18n from 'i18n-js';
10 9
 import LogoutDialog from "../../components/Amicale/LogoutDialog";
10
+import MaterialHeaderButtons, {Item} from "../../components/Custom/HeaderButton";
11 11
 
12 12
 type Props = {
13 13
     navigation: Object,
@@ -47,7 +47,9 @@ class ProfileScreen extends React.Component<Props, State> {
47 47
 
48 48
     hideDisconnectDialog = () => this.setState({dialogVisible: false});
49 49
 
50
-    getHeaderButton = () => <HeaderButton icon={'logout'} onPress={this.showDisconnectDialog}/>;
50
+    getHeaderButton = () => <MaterialHeaderButtons>
51
+        <Item title="logout" iconName="logout" onPress={this.showDisconnectDialog}/>
52
+    </MaterialHeaderButtons>;
51 53
 
52 54
     getScreen = (data: Object) => {
53 55
         this.data = data[0];

+ 4
- 6
src/screens/HomeScreen.js View File

@@ -12,9 +12,9 @@ import PreviewEventDashboardItem from "../components/Home/PreviewEventDashboardI
12 12
 import {stringToDate} from "../utils/Planning";
13 13
 import {openBrowser} from "../utils/WebBrowser";
14 14
 import ActionsDashBoardItem from "../components/Home/ActionsDashboardItem";
15
-import HeaderButton from "../components/Custom/HeaderButton";
16 15
 import ConnectionManager from "../managers/ConnectionManager";
17 16
 import {CommonActions} from '@react-navigation/native';
17
+import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";
18 18
 // import DATA from "../dashboard_data.json";
19 19
 
20 20
 
@@ -96,11 +96,9 @@ class HomeScreen extends React.Component<Props> {
96 96
             ? "account"
97 97
             : "login";
98 98
         const onPress = () => this.props.navigation.navigate(screen);
99
-        return <HeaderButton
100
-            icon={icon}
101
-            onPress={onPress}
102
-            color={this.isLoggedIn ? undefined : this.colors.primary}
103
-        />;
99
+        return <MaterialHeaderButtons>
100
+            <Item title="main" iconName={icon} onPress={onPress}/>
101
+        </MaterialHeaderButtons>;
104 102
     };
105 103
 
106 104
     onProxiwashClick = () => this.props.navigation.navigate('proxiwash');

+ 4
- 2
src/screens/Proximo/ProximoListScreen.js View File

@@ -7,7 +7,7 @@ import CustomModal from "../../components/Custom/CustomModal";
7 7
 import {RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
8 8
 import {stringMatchQuery} from "../../utils/Search";
9 9
 import ProximoListItem from "../../components/Lists/ProximoListItem";
10
-import HeaderButton from "../../components/Custom/HeaderButton";
10
+import MaterialHeaderButtons, {Item} from "../../components/Custom/HeaderButton";
11 11
 
12 12
 function sortPrice(a, b) {
13 13
     return a.price - b.price;
@@ -102,7 +102,9 @@ class ProximoListScreen extends React.Component<Props, State> {
102 102
      * @return {*}
103 103
      */
104 104
     getSortMenuButton = () => {
105
-        return <HeaderButton icon="sort" onPress={this.onSortMenuPress}/>;
105
+        return <MaterialHeaderButtons>
106
+            <Item title="main" iconName="sort" onPress={this.onSortMenuPress}/>
107
+        </MaterialHeaderButtons>;
106 108
     };
107 109
 
108 110
     /**

+ 5
- 10
src/screens/Proximo/ProximoMainScreen.js View File

@@ -5,7 +5,7 @@ import {View} from 'react-native'
5 5
 import i18n from "i18n-js";
6 6
 import WebSectionList from "../../components/Lists/WebSectionList";
7 7
 import {List, withTheme} from 'react-native-paper';
8
-import HeaderButton from "../../components/Custom/HeaderButton";
8
+import MaterialHeaderButtons, {Item} from "../../components/Custom/HeaderButton";
9 9
 
10 10
 const DATA_URL = "https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json";
11 11
 const LIST_ITEM_HEIGHT = 84;
@@ -111,15 +111,10 @@ class ProximoMainScreen extends React.Component<Props, State> {
111 111
      * @return {*}
112 112
      */
113 113
     getHeaderButtons() {
114
-        return (
115
-            <View
116
-                style={{
117
-                    flexDirection: 'row',
118
-                }}>
119
-                <HeaderButton icon={'magnify'} onPress={this.onPressSearchBtn}/>
120
-                <HeaderButton icon={'information'} onPress={this.onPressAboutBtn}/>
121
-            </View>
122
-        );
114
+        return <MaterialHeaderButtons>
115
+            <Item title="magnify" iconName="magnify" onPress={this.onPressSearchBtn}/>
116
+            <Item title="information" iconName="information" onPress={this.onPressAboutBtn}/>
117
+        </MaterialHeaderButtons>;
123 118
     }
124 119
 
125 120
     /**

+ 4
- 2
src/screens/Proxiwash/ProxiwashScreen.js View File

@@ -8,11 +8,11 @@ import * as Notifications from "../../utils/Notifications";
8 8
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
9 9
 import * as Expo from "expo";
10 10
 import {Avatar, Banner, Button, Card, Text, withTheme} from 'react-native-paper';
11
-import HeaderButton from "../../components/Custom/HeaderButton";
12 11
 import ProxiwashListItem from "../../components/Lists/ProxiwashListItem";
13 12
 import ProxiwashConstants from "../../constants/ProxiwashConstants";
14 13
 import CustomModal from "../../components/Custom/CustomModal";
15 14
 import AprilFoolsManager from "../../managers/AprilFoolsManager";
15
+import MaterialHeaderButtons, {Item} from "../../components/Custom/HeaderButton";
16 16
 
17 17
 const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json";
18 18
 
@@ -152,7 +152,9 @@ class ProxiwashScreen extends React.Component<Props, State> {
152 152
      * @return {*}
153 153
      */
154 154
     getAboutButton() {
155
-        return <HeaderButton icon={'information'} onPress={this.onAboutPress}/>;
155
+        return <MaterialHeaderButtons>
156
+            <Item title="information" iconName="information" onPress={this.onAboutPress}/>
157
+        </MaterialHeaderButtons>;
156 158
     }
157 159
 
158 160
     /**

+ 4
- 9
src/screens/Tetris/TetrisScreen.js View File

@@ -6,9 +6,9 @@ import {IconButton, Text, withTheme} from 'react-native-paper';
6 6
 import {MaterialCommunityIcons} from "@expo/vector-icons";
7 7
 import GameLogic from "./GameLogic";
8 8
 import Grid from "./components/Grid";
9
-import HeaderButton from "../../components/Custom/HeaderButton";
10 9
 import Preview from "./components/Preview";
11 10
 import i18n from "i18n-js";
11
+import MaterialHeaderButtons, {Item} from "../../components/Custom/HeaderButton";
12 12
 
13 13
 type Props = {
14 14
     navigation: Object,
@@ -62,14 +62,9 @@ class TetrisScreen extends React.Component<Props, State> {
62 62
     }
63 63
 
64 64
     getRightButton() {
65
-        return (
66
-            <View
67
-                style={{
68
-                    flexDirection: 'row',
69
-                }}>
70
-                <HeaderButton icon={'pause'} onPress={() => this.togglePause()}/>
71
-            </View>
72
-        );
65
+        return <MaterialHeaderButtons>
66
+            <Item title="pause" iconName="pause" onPress={() => this.togglePause()}/>
67
+        </MaterialHeaderButtons>;
73 68
     }
74 69
 
75 70
     /**

Loading…
Cancel
Save