Skip to content

Commit

Permalink
Removing <TextInput autoGrow={true}>
Browse files Browse the repository at this point in the history
Summary:
`autoGrow` feature was/is totally awesome but... nowadays <TextInput> component is always autoexpandable (on both iOS and Android),
so we don't need JavaScript implementation of this anymore. Sometimes it is even harmfull (see T23403231).

I am sorry, sumkit. You are still awesome. :)

Reviewed By: sahrens

Differential Revision: D6553514

fbshipit-source-id: 1d24a2f2c046f514bd6b6318797a607b6e1841d0
  • Loading branch information
shergin authored and facebook-github-bot committed Dec 18, 2017
1 parent 0673ac2 commit dabb78b
Showing 1 changed file with 4 additions and 42 deletions.
46 changes: 4 additions & 42 deletions Libraries/Components/TextInput/TextInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -219,13 +219,6 @@ const TextInput = createReactClass({
* The default value is `false`.
*/
autoFocus: PropTypes.bool,
/**
* 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,
/**
* Specifies whether fonts should scale to respect Text Size accessibility settings. The
* default is `true`.
Expand Down Expand Up @@ -351,11 +344,6 @@ const TextInput = createReactClass({
* instead of implementing the logic in JS to avoid flicker.
*/
maxLength: PropTypes.number,
/**
* If autogrow is `true`, limits the height that the TextInput box can grow
* to. Once it reaches this height, the TextInput becomes scrollable.
*/
maxHeight: PropTypes.number,
/**
* Sets the number of lines for a `TextInput`. Use it with multiline set to
* `true` to be able to fill the lines.
Expand Down Expand Up @@ -612,10 +600,6 @@ const TextInput = createReactClass({
*/
mixins: [NativeMethodsMixin, TimerMixin],

getInitialState: function() {
return {layoutHeight: this._layoutHeight};
},

/**
* Returns `true` if the input is currently focused; `false` otherwise.
*/
Expand All @@ -633,7 +617,6 @@ const TextInput = createReactClass({
_focusSubscription: (undefined: ?Function),
_lastNativeText: (undefined: ?string),
_lastNativeSelection: (undefined: ?Selection),
_layoutHeight: (-1: number),

componentDidMount: function() {
this._lastNativeText = this.props.value;
Expand Down Expand Up @@ -766,6 +749,7 @@ const TextInput = createReactClass({
onScroll={this._onScroll}
/>;
}

return (
<TouchableWithoutFeedback
onLayout={props.onLayout}
Expand All @@ -783,10 +767,7 @@ const TextInput = createReactClass({

_renderAndroid: function() {
const props = Object.assign({}, this.props);
props.style = this.props.style;
if (this.state.layoutHeight >= 0) {
props.style = [props.style, {height: this.state.layoutHeight}];
}
props.style = [this.props.style];
props.autoCapitalize =
UIManager.AndroidTextInput.Constants.AutoCapitalizationType[
props.autoCapitalize || 'sentences'
Expand All @@ -804,9 +785,11 @@ const TextInput = createReactClass({
if (childCount > 1) {
children = <Text>{children}</Text>;
}

if (props.selection && props.selection.end == null) {
props.selection = {start: props.selection.start, end: props.selection.start};
}

const textContainer =
<AndroidTextInput
ref={this._setNativeRef}
Expand All @@ -815,7 +798,6 @@ const TextInput = createReactClass({
onFocus={this._onFocus}
onBlur={this._onBlur}
onChange={this._onChange}
onContentSizeChange={this._onContentSizeChange}
onSelectionChange={this._onSelectionChange}
onTextInput={this._onTextInput}
text={this._getText()}
Expand Down Expand Up @@ -878,26 +860,6 @@ const TextInput = createReactClass({
this.forceUpdate();
},

_onContentSizeChange: function(event: Event) {
let contentHeight = event.nativeEvent.contentSize.height;
if (this.props.autoGrow) {
if (this.props.maxHeight) {
contentHeight = Math.min(this.props.maxHeight, contentHeight);
}
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);

Expand Down

0 comments on commit dabb78b

Please sign in to comment.