forked from vergnet/application-amicale
Enabled rotation only on chosen screens and fixed sidemenu image on landscape
This commit is contained in:
parent
57725b2eef
commit
fd3f900716
3 changed files with 93 additions and 136 deletions
|
@ -9,6 +9,7 @@ import {Platform, View} from "react-native";
|
||||||
import ThemeManager from "../utils/ThemeManager";
|
import ThemeManager from "../utils/ThemeManager";
|
||||||
import Touchable from "react-native-platform-touchable";
|
import Touchable from "react-native-platform-touchable";
|
||||||
import {ScreenOrientation} from "expo";
|
import {ScreenOrientation} from "expo";
|
||||||
|
import {NavigationActions} from "react-navigation";
|
||||||
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
@ -19,6 +20,8 @@ type Props = {
|
||||||
hasTabs: boolean,
|
hasTabs: boolean,
|
||||||
hasBackButton: boolean,
|
hasBackButton: boolean,
|
||||||
hasSideMenu: boolean,
|
hasSideMenu: boolean,
|
||||||
|
enableRotation: boolean,
|
||||||
|
hideHeaderOnLandscape: boolean,
|
||||||
}
|
}
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
|
@ -37,6 +40,8 @@ export default class BaseContainer extends React.Component<Props, State> {
|
||||||
hasTabs: false,
|
hasTabs: false,
|
||||||
hasBackButton: false,
|
hasBackButton: false,
|
||||||
hasSideMenu: true,
|
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
|
* Register for blur event to close side menu on screen change
|
||||||
*/
|
*/
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.willFocusSubscription = this.props.navigation.addListener('willFocus', payload => {
|
this.willFocusSubscription = this.props.navigation.addListener(
|
||||||
|
'willFocus',
|
||||||
|
payload => {
|
||||||
|
if (this.props.enableRotation) {
|
||||||
ScreenOrientation.unlockAsync();
|
ScreenOrientation.unlockAsync();
|
||||||
ScreenOrientation.addOrientationChangeListener((OrientationChangeEvent) => {
|
ScreenOrientation.addOrientationChangeListener((OrientationChangeEvent) => {
|
||||||
|
if (this.props.hideHeaderOnLandscape) {
|
||||||
let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE ||
|
let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE ||
|
||||||
OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
|
OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
|
||||||
OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
|
OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
|
||||||
this.setState({isHeaderVisible: !isLandscape});
|
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(
|
this.willBlurSubscription = this.props.navigation.addListener(
|
||||||
'willBlur',
|
'willBlur',
|
||||||
payload => {
|
payload => {
|
||||||
|
if (this.props.enableRotation)
|
||||||
|
ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT);
|
||||||
this.setState({isOpen: false});
|
this.setState({isOpen: false});
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
@ -104,7 +122,7 @@ export default class BaseContainer extends React.Component<Props, State> {
|
||||||
rightButton={this.props.headerRightButton}
|
rightButton={this.props.headerRightButton}
|
||||||
hasTabs={this.props.hasTabs}
|
hasTabs={this.props.hasTabs}
|
||||||
hasBackButton={this.props.hasBackButton}/>
|
hasBackButton={this.props.hasBackButton}/>
|
||||||
: null}
|
: <View style={{paddingTop: 20}}/>}
|
||||||
{this.props.children}
|
{this.props.children}
|
||||||
</Container>
|
</Container>
|
||||||
);
|
);
|
||||||
|
@ -112,7 +130,6 @@ export default class BaseContainer extends React.Component<Props, State> {
|
||||||
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
// if (this.state.isHeaderVisible) {
|
|
||||||
return (
|
return (
|
||||||
<View style={{
|
<View style={{
|
||||||
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
|
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
|
||||||
|
@ -128,17 +145,5 @@ export default class BaseContainer extends React.Component<Props, State> {
|
||||||
this.getMainContainer()}
|
this.getMainContainer()}
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
// } else {
|
|
||||||
// return (
|
|
||||||
// <View style={{
|
|
||||||
// backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
|
|
||||||
// width: '100%',
|
|
||||||
// height: '100%'
|
|
||||||
// }}>
|
|
||||||
// {this.props.children}
|
|
||||||
// </View>
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -78,7 +78,9 @@ export default class SideBar extends React.Component<Props, State> {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Container style={{backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor}}>
|
<Container style={{
|
||||||
|
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
|
||||||
|
}}>
|
||||||
<Image source={drawerCover} style={styles.drawerCover}/>
|
<Image source={drawerCover} style={styles.drawerCover}/>
|
||||||
<FlatList
|
<FlatList
|
||||||
data={this.dataSet}
|
data={this.dataSet}
|
||||||
|
@ -130,7 +132,7 @@ export default class SideBar extends React.Component<Props, State> {
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
drawerCover: {
|
drawerCover: {
|
||||||
height: deviceHeight / 5,
|
height: deviceHeight / 5,
|
||||||
width: null,
|
width: deviceHeight / 2.5,
|
||||||
position: "relative",
|
position: "relative",
|
||||||
marginBottom: 10,
|
marginBottom: 10,
|
||||||
marginTop: 20
|
marginTop: 20
|
||||||
|
|
|
@ -8,7 +8,6 @@ import Touchable from "react-native-platform-touchable";
|
||||||
import CustomMaterialIcon from "../components/CustomMaterialIcon";
|
import CustomMaterialIcon from "../components/CustomMaterialIcon";
|
||||||
import ThemeManager from "../utils/ThemeManager";
|
import ThemeManager from "../utils/ThemeManager";
|
||||||
import BaseContainer from "../components/BaseContainer";
|
import BaseContainer from "../components/BaseContainer";
|
||||||
import {ScreenOrientation} from 'expo';
|
|
||||||
import {NavigationActions} from 'react-navigation';
|
import {NavigationActions} from 'react-navigation';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
@ -25,67 +24,17 @@ type Props = {
|
||||||
hasFooter: boolean,
|
hasFooter: boolean,
|
||||||
}
|
}
|
||||||
|
|
||||||
type State = {
|
|
||||||
isLandscape: boolean,
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Class defining a webview screen.
|
* Class defining a webview screen.
|
||||||
*/
|
*/
|
||||||
export default class WebViewScreen extends React.Component<Props, State> {
|
export default class WebViewScreen extends React.Component<Props> {
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
hasBackButton: false,
|
hasBackButton: false,
|
||||||
hasSideMenu: true,
|
hasSideMenu: true,
|
||||||
hasFooter: true,
|
hasFooter: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
|
||||||
isLandscape: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
webviewArray: Array<WebView> = [];
|
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) {
|
openWebLink(url: string) {
|
||||||
Linking.openURL(url).catch((err) => console.error('Error opening link', err));
|
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}
|
headerTitle={this.props.headerTitle}
|
||||||
headerRightButton={this.getRefreshButton()}
|
headerRightButton={this.getRefreshButton()}
|
||||||
hasBackButton={this.props.hasHeaderBackButton}
|
hasBackButton={this.props.hasHeaderBackButton}
|
||||||
hasSideMenu={this.props.hasSideMenu}>
|
hasSideMenu={this.props.hasSideMenu}
|
||||||
|
enableRotation={true}
|
||||||
|
hideHeaderOnLandscape={true}>
|
||||||
{this.props.data.length === 1 ?
|
{this.props.data.length === 1 ?
|
||||||
this.getWebview(this.props.data[0]) :
|
this.getWebview(this.props.data[0]) :
|
||||||
<Tabs
|
<Tabs
|
||||||
|
@ -198,7 +149,6 @@ export default class WebViewScreen extends React.Component<Props, State> {
|
||||||
}}
|
}}
|
||||||
locked={true}
|
locked={true}
|
||||||
style = {{
|
style = {{
|
||||||
paddingTop: this.state.isLandscape ? 20 : 0,
|
|
||||||
backgroundColor: Platform.OS === 'ios' ?
|
backgroundColor: Platform.OS === 'ios' ?
|
||||||
ThemeManager.getCurrentThemeVariables().tabDefaultBg :
|
ThemeManager.getCurrentThemeVariables().tabDefaultBg :
|
||||||
ThemeManager.getCurrentThemeVariables().brandPrimary
|
ThemeManager.getCurrentThemeVariables().brandPrimary
|
||||||
|
|
Loading…
Reference in a new issue