vn-verdnaturachat/app/views/RoomView/Header/Header.js

108 lines
2.4 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import {
View, Text, StyleSheet, ScrollView
} from 'react-native';
import I18n from '../../../i18n';
import sharedStyles from '../../Styles';
import { isIOS } from '../../../utils/deviceInfo';
import Icon from './Icon';
import { COLOR_TEXT_DESCRIPTION, HEADER_TITLE, COLOR_WHITE } from '../../../constants/colors';
const TITLE_SIZE = 16;
const styles = StyleSheet.create({
container: {
flex: 1,
height: '100%'
},
titleContainer: {
flex: 6,
flexDirection: 'row'
},
title: {
...sharedStyles.textSemibold,
color: HEADER_TITLE,
fontSize: TITLE_SIZE
},
scroll: {
alignItems: 'center'
},
typing: {
...sharedStyles.textRegular,
color: isIOS ? COLOR_TEXT_DESCRIPTION : COLOR_WHITE,
fontSize: 12,
flex: 4
},
typingUsers: {
...sharedStyles.textSemibold
}
});
const Typing = React.memo(({ usersTyping }) => {
const users = usersTyping.map(item => item.username);
let usersText;
if (!users.length) {
return null;
} else if (users.length === 2) {
usersText = users.join(` ${ I18n.t('and') } `);
} else {
usersText = users.join(', ');
}
return (
<Text style={styles.typing} numberOfLines={1}>
<Text style={styles.typingUsers}>{usersText} </Text>
{ users.length > 1 ? I18n.t('are_typing') : I18n.t('is_typing') }...
</Text>
);
});
Typing.propTypes = {
usersTyping: PropTypes.array
};
const Header = React.memo(({
prid, title, type, status, usersTyping, width, height
}) => {
const portrait = height > width;
let scale = 1;
if (!portrait) {
if (usersTyping.length > 0) {
scale = 0.8;
}
}
return (
<View style={styles.container}>
<View style={styles.titleContainer}>
<ScrollView
showsHorizontalScrollIndicator={false}
horizontal
bounces={false}
contentContainerStyle={styles.scroll}
>
<Icon type={prid ? 'discussion' : type} status={status} />
<Text style={[styles.title, { fontSize: TITLE_SIZE * scale }]} numberOfLines={1}>{title}</Text>
</ScrollView>
</View>
<Typing usersTyping={usersTyping} />
</View>
);
});
Header.propTypes = {
title: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
prid: PropTypes.string,
status: PropTypes.string,
usersTyping: PropTypes.array
};
Header.defaultProps = {
usersTyping: []
};
export default Header;