status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-01-27 01:40:08 +00:00
Code Issues Projects Releases Wiki Activity

Fix TextInput autoGrow

Browse Source 
Reviewed By: fkgozali

Differential Revision: D5625698

fbshipit-source-id: 04a649905816a298dd525144e971cf577c41daa5
This commit is contained in:
Andrew Y. Chen 2017-08-14 23:46:44 -07:00 committed by Facebook Github Bot
parent 68bbccbaa2
commit 7abce0b742
1 changed files with 21 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
Libraries/Components/TextInput/TextInput.js
View File

@ -212,6 +212,7 @@ const TextInput = createReactClass({
* If true, will increase the height of the textbox if need be. If false,
* the textbox will become scrollable once the height is reached. The
* default value is false.
* @platform android
*/
autoGrow: PropTypes.bool,
/**
@ -554,7 +555,7 @@ const TextInput = createReactClass({
mixins: [NativeMethodsMixin, TimerMixin],
getInitialState: function() {
return {nativeHeight: this._originalNativeHeight};
return {layoutHeight: this._layoutHeight};
},
/**
@ -574,7 +575,7 @@ const TextInput = createReactClass({
_focusSubscription: (undefined: ?Function),
_lastNativeText: (undefined: ?string),
_lastNativeSelection: (undefined: ?Selection),
_originalNativeHeight: (-1: number),
_layoutHeight: (-1: number),
componentDidMount: function() {
this._lastNativeText = this.props.value;
@ -690,7 +691,6 @@ const TextInput = createReactClass({
children = [children, props.inputView];
}
props.style.unshift(styles.multilineInput);
props.style.push({height: this.state.nativeHeight});
textContainer =
<RCTTextView
ref={this._setNativeRef}
@ -699,7 +699,7 @@ const TextInput = createReactClass({
onFocus={this._onFocus}
onBlur={this._onBlur}
onChange={this._onChange}
onContentSizeChange={this._onContentSizeChange}
onContentSizeChange={this.props.onContentSizeChange}
onSelectionChange={this._onSelectionChange}
onTextInput={this._onTextInput}
onSelectionChangeShouldSetResponder={emptyFunction.thatReturnsTrue}
@ -725,7 +725,10 @@ const TextInput = createReactClass({
_renderAndroid: function() {
const props = Object.assign({}, this.props);
props.style = [{height: this.state.nativeHeight}, this.props.style];
props.style = this.props.style;
if (this.state.layoutHeight >= 0) {
props.style = [props.style, {height: this.state.layoutHeight}];
}
props.autoCapitalize =
UIManager.AndroidTextInput.Constants.AutoCapitalizationType[this.props.autoCapitalize];
var children = this.props.children;
@ -761,7 +764,7 @@ const TextInput = createReactClass({
return (
<TouchableWithoutFeedback
onLayout={this.props.onLayout}
onLayout={this._onLayout}
onPress={this._onPress}
accessible={this.props.accessible}
accessibilityLabel={this.props.accessibilityLabel}
@ -813,23 +816,25 @@ const TextInput = createReactClass({
},
_onContentSizeChange: function(event: Event) {
const height = event.nativeEvent.contentSize.height;
if (this._originalNativeHeight < 0) {
this._originalNativeHeight = height;
}
let contentHeight = event.nativeEvent.contentSize.height;
if (this.props.autoGrow) {
if (this.props.maxHeight) {
this.setState({nativeHeight:
Math.min(this.props.maxHeight, height)});
} else if (Platform.OS === 'android') {
this.setState({nativeHeight: height});
contentHeight = Math.min(this.props.maxHeight, contentHeight);
}
} else {
this.setState({nativeHeight: this._originalNativeHeight});
this.setState({layoutHeight: Math.max(this._layoutHeight, contentHeight)});
}
this.props.onContentSizeChange && this.props.onContentSizeChange(event);
},
_onLayout: function(event: Event) {
const height = event.nativeEvent.layout.height;
if (height) {
this._layoutHeight = event.nativeEvent.layout.height;
}
this.props.onLayout && this.props.onLayout(event);
},
_onSelectionChange: function(event: Event) {
this.props.onSelectionChange && this.props.onSelectionChange(event);