From fd3f9007168f6b51553a5677e6d8527767eacf56 Mon Sep 17 00:00:00 2001
From: keplyx <keplyx@gmail.com>
Date: Wed, 29 Jan 2020 09:30:27 +0100
Subject: [PATCH] Enabled rotation only on chosen screens and fixed sidemenu
 image on landscape

---
 components/BaseContainer.js | 79 ++++++++++++++++---------------
 components/Sidebar.js       | 92 +++++++++++++++++++------------------
 components/WebViewScreen.js | 58 ++---------------------
 3 files changed, 93 insertions(+), 136 deletions(-)

diff --git a/components/BaseContainer.js b/components/BaseContainer.js
index 30d1889..e0935c9 100644
--- a/components/BaseContainer.js
+++ b/components/BaseContainer.js
@@ -9,6 +9,7 @@ import {Platform, View} from "react-native";
 import ThemeManager from "../utils/ThemeManager";
 import Touchable from "react-native-platform-touchable";
 import {ScreenOrientation} from "expo";
+import {NavigationActions} from "react-navigation";
 
 
 type Props = {
@@ -19,6 +20,8 @@ type Props = {
     hasTabs: boolean,
     hasBackButton: boolean,
     hasSideMenu: boolean,
+    enableRotation: boolean,
+    hideHeaderOnLandscape: boolean,
 }
 
 type State = {
@@ -37,6 +40,8 @@ export default class BaseContainer extends React.Component<Props, State> {
         hasTabs: false,
         hasBackButton: false,
         hasSideMenu: true,
+        enableRotation: false,
+        hideHeaderOnLandscape: false,
     };
 
 
@@ -59,18 +64,31 @@ export default class BaseContainer extends React.Component<Props, State> {
      * Register for blur event to close side menu on screen change
      */
     componentDidMount() {
-        this.willFocusSubscription = this.props.navigation.addListener('willFocus', payload => {
-            ScreenOrientation.unlockAsync();
-            ScreenOrientation.addOrientationChangeListener((OrientationChangeEvent) => {
-                let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE ||
-                    OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
-                    OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
-                this.setState({isHeaderVisible: !isLandscape});
+        this.willFocusSubscription = this.props.navigation.addListener(
+            'willFocus',
+            payload => {
+                if (this.props.enableRotation) {
+                    ScreenOrientation.unlockAsync();
+                    ScreenOrientation.addOrientationChangeListener((OrientationChangeEvent) => {
+                        if (this.props.hideHeaderOnLandscape) {
+                            let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE ||
+                                OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
+                                OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
+                            this.setState({isHeaderVisible: !isLandscape});
+                            const setParamsAction = NavigationActions.setParams({
+                                params: {showTabBar: !isLandscape},
+                                key: this.props.navigation.state.key,
+                            });
+                            this.props.navigation.dispatch(setParamsAction);
+                        }
+                    });
+                }
             });
-        });
         this.willBlurSubscription = this.props.navigation.addListener(
             'willBlur',
             payload => {
+                if (this.props.enableRotation)
+                    ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT);
                 this.setState({isOpen: false});
             }
         );
@@ -104,7 +122,7 @@ export default class BaseContainer extends React.Component<Props, State> {
                         rightButton={this.props.headerRightButton}
                         hasTabs={this.props.hasTabs}
                         hasBackButton={this.props.hasBackButton}/>
-                    : null}
+                    : <View style={{paddingTop: 20}}/>}
                 {this.props.children}
             </Container>
         );
@@ -112,33 +130,20 @@ export default class BaseContainer extends React.Component<Props, State> {
 
 
     render() {
-        // if (this.state.isHeaderVisible) {
-            return (
-                <View style={{
-                    backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
-                    width: '100%',
-                    height: '100%'
-                }}>
-                    {this.props.hasSideMenu ?
-                        <CustomSideMenu
-                            navigation={this.props.navigation} isOpen={this.state.isOpen}
-                            onChange={(isOpen) => this.updateMenuState(isOpen)}>
-                            {this.getMainContainer()}
-                        </CustomSideMenu> :
-                        this.getMainContainer()}
-                </View>
-            );
-        // } else {
-        //     return (
-        //         <View style={{
-        //             backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
-        //             width: '100%',
-        //             height: '100%'
-        //         }}>
-        //             {this.props.children}
-        //         </View>
-        //     );
-        // }
-
+        return (
+            <View style={{
+                backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
+                width: '100%',
+                height: '100%'
+            }}>
+                {this.props.hasSideMenu ?
+                    <CustomSideMenu
+                        navigation={this.props.navigation} isOpen={this.state.isOpen}
+                        onChange={(isOpen) => this.updateMenuState(isOpen)}>
+                        {this.getMainContainer()}
+                    </CustomSideMenu> :
+                    this.getMainContainer()}
+            </View>
+        );
     }
 }
diff --git a/components/Sidebar.js b/components/Sidebar.js
index c7036dd..5756f55 100644
--- a/components/Sidebar.js
+++ b/components/Sidebar.js
@@ -78,50 +78,52 @@ export default class SideBar extends React.Component<Props, State> {
 
     render() {
         return (
-            <Container style={{backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor}}>
-                    <Image source={drawerCover} style={styles.drawerCover}/>
-                    <FlatList
-                        data={this.dataSet}
-                        extraData={this.state}
-                        keyExtractor={(item) => item.route}
-                        renderItem={({item}) =>
-                            <ListItem
-                                button
-                                noBorder
-                                selected={this.state.active === item.route}
-                                onPress={() => {
-                                    if (item.link !== undefined)
-                                        Linking.openURL(item.link).catch((err) => console.error('Error opening link', err));
-                                    else
-                                        this.navigateToScreen(item.route);
-                                }}
-                            >
-                                <Left>
-                                    <CustomMaterialIcon
-                                        icon={item.icon}
-                                        active={this.state.active === item.route}
-                                    />
-                                    <Text style={styles.text}>
-                                        {item.name}
-                                    </Text>
-                                </Left>
-                                {item.types &&
-                                <Right style={{flex: 1}}>
-                                    <Badge
-                                        style={{
-                                            borderRadius: 3,
-                                            height: 25,
-                                            width: 72,
-                                            backgroundColor: item.bg
-                                        }}
-                                    >
-                                        <Text
-                                            style={styles.badgeText}
-                                        >{`${item.types} Types`}</Text>
-                                    </Badge>
-                                </Right>}
-                            </ListItem>}
-                    />
+            <Container style={{
+                backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
+            }}>
+                <Image source={drawerCover} style={styles.drawerCover}/>
+                <FlatList
+                    data={this.dataSet}
+                    extraData={this.state}
+                    keyExtractor={(item) => item.route}
+                    renderItem={({item}) =>
+                        <ListItem
+                            button
+                            noBorder
+                            selected={this.state.active === item.route}
+                            onPress={() => {
+                                if (item.link !== undefined)
+                                    Linking.openURL(item.link).catch((err) => console.error('Error opening link', err));
+                                else
+                                    this.navigateToScreen(item.route);
+                            }}
+                        >
+                            <Left>
+                                <CustomMaterialIcon
+                                    icon={item.icon}
+                                    active={this.state.active === item.route}
+                                />
+                                <Text style={styles.text}>
+                                    {item.name}
+                                </Text>
+                            </Left>
+                            {item.types &&
+                            <Right style={{flex: 1}}>
+                                <Badge
+                                    style={{
+                                        borderRadius: 3,
+                                        height: 25,
+                                        width: 72,
+                                        backgroundColor: item.bg
+                                    }}
+                                >
+                                    <Text
+                                        style={styles.badgeText}
+                                    >{`${item.types} Types`}</Text>
+                                </Badge>
+                            </Right>}
+                        </ListItem>}
+                />
             </Container>
         );
     }
@@ -130,7 +132,7 @@ export default class SideBar extends React.Component<Props, State> {
 const styles = StyleSheet.create({
     drawerCover: {
         height: deviceHeight / 5,
-        width: null,
+        width: deviceHeight / 2.5,
         position: "relative",
         marginBottom: 10,
         marginTop: 20
diff --git a/components/WebViewScreen.js b/components/WebViewScreen.js
index 59dd396..5ca209a 100644
--- a/components/WebViewScreen.js
+++ b/components/WebViewScreen.js
@@ -8,7 +8,6 @@ import Touchable from "react-native-platform-touchable";
 import CustomMaterialIcon from "../components/CustomMaterialIcon";
 import ThemeManager from "../utils/ThemeManager";
 import BaseContainer from "../components/BaseContainer";
-import {ScreenOrientation} from 'expo';
 import {NavigationActions} from 'react-navigation';
 
 type Props = {
@@ -25,67 +24,17 @@ type Props = {
     hasFooter: boolean,
 }
 
-type State = {
-    isLandscape: boolean,
-}
-
 /**
  * Class defining a webview screen.
  */
-export default class WebViewScreen extends React.Component<Props, State> {
+export default class WebViewScreen extends React.Component<Props> {
 
     static defaultProps = {
         hasBackButton: false,
         hasSideMenu: true,
         hasFooter: true,
     };
-
-    state = {
-        isLandscape: false,
-    };
-
     webviewArray: Array<WebView> = [];
-    willFocusSubscription: function;
-    willBlurSubscription: function;
-
-    /**
-     * Register for blur event to close side menu on screen change
-     */
-    componentDidMount() {
-        this.willFocusSubscription = this.props.navigation.addListener(
-            'willFocus',
-            payload => {
-                ScreenOrientation.unlockAsync();
-                ScreenOrientation.addOrientationChangeListener((OrientationChangeEvent) => {
-                    let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE ||
-                        OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
-                        OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
-                    this.setState({isLandscape: isLandscape});
-                    const setParamsAction = NavigationActions.setParams({
-                        params: {showTabBar: !isLandscape},
-                        key: this.props.navigation.state.key,
-                    });
-                    this.props.navigation.dispatch(setParamsAction);
-                });
-            }
-        );
-        this.willBlurSubscription = this.props.navigation.addListener(
-            'willBlur',
-            payload => {
-                ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT);
-            }
-        );
-    }
-
-    /**
-     * Unregister from event when un-mounting components
-     */
-    componentWillUnmount() {
-        if (this.willBlurSubscription !== undefined)
-            this.willBlurSubscription.remove();
-        if (this.willFocusSubscription !== undefined)
-            this.willFocusSubscription.remove();
-    }
 
     openWebLink(url: string) {
         Linking.openURL(url).catch((err) => console.error('Error opening link', err));
@@ -189,7 +138,9 @@ export default class WebViewScreen extends React.Component<Props, State> {
                 headerTitle={this.props.headerTitle}
                 headerRightButton={this.getRefreshButton()}
                 hasBackButton={this.props.hasHeaderBackButton}
-                hasSideMenu={this.props.hasSideMenu}>
+                hasSideMenu={this.props.hasSideMenu}
+                enableRotation={true}
+                hideHeaderOnLandscape={true}>
                 {this.props.data.length === 1 ?
                     this.getWebview(this.props.data[0]) :
                     <Tabs
@@ -198,7 +149,6 @@ export default class WebViewScreen extends React.Component<Props, State> {
                         }}
                         locked={true}
                         style = {{
-                            paddingTop: this.state.isLandscape ? 20 : 0,
                             backgroundColor: Platform.OS === 'ios' ?
                                 ThemeManager.getCurrentThemeVariables().tabDefaultBg :
                                 ThemeManager.getCurrentThemeVariables().brandPrimary