MM-11684 Fix grey highlight in the text fields in user profile (#2034)

* Fix jumpto search highlight
* Change background style to be on view and rest of
input styles to input
This commit is contained in:
Sudheer 2018-08-29 15:44:20 +05:30 committed by Saturnino Abril
parent 96f967ec56
commit 32e5316817
2 changed files with 55 additions and 52 deletions

View file

@ -330,6 +330,7 @@ export default class Search extends Component {
};
render() {
const {backgroundColor, ...restOfInputPropStyles} = this.props.inputStyle;
return (
<Animated.View
ref='searchContainer'
@ -339,45 +340,47 @@ export default class Search extends Component {
]}
onLayout={this.onLayout}
>
<AnimatedTextInput
ref='input_keyword'
style={[
styles.input,
this.props.placeholderTextColor && {color: this.props.placeholderTextColor},
this.props.inputStyle && this.props.inputStyle,
this.props.inputHeight && {height: this.props.inputHeight},
this.props.inputBorderRadius && {borderRadius: this.props.inputBorderRadius},
{
width: this.inputFocusWidthAnimated,
paddingLeft: this.inputFocusPlaceholderAnimated,
},
this.props.shadowVisible && {
shadowOffset: {width: this.props.shadowOffsetWidth, height: this.shadowHeight},
shadowColor: this.props.shadowColor,
shadowOpacity: this.shadowOpacityAnimated,
shadowRadius: this.props.shadowRadius,
},
<View style={{backgroundColor}}>
<AnimatedTextInput
ref='input_keyword'
style={[
styles.input,
this.props.placeholderTextColor && {color: this.props.placeholderTextColor},
this.props.inputHeight && {height: this.props.inputHeight},
this.props.inputBorderRadius && {borderRadius: this.props.inputBorderRadius},
{
width: this.inputFocusWidthAnimated,
paddingLeft: this.inputFocusPlaceholderAnimated,
},
restOfInputPropStyles,
this.props.shadowVisible && {
shadowOffset: {width: this.props.shadowOffsetWidth, height: this.shadowHeight},
shadowColor: this.props.shadowColor,
shadowOpacity: this.shadowOpacityAnimated,
shadowRadius: this.props.shadowRadius,
},
]}
autoFocus={this.props.autoFocus}
editable={this.props.editable}
value={this.props.value}
onChangeText={this.onChangeText}
placeholder={this.placeholder}
placeholderTextColor={this.props.placeholderTextColor}
selectionColor={this.props.selectionColor}
onSubmitEditing={this.onSearch}
onSelectionChange={this.onSelectionChange}
autoCorrect={false}
blurOnSubmit={this.props.blurOnSubmit}
returnKeyType={this.props.returnKeyType || 'search'}
keyboardType={this.props.keyboardType || 'default'}
autoCapitalize={this.props.autoCapitalize}
onBlur={this.onBlur}
onFocus={this.onFocus}
underlineColorAndroid='transparent'
enablesReturnKeyAutomatically={true}
/>
]}
autoFocus={this.props.autoFocus}
editable={this.props.editable}
value={this.props.value}
onChangeText={this.onChangeText}
placeholder={this.placeholder}
placeholderTextColor={this.props.placeholderTextColor}
selectionColor={this.props.selectionColor}
onSubmitEditing={this.onSearch}
onSelectionChange={this.onSelectionChange}
autoCorrect={false}
blurOnSubmit={this.props.blurOnSubmit}
returnKeyType={this.props.returnKeyType || 'search'}
keyboardType={this.props.keyboardType || 'default'}
autoCapitalize={this.props.autoCapitalize}
onBlur={this.onBlur}
onFocus={this.onFocus}
underlineColorAndroid='transparent'
enablesReturnKeyAutomatically={true}
/>
</View>
<TouchableWithoutFeedback onPress={this.onFocus}>
{((this.props.iconSearch) ?
<Animated.View
@ -469,7 +472,6 @@ const styles = StyleSheet.create({
paddingBottom: 5,
paddingRight: 32,
borderColor: '#444',
backgroundColor: '#f7f7f7',
borderRadius: 5,
fontSize: 15,
},
@ -504,4 +506,3 @@ const styles = StyleSheet.create({
color: '#fff',
},
});

View file

@ -66,18 +66,20 @@ export default class AccountSettingsItem extends PureComponent {
)}
</View>
<View style={style.inputContainer}>
<QuickTextInput
ref={this.channelNameRef}
value={value}
onChangeText={this.onChangeText}
style={[style.input, disabled ? style.disabled : null]}
autoCapitalize='none'
autoCorrect={false}
maxLength={this.props.maxLength}
editable={!disabled}
underlineColorAndroid='transparent'
disableFullscreenUI={true}
/>
<View style={disabled ? style.disabled : null}>
<QuickTextInput
ref={this.channelNameRef}
value={value}
onChangeText={this.onChangeText}
style={style.input}
autoCapitalize='none'
autoCorrect={false}
maxLength={this.props.maxLength}
editable={!disabled}
underlineColorAndroid='transparent'
disableFullscreenUI={true}
/>
</View>
{disabled &&
<Text style={style.helpText}>
{helpText}