|
@@ -1,13 +1,14 @@
|
1
|
1
|
// @flow
|
2
|
2
|
|
3
|
3
|
import * as React from 'react';
|
4
|
|
-import {Container, Right} from "native-base";
|
|
4
|
+import {Container} from "native-base";
|
5
|
5
|
import CustomHeader from "./CustomHeader";
|
6
|
6
|
import CustomSideMenu from "./CustomSideMenu";
|
7
|
7
|
import CustomMaterialIcon from "./CustomMaterialIcon";
|
8
|
8
|
import {Platform, View} from "react-native";
|
9
|
9
|
import ThemeManager from "../utils/ThemeManager";
|
10
|
10
|
import Touchable from "react-native-platform-touchable";
|
|
11
|
+import {ScreenOrientation} from "expo";
|
11
|
12
|
|
12
|
13
|
|
13
|
14
|
type Props = {
|
|
@@ -18,29 +19,30 @@ type Props = {
|
18
|
19
|
hasTabs: boolean,
|
19
|
20
|
hasBackButton: boolean,
|
20
|
21
|
hasSideMenu: boolean,
|
21
|
|
- isHeaderVisible: boolean
|
22
|
22
|
}
|
23
|
23
|
|
24
|
24
|
type State = {
|
25
|
|
- isOpen: boolean
|
|
25
|
+ isOpen: boolean,
|
|
26
|
+ isHeaderVisible: boolean
|
26
|
27
|
}
|
27
|
28
|
|
28
|
29
|
|
29
|
30
|
export default class BaseContainer extends React.Component<Props, State> {
|
30
|
31
|
|
31
|
32
|
willBlurSubscription: function;
|
|
33
|
+ willFocusSubscription: function;
|
32
|
34
|
|
33
|
35
|
static defaultProps = {
|
34
|
36
|
headerRightButton: <View/>,
|
35
|
37
|
hasTabs: false,
|
36
|
38
|
hasBackButton: false,
|
37
|
39
|
hasSideMenu: true,
|
38
|
|
- isHeaderVisible: true,
|
39
|
40
|
};
|
40
|
41
|
|
41
|
42
|
|
42
|
43
|
state = {
|
43
|
44
|
isOpen: false,
|
|
45
|
+ isHeaderVisible: true,
|
44
|
46
|
};
|
45
|
47
|
|
46
|
48
|
toggle() {
|
|
@@ -57,6 +59,15 @@ export default class BaseContainer extends React.Component<Props, State> {
|
57
|
59
|
* Register for blur event to close side menu on screen change
|
58
|
60
|
*/
|
59
|
61
|
componentDidMount() {
|
|
62
|
+ this.willFocusSubscription = this.props.navigation.addListener('willFocus', payload => {
|
|
63
|
+ ScreenOrientation.unlockAsync();
|
|
64
|
+ ScreenOrientation.addOrientationChangeListener((OrientationChangeEvent) => {
|
|
65
|
+ let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE ||
|
|
66
|
+ OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
|
|
67
|
+ OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
|
|
68
|
+ this.setState({isHeaderVisible: !isLandscape});
|
|
69
|
+ });
|
|
70
|
+ });
|
60
|
71
|
this.willBlurSubscription = this.props.navigation.addListener(
|
61
|
72
|
'willBlur',
|
62
|
73
|
payload => {
|
|
@@ -71,25 +82,29 @@ export default class BaseContainer extends React.Component<Props, State> {
|
71
|
82
|
componentWillUnmount() {
|
72
|
83
|
if (this.willBlurSubscription !== undefined)
|
73
|
84
|
this.willBlurSubscription.remove();
|
|
85
|
+ if (this.willFocusSubscription !== undefined)
|
|
86
|
+ this.willFocusSubscription.remove();
|
74
|
87
|
}
|
75
|
88
|
|
76
|
89
|
getMainContainer() {
|
77
|
90
|
return (
|
78
|
91
|
<Container>
|
79
|
|
- <CustomHeader
|
80
|
|
- navigation={this.props.navigation} title={this.props.headerTitle}
|
81
|
|
- leftButton={
|
82
|
|
- <Touchable
|
83
|
|
- style={{padding: 6}}
|
84
|
|
- onPress={() => this.toggle()}>
|
85
|
|
- <CustomMaterialIcon
|
86
|
|
- color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
|
87
|
|
- icon="menu"/>
|
88
|
|
- </Touchable>
|
89
|
|
- }
|
90
|
|
- rightButton={this.props.headerRightButton}
|
91
|
|
- hasTabs={this.props.hasTabs}
|
92
|
|
- hasBackButton={this.props.hasBackButton}/>
|
|
92
|
+ {this.state.isHeaderVisible ?
|
|
93
|
+ <CustomHeader
|
|
94
|
+ navigation={this.props.navigation} title={this.props.headerTitle}
|
|
95
|
+ leftButton={
|
|
96
|
+ <Touchable
|
|
97
|
+ style={{padding: 6}}
|
|
98
|
+ onPress={() => this.toggle()}>
|
|
99
|
+ <CustomMaterialIcon
|
|
100
|
+ color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
|
|
101
|
+ icon="menu"/>
|
|
102
|
+ </Touchable>
|
|
103
|
+ }
|
|
104
|
+ rightButton={this.props.headerRightButton}
|
|
105
|
+ hasTabs={this.props.hasTabs}
|
|
106
|
+ hasBackButton={this.props.hasBackButton}/>
|
|
107
|
+ : null}
|
93
|
108
|
{this.props.children}
|
94
|
109
|
</Container>
|
95
|
110
|
);
|
|
@@ -97,7 +112,7 @@ export default class BaseContainer extends React.Component<Props, State> {
|
97
|
112
|
|
98
|
113
|
|
99
|
114
|
render() {
|
100
|
|
- if (this.props.isHeaderVisible) {
|
|
115
|
+ // if (this.state.isHeaderVisible) {
|
101
|
116
|
return (
|
102
|
117
|
<View style={{
|
103
|
118
|
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
|
|
@@ -113,17 +128,17 @@ export default class BaseContainer extends React.Component<Props, State> {
|
113
|
128
|
this.getMainContainer()}
|
114
|
129
|
</View>
|
115
|
130
|
);
|
116
|
|
- } else {
|
117
|
|
- return (
|
118
|
|
- <View style={{
|
119
|
|
- backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
|
120
|
|
- width: '100%',
|
121
|
|
- height: '100%'
|
122
|
|
- }}>
|
123
|
|
- {this.props.children}
|
124
|
|
- </View>
|
125
|
|
- );
|
126
|
|
- }
|
|
131
|
+ // } else {
|
|
132
|
+ // return (
|
|
133
|
+ // <View style={{
|
|
134
|
+ // backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
|
|
135
|
+ // width: '100%',
|
|
136
|
+ // height: '100%'
|
|
137
|
+ // }}>
|
|
138
|
+ // {this.props.children}
|
|
139
|
+ // </View>
|
|
140
|
+ // );
|
|
141
|
+ // }
|
127
|
142
|
|
128
|
143
|
}
|
129
|
144
|
}
|