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({
|
var styles = StyleSheet.create({
|
||||||
multiline: {
|
multiline: {
|
||||||
height: 60,
|
height: 60,
|
||||||
|
@ -286,6 +340,10 @@ exports.examples = [
|
||||||
return <View>{examples}</View>;
|
return <View>{examples}</View>;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: 'Blur on submit',
|
||||||
|
render: function(): ReactElement { return <BlurOnSubmitExample />; },
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: 'Event handling',
|
title: 'Event handling',
|
||||||
render: function(): ReactElement { return <TextEventsExample />; },
|
render: function(): ReactElement { return <TextEventsExample />; },
|
||||||
|
|
|
@ -283,7 +283,6 @@ var TextInput = React.createClass({
|
||||||
* multiline fields. Note that for multiline fields, setting blurOnSubmit
|
* multiline fields. Note that for multiline fields, setting blurOnSubmit
|
||||||
* to true means that pressing return will blur the field and trigger the
|
* to true means that pressing return will blur the field and trigger the
|
||||||
* onSubmitEditing event instead of inserting a newline into the field.
|
* onSubmitEditing event instead of inserting a newline into the field.
|
||||||
* @platform ios
|
|
||||||
*/
|
*/
|
||||||
blurOnSubmit: PropTypes.bool,
|
blurOnSubmit: PropTypes.bool,
|
||||||
/**
|
/**
|
||||||
|
@ -505,6 +504,7 @@ var TextInput = React.createClass({
|
||||||
onTextInput={this._onTextInput}
|
onTextInput={this._onTextInput}
|
||||||
onEndEditing={this.props.onEndEditing}
|
onEndEditing={this.props.onEndEditing}
|
||||||
onSubmitEditing={this.props.onSubmitEditing}
|
onSubmitEditing={this.props.onSubmitEditing}
|
||||||
|
blurOnSubmit={this.props.blurOnSubmit}
|
||||||
onLayout={this.props.onLayout}
|
onLayout={this.props.onLayout}
|
||||||
password={this.props.password || this.props.secureTextEntry}
|
password={this.props.password || this.props.secureTextEntry}
|
||||||
placeholder={this.props.placeholder}
|
placeholder={this.props.placeholder}
|
||||||
|
|
|
@ -67,6 +67,7 @@ public class ReactEditText extends EditText {
|
||||||
private @Nullable TextWatcherDelegator mTextWatcherDelegator;
|
private @Nullable TextWatcherDelegator mTextWatcherDelegator;
|
||||||
private int mStagedInputType;
|
private int mStagedInputType;
|
||||||
private boolean mContainsImages;
|
private boolean mContainsImages;
|
||||||
|
private boolean mBlurOnSubmit;
|
||||||
private @Nullable SelectionWatcher mSelectionWatcher;
|
private @Nullable SelectionWatcher mSelectionWatcher;
|
||||||
private final InternalKeyListener mKeyListener;
|
private final InternalKeyListener mKeyListener;
|
||||||
|
|
||||||
|
@ -84,6 +85,7 @@ public class ReactEditText extends EditText {
|
||||||
mNativeEventCount = 0;
|
mNativeEventCount = 0;
|
||||||
mIsSettingTextFromJS = false;
|
mIsSettingTextFromJS = false;
|
||||||
mIsJSSettingFocus = false;
|
mIsJSSettingFocus = false;
|
||||||
|
mBlurOnSubmit = true;
|
||||||
mListeners = null;
|
mListeners = null;
|
||||||
mTextWatcherDelegator = null;
|
mTextWatcherDelegator = null;
|
||||||
mStagedInputType = getInputType();
|
mStagedInputType = getInputType();
|
||||||
|
@ -179,6 +181,14 @@ public class ReactEditText extends EditText {
|
||||||
mSelectionWatcher = selectionWatcher;
|
mSelectionWatcher = selectionWatcher;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public void setBlurOnSubmit(boolean blurOnSubmit) {
|
||||||
|
mBlurOnSubmit = blurOnSubmit;
|
||||||
|
}
|
||||||
|
|
||||||
|
public boolean getBlurOnSubmit() {
|
||||||
|
return mBlurOnSubmit;
|
||||||
|
}
|
||||||
|
|
||||||
/*protected*/ int getStagedInputType() {
|
/*protected*/ int getStagedInputType() {
|
||||||
return mStagedInputType;
|
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")
|
@ReactProp(name = "placeholder")
|
||||||
public void setPlaceholder(ReactEditText view, @Nullable String placeholder) {
|
public void setPlaceholder(ReactEditText view, @Nullable String placeholder) {
|
||||||
view.setHint(placeholder);
|
view.setHint(placeholder);
|
||||||
|
@ -493,7 +498,7 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
|
||||||
SystemClock.nanoTime(),
|
SystemClock.nanoTime(),
|
||||||
editText.getText().toString()));
|
editText.getText().toString()));
|
||||||
}
|
}
|
||||||
return false;
|
return !editText.getBlurOnSubmit();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue