2019-08-07 10:24:35 +02:00
|
|
|
// @flow
|
|
|
|
|
|
|
|
import * as React from 'react';
|
|
|
|
import {Container, Right} from "native-base";
|
|
|
|
import CustomHeader from "./CustomHeader";
|
|
|
|
import CustomSideMenu from "./CustomSideMenu";
|
|
|
|
import CustomMaterialIcon from "./CustomMaterialIcon";
|
|
|
|
import {Platform, View} from "react-native";
|
|
|
|
import ThemeManager from "../utils/ThemeManager";
|
|
|
|
import Touchable from "react-native-platform-touchable";
|
|
|
|
|
|
|
|
|
|
|
|
type Props = {
|
|
|
|
navigation: Object,
|
|
|
|
headerTitle: string,
|
2019-08-07 11:10:17 +02:00
|
|
|
headerRightButton: React.Node,
|
2019-08-07 10:24:35 +02:00
|
|
|
children: React.Node
|
|
|
|
}
|
|
|
|
|
|
|
|
type State = {
|
|
|
|
isOpen: boolean
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export default class BaseContainer extends React.Component<Props, State> {
|
|
|
|
|
2019-09-16 19:13:01 +02:00
|
|
|
willBlurSubscription: function;
|
|
|
|
|
2019-08-07 10:24:35 +02:00
|
|
|
static defaultProps = {
|
2019-08-08 16:24:55 +02:00
|
|
|
headerRightButton: <View/>
|
2019-08-07 10:24:35 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
state = {
|
|
|
|
isOpen: false,
|
|
|
|
};
|
|
|
|
|
|
|
|
toggle() {
|
|
|
|
this.setState({
|
|
|
|
isOpen: !this.state.isOpen,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
updateMenuState(isOpen: boolean) {
|
|
|
|
this.setState({isOpen});
|
|
|
|
}
|
|
|
|
|
2019-09-16 19:13:01 +02:00
|
|
|
/**
|
|
|
|
* Register for blur event to close side menu on screen change
|
|
|
|
*/
|
|
|
|
componentDidMount() {
|
|
|
|
this.willBlurSubscription = this.props.navigation.addListener(
|
|
|
|
'willBlur',
|
|
|
|
payload => {
|
|
|
|
this.setState({isOpen: false});
|
|
|
|
}
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Unregister from event when un-mounting components
|
|
|
|
*/
|
|
|
|
componentWillUnmount() {
|
|
|
|
if (this.willBlurSubscription !== undefined)
|
|
|
|
this.willBlurSubscription.remove();
|
|
|
|
}
|
|
|
|
|
2019-08-07 10:24:35 +02:00
|
|
|
render() {
|
|
|
|
return (
|
2019-08-07 14:03:06 +02:00
|
|
|
<View style={{
|
2019-08-08 19:45:21 +02:00
|
|
|
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
|
2019-08-07 14:03:06 +02:00
|
|
|
width: '100%',
|
|
|
|
height: '100%'
|
|
|
|
}}>
|
|
|
|
<CustomSideMenu navigation={this.props.navigation} isOpen={this.state.isOpen}
|
|
|
|
onChange={(isOpen) => this.updateMenuState(isOpen)}>
|
|
|
|
<Container>
|
|
|
|
<CustomHeader navigation={this.props.navigation} title={this.props.headerTitle}
|
|
|
|
leftButton={
|
|
|
|
<Touchable
|
|
|
|
style={{padding: 6}}
|
|
|
|
onPress={() => this.toggle()}>
|
|
|
|
<CustomMaterialIcon
|
|
|
|
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
|
|
|
|
icon="menu"/>
|
|
|
|
</Touchable>
|
|
|
|
}
|
|
|
|
rightButton={this.props.headerRightButton}/>
|
|
|
|
{this.props.children}
|
|
|
|
</Container>
|
|
|
|
</CustomSideMenu>
|
|
|
|
</View>
|
2019-08-07 10:24:35 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|