verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

[FIX] Slow messagebox (#658)

This commit is contained in:
Diego Mello 2019-02-27 11:23:40 -03:00 committed by GitHub
parent 025c5cba74
commit 2ef2be51d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 33 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
app/containers/MessageBox/index.js
View File

@ -30,6 +30,7 @@ import './EmojiKeyboard';
import log from '../../utils/log'; import log from '../../utils/log';
import I18n from '../../i18n'; import I18n from '../../i18n';
import ReplyPreview from './ReplyPreview'; import ReplyPreview from './ReplyPreview';
import debounce from '../../utils/debounce';
const MENTIONS_TRACKING_TYPE_USERS = '@'; const MENTIONS_TRACKING_TYPE_USERS = '@';
const MENTIONS_TRACKING_TYPE_EMOJIS = ':'; const MENTIONS_TRACKING_TYPE_EMOJIS = ':';
@ -93,6 +94,7 @@ export default class MessageBox extends Component {
showFilesAction: false, showFilesAction: false,
showSend: false, showSend: false,
recording: false, recording: false,
trackingType: '',
file: { file: {
isVisible: false isVisible: false
} }
@ -154,9 +156,16 @@ export default class MessageBox extends Component {
return false; return false;
} }
onChangeText(text) { onChangeText = (text) => {
const isTextEmpty = text.length === 0;
this.setShowSend(!isTextEmpty);
this.handleTyping(!isTextEmpty);
this.debouncedOnChangeText(text);
}
// eslint-disable-next-line react/sort-comp
debouncedOnChangeText = debounce((text) => {
this.setInput(text); this.setInput(text);
this.handleTyping(text.length > 0);
requestAnimationFrame(() => { requestAnimationFrame(() => {
const { start, end } = this.component._lastNativeSelection; const { start, end } = this.component._lastNativeSelection;
@ -170,13 +179,13 @@ export default class MessageBox extends Component {
const [, lastChar, name] = result; const [, lastChar, name] = result;
this.identifyMentionKeyword(name, lastChar); this.identifyMentionKeyword(name, lastChar);
}); });
} }, 100);
onKeyboardResigned() { onKeyboardResigned = () => {
this.closeEmoji(); this.closeEmoji();
} }
onPressMention(item) { onPressMention = (item) => {
const { trackingType } = this.state; const { trackingType } = this.state;
const msg = this.text; const msg = this.text;
const { start, end } = this.component._lastNativeSelection; const { start, end } = this.component._lastNativeSelection;
@ -192,7 +201,7 @@ export default class MessageBox extends Component {
requestAnimationFrame(() => this.stopTrackingMention()); requestAnimationFrame(() => this.stopTrackingMention());
} }
onEmojiSelected(keyboardId, params) { onEmojiSelected = (keyboardId, params) => {
const { text } = this; const { text } = this;
const { emoji } = params; const { emoji } = params;
let newText = ''; let newText = '';
@ -207,6 +216,7 @@ export default class MessageBox extends Component {
newText = `${ text }${ emoji }`; newText = `${ text }${ emoji }`;
} }
this.setInput(newText); this.setInput(newText);
this.showSend(true);
} }
get leftButtons() { get leftButtons() {
@ -271,7 +281,7 @@ export default class MessageBox extends Component {
icons.push( icons.push(
<BorderlessButton <BorderlessButton
key='send-message' key='send-message'
onPress={() => this.submit()} onPress={this.submit}
style={styles.actionButton} style={styles.actionButton}
testID='messagebox-send-message' testID='messagebox-send-message'
accessibilityLabel={I18n.t('Send message')} accessibilityLabel={I18n.t('Send message')}
@ -317,7 +327,7 @@ export default class MessageBox extends Component {
} }
} }
getFixedMentions(keyword) { getFixedMentions = (keyword) => {
if ('all'.indexOf(keyword) !== -1) { if ('all'.indexOf(keyword) !== -1) {
this.users = [{ _id: -1, username: 'all' }, ...this.users]; this.users = [{ _id: -1, username: 'all' }, ...this.users];
} }
@ -326,7 +336,7 @@ export default class MessageBox extends Component {
} }
} }
async getUsers(keyword) { getUsers = async(keyword) => {
this.users = database.objects('users'); this.users = database.objects('users');
if (keyword) { if (keyword) {
this.users = this.users.filtered('username CONTAINS[c] $0', keyword); this.users = this.users.filtered('username CONTAINS[c] $0', keyword);
@ -371,7 +381,7 @@ export default class MessageBox extends Component {
} }
} }
async getRooms(keyword = '') { getRooms = async(keyword = '') => {
this.roomsCache = this.roomsCache || []; this.roomsCache = this.roomsCache || [];
this.rooms = database.objects('subscriptions') this.rooms = database.objects('subscriptions')
.filtered('t != $0', 'd'); .filtered('t != $0', 'd');
@ -413,7 +423,7 @@ export default class MessageBox extends Component {
} }
} }
getEmojis(keyword) { getEmojis = (keyword) => {
if (keyword) { if (keyword) {
this.customEmojis = database.objects('customEmojis').filtered('name CONTAINS[c] $0', keyword).slice(0, 4); this.customEmojis = database.objects('customEmojis').filtered('name CONTAINS[c] $0', keyword).slice(0, 4);
this.emojis = emojis.filter(emoji => emoji.indexOf(keyword) !== -1).slice(0, 4); this.emojis = emojis.filter(emoji => emoji.indexOf(keyword) !== -1).slice(0, 4);
@ -446,11 +456,15 @@ export default class MessageBox extends Component {
setInput = (text) => { setInput = (text) => {
this.text = text; this.text = text;
this.component.setNativeProps({ text }); this.component.setNativeProps({ text });
this.setState({ showSend: text.length > 0 }); }
setShowSend = (showSend) => {
this.setState({ showSend });
} }
clearInput = () => { clearInput = () => {
this.setInput(''); this.setInput('');
this.setShowSend(false);
} }
toggleFilesActions = () => { toggleFilesActions = () => {
@ -543,7 +557,6 @@ export default class MessageBox extends Component {
} = this.props; } = this.props;
const message = this.text; const message = this.text;
this.clearInput();
this.closeEmoji(); this.closeEmoji();
this.stopTrackingMention(); this.stopTrackingMention();
this.handleTyping(false); this.handleTyping(false);
@ -577,6 +590,7 @@ export default class MessageBox extends Component {
// if is submiting a new message // if is submiting a new message
onSubmit(message); onSubmit(message);
} }
this.clearInput();
} }
updateMentions = (keyword, type) => { updateMentions = (keyword, type) => {
@ -589,7 +603,7 @@ export default class MessageBox extends Component {
} }
} }
identifyMentionKeyword(keyword, type) { identifyMentionKeyword = (keyword, type) => {
this.setState({ this.setState({
showEmojiKeyboard: false, showEmojiKeyboard: false,
trackingType: type trackingType: type
@ -597,7 +611,7 @@ export default class MessageBox extends Component {
this.updateMentions(keyword, type); this.updateMentions(keyword, type);
} }
stopTrackingMention() { stopTrackingMention = () => {
const { trackingType } = this.state; const { trackingType } = this.state;
if (!trackingType) { if (!trackingType) {
return; return;
@ -725,7 +739,7 @@ export default class MessageBox extends Component {
); );
} }
renderContent() { renderContent = () => {
const { recording } = this.state; const { recording } = this.state;
const { editing } = this.props; const { editing } = this.props;
@ -749,7 +763,7 @@ export default class MessageBox extends Component {
keyboardType='twitter' keyboardType='twitter'
blurOnSubmit={false} blurOnSubmit={false}
placeholder={I18n.t('New_Message')} placeholder={I18n.t('New_Message')}
onChangeText={t => this.onChangeText(t)} onChangeText={this.onChangeText}
underlineColorAndroid='transparent' underlineColorAndroid='transparent'
defaultValue='' defaultValue=''
multiline multiline
@ -769,10 +783,10 @@ export default class MessageBox extends Component {
[ [
<KeyboardAccessoryView <KeyboardAccessoryView
key='input' key='input'
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 // revealKeyboardInteractive