SW/mattermost-mobile
2
0
Fork 0
forked from Ivasoft/mattermost-mobile
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MM-11116 Re-added QuickTextInput and added another hack on top of it (#1871)

Browse Source 
* MM-11116 Re-added updated QuickTextInput component to work around RN issue

* MM-11116 Work around setNativeProps not working for TextInputs

* Add isFocused method to QuickTextInput
This commit is contained in:
Harrison Healey
2018-07-03 19:04:04 -04:00
committed by Elias Nahum
parent 952aeaf786
commit 509dfe5542
9 changed files with 139 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/components/post_textbox/post_textbox.js
View File

@@ -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}

120
app/components/quick_text_input.js Normal file
View File

@@ -0,0 +1,120 @@
// 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.
//
// We're using this in place of a connected TextInput due to changes made in RN v0.54
// that break input in Chinese and Japanese when using a connected TextInput. See
// https://github.com/facebook/react-native/issues/18403 for more information.
//
// In addition to that, there's also an ugly hack to change the key on the TextInput
// when this is triggered because that same version made setNativeProps work inconsistently.
// See https://github.com/facebook/react-native/issues/18272 for more information on that.
export default class QuickTextInput extends React.PureComponent {
static propTypes = {
onChangeText: PropTypes.func,
/**
* The string value displayed in this input
*/
value: PropTypes.string.isRequired,
};
static defaultProps = {
delayInputUpdate: false,
value: '',
};
constructor(props) {
super(props);
this.storedValue = props.value;
this.state = {
key: 0,
};
}
componentDidMount() {
this.updateInputFromProps();
}
UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase
// This will force the base TextInput to re-render if the value is changing
// from something other than the user typing in it. This does however cause
// the TextInput to flicker when this happens.
if (nextProps.value !== this.storedValue) {
this.setState({
key: this.state.key + 1,
});
}
this.hadFocus = this.isFocused();
}
componentDidUpdate(prevProps, prevState) {
if (this.props.value !== this.storedValue) {
this.updateInputFromProps();
}
if (prevState.key !== this.state.key && this.hadFocus) {
this.input.focus();
}
}
updateInputFromProps = () => {
if (!this.input) {
return;
}
this.input.setNativeProps({text: this.props.value});
this.storedValue = this.props.value;
}
focus() {
this.input.focus();
}
blur() {
this.input.blur();
}
isFocused() {
return this.input.isFocused();
}
handleChangeText = (value) => {
this.storedValue = value;
if (this.props.onChangeText) {
this.props.onChangeText(value);
}
}
setInput = (input) => {
this.input = input;
}
render() {
const props = {...this.props};
// Specifying a value or defaultValue cause the issues noted above
Reflect.deleteProperty(props, 'value');
Reflect.deleteProperty(props, 'defaultValue');
return (
<TextInput
{...props}
key={this.state.key}
onChangeText={this.handleChangeText}
ref={this.setInput}
/>
);
}
}

4
app/components/search_bar/search_bar.android.js
View File

@@ -5,13 +5,13 @@ import PropTypes from 'prop-types';
import {
InteractionManager,
Keyboard,
TextInput,
StyleSheet,
View,
TouchableWithoutFeedback,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import QuickTextInput from 'app/components/quick_text_input';
import CustomPropTypes from 'app/constants/custom_prop_types';
import {changeOpacity} from 'app/utils/theme';
@@ -208,7 +208,7 @@ export default class SearchBarAndroid extends PureComponent {
color={tintColorSearch || placeholderTextColor}
/>
}
<TextInput
<QuickTextInput
ref='input'
blurOnSubmit={blurOnSubmit}
value={this.state.value}

4
app/components/text_input_with_localized_placeholder.js
View File

@@ -6,6 +6,8 @@ import PropTypes from 'prop-types';
import {injectIntl, intlShape} from 'react-intl';
import {TextInput} from 'react-native';
import QuickTextInput from 'app/components/quick_text_input';
class TextInputWithLocalizedPlaceholder extends PureComponent {
static propTypes = {
...TextInput.propTypes,
@@ -29,7 +31,7 @@ class TextInputWithLocalizedPlaceholder extends PureComponent {
}
return (
<TextInput
<QuickTextInput
ref='input'
{...otherProps}
placeholder={placeholderString}

4
app/screens/edit_profile/edit_profile_item.js
View File

@@ -6,10 +6,10 @@ import PropTypes from 'prop-types';
import {
View,
Text,
TextInput,
} from 'react-native';
import FormattedText from 'app/components/formatted_text';
import QuickTextInput from 'app/components/quick_text_input';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
export default class AccountSettingsItem extends PureComponent {
@@ -65,7 +65,7 @@ export default class AccountSettingsItem extends PureComponent {
)}
</View>
<View style={style.inputContainer}>
<TextInput
<QuickTextInput
ref={this.channelNameRef}
value={value}
onChangeText={this.onChangeText}

6
app/screens/login/login.js
View File

@@ -12,7 +12,6 @@ import {
Keyboard,
StyleSheet,
Text,
TextInput,
TouchableWithoutFeedback,
View,
} from 'react-native';
@@ -21,6 +20,7 @@ import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import ErrorText from 'app/components/error_text';
import FormattedText from 'app/components/formatted_text';
import QuickTextInput from 'app/components/quick_text_input';
import StatusBar from 'app/components/status_bar';
import PushNotifications from 'app/push_notifications';
import {GlobalStyles} from 'app/styles';
@@ -364,7 +364,7 @@ export default class Login extends PureComponent {
/>
</View>
<ErrorText error={this.getLoginErrorMessage()}/>
<TextInput
<QuickTextInput
ref={this.loginRef}
value={this.props.loginId}
onChangeText={this.props.actions.handleLoginIdChanged}
@@ -379,7 +379,7 @@ export default class Login extends PureComponent {
blurOnSubmit={false}
disableFullscreenUI={true}
/>
<TextInput
<QuickTextInput
ref={this.passwordRef}
value={this.props.password}
onChangeText={this.props.actions.handlePasswordChanged}

4
app/screens/select_server/select_server.js
View File

@@ -13,7 +13,6 @@ import {
StatusBar,
StyleSheet,
Text,
TextInput,
TouchableWithoutFeedback,
View,
} from 'react-native';
@@ -23,6 +22,7 @@ import {Client4} from 'mattermost-redux/client';
import ErrorText from 'app/components/error_text';
import FormattedText from 'app/components/formatted_text';
import QuickTextInput from 'app/components/quick_text_input';
import {UpgradeTypes} from 'app/constants/view';
import {GlobalStyles} from 'app/styles';
import checkUpgradeType from 'app/utils/client_upgrade';
@@ -346,7 +346,7 @@ export default class SelectServer extends PureComponent {
defaultMessage='Enter Server URL'
/>
</View>
<TextInput
<QuickTextInput
ref={this.inputRef}
value={url}
editable={!inputDisabled}

4
share_extension/android/extension_post/extension_post.js
View File

@@ -13,7 +13,6 @@ import {
PermissionsAndroid,
ScrollView,
Text,
TextInput,
View,
} from 'react-native';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
@@ -24,6 +23,7 @@ import RNFetchBlob from 'react-native-fetch-blob';
import {Preferences} from 'mattermost-redux/constants';
import {getFormattedFileSize, lookupMimeType} from 'mattermost-redux/utils/file_utils';
import QuickTextInput from 'app/components/quick_text_input';
import PaperPlane from 'app/components/paper_plane';
import mattermostManaged from 'app/mattermost_managed';
import {getExtensionFromMime} from 'app/utils/file';
@@ -339,7 +339,7 @@ export default class ExtensionPost extends PureComponent {
contentContainerStyle={styles.scrollView}
style={styles.flex}
>
<TextInput
<QuickTextInput
ref={this.getInputRef}
autoCapitalize='sentences'
maxLength={MAX_MESSAGE_LENGTH}

4
share_extension/ios/extension_post.js
View File

@@ -12,7 +12,6 @@ import {
NativeModules,
ScrollView,
Text,
TextInput,
TouchableHighlight,
View,
} from 'react-native';
@@ -27,6 +26,7 @@ import {getChannel} from 'mattermost-redux/selectors/entities/channels';
import {getFormattedFileSize, lookupMimeType} from 'mattermost-redux/utils/file_utils';
import {isMinimumServerVersion} from 'mattermost-redux/utils/helpers';
import QuickTextInput from 'app/components/quick_text_input';
import mattermostBucket from 'app/mattermost_bucket';
import {generateId, getAllowedServerMaxFileSize} from 'app/utils/file';
import {preventDoubleTap} from 'app/utils/tap';
@@ -358,7 +358,7 @@ export default class ExtensionPost extends PureComponent {
contentContainerStyle={styles.scrollView}
style={styles.flex}
>
<TextInput
<QuickTextInput
ref={this.getInputRef}
maxLength={MAX_MESSAGE_LENGTH}
multiline={true}