vn-verdnaturachat/app/containers/message/Message.js

165 lines
3.8 KiB
JavaScript

import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { View } from 'react-native';
import Touchable from 'react-native-platform-touchable';
import MessageContext from './Context';
import User from './User';
import styles from './styles';
import RepliedThread from './RepliedThread';
import MessageAvatar from './MessageAvatar';
import Attachments from './Attachments';
import Urls from './Urls';
import Thread from './Thread';
import Blocks from './Blocks';
import Reactions from './Reactions';
import Broadcast from './Broadcast';
import Discussion from './Discussion';
import Content from './Content';
import ReadReceipt from './ReadReceipt';
import CallButton from './CallButton';
import { themes } from '../../constants/colors';
const MessageInner = React.memo((props) => {
if (props.type === 'discussion-created') {
return (
<>
<User {...props} />
<Discussion {...props} />
</>
);
}
if (props.type === 'jitsi_call_started') {
return (
<>
<User {...props} />
<Content {...props} isInfo />
<CallButton {...props} />
</>
);
}
if (props.blocks && props.blocks.length) {
return (
<>
<User {...props} />
<Blocks {...props} />
<Thread {...props} />
<Reactions {...props} />
</>
);
}
return (
<>
<User {...props} />
<Content {...props} />
<Attachments {...props} />
<Urls {...props} />
<Thread {...props} />
<Reactions {...props} />
<Broadcast {...props} />
</>
);
});
MessageInner.displayName = 'MessageInner';
const Message = React.memo((props) => {
if (props.isThreadReply || props.isThreadSequential || props.isInfo || props.isIgnored) {
const thread = props.isThreadReply ? <RepliedThread {...props} /> : null;
return (
<View style={[styles.container, props.style]}>
{thread}
<View style={styles.flex}>
<MessageAvatar small {...props} />
<View
style={[
styles.messageContent,
props.isHeader && styles.messageContentWithHeader
]}
>
<Content {...props} />
</View>
</View>
</View>
);
}
return (
<View style={[styles.container, props.style]}>
<View style={styles.flex}>
<MessageAvatar {...props} />
<View
style={[
styles.messageContent,
props.isHeader && styles.messageContentWithHeader
]}
>
<MessageInner {...props} />
</View>
<ReadReceipt
isReadReceiptEnabled={props.isReadReceiptEnabled}
unread={props.unread}
theme={props.theme}
/>
</View>
</View>
);
});
Message.displayName = 'Message';
const MessageTouchable = React.memo((props) => {
if (props.hasError) {
return (
<View>
<Message {...props} />
</View>
);
}
const { onPress, onLongPress } = useContext(MessageContext);
return (
<Touchable
onLongPress={onLongPress}
onPress={onPress}
disabled={(props.isInfo && !props.isThreadReply) || props.archived || props.isTemp}
style={{ backgroundColor: props.highlighted ? themes[props.theme].headerBackground : null }}
>
<View>
<Message {...props} />
</View>
</Touchable>
);
});
MessageTouchable.displayName = 'MessageTouchable';
MessageTouchable.propTypes = {
hasError: PropTypes.bool,
isInfo: PropTypes.bool,
isThreadReply: PropTypes.bool,
isTemp: PropTypes.bool,
archived: PropTypes.bool,
highlighted: PropTypes.bool,
theme: PropTypes.string
};
Message.propTypes = {
isThreadReply: PropTypes.bool,
isThreadSequential: PropTypes.bool,
isInfo: PropTypes.bool,
isTemp: PropTypes.bool,
isHeader: PropTypes.bool,
hasError: PropTypes.bool,
style: PropTypes.any,
onLongPress: PropTypes.func,
isReadReceiptEnabled: PropTypes.bool,
unread: PropTypes.bool,
theme: PropTypes.string,
isIgnored: PropTypes.bool
};
MessageInner.propTypes = {
type: PropTypes.string,
blocks: PropTypes.array
};
export default MessageTouchable;