iOS: Introduce spellCheck prop to TextInput

Summary:
This exposes iOS's spellCheckingType functionality to JavaScript. The native functionality is a three state enum. It gets exposed to JavaScript as a boolean. The initial value and JS null map to the third state.

An alternative design for this API would have been to expose a three state enum to JavaScript:
  - "on" which maps to UITextSpellCheckingTypeYes
  - "off" which maps to UITextSpellCheckingTypeNo
  - "auto" (default) which maps to UITextSpellCheckingTypeDefault

For consistency, I decided to use the same API design as spellCheck. We don't have many options for fixing spellCheck in #11055 without introducing a breaking change.

**Test plan (required)**

Verified that switching `spellCheck` between `true`, `false`, and `null` all work correctly in single line and multiline `TextInputs`.
Closes https://github.com/facebook/react-native/pull/11056

Differential Revision: D4232802

Pulled By: javache

fbshipit-source-id: 79e03307fa6a30a169f7e2fd0ec5ac826663e7c1
This commit is contained in:
Adam Comella 2016-11-25 04:20:21 -08:00 committed by Facebook Github Bot
parent 9c7952d9e1
commit 0e55f5b26d
7 changed files with 28 additions and 0 deletions

View File

@ -194,6 +194,12 @@ const TextInput = React.createClass({
* If `false`, disables auto-correct. The default value is `true`.
*/
autoCorrect: PropTypes.bool,
/**
* If `false`, disables spell-check style (i.e. red underlines).
* The default value is inherited from `autoCorrect`.
* @platform ios
*/
spellCheck: PropTypes.bool,
/**
* If `true`, focuses the input on `componentDidMount`.
* The default value is `false`.

View File

@ -12,5 +12,6 @@
@interface RCTConvert (Text)
+ (UITextAutocorrectionType)UITextAutocorrectionType:(id)json;
+ (UITextSpellCheckingType)UITextSpellCheckingType:(id)json;
@end

View File

@ -19,4 +19,12 @@
UITextAutocorrectionTypeNo;
}
+ (UITextSpellCheckingType)UITextSpellCheckingType:(id)json
{
return
json == nil ? UITextSpellCheckingTypeDefault :
[RCTConvert BOOL:json] ? UITextSpellCheckingTypeYes :
UITextSpellCheckingTypeNo;
}
@end

View File

@ -78,6 +78,7 @@ RCT_EXPORT_MODULE()
RCT_EXPORT_VIEW_PROPERTY(caretHidden, BOOL)
RCT_REMAP_VIEW_PROPERTY(autoCorrect, autocorrectionType, UITextAutocorrectionType)
RCT_REMAP_VIEW_PROPERTY(spellCheck, spellCheckingType, UITextSpellCheckingType)
RCT_REMAP_VIEW_PROPERTY(editable, enabled, BOOL)
RCT_EXPORT_VIEW_PROPERTY(placeholder, NSString)
RCT_EXPORT_VIEW_PROPERTY(placeholderTextColor, UIColor)

View File

@ -17,6 +17,7 @@
@interface RCTTextView : RCTView <UITextViewDelegate>
@property (nonatomic, assign) UITextAutocorrectionType autocorrectionType;
@property (nonatomic, assign) UITextSpellCheckingType spellCheckingType;
@property (nonatomic, assign) BOOL blurOnSubmit;
@property (nonatomic, assign) BOOL clearTextOnFocus;
@property (nonatomic, assign) BOOL selectTextOnFocus;

View File

@ -530,6 +530,16 @@ static NSAttributedString *removeReactTagFromString(NSAttributedString *string)
return _textView.autocorrectionType;
}
- (void)setSpellCheckingType:(UITextSpellCheckingType)spellCheckingType
{
_textView.spellCheckingType = spellCheckingType;
}
- (UITextSpellCheckingType)spellCheckingType
{
return _textView.spellCheckingType;
}
- (BOOL)textViewShouldBeginEditing:(UITextView *)textView
{
if (_selectTextOnFocus) {

View File

@ -28,6 +28,7 @@ RCT_EXPORT_MODULE()
RCT_REMAP_VIEW_PROPERTY(autoCapitalize, textView.autocapitalizationType, UITextAutocapitalizationType)
RCT_REMAP_VIEW_PROPERTY(autoCorrect, autocorrectionType, UITextAutocorrectionType)
RCT_REMAP_VIEW_PROPERTY(spellCheck, spellCheckingType, UITextSpellCheckingType)
RCT_EXPORT_VIEW_PROPERTY(blurOnSubmit, BOOL)
RCT_EXPORT_VIEW_PROPERTY(clearTextOnFocus, BOOL)
RCT_REMAP_VIEW_PROPERTY(color, textView.textColor, UIColor)