From 2ef2be51d352a89becffaaba0f8691de0c768475 Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Wed, 27 Feb 2019 11:23:40 -0300 Subject: [PATCH] [FIX] Slow messagebox (#658) --- app/containers/MessageBox/index.js | 52 +++++++++++++++++++----------- 1 file changed, 33 insertions(+), 19 deletions(-) diff --git a/app/containers/MessageBox/index.js b/app/containers/MessageBox/index.js index 9ecba3a00..a9056c69c 100644 --- a/app/containers/MessageBox/index.js +++ b/app/containers/MessageBox/index.js @@ -30,6 +30,7 @@ import './EmojiKeyboard'; import log from '../../utils/log'; import I18n from '../../i18n'; import ReplyPreview from './ReplyPreview'; +import debounce from '../../utils/debounce'; const MENTIONS_TRACKING_TYPE_USERS = '@'; const MENTIONS_TRACKING_TYPE_EMOJIS = ':'; @@ -93,6 +94,7 @@ export default class MessageBox extends Component { showFilesAction: false, showSend: false, recording: false, + trackingType: '', file: { isVisible: false } @@ -154,9 +156,16 @@ export default class MessageBox extends Component { 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.handleTyping(text.length > 0); requestAnimationFrame(() => { const { start, end } = this.component._lastNativeSelection; @@ -170,13 +179,13 @@ export default class MessageBox extends Component { const [, lastChar, name] = result; this.identifyMentionKeyword(name, lastChar); }); - } + }, 100); - onKeyboardResigned() { + onKeyboardResigned = () => { this.closeEmoji(); } - onPressMention(item) { + onPressMention = (item) => { const { trackingType } = this.state; const msg = this.text; const { start, end } = this.component._lastNativeSelection; @@ -192,7 +201,7 @@ export default class MessageBox extends Component { requestAnimationFrame(() => this.stopTrackingMention()); } - onEmojiSelected(keyboardId, params) { + onEmojiSelected = (keyboardId, params) => { const { text } = this; const { emoji } = params; let newText = ''; @@ -207,6 +216,7 @@ export default class MessageBox extends Component { newText = `${ text }${ emoji }`; } this.setInput(newText); + this.showSend(true); } get leftButtons() { @@ -271,7 +281,7 @@ export default class MessageBox extends Component { icons.push( this.submit()} + onPress={this.submit} style={styles.actionButton} testID='messagebox-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) { 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'); if (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.rooms = database.objects('subscriptions') .filtered('t != $0', 'd'); @@ -413,7 +423,7 @@ export default class MessageBox extends Component { } } - getEmojis(keyword) { + getEmojis = (keyword) => { if (keyword) { 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); @@ -446,11 +456,15 @@ export default class MessageBox extends Component { setInput = (text) => { this.text = text; this.component.setNativeProps({ text }); - this.setState({ showSend: text.length > 0 }); + } + + setShowSend = (showSend) => { + this.setState({ showSend }); } clearInput = () => { this.setInput(''); + this.setShowSend(false); } toggleFilesActions = () => { @@ -543,7 +557,6 @@ export default class MessageBox extends Component { } = this.props; const message = this.text; - this.clearInput(); this.closeEmoji(); this.stopTrackingMention(); this.handleTyping(false); @@ -577,6 +590,7 @@ export default class MessageBox extends Component { // if is submiting a new message onSubmit(message); } + this.clearInput(); } updateMentions = (keyword, type) => { @@ -589,7 +603,7 @@ export default class MessageBox extends Component { } } - identifyMentionKeyword(keyword, type) { + identifyMentionKeyword = (keyword, type) => { this.setState({ showEmojiKeyboard: false, trackingType: type @@ -597,7 +611,7 @@ export default class MessageBox extends Component { this.updateMentions(keyword, type); } - stopTrackingMention() { + stopTrackingMention = () => { const { trackingType } = this.state; if (!trackingType) { return; @@ -725,7 +739,7 @@ export default class MessageBox extends Component { ); } - renderContent() { + renderContent = () => { const { recording } = this.state; const { editing } = this.props; @@ -749,7 +763,7 @@ export default class MessageBox extends Component { keyboardType='twitter' blurOnSubmit={false} placeholder={I18n.t('New_Message')} - onChangeText={t => this.onChangeText(t)} + onChangeText={this.onChangeText} underlineColorAndroid='transparent' defaultValue='' multiline @@ -769,10 +783,10 @@ export default class MessageBox extends Component { [ this.renderContent()} + renderContent={this.renderContent} kbInputRef={this.component} kbComponent={showEmojiKeyboard ? 'EmojiKeyboard' : null} - onKeyboardResigned={() => this.onKeyboardResigned()} + onKeyboardResigned={this.onKeyboardResigned} onItemSelected={this.onEmojiSelected} trackInteractive // revealKeyboardInteractive