2019-08-07 10:24:35 +02:00
|
|
|
// @flow
|
|
|
|
|
|
|
|
import * as React from 'react';
|
2020-01-29 00:29:29 +01:00
|
|
|
import {Container} from "native-base";
|
2019-08-07 10:24:35 +02:00
|
|
|
import CustomHeader from "./CustomHeader";
|
|
|
|
import CustomMaterialIcon from "./CustomMaterialIcon";
|
2020-01-31 16:51:43 +01:00
|
|
|
import {Platform, StatusBar, View} from "react-native";
|
2019-08-07 10:24:35 +02:00
|
|
|
import ThemeManager from "../utils/ThemeManager";
|
|
|
|
import Touchable from "react-native-platform-touchable";
|
2020-01-29 00:29:29 +01:00
|
|
|
import {ScreenOrientation} from "expo";
|
2020-01-29 09:30:27 +01:00
|
|
|
import {NavigationActions} from "react-navigation";
|
2019-08-07 10:24:35 +02:00
|
|
|
|
|
|
|
|
|
|
|
type Props = {
|
|
|
|
navigation: Object,
|
|
|
|
headerTitle: string,
|
2020-02-04 14:42:19 +01:00
|
|
|
headerSubtitle: string,
|
2019-08-07 11:10:17 +02:00
|
|
|
headerRightButton: React.Node,
|
2019-09-17 10:37:52 +02:00
|
|
|
children: React.Node,
|
|
|
|
hasTabs: boolean,
|
2019-11-02 15:44:19 +01:00
|
|
|
hasBackButton: boolean,
|
|
|
|
hasSideMenu: boolean,
|
2020-01-29 09:30:27 +01:00
|
|
|
enableRotation: boolean,
|
|
|
|
hideHeaderOnLandscape: boolean,
|
2019-08-07 10:24:35 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
type State = {
|
2020-01-29 00:29:29 +01:00
|
|
|
isHeaderVisible: boolean
|
2019-08-07 10:24:35 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export default class BaseContainer extends React.Component<Props, State> {
|
|
|
|
|
|
|
|
static defaultProps = {
|
2019-09-17 10:37:52 +02:00
|
|
|
headerRightButton: <View/>,
|
|
|
|
hasTabs: false,
|
2019-09-19 22:19:47 +02:00
|
|
|
hasBackButton: false,
|
2019-11-02 15:44:19 +01:00
|
|
|
hasSideMenu: true,
|
2020-01-29 09:30:27 +01:00
|
|
|
enableRotation: false,
|
|
|
|
hideHeaderOnLandscape: false,
|
2020-02-04 14:42:19 +01:00
|
|
|
headerSubtitle: '',
|
2019-08-07 10:24:35 +02:00
|
|
|
};
|
2020-01-31 16:51:43 +01:00
|
|
|
willBlurSubscription: function;
|
|
|
|
willFocusSubscription: function;
|
2019-08-07 10:24:35 +02:00
|
|
|
state = {
|
2020-01-29 00:29:29 +01:00
|
|
|
isHeaderVisible: true,
|
2019-08-07 10:24:35 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
toggle() {
|
2020-02-03 12:17:59 +01:00
|
|
|
this.props.navigation.toggleDrawer();
|
2019-08-07 10:24:35 +02:00
|
|
|
}
|
2019-09-16 19:13:01 +02:00
|
|
|
/**
|
|
|
|
* Register for blur event to close side menu on screen change
|
|
|
|
*/
|
|
|
|
componentDidMount() {
|
2020-01-29 09:30:27 +01:00
|
|
|
this.willFocusSubscription = this.props.navigation.addListener(
|
|
|
|
'willFocus',
|
2020-01-31 16:51:43 +01:00
|
|
|
() => {
|
2020-01-29 09:30:27 +01:00
|
|
|
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);
|
2020-01-30 18:27:51 +01:00
|
|
|
StatusBar.setHidden(isLandscape);
|
2020-01-29 09:30:27 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
2020-01-29 00:29:29 +01:00
|
|
|
});
|
2019-09-16 19:13:01 +02:00
|
|
|
this.willBlurSubscription = this.props.navigation.addListener(
|
|
|
|
'willBlur',
|
2020-01-31 16:51:43 +01:00
|
|
|
() => {
|
2020-01-29 09:30:27 +01:00
|
|
|
if (this.props.enableRotation)
|
|
|
|
ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT);
|
2019-09-16 19:13:01 +02:00
|
|
|
}
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Unregister from event when un-mounting components
|
|
|
|
*/
|
|
|
|
componentWillUnmount() {
|
|
|
|
if (this.willBlurSubscription !== undefined)
|
|
|
|
this.willBlurSubscription.remove();
|
2020-01-29 00:29:29 +01:00
|
|
|
if (this.willFocusSubscription !== undefined)
|
|
|
|
this.willFocusSubscription.remove();
|
2019-09-16 19:13:01 +02:00
|
|
|
}
|
|
|
|
|
2019-11-02 15:44:19 +01:00
|
|
|
getMainContainer() {
|
|
|
|
return (
|
|
|
|
<Container>
|
2020-01-29 00:29:29 +01:00
|
|
|
{this.state.isHeaderVisible ?
|
|
|
|
<CustomHeader
|
2020-02-04 14:42:19 +01:00
|
|
|
navigation={this.props.navigation}
|
|
|
|
title={this.props.headerTitle}
|
|
|
|
subtitle={this.props.headerSubtitle}
|
2020-01-29 00:29:29 +01:00
|
|
|
leftButton={
|
|
|
|
<Touchable
|
|
|
|
style={{padding: 6}}
|
|
|
|
onPress={() => this.toggle()}>
|
|
|
|
<CustomMaterialIcon
|
|
|
|
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
|
|
|
|
icon="menu"/>
|
|
|
|
</Touchable>
|
|
|
|
}
|
|
|
|
rightButton={this.props.headerRightButton}
|
|
|
|
hasTabs={this.props.hasTabs}
|
|
|
|
hasBackButton={this.props.hasBackButton}/>
|
2020-01-30 18:27:51 +01:00
|
|
|
: <View/>}
|
2019-11-02 15:44:19 +01:00
|
|
|
{this.props.children}
|
|
|
|
</Container>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2019-08-07 10:24:35 +02:00
|
|
|
render() {
|
2020-02-03 12:17:59 +01:00
|
|
|
return (this.getMainContainer());
|
2019-08-07 10:24:35 +02:00
|
|
|
}
|
|
|
|
}
|