Merge pull request #1777 from mattermost/mm10822

MM-10822 Change post textbox to only be partially connected

app/components/post_textbox/post_textbox.js

@@ -3,7 +3,7 @@
 
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {Alert, BackHandler, Keyboard, Platform, Text, TextInput, TouchableOpacity, View} from 'react-native';
+import {Alert, BackHandler, Keyboard, Platform, Text, TouchableOpacity, View} from 'react-native';
 import {intlShape} from 'react-intl';
 import {RequestStatus} from 'mattermost-redux/constants';
 import EventEmitter from 'mattermost-redux/utils/event_emitter';
@@ -11,6 +11,7 @@ import EventEmitter from 'mattermost-redux/utils/event_emitter';
 import AttachmentButton from 'app/components/attachment_button';
 import Autocomplete from 'app/components/autocomplete';
 import FileUploadPreview from 'app/components/file_upload_preview';
+import QuickTextInput from 'app/components/quick_text_input';
 import {INITIAL_HEIGHT, INSERT_TO_COMMENT, INSERT_TO_DRAFT, IS_REACTION_REGEX, MAX_CONTENT_HEIGHT, MAX_FILE_COUNT} from 'app/constants/post_textbox';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 
@@ -494,7 +495,7 @@ export default class PostTextbox extends PureComponent {
                 <View style={style.inputWrapper}>
                     {!channelIsReadOnly && attachmentButton}
                     <View style={[inputContainerStyle, (channelIsReadOnly && {marginLeft: 10})]}>
-                        <TextInput
+                        <QuickTextInput
                             ref='input'
                             value={textValue}
                             onChangeText={this.handleTextChange}

app/components/quick_text_input.js

@@ -0,0 +1,86 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import {TextInput} from 'react-native';
+
+// A component that can be used to make partially-controlled inputs that can be updated
+// by changing the value prop without lagging the UI
+export default class QuickTextInput extends React.PureComponent {
+    static propTypes = {
+
+        /**
+         * Whether to delay updating the value of the textbox from props. Should only be used
+         * on textboxes that require it to properly compose CJK characters as the user types.
+         */
+        delayInputUpdate: PropTypes.bool,
+
+        /**
+         * The string value displayed in this input
+         */
+        value: PropTypes.string.isRequired,
+    };
+
+    static defaultProps = {
+        delayInputUpdate: false,
+        value: '',
+    };
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.value !== this.props.value) {
+            if (this.props.delayInputUpdate) {
+                requestAnimationFrame(this.updateInputFromProps);
+            } else {
+                this.updateInputFromProps();
+            }
+        }
+    }
+
+    updateInputFromProps = () => {
+        if (!this.input) {
+            return;
+        }
+
+        this.input.setNativeProps({text: this.props.value});
+    }
+
+    get value() {
+        return this.input.value;
+    }
+
+    set value(value) {
+        this.input.setNativeProps({text: this.props.value});
+    }
+
+    focus() {
+        this.input.focus();
+    }
+
+    blur() {
+        this.input.blur();
+    }
+
+    getInput = () => {
+        return this.input;
+    };
+
+    setInput = (input) => {
+        this.input = input;
+    }
+
+    render() {
+        const {value, ...props} = this.props;
+
+        Reflect.deleteProperty(props, 'delayInputUpdate');
+
+        // Only set the defaultValue since the real one will be updated using componentDidUpdate if necessary
+        return (
+            <TextInput
+                {...props}
+                ref={this.setInput}
+                defaultValue={value}
+            />
+        );
+    }
+}