Browse Source

Enabled rotation only on chosen screens and fixed sidemenu image on landscape

keplyx 2 years ago
parent
commit
fd3f900716
3 changed files with 93 additions and 136 deletions
  1. 42
    37
      components/BaseContainer.js
  2. 47
    45
      components/Sidebar.js
  3. 4
    54
      components/WebViewScreen.js

+ 42
- 37
components/BaseContainer.js View File

@@ -9,6 +9,7 @@ import {Platform, View} from "react-native";
9 9
 import ThemeManager from "../utils/ThemeManager";
10 10
 import Touchable from "react-native-platform-touchable";
11 11
 import {ScreenOrientation} from "expo";
12
+import {NavigationActions} from "react-navigation";
12 13
 
13 14
 
14 15
 type Props = {
@@ -19,6 +20,8 @@ type Props = {
19 20
     hasTabs: boolean,
20 21
     hasBackButton: boolean,
21 22
     hasSideMenu: boolean,
23
+    enableRotation: boolean,
24
+    hideHeaderOnLandscape: boolean,
22 25
 }
23 26
 
24 27
 type State = {
@@ -37,6 +40,8 @@ export default class BaseContainer extends React.Component<Props, State> {
37 40
         hasTabs: false,
38 41
         hasBackButton: false,
39 42
         hasSideMenu: true,
43
+        enableRotation: false,
44
+        hideHeaderOnLandscape: false,
40 45
     };
41 46
 
42 47
 
@@ -59,18 +64,31 @@ export default class BaseContainer extends React.Component<Props, State> {
59 64
      * Register for blur event to close side menu on screen change
60 65
      */
61 66
     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});
67
+        this.willFocusSubscription = this.props.navigation.addListener(
68
+            'willFocus',
69
+            payload => {
70
+                if (this.props.enableRotation) {
71
+                    ScreenOrientation.unlockAsync();
72
+                    ScreenOrientation.addOrientationChangeListener((OrientationChangeEvent) => {
73
+                        if (this.props.hideHeaderOnLandscape) {
74
+                            let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE ||
75
+                                OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
76
+                                OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
77
+                            this.setState({isHeaderVisible: !isLandscape});
78
+                            const setParamsAction = NavigationActions.setParams({
79
+                                params: {showTabBar: !isLandscape},
80
+                                key: this.props.navigation.state.key,
81
+                            });
82
+                            this.props.navigation.dispatch(setParamsAction);
83
+                        }
84
+                    });
85
+                }
69 86
             });
70
-        });
71 87
         this.willBlurSubscription = this.props.navigation.addListener(
72 88
             'willBlur',
73 89
             payload => {
90
+                if (this.props.enableRotation)
91
+                    ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT);
74 92
                 this.setState({isOpen: false});
75 93
             }
76 94
         );
@@ -104,7 +122,7 @@ export default class BaseContainer extends React.Component<Props, State> {
104 122
                         rightButton={this.props.headerRightButton}
105 123
                         hasTabs={this.props.hasTabs}
106 124
                         hasBackButton={this.props.hasBackButton}/>
107
-                    : null}
125
+                    : <View style={{paddingTop: 20}}/>}
108 126
                 {this.props.children}
109 127
             </Container>
110 128
         );
@@ -112,33 +130,20 @@ export default class BaseContainer extends React.Component<Props, State> {
112 130
 
113 131
 
114 132
     render() {
115
-        // if (this.state.isHeaderVisible) {
116
-            return (
117
-                <View style={{
118
-                    backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
119
-                    width: '100%',
120
-                    height: '100%'
121
-                }}>
122
-                    {this.props.hasSideMenu ?
123
-                        <CustomSideMenu
124
-                            navigation={this.props.navigation} isOpen={this.state.isOpen}
125
-                            onChange={(isOpen) => this.updateMenuState(isOpen)}>
126
-                            {this.getMainContainer()}
127
-                        </CustomSideMenu> :
128
-                        this.getMainContainer()}
129
-                </View>
130
-            );
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
-        // }
142
-
133
+        return (
134
+            <View style={{
135
+                backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
136
+                width: '100%',
137
+                height: '100%'
138
+            }}>
139
+                {this.props.hasSideMenu ?
140
+                    <CustomSideMenu
141
+                        navigation={this.props.navigation} isOpen={this.state.isOpen}
142
+                        onChange={(isOpen) => this.updateMenuState(isOpen)}>
143
+                        {this.getMainContainer()}
144
+                    </CustomSideMenu> :
145
+                    this.getMainContainer()}
146
+            </View>
147
+        );
143 148
     }
144 149
 }

+ 47
- 45
components/Sidebar.js View File

@@ -78,50 +78,52 @@ export default class SideBar extends React.Component<Props, State> {
78 78
 
79 79
     render() {
80 80
         return (
81
-            <Container style={{backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor}}>
82
-                    <Image source={drawerCover} style={styles.drawerCover}/>
83
-                    <FlatList
84
-                        data={this.dataSet}
85
-                        extraData={this.state}
86
-                        keyExtractor={(item) => item.route}
87
-                        renderItem={({item}) =>
88
-                            <ListItem
89
-                                button
90
-                                noBorder
91
-                                selected={this.state.active === item.route}
92
-                                onPress={() => {
93
-                                    if (item.link !== undefined)
94
-                                        Linking.openURL(item.link).catch((err) => console.error('Error opening link', err));
95
-                                    else
96
-                                        this.navigateToScreen(item.route);
97
-                                }}
98
-                            >
99
-                                <Left>
100
-                                    <CustomMaterialIcon
101
-                                        icon={item.icon}
102
-                                        active={this.state.active === item.route}
103
-                                    />
104
-                                    <Text style={styles.text}>
105
-                                        {item.name}
106
-                                    </Text>
107
-                                </Left>
108
-                                {item.types &&
109
-                                <Right style={{flex: 1}}>
110
-                                    <Badge
111
-                                        style={{
112
-                                            borderRadius: 3,
113
-                                            height: 25,
114
-                                            width: 72,
115
-                                            backgroundColor: item.bg
116
-                                        }}
117
-                                    >
118
-                                        <Text
119
-                                            style={styles.badgeText}
120
-                                        >{`${item.types} Types`}</Text>
121
-                                    </Badge>
122
-                                </Right>}
123
-                            </ListItem>}
124
-                    />
81
+            <Container style={{
82
+                backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
83
+            }}>
84
+                <Image source={drawerCover} style={styles.drawerCover}/>
85
+                <FlatList
86
+                    data={this.dataSet}
87
+                    extraData={this.state}
88
+                    keyExtractor={(item) => item.route}
89
+                    renderItem={({item}) =>
90
+                        <ListItem
91
+                            button
92
+                            noBorder
93
+                            selected={this.state.active === item.route}
94
+                            onPress={() => {
95
+                                if (item.link !== undefined)
96
+                                    Linking.openURL(item.link).catch((err) => console.error('Error opening link', err));
97
+                                else
98
+                                    this.navigateToScreen(item.route);
99
+                            }}
100
+                        >
101
+                            <Left>
102
+                                <CustomMaterialIcon
103
+                                    icon={item.icon}
104
+                                    active={this.state.active === item.route}
105
+                                />
106
+                                <Text style={styles.text}>
107
+                                    {item.name}
108
+                                </Text>
109
+                            </Left>
110
+                            {item.types &&
111
+                            <Right style={{flex: 1}}>
112
+                                <Badge
113
+                                    style={{
114
+                                        borderRadius: 3,
115
+                                        height: 25,
116
+                                        width: 72,
117
+                                        backgroundColor: item.bg
118
+                                    }}
119
+                                >
120
+                                    <Text
121
+                                        style={styles.badgeText}
122
+                                    >{`${item.types} Types`}</Text>
123
+                                </Badge>
124
+                            </Right>}
125
+                        </ListItem>}
126
+                />
125 127
             </Container>
126 128
         );
127 129
     }
@@ -130,7 +132,7 @@ export default class SideBar extends React.Component<Props, State> {
130 132
 const styles = StyleSheet.create({
131 133
     drawerCover: {
132 134
         height: deviceHeight / 5,
133
-        width: null,
135
+        width: deviceHeight / 2.5,
134 136
         position: "relative",
135 137
         marginBottom: 10,
136 138
         marginTop: 20

+ 4
- 54
components/WebViewScreen.js View File

@@ -8,7 +8,6 @@ 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 11
 import {NavigationActions} from 'react-navigation';
13 12
 
14 13
 type Props = {
@@ -25,67 +24,17 @@ type Props = {
25 24
     hasFooter: boolean,
26 25
 }
27 26
 
28
-type State = {
29
-    isLandscape: boolean,
30
-}
31
-
32 27
 /**
33 28
  * Class defining a webview screen.
34 29
  */
35
-export default class WebViewScreen extends React.Component<Props, State> {
30
+export default class WebViewScreen extends React.Component<Props> {
36 31
 
37 32
     static defaultProps = {
38 33
         hasBackButton: false,
39 34
         hasSideMenu: true,
40 35
         hasFooter: true,
41 36
     };
42
-
43
-    state = {
44
-        isLandscape: false,
45
-    };
46
-
47 37
     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
-    }
89 38
 
90 39
     openWebLink(url: string) {
91 40
         Linking.openURL(url).catch((err) => console.error('Error opening link', err));
@@ -189,7 +138,9 @@ export default class WebViewScreen extends React.Component<Props, State> {
189 138
                 headerTitle={this.props.headerTitle}
190 139
                 headerRightButton={this.getRefreshButton()}
191 140
                 hasBackButton={this.props.hasHeaderBackButton}
192
-                hasSideMenu={this.props.hasSideMenu}>
141
+                hasSideMenu={this.props.hasSideMenu}
142
+                enableRotation={true}
143
+                hideHeaderOnLandscape={true}>
193 144
                 {this.props.data.length === 1 ?
194 145
                     this.getWebview(this.props.data[0]) :
195 146
                     <Tabs
@@ -198,7 +149,6 @@ export default class WebViewScreen extends React.Component<Props, State> {
198 149
                         }}
199 150
                         locked={true}
200 151
                         style = {{
201
-                            paddingTop: this.state.isLandscape ? 20 : 0,
202 152
                             backgroundColor: Platform.OS === 'ios' ?
203 153
                                 ThemeManager.getCurrentThemeVariables().tabDefaultBg :
204 154
                                 ThemeManager.getCurrentThemeVariables().brandPrimary

Loading…
Cancel
Save