lpitault/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

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

Browse source
This commit is contained in:
keplyx 2020-01-29 09:30:27 +01:00
parent 57725b2eef
commit fd3f900716
3 changed files with 93 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
components/BaseContainer.js
View file

@ -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>
);
}
}

92
components/Sidebar.js
View file

@ -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

58
components/WebViewScreen.js
View file

@ -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