108 lines
2.4 KiB
JavaScript
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;
|