verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[IMPROVE] - migrating the MessageBox container (in progress)

This commit is contained in:
AlexAlexandre 2021-07-23 15:54:46 -03:00
parent e9229e5097
commit 9e0154c436
1 changed files with 116 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
app/containers/MessageBox/index.js → app/containers/MessageBox/index.tsx
View File

@ -1,8 +1,5 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import { View, Alert, Keyboard, Text } from 'react-native';
import {
View, Alert, Keyboard, NativeModules, Text
} from 'react-native';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { KeyboardAccessoryView } from 'react-native-ui-lib/keyboard'; import { KeyboardAccessoryView } from 'react-native-ui-lib/keyboard';
import ImagePicker from 'react-native-image-crop-picker'; import ImagePicker from 'react-native-image-crop-picker';
@ -24,7 +21,9 @@ import I18n from '../../i18n';
import ReplyPreview from './ReplyPreview'; import ReplyPreview from './ReplyPreview';
import debounce from '../../utils/debounce'; import debounce from '../../utils/debounce';
import { themes } from '../../constants/colors'; import { themes } from '../../constants/colors';
// @ts-ignore
import LeftButtons from './LeftButtons'; import LeftButtons from './LeftButtons';
// @ts-ignore
import RightButtons from './RightButtons'; import RightButtons from './RightButtons';
import { isAndroid, isTablet } from '../../utils/deviceInfo'; import { isAndroid, isTablet } from '../../utils/deviceInfo';
import { canUploadFile } from '../../utils/media'; import { canUploadFile } from '../../utils/media';
@ -72,54 +71,79 @@ const videoPickerConfig = {
mediaType: 'video' mediaType: 'video'
}; };
class MessageBox extends Component { interface IMessageBoxProps {
static propTypes = { rid: string;
rid: PropTypes.string.isRequired, baseUrl: string;
baseUrl: PropTypes.string.isRequired,
message: PropTypes.object,
replying: PropTypes.bool,
editing: PropTypes.bool,
threadsEnabled: PropTypes.bool,
isFocused: PropTypes.func,
user: PropTypes.shape({
id: PropTypes.string,
username: PropTypes.string,
token: PropTypes.string
}),
roomType: PropTypes.string,
tmid: PropTypes.string,
replyWithMention: PropTypes.bool,
FileUpload_MediaTypeWhiteList: PropTypes.string,
FileUpload_MaxFileSize: PropTypes.number,
Message_AudioRecorderEnabled: PropTypes.bool,
getCustomEmoji: PropTypes.func,
editCancel: PropTypes.func.isRequired,
editRequest: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired,
typing: PropTypes.func,
theme: PropTypes.string,
replyCancel: PropTypes.func,
showSend: PropTypes.bool,
navigation: PropTypes.object,
children: PropTypes.node,
isMasterDetail: PropTypes.bool,
showActionSheet: PropTypes.func,
iOSScrollBehavior: PropTypes.number,
sharing: PropTypes.bool,
isActionsEnabled: PropTypes.bool
}
static defaultProps = {
message: { message: {
id: '' u: {
}, username: string;
sharing: false, };
iOSScrollBehavior: NativeModules.KeyboardTrackingViewTempManager?.KeyboardTrackingScrollBehaviorFixedOffset, id: any;
isActionsEnabled: true, };
getCustomEmoji: () => {} replying: boolean;
} editing: boolean;
threadsEnabled: boolean;
isFocused(): boolean;
user: {
id: string;
username: string;
token: string;
};
roomType: string;
tmid: string;
replyWithMention: boolean;
FileUpload_MediaTypeWhiteList: string;
FileUpload_MaxFileSize: number;
Message_AudioRecorderEnabled: boolean;
getCustomEmoji(): void;
editCancel(): void;
editRequest({}): void;
onSubmit({}, {}?, {}?): void;
typing({}, {}): void;
theme: string;
replyCancel(): void;
showSend: boolean;
navigation: any;
children: JSX.Element;
isMasterDetail: boolean;
showActionSheet({}): void;
iOSScrollBehavior: number;
sharing: boolean;
isActionsEnabled: boolean;
}
interface IMessageBoxState {
mentions: any[];
showEmojiKeyboard: boolean;
showSend: any;
recording: boolean;
trackingType: string;
commandPreview: [];
showCommandPreview: boolean;
command: {
appId?: any
};
tshow: boolean;
}
constructor(props) { class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
private text: string;
private selection: { start: number; end: number };
private focused: boolean;
private options: any;
private imagePickerConfig: any;
private libraryPickerConfig: any;
private videoPickerConfig: any;
private room: any;
private thread: any;
private unsubscribeFocus: any;
private trackingTimeout: any;
private tracking: any;
private unsubscribeBlur: any;
private component: any;
private typingTimeout: any;
constructor(props: IMessageBoxProps) {
super(props); super(props);
this.state = { this.state = {
mentions: [], mentions: [],
@ -170,14 +194,17 @@ class MessageBox extends Component {
cropperCancelText: I18n.t('Cancel'), cropperCancelText: I18n.t('Cancel'),
loadingLabelText: I18n.t('Processing') loadingLabelText: I18n.t('Processing')
}; };
this.imagePickerConfig = { this.imagePickerConfig = {
...imagePickerConfig, ...imagePickerConfig,
...libPickerLabels ...libPickerLabels
}; };
this.libraryPickerConfig = { this.libraryPickerConfig = {
...libraryPickerConfig, ...libraryPickerConfig,
...libPickerLabels ...libPickerLabels
}; };
this.videoPickerConfig = { this.videoPickerConfig = {
...videoPickerConfig, ...videoPickerConfig,
...libPickerLabels ...libPickerLabels
@ -186,9 +213,7 @@ class MessageBox extends Component {
async componentDidMount() { async componentDidMount() {
const db = database.active; const db = database.active;
const { const { rid, tmid, navigation, sharing } = this.props;
rid, tmid, navigation, sharing
} = this.props;
let msg; let msg;
try { try {
const threadsCollection = db.get('threads'); const threadsCollection = db.get('threads');
@ -238,10 +263,8 @@ class MessageBox extends Component {
}); });
} }
UNSAFE_componentWillReceiveProps(nextProps) { UNSAFE_componentWillReceiveProps(nextProps: any) {
const { const { isFocused, editing, replying, sharing } = this.props;
isFocused, editing, replying, sharing
} = this.props;
if (!isFocused?.()) { if (!isFocused?.()) {
return; return;
} }
@ -266,7 +289,7 @@ class MessageBox extends Component {
} }
} }
shouldComponentUpdate(nextProps, nextState) { shouldComponentUpdate(nextProps: any, nextState: any) {
const { const {
showEmojiKeyboard, showSend, recording, mentions, commandPreview, tshow showEmojiKeyboard, showSend, recording, mentions, commandPreview, tshow
} = this.state; } = this.state;
@ -274,6 +297,7 @@ class MessageBox extends Component {
const { const {
roomType, replying, editing, isFocused, message, theme roomType, replying, editing, isFocused, message, theme
} = this.props; } = this.props;
if (nextProps.theme !== theme) { if (nextProps.theme !== theme) {
return true; return true;
} }
@ -341,19 +365,19 @@ class MessageBox extends Component {
} }
} }
onChangeText = (text) => { onChangeText: any = (text: string): void => {
const isTextEmpty = text.length === 0; const isTextEmpty = text.length === 0;
this.setShowSend(!isTextEmpty); this.setShowSend(!isTextEmpty);
this.debouncedOnChangeText(text); this.debouncedOnChangeText(text);
this.setInput(text); this.setInput(text);
} }
onSelectionChange = (e) => { onSelectionChange = (e: any) => {
this.selection = e.nativeEvent.selection; this.selection = e.nativeEvent.selection;
} }
// eslint-disable-next-line react/sort-comp // eslint-disable-next-line react/sort-comp
debouncedOnChangeText = debounce(async(text) => { debouncedOnChangeText = debounce(async(text: any) => {
const { sharing } = this.props; const { sharing } = this.props;
const isTextEmpty = text.length === 0; const isTextEmpty = text.length === 0;
if (isTextEmpty) { if (isTextEmpty) {
@ -404,7 +428,7 @@ class MessageBox extends Component {
this.closeEmoji(); this.closeEmoji();
} }
onPressMention = (item) => { onPressMention = (item: any) => {
if (!this.component) { if (!this.component) {
return; return;
} }
@ -418,16 +442,18 @@ class MessageBox extends Component {
? `${ item.name || item }:` ? `${ item.name || item }:`
: (item.username || item.name || item.command); : (item.username || item.name || item.command);
const text = `${ result }${ mentionName } ${ msg.slice(cursor) }`; const text = `${ result }${ mentionName } ${ msg.slice(cursor) }`;
if ((trackingType === MENTIONS_TRACKING_TYPE_COMMANDS) && item.providesPreview) { if ((trackingType === MENTIONS_TRACKING_TYPE_COMMANDS) && item.providesPreview) {
this.setState({ showCommandPreview: true }); this.setState({ showCommandPreview: true });
} }
const newCursor = cursor + mentionName.length; const newCursor = cursor + mentionName.length;
this.setInput(text, { start: newCursor, end: newCursor }); this.setInput(text, { start: newCursor, end: newCursor });
this.focus(); this.focus();
requestAnimationFrame(() => this.stopTrackingMention()); requestAnimationFrame(() => this.stopTrackingMention());
} }
onPressCommandPreview = (item) => { onPressCommandPreview = (item: any) => {
const { command } = this.state; const { command } = this.state;
const { const {
rid, tmid, message: { id: messageTmid }, replyCancel rid, tmid, message: { id: messageTmid }, replyCancel
@ -449,7 +475,7 @@ class MessageBox extends Component {
} }
} }
onEmojiSelected = (keyboardId, params) => { onEmojiSelected = (keyboardId: any, params: any) => {
const { text } = this; const { text } = this;
const { emoji } = params; const { emoji } = params;
let newText = ''; let newText = '';
@ -463,7 +489,7 @@ class MessageBox extends Component {
this.setShowSend(true); this.setShowSend(true);
} }
getPermalink = async(message) => { getPermalink = async(message: any) => {
try { try {
return await RocketChat.getPermalinkMessage(message); return await RocketChat.getPermalinkMessage(message);
} catch (error) { } catch (error) {
@ -471,8 +497,8 @@ class MessageBox extends Component {
} }
} }
getFixedMentions = (keyword) => { getFixedMentions = (keyword: any) => {
let result = []; let result: any = [];
if ('all'.indexOf(keyword) !== -1) { if ('all'.indexOf(keyword) !== -1) {
result = [{ rid: -1, username: 'all' }]; result = [{ rid: -1, username: 'all' }];
} }
@ -482,7 +508,7 @@ class MessageBox extends Component {
return result; return result;
} }
getUsers = debounce(async(keyword) => { getUsers = debounce(async(keyword: any) => {
let res = await RocketChat.search({ text: keyword, filterRooms: false, filterUsers: true }); let res = await RocketChat.search({ text: keyword, filterRooms: false, filterUsers: true });
res = [...this.getFixedMentions(keyword), ...res]; res = [...this.getFixedMentions(keyword), ...res];
this.setState({ mentions: res }); this.setState({ mentions: res });
@ -493,7 +519,7 @@ class MessageBox extends Component {
this.setState({ mentions: res }); this.setState({ mentions: res });
}, 300) }, 300)
getEmojis = debounce(async(keyword) => { getEmojis = debounce(async(keyword: any) => {
const db = database.active; const db = database.active;
const customEmojisCollection = db.get('custom_emojis'); const customEmojisCollection = db.get('custom_emojis');
const likeString = sanitizeLikeString(keyword); const likeString = sanitizeLikeString(keyword);
@ -508,7 +534,7 @@ class MessageBox extends Component {
this.setState({ mentions: mergedEmojis || [] }); this.setState({ mentions: mergedEmojis || [] });
}, 300) }, 300)
getSlashCommands = debounce(async(keyword) => { getSlashCommands = debounce(async(keyword: any) => {
const db = database.active; const db = database.active;
const commandsCollection = db.get('slash_commands'); const commandsCollection = db.get('slash_commands');
const likeString = sanitizeLikeString(keyword); const likeString = sanitizeLikeString(keyword);
@ -524,7 +550,7 @@ class MessageBox extends Component {
} }
} }
handleTyping = (isTyping) => { handleTyping = (isTyping: boolean) => {
const { typing, rid, sharing } = this.props; const { typing, rid, sharing } = this.props;
if (sharing) { if (sharing) {
return; return;
@ -548,7 +574,7 @@ class MessageBox extends Component {
}, 1000); }, 1000);
} }
setCommandPreview = async(command, name, params) => { setCommandPreview = async(command: any, name: string, params: any) => {
const { rid } = this.props; const { rid } = this.props;
try { try {
const { success, preview } = await RocketChat.getCommandPreview(name, rid, params); const { success, preview } = await RocketChat.getCommandPreview(name, rid, params);
@ -561,7 +587,7 @@ class MessageBox extends Component {
this.setState({ commandPreview: [], showCommandPreview: true, command: {} }); this.setState({ commandPreview: [], showCommandPreview: true, command: {} });
} }
setInput = (text, selection) => { setInput = (text: any, selection?: any) => {
this.text = text; this.text = text;
if (selection) { if (selection) {
return this.component.setTextAndSelection(text, selection); return this.component.setTextAndSelection(text, selection);
@ -569,7 +595,7 @@ class MessageBox extends Component {
this.component.setNativeProps({ text }); this.component.setNativeProps({ text });
} }
setShowSend = (showSend) => { setShowSend = (showSend: any) => {
const { showSend: prevShowSend } = this.state; const { showSend: prevShowSend } = this.state;
const { showSend: propShowSend } = this.props; const { showSend: propShowSend } = this.props;
if (prevShowSend !== showSend && !propShowSend) { if (prevShowSend !== showSend && !propShowSend) {
@ -583,7 +609,7 @@ class MessageBox extends Component {
this.setState({ tshow: false }); this.setState({ tshow: false });
} }
canUploadFile = (file) => { canUploadFile = (file: any) => {
const { FileUpload_MediaTypeWhiteList, FileUpload_MaxFileSize } = this.props; const { FileUpload_MediaTypeWhiteList, FileUpload_MaxFileSize } = this.props;
const result = canUploadFile(file, FileUpload_MediaTypeWhiteList, FileUpload_MaxFileSize); const result = canUploadFile(file, FileUpload_MediaTypeWhiteList, FileUpload_MaxFileSize);
if (result.success) { if (result.success) {
@ -650,7 +676,7 @@ class MessageBox extends Component {
} }
} }
openShareView = (attachments) => { openShareView = (attachments: any) => {
const { message, replyCancel, replyWithMention } = this.props; const { message, replyCancel, replyWithMention } = this.props;
// Start a thread with an attachment // Start a thread with an attachment
let { thread } = this; let { thread } = this;
@ -689,11 +715,11 @@ class MessageBox extends Component {
this.setState({ showEmojiKeyboard: true }); this.setState({ showEmojiKeyboard: true });
} }
recordingCallback = (recording) => { recordingCallback = (recording: any) => {
this.setState({ recording }); this.setState({ recording });
} }
finishAudioMessage = async(fileInfo) => { finishAudioMessage = async(fileInfo: any) => {
const { const {
rid, tmid, baseUrl: server, user rid, tmid, baseUrl: server, user
} = this.props; } = this.props;
@ -767,6 +793,7 @@ class MessageBox extends Component {
// Edit // Edit
if (editing) { if (editing) {
const { message: editingMessage, editRequest } = this.props; const { message: editingMessage, editRequest } = this.props;
// @ts-ignore
const { id, subscription: { id: rid } } = editingMessage; const { id, subscription: { id: rid } } = editingMessage;
editRequest({ id, msg: message, rid }); editRequest({ id, msg: message, rid });
@ -798,11 +825,12 @@ class MessageBox extends Component {
// Normal message // Normal message
} else { } else {
// @ts-ignore
onSubmit(message, undefined, tshow); onSubmit(message, undefined, tshow);
} }
} }
updateMentions = (keyword, type) => { updateMentions = (keyword: any, type: string) => {
if (type === MENTIONS_TRACKING_TYPE_USERS) { if (type === MENTIONS_TRACKING_TYPE_USERS) {
this.getUsers(keyword); this.getUsers(keyword);
} else if (type === MENTIONS_TRACKING_TYPE_EMOJIS) { } else if (type === MENTIONS_TRACKING_TYPE_EMOJIS) {
@ -814,7 +842,7 @@ class MessageBox extends Component {
} }
} }
identifyMentionKeyword = (keyword, type) => { identifyMentionKeyword = (keyword: any, type: string) => {
this.setState({ this.setState({
showEmojiKeyboard: false, showEmojiKeyboard: false,
trackingType: type trackingType: type
@ -835,7 +863,7 @@ class MessageBox extends Component {
}); });
} }
handleCommands = ({ event }) => { handleCommands = ({ event }: {event: any}) => {
if (handleCommandTyping(event)) { if (handleCommandTyping(event)) {
if (this.focused) { if (this.focused) {
Keyboard.dismiss(); Keyboard.dismiss();
@ -896,12 +924,14 @@ class MessageBox extends Component {
const commandsPreviewAndMentions = !recording ? ( const commandsPreviewAndMentions = !recording ? (
<> <>
<CommandsPreview commandPreview={commandPreview} showCommandPreview={showCommandPreview} /> <CommandsPreview commandPreview={commandPreview} showCommandPreview={showCommandPreview} />
{/*@ts-ignore*/}
<Mentions mentions={mentions} trackingType={trackingType} theme={theme} /> <Mentions mentions={mentions} trackingType={trackingType} theme={theme} />
</> </>
) : null; ) : null;
const replyPreview = !recording ? ( const replyPreview = !recording ? (
<ReplyPreview <ReplyPreview
// @ts-ignore
message={message} message={message}
close={replyCancel} close={replyCancel}
username={user.username} username={user.username}
@ -925,6 +955,7 @@ class MessageBox extends Component {
/> />
<TextInput <TextInput
ref={component => this.component = component} ref={component => this.component = component}
//@ts-ignore
style={[styles.textBoxInput, { color: themes[theme].bodyText }]} style={[styles.textBoxInput, { color: themes[theme].bodyText }]}
returnKeyType='default' returnKeyType='default'
keyboardType='twitter' keyboardType='twitter'
@ -989,14 +1020,13 @@ class MessageBox extends Component {
}} }}
> >
<KeyboardAccessoryView <KeyboardAccessoryView
ref={ref => this.tracking = ref} ref={(ref: any) => this.tracking = ref}
renderContent={this.renderContent} renderContent={this.renderContent}
kbInputRef={this.component} kbInputRef={this.component}
kbComponent={showEmojiKeyboard ? 'EmojiKeyboard' : null} kbComponent={showEmojiKeyboard ? 'EmojiKeyboard' : null}
onKeyboardResigned={this.onKeyboardResigned} onKeyboardResigned={this.onKeyboardResigned}
onItemSelected={this.onEmojiSelected} onItemSelected={this.onEmojiSelected}
trackInteractive trackInteractive
// revealKeyboardInteractive
requiresSameParentToManageScrollView requiresSameParentToManageScrollView
addBottomView addBottomView
bottomViewColor={themes[theme].messageboxBackground} bottomViewColor={themes[theme].messageboxBackground}
@ -1007,7 +1037,7 @@ class MessageBox extends Component {
} }
} }
const mapStateToProps = state => ({ const mapStateToProps = (state: any) => ({
isMasterDetail: state.app.isMasterDetail, isMasterDetail: state.app.isMasterDetail,
baseUrl: state.server.server, baseUrl: state.server.server,
threadsEnabled: state.settings.Threads_enabled, threadsEnabled: state.settings.Threads_enabled,
@ -1018,7 +1048,7 @@ const mapStateToProps = state => ({
}); });
const dispatchToProps = ({ const dispatchToProps = ({
typing: (rid, status) => userTypingAction(rid, status) typing: (rid: any, status: any) => userTypingAction(rid, status)
}); });
// @ts-ignore
export default connect(mapStateToProps, dispatchToProps, null, { forwardRef: true })(withActionSheet(MessageBox)); export default connect(mapStateToProps, dispatchToProps, null, { forwardRef: true })(withActionSheet(MessageBox));