|
@@ -17,8 +17,6 @@
|
17
|
17
|
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
|
18
|
18
|
*/
|
19
|
19
|
|
20
|
|
-// @flow
|
21
|
|
-
|
22
|
20
|
import * as React from 'react';
|
23
|
21
|
import {Animated} from 'react-native';
|
24
|
22
|
import {withTheme} from 'react-native-paper';
|
|
@@ -26,40 +24,40 @@ import {Collapsible} from 'react-navigation-collapsible';
|
26
|
24
|
import {StackNavigationProp} from '@react-navigation/stack';
|
27
|
25
|
import TabIcon from './TabIcon';
|
28
|
26
|
import TabHomeIcon from './TabHomeIcon';
|
29
|
|
-import type {CustomThemeType} from '../../managers/ThemeManager';
|
30
|
27
|
|
31
|
28
|
type RouteType = {
|
32
|
|
- name: string,
|
33
|
|
- key: string,
|
34
|
|
- params: {collapsible: Collapsible},
|
|
29
|
+ name: string;
|
|
30
|
+ key: string;
|
|
31
|
+ params: {collapsible: Collapsible};
|
35
|
32
|
state: {
|
36
|
|
- index: number,
|
37
|
|
- routes: Array<RouteType>,
|
38
|
|
- },
|
|
33
|
+ index: number;
|
|
34
|
+ routes: Array<RouteType>;
|
|
35
|
+ };
|
39
|
36
|
};
|
40
|
37
|
|
41
|
38
|
type PropsType = {
|
42
|
39
|
state: {
|
43
|
|
- index: number,
|
44
|
|
- routes: Array<RouteType>,
|
45
|
|
- },
|
|
40
|
+ index: number;
|
|
41
|
+ routes: Array<RouteType>;
|
|
42
|
+ };
|
46
|
43
|
descriptors: {
|
47
|
44
|
[key: string]: {
|
48
|
45
|
options: {
|
49
|
|
- tabBarLabel: string,
|
50
|
|
- title: string,
|
51
|
|
- },
|
52
|
|
- },
|
53
|
|
- },
|
54
|
|
- navigation: StackNavigationProp,
|
55
|
|
- theme: CustomThemeType,
|
|
46
|
+ tabBarLabel: string;
|
|
47
|
+ title: string;
|
|
48
|
+ };
|
|
49
|
+ };
|
|
50
|
+ };
|
|
51
|
+ navigation: StackNavigationProp<any>;
|
|
52
|
+ theme: ReactNativePaper.Theme;
|
56
|
53
|
};
|
57
|
54
|
|
58
|
55
|
type StateType = {
|
59
|
|
- // eslint-disable-next-line flowtype/no-weak-types
|
60
|
|
- translateY: any,
|
|
56
|
+ translateY: any;
|
61
|
57
|
};
|
62
|
58
|
|
|
59
|
+type validRoutes = 'proxiwash' | 'services' | 'planning' | 'planex';
|
|
60
|
+
|
63
|
61
|
const TAB_ICONS = {
|
64
|
62
|
proxiwash: 'tshirt-crew',
|
65
|
63
|
services: 'account-circle',
|
|
@@ -70,8 +68,8 @@ const TAB_ICONS = {
|
70
|
68
|
class CustomTabBar extends React.Component<PropsType, StateType> {
|
71
|
69
|
static TAB_BAR_HEIGHT = 48;
|
72
|
70
|
|
73
|
|
- constructor() {
|
74
|
|
- super();
|
|
71
|
+ constructor(props: PropsType) {
|
|
72
|
+ super(props);
|
75
|
73
|
this.state = {
|
76
|
74
|
translateY: new Animated.Value(0),
|
77
|
75
|
};
|
|
@@ -86,13 +84,9 @@ class CustomTabBar extends React.Component<PropsType, StateType> {
|
86
|
84
|
*/
|
87
|
85
|
onItemPress(route: RouteType, currentIndex: number, destIndex: number) {
|
88
|
86
|
const {navigation} = this.props;
|
89
|
|
- const event = navigation.emit({
|
90
|
|
- type: 'tabPress',
|
91
|
|
- target: route.key,
|
92
|
|
- canPreventDefault: true,
|
93
|
|
- });
|
94
|
|
- if (currentIndex !== destIndex && !event.defaultPrevented)
|
|
87
|
+ if (currentIndex !== destIndex) {
|
95
|
88
|
navigation.navigate(route.name);
|
|
89
|
+ }
|
96
|
90
|
}
|
97
|
91
|
|
98
|
92
|
/**
|
|
@@ -102,13 +96,9 @@ class CustomTabBar extends React.Component<PropsType, StateType> {
|
102
|
96
|
*/
|
103
|
97
|
onItemLongPress(route: RouteType) {
|
104
|
98
|
const {navigation} = this.props;
|
105
|
|
- const event = navigation.emit({
|
106
|
|
- type: 'tabLongPress',
|
107
|
|
- target: route.key,
|
108
|
|
- canPreventDefault: true,
|
109
|
|
- });
|
110
|
|
- if (route.name === 'home' && !event.defaultPrevented)
|
|
99
|
+ if (route.name === 'home') {
|
111
|
100
|
navigation.navigate('game-start');
|
|
101
|
+ }
|
112
|
102
|
}
|
113
|
103
|
|
114
|
104
|
/**
|
|
@@ -126,11 +116,13 @@ class CustomTabBar extends React.Component<PropsType, StateType> {
|
126
|
116
|
* @param focused
|
127
|
117
|
* @returns {null}
|
128
|
118
|
*/
|
129
|
|
- getTabBarIcon = (route: RouteType, focused: boolean): React.Node => {
|
130
|
|
- let icon = TAB_ICONS[route.name];
|
|
119
|
+ getTabBarIcon = (route: RouteType, focused: boolean) => {
|
|
120
|
+ let icon = TAB_ICONS[route.name as validRoutes];
|
131
|
121
|
icon = focused ? icon : `${icon}-outline`;
|
132
|
|
- if (route.name !== 'home') return icon;
|
133
|
|
- return null;
|
|
122
|
+ if (route.name !== 'home') {
|
|
123
|
+ return icon;
|
|
124
|
+ }
|
|
125
|
+ return '';
|
134
|
126
|
};
|
135
|
127
|
|
136
|
128
|
/**
|
|
@@ -141,14 +133,18 @@ class CustomTabBar extends React.Component<PropsType, StateType> {
|
141
|
133
|
* @param index The index of the current route
|
142
|
134
|
* @returns {*}
|
143
|
135
|
*/
|
144
|
|
- getRenderIcon = (route: RouteType, index: number): React.Node => {
|
|
136
|
+ getRenderIcon = (route: RouteType, index: number) => {
|
145
|
137
|
const {props} = this;
|
146
|
138
|
const {state} = props;
|
147
|
139
|
const {options} = props.descriptors[route.key];
|
148
|
140
|
let label;
|
149
|
|
- if (options.tabBarLabel != null) label = options.tabBarLabel;
|
150
|
|
- else if (options.title != null) label = options.title;
|
151
|
|
- else label = route.name;
|
|
141
|
+ if (options.tabBarLabel != null) {
|
|
142
|
+ label = options.tabBarLabel;
|
|
143
|
+ } else if (options.title != null) {
|
|
144
|
+ label = options.title;
|
|
145
|
+ } else {
|
|
146
|
+ label = route.name;
|
|
147
|
+ }
|
152
|
148
|
|
153
|
149
|
const onPress = () => {
|
154
|
150
|
this.onItemPress(route, state.index, index);
|
|
@@ -186,7 +182,7 @@ class CustomTabBar extends React.Component<PropsType, StateType> {
|
186
|
182
|
);
|
187
|
183
|
};
|
188
|
184
|
|
189
|
|
- getIcons(): React.Node {
|
|
185
|
+ getIcons() {
|
190
|
186
|
const {props} = this;
|
191
|
187
|
return props.state.routes.map(this.getRenderIcon);
|
192
|
188
|
}
|
|
@@ -209,14 +205,12 @@ class CustomTabBar extends React.Component<PropsType, StateType> {
|
209
|
205
|
}
|
210
|
206
|
};
|
211
|
207
|
|
212
|
|
- render(): React.Node {
|
|
208
|
+ render() {
|
213
|
209
|
const {props, state} = this;
|
214
|
210
|
props.navigation.addListener('state', this.onRouteChange);
|
215
|
211
|
const icons = this.getIcons();
|
216
|
212
|
return (
|
217
|
|
- // $FlowFixMe
|
218
|
213
|
<Animated.View
|
219
|
|
- useNativeDriver
|
220
|
214
|
style={{
|
221
|
215
|
flexDirection: 'row',
|
222
|
216
|
height: CustomTabBar.TAB_BAR_HEIGHT,
|