304 lines
8.9 KiB
JavaScript
304 lines
8.9 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { View, TouchableHighlight, Text, TouchableOpacity, Animated, Keyboard, StyleSheet, Vibration } from 'react-native';
|
|
import { connect } from 'react-redux';
|
|
import Icon from 'react-native-vector-icons/MaterialIcons';
|
|
import moment from 'moment';
|
|
import equal from 'deep-equal';
|
|
|
|
import { actionsShow, errorActionsShow, toggleReactionPicker } from '../../actions/messages';
|
|
import Image from './Image';
|
|
import User from './User';
|
|
import Avatar from '../Avatar';
|
|
import Audio from './Audio';
|
|
import Video from './Video';
|
|
import Markdown from './Markdown';
|
|
import Url from './Url';
|
|
import Reply from './Reply';
|
|
import ReactionsModal from './ReactionsModal';
|
|
import Emoji from './Emoji';
|
|
import messageStatus from '../../constants/messagesStatus';
|
|
import styles from './styles';
|
|
|
|
const avatar = { marginRight: 10 };
|
|
const flex = { flexDirection: 'row', flex: 1 };
|
|
|
|
@connect(state => ({
|
|
message: state.messages.message,
|
|
editing: state.messages.editing,
|
|
customEmojis: state.customEmojis
|
|
}), dispatch => ({
|
|
actionsShow: actionMessage => dispatch(actionsShow(actionMessage)),
|
|
errorActionsShow: actionMessage => dispatch(errorActionsShow(actionMessage)),
|
|
toggleReactionPicker: message => dispatch(toggleReactionPicker(message))
|
|
}))
|
|
export default class Message extends React.Component {
|
|
static propTypes = {
|
|
item: PropTypes.object.isRequired,
|
|
reactions: PropTypes.object.isRequired,
|
|
baseUrl: PropTypes.string.isRequired,
|
|
Message_TimeFormat: PropTypes.string.isRequired,
|
|
message: PropTypes.object.isRequired,
|
|
user: PropTypes.object.isRequired,
|
|
editing: PropTypes.bool,
|
|
actionsShow: PropTypes.func,
|
|
errorActionsShow: PropTypes.func,
|
|
animate: PropTypes.bool,
|
|
customEmojis: PropTypes.object,
|
|
toggleReactionPicker: PropTypes.func,
|
|
onReactionPress: PropTypes.func
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = { reactionsModal: false };
|
|
this.onClose = this.onClose.bind(this);
|
|
}
|
|
|
|
componentWillMount() {
|
|
this._visibility = new Animated.Value(this.props.animate ? 0 : 1);
|
|
}
|
|
componentDidMount() {
|
|
if (this.props.animate) {
|
|
Animated.timing(this._visibility, {
|
|
toValue: 1,
|
|
duration: 300
|
|
}).start();
|
|
}
|
|
}
|
|
componentWillReceiveProps() {
|
|
this.extraStyle = this.extraStyle || {};
|
|
if (this.props.item.status === messageStatus.TEMP || this.props.item.status === messageStatus.ERROR) {
|
|
this.extraStyle.opacity = 0.3;
|
|
}
|
|
}
|
|
|
|
shouldComponentUpdate(nextProps, nextState) {
|
|
if (!equal(this.props.reactions, nextProps.reactions)) {
|
|
return true;
|
|
}
|
|
if (this.state.reactionsModal !== nextState.reactionsModal) {
|
|
return true;
|
|
}
|
|
return this.props.item._updatedAt.toGMTString() !== nextProps.item._updatedAt.toGMTString() || this.props.item.status !== nextProps.item.status;
|
|
}
|
|
|
|
onPress = () => {
|
|
Keyboard.dismiss();
|
|
}
|
|
|
|
onLongPress() {
|
|
this.props.actionsShow(this.parseMessage());
|
|
}
|
|
|
|
onErrorPress() {
|
|
this.props.errorActionsShow(this.parseMessage());
|
|
}
|
|
|
|
onReactionPress(emoji) {
|
|
this.props.onReactionPress(emoji, this.props.item._id);
|
|
}
|
|
onClose() {
|
|
this.setState({ reactionsModal: false });
|
|
}
|
|
onReactionLongPress() {
|
|
this.setState({ reactionsModal: true });
|
|
Vibration.vibrate(50);
|
|
}
|
|
|
|
getInfoMessage() {
|
|
let message = '';
|
|
const messageType = this.props.item.t;
|
|
|
|
if (messageType === 'rm') {
|
|
message = 'Message removed';
|
|
} else if (messageType === 'uj') {
|
|
message = 'Has joined the channel.';
|
|
} else if (messageType === 'r') {
|
|
message = `Room name changed to: ${ this.props.item.msg } by ${ this.props.item.u.username }`;
|
|
} else if (messageType === 'message_pinned') {
|
|
message = 'Message pinned';
|
|
} else if (messageType === 'ul') {
|
|
message = 'Has left the channel.';
|
|
} else if (messageType === 'ru') {
|
|
message = `User ${ this.props.item.msg } removed by ${ this.props.item.u.username }`;
|
|
} else if (messageType === 'au') {
|
|
message = `User ${ this.props.item.msg } added by ${ this.props.item.u.username }`;
|
|
} else if (messageType === 'user-muted') {
|
|
message = `User ${ this.props.item.msg } muted by ${ this.props.item.u.username }`;
|
|
} else if (messageType === 'user-unmuted') {
|
|
message = `User ${ this.props.item.msg } unmuted by ${ this.props.item.u.username }`;
|
|
}
|
|
|
|
return message;
|
|
}
|
|
|
|
parseMessage = () => JSON.parse(JSON.stringify(this.props.item));
|
|
|
|
isInfoMessage() {
|
|
return ['r', 'au', 'ru', 'ul', 'uj', 'rm', 'user-muted', 'user-unmuted', 'message_pinned'].includes(this.props.item.t);
|
|
}
|
|
|
|
isDeleted() {
|
|
return this.props.item.t === 'rm';
|
|
}
|
|
|
|
hasError() {
|
|
return this.props.item.status === messageStatus.ERROR;
|
|
}
|
|
|
|
attachments() {
|
|
if (this.props.item.attachments.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
const file = this.props.item.attachments[0];
|
|
const { baseUrl, user } = this.props;
|
|
if (file.image_type) {
|
|
return <Image file={file} baseUrl={baseUrl} user={user} />;
|
|
} else if (file.audio_type) {
|
|
return <Audio file={file} baseUrl={baseUrl} user={user} />;
|
|
} else if (file.video_type) {
|
|
return <Video file={file} baseUrl={baseUrl} user={user} />;
|
|
}
|
|
|
|
return <Reply attachment={file} timeFormat={this.props.Message_TimeFormat} />;
|
|
}
|
|
|
|
renderMessageContent() {
|
|
if (this.isInfoMessage()) {
|
|
return <Text style={styles.textInfo}>{this.getInfoMessage()}</Text>;
|
|
}
|
|
const { item, customEmojis, baseUrl } = this.props;
|
|
return <Markdown msg={item.msg} customEmojis={customEmojis} baseUrl={baseUrl} />;
|
|
}
|
|
|
|
renderUrl() {
|
|
if (this.props.item.urls.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return this.props.item.urls.map(url => (
|
|
<Url url={url} key={url._id} />
|
|
));
|
|
}
|
|
|
|
renderError = () => {
|
|
if (!this.hasError()) {
|
|
return null;
|
|
}
|
|
return (
|
|
<TouchableOpacity onPress={() => this.onErrorPress()}>
|
|
<Icon name='error-outline' color='red' size={20} style={{ padding: 10, paddingRight: 12, paddingLeft: 0 }} />
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
renderReaction(reaction) {
|
|
const reacted = reaction.usernames.findIndex(item => item.value === this.props.user.username) !== -1;
|
|
const reactedContainerStyle = reacted ? { borderColor: '#bde1fe', backgroundColor: '#f3f9ff' } : {};
|
|
const reactedCount = reacted ? { color: '#4fb0fc' } : {};
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={() => this.onReactionPress(reaction.emoji)}
|
|
onLongPress={() => this.onReactionLongPress()}
|
|
key={reaction.emoji}
|
|
>
|
|
<View style={[styles.reactionContainer, reactedContainerStyle]}>
|
|
<Emoji
|
|
content={reaction.emoji}
|
|
standardEmojiStyle={StyleSheet.flatten(styles.reactionEmoji)}
|
|
customEmojiStyle={StyleSheet.flatten(styles.reactionCustomEmoji)}
|
|
customEmojis={this.props.customEmojis}
|
|
/>
|
|
<Text style={[styles.reactionCount, reactedCount]}>{ reaction.usernames.length }</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
renderReactions() {
|
|
if (this.props.item.reactions.length === 0) {
|
|
return null;
|
|
}
|
|
return (
|
|
<View style={styles.reactionsContainer}>
|
|
{this.props.item.reactions.map(reaction => this.renderReaction(reaction))}
|
|
<TouchableOpacity
|
|
onPress={() => this.props.toggleReactionPicker(this.parseMessage())}
|
|
key='add-reaction'
|
|
style={styles.reactionContainer}
|
|
>
|
|
<Icon name='insert-emoticon' color='#aaaaaa' size={15} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
item, message, editing, baseUrl, customEmojis
|
|
} = this.props;
|
|
|
|
const marginLeft = this._visibility.interpolate({
|
|
inputRange: [0, 1],
|
|
outputRange: [-30, 0]
|
|
});
|
|
const opacity = this._visibility.interpolate({
|
|
inputRange: [0, 1],
|
|
outputRange: [0, 1]
|
|
});
|
|
const username = item.alias || item.u.username;
|
|
const isEditing = message._id === item._id && editing;
|
|
|
|
const accessibilityLabel = `Message from ${ username } at ${ moment(item.ts).format(this.props.Message_TimeFormat) }, ${ this.props.item.msg }`;
|
|
|
|
return (
|
|
<TouchableHighlight
|
|
onPress={() => this.onPress()}
|
|
onLongPress={() => this.onLongPress()}
|
|
disabled={this.isDeleted() || this.hasError()}
|
|
underlayColor='#FFFFFF'
|
|
activeOpacity={0.3}
|
|
style={[styles.message, isEditing ? styles.editing : null]}
|
|
accessibilityLabel={accessibilityLabel}
|
|
>
|
|
<Animated.View style={[flex, { opacity, marginLeft }]}>
|
|
{this.renderError()}
|
|
<View style={[this.extraStyle, flex]}>
|
|
<Avatar
|
|
style={avatar}
|
|
text={item.avatar ? '' : username}
|
|
size={40}
|
|
baseUrl={baseUrl}
|
|
avatar={item.avatar}
|
|
/>
|
|
<View style={[styles.content]}>
|
|
<User
|
|
onPress={this._onPress}
|
|
item={item}
|
|
Message_TimeFormat={this.props.Message_TimeFormat}
|
|
baseUrl={baseUrl}
|
|
/>
|
|
{this.renderMessageContent()}
|
|
{this.attachments()}
|
|
{this.renderUrl()}
|
|
{this.renderReactions()}
|
|
</View>
|
|
</View>
|
|
{this.state.reactionsModal ?
|
|
<ReactionsModal
|
|
isVisible={this.state.reactionsModal}
|
|
onClose={this.onClose}
|
|
reactions={item.reactions}
|
|
user={this.props.user}
|
|
customEmojis={customEmojis}
|
|
/>
|
|
: null
|
|
}
|
|
</Animated.View>
|
|
</TouchableHighlight>
|
|
);
|
|
}
|
|
}
|