Browse Source

Hide webview header and tabs on landscape

keplyx 4 years ago
parent
commit
bb0ff390a9

+ 30
- 15
components/BaseContainer.js View File

@@ -18,6 +18,7 @@ type Props = {
18 18
     hasTabs: boolean,
19 19
     hasBackButton: boolean,
20 20
     hasSideMenu: boolean,
21
+    isHeaderVisible: boolean
21 22
 }
22 23
 
23 24
 type State = {
@@ -34,6 +35,7 @@ export default class BaseContainer extends React.Component<Props, State> {
34 35
         hasTabs: false,
35 36
         hasBackButton: false,
36 37
         hasSideMenu: true,
38
+        isHeaderVisible: true,
37 39
     };
38 40
 
39 41
 
@@ -95,20 +97,33 @@ export default class BaseContainer extends React.Component<Props, State> {
95 97
 
96 98
 
97 99
     render() {
98
-        return (
99
-            <View style={{
100
-                backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
101
-                width: '100%',
102
-                height: '100%'
103
-            }}>
104
-                {this.props.hasSideMenu ?
105
-                    <CustomSideMenu
106
-                        navigation={this.props.navigation} isOpen={this.state.isOpen}
107
-                        onChange={(isOpen) => this.updateMenuState(isOpen)}>
108
-                        {this.getMainContainer()}
109
-                    </CustomSideMenu> :
110
-                    this.getMainContainer()}
111
-            </View>
112
-        );
100
+        if (this.props.isHeaderVisible) {
101
+            return (
102
+                <View style={{
103
+                    backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
104
+                    width: '100%',
105
+                    height: '100%'
106
+                }}>
107
+                    {this.props.hasSideMenu ?
108
+                        <CustomSideMenu
109
+                            navigation={this.props.navigation} isOpen={this.state.isOpen}
110
+                            onChange={(isOpen) => this.updateMenuState(isOpen)}>
111
+                            {this.getMainContainer()}
112
+                        </CustomSideMenu> :
113
+                        this.getMainContainer()}
114
+                </View>
115
+            );
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
+        }
127
+
113 128
     }
114 129
 }

+ 54
- 2
components/WebViewScreen.js View File

@@ -8,6 +8,8 @@ import Touchable from "react-native-platform-touchable";
8 8
 import CustomMaterialIcon from "../components/CustomMaterialIcon";
9 9
 import ThemeManager from "../utils/ThemeManager";
10 10
 import BaseContainer from "../components/BaseContainer";
11
+import {ScreenOrientation} from 'expo';
12
+import {NavigationActions} from 'react-navigation';
11 13
 
12 14
 type Props = {
13 15
     navigation: Object,
@@ -23,10 +25,14 @@ type Props = {
23 25
     hasFooter: boolean,
24 26
 }
25 27
 
28
+type State = {
29
+    isLandscape: boolean,
30
+}
31
+
26 32
 /**
27 33
  * Class defining a webview screen.
28 34
  */
29
-export default class WebViewScreen extends React.Component<Props> {
35
+export default class WebViewScreen extends React.Component<Props, State> {
30 36
 
31 37
     static defaultProps = {
32 38
         hasBackButton: false,
@@ -34,7 +40,52 @@ export default class WebViewScreen extends React.Component<Props> {
34 40
         hasFooter: true,
35 41
     };
36 42
 
43
+    state = {
44
+        isLandscape: false,
45
+    };
46
+
37 47
     webviewArray: Array<WebView> = [];
48
+    willFocusSubscription: function;
49
+    willBlurSubscription: function;
50
+
51
+    /**
52
+     * Register for blur event to close side menu on screen change
53
+     */
54
+    componentDidMount() {
55
+        this.willFocusSubscription = this.props.navigation.addListener(
56
+            'willFocus',
57
+            payload => {
58
+                ScreenOrientation.unlockAsync();
59
+                ScreenOrientation.addOrientationChangeListener((OrientationChangeEvent) => {
60
+                    let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE ||
61
+                        OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
62
+                        OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
63
+                    this.setState({isLandscape: isLandscape});
64
+                    const setParamsAction = NavigationActions.setParams({
65
+                        params: {showTabBar: !isLandscape},
66
+                        key: this.props.navigation.state.key,
67
+                    });
68
+                    this.props.navigation.dispatch(setParamsAction);
69
+                });
70
+            }
71
+        );
72
+        this.willBlurSubscription = this.props.navigation.addListener(
73
+            'willBlur',
74
+            payload => {
75
+                ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT);
76
+            }
77
+        );
78
+    }
79
+
80
+    /**
81
+     * Unregister from event when un-mounting components
82
+     */
83
+    componentWillUnmount() {
84
+        if (this.willBlurSubscription !== undefined)
85
+            this.willBlurSubscription.remove();
86
+        if (this.willFocusSubscription !== undefined)
87
+            this.willFocusSubscription.remove();
88
+    }
38 89
 
39 90
     openWebLink(url: string) {
40 91
         Linking.openURL(url).catch((err) => console.error('Error opening link', err));
@@ -138,7 +189,8 @@ export default class WebViewScreen extends React.Component<Props> {
138 189
                 headerTitle={this.props.headerTitle}
139 190
                 headerRightButton={this.getRefreshButton()}
140 191
                 hasBackButton={this.props.hasHeaderBackButton}
141
-                hasSideMenu={this.props.hasSideMenu}>
192
+                hasSideMenu={this.props.hasSideMenu}
193
+                isHeaderVisible={!this.state.isLandscape}>
142 194
                 {this.props.data.length === 1 ?
143 195
                     this.getWebview(this.props.data[0]) :
144 196
                     <Tabs

+ 10
- 2
navigation/MainTabNavigator.js View File

@@ -24,14 +24,22 @@ function createMaterialBottomTabNavigatorWithInitialRoute(initialRoute: string)
24 24
         Planning: {screen: PlanningScreen,},
25 25
         Proxiwash: {screen: ProxiwashScreen,},
26 26
         Proximo: {screen: ProximoMainScreen,},
27
-        Planex: {screen: PlanexScreen},
27
+        Planex: {
28
+            screen: PlanexScreen,
29
+            navigationOptions: ({ navigation }) => {
30
+                const showTabBar = navigation.state && navigation.state.params ? navigation.state.params.showTabBar : true;
31
+                return {
32
+                    tabBarVisible: showTabBar,
33
+                };
34
+            },},
28 35
     }, {
29 36
         defaultNavigationOptions: ({navigation}) => ({
30 37
             tabBarIcon: ({focused, horizontal, tintColor}) => {
31 38
                 let icon = TAB_ICONS[navigation.state.routeName];
32 39
 
33 40
                 return <CustomMaterialIcon icon={icon} color={tintColor}/>;
34
-            }
41
+            },
42
+            tabBarVisible: true,
35 43
         }),
36 44
         order: ['Proximo', 'Planning', 'Home', 'Proxiwash', 'Planex'],
37 45
         initialRouteName: initialRoute,

+ 2
- 2
screens/AvailableRoomScreen.js View File

@@ -30,8 +30,8 @@ export default class AvailableRoomScreen extends React.Component<Props> {
30 30
             'document.querySelector(\'head\').innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=1.0">\';' +
31 31
             'document.querySelector(\'head\').innerHTML += \'<link rel="stylesheet" href="' + CUSTOM_CSS_GENERAL + '" type="text/css"/>\';' +
32 32
             'let header = $(".table tbody tr:first");' +
33
-            '$("table").prepend("<thead></thead>");' +
34
-            '$("thead").append(header);';
33
+            '$("table").prepend("<thead></thead>");true;' + // Fix for crash on ios
34
+            '$("thead").append(header);true;';
35 35
 
36 36
         this.customBibInjectedJS =
37 37
             'document.querySelector(\'head\').innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=1.0">\';' +

Loading…
Cancel
Save