Permalink
Browse files

Add TextInput.dataDetectorTypes prop.

Summary:
On iOS, if `TextInput` is used with prop `multiline={true}`, the backend view is `UITextView`. Sometimes we need `UITextView.dataDetectorTypes` to detect clickable url in the text view. The PR add this prop to `TextInput`, so we can use it like this:

`<TextInput`
`    defaultValue="Detect phone number: 88888888."`
`    editable={false}`
`    multiline={true}`
`    dataDetectorTypes="all"`
`    />`

Similar as #8743 .
Closes #8863

Differential Revision: D3648027

fbshipit-source-id: 987bd4f46fb5be74099b62988135a32115d9269c
  • Loading branch information...
1 parent bbe95c2 commit 15bf2c57b8d37d5588aca362266fd4bd45547c53 yueshuaijie committed with Facebook Github Bot 1 Jul 31, 2016
@@ -690,6 +690,13 @@ exports.examples = [
style={styles.multiline}
/>
<TextInput
+ defaultValue="uneditable multiline text input with phone number detection: 88888888."
+ editable={false}
+ multiline={true}
+ style={styles.multiline}
+ dataDetectorTypes="phoneNumber"
+ />
+ <TextInput
placeholder="multiline with children"
multiline={true}
enablesReturnKeyAutomatically={true}
@@ -47,6 +47,15 @@ if (Platform.OS === 'android') {
type Event = Object;
+const DataDetectorTypes = [
+ 'phoneNumber',
+ 'link',
+ 'address',
+ 'calendarEvent',
+ 'none',
+ 'all',
+];
+
/**
* A foundational component for inputting text into the app via a
* keyboard. Props provide configurability for several features, such as
@@ -441,6 +450,29 @@ const TextInput = React.createClass({
* @platform android
*/
inlineImagePadding: PropTypes.number,
+
+ /**
+ * Determines the types of data converted to clickable URLs in the text input.
+ * Only valid if `multiline={true}` and `editable={false}`.
+ * By default no data types are detected.
+ *
+ * You can provide one type or an array of many types.
+ *
+ * Possible values for `dataDetectorTypes` are:
+ *
+ * - `'phoneNumber'`
+ * - `'link'`
+ * - `'address'`
+ * - `'calendarEvent'`
+ * - `'none'`
+ * - `'all'`
+ *
+ * @platform ios
+ */
+ dataDetectorTypes: PropTypes.oneOfType([
+ PropTypes.oneOf(DataDetectorTypes),
+ PropTypes.arrayOf(PropTypes.oneOf(DataDetectorTypes)),
+ ]),
},
/**
@@ -596,6 +628,7 @@ const TextInput = React.createClass({
onTextInput={this._onTextInput}
onSelectionChangeShouldSetResponder={emptyFunction.thatReturnsTrue}
text={this._getText()}
+ dataDetectorTypes={this.props.dataDetectorTypes}
/>;
}
@@ -62,6 +62,7 @@ - (UIView *)view
view.font = [RCTConvert UIFont:view.font withFamily:json ?: defaultView.font.familyName];
}
RCT_EXPORT_VIEW_PROPERTY(mostRecentEventCount, NSInteger)
+RCT_REMAP_VIEW_PROPERTY(dataDetectorTypes, textView.dataDetectorTypes, UIDataDetectorTypes)
- (RCTViewManagerUIBlock)uiBlockToAmendWithShadowView:(RCTShadowView *)shadowView
{

0 comments on commit 15bf2c5

Please sign in to comment.