verdnatura-chat/app/views/RoomsListView/Header/Header.ios.js

88 lines
2.0 KiB
JavaScript

import React from 'react';
import {
Text, View, TouchableOpacity, Image, StyleSheet
} from 'react-native';
import PropTypes from 'prop-types';
import I18n from '../../../i18n';
import sharedStyles from '../../Styles';
import { COLOR_PRIMARY } from '../../../constants/colors';
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
button: {
flexDirection: 'row'
},
title: {
fontSize: 14,
...sharedStyles.textColorTitle,
...sharedStyles.textRegular
},
server: {
fontSize: 12,
color: COLOR_PRIMARY,
...sharedStyles.textRegular
},
disclosure: {
marginLeft: 3,
marginTop: 1,
width: 12,
height: 9
},
upsideDown: {
transform: [{ scaleY: -1 }],
marginTop: 4
}
});
const HeaderTitle = React.memo(({ connecting, isFetching }) => {
if (connecting) {
return <Text style={styles.title}>{I18n.t('Connecting')}</Text>;
}
if (isFetching) {
return <Text style={styles.title}>{I18n.t('Updating')}</Text>;
}
return <Text style={styles.title}>{I18n.t('Messages')}</Text>;
});
const Header = React.memo(({
connecting, isFetching, serverName, showServerDropdown, onPress
}) => (
<View style={styles.container}>
<TouchableOpacity
onPress={onPress}
testID='rooms-list-header-server-dropdown-button'
style={styles.container}
>
<HeaderTitle connecting={connecting} isFetching={isFetching} />
<View style={styles.button}>
<Text style={styles.server}>{serverName}</Text>
<Image style={[styles.disclosure, showServerDropdown && styles.upsideDown]} source={{ uri: 'disclosure_indicator_server' }} />
</View>
</TouchableOpacity>
</View>
));
Header.propTypes = {
connecting: PropTypes.bool,
isFetching: PropTypes.bool,
serverName: PropTypes.string,
showServerDropdown: PropTypes.bool.isRequired,
onPress: PropTypes.func.isRequired
};
Header.defaultProps = {
serverName: 'Rocket.Chat'
};
HeaderTitle.propTypes = {
connecting: PropTypes.bool,
isFetching: PropTypes.bool
};
export default Header;