From 08cc600eb8c3d7dc5e0ccb54f5bcaa66dca8984f Mon Sep 17 00:00:00 2001 From: Jian Wei Date: Thu, 7 Mar 2019 17:27:29 +0800 Subject: [PATCH] feat(WKWebView): add prop `directionalLockEnabled` for iOS (#389) --- docs/Reference.md | 12 ++++++++++++ ios/RNCUIWebViewManager.m | 1 + ios/RNCWKWebView.h | 1 + ios/RNCWKWebView.m | 8 ++++++++ ios/RNCWKWebViewManager.m | 4 ++++ js/WebView.ios.js | 1 + js/WebViewTypes.js | 7 +++++++ typings/index.d.ts | 7 +++++++ 8 files changed, 41 insertions(+) diff --git a/docs/Reference.md b/docs/Reference.md index c9aa89c..ab66728 100644 --- a/docs/Reference.md +++ b/docs/Reference.md @@ -36,6 +36,7 @@ This document lays out the current public properties and methods for the React N - [`contentInset`](Reference.md#contentinset) - [`dataDetectorTypes`](Reference.md#datadetectortypes) - [`scrollEnabled`](Reference.md#scrollenabled) +- [`directionalLockEnabled`](Reference.md#directionalLockEnabled) - [`geolocationEnabled`](Reference.md#geolocationenabled) - [`allowUniversalAccessFromFileURLs`](Reference.md#allowUniversalAccessFromFileURLs) - [`useWebKit`](Reference.md#usewebkit) @@ -700,6 +701,17 @@ Boolean value that determines whether scrolling is enabled in the `WebView`. The --- +### `directionalLockEnabled` + +A Boolean value that determines whether scrolling is disabled in a particular direction. +The default value is `true`. + +| Type | Required | Platform | +| ---- | -------- | -------- | +| bool | No | iOS | + +--- + ### `showsHorizontalScrollIndicator` Boolean value that determines whether a horizontal scroll indicator is shown in the `WebView`. The default value is `true`. diff --git a/ios/RNCUIWebViewManager.m b/ios/RNCUIWebViewManager.m index 0a980c9..f78355a 100644 --- a/ios/RNCUIWebViewManager.m +++ b/ios/RNCUIWebViewManager.m @@ -43,6 +43,7 @@ RCT_REMAP_VIEW_PROPERTY(mediaPlaybackRequiresUserAction, _webView.mediaPlaybackR RCT_REMAP_VIEW_PROPERTY(dataDetectorTypes, _webView.dataDetectorTypes, UIDataDetectorTypes) RCT_REMAP_VIEW_PROPERTY(showsHorizontalScrollIndicator, _webView.scrollView.showsHorizontalScrollIndicator, BOOL) RCT_REMAP_VIEW_PROPERTY(showsVerticalScrollIndicator, _webView.scrollView.showsVerticalScrollIndicator, BOOL) +RCT_REMAP_VIEW_PROPERTY(directionalLockEnabled, _webView.scrollView.directionalLockEnabled, BOOL) RCT_EXPORT_METHOD(goBack:(nonnull NSNumber *)reactTag) { diff --git a/ios/RNCWKWebView.h b/ios/RNCWKWebView.h index a11b5e5..437d9bd 100644 --- a/ios/RNCWKWebView.h +++ b/ios/RNCWKWebView.h @@ -45,6 +45,7 @@ @property (nonatomic, assign) BOOL allowsLinkPreview; @property (nonatomic, assign) BOOL showsHorizontalScrollIndicator; @property (nonatomic, assign) BOOL showsVerticalScrollIndicator; +@property (nonatomic, assign) BOOL directionalLockEnabled; + (void)setClientAuthenticationCredential:(nullable NSURLCredential*)credential; - (void)postMessage:(NSString *)message; diff --git a/ios/RNCWKWebView.m b/ios/RNCWKWebView.m index 2fe544c..04c7d78 100644 --- a/ios/RNCWKWebView.m +++ b/ios/RNCWKWebView.m @@ -51,6 +51,7 @@ static NSURLCredential* clientAuthenticationCredential; _scrollEnabled = YES; _showsHorizontalScrollIndicator = YES; _showsVerticalScrollIndicator = YES; + _directionalLockEnabled = YES; _automaticallyAdjustContentInsets = YES; _contentInset = UIEdgeInsetsZero; } @@ -135,6 +136,7 @@ static NSURLCredential* clientAuthenticationCredential; _webView.scrollView.bounces = _bounces; _webView.scrollView.showsHorizontalScrollIndicator = _showsHorizontalScrollIndicator; _webView.scrollView.showsVerticalScrollIndicator = _showsVerticalScrollIndicator; + _webView.scrollView.directionalLockEnabled = _directionalLockEnabled; _webView.allowsLinkPreview = _allowsLinkPreview; [_webView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionOld | NSKeyValueObservingOptionNew context:nil]; _webView.allowsBackForwardNavigationGestures = _allowsBackForwardNavigationGestures; @@ -351,6 +353,12 @@ static NSURLCredential* clientAuthenticationCredential; } } +- (void)setDirectionalLockEnabled:(BOOL)directionalLockEnabled +{ + _directionalLockEnabled = directionalLockEnabled; + _webView.scrollView.directionalLockEnabled = directionalLockEnabled; +} + - (void)setShowsHorizontalScrollIndicator:(BOOL)showsHorizontalScrollIndicator { _showsHorizontalScrollIndicator = showsHorizontalScrollIndicator; diff --git a/ios/RNCWKWebViewManager.m b/ios/RNCWKWebViewManager.m index 009bfcf..bc58bd2 100644 --- a/ios/RNCWKWebViewManager.m +++ b/ios/RNCWKWebViewManager.m @@ -85,6 +85,10 @@ RCT_CUSTOM_VIEW_PROPERTY(decelerationRate, CGFloat, RNCWKWebView) { view.decelerationRate = json == nil ? UIScrollViewDecelerationRateNormal : [RCTConvert CGFloat: json]; } +RCT_CUSTOM_VIEW_PROPERTY(directionalLockEnabled, BOOL, RNCWKWebView) { + view.directionalLockEnabled = json == nil ? true : [RCTConvert BOOL: json]; +} + RCT_CUSTOM_VIEW_PROPERTY(showsHorizontalScrollIndicator, BOOL, RNCWKWebView) { view.showsHorizontalScrollIndicator = json == nil ? true : [RCTConvert BOOL: json]; } diff --git a/js/WebView.ios.js b/js/WebView.ios.js index 1a85f93..e8a4279 100644 --- a/js/WebView.ios.js +++ b/js/WebView.ios.js @@ -286,6 +286,7 @@ class WebView extends React.Component { allowsLinkPreview={this.props.allowsLinkPreview} showsHorizontalScrollIndicator={this.props.showsHorizontalScrollIndicator} showsVerticalScrollIndicator={this.props.showsVerticalScrollIndicator} + directionalLockEnabled={this.props.directionalLockEnabled} {...nativeConfig.props} /> ); diff --git a/js/WebViewTypes.js b/js/WebViewTypes.js index 7b79e72..f7307b8 100644 --- a/js/WebViewTypes.js +++ b/js/WebViewTypes.js @@ -253,6 +253,13 @@ export type IOSWebViewProps = $ReadOnly<{| * @platform ios */ allowsLinkPreview?: ?boolean, + + /** + * A Boolean value that determines whether scrolling is disabled in a particular direction. + * The default value is `true`. + * @platform ios + */ + directionalLockEnabled?: ?boolean, |}>; export type AndroidWebViewProps = $ReadOnly<{| diff --git a/typings/index.d.ts b/typings/index.d.ts index 4965a6a..1d0c69e 100644 --- a/typings/index.d.ts +++ b/typings/index.d.ts @@ -151,6 +151,13 @@ export interface IOSWebViewProps { */ scrollEnabled?: boolean; + /** + * A Boolean value that determines whether scrolling is disabled in a particular direction. + * The default value is `true`. + * @platform ios + */ + directionalLockEnabled?: boolean; + /** * If the value of this property is true, the scroll view stops on multiples * of the scroll view’s bounds when the user scrolls.