verdnatura-chat/app/containers/message/User.tsx

115 lines
2.7 KiB
TypeScript
Raw Normal View History

import React, { useContext } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import moment from 'moment';
2019-12-04 16:39:53 +00:00
import { themes } from '../../constants/colors';
import { withTheme } from '../../theme';
import MessageError from './MessageError';
2019-03-29 19:36:07 +00:00
import sharedStyles from '../../views/Styles';
2019-04-08 12:35:28 +00:00
import messageStyles from './styles';
import MessageContext from './Context';
import { SYSTEM_MESSAGE_TYPES_WITH_AUTHOR_NAME } from './utils';
2019-03-29 19:36:07 +00:00
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
2019-03-29 19:36:07 +00:00
alignItems: 'center'
},
username: {
fontSize: 16,
2019-03-29 19:36:07 +00:00
lineHeight: 22,
...sharedStyles.textMedium
},
usernameInfoMessage: {
fontSize: 16,
...sharedStyles.textMedium
},
titleContainer: {
flexShrink: 1,
flexDirection: 'row',
alignItems: 'center'
},
alias: {
fontSize: 14,
2019-03-29 19:36:07 +00:00
...sharedStyles.textRegular
}
});
interface IMessageUser {
isHeader: boolean;
hasError: boolean;
useRealName: boolean;
author: {
_id: string;
name: string;
username: string;
};
alias: string;
ts: Date;
timeFormat: string;
theme: string;
navToRoomInfo: Function;
type: string;
}
const User = React.memo(({
isHeader, useRealName, author, alias, ts, timeFormat, hasError, theme, navToRoomInfo, type, ...props
}: IMessageUser) => {
if (isHeader || hasError) {
const navParam = {
t: 'd',
rid: author._id
};
const { user } = useContext(MessageContext);
const username = (useRealName && author.name) || author.username;
2019-12-04 16:39:53 +00:00
const aliasUsername = alias ? (<Text style={[styles.alias, { color: themes[theme].auxiliaryText }]}> @{username}</Text>) : null;
const time = moment(ts).format(timeFormat);
const onUserPress = () => navToRoomInfo(navParam);
const isDisabled = author._id === user.id;
const textContent = (
<>
{alias || username}
{aliasUsername}
</>
);
if (SYSTEM_MESSAGE_TYPES_WITH_AUTHOR_NAME.includes(type)) {
return (
<Text
style={[styles.usernameInfoMessage, { color: themes[theme].titleText }]}
onPress={onUserPress}
// @ts-ignore
disabled={isDisabled}
>
{textContent}
</Text>
);
}
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.titleContainer}
onPress={onUserPress}
disabled={isDisabled}
>
<Text style={[styles.username, { color: themes[theme].titleText }]} numberOfLines={1}>
{textContent}
</Text>
</TouchableOpacity>
2019-12-04 16:39:53 +00:00
<Text style={[messageStyles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text>
{ hasError && <MessageError hasError={hasError} theme={theme} {...props} /> }
</View>
);
}
return null;
});
User.displayName = 'MessageUser';
2019-12-04 16:39:53 +00:00
export default withTheme(User);