vergnet/application-amicale
5
5
Fork 5
Code Issues Pull requests Releases Wiki Activity

Compare commits

base: vergnet:aa78b90e3ca143298b12ace3490c3920ecfcb843
Branches Tags
vergnet:master
vergnet:functional-migration
vergnet:v5.0.0-3
vergnet:v5.0.0-2
vergnet:4.1.0
vergnet:4.0.1
vergnet:3.0.7
..
compare: vergnet:41f869952af4861c667a738207e33370510a0007
Branches Tags
vergnet:master
vergnet:functional-migration
vergnet:v5.0.0-3
vergnet:v5.0.0-2
vergnet:4.1.0
vergnet:4.0.1
vergnet:3.0.7

No commits in common. "aa78b90e3ca143298b12ace3490c3920ecfcb843" and "41f869952af4861c667a738207e33370510a0007" have entirely different histories.
aa78b90e3c ... 41f869952a

4 changed files with 146 additions and 117 deletions
Show stats Expand all files Collapse all files

2
app.json
View file

@ -10,7 +10,7 @@
"android", "android",
"web" "web"
], ],
"version": "1.3.3", "version": "1.3.2",
"orientation": "portrait", "orientation": "portrait",
"primaryColor": "#be1522", "primaryColor": "#be1522",
"icon": "./assets/android.icon.png", "icon": "./assets/android.icon.png",

112
components/BaseContainer.js
View file

@ -1,15 +1,13 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Container} from "native-base"; import {Container, Right} from "native-base";
import CustomHeader from "./CustomHeader"; import CustomHeader from "./CustomHeader";
import CustomSideMenu from "./CustomSideMenu"; import CustomSideMenu from "./CustomSideMenu";
import CustomMaterialIcon from "./CustomMaterialIcon"; import CustomMaterialIcon from "./CustomMaterialIcon";
import {Platform, View} from "react-native"; 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 {NavigationActions} from "react-navigation";
type Props = { type Props = {
@ -20,34 +18,29 @@ type Props = {
hasTabs: boolean, hasTabs: boolean,
hasBackButton: boolean, hasBackButton: boolean,
hasSideMenu: boolean, hasSideMenu: boolean,
enableRotation: boolean, isHeaderVisible: boolean
hideHeaderOnLandscape: boolean,
} }
type State = { type State = {
isOpen: boolean, isOpen: boolean
isHeaderVisible: boolean
} }
export default class BaseContainer extends React.Component<Props, State> { export default class BaseContainer extends React.Component<Props, State> {
willBlurSubscription: function; willBlurSubscription: function;
willFocusSubscription: function;
static defaultProps = { static defaultProps = {
headerRightButton: <View/>, headerRightButton: <View/>,
hasTabs: false, hasTabs: false,
hasBackButton: false, hasBackButton: false,
hasSideMenu: true, hasSideMenu: true,
enableRotation: false, isHeaderVisible: true,
hideHeaderOnLandscape: false,
}; };
state = { state = {
isOpen: false, isOpen: false,
isHeaderVisible: true,
}; };
toggle() { toggle() {
@ -64,31 +57,9 @@ 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 => {
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( 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});
} }
); );
@ -100,29 +71,25 @@ export default class BaseContainer extends React.Component<Props, State> {
componentWillUnmount() { componentWillUnmount() {
if (this.willBlurSubscription !== undefined) if (this.willBlurSubscription !== undefined)
this.willBlurSubscription.remove(); this.willBlurSubscription.remove();
if (this.willFocusSubscription !== undefined)
this.willFocusSubscription.remove();
} }
getMainContainer() { getMainContainer() {
return ( return (
<Container> <Container>
{this.state.isHeaderVisible ? <CustomHeader
<CustomHeader navigation={this.props.navigation} title={this.props.headerTitle}
navigation={this.props.navigation} title={this.props.headerTitle} leftButton={
leftButton={ <Touchable
<Touchable style={{padding: 6}}
style={{padding: 6}} onPress={() => this.toggle()}>
onPress={() => this.toggle()}> <CustomMaterialIcon
<CustomMaterialIcon color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"} icon="menu"/>
icon="menu"/> </Touchable>
</Touchable> }
} rightButton={this.props.headerRightButton}
rightButton={this.props.headerRightButton} hasTabs={this.props.hasTabs}
hasTabs={this.props.hasTabs} hasBackButton={this.props.hasBackButton}/>
hasBackButton={this.props.hasBackButton}/>
: <View style={{paddingTop: 20}}/>}
{this.props.children} {this.props.children}
</Container> </Container>
); );
@ -130,20 +97,33 @@ export default class BaseContainer extends React.Component<Props, State> {
render() { render() {
return ( if (this.props.isHeaderVisible) {
<View style={{ return (
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor, <View style={{
width: '100%', backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
height: '100%' width: '100%',
}}> height: '100%'
{this.props.hasSideMenu ? }}>
<CustomSideMenu {this.props.hasSideMenu ?
navigation={this.props.navigation} isOpen={this.state.isOpen} <CustomSideMenu
onChange={(isOpen) => this.updateMenuState(isOpen)}> navigation={this.props.navigation} isOpen={this.state.isOpen}
{this.getMainContainer()} onChange={(isOpen) => this.updateMenuState(isOpen)}>
</CustomSideMenu> : {this.getMainContainer()}
this.getMainContainer()} </CustomSideMenu> :
</View> this.getMainContainer()}
); </View>
);
} else {
return (
<View style={{
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
width: '100%',
height: '100%'
}}>
{this.props.children}
</View>
);
}
} }
} }

92
components/Sidebar.js
View file

@ -78,52 +78,50 @@ export default class SideBar extends React.Component<Props, State> {
render() { render() {
return ( return (
<Container style={{ <Container style={{backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor}}>
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor, <Image source={drawerCover} style={styles.drawerCover}/>
}}> <FlatList
<Image source={drawerCover} style={styles.drawerCover}/> data={this.dataSet}
<FlatList extraData={this.state}
data={this.dataSet} keyExtractor={(item) => item.route}
extraData={this.state} renderItem={({item}) =>
keyExtractor={(item) => item.route} <ListItem
renderItem={({item}) => button
<ListItem noBorder
button selected={this.state.active === item.route}
noBorder onPress={() => {
selected={this.state.active === item.route} if (item.link !== undefined)
onPress={() => { Linking.openURL(item.link).catch((err) => console.error('Error opening link', err));
if (item.link !== undefined) else
Linking.openURL(item.link).catch((err) => console.error('Error opening link', err)); this.navigateToScreen(item.route);
else }}
this.navigateToScreen(item.route); >
}} <Left>
> <CustomMaterialIcon
<Left> icon={item.icon}
<CustomMaterialIcon active={this.state.active === item.route}
icon={item.icon} />
active={this.state.active === item.route} <Text style={styles.text}>
/> {item.name}
<Text style={styles.text}> </Text>
{item.name} </Left>
</Text> {item.types &&
</Left> <Right style={{flex: 1}}>
{item.types && <Badge
<Right style={{flex: 1}}> style={{
<Badge borderRadius: 3,
style={{ height: 25,
borderRadius: 3, width: 72,
height: 25, backgroundColor: item.bg
width: 72, }}
backgroundColor: item.bg >
}} <Text
> style={styles.badgeText}
<Text >{`${item.types} Types`}</Text>
style={styles.badgeText} </Badge>
>{`${item.types} Types`}</Text> </Right>}
</Badge> </ListItem>}
</Right>} />
</ListItem>}
/>
</Container> </Container>
); );
} }
@ -132,7 +130,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: deviceHeight / 2.5, width: null,
position: "relative", position: "relative",
marginBottom: 10, marginBottom: 10,
marginTop: 20 marginTop: 20

57
components/WebViewScreen.js
View file

@ -8,6 +8,7 @@ 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 = {
@ -24,17 +25,67 @@ 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> { export default class WebViewScreen extends React.Component<Props, State> {
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));
@ -139,8 +190,7 @@ export default class WebViewScreen extends React.Component<Props> {
headerRightButton={this.getRefreshButton()} headerRightButton={this.getRefreshButton()}
hasBackButton={this.props.hasHeaderBackButton} hasBackButton={this.props.hasHeaderBackButton}
hasSideMenu={this.props.hasSideMenu} hasSideMenu={this.props.hasSideMenu}
enableRotation={true} isHeaderVisible={!this.state.isLandscape}>
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
@ -149,6 +199,7 @@ export default class WebViewScreen extends React.Component<Props> {
}} }}
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