Enable blurOnSubmit for text input in android

Summary:PR for https://github.com/facebook/react-native/issues/6098, Added tests to UIExplorer based on existing iOS example.

Before:
![blur_true](https://cloud.githubusercontent.com/assets/11550281/13401854/cd66117a-df33-11e5-875d-e1f132e2fc82.gif)

After:
![blur_false](https://cloud.githubusercontent.com/assets/11550281/13401874/de1dd1ce-df33-11e5-8210-e6bee80240fb.gif)
Closes https://github.com/facebook/react-native/pull/6215

Differential Revision: D3000042

Pulled By: mkonicek

fb-gh-sync-id: 7f01270580b198498505d92e38a456c0b3a01488
shipit-source-id: 7f01270580b198498505d92e38a456c0b3a01488
This commit is contained in:
AbilashK 2016-03-02 07:06:37 -08:00 committed by Facebook Github Bot 4
parent f827f7b79a
commit ab12189f87
4 changed files with 75 additions and 2 deletions

View File

@ -178,6 +178,60 @@ class TokenizedTextExample extends React.Component {
}
}
var BlurOnSubmitExample = React.createClass({
focusNextField(nextField) {
this.refs[nextField].focus();
},
render: function() {
return (
<View>
<TextInput
ref="1"
style={styles.singleLine}
placeholder="blurOnSubmit = false"
returnKeyType="next"
blurOnSubmit={false}
onSubmitEditing={() => this.focusNextField('2')}
/>
<TextInput
ref="2"
style={styles.singleLine}
keyboardType="email-address"
placeholder="blurOnSubmit = false"
returnKeyType="next"
blurOnSubmit={false}
onSubmitEditing={() => this.focusNextField('3')}
/>
<TextInput
ref="3"
style={styles.singleLine}
keyboardType="url"
placeholder="blurOnSubmit = false"
returnKeyType="next"
blurOnSubmit={false}
onSubmitEditing={() => this.focusNextField('4')}
/>
<TextInput
ref="4"
style={styles.singleLine}
keyboardType="numeric"
placeholder="blurOnSubmit = false"
blurOnSubmit={false}
onSubmitEditing={() => this.focusNextField('5')}
/>
<TextInput
ref="5"
style={styles.singleLine}
keyboardType="numbers-and-punctuation"
placeholder="blurOnSubmit = true"
returnKeyType="done"
/>
</View>
);
}
});
var styles = StyleSheet.create({
multiline: {
height: 60,
@ -286,6 +340,10 @@ exports.examples = [
return <View>{examples}</View>;
}
},
{
title: 'Blur on submit',
render: function(): ReactElement { return <BlurOnSubmitExample />; },
},
{
title: 'Event handling',
render: function(): ReactElement { return <TextEventsExample />; },

View File

@ -283,7 +283,6 @@ var TextInput = React.createClass({
* multiline fields. Note that for multiline fields, setting blurOnSubmit
* to true means that pressing return will blur the field and trigger the
* onSubmitEditing event instead of inserting a newline into the field.
* @platform ios
*/
blurOnSubmit: PropTypes.bool,
/**
@ -505,6 +504,7 @@ var TextInput = React.createClass({
onTextInput={this._onTextInput}
onEndEditing={this.props.onEndEditing}
onSubmitEditing={this.props.onSubmitEditing}
blurOnSubmit={this.props.blurOnSubmit}
onLayout={this.props.onLayout}
password={this.props.password || this.props.secureTextEntry}
placeholder={this.props.placeholder}

View File

@ -67,6 +67,7 @@ public class ReactEditText extends EditText {
private @Nullable TextWatcherDelegator mTextWatcherDelegator;
private int mStagedInputType;
private boolean mContainsImages;
private boolean mBlurOnSubmit;
private @Nullable SelectionWatcher mSelectionWatcher;
private final InternalKeyListener mKeyListener;
@ -84,6 +85,7 @@ public class ReactEditText extends EditText {
mNativeEventCount = 0;
mIsSettingTextFromJS = false;
mIsJSSettingFocus = false;
mBlurOnSubmit = true;
mListeners = null;
mTextWatcherDelegator = null;
mStagedInputType = getInputType();
@ -179,6 +181,14 @@ public class ReactEditText extends EditText {
mSelectionWatcher = selectionWatcher;
}
public void setBlurOnSubmit(boolean blurOnSubmit) {
mBlurOnSubmit = blurOnSubmit;
}
public boolean getBlurOnSubmit() {
return mBlurOnSubmit;
}
/*protected*/ int getStagedInputType() {
return mStagedInputType;
}

View File

@ -181,6 +181,11 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
}
}
@ReactProp(name = "blurOnSubmit", defaultBoolean = true)
public void setBlurOnSubmit(ReactEditText view, boolean blurOnSubmit) {
view.setBlurOnSubmit(blurOnSubmit);
}
@ReactProp(name = "placeholder")
public void setPlaceholder(ReactEditText view, @Nullable String placeholder) {
view.setHint(placeholder);
@ -493,7 +498,7 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
SystemClock.nanoTime(),
editText.getText().toString()));
}
return false;
return !editText.getBlurOnSubmit();
}
});
}