verdnatura-chat/app/containers/MessageBox/index.js

927 lines
24 KiB
JavaScript
Raw Normal View History

import React, { Component } from 'react';
2017-08-09 13:12:00 +00:00
import PropTypes from 'prop-types';
import {
View, TextInput, FlatList, Text, TouchableOpacity, Alert, ScrollView
} from 'react-native';
2017-11-21 16:55:32 +00:00
import { connect } from 'react-redux';
import { emojify } from 'react-emojione';
import { KeyboardAccessoryView } from 'react-native-keyboard-input';
import ImagePicker from 'react-native-image-crop-picker';
import equal from 'deep-equal';
import ActionSheet from 'react-native-action-sheet';
import { userTyping as userTypingAction } from '../../actions/room';
import {
editRequest as editRequestAction,
editCancel as editCancelAction,
replyCancel as replyCancelAction
} from '../../actions/messages';
import RocketChat from '../../lib/rocketchat';
import styles from './styles';
import database from '../../lib/realm';
import Avatar from '../Avatar';
import CustomEmoji from '../EmojiPicker/CustomEmoji';
import { emojis } from '../../emojis';
import Recording from './Recording';
import UploadModal from './UploadModal';
import log from '../../utils/log';
2018-06-01 17:38:13 +00:00
import I18n from '../../i18n';
import ReplyPreview from './ReplyPreview';
2019-02-27 14:23:40 +00:00
import debounce from '../../utils/debounce';
import { COLOR_TEXT_DESCRIPTION } from '../../constants/colors';
import LeftButtons from './LeftButtons';
import RightButtons from './RightButtons';
import { isAndroid } from '../../utils/deviceInfo';
import CommandPreview from './CommandPreview';
const MENTIONS_TRACKING_TYPE_USERS = '@';
const MENTIONS_TRACKING_TYPE_EMOJIS = ':';
const MENTIONS_TRACKING_TYPE_COMMANDS = '/';
const MENTIONS_COUNT_TO_DISPLAY = 4;
const onlyUnique = function onlyUnique(value, index, self) {
return self.indexOf(({ _id }) => value._id === _id) === index;
};
const imagePickerConfig = {
cropping: true,
compressImageQuality: 0.8,
2018-11-19 18:18:15 +00:00
avoidEmptySpaceAroundImage: false,
cropperChooseText: I18n.t('Choose'),
cropperCancelText: I18n.t('Cancel')
};
const fileOptions = [I18n.t('Cancel')];
const FILE_CANCEL_INDEX = 0;
// Photo
fileOptions.push(I18n.t('Take_a_photo'));
const FILE_PHOTO_INDEX = 1;
// Library
fileOptions.push(I18n.t('Choose_from_library'));
const FILE_LIBRARY_INDEX = 2;
2019-04-08 12:35:28 +00:00
class MessageBox extends Component {
2017-08-09 13:12:00 +00:00
static propTypes = {
rid: PropTypes.string.isRequired,
baseUrl: PropTypes.string.isRequired,
message: PropTypes.object,
replyMessage: PropTypes.object,
replying: PropTypes.bool,
2017-11-21 17:09:22 +00:00
editing: PropTypes.bool,
2019-04-17 17:01:03 +00:00
threadsEnabled: PropTypes.bool,
isFocused: PropTypes.bool,
user: PropTypes.shape({
id: PropTypes.string,
username: PropTypes.string,
token: PropTypes.string
}),
roomType: PropTypes.string,
tmid: PropTypes.string,
editCancel: PropTypes.func.isRequired,
editRequest: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired,
2017-11-24 20:44:52 +00:00
typing: PropTypes.func,
closeReply: PropTypes.func
}
constructor(props) {
super(props);
this.state = {
mentions: [],
showEmojiKeyboard: false,
showSend: false,
recording: false,
2019-02-27 14:23:40 +00:00
trackingType: '',
file: {
isVisible: false
},
commandPreview: []
};
this.showCommandPreview = false;
this.commands = [];
this.users = [];
this.rooms = [];
this.emojis = [];
this.customEmojis = [];
this.onEmojiSelected = this.onEmojiSelected.bind(this);
this.text = '';
}
2019-04-01 14:45:17 +00:00
componentDidMount() {
const { rid, tmid } = this.props;
let msg;
if (tmid) {
const thread = database.objectForPrimaryKey('threads', tmid);
if (thread) {
msg = thread.draftMessage;
}
} else {
const [room] = database.objects('subscriptions').filtered('rid = $0', rid);
if (room) {
msg = room.draftMessage;
}
}
if (msg) {
this.setInput(msg);
2019-04-08 12:35:28 +00:00
this.setShowSend(true);
2019-04-01 14:45:17 +00:00
}
if (isAndroid) {
require('./EmojiKeyboard');
}
2019-04-01 14:45:17 +00:00
}
componentWillReceiveProps(nextProps) {
const { message, replyMessage, isFocused } = this.props;
if (!isFocused) {
return;
}
if (!equal(message, nextProps.message) && nextProps.message.msg) {
this.setInput(nextProps.message.msg);
2019-04-08 12:35:28 +00:00
if (this.text) {
this.setShowSend(true);
}
this.focus();
} else if (!equal(replyMessage, nextProps.replyMessage)) {
this.focus();
2017-11-24 20:44:52 +00:00
} else if (!nextProps.message) {
this.clearInput();
}
2017-08-09 13:12:00 +00:00
}
shouldComponentUpdate(nextProps, nextState) {
const {
showEmojiKeyboard, showSend, recording, mentions, file, commandPreview
} = this.state;
const {
roomType, replying, editing, isFocused
} = this.props;
if (!isFocused) {
return false;
}
if (nextProps.roomType !== roomType) {
return true;
}
if (nextProps.replying !== replying) {
return true;
}
if (nextProps.editing !== editing) {
return true;
}
if (nextState.showEmojiKeyboard !== showEmojiKeyboard) {
return true;
}
if (nextState.showSend !== showSend) {
return true;
}
if (nextState.recording !== recording) {
return true;
}
if (!equal(nextState.mentions, mentions)) {
return true;
}
if (!equal(nextState.commandPreview, commandPreview)) {
return true;
}
if (!equal(nextState.file, file)) {
return true;
}
return false;
}
onChangeText = debounce((text) => {
2019-02-27 14:23:40 +00:00
const isTextEmpty = text.length === 0;
this.setShowSend(!isTextEmpty);
this.handleTyping(!isTextEmpty);
this.setInput(text);
// matches if their is text that stats with '/' and group the command and params so we can use it "/command params"
const slashCommand = text.match(/^\/([a-z0-9._-]+) (.+)/im);
if (slashCommand) {
const [, name, params] = slashCommand;
const command = database.objects('slashCommand').filtered('command == $0', name);
if (command && command[0] && command[0].providesPreview) {
return this.setCommandPreview(name, params);
}
}
2018-01-25 14:04:20 +00:00
if (!isTextEmpty) {
const { start, end } = this.component._lastNativeSelection;
const cursor = Math.max(start, end);
const lastNativeText = this.component._lastNativeText;
// matches if text either starts with '/' or have (@,#,:) then it groups whatever comes next of mention type
const regexp = /(#|@|:|^\/)([a-z0-9._-]+)$/im;
const result = lastNativeText.substr(0, cursor).match(regexp);
this.showCommandPreview = false;
if (!result) {
const slash = lastNativeText.match(/^\/$/); // matches only '/' in input
if (slash) {
return this.identifyMentionKeyword('', MENTIONS_TRACKING_TYPE_COMMANDS);
}
return this.stopTrackingMention();
}
const [, lastChar, name] = result;
this.identifyMentionKeyword(name, lastChar);
} else {
this.stopTrackingMention();
this.showCommandPreview = false;
}
}, 100)
2019-02-27 14:23:40 +00:00
onKeyboardResigned = () => {
this.closeEmoji();
}
2019-02-27 14:23:40 +00:00
onPressMention = (item) => {
if (!this.component) {
return;
}
const { trackingType } = this.state;
const msg = this.text;
const { start, end } = this.component._lastNativeSelection;
const cursor = Math.max(start, end);
const regexp = /([a-z0-9._-]+)$/im;
const result = msg.substr(0, cursor).replace(regexp, '');
const mentionName = trackingType === MENTIONS_TRACKING_TYPE_EMOJIS
? `${ item.name || item }:`
: (item.username || item.name || item.command);
const text = `${ result }${ mentionName } ${ msg.slice(cursor) }`;
if ((trackingType === MENTIONS_TRACKING_TYPE_COMMANDS) && item.providesPreview) {
this.showCommandPreview = true;
}
this.setInput(text);
this.focus();
requestAnimationFrame(() => this.stopTrackingMention());
}
onPressCommandPreview = (item) => {
const { rid } = this.props;
const { text } = this;
const command = text.substr(0, text.indexOf(' ')).slice(1);
const params = text.substr(text.indexOf(' ') + 1) || 'params';
this.showCommandPreview = false;
this.setState({ commandPreview: [] });
this.stopTrackingMention();
this.clearInput();
try {
RocketChat.executeCommandPreview(command, params, rid, item);
} catch (e) {
log('onPressCommandPreview', e);
}
}
2019-02-27 14:23:40 +00:00
onEmojiSelected = (keyboardId, params) => {
const { text } = this;
const { emoji } = params;
let newText = '';
// if messagebox has an active cursor
if (this.component && this.component._lastNativeSelection) {
const { start, end } = this.component._lastNativeSelection;
const cursor = Math.max(start, end);
newText = `${ text.substr(0, cursor) }${ emoji }${ text.substr(cursor) }`;
} else {
// if messagebox doesn't have a cursor, just append selected emoji
newText = `${ text }${ emoji }`;
}
this.setInput(newText);
2019-02-28 18:03:26 +00:00
this.setShowSend(true);
}
getPermalink = async(message) => {
try {
return await RocketChat.getPermalinkMessage(message);
} catch (error) {
return null;
}
}
2019-02-27 14:23:40 +00:00
getFixedMentions = (keyword) => {
if ('all'.indexOf(keyword) !== -1) {
this.users = [{ _id: -1, username: 'all' }, ...this.users];
}
if ('here'.indexOf(keyword) !== -1) {
this.users = [{ _id: -2, username: 'here' }, ...this.users];
}
}
2019-02-27 14:23:40 +00:00
getUsers = async(keyword) => {
this.users = database.objects('users');
if (keyword) {
this.users = this.users.filtered('username CONTAINS[c] $0', keyword);
}
this.getFixedMentions(keyword);
this.setState({ mentions: this.users.slice() });
const usernames = [];
if (keyword && this.users.length > 7) {
return;
}
this.users.forEach(user => usernames.push(user.username));
if (this.oldPromise) {
this.oldPromise();
}
try {
const results = await Promise.race([
RocketChat.spotlight(keyword, usernames, { users: true }),
new Promise((resolve, reject) => (this.oldPromise = reject))
]);
if (results.users && results.users.length) {
database.write(() => {
results.users.forEach((user) => {
try {
database.create('users', user, true);
} catch (e) {
2019-05-28 16:18:46 +00:00
log('err_create_users', e);
}
});
});
}
} catch (e) {
console.warn('spotlight canceled');
} finally {
delete this.oldPromise;
this.users = database.objects('users').filtered('username CONTAINS[c] $0', keyword).slice(0, MENTIONS_COUNT_TO_DISPLAY);
this.getFixedMentions(keyword);
this.setState({ mentions: this.users });
}
}
2019-02-27 14:23:40 +00:00
getRooms = async(keyword = '') => {
this.roomsCache = this.roomsCache || [];
this.rooms = database.objects('subscriptions')
.filtered('t != $0', 'd');
if (keyword) {
this.rooms = this.rooms.filtered('name CONTAINS[c] $0', keyword);
}
const rooms = [];
this.rooms.forEach(room => rooms.push(room));
this.roomsCache.forEach((room) => {
if (room.name && room.name.toUpperCase().indexOf(keyword.toUpperCase()) !== -1) {
rooms.push(room);
}
});
if (rooms.length > 3) {
this.setState({ mentions: rooms });
return;
}
if (this.oldPromise) {
this.oldPromise();
}
try {
const results = await Promise.race([
RocketChat.spotlight(keyword, [...rooms, ...this.roomsCache].map(r => r.name), { rooms: true }),
new Promise((resolve, reject) => (this.oldPromise = reject))
]);
if (results.rooms && results.rooms.length) {
this.roomsCache = [...this.roomsCache, ...results.rooms].filter(onlyUnique);
}
this.setState({ mentions: [...rooms.slice(), ...results.rooms] });
} catch (e) {
console.warn('spotlight canceled');
} finally {
delete this.oldPromise;
}
}
2019-02-27 14:23:40 +00:00
getEmojis = (keyword) => {
if (keyword) {
this.customEmojis = database.objects('customEmojis').filtered('name CONTAINS[c] $0', keyword).slice(0, MENTIONS_COUNT_TO_DISPLAY);
this.emojis = emojis.filter(emoji => emoji.indexOf(keyword) !== -1).slice(0, MENTIONS_COUNT_TO_DISPLAY);
const mergedEmojis = [...this.customEmojis, ...this.emojis].slice(0, MENTIONS_COUNT_TO_DISPLAY);
this.setState({ mentions: mergedEmojis });
}
}
getSlashCommands = (keyword) => {
this.commands = database.objects('slashCommand').filtered('command CONTAINS[c] $0', keyword);
this.setState({ mentions: this.commands });
}
focus = () => {
if (this.component && this.component.focus) {
this.component.focus();
}
}
handleTyping = (isTyping) => {
2019-04-08 12:35:28 +00:00
const { typing, rid } = this.props;
if (!isTyping) {
if (this.typingTimeout) {
clearTimeout(this.typingTimeout);
this.typingTimeout = false;
}
2019-04-08 12:35:28 +00:00
typing(rid, false);
return;
}
if (this.typingTimeout) {
return;
}
this.typingTimeout = setTimeout(() => {
2019-04-08 12:35:28 +00:00
typing(rid, true);
this.typingTimeout = false;
}, 1000);
}
setCommandPreview = async(command, params) => {
const { rid } = this.props;
try {
const { preview } = await RocketChat.getCommandPreview(command, rid, params);
this.showCommandPreview = true;
this.setState({ commandPreview: preview.items });
} catch (e) {
this.showCommandPreview = false;
log('command Preview', e);
}
}
setInput = (text) => {
this.text = text;
if (this.component && this.component.setNativeProps) {
this.component.setNativeProps({ text });
}
2019-02-27 14:23:40 +00:00
}
setShowSend = (showSend) => {
this.setState({ showSend });
}
clearInput = () => {
this.setInput('');
2019-02-27 14:23:40 +00:00
this.setShowSend(false);
}
sendImageMessage = async(file) => {
const { rid, tmid } = this.props;
this.setState({ file: { isVisible: false } });
const fileInfo = {
name: file.name,
description: file.description,
size: file.size,
type: file.mime,
store: 'Uploads',
path: file.path
2017-08-10 20:09:54 +00:00
};
try {
await RocketChat.sendFileMessage(rid, fileInfo, tmid);
} catch (e) {
2019-05-28 16:18:46 +00:00
log('err_send_image', e);
}
2017-08-10 20:09:54 +00:00
}
takePhoto = async() => {
try {
const image = await ImagePicker.openCamera(imagePickerConfig);
this.showUploadModal(image);
} catch (e) {
2019-05-28 16:18:46 +00:00
log('err_take_photo', e);
}
}
chooseFromLibrary = async() => {
try {
const image = await ImagePicker.openPicker(imagePickerConfig);
this.showUploadModal(image);
} catch (e) {
2019-05-28 16:18:46 +00:00
log('err_choose_from_library', e);
}
}
showUploadModal = (file) => {
this.setState({ file: { ...file, isVisible: true } });
}
showFileActions = () => {
ActionSheet.showActionSheetWithOptions({
options: fileOptions,
cancelButtonIndex: FILE_CANCEL_INDEX
}, (actionIndex) => {
this.handleFileActionPress(actionIndex);
});
}
handleFileActionPress = (actionIndex) => {
switch (actionIndex) {
case FILE_PHOTO_INDEX:
this.takePhoto();
break;
case FILE_LIBRARY_INDEX:
this.chooseFromLibrary();
break;
default:
break;
}
}
editCancel = () => {
const { editCancel } = this.props;
editCancel();
this.clearInput();
2017-11-24 20:44:52 +00:00
}
openEmoji = async() => {
await this.setState({
showEmojiKeyboard: true
});
}
recordAudioMessage = async() => {
const recording = await Recording.permission();
this.setState({ recording });
}
finishAudioMessage = async(fileInfo) => {
const { rid, tmid } = this.props;
this.setState({
recording: false
});
2018-05-29 17:10:40 +00:00
if (fileInfo) {
try {
await RocketChat.sendFileMessage(rid, fileInfo, tmid);
2018-05-29 17:10:40 +00:00
} catch (e) {
if (e && e.error === 'error-file-too-large') {
return Alert.alert(I18n.t(e.error));
2018-05-29 17:10:40 +00:00
}
2019-05-28 16:18:46 +00:00
log('err_finish_audio_message', e);
2018-05-29 17:10:40 +00:00
}
}
}
closeEmoji = () => {
this.setState({ showEmojiKeyboard: false });
}
submit = async() => {
const {
message: editingMessage, editRequest, onSubmit, rid: roomId
} = this.props;
const message = this.text;
this.clearInput();
this.closeEmoji();
this.stopTrackingMention();
this.handleTyping(false);
2018-03-02 21:31:44 +00:00
if (message.trim() === '') {
return;
}
2019-04-17 17:01:03 +00:00
const {
editing, replying
} = this.props;
// Slash command
if (message[0] === MENTIONS_TRACKING_TYPE_COMMANDS) {
const command = message.replace(/ .*/, '').slice(1);
const slashCommand = database.objects('slashCommand').filtered('command CONTAINS[c] $0', command);
if (slashCommand.length > 0) {
try {
const messageWithoutCommand = message.substr(message.indexOf(' ') + 1);
RocketChat.runSlashCommand(command, roomId, messageWithoutCommand);
} catch (e) {
log('slashCommand', e);
}
this.clearInput();
return;
}
}
2019-04-17 17:01:03 +00:00
// Edit
2018-03-02 21:31:44 +00:00
if (editing) {
const { _id, rid } = editingMessage;
editRequest({ _id, msg: message, rid });
2019-04-17 17:01:03 +00:00
// Reply
} else if (replying) {
2019-04-17 17:01:03 +00:00
const { replyMessage, closeReply, threadsEnabled } = this.props;
// Thread
if (threadsEnabled && replyMessage.mention) {
2019-04-17 17:01:03 +00:00
onSubmit(message, replyMessage._id);
// Legacy reply or quote (quote is a reply without mention)
2019-04-17 17:01:03 +00:00
} else {
const { user, roomType } = this.props;
const permalink = await this.getPermalink(replyMessage);
let msg = `[ ](${ permalink }) `;
2019-04-17 17:01:03 +00:00
// if original message wasn't sent by current user and neither from a direct room
if (user.username !== replyMessage.u.username && roomType !== 'd' && replyMessage.mention) {
msg += `@${ replyMessage.u.username } `;
}
msg = `${ msg } ${ message }`;
onSubmit(msg);
}
closeReply();
2019-04-17 17:01:03 +00:00
// Normal message
2018-03-02 21:31:44 +00:00
} else {
onSubmit(message);
2018-03-02 21:31:44 +00:00
}
2017-11-24 20:44:52 +00:00
}
updateMentions = (keyword, type) => {
if (type === MENTIONS_TRACKING_TYPE_USERS) {
this.getUsers(keyword);
} else if (type === MENTIONS_TRACKING_TYPE_EMOJIS) {
this.getEmojis(keyword);
} else if (type === MENTIONS_TRACKING_TYPE_COMMANDS) {
this.getSlashCommands(keyword);
} else {
this.getRooms(keyword);
}
}
2019-02-27 14:23:40 +00:00
identifyMentionKeyword = (keyword, type) => {
this.setState({
showEmojiKeyboard: false,
trackingType: type
});
this.updateMentions(keyword, type);
}
2019-02-27 14:23:40 +00:00
stopTrackingMention = () => {
const { trackingType } = this.state;
if (!trackingType) {
return;
}
this.setState({
mentions: [],
trackingType: '',
commandPreview: []
});
this.users = [];
this.rooms = [];
this.customEmojis = [];
this.emojis = [];
this.commands = [];
}
2018-01-19 12:38:14 +00:00
renderFixedMentionItem = item => (
<TouchableOpacity
style={styles.mentionItem}
onPress={() => this.onPressMention(item)}
>
2018-01-19 12:38:14 +00:00
<Text style={styles.fixedMentionAvatar}>{item.username}</Text>
2019-03-29 19:36:07 +00:00
<Text style={styles.mentionText}>{item.username === 'here' ? I18n.t('Notify_active_in_this_room') : I18n.t('Notify_all_in_this_room')}</Text>
</TouchableOpacity>
)
renderMentionEmoji = (item) => {
const { baseUrl } = this.props;
if (item.name) {
return (
<CustomEmoji
key='mention-item-avatar'
style={styles.mentionItemCustomEmoji}
emoji={item}
baseUrl={baseUrl}
/>
);
}
return (
<Text
key='mention-item-avatar'
style={styles.mentionItemEmoji}
>
{emojify(`:${ item }:`, { output: 'unicode' })}
</Text>
);
}
renderMentionItem = ({ item }) => {
const { trackingType } = this.state;
const { baseUrl, user } = this.props;
2018-01-19 12:38:14 +00:00
if (item.username === 'all' || item.username === 'here') {
return this.renderFixedMentionItem(item);
}
const defineTestID = (type) => {
switch (type) {
case MENTIONS_TRACKING_TYPE_EMOJIS:
return `mention-item-${ item.name || item }`;
case MENTIONS_TRACKING_TYPE_COMMANDS:
return `mention-item-${ item.command || item }`;
default:
return `mention-item-${ item.username || item.name || item }`;
}
};
const testID = defineTestID(trackingType);
2018-01-19 12:38:14 +00:00
return (
<TouchableOpacity
style={styles.mentionItem}
onPress={() => this.onPressMention(item)}
testID={testID}
2018-01-19 12:38:14 +00:00
>
{(() => {
switch (trackingType) {
case MENTIONS_TRACKING_TYPE_EMOJIS:
return (
<React.Fragment>
{this.renderMentionEmoji(item)}
<Text key='mention-item-name' style={styles.mentionText}>:{ item.name || item }:</Text>
</React.Fragment>
);
case MENTIONS_TRACKING_TYPE_COMMANDS:
return (
<React.Fragment>
<Text key='mention-item-command' style={styles.slash}>/</Text>
<Text key='mention-item-param'>{ item.command}</Text>
</React.Fragment>
);
default:
return (
<React.Fragment>
<Avatar
key='mention-item-avatar'
style={styles.avatar}
text={item.username || item.name}
size={30}
type={item.username ? 'd' : 'c'}
baseUrl={baseUrl}
userId={user.id}
token={user.token}
/>
<Text key='mention-item-name' style={styles.mentionText}>{ item.username || item.name || item }</Text>
</React.Fragment>
);
}
})()
}
2018-01-19 12:38:14 +00:00
</TouchableOpacity>
);
}
renderMentions = () => {
const { mentions, trackingType } = this.state;
if (!trackingType) {
return null;
}
return (
<ScrollView
testID='messagebox-container'
style={styles.scrollViewMention}
keyboardShouldPersistTaps='always'
>
2018-05-23 13:39:18 +00:00
<FlatList
style={styles.mentionList}
data={mentions}
renderItem={this.renderMentionItem}
keyExtractor={item => item._id || item.username || item.command || item}
2018-05-23 13:39:18 +00:00
keyboardShouldPersistTaps='always'
/>
</ScrollView>
);
};
renderCommandPreviewItem = ({ item }) => (
<CommandPreview item={item} onPress={this.onPressCommandPreview} />
);
renderCommandPreview = () => {
const { commandPreview } = this.state;
if (!this.showCommandPreview) {
return null;
}
return (
<View key='commandbox-container' testID='commandbox-container'>
<FlatList
style={styles.mentionList}
data={commandPreview}
renderItem={this.renderCommandPreviewItem}
keyExtractor={item => item.id}
keyboardShouldPersistTaps='always'
horizontal
showsHorizontalScrollIndicator={false}
/>
</View>
);
}
renderReplyPreview = () => {
const {
replyMessage, replying, closeReply, user
} = this.props;
if (!replying) {
return null;
}
return <ReplyPreview key='reply-preview' message={replyMessage} close={closeReply} username={user.username} />;
};
2019-02-27 14:23:40 +00:00
renderContent = () => {
const { recording, showEmojiKeyboard, showSend } = this.state;
const { editing } = this.props;
if (recording) {
return (<Recording onFinish={this.finishAudioMessage} />);
}
2017-08-09 13:12:00 +00:00
return (
<React.Fragment>
{this.renderCommandPreview()}
{this.renderMentions()}
<View style={styles.composer} key='messagebox'>
{this.renderReplyPreview()}
<View
style={[styles.textArea, editing && styles.editing]}
testID='messagebox'
>
<LeftButtons
showEmojiKeyboard={showEmojiKeyboard}
editing={editing}
showFileActions={this.showFileActions}
editCancel={this.editCancel}
openEmoji={this.openEmoji}
closeEmoji={this.closeEmoji}
/>
<TextInput
ref={component => this.component = component}
style={styles.textBoxInput}
returnKeyType='default'
keyboardType='twitter'
blurOnSubmit={false}
placeholder={I18n.t('New_Message')}
2019-02-27 14:23:40 +00:00
onChangeText={this.onChangeText}
underlineColorAndroid='transparent'
defaultValue=''
multiline
2019-03-29 19:36:07 +00:00
placeholderTextColor={COLOR_TEXT_DESCRIPTION}
testID='messagebox-input'
/>
<RightButtons
showSend={showSend}
submit={this.submit}
recordAudioMessage={this.recordAudioMessage}
showFileActions={this.showFileActions}
/>
</View>
</View>
</React.Fragment>
);
}
render() {
const { showEmojiKeyboard, file } = this.state;
return (
<React.Fragment>
<KeyboardAccessoryView
2019-02-27 14:23:40 +00:00
renderContent={this.renderContent}
kbInputRef={this.component}
kbComponent={showEmojiKeyboard ? 'EmojiKeyboard' : null}
2019-02-27 14:23:40 +00:00
onKeyboardResigned={this.onKeyboardResigned}
onItemSelected={this.onEmojiSelected}
trackInteractive
// revealKeyboardInteractive
requiresSameParentToManageScrollView
addBottomView
/>
<UploadModal
isVisible={(file && file.isVisible)}
file={file}
close={() => this.setState({ file: {} })}
submit={this.sendImageMessage}
/>
</React.Fragment>
2017-08-09 13:12:00 +00:00
);
}
}
2019-04-08 12:35:28 +00:00
const mapStateToProps = state => ({
message: state.messages.message,
replyMessage: state.messages.replyMessage,
replying: state.messages.replying,
2019-04-08 12:35:28 +00:00
editing: state.messages.editing,
baseUrl: state.settings.Site_Url || state.server ? state.server.server : '',
2019-04-17 17:01:03 +00:00
threadsEnabled: state.settings.Threads_enabled,
2019-04-08 12:35:28 +00:00
user: {
id: state.login.user && state.login.user.id,
username: state.login.user && state.login.user.username,
token: state.login.user && state.login.user.token
}
});
const dispatchToProps = ({
editCancel: () => editCancelAction(),
editRequest: message => editRequestAction(message),
typing: (rid, status) => userTypingAction(rid, status),
closeReply: () => replyCancelAction()
});
export default connect(mapStateToProps, dispatchToProps, null, { forwardRef: true })(MessageBox);