Permalink
Browse files

Implement 'dataDetectorTypes' prop

Summary:
When text is rendered in `WKWebView` WebKit component, the component itself can detect things like phone numbers, flight numbers, links, etc. and render them with additional functionality.

For example, when the text `apple.com` is detected, if the `link` data detector type is enabled, the web view will actually render a link that takes the user to the Apple home page.

In this diff, I implement the `dataDetectorTypes` prop. The data detector types supported are:
1. phoneNumber
1. link
1. address
1. calendarEvent
1. trackingNumber
1. flightNumber
1. lookupSuggestion

These enums are documented in the [[ https://developer.apple.com/documentation/webkit/wkdatadetectortypes | WKDataDetectorTypes docs ]].

Reviewed By: shergin

Differential Revision: D6392546

fbshipit-source-id: 4dd373f0ac52f898163cd959eeef6672e55b42a6
  • Loading branch information...
RSNara authored and kelset committed Aug 16, 2018
1 parent ee971a7 commit d29c2534b8c51b45f64477823f3d4b2d7101e187
@@ -18,12 +18,14 @@ const RCTWKWebView = requireNativeComponent('RCTWKWebView');
type RCTWKWebViewProps = {
allowsInlineMediaPlayback?: boolean,
mediaPlaybackRequiresUserAction?: boolean,
dataDetectorTypes?: boolean,
};
class WKWebView extends React.Component<RCTWKWebViewProps> {
componentWillReceiveProps(nextProps: RCTWKWebViewProps) {
this.showRedboxOnPropChanges(nextProps, 'allowsInlineMediaPlayback');
this.showRedboxOnPropChanges(nextProps, 'mediaPlaybackRequiresUserAction');
this.showRedboxOnPropChanges(nextProps, 'dataDetectorTypes');
}
showRedboxOnPropChanges(nextProps: RCTWKWebViewProps, propName: string) {
View
@@ -15,6 +15,7 @@
#import <React/RCTPointerEvents.h>
#import <React/RCTTextDecorationLineType.h>
#import <yoga/Yoga.h>
#import <WebKit/WebKit.h>
/**
* This class provides a collection of conversion functions for mapping
@@ -68,6 +69,7 @@ typedef NSURL RCTFileURL;
+ (UIReturnKeyType)UIReturnKeyType:(id)json;
#if !TARGET_OS_TV
+ (UIDataDetectorTypes)UIDataDetectorTypes:(id)json;
+ (WKDataDetectorTypes)WKDataDetectorTypes:(id)json;
#endif
+ (UIViewContentMode)UIViewContentMode:(id)json;
View
@@ -361,6 +361,18 @@ + (NSLocale *)NSLocale:(id)json
@"none": @(UIDataDetectorTypeNone),
@"all": @(UIDataDetectorTypeAll),
}), UIDataDetectorTypePhoneNumber, unsignedLongLongValue)
RCT_MULTI_ENUM_CONVERTER(WKDataDetectorTypes, (@{
@"phoneNumber": @(WKDataDetectorTypePhoneNumber),
@"link": @(WKDataDetectorTypeLink),
@"address": @(WKDataDetectorTypeAddress),
@"calendarEvent": @(WKDataDetectorTypeCalendarEvent),
@"trackingNumber": @(WKDataDetectorTypeTrackingNumber),
@"flightNumber": @(WKDataDetectorTypeFlightNumber),
@"lookupSuggestion": @(WKDataDetectorTypeLookupSuggestion),
@"none": @(WKDataDetectorTypeNone),
@"all": @(WKDataDetectorTypeAll),
}), WKDataDetectorTypePhoneNumber, unsignedLongLongValue)
#endif
RCT_ENUM_CONVERTER(UIKeyboardAppearance, (@{
@@ -8,6 +8,7 @@
*/
#import <React/RCTView.h>
#import <WebKit/WebKit.h>
@class RCTWKWebView;
@@ -30,6 +31,7 @@ shouldStartLoadForRequest:(NSMutableDictionary<NSString *, id> *)request
@property (nonatomic, assign) BOOL allowsInlineMediaPlayback;
@property (nonatomic, assign) BOOL bounces;
@property (nonatomic, assign) BOOL mediaPlaybackRequiresUserAction;
@property (nonatomic, assign) WKDataDetectorTypes dataDetectorTypes;
- (void)postMessage:(NSString *)message;
- (void)injectJavaScript:(NSString *)script;
@@ -1,5 +1,4 @@
#import "RCTWKWebView.h"
#import <WebKit/WebKit.h>
#import <React/RCTConvert.h>
#import "RCTAutoInsetsProtocol.h"
@@ -43,6 +42,7 @@ - (void)didMoveToWindow
wkWebViewConfig.mediaTypesRequiringUserActionForPlayback = _mediaPlaybackRequiresUserAction
? WKAudiovisualMediaTypeAll
: WKAudiovisualMediaTypeNone;
wkWebViewConfig.dataDetectorTypes = _dataDetectorTypes;
_webView = [[WKWebView alloc] initWithFrame:self.bounds configuration: wkWebViewConfig];
_webView.scrollView.delegate = self;
@@ -29,6 +29,8 @@ - (UIView *)view
RCT_EXPORT_VIEW_PROPERTY(injectedJavaScript, NSString)
RCT_EXPORT_VIEW_PROPERTY(allowsInlineMediaPlayback, BOOL)
RCT_EXPORT_VIEW_PROPERTY(mediaPlaybackRequiresUserAction, BOOL)
RCT_EXPORT_VIEW_PROPERTY(dataDetectorTypes, WKDataDetectorTypes)
/**
* Expose methods to enable messaging the webview.
*/
@@ -63,8 +63,8 @@ - (UIView *)view
RCT_EXPORT_METHOD(goForward:(nonnull NSNumber *)reactTag)
{
[self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
id view = viewRegistry[reactTag];
[self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, RCTWebView *> *viewRegistry) {
RCTWebView *view = viewRegistry[reactTag];
if (![view isKindOfClass:[RCTWebView class]]) {
RCTLogError(@"Invalid view returned from registry, expecting RCTWebView, got: %@", view);
} else {

0 comments on commit d29c253

Please sign in to comment.