vn-verdnaturachat/app/containers/Banner.js

61 lines
1.4 KiB
JavaScript
Raw Normal View History

2017-08-17 06:28:41 +00:00
import { StyleSheet, View, Text } from 'react-native';
2017-08-22 01:24:41 +00:00
import PropTypes from 'prop-types';
2017-08-17 06:28:41 +00:00
import React from 'react';
import { connect } from 'react-redux';
const styles = StyleSheet.create({
bannerContainer: {
2017-08-21 00:11:46 +00:00
backgroundColor: '#ddd',
position: 'absolute',
top: '0%',
zIndex: 10,
width: '100%'
2017-08-17 06:28:41 +00:00
},
bannerText: {
textAlign: 'center',
margin: 5
}
});
@connect(state => ({
connecting: state.meteor.connecting,
authenticating: state.login.isFetching,
2017-08-17 16:55:47 +00:00
offline: !state.meteor.connected
2017-08-17 06:28:41 +00:00
}))
export default class Banner extends React.PureComponent {
2017-08-22 01:24:41 +00:00
static propTypes = {
connecting: PropTypes.bool,
authenticating: PropTypes.bool,
offline: PropTypes.bool
}
2017-08-17 06:28:41 +00:00
render() {
2017-08-17 16:55:47 +00:00
const { connecting, authenticating, offline } = this.props;
2017-08-17 06:28:41 +00:00
if (connecting) {
return (
<View style={[styles.bannerContainer, { backgroundColor: '#0d0' }]}>
<Text style={[styles.bannerText, { color: '#fff' }]}>Connecting...</Text>
</View>
);
}
if (authenticating) {
return (
<View style={[styles.bannerContainer, { backgroundColor: 'orange' }]}>
<Text style={[styles.bannerText, { color: '#a00' }]}>Authenticating...</Text>
</View>
);
}
2017-08-17 16:55:47 +00:00
if (offline) {
return (
<View style={[styles.bannerContainer, { backgroundColor: 'red' }]}>
<Text style={[styles.bannerText, { color: '#a00' }]}>offline...</Text>
</View>
);
}
2017-08-17 06:28:41 +00:00
return null;
}
}