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

Hide webview header and tabs on landscape

Browse source
This commit is contained in:
keplyx 2019-11-08 03:56:29 +01:00
parent 1da41c1fd1
commit bb0ff390a9
4 changed files with 96 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
components/BaseContainer.js
View file

@ -18,6 +18,7 @@ type Props = {
hasTabs: boolean,
hasBackButton: boolean,
hasSideMenu: boolean,
isHeaderVisible: boolean
}
type State = {
@ -34,6 +35,7 @@ export default class BaseContainer extends React.Component<Props, State> {
hasTabs: false,
hasBackButton: false,
hasSideMenu: true,
isHeaderVisible: true,
};
@ -95,6 +97,7 @@ export default class BaseContainer extends React.Component<Props, State> {
render() {
if (this.props.isHeaderVisible) {
return (
<View style={{
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
@ -110,5 +113,17 @@ export default class BaseContainer extends React.Component<Props, State> {
this.getMainContainer()}
</View>
);
} else {
return (
<View style={{
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
width: '100%',
height: '100%'
}}>
{this.props.children}
</View>
);
}
}
}

56
components/WebViewScreen.js
View file

@ -8,6 +8,8 @@ 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 = {
navigation: Object,
@ -23,10 +25,14 @@ type Props = {
hasFooter: boolean,
}
type State = {
isLandscape: boolean,
}
/**
* Class defining a webview screen.
*/
export default class WebViewScreen extends React.Component<Props> {
export default class WebViewScreen extends React.Component<Props, State> {
static defaultProps = {
hasBackButton: false,
@ -34,7 +40,52 @@ export default class WebViewScreen extends React.Component<Props> {
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));
@ -138,7 +189,8 @@ export default class WebViewScreen extends React.Component<Props> {
headerTitle={this.props.headerTitle}
headerRightButton={this.getRefreshButton()}
hasBackButton={this.props.hasHeaderBackButton}
hasSideMenu={this.props.hasSideMenu}>
hasSideMenu={this.props.hasSideMenu}
isHeaderVisible={!this.state.isLandscape}>
{this.props.data.length === 1 ?
this.getWebview(this.props.data[0]) :
<Tabs

12
navigation/MainTabNavigator.js
View file

@ -24,14 +24,22 @@ function createMaterialBottomTabNavigatorWithInitialRoute(initialRoute: string)
Planning: {screen: PlanningScreen,},
Proxiwash: {screen: ProxiwashScreen,},
Proximo: {screen: ProximoMainScreen,},
Planex: {screen: PlanexScreen},
Planex: {
screen: PlanexScreen,
navigationOptions: ({ navigation }) => {
const showTabBar = navigation.state && navigation.state.params ? navigation.state.params.showTabBar : true;
return {
tabBarVisible: showTabBar,
};
},},
}, {
defaultNavigationOptions: ({navigation}) => ({
tabBarIcon: ({focused, horizontal, tintColor}) => {
let icon = TAB_ICONS[navigation.state.routeName];
return <CustomMaterialIcon icon={icon} color={tintColor}/>;
}
},
tabBarVisible: true,
}),
order: ['Proximo', 'Planning', 'Home', 'Proxiwash', 'Planex'],
initialRouteName: initialRoute,

4
screens/AvailableRoomScreen.js
View file

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