2018-12-21 10:55:35 +00:00
|
|
|
import React, { Component } from 'react';
|
2022-10-21 18:27:55 +00:00
|
|
|
import { Alert, Keyboard, NativeModules, Text, View, BackHandler } from 'react-native';
|
2017-11-21 16:55:32 +00:00
|
|
|
import { connect } from 'react-redux';
|
2022-11-24 17:48:37 +00:00
|
|
|
// import { KeyboardTrackingView } from 'react-native-keyboard-tracking-view';
|
2020-12-01 11:58:51 +00:00
|
|
|
import { KeyboardAccessoryView } from 'react-native-ui-lib/keyboard';
|
2022-03-31 22:39:24 +00:00
|
|
|
import ImagePicker, { Image, ImageOrVideo, Options } from 'react-native-image-crop-picker';
|
2021-02-26 16:01:45 +00:00
|
|
|
import { dequal } from 'dequal';
|
2019-07-18 17:25:18 +00:00
|
|
|
import DocumentPicker from 'react-native-document-picker';
|
2019-09-16 20:26:32 +00:00
|
|
|
import { Q } from '@nozbe/watermelondb';
|
2020-10-30 17:35:07 +00:00
|
|
|
import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
|
2018-03-07 00:17:20 +00:00
|
|
|
|
2020-02-11 14:01:35 +00:00
|
|
|
import { generateTriggerId } from '../../lib/methods/actions';
|
2022-06-27 18:46:59 +00:00
|
|
|
import { TextInput, IThemedTextInput } from '../TextInput';
|
2018-09-25 19:28:42 +00:00
|
|
|
import { userTyping as userTypingAction } from '../../actions/room';
|
2018-02-08 14:08:50 +00:00
|
|
|
import styles from './styles';
|
2019-09-16 20:26:32 +00:00
|
|
|
import database from '../../lib/database';
|
2022-06-06 14:17:51 +00:00
|
|
|
import log, { events, logEvent } from '../../lib/methods/helpers/log';
|
2020-07-06 19:23:46 +00:00
|
|
|
import RecordAudio from './RecordAudio';
|
2018-06-01 17:38:13 +00:00
|
|
|
import I18n from '../../i18n';
|
2018-07-20 19:54:46 +00:00
|
|
|
import ReplyPreview from './ReplyPreview';
|
2022-10-21 18:27:55 +00:00
|
|
|
import { themes, emojis } from '../../lib/constants';
|
2019-05-27 16:19:39 +00:00
|
|
|
import LeftButtons from './LeftButtons';
|
|
|
|
import RightButtons from './RightButtons';
|
2022-06-06 14:17:51 +00:00
|
|
|
import { canUploadFile } from '../../lib/methods/helpers/media';
|
|
|
|
import EventEmiter from '../../lib/methods/helpers/events';
|
2021-09-13 20:41:05 +00:00
|
|
|
import { KEY_COMMAND, handleCommandShowUpload, handleCommandSubmit, handleCommandTyping } from '../../commands';
|
2022-03-15 19:33:43 +00:00
|
|
|
import getMentionRegexp from './getMentionRegexp';
|
2019-10-30 14:14:41 +00:00
|
|
|
import Mentions from './Mentions';
|
|
|
|
import MessageboxContext from './Context';
|
|
|
|
import {
|
|
|
|
MENTIONS_COUNT_TO_DISPLAY,
|
2021-09-22 17:29:26 +00:00
|
|
|
MENTIONS_TRACKING_TYPE_CANNED,
|
2021-09-13 20:41:05 +00:00
|
|
|
MENTIONS_TRACKING_TYPE_COMMANDS,
|
|
|
|
MENTIONS_TRACKING_TYPE_EMOJIS,
|
|
|
|
MENTIONS_TRACKING_TYPE_ROOMS,
|
2022-08-08 18:38:01 +00:00
|
|
|
MENTIONS_TRACKING_TYPE_USERS,
|
|
|
|
TIMEOUT_CLOSE_EMOJI
|
2019-10-30 14:14:41 +00:00
|
|
|
} from './constants';
|
|
|
|
import CommandsPreview from './CommandsPreview';
|
2020-02-11 14:09:14 +00:00
|
|
|
import { getUserSelector } from '../../selectors/login';
|
2022-04-07 13:22:19 +00:00
|
|
|
import Navigation from '../../lib/navigation/appNavigation';
|
2022-08-08 18:38:01 +00:00
|
|
|
import { TActionSheetOptionsItem, withActionSheet } from '../ActionSheet';
|
2020-09-15 13:01:43 +00:00
|
|
|
import { sanitizeLikeString } from '../../lib/database/utils';
|
2022-05-02 19:21:15 +00:00
|
|
|
import { CustomIcon } from '../CustomIcon';
|
2022-02-07 16:52:09 +00:00
|
|
|
import { forceJpgExtension } from './forceJpgExtension';
|
2022-06-09 14:42:12 +00:00
|
|
|
import {
|
|
|
|
IApplicationState,
|
|
|
|
IBaseScreen,
|
|
|
|
IPreviewItem,
|
|
|
|
IUser,
|
|
|
|
TGetCustomEmoji,
|
|
|
|
TSubscriptionModel,
|
|
|
|
TThreadModel,
|
2022-10-21 18:27:55 +00:00
|
|
|
IMessage,
|
|
|
|
IEmoji
|
2022-06-09 14:42:12 +00:00
|
|
|
} from '../../definitions';
|
2022-03-31 22:39:24 +00:00
|
|
|
import { MasterDetailInsideStackParamList } from '../../stacks/MasterDetailStack/types';
|
2022-06-06 14:17:51 +00:00
|
|
|
import { getPermalinkMessage, search, sendFileMessage } from '../../lib/methods';
|
2022-08-25 19:53:19 +00:00
|
|
|
import { hasPermission, debounce, isAndroid, isIOS, isTablet, compareServerVersion } from '../../lib/methods/helpers';
|
2022-04-28 20:37:25 +00:00
|
|
|
import { Services } from '../../lib/services';
|
2022-04-12 16:27:05 +00:00
|
|
|
import { TSupportedThemes } from '../../theme';
|
2022-06-09 14:42:12 +00:00
|
|
|
import { ChatsStackParamList } from '../../stacks/types';
|
2022-10-21 18:27:55 +00:00
|
|
|
import { EventTypes } from '../EmojiPicker/interfaces';
|
|
|
|
import EmojiSearchbar from './EmojiSearchbar';
|
|
|
|
import shortnameToUnicode from '../../lib/methods/helpers/shortnameToUnicode';
|
2017-12-20 20:14:07 +00:00
|
|
|
|
2022-08-08 18:38:01 +00:00
|
|
|
require('./EmojiKeyboard');
|
2020-12-01 11:58:51 +00:00
|
|
|
|
2018-07-17 19:10:27 +00:00
|
|
|
const imagePickerConfig = {
|
|
|
|
cropping: true,
|
2020-10-30 15:54:44 +00:00
|
|
|
avoidEmptySpaceAroundImage: false,
|
2022-01-20 18:24:27 +00:00
|
|
|
freeStyleCropEnabled: true,
|
|
|
|
forceJpg: true
|
2018-07-17 19:10:27 +00:00
|
|
|
};
|
|
|
|
|
2022-03-31 22:39:24 +00:00
|
|
|
const libraryPickerConfig: Options = {
|
2020-06-26 20:22:56 +00:00
|
|
|
multiple: true,
|
2021-02-18 18:50:36 +00:00
|
|
|
compressVideoPreset: 'Passthrough',
|
2022-01-20 18:24:27 +00:00
|
|
|
mediaType: 'any',
|
|
|
|
forceJpg: true
|
2019-07-18 17:07:37 +00:00
|
|
|
};
|
|
|
|
|
2022-03-31 22:39:24 +00:00
|
|
|
const videoPickerConfig: Options = {
|
2019-07-18 17:07:37 +00:00
|
|
|
mediaType: 'video'
|
|
|
|
};
|
|
|
|
|
2022-06-09 14:42:12 +00:00
|
|
|
export interface IMessageBoxProps extends IBaseScreen<ChatsStackParamList & MasterDetailInsideStackParamList, any> {
|
2021-09-13 20:41:05 +00:00
|
|
|
rid: string;
|
|
|
|
baseUrl: string;
|
2022-02-17 15:27:01 +00:00
|
|
|
message: IMessage;
|
2021-09-13 20:41:05 +00:00
|
|
|
replying: boolean;
|
|
|
|
editing: boolean;
|
|
|
|
threadsEnabled: boolean;
|
|
|
|
isFocused(): boolean;
|
2022-03-08 18:54:26 +00:00
|
|
|
user: IUser;
|
2021-09-13 20:41:05 +00:00
|
|
|
roomType: string;
|
|
|
|
tmid: string;
|
|
|
|
replyWithMention: boolean;
|
|
|
|
FileUpload_MediaTypeWhiteList: string;
|
|
|
|
FileUpload_MaxFileSize: number;
|
|
|
|
Message_AudioRecorderEnabled: boolean;
|
2022-05-07 01:06:08 +00:00
|
|
|
getCustomEmoji: TGetCustomEmoji;
|
2021-09-13 20:41:05 +00:00
|
|
|
editCancel: Function;
|
|
|
|
editRequest: Function;
|
|
|
|
onSubmit: Function;
|
|
|
|
typing: Function;
|
2022-04-12 16:27:05 +00:00
|
|
|
theme: TSupportedThemes;
|
2021-09-13 20:41:05 +00:00
|
|
|
replyCancel(): void;
|
|
|
|
showSend: boolean;
|
|
|
|
children: JSX.Element;
|
|
|
|
isMasterDetail: boolean;
|
|
|
|
showActionSheet: Function;
|
|
|
|
iOSScrollBehavior: number;
|
|
|
|
sharing: boolean;
|
|
|
|
isActionsEnabled: boolean;
|
2021-09-22 17:29:26 +00:00
|
|
|
usedCannedResponse: string;
|
2021-12-13 16:27:01 +00:00
|
|
|
uploadFilePermission: string[];
|
2022-06-09 14:42:12 +00:00
|
|
|
goToCannedResponses: () => void | null;
|
2022-08-25 19:53:19 +00:00
|
|
|
serverVersion: string;
|
2021-09-13 20:41:05 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
interface IMessageBoxState {
|
|
|
|
mentions: any[];
|
|
|
|
showEmojiKeyboard: boolean;
|
|
|
|
showSend: any;
|
|
|
|
recording: boolean;
|
|
|
|
trackingType: string;
|
2022-03-15 14:41:23 +00:00
|
|
|
commandPreview: IPreviewItem[];
|
2021-09-13 20:41:05 +00:00
|
|
|
showCommandPreview: boolean;
|
|
|
|
command: {
|
2022-03-31 22:39:24 +00:00
|
|
|
appId?: string;
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
|
|
|
tshow: boolean;
|
2021-09-22 17:29:26 +00:00
|
|
|
mentionLoading: boolean;
|
2021-12-13 16:27:01 +00:00
|
|
|
permissionToUpload: boolean;
|
2022-10-21 18:27:55 +00:00
|
|
|
showEmojiSearchbar: boolean;
|
2021-09-13 20:41:05 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
|
2022-05-02 22:58:23 +00:00
|
|
|
public text: string;
|
2021-09-13 20:41:05 +00:00
|
|
|
|
|
|
|
private selection: { start: number; end: number };
|
|
|
|
|
|
|
|
private focused: boolean;
|
|
|
|
|
2022-03-31 22:39:24 +00:00
|
|
|
private imagePickerConfig: Options;
|
2021-09-13 20:41:05 +00:00
|
|
|
|
2022-03-31 22:39:24 +00:00
|
|
|
private libraryPickerConfig: Options;
|
2021-09-13 20:41:05 +00:00
|
|
|
|
2022-03-31 22:39:24 +00:00
|
|
|
private videoPickerConfig: Options;
|
2021-09-13 20:41:05 +00:00
|
|
|
|
2022-03-31 22:39:24 +00:00
|
|
|
private room!: TSubscriptionModel;
|
2021-09-13 20:41:05 +00:00
|
|
|
|
2022-03-31 22:39:24 +00:00
|
|
|
private thread!: TThreadModel;
|
2021-09-13 20:41:05 +00:00
|
|
|
|
|
|
|
private unsubscribeFocus: any;
|
|
|
|
|
|
|
|
private trackingTimeout: any;
|
|
|
|
|
|
|
|
private tracking: any;
|
|
|
|
|
|
|
|
private unsubscribeBlur: any;
|
|
|
|
|
|
|
|
private component: any;
|
|
|
|
|
|
|
|
private typingTimeout: any;
|
2020-06-26 20:22:56 +00:00
|
|
|
|
|
|
|
static defaultProps = {
|
|
|
|
message: {
|
|
|
|
id: ''
|
|
|
|
},
|
|
|
|
sharing: false,
|
2022-12-08 21:31:28 +00:00
|
|
|
iOSScrollBehavior: NativeModules.KeyboardTrackingViewTempManager?.KeyboardTrackingScrollBehaviorScrollToBottomInvertedOnly,
|
2020-06-26 20:22:56 +00:00
|
|
|
isActionsEnabled: true,
|
|
|
|
getCustomEmoji: () => {}
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2017-11-21 14:55:50 +00:00
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
constructor(props: IMessageBoxProps) {
|
2017-11-28 16:27:06 +00:00
|
|
|
super(props);
|
|
|
|
this.state = {
|
2017-12-20 20:14:07 +00:00
|
|
|
mentions: [],
|
2020-02-17 12:14:56 +00:00
|
|
|
showEmojiKeyboard: false,
|
2020-06-26 20:22:56 +00:00
|
|
|
showSend: props.showSend,
|
2018-07-17 19:10:27 +00:00
|
|
|
recording: false,
|
2019-02-27 14:23:40 +00:00
|
|
|
trackingType: '',
|
2019-09-25 21:32:13 +00:00
|
|
|
commandPreview: [],
|
2020-02-11 14:01:35 +00:00
|
|
|
showCommandPreview: false,
|
2020-10-30 17:35:07 +00:00
|
|
|
command: {},
|
2022-08-25 19:53:19 +00:00
|
|
|
tshow: this.sendThreadToChannel,
|
2021-12-13 16:27:01 +00:00
|
|
|
mentionLoading: false,
|
2022-10-21 18:27:55 +00:00
|
|
|
permissionToUpload: true,
|
|
|
|
showEmojiSearchbar: false
|
2017-11-28 16:27:06 +00:00
|
|
|
};
|
2018-11-05 19:03:17 +00:00
|
|
|
this.text = '';
|
2020-07-20 16:35:17 +00:00
|
|
|
this.selection = { start: 0, end: 0 };
|
2019-11-25 20:01:17 +00:00
|
|
|
this.focused = false;
|
2020-06-15 19:35:45 +00:00
|
|
|
|
2019-07-18 17:07:37 +00:00
|
|
|
const libPickerLabels = {
|
|
|
|
cropperChooseText: I18n.t('Choose'),
|
|
|
|
cropperCancelText: I18n.t('Cancel'),
|
|
|
|
loadingLabelText: I18n.t('Processing')
|
|
|
|
};
|
2021-09-13 20:41:05 +00:00
|
|
|
|
2019-07-16 14:30:29 +00:00
|
|
|
this.imagePickerConfig = {
|
|
|
|
...imagePickerConfig,
|
2019-07-18 17:07:37 +00:00
|
|
|
...libPickerLabels
|
|
|
|
};
|
2021-09-13 20:41:05 +00:00
|
|
|
|
2019-07-18 17:07:37 +00:00
|
|
|
this.libraryPickerConfig = {
|
|
|
|
...libraryPickerConfig,
|
|
|
|
...libPickerLabels
|
|
|
|
};
|
2021-09-13 20:41:05 +00:00
|
|
|
|
2019-07-18 17:07:37 +00:00
|
|
|
this.videoPickerConfig = {
|
|
|
|
...videoPickerConfig,
|
|
|
|
...libPickerLabels
|
2019-07-16 14:30:29 +00:00
|
|
|
};
|
2022-10-21 18:27:55 +00:00
|
|
|
|
|
|
|
BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
|
2017-11-28 16:27:06 +00:00
|
|
|
}
|
2018-09-25 19:28:42 +00:00
|
|
|
|
2022-08-25 19:53:19 +00:00
|
|
|
get sendThreadToChannel() {
|
|
|
|
const { user, serverVersion, tmid } = this.props;
|
|
|
|
if (tmid && compareServerVersion(serverVersion, 'lowerThan', '5.0.0')) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
if (tmid && user.alsoSendThreadToChannel === 'default') {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
if (user.alsoSendThreadToChannel === 'always') {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
if (user.alsoSendThreadToChannel === 'never') {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
2019-09-16 20:26:32 +00:00
|
|
|
async componentDidMount() {
|
|
|
|
const db = database.active;
|
2022-11-25 13:21:56 +00:00
|
|
|
const { rid, tmid, navigation, sharing, usedCannedResponse } = this.props;
|
2019-04-24 18:36:29 +00:00
|
|
|
let msg;
|
2019-09-16 20:26:32 +00:00
|
|
|
try {
|
2021-02-26 16:25:51 +00:00
|
|
|
const threadsCollection = db.get('threads');
|
|
|
|
const subsCollection = db.get('subscriptions');
|
2020-06-26 20:22:56 +00:00
|
|
|
try {
|
|
|
|
this.room = await subsCollection.find(rid);
|
|
|
|
} catch (error) {
|
|
|
|
console.log('Messagebox.didMount: Room not found');
|
|
|
|
}
|
2019-09-16 20:26:32 +00:00
|
|
|
if (tmid) {
|
|
|
|
try {
|
2020-06-26 20:22:56 +00:00
|
|
|
this.thread = await threadsCollection.find(tmid);
|
|
|
|
if (this.thread && !sharing) {
|
|
|
|
msg = this.thread.draftMessage;
|
2019-09-16 20:26:32 +00:00
|
|
|
}
|
|
|
|
} catch (error) {
|
|
|
|
console.log('Messagebox.didMount: Thread not found');
|
|
|
|
}
|
2020-06-26 20:22:56 +00:00
|
|
|
} else if (!sharing) {
|
2020-07-02 17:10:11 +00:00
|
|
|
msg = this.room?.draftMessage;
|
2019-04-24 18:36:29 +00:00
|
|
|
}
|
2019-09-16 20:26:32 +00:00
|
|
|
} catch (e) {
|
|
|
|
log(e);
|
2019-04-24 18:36:29 +00:00
|
|
|
}
|
2019-09-16 20:26:32 +00:00
|
|
|
|
2019-04-24 18:36:29 +00:00
|
|
|
if (msg) {
|
|
|
|
this.setInput(msg);
|
2019-04-08 12:35:28 +00:00
|
|
|
this.setShowSend(true);
|
2019-04-01 14:45:17 +00:00
|
|
|
}
|
2019-05-27 16:19:39 +00:00
|
|
|
|
2019-11-25 20:01:17 +00:00
|
|
|
if (isTablet) {
|
|
|
|
EventEmiter.addEventListener(KEY_COMMAND, this.handleCommands);
|
|
|
|
}
|
2020-02-28 17:52:50 +00:00
|
|
|
|
2022-11-25 13:21:56 +00:00
|
|
|
if (usedCannedResponse) {
|
2021-09-28 19:25:20 +00:00
|
|
|
this.onChangeText(usedCannedResponse);
|
2021-09-22 17:29:26 +00:00
|
|
|
}
|
|
|
|
|
2021-12-13 16:27:01 +00:00
|
|
|
this.setOptions();
|
|
|
|
|
2020-06-15 14:00:46 +00:00
|
|
|
this.unsubscribeFocus = navigation.addListener('focus', () => {
|
2020-12-14 16:30:25 +00:00
|
|
|
// didFocus
|
|
|
|
// We should wait pushed views be dismissed
|
2021-01-15 14:14:25 +00:00
|
|
|
this.trackingTimeout = setTimeout(() => {
|
2020-12-14 16:30:25 +00:00
|
|
|
if (this.tracking && this.tracking.resetTracking) {
|
|
|
|
// Reset messageBox keyboard tracking
|
|
|
|
this.tracking.resetTracking();
|
|
|
|
}
|
2021-01-15 14:14:25 +00:00
|
|
|
}, 500);
|
2020-02-28 17:52:50 +00:00
|
|
|
});
|
2020-06-15 14:00:46 +00:00
|
|
|
this.unsubscribeBlur = navigation.addListener('blur', () => {
|
2022-08-08 18:38:01 +00:00
|
|
|
this.closeEmoji();
|
2020-06-15 14:00:46 +00:00
|
|
|
this.component?.blur();
|
|
|
|
});
|
2019-04-01 14:45:17 +00:00
|
|
|
}
|
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
UNSAFE_componentWillReceiveProps(nextProps: any) {
|
2021-09-22 17:29:26 +00:00
|
|
|
const { isFocused, editing, replying, sharing, usedCannedResponse } = this.props;
|
2020-06-26 20:22:56 +00:00
|
|
|
if (!isFocused?.()) {
|
|
|
|
return;
|
|
|
|
}
|
2021-09-22 17:29:26 +00:00
|
|
|
if (usedCannedResponse !== nextProps.usedCannedResponse) {
|
|
|
|
this.onChangeText(nextProps.usedCannedResponse ?? '');
|
|
|
|
}
|
2020-06-26 20:22:56 +00:00
|
|
|
if (sharing) {
|
|
|
|
this.setInput(nextProps.message.msg ?? '');
|
2019-04-24 18:36:29 +00:00
|
|
|
return;
|
|
|
|
}
|
2019-09-16 20:26:32 +00:00
|
|
|
if (editing !== nextProps.editing && nextProps.editing) {
|
2018-11-05 19:03:17 +00:00
|
|
|
this.setInput(nextProps.message.msg);
|
2019-04-08 12:35:28 +00:00
|
|
|
if (this.text) {
|
|
|
|
this.setShowSend(true);
|
|
|
|
}
|
2020-06-15 19:35:45 +00:00
|
|
|
this.focus();
|
2019-09-16 20:26:32 +00:00
|
|
|
} else if (replying !== nextProps.replying && nextProps.replying) {
|
2019-03-06 13:27:40 +00:00
|
|
|
this.focus();
|
2017-11-24 20:44:52 +00:00
|
|
|
} else if (!nextProps.message) {
|
2018-11-05 19:03:17 +00:00
|
|
|
this.clearInput();
|
2017-11-21 14:55:50 +00:00
|
|
|
}
|
2021-01-15 14:14:25 +00:00
|
|
|
if (this.trackingTimeout) {
|
|
|
|
clearTimeout(this.trackingTimeout);
|
|
|
|
this.trackingTimeout = false;
|
|
|
|
}
|
2017-08-09 13:12:00 +00:00
|
|
|
}
|
2017-12-20 20:14:07 +00:00
|
|
|
|
2021-12-13 16:27:01 +00:00
|
|
|
shouldComponentUpdate(nextProps: IMessageBoxProps, nextState: IMessageBoxState) {
|
|
|
|
const {
|
|
|
|
showEmojiKeyboard,
|
|
|
|
showSend,
|
|
|
|
recording,
|
|
|
|
mentions,
|
|
|
|
commandPreview,
|
|
|
|
tshow,
|
|
|
|
mentionLoading,
|
|
|
|
trackingType,
|
2022-10-21 18:27:55 +00:00
|
|
|
permissionToUpload,
|
|
|
|
showEmojiSearchbar
|
2021-12-13 16:27:01 +00:00
|
|
|
} = this.state;
|
|
|
|
|
2022-06-09 14:42:12 +00:00
|
|
|
const {
|
|
|
|
roomType,
|
|
|
|
replying,
|
|
|
|
editing,
|
|
|
|
isFocused,
|
|
|
|
message,
|
|
|
|
theme,
|
|
|
|
usedCannedResponse,
|
|
|
|
uploadFilePermission,
|
|
|
|
goToCannedResponses
|
|
|
|
} = this.props;
|
2019-12-04 16:39:53 +00:00
|
|
|
if (nextProps.theme !== theme) {
|
|
|
|
return true;
|
|
|
|
}
|
2022-08-08 18:38:01 +00:00
|
|
|
if (nextState.showEmojiKeyboard !== showEmojiKeyboard) {
|
|
|
|
return true;
|
|
|
|
}
|
2022-10-21 18:27:55 +00:00
|
|
|
if (nextState.showEmojiSearchbar !== showEmojiSearchbar) {
|
|
|
|
return true;
|
|
|
|
}
|
2019-10-28 20:51:46 +00:00
|
|
|
if (!isFocused()) {
|
2019-04-24 18:36:29 +00:00
|
|
|
return false;
|
|
|
|
}
|
2018-12-21 10:55:35 +00:00
|
|
|
if (nextProps.roomType !== roomType) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
if (nextProps.replying !== replying) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
if (nextProps.editing !== editing) {
|
|
|
|
return true;
|
|
|
|
}
|
2021-09-22 17:29:26 +00:00
|
|
|
if (nextState.trackingType !== trackingType) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
if (nextState.mentionLoading !== mentionLoading) {
|
|
|
|
return true;
|
|
|
|
}
|
2018-12-21 10:55:35 +00:00
|
|
|
if (nextState.showSend !== showSend) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
if (nextState.recording !== recording) {
|
|
|
|
return true;
|
|
|
|
}
|
2020-10-30 17:35:07 +00:00
|
|
|
if (nextState.tshow !== tshow) {
|
|
|
|
return true;
|
|
|
|
}
|
2021-12-13 16:27:01 +00:00
|
|
|
if (nextState.permissionToUpload !== permissionToUpload) {
|
|
|
|
return true;
|
|
|
|
}
|
2021-02-26 16:01:45 +00:00
|
|
|
if (!dequal(nextState.mentions, mentions)) {
|
2018-12-21 10:55:35 +00:00
|
|
|
return true;
|
|
|
|
}
|
2021-02-26 16:01:45 +00:00
|
|
|
if (!dequal(nextState.commandPreview, commandPreview)) {
|
2019-06-10 18:36:56 +00:00
|
|
|
return true;
|
|
|
|
}
|
2021-02-26 16:01:45 +00:00
|
|
|
if (!dequal(nextProps.message?.id, message?.id)) {
|
2020-06-15 19:35:45 +00:00
|
|
|
return true;
|
|
|
|
}
|
2021-12-13 16:27:01 +00:00
|
|
|
if (!dequal(nextProps.uploadFilePermission, uploadFilePermission)) {
|
|
|
|
return true;
|
|
|
|
}
|
2021-09-22 17:29:26 +00:00
|
|
|
if (nextProps.usedCannedResponse !== usedCannedResponse) {
|
|
|
|
return true;
|
|
|
|
}
|
2022-06-09 14:42:12 +00:00
|
|
|
if (nextProps.goToCannedResponses !== goToCannedResponses) {
|
|
|
|
return true;
|
|
|
|
}
|
2018-12-21 10:55:35 +00:00
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
2021-12-13 16:27:01 +00:00
|
|
|
componentDidUpdate(prevProps: IMessageBoxProps) {
|
2022-08-25 19:53:19 +00:00
|
|
|
const { uploadFilePermission, goToCannedResponses, replyWithMention, threadsEnabled } = this.props;
|
|
|
|
if (prevProps.replyWithMention !== replyWithMention) {
|
|
|
|
if (threadsEnabled && replyWithMention) {
|
|
|
|
this.setState({ tshow: this.sendThreadToChannel });
|
|
|
|
}
|
|
|
|
}
|
2022-06-09 14:42:12 +00:00
|
|
|
if (!dequal(prevProps.uploadFilePermission, uploadFilePermission) || prevProps.goToCannedResponses !== goToCannedResponses) {
|
2021-12-13 16:27:01 +00:00
|
|
|
this.setOptions();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-09-16 20:26:32 +00:00
|
|
|
componentWillUnmount() {
|
2021-09-13 20:41:05 +00:00
|
|
|
console.countReset(`${this.constructor.name}.render calls`);
|
2019-09-27 19:17:29 +00:00
|
|
|
if (this.onChangeText && this.onChangeText.stop) {
|
|
|
|
this.onChangeText.stop();
|
|
|
|
}
|
|
|
|
if (this.getUsers && this.getUsers.stop) {
|
|
|
|
this.getUsers.stop();
|
|
|
|
}
|
|
|
|
if (this.getRooms && this.getRooms.stop) {
|
|
|
|
this.getRooms.stop();
|
|
|
|
}
|
|
|
|
if (this.getEmojis && this.getEmojis.stop) {
|
|
|
|
this.getEmojis.stop();
|
|
|
|
}
|
|
|
|
if (this.getSlashCommands && this.getSlashCommands.stop) {
|
|
|
|
this.getSlashCommands.stop();
|
|
|
|
}
|
2021-09-22 17:29:26 +00:00
|
|
|
if (this.getCannedResponses && this.getCannedResponses.stop) {
|
|
|
|
this.getCannedResponses.stop();
|
|
|
|
}
|
2020-06-15 14:00:46 +00:00
|
|
|
if (this.unsubscribeFocus) {
|
|
|
|
this.unsubscribeFocus();
|
|
|
|
}
|
|
|
|
if (this.unsubscribeBlur) {
|
|
|
|
this.unsubscribeBlur();
|
2020-02-28 17:52:50 +00:00
|
|
|
}
|
2019-11-25 20:01:17 +00:00
|
|
|
if (isTablet) {
|
|
|
|
EventEmiter.removeListener(KEY_COMMAND, this.handleCommands);
|
|
|
|
}
|
2022-10-21 18:27:55 +00:00
|
|
|
BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
|
2019-09-16 20:26:32 +00:00
|
|
|
}
|
|
|
|
|
2021-12-13 16:27:01 +00:00
|
|
|
setOptions = async () => {
|
|
|
|
const { uploadFilePermission, rid } = this.props;
|
|
|
|
|
|
|
|
// Servers older than 4.2
|
|
|
|
if (!uploadFilePermission) {
|
|
|
|
this.setState({ permissionToUpload: true });
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2022-04-28 20:37:25 +00:00
|
|
|
const permissionToUpload = await hasPermission([uploadFilePermission], rid);
|
2021-12-13 16:27:01 +00:00
|
|
|
this.setState({ permissionToUpload: permissionToUpload[0] });
|
|
|
|
};
|
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
onChangeText: any = (text: string): void => {
|
2019-02-27 14:23:40 +00:00
|
|
|
const isTextEmpty = text.length === 0;
|
|
|
|
this.setShowSend(!isTextEmpty);
|
2019-09-27 19:17:29 +00:00
|
|
|
this.debouncedOnChangeText(text);
|
2019-11-25 20:01:17 +00:00
|
|
|
this.setInput(text);
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2019-09-27 19:17:29 +00:00
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
onSelectionChange = (e: any) => {
|
2020-07-20 16:35:17 +00:00
|
|
|
this.selection = e.nativeEvent.selection;
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2020-07-20 16:35:17 +00:00
|
|
|
|
2019-09-27 19:17:29 +00:00
|
|
|
// eslint-disable-next-line react/sort-comp
|
2021-09-13 20:41:05 +00:00
|
|
|
debouncedOnChangeText = debounce(async (text: any) => {
|
2021-09-22 17:29:26 +00:00
|
|
|
const { sharing, roomType } = this.props;
|
2019-09-27 19:17:29 +00:00
|
|
|
const isTextEmpty = text.length === 0;
|
2021-04-07 18:56:16 +00:00
|
|
|
if (isTextEmpty) {
|
|
|
|
this.stopTrackingMention();
|
|
|
|
return;
|
|
|
|
}
|
2019-02-27 14:23:40 +00:00
|
|
|
this.handleTyping(!isTextEmpty);
|
2021-04-07 18:56:16 +00:00
|
|
|
const { start, end } = this.selection;
|
|
|
|
const cursor = Math.max(start, end);
|
|
|
|
const txt = cursor < text.length ? text.substr(0, cursor).split(' ') : text.split(' ');
|
|
|
|
const lastWord = txt[txt.length - 1];
|
|
|
|
const result = lastWord.substring(1);
|
|
|
|
|
|
|
|
const commandMention = text.match(/^\//); // match only if message begins with /
|
|
|
|
const channelMention = lastWord.match(/^#/);
|
|
|
|
const userMention = lastWord.match(/^@/);
|
|
|
|
const emojiMention = lastWord.match(/^:/);
|
2021-09-22 17:29:26 +00:00
|
|
|
const cannedMention = lastWord.match(/^!/);
|
2021-04-07 18:56:16 +00:00
|
|
|
|
|
|
|
if (commandMention && !sharing) {
|
|
|
|
const command = text.substr(1);
|
|
|
|
const commandParameter = text.match(/^\/([a-z0-9._-]+) (.+)/im);
|
|
|
|
if (commandParameter) {
|
|
|
|
const db = database.active;
|
|
|
|
const [, name, params] = commandParameter;
|
2021-02-26 16:25:51 +00:00
|
|
|
const commandsCollection = db.get('slash_commands');
|
2020-06-26 20:22:56 +00:00
|
|
|
try {
|
2021-04-07 18:56:16 +00:00
|
|
|
const commandRecord = await commandsCollection.find(name);
|
|
|
|
if (commandRecord.providesPreview) {
|
|
|
|
return this.setCommandPreview(commandRecord, name, params);
|
2020-06-26 20:22:56 +00:00
|
|
|
}
|
|
|
|
} catch (e) {
|
2021-04-07 18:56:16 +00:00
|
|
|
// do nothing
|
2020-06-26 20:22:56 +00:00
|
|
|
}
|
2019-05-27 16:19:39 +00:00
|
|
|
}
|
2021-04-07 18:56:16 +00:00
|
|
|
return this.identifyMentionKeyword(command, MENTIONS_TRACKING_TYPE_COMMANDS);
|
2021-09-13 20:41:05 +00:00
|
|
|
}
|
|
|
|
if (channelMention) {
|
2021-04-07 18:56:16 +00:00
|
|
|
return this.identifyMentionKeyword(result, MENTIONS_TRACKING_TYPE_ROOMS);
|
2021-09-13 20:41:05 +00:00
|
|
|
}
|
|
|
|
if (userMention) {
|
2021-04-07 18:56:16 +00:00
|
|
|
return this.identifyMentionKeyword(result, MENTIONS_TRACKING_TYPE_USERS);
|
2021-09-13 20:41:05 +00:00
|
|
|
}
|
|
|
|
if (emojiMention) {
|
2021-04-07 18:56:16 +00:00
|
|
|
return this.identifyMentionKeyword(result, MENTIONS_TRACKING_TYPE_EMOJIS);
|
2019-03-06 13:27:40 +00:00
|
|
|
}
|
2021-09-22 17:29:26 +00:00
|
|
|
if (cannedMention && roomType === 'l') {
|
|
|
|
return this.identifyMentionKeyword(result, MENTIONS_TRACKING_TYPE_CANNED);
|
|
|
|
}
|
2021-09-13 20:41:05 +00:00
|
|
|
return this.stopTrackingMention();
|
|
|
|
}, 100);
|
2017-12-20 20:14:07 +00:00
|
|
|
|
2020-02-17 12:14:56 +00:00
|
|
|
onKeyboardResigned = () => {
|
2022-10-21 18:27:55 +00:00
|
|
|
const { showEmojiSearchbar } = this.state;
|
|
|
|
if (!showEmojiSearchbar) {
|
|
|
|
this.closeEmoji();
|
|
|
|
}
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2020-02-17 12:14:56 +00:00
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
onPressMention = (item: any) => {
|
2019-03-06 13:27:40 +00:00
|
|
|
if (!this.component) {
|
|
|
|
return;
|
|
|
|
}
|
2018-09-25 19:28:42 +00:00
|
|
|
const { trackingType } = this.state;
|
2018-11-05 19:03:17 +00:00
|
|
|
const msg = this.text;
|
2020-07-20 16:35:17 +00:00
|
|
|
const { start, end } = this.selection;
|
2018-09-25 19:28:42 +00:00
|
|
|
const cursor = Math.max(start, end);
|
2022-03-15 19:33:43 +00:00
|
|
|
const regexp = getMentionRegexp();
|
2021-09-22 17:29:26 +00:00
|
|
|
let result = msg.substr(0, cursor).replace(regexp, '');
|
|
|
|
// Remove the ! after select the canned response
|
|
|
|
if (trackingType === MENTIONS_TRACKING_TYPE_CANNED) {
|
|
|
|
const lastIndexOfExclamation = msg.lastIndexOf('!', cursor);
|
|
|
|
result = msg.substr(0, lastIndexOfExclamation).replace(regexp, '');
|
|
|
|
}
|
2021-09-13 20:41:05 +00:00
|
|
|
const mentionName =
|
2021-09-22 17:29:26 +00:00
|
|
|
trackingType === MENTIONS_TRACKING_TYPE_EMOJIS
|
|
|
|
? `${item.name || item}:`
|
|
|
|
: item.username || item.name || item.command || item.text;
|
2021-09-13 20:41:05 +00:00
|
|
|
const text = `${result}${mentionName} ${msg.slice(cursor)}`;
|
|
|
|
if (trackingType === MENTIONS_TRACKING_TYPE_COMMANDS && item.providesPreview) {
|
2019-09-25 21:32:13 +00:00
|
|
|
this.setState({ showCommandPreview: true });
|
2019-06-10 18:36:56 +00:00
|
|
|
}
|
2021-09-13 20:41:05 +00:00
|
|
|
|
2020-07-20 16:35:17 +00:00
|
|
|
const newCursor = cursor + mentionName.length;
|
|
|
|
this.setInput(text, { start: newCursor, end: newCursor });
|
2019-03-06 13:27:40 +00:00
|
|
|
this.focus();
|
2018-09-25 19:28:42 +00:00
|
|
|
requestAnimationFrame(() => this.stopTrackingMention());
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2018-09-25 19:28:42 +00:00
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
onPressCommandPreview = (item: any) => {
|
2020-02-11 14:01:35 +00:00
|
|
|
const { command } = this.state;
|
2020-02-11 15:56:06 +00:00
|
|
|
const {
|
2021-09-13 20:41:05 +00:00
|
|
|
rid,
|
|
|
|
tmid,
|
|
|
|
message: { id: messageTmid },
|
|
|
|
replyCancel
|
2020-02-11 15:56:06 +00:00
|
|
|
} = this.props;
|
2019-06-10 18:36:56 +00:00
|
|
|
const { text } = this;
|
2020-02-11 14:01:35 +00:00
|
|
|
const name = text.substr(0, text.indexOf(' ')).slice(1);
|
2019-06-10 18:36:56 +00:00
|
|
|
const params = text.substr(text.indexOf(' ') + 1) || 'params';
|
2020-02-11 14:01:35 +00:00
|
|
|
this.setState({ commandPreview: [], showCommandPreview: false, command: {} });
|
2019-06-10 18:36:56 +00:00
|
|
|
this.stopTrackingMention();
|
|
|
|
this.clearInput();
|
2019-09-25 21:32:13 +00:00
|
|
|
this.handleTyping(false);
|
2019-06-10 18:36:56 +00:00
|
|
|
try {
|
2020-02-11 14:01:35 +00:00
|
|
|
const { appId } = command;
|
|
|
|
const triggerId = generateTriggerId(appId);
|
2022-04-28 20:37:25 +00:00
|
|
|
Services.executeCommandPreview(name, params, rid, item, triggerId, tmid || messageTmid);
|
2020-02-11 15:56:06 +00:00
|
|
|
replyCancel();
|
2019-06-10 18:36:56 +00:00
|
|
|
} catch (e) {
|
2019-08-30 12:43:23 +00:00
|
|
|
log(e);
|
2019-06-10 18:36:56 +00:00
|
|
|
}
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2019-06-10 18:36:56 +00:00
|
|
|
|
2022-10-21 18:27:55 +00:00
|
|
|
onKeyboardItemSelected = (keyboardId: string, params: { eventType: EventTypes; emoji: IEmoji }) => {
|
|
|
|
const { eventType, emoji } = params;
|
2020-02-17 12:14:56 +00:00
|
|
|
const { text } = this;
|
|
|
|
let newText = '';
|
|
|
|
// if messagebox has an active cursor
|
2020-07-20 16:35:17 +00:00
|
|
|
const { start, end } = this.selection;
|
|
|
|
const cursor = Math.max(start, end);
|
2022-10-21 18:27:55 +00:00
|
|
|
let newCursor;
|
|
|
|
|
|
|
|
switch (eventType) {
|
|
|
|
case EventTypes.BACKSPACE_PRESSED:
|
|
|
|
logEvent(events.MB_BACKSPACE);
|
|
|
|
const emojiRegex = /\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff]/;
|
|
|
|
let charsToRemove = 1;
|
|
|
|
const lastEmoji = text.substr(cursor > 0 ? cursor - 2 : text.length - 2, cursor > 0 ? cursor : text.length);
|
|
|
|
// Check if last character is an emoji
|
|
|
|
if (emojiRegex.test(lastEmoji)) charsToRemove = 2;
|
|
|
|
newText =
|
|
|
|
text.substr(0, (cursor > 0 ? cursor : text.length) - charsToRemove) + text.substr(cursor > 0 ? cursor : text.length);
|
|
|
|
newCursor = cursor - charsToRemove;
|
|
|
|
this.setInput(newText, { start: newCursor, end: newCursor });
|
|
|
|
this.setShowSend(newText !== '');
|
|
|
|
break;
|
|
|
|
case EventTypes.EMOJI_PRESSED:
|
|
|
|
logEvent(events.MB_EMOJI_SELECTED);
|
|
|
|
let emojiText = '';
|
|
|
|
if (typeof emoji === 'string') {
|
|
|
|
const shortname = `:${emoji}:`;
|
|
|
|
emojiText = shortnameToUnicode(shortname);
|
|
|
|
} else {
|
|
|
|
emojiText = `:${emoji.name}:`;
|
|
|
|
}
|
|
|
|
newText = `${text.substr(0, cursor)}${emojiText}${text.substr(cursor)}`;
|
|
|
|
newCursor = cursor + emojiText.length;
|
|
|
|
this.setInput(newText, { start: newCursor, end: newCursor });
|
|
|
|
this.setShowSend(true);
|
|
|
|
break;
|
|
|
|
case EventTypes.SEARCH_PRESSED:
|
|
|
|
logEvent(events.MB_EMOJI_SEARCH_PRESSED);
|
|
|
|
this.setState({ showEmojiKeyboard: false, showEmojiSearchbar: true });
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
// Do nothing
|
|
|
|
}
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2020-02-17 12:14:56 +00:00
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
getPermalink = async (message: any) => {
|
2018-07-20 19:54:46 +00:00
|
|
|
try {
|
2022-04-28 20:37:25 +00:00
|
|
|
return await getPermalinkMessage(message);
|
2018-07-20 19:54:46 +00:00
|
|
|
} catch (error) {
|
|
|
|
return null;
|
|
|
|
}
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2018-07-20 19:54:46 +00:00
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
getFixedMentions = (keyword: any) => {
|
|
|
|
let result: any = [];
|
2018-09-25 19:28:42 +00:00
|
|
|
if ('all'.indexOf(keyword) !== -1) {
|
2021-04-07 18:56:16 +00:00
|
|
|
result = [{ rid: -1, username: 'all' }];
|
2018-09-25 19:28:42 +00:00
|
|
|
}
|
|
|
|
if ('here'.indexOf(keyword) !== -1) {
|
2021-04-07 18:56:16 +00:00
|
|
|
result = [{ rid: -2, username: 'here' }, ...result];
|
2018-09-25 19:28:42 +00:00
|
|
|
}
|
2019-09-16 20:26:32 +00:00
|
|
|
return result;
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2018-09-25 19:28:42 +00:00
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
getUsers = debounce(async (keyword: any) => {
|
2022-10-31 16:43:47 +00:00
|
|
|
const { rid } = this.props;
|
|
|
|
let res = await search({ text: keyword, filterRooms: false, filterUsers: true, rid });
|
2019-09-16 20:26:32 +00:00
|
|
|
res = [...this.getFixedMentions(keyword), ...res];
|
2021-09-22 17:29:26 +00:00
|
|
|
this.setState({ mentions: res, mentionLoading: false });
|
2021-09-13 20:41:05 +00:00
|
|
|
}, 300);
|
2018-09-25 19:28:42 +00:00
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
getRooms = debounce(async (keyword = '') => {
|
2022-04-28 20:37:25 +00:00
|
|
|
const res = await search({ text: keyword, filterRooms: true, filterUsers: false });
|
2021-09-22 17:29:26 +00:00
|
|
|
this.setState({ mentions: res, mentionLoading: false });
|
2021-09-13 20:41:05 +00:00
|
|
|
}, 300);
|
2018-09-25 19:28:42 +00:00
|
|
|
|
2022-10-21 18:27:55 +00:00
|
|
|
getCustomEmojis = async (keyword: any, count: number) => {
|
2021-04-07 18:56:16 +00:00
|
|
|
const likeString = sanitizeLikeString(keyword);
|
|
|
|
const whereClause = [];
|
|
|
|
if (likeString) {
|
2021-09-13 20:41:05 +00:00
|
|
|
whereClause.push(Q.where('name', Q.like(`${likeString}%`)));
|
2021-04-07 18:56:16 +00:00
|
|
|
}
|
2022-10-21 18:27:55 +00:00
|
|
|
const db = database.active;
|
|
|
|
const customEmojisCollection = db.get('custom_emojis');
|
|
|
|
const customEmojis = await (await customEmojisCollection.query(...whereClause).fetch()).slice(0, count);
|
|
|
|
return customEmojis;
|
|
|
|
};
|
|
|
|
|
|
|
|
getEmojis = debounce(async (keyword: any) => {
|
|
|
|
const customEmojis = await this.getCustomEmojis(keyword, MENTIONS_COUNT_TO_DISPLAY);
|
2021-04-07 18:56:16 +00:00
|
|
|
const filteredEmojis = emojis.filter(emoji => emoji.indexOf(keyword) !== -1).slice(0, MENTIONS_COUNT_TO_DISPLAY);
|
|
|
|
const mergedEmojis = [...customEmojis, ...filteredEmojis].slice(0, MENTIONS_COUNT_TO_DISPLAY);
|
2021-09-22 17:29:26 +00:00
|
|
|
this.setState({ mentions: mergedEmojis || [], mentionLoading: false });
|
2021-09-13 20:41:05 +00:00
|
|
|
}, 300);
|
2019-09-16 20:26:32 +00:00
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
getSlashCommands = debounce(async (keyword: any) => {
|
2019-09-16 20:26:32 +00:00
|
|
|
const db = database.active;
|
2021-02-26 16:25:51 +00:00
|
|
|
const commandsCollection = db.get('slash_commands');
|
2020-09-15 13:01:43 +00:00
|
|
|
const likeString = sanitizeLikeString(keyword);
|
2021-09-13 20:41:05 +00:00
|
|
|
const commands = await commandsCollection.query(Q.where('id', Q.like(`${likeString}%`))).fetch();
|
2021-09-22 17:29:26 +00:00
|
|
|
this.setState({ mentions: commands || [], mentionLoading: false });
|
2021-09-13 20:41:05 +00:00
|
|
|
}, 300);
|
2019-06-10 18:36:56 +00:00
|
|
|
|
2021-09-22 17:29:26 +00:00
|
|
|
getCannedResponses = debounce(async (text?: string) => {
|
2022-04-28 20:37:25 +00:00
|
|
|
const res = await Services.getListCannedResponse({ text });
|
2022-03-08 14:30:45 +00:00
|
|
|
this.setState({ mentions: res.success ? res.cannedResponses : [], mentionLoading: false });
|
2021-09-22 17:29:26 +00:00
|
|
|
}, 500);
|
|
|
|
|
2019-03-06 13:27:40 +00:00
|
|
|
focus = () => {
|
|
|
|
if (this.component && this.component.focus) {
|
|
|
|
this.component.focus();
|
|
|
|
}
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2019-03-06 13:27:40 +00:00
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
handleTyping = (isTyping: boolean) => {
|
2020-06-26 20:22:56 +00:00
|
|
|
const { typing, rid, sharing } = this.props;
|
|
|
|
if (sharing) {
|
|
|
|
return;
|
|
|
|
}
|
2019-02-25 16:22:48 +00:00
|
|
|
if (!isTyping) {
|
|
|
|
if (this.typingTimeout) {
|
|
|
|
clearTimeout(this.typingTimeout);
|
|
|
|
this.typingTimeout = false;
|
|
|
|
}
|
2019-04-08 12:35:28 +00:00
|
|
|
typing(rid, false);
|
2019-02-25 16:22:48 +00:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.typingTimeout) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.typingTimeout = setTimeout(() => {
|
2019-04-08 12:35:28 +00:00
|
|
|
typing(rid, true);
|
2019-02-25 16:22:48 +00:00
|
|
|
this.typingTimeout = false;
|
|
|
|
}, 1000);
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2019-02-25 16:22:48 +00:00
|
|
|
|
2022-03-15 02:16:53 +00:00
|
|
|
setCommandPreview = async (command: any, name: string, params: string) => {
|
2019-06-10 18:36:56 +00:00
|
|
|
const { rid } = this.props;
|
2021-09-13 20:41:05 +00:00
|
|
|
try {
|
2022-04-28 20:37:25 +00:00
|
|
|
const response = await Services.getCommandPreview(name, rid, params);
|
2022-03-15 02:16:53 +00:00
|
|
|
if (response.success) {
|
2022-03-15 14:41:23 +00:00
|
|
|
return this.setState({ commandPreview: response.preview?.items || [], showCommandPreview: true, command });
|
2020-07-08 16:42:49 +00:00
|
|
|
}
|
2019-06-10 18:36:56 +00:00
|
|
|
} catch (e) {
|
2019-08-30 12:43:23 +00:00
|
|
|
log(e);
|
2019-06-10 18:36:56 +00:00
|
|
|
}
|
2020-07-08 16:42:49 +00:00
|
|
|
this.setState({ commandPreview: [], showCommandPreview: true, command: {} });
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2019-06-10 18:36:56 +00:00
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
setInput = (text: any, selection?: any) => {
|
2020-05-20 12:47:41 +00:00
|
|
|
this.text = text;
|
2020-07-20 16:35:17 +00:00
|
|
|
if (selection) {
|
2022-08-08 21:02:08 +00:00
|
|
|
this.selection = selection;
|
2019-03-06 13:27:40 +00:00
|
|
|
}
|
2020-07-20 16:35:17 +00:00
|
|
|
this.component.setNativeProps({ text });
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2019-02-27 14:23:40 +00:00
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
setShowSend = (showSend: any) => {
|
2019-11-25 20:01:17 +00:00
|
|
|
const { showSend: prevShowSend } = this.state;
|
2020-06-26 20:22:56 +00:00
|
|
|
const { showSend: propShowSend } = this.props;
|
|
|
|
if (prevShowSend !== showSend && !propShowSend) {
|
2019-11-25 20:01:17 +00:00
|
|
|
this.setState({ showSend });
|
|
|
|
}
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2018-11-05 19:03:17 +00:00
|
|
|
|
|
|
|
clearInput = () => {
|
2022-08-25 19:53:19 +00:00
|
|
|
const { tshow } = this.state;
|
|
|
|
const { user, serverVersion } = this.props;
|
2018-11-05 19:03:17 +00:00
|
|
|
this.setInput('');
|
2019-02-27 14:23:40 +00:00
|
|
|
this.setShowSend(false);
|
2022-08-25 19:53:19 +00:00
|
|
|
if (compareServerVersion(serverVersion, 'lowerThan', '5.0.0') || (tshow && user.alsoSendThreadToChannel === 'default')) {
|
|
|
|
this.setState({ tshow: false });
|
|
|
|
}
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2018-11-05 19:03:17 +00:00
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
canUploadFile = (file: any) => {
|
2021-12-13 16:27:01 +00:00
|
|
|
const { permissionToUpload } = this.state;
|
2019-09-24 20:16:59 +00:00
|
|
|
const { FileUpload_MediaTypeWhiteList, FileUpload_MaxFileSize } = this.props;
|
2022-05-11 17:59:29 +00:00
|
|
|
const result = canUploadFile({
|
|
|
|
file,
|
|
|
|
allowList: FileUpload_MediaTypeWhiteList,
|
|
|
|
maxFileSize: FileUpload_MaxFileSize,
|
|
|
|
permissionToUploadFile: permissionToUpload
|
|
|
|
});
|
2019-09-24 20:16:59 +00:00
|
|
|
if (result.success) {
|
|
|
|
return true;
|
|
|
|
}
|
2022-04-14 20:30:41 +00:00
|
|
|
Alert.alert(I18n.t('Error_uploading'), result.error && I18n.isTranslated(result.error) ? I18n.t(result.error) : result.error);
|
2019-09-24 20:16:59 +00:00
|
|
|
return false;
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2019-09-24 20:16:59 +00:00
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
takePhoto = async () => {
|
2020-07-30 19:51:13 +00:00
|
|
|
logEvent(events.ROOM_BOX_ACTION_PHOTO);
|
2018-07-17 19:10:27 +00:00
|
|
|
try {
|
2022-01-20 18:24:27 +00:00
|
|
|
let image = (await ImagePicker.openCamera(this.imagePickerConfig)) as Image;
|
|
|
|
image = forceJpgExtension(image);
|
2019-09-24 20:16:59 +00:00
|
|
|
if (this.canUploadFile(image)) {
|
2020-06-26 20:22:56 +00:00
|
|
|
this.openShareView([image]);
|
2019-09-24 20:16:59 +00:00
|
|
|
}
|
2018-07-17 19:10:27 +00:00
|
|
|
} catch (e) {
|
2020-07-30 19:51:13 +00:00
|
|
|
logEvent(events.ROOM_BOX_ACTION_PHOTO_F);
|
2018-07-17 19:10:27 +00:00
|
|
|
}
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2018-07-17 19:10:27 +00:00
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
takeVideo = async () => {
|
2020-07-30 19:51:13 +00:00
|
|
|
logEvent(events.ROOM_BOX_ACTION_VIDEO);
|
2019-07-18 17:07:37 +00:00
|
|
|
try {
|
|
|
|
const video = await ImagePicker.openCamera(this.videoPickerConfig);
|
2019-09-24 20:16:59 +00:00
|
|
|
if (this.canUploadFile(video)) {
|
2020-06-26 20:22:56 +00:00
|
|
|
this.openShareView([video]);
|
2019-09-24 20:16:59 +00:00
|
|
|
}
|
2019-07-18 17:07:37 +00:00
|
|
|
} catch (e) {
|
2020-07-30 19:51:13 +00:00
|
|
|
logEvent(events.ROOM_BOX_ACTION_VIDEO_F);
|
2019-07-18 17:07:37 +00:00
|
|
|
}
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2019-07-18 17:07:37 +00:00
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
chooseFromLibrary = async () => {
|
2020-07-30 19:51:13 +00:00
|
|
|
logEvent(events.ROOM_BOX_ACTION_LIBRARY);
|
2018-07-17 19:10:27 +00:00
|
|
|
try {
|
2022-03-31 22:39:24 +00:00
|
|
|
// The type can be video or photo, however the lib understands that it is just one of them.
|
|
|
|
let attachments = (await ImagePicker.openPicker(this.libraryPickerConfig)) as unknown as ImageOrVideo[];
|
2022-01-20 18:24:27 +00:00
|
|
|
attachments = attachments.map(att => forceJpgExtension(att));
|
2020-06-26 20:22:56 +00:00
|
|
|
this.openShareView(attachments);
|
2018-07-17 19:10:27 +00:00
|
|
|
} catch (e) {
|
2020-07-30 19:51:13 +00:00
|
|
|
logEvent(events.ROOM_BOX_ACTION_LIBRARY_F);
|
2018-07-17 19:10:27 +00:00
|
|
|
}
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2018-07-17 19:10:27 +00:00
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
chooseFile = async () => {
|
2020-07-30 19:51:13 +00:00
|
|
|
logEvent(events.ROOM_BOX_ACTION_FILE);
|
2019-07-18 17:25:18 +00:00
|
|
|
try {
|
2022-05-20 03:01:34 +00:00
|
|
|
const res = await DocumentPicker.pickSingle({
|
2019-07-18 17:25:18 +00:00
|
|
|
type: [DocumentPicker.types.allFiles]
|
|
|
|
});
|
2019-09-24 20:16:59 +00:00
|
|
|
const file = {
|
2019-07-18 17:25:18 +00:00
|
|
|
filename: res.name,
|
|
|
|
size: res.size,
|
|
|
|
mime: res.type,
|
|
|
|
path: res.uri
|
2019-09-24 20:16:59 +00:00
|
|
|
};
|
|
|
|
if (this.canUploadFile(file)) {
|
2020-06-26 20:22:56 +00:00
|
|
|
this.openShareView([file]);
|
2019-09-24 20:16:59 +00:00
|
|
|
}
|
2021-09-13 20:41:05 +00:00
|
|
|
} catch (e: any) {
|
2019-08-30 12:43:23 +00:00
|
|
|
if (!DocumentPicker.isCancel(e)) {
|
2020-07-30 19:51:13 +00:00
|
|
|
logEvent(events.ROOM_BOX_ACTION_FILE_F);
|
2019-08-30 12:43:23 +00:00
|
|
|
log(e);
|
2019-07-18 17:25:18 +00:00
|
|
|
}
|
|
|
|
}
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2019-07-18 17:25:18 +00:00
|
|
|
|
2021-09-22 17:29:26 +00:00
|
|
|
onPressNoMatchCanned = () => {
|
|
|
|
const { isMasterDetail, rid } = this.props;
|
|
|
|
const params = { rid };
|
|
|
|
if (isMasterDetail) {
|
|
|
|
Navigation.navigate('ModalStackNavigator', { screen: 'CannedResponsesListView', params });
|
|
|
|
} else {
|
|
|
|
Navigation.navigate('CannedResponsesListView', params);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
openShareView = (attachments: any) => {
|
2020-07-03 14:07:29 +00:00
|
|
|
const { message, replyCancel, replyWithMention } = this.props;
|
|
|
|
// Start a thread with an attachment
|
2022-03-31 22:39:24 +00:00
|
|
|
let value: TThreadModel | IMessage = this.thread;
|
2020-07-03 14:07:29 +00:00
|
|
|
if (replyWithMention) {
|
2022-03-31 22:39:24 +00:00
|
|
|
value = message;
|
2020-07-03 14:07:29 +00:00
|
|
|
replyCancel();
|
|
|
|
}
|
2022-04-14 17:40:37 +00:00
|
|
|
Navigation.navigate('ShareView', { room: this.room, thread: value, attachments });
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2020-06-26 20:22:56 +00:00
|
|
|
|
2020-03-30 19:50:27 +00:00
|
|
|
createDiscussion = () => {
|
2020-07-30 19:51:13 +00:00
|
|
|
logEvent(events.ROOM_BOX_ACTION_DISCUSSION);
|
2020-06-15 14:00:46 +00:00
|
|
|
const { isMasterDetail } = this.props;
|
|
|
|
const params = { channel: this.room, showCloseModal: true };
|
|
|
|
if (isMasterDetail) {
|
|
|
|
Navigation.navigate('ModalStackNavigator', { screen: 'CreateDiscussionView', params });
|
|
|
|
} else {
|
|
|
|
Navigation.navigate('NewMessageStackNavigator', { screen: 'CreateDiscussionView', params });
|
|
|
|
}
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2020-03-30 19:50:27 +00:00
|
|
|
|
|
|
|
showMessageBoxActions = () => {
|
2020-07-30 19:51:13 +00:00
|
|
|
logEvent(events.ROOM_SHOW_BOX_ACTIONS);
|
2021-12-13 16:27:01 +00:00
|
|
|
const { permissionToUpload } = this.state;
|
2022-06-09 14:42:12 +00:00
|
|
|
const { showActionSheet, goToCannedResponses } = this.props;
|
2021-12-13 16:27:01 +00:00
|
|
|
|
2022-08-08 18:38:01 +00:00
|
|
|
const options: TActionSheetOptionsItem[] = [];
|
2022-06-09 14:42:12 +00:00
|
|
|
if (goToCannedResponses) {
|
|
|
|
options.push({
|
|
|
|
title: I18n.t('Canned_Responses'),
|
|
|
|
icon: 'canned-response',
|
|
|
|
onPress: () => goToCannedResponses()
|
|
|
|
});
|
|
|
|
}
|
2021-12-13 16:27:01 +00:00
|
|
|
if (permissionToUpload) {
|
|
|
|
options.push(
|
|
|
|
{
|
|
|
|
title: I18n.t('Take_a_photo'),
|
|
|
|
icon: 'camera-photo',
|
|
|
|
onPress: this.takePhoto
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: I18n.t('Take_a_video'),
|
|
|
|
icon: 'camera',
|
|
|
|
onPress: this.takeVideo
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: I18n.t('Choose_from_library'),
|
|
|
|
icon: 'image',
|
|
|
|
onPress: this.chooseFromLibrary
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: I18n.t('Choose_file'),
|
|
|
|
icon: 'attach',
|
|
|
|
onPress: this.chooseFile
|
|
|
|
}
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
options.push({
|
|
|
|
title: I18n.t('Create_Discussion'),
|
|
|
|
icon: 'discussions',
|
|
|
|
onPress: this.createDiscussion
|
|
|
|
});
|
2022-08-08 18:38:01 +00:00
|
|
|
|
|
|
|
this.closeEmojiAndAction(showActionSheet, { options });
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2019-05-27 16:19:39 +00:00
|
|
|
|
2018-09-25 19:28:42 +00:00
|
|
|
editCancel = () => {
|
|
|
|
const { editCancel } = this.props;
|
|
|
|
editCancel();
|
2018-11-05 19:03:17 +00:00
|
|
|
this.clearInput();
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2018-07-17 19:10:27 +00:00
|
|
|
|
2020-07-30 19:51:13 +00:00
|
|
|
openEmoji = () => {
|
|
|
|
logEvent(events.ROOM_OPEN_EMOJI);
|
2022-10-21 18:27:55 +00:00
|
|
|
this.setState({ showEmojiKeyboard: true, showEmojiSearchbar: false });
|
|
|
|
this.stopTrackingMention();
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2020-02-17 12:14:56 +00:00
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
recordingCallback = (recording: any) => {
|
2018-03-07 00:17:20 +00:00
|
|
|
this.setState({ recording });
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2018-03-07 00:17:20 +00:00
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
finishAudioMessage = async (fileInfo: any) => {
|
|
|
|
const { rid, tmid, baseUrl: server, user } = this.props;
|
2018-09-25 19:28:42 +00:00
|
|
|
|
2018-05-29 17:10:40 +00:00
|
|
|
if (fileInfo) {
|
|
|
|
try {
|
2019-09-24 20:16:59 +00:00
|
|
|
if (this.canUploadFile(fileInfo)) {
|
2022-04-28 20:37:25 +00:00
|
|
|
await sendFileMessage(rid, fileInfo, tmid, server, user);
|
2018-05-29 17:10:40 +00:00
|
|
|
}
|
2019-09-24 20:16:59 +00:00
|
|
|
} catch (e) {
|
2019-08-23 13:18:47 +00:00
|
|
|
log(e);
|
2018-05-29 17:10:40 +00:00
|
|
|
}
|
|
|
|
}
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2018-03-07 00:17:20 +00:00
|
|
|
|
2020-02-17 12:14:56 +00:00
|
|
|
closeEmoji = () => {
|
2022-10-21 18:27:55 +00:00
|
|
|
this.setState({ showEmojiKeyboard: false, showEmojiSearchbar: false });
|
|
|
|
};
|
|
|
|
|
|
|
|
closeEmojiKeyboardAndFocus = () => {
|
|
|
|
logEvent(events.ROOM_CLOSE_EMOJI);
|
|
|
|
this.closeEmoji();
|
|
|
|
this.focus();
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2020-02-17 12:14:56 +00:00
|
|
|
|
2022-08-08 18:38:01 +00:00
|
|
|
closeEmojiAndAction = (action?: Function, params?: any) => {
|
|
|
|
const { showEmojiKeyboard } = this.state;
|
|
|
|
|
|
|
|
this.closeEmoji();
|
|
|
|
setTimeout(() => action && action(params), showEmojiKeyboard && isIOS ? TIMEOUT_CLOSE_EMOJI : null);
|
|
|
|
};
|
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
submit = async () => {
|
2020-10-30 17:35:07 +00:00
|
|
|
const { tshow } = this.state;
|
2021-09-13 20:41:05 +00:00
|
|
|
const { onSubmit, rid: roomId, tmid, showSend, sharing } = this.props;
|
2018-11-05 19:03:17 +00:00
|
|
|
const message = this.text;
|
2018-09-25 19:28:42 +00:00
|
|
|
|
2020-06-26 20:22:56 +00:00
|
|
|
// if sharing, only execute onSubmit prop
|
|
|
|
if (sharing) {
|
|
|
|
onSubmit(message);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2019-05-27 16:19:39 +00:00
|
|
|
this.clearInput();
|
2019-11-25 20:01:17 +00:00
|
|
|
this.debouncedOnChangeText.stop();
|
2022-10-21 18:27:55 +00:00
|
|
|
this.closeEmojiKeyboardAndFocus();
|
2017-12-20 20:14:07 +00:00
|
|
|
this.stopTrackingMention();
|
2019-02-25 16:22:48 +00:00
|
|
|
this.handleTyping(false);
|
2020-06-26 20:22:56 +00:00
|
|
|
if (message.trim() === '' && !showSend) {
|
2018-03-02 21:31:44 +00:00
|
|
|
return;
|
|
|
|
}
|
2019-04-17 17:01:03 +00:00
|
|
|
|
2018-07-20 19:54:46 +00:00
|
|
|
const {
|
2021-09-13 20:41:05 +00:00
|
|
|
editing,
|
|
|
|
replying,
|
|
|
|
message: { id: messageTmid },
|
|
|
|
replyCancel
|
2018-07-20 19:54:46 +00:00
|
|
|
} = this.props;
|
|
|
|
|
2019-06-10 18:36:56 +00:00
|
|
|
// Slash command
|
|
|
|
if (message[0] === MENTIONS_TRACKING_TYPE_COMMANDS) {
|
2019-09-16 20:26:32 +00:00
|
|
|
const db = database.active;
|
2021-02-26 16:25:51 +00:00
|
|
|
const commandsCollection = db.get('slash_commands');
|
2019-06-10 18:36:56 +00:00
|
|
|
const command = message.replace(/ .*/, '').slice(1);
|
2020-09-15 13:01:43 +00:00
|
|
|
const likeString = sanitizeLikeString(command);
|
2021-09-13 20:41:05 +00:00
|
|
|
const slashCommand = await commandsCollection.query(Q.where('id', Q.like(`${likeString}%`))).fetch();
|
2019-06-10 18:36:56 +00:00
|
|
|
if (slashCommand.length > 0) {
|
2020-08-05 13:15:56 +00:00
|
|
|
logEvent(events.COMMAND_RUN);
|
2019-06-10 18:36:56 +00:00
|
|
|
try {
|
2019-09-25 22:14:20 +00:00
|
|
|
const messageWithoutCommand = message.replace(/([^\s]+)/, '').trim();
|
2020-02-11 14:01:35 +00:00
|
|
|
const [{ appId }] = slashCommand;
|
|
|
|
const triggerId = generateTriggerId(appId);
|
2022-04-28 20:37:25 +00:00
|
|
|
await Services.runSlashCommand(command, roomId, messageWithoutCommand, triggerId, tmid || messageTmid);
|
2020-02-11 15:56:06 +00:00
|
|
|
replyCancel();
|
2019-06-10 18:36:56 +00:00
|
|
|
} catch (e) {
|
2020-08-05 13:15:56 +00:00
|
|
|
logEvent(events.COMMAND_RUN_F);
|
2019-08-30 12:43:23 +00:00
|
|
|
log(e);
|
2019-06-10 18:36:56 +00:00
|
|
|
}
|
|
|
|
this.clearInput();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
2019-04-17 17:01:03 +00:00
|
|
|
// Edit
|
2018-03-02 21:31:44 +00:00
|
|
|
if (editing) {
|
2019-09-16 20:26:32 +00:00
|
|
|
const { message: editingMessage, editRequest } = this.props;
|
2021-09-13 20:41:05 +00:00
|
|
|
const {
|
|
|
|
id,
|
|
|
|
// @ts-ignore
|
|
|
|
subscription: { id: rid }
|
|
|
|
} = editingMessage;
|
2019-09-16 20:26:32 +00:00
|
|
|
editRequest({ id, msg: message, rid });
|
2019-04-17 17:01:03 +00:00
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
// Reply
|
2018-07-20 19:54:46 +00:00
|
|
|
} else if (replying) {
|
2021-09-13 20:41:05 +00:00
|
|
|
const { message: replyingMessage, threadsEnabled, replyWithMention } = this.props;
|
2019-04-17 17:01:03 +00:00
|
|
|
|
|
|
|
// Thread
|
2019-09-16 20:26:32 +00:00
|
|
|
if (threadsEnabled && replyWithMention) {
|
2020-10-30 17:35:07 +00:00
|
|
|
onSubmit(message, replyingMessage.id, tshow);
|
2019-04-17 17:01:03 +00:00
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
// Legacy reply or quote (quote is a reply without mention)
|
2019-04-17 17:01:03 +00:00
|
|
|
} else {
|
|
|
|
const { user, roomType } = this.props;
|
2019-09-16 20:26:32 +00:00
|
|
|
const permalink = await this.getPermalink(replyingMessage);
|
2021-09-13 20:41:05 +00:00
|
|
|
let msg = `[ ](${permalink}) `;
|
2018-07-20 19:54:46 +00:00
|
|
|
|
2019-04-17 17:01:03 +00:00
|
|
|
// if original message wasn't sent by current user and neither from a direct room
|
2022-03-03 20:25:03 +00:00
|
|
|
if (user.username !== replyingMessage?.u?.username && roomType !== 'd' && replyWithMention) {
|
|
|
|
msg += `@${replyingMessage?.u?.username} `;
|
2019-04-17 17:01:03 +00:00
|
|
|
}
|
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
msg = `${msg} ${message}`;
|
2019-04-17 17:01:03 +00:00
|
|
|
onSubmit(msg);
|
|
|
|
}
|
2019-09-16 20:26:32 +00:00
|
|
|
replyCancel();
|
2019-04-17 17:01:03 +00:00
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
// Normal message
|
2018-03-02 21:31:44 +00:00
|
|
|
} else {
|
2021-09-13 20:41:05 +00:00
|
|
|
// @ts-ignore
|
2022-08-25 19:53:19 +00:00
|
|
|
onSubmit(message, undefined, tmid ? tshow : false);
|
2018-03-02 21:31:44 +00:00
|
|
|
}
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2017-11-24 20:44:52 +00:00
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
updateMentions = (keyword: any, type: string) => {
|
2018-09-25 19:28:42 +00:00
|
|
|
if (type === MENTIONS_TRACKING_TYPE_USERS) {
|
|
|
|
this.getUsers(keyword);
|
|
|
|
} else if (type === MENTIONS_TRACKING_TYPE_EMOJIS) {
|
|
|
|
this.getEmojis(keyword);
|
2019-06-10 18:36:56 +00:00
|
|
|
} else if (type === MENTIONS_TRACKING_TYPE_COMMANDS) {
|
|
|
|
this.getSlashCommands(keyword);
|
2021-09-22 17:29:26 +00:00
|
|
|
} else if (type === MENTIONS_TRACKING_TYPE_CANNED) {
|
|
|
|
this.getCannedResponses(keyword);
|
2018-09-25 19:28:42 +00:00
|
|
|
} else {
|
|
|
|
this.getRooms(keyword);
|
2017-12-20 20:14:07 +00:00
|
|
|
}
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2017-12-20 20:14:07 +00:00
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
identifyMentionKeyword = (keyword: any, type: string) => {
|
2020-02-17 12:14:56 +00:00
|
|
|
this.setState({
|
|
|
|
showEmojiKeyboard: false,
|
2021-09-22 17:29:26 +00:00
|
|
|
trackingType: type,
|
|
|
|
mentionLoading: true
|
2020-02-17 12:14:56 +00:00
|
|
|
});
|
2018-09-25 19:28:42 +00:00
|
|
|
this.updateMentions(keyword, type);
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2018-01-30 19:48:26 +00:00
|
|
|
|
2019-02-27 14:23:40 +00:00
|
|
|
stopTrackingMention = () => {
|
2019-09-25 21:32:13 +00:00
|
|
|
const { trackingType, showCommandPreview } = this.state;
|
|
|
|
if (!trackingType && !showCommandPreview) {
|
2018-11-05 19:03:17 +00:00
|
|
|
return;
|
|
|
|
}
|
2017-12-20 20:14:07 +00:00
|
|
|
this.setState({
|
2018-01-30 19:48:26 +00:00
|
|
|
mentions: [],
|
2019-06-10 18:36:56 +00:00
|
|
|
trackingType: '',
|
2019-09-25 21:32:13 +00:00
|
|
|
commandPreview: [],
|
|
|
|
showCommandPreview: false
|
2017-12-20 20:14:07 +00:00
|
|
|
});
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2017-12-20 20:14:07 +00:00
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
handleCommands = ({ event }: { event: any }) => {
|
2019-11-25 20:01:17 +00:00
|
|
|
if (handleCommandTyping(event)) {
|
|
|
|
if (this.focused) {
|
|
|
|
Keyboard.dismiss();
|
|
|
|
} else {
|
|
|
|
this.component.focus();
|
|
|
|
}
|
|
|
|
this.focused = !this.focused;
|
|
|
|
} else if (handleCommandSubmit(event)) {
|
|
|
|
this.submit();
|
|
|
|
} else if (handleCommandShowUpload(event)) {
|
2020-03-30 19:50:27 +00:00
|
|
|
this.showMessageBoxActions();
|
2019-11-25 20:01:17 +00:00
|
|
|
}
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2019-11-25 20:01:17 +00:00
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
onPressSendToChannel = () => this.setState(({ tshow }) => ({ tshow: !tshow }));
|
2020-10-30 17:35:07 +00:00
|
|
|
|
|
|
|
renderSendToChannel = () => {
|
|
|
|
const { tshow } = this.state;
|
2020-11-04 13:39:53 +00:00
|
|
|
const { theme, tmid, replyWithMention } = this.props;
|
2020-10-30 17:35:07 +00:00
|
|
|
|
2020-11-04 13:39:53 +00:00
|
|
|
if (!tmid && !replyWithMention) {
|
2020-10-30 17:35:07 +00:00
|
|
|
return null;
|
|
|
|
}
|
|
|
|
return (
|
|
|
|
<TouchableWithoutFeedback
|
|
|
|
style={[styles.sendToChannelButton, { backgroundColor: themes[theme].messageboxBackground }]}
|
|
|
|
onPress={this.onPressSendToChannel}
|
2022-08-08 21:02:08 +00:00
|
|
|
testID='messagebox-send-to-channel'
|
|
|
|
>
|
2022-08-25 19:53:19 +00:00
|
|
|
<CustomIcon
|
|
|
|
testID={tshow ? 'send-to-channel-checked' : 'send-to-channel-unchecked'}
|
|
|
|
name={tshow ? 'checkbox-checked' : 'checkbox-unchecked'}
|
|
|
|
size={24}
|
|
|
|
color={themes[theme].auxiliaryText}
|
|
|
|
/>
|
2021-09-13 20:41:05 +00:00
|
|
|
<Text style={[styles.sendToChannelText, { color: themes[theme].auxiliaryText }]}>
|
|
|
|
{I18n.t('Messagebox_Send_to_channel')}
|
|
|
|
</Text>
|
2020-10-30 17:35:07 +00:00
|
|
|
</TouchableWithoutFeedback>
|
|
|
|
);
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2020-10-30 17:35:07 +00:00
|
|
|
|
2022-10-21 18:27:55 +00:00
|
|
|
renderEmojiSearchbar = () => {
|
|
|
|
const { showEmojiSearchbar } = this.state;
|
|
|
|
|
|
|
|
return showEmojiSearchbar ? (
|
|
|
|
<EmojiSearchbar
|
|
|
|
openEmoji={this.openEmoji}
|
|
|
|
closeEmoji={this.closeEmoji}
|
|
|
|
onEmojiSelected={(emoji: IEmoji) => {
|
|
|
|
this.onKeyboardItemSelected('EmojiKeyboard', { eventType: EventTypes.EMOJI_PRESSED, emoji });
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
) : null;
|
|
|
|
};
|
|
|
|
|
|
|
|
handleBackPress = () => {
|
|
|
|
const { showEmojiSearchbar } = this.state;
|
|
|
|
if (showEmojiSearchbar) {
|
|
|
|
this.setState({ showEmojiSearchbar: false });
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
};
|
|
|
|
|
2019-10-30 14:14:41 +00:00
|
|
|
renderContent = () => {
|
2021-12-13 16:27:01 +00:00
|
|
|
const {
|
|
|
|
recording,
|
|
|
|
showEmojiKeyboard,
|
2022-10-21 18:27:55 +00:00
|
|
|
showEmojiSearchbar,
|
2021-12-13 16:27:01 +00:00
|
|
|
showSend,
|
|
|
|
mentions,
|
|
|
|
trackingType,
|
|
|
|
commandPreview,
|
|
|
|
showCommandPreview,
|
|
|
|
mentionLoading,
|
|
|
|
permissionToUpload
|
|
|
|
} = this.state;
|
2018-09-11 16:32:52 +00:00
|
|
|
const {
|
2021-09-13 20:41:05 +00:00
|
|
|
editing,
|
|
|
|
message,
|
|
|
|
replying,
|
|
|
|
replyCancel,
|
|
|
|
user,
|
|
|
|
getCustomEmoji,
|
|
|
|
theme,
|
|
|
|
Message_AudioRecorderEnabled,
|
|
|
|
children,
|
|
|
|
isActionsEnabled,
|
|
|
|
tmid
|
2018-09-11 16:32:52 +00:00
|
|
|
} = this.props;
|
2018-09-25 19:28:42 +00:00
|
|
|
|
2022-03-22 18:01:54 +00:00
|
|
|
const isAndroidTablet: Partial<IThemedTextInput> =
|
2021-09-13 20:41:05 +00:00
|
|
|
isTablet && isAndroid
|
|
|
|
? {
|
|
|
|
multiline: false,
|
|
|
|
onSubmitEditing: this.submit,
|
|
|
|
returnKeyType: 'send'
|
|
|
|
}
|
|
|
|
: {};
|
2019-11-25 20:01:17 +00:00
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
const recordAudio =
|
|
|
|
showSend || !Message_AudioRecorderEnabled ? null : (
|
2021-12-13 16:27:01 +00:00
|
|
|
<RecordAudio
|
|
|
|
theme={theme}
|
|
|
|
recordingCallback={this.recordingCallback}
|
|
|
|
onFinish={this.finishAudioMessage}
|
|
|
|
permissionToUpload={permissionToUpload}
|
2022-08-08 18:38:01 +00:00
|
|
|
onStart={this.closeEmoji}
|
2021-12-13 16:27:01 +00:00
|
|
|
/>
|
2021-09-13 20:41:05 +00:00
|
|
|
);
|
2020-07-06 19:23:46 +00:00
|
|
|
|
|
|
|
const commandsPreviewAndMentions = !recording ? (
|
2019-09-16 20:26:32 +00:00
|
|
|
<>
|
2019-10-30 14:14:41 +00:00
|
|
|
<CommandsPreview commandPreview={commandPreview} showCommandPreview={showCommandPreview} />
|
2022-03-31 22:39:24 +00:00
|
|
|
<Mentions mentions={mentions} trackingType={trackingType} loading={mentionLoading} />
|
2020-07-06 19:23:46 +00:00
|
|
|
</>
|
|
|
|
) : null;
|
|
|
|
|
|
|
|
const replyPreview = !recording ? (
|
|
|
|
<ReplyPreview
|
|
|
|
message={message}
|
|
|
|
close={replyCancel}
|
|
|
|
username={user.username}
|
|
|
|
replying={replying}
|
|
|
|
getCustomEmoji={getCustomEmoji}
|
|
|
|
/>
|
|
|
|
) : null;
|
|
|
|
|
|
|
|
const textInputAndButtons = !recording ? (
|
|
|
|
<>
|
|
|
|
<LeftButtons
|
2022-10-21 18:27:55 +00:00
|
|
|
showEmojiKeyboard={showEmojiKeyboard || showEmojiSearchbar}
|
2020-07-06 19:23:46 +00:00
|
|
|
editing={editing}
|
|
|
|
editCancel={this.editCancel}
|
|
|
|
openEmoji={this.openEmoji}
|
2022-10-21 18:27:55 +00:00
|
|
|
closeEmoji={this.closeEmojiKeyboardAndFocus}
|
2020-07-06 19:23:46 +00:00
|
|
|
/>
|
|
|
|
<TextInput
|
2021-09-13 20:41:05 +00:00
|
|
|
ref={component => (this.component = component)}
|
2021-01-20 17:47:50 +00:00
|
|
|
style={[styles.textBoxInput, { color: themes[theme].bodyText }]}
|
2020-07-06 19:23:46 +00:00
|
|
|
returnKeyType='default'
|
|
|
|
keyboardType='twitter'
|
|
|
|
blurOnSubmit={false}
|
|
|
|
placeholder={I18n.t('New_Message')}
|
2021-03-05 16:21:18 +00:00
|
|
|
placeholderTextColor={themes[theme].auxiliaryText}
|
2020-07-06 19:23:46 +00:00
|
|
|
onChangeText={this.onChangeText}
|
2020-07-20 16:35:17 +00:00
|
|
|
onSelectionChange={this.onSelectionChange}
|
2020-07-06 19:23:46 +00:00
|
|
|
underlineColorAndroid='transparent'
|
|
|
|
defaultValue=''
|
|
|
|
multiline
|
2021-09-13 20:41:05 +00:00
|
|
|
testID={`messagebox-input${tmid ? '-thread' : ''}`}
|
2020-07-06 19:23:46 +00:00
|
|
|
{...isAndroidTablet}
|
|
|
|
/>
|
|
|
|
<RightButtons
|
|
|
|
showSend={showSend}
|
|
|
|
submit={this.submit}
|
|
|
|
showMessageBoxActions={this.showMessageBoxActions}
|
|
|
|
isActionsEnabled={isActionsEnabled}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
) : null;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
{commandsPreviewAndMentions}
|
2020-07-14 16:43:15 +00:00
|
|
|
<View style={[styles.composer, { borderTopColor: themes[theme].borderColor }]}>
|
2020-07-06 19:23:46 +00:00
|
|
|
{replyPreview}
|
2018-09-11 16:32:52 +00:00
|
|
|
<View
|
2019-12-04 16:39:53 +00:00
|
|
|
style={[
|
|
|
|
styles.textArea,
|
2020-07-06 19:23:46 +00:00
|
|
|
{ backgroundColor: themes[theme].messageboxBackground },
|
|
|
|
!recording && editing && { backgroundColor: themes[theme].chatComponentBackground }
|
2019-12-04 16:39:53 +00:00
|
|
|
]}
|
2022-08-08 21:02:08 +00:00
|
|
|
testID='messagebox'
|
|
|
|
>
|
2020-07-06 19:23:46 +00:00
|
|
|
{textInputAndButtons}
|
|
|
|
{recordAudio}
|
2018-09-11 16:32:52 +00:00
|
|
|
</View>
|
2020-10-30 17:35:07 +00:00
|
|
|
{this.renderSendToChannel()}
|
2022-10-21 18:27:55 +00:00
|
|
|
{this.renderEmojiSearchbar()}
|
2018-04-10 13:03:54 +00:00
|
|
|
</View>
|
2020-06-26 20:22:56 +00:00
|
|
|
{children}
|
2019-09-16 20:26:32 +00:00
|
|
|
</>
|
2018-02-08 14:08:50 +00:00
|
|
|
);
|
2021-09-13 20:41:05 +00:00
|
|
|
};
|
2018-02-08 14:08:50 +00:00
|
|
|
|
|
|
|
render() {
|
2021-09-13 20:41:05 +00:00
|
|
|
console.count(`${this.constructor.name}.render calls`);
|
2020-06-26 20:22:56 +00:00
|
|
|
const { showEmojiKeyboard } = this.state;
|
2022-11-24 17:48:37 +00:00
|
|
|
const { user, baseUrl, theme, iOSScrollBehavior, tmid, rid } = this.props;
|
2018-02-08 14:08:50 +00:00
|
|
|
return (
|
2019-10-30 14:14:41 +00:00
|
|
|
<MessageboxContext.Provider
|
|
|
|
value={{
|
|
|
|
user,
|
|
|
|
baseUrl,
|
|
|
|
onPressMention: this.onPressMention,
|
2021-09-22 17:29:26 +00:00
|
|
|
onPressCommandPreview: this.onPressCommandPreview,
|
|
|
|
onPressNoMatchCanned: this.onPressNoMatchCanned
|
2022-08-08 21:02:08 +00:00
|
|
|
}}
|
|
|
|
>
|
2020-02-17 12:14:56 +00:00
|
|
|
<KeyboardAccessoryView
|
2021-09-13 20:41:05 +00:00
|
|
|
ref={(ref: any) => (this.tracking = ref)}
|
2020-02-17 12:14:56 +00:00
|
|
|
renderContent={this.renderContent}
|
|
|
|
kbInputRef={this.component}
|
|
|
|
kbComponent={showEmojiKeyboard ? 'EmojiKeyboard' : null}
|
2022-08-08 18:38:01 +00:00
|
|
|
kbInitialProps={{ theme }}
|
2020-02-17 12:14:56 +00:00
|
|
|
onKeyboardResigned={this.onKeyboardResigned}
|
2022-10-21 18:27:55 +00:00
|
|
|
onItemSelected={this.onKeyboardItemSelected}
|
2020-02-17 12:14:56 +00:00
|
|
|
addBottomView
|
2019-12-04 16:39:53 +00:00
|
|
|
bottomViewColor={themes[theme].messageboxBackground}
|
2020-06-26 20:22:56 +00:00
|
|
|
iOSScrollBehavior={iOSScrollBehavior}
|
2022-11-24 17:48:37 +00:00
|
|
|
scrollViewNativeID={tmid || rid}
|
2018-07-17 19:10:27 +00:00
|
|
|
/>
|
2019-10-30 14:14:41 +00:00
|
|
|
</MessageboxContext.Provider>
|
2017-08-09 13:12:00 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
2019-04-08 12:35:28 +00:00
|
|
|
|
2022-06-09 14:42:12 +00:00
|
|
|
const mapStateToProps = (state: IApplicationState) => ({
|
2020-06-15 14:00:46 +00:00
|
|
|
isMasterDetail: state.app.isMasterDetail,
|
2020-02-11 14:09:14 +00:00
|
|
|
baseUrl: state.server.server,
|
2019-04-17 17:01:03 +00:00
|
|
|
threadsEnabled: state.settings.Threads_enabled,
|
2020-02-11 14:09:14 +00:00
|
|
|
user: getUserSelector(state),
|
2019-09-24 20:16:59 +00:00
|
|
|
FileUpload_MediaTypeWhiteList: state.settings.FileUpload_MediaTypeWhiteList,
|
2020-02-20 21:02:09 +00:00
|
|
|
FileUpload_MaxFileSize: state.settings.FileUpload_MaxFileSize,
|
2021-12-13 16:27:01 +00:00
|
|
|
Message_AudioRecorderEnabled: state.settings.Message_AudioRecorderEnabled,
|
2022-08-25 19:53:19 +00:00
|
|
|
uploadFilePermission: state.permissions['mobile-upload-file'],
|
|
|
|
serverVersion: state.server.version
|
2019-04-08 12:35:28 +00:00
|
|
|
});
|
|
|
|
|
2021-09-13 20:41:05 +00:00
|
|
|
const dispatchToProps = {
|
|
|
|
typing: (rid: any, status: any) => userTypingAction(rid, status)
|
|
|
|
};
|
2022-02-21 16:06:57 +00:00
|
|
|
|
2022-05-02 22:58:23 +00:00
|
|
|
export type MessageBoxType = MessageBox;
|
|
|
|
|
|
|
|
export default connect(mapStateToProps, dispatchToProps, null, { forwardRef: true })(withActionSheet(MessageBox));
|