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:
parent
f827f7b79a
commit
ab12189f87
|
@ -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 />; },
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue