From 97716a1392e7a53f59eb4a019719d8a81282d6d3 Mon Sep 17 00:00:00 2001 From: Shawn Dempsey Date: Tue, 17 Jan 2023 15:37:25 -0800 Subject: [PATCH 1/3] Expose scrollview indicator overlay style prop --- Libraries/Components/ScrollView/ScrollView.js | 6 ++++ .../ScrollView/ScrollViewViewConfig.js | 1 + React/Views/ScrollView/RCTScrollView.h | 1 + React/Views/ScrollView/RCTScrollView.m | 9 ++++++ React/Views/ScrollView/RCTScrollViewManager.m | 1 + .../examples/ScrollView/ScrollViewExample.js | 29 +++++++++++++++++++ 6 files changed, 47 insertions(+) diff --git a/Libraries/Components/ScrollView/ScrollView.js b/Libraries/Components/ScrollView/ScrollView.js index 973bf0eb917699..c6ee9683bb9b39 100644 --- a/Libraries/Components/ScrollView/ScrollView.js +++ b/Libraries/Components/ScrollView/ScrollView.js @@ -480,6 +480,12 @@ export type Props = $ReadOnly<{| * instead of vertically in a column. The default value is false. */ horizontal?: ?boolean, + /** + * When true, the scroll view's inidicator style is an overlay + * that does not take up content view space + * https://developer.apple.com/documentation/appkit/nsscrollerstyle/nsscrollerstyleoverlay + */ + hasOverlayStyleIndicator?: ?boolean, /** * If sticky headers should stick at the bottom instead of the top of the * ScrollView. This is usually used with inverted ScrollViews. diff --git a/Libraries/Components/ScrollView/ScrollViewViewConfig.js b/Libraries/Components/ScrollView/ScrollViewViewConfig.js index 9fd5b6f6114f82..f289966b6ed32a 100644 --- a/Libraries/Components/ScrollView/ScrollViewViewConfig.js +++ b/Libraries/Components/ScrollView/ScrollViewViewConfig.js @@ -46,6 +46,7 @@ const ScrollViewViewConfig = { fadingEdgeLength: true, indicatorStyle: true, inverted: true, + hasOverlayStyleIndicator: true, keyboardDismissMode: true, maintainVisibleContentPosition: true, maximumZoomScale: true, diff --git a/React/Views/ScrollView/RCTScrollView.h b/React/Views/ScrollView/RCTScrollView.h index b624a56908a043..ae411bcb12160b 100644 --- a/React/Views/ScrollView/RCTScrollView.h +++ b/React/Views/ScrollView/RCTScrollView.h @@ -55,6 +55,7 @@ @property (nonatomic, assign) BOOL snapToEnd; @property (nonatomic, copy) NSString *snapToAlignment; @property (nonatomic, assign) BOOL inverted; +@property (nonatomic, assign) BOOL hasOverlayStyleIndicator; // NOTE: currently these event props are only declared so we can export the // event names to JS - we don't call the blocks directly because scroll events diff --git a/React/Views/ScrollView/RCTScrollView.m b/React/Views/ScrollView/RCTScrollView.m index 683c168adec155..1eed1efdc0e8f9 100644 --- a/React/Views/ScrollView/RCTScrollView.m +++ b/React/Views/ScrollView/RCTScrollView.m @@ -541,6 +541,15 @@ - (void)setInverted:(BOOL)inverted _onInvertedDidChange(@{}); } } + +- (void)setHasOverlayStyleIndicator:(BOOL)hasOverlayStyle +{ + if (hasOverlayStyle == true) { + self.scrollView.scrollerStyle = NSScrollerStyleOverlay; + } else { + self.scrollView.scrollerStyle = NSScrollerStyleLegacy; + } +} #endif // macOS] RCT_NOT_IMPLEMENTED(-(instancetype)initWithFrame : (CGRect)frame) diff --git a/React/Views/ScrollView/RCTScrollViewManager.m b/React/Views/ScrollView/RCTScrollViewManager.m index 7720c1681b3a24..07df5bd53bd8ee 100644 --- a/React/Views/ScrollView/RCTScrollViewManager.m +++ b/React/Views/ScrollView/RCTScrollViewManager.m @@ -102,6 +102,7 @@ - (RCTPlatformView *)view // [macOS] RCT_EXPORT_OSX_VIEW_PROPERTY(onInvertedDidChange, RCTDirectEventBlock) // [macOS] RCT_EXPORT_OSX_VIEW_PROPERTY(onPreferredScrollerStyleDidChange, RCTDirectEventBlock) // [macOS] RCT_EXPORT_VIEW_PROPERTY(inverted, BOOL) +RCT_EXPORT_VIEW_PROPERTY(hasOverlayStyleIndicator, BOOL) #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 130000 /* __IPHONE_13_0 */ RCT_EXPORT_VIEW_PROPERTY(automaticallyAdjustsScrollIndicatorInsets, BOOL) #endif diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js index 6077bd8540fb88..633f587a2003a6 100644 --- a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js +++ b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js @@ -500,6 +500,14 @@ if (Platform.OS === 'macos') { render: function (): React.Node { return ; }, + }, + { + title: ' (hasOverlayStyleIndicator = true/false)\n', + description: + "You can display 's indicator using overlay style", + render: function (): React.Node { + return ; + }, }); } @@ -531,6 +539,27 @@ const InvertedContentExample = () => { ); }; + +const ScrollIndicatorOverlayExample = () => { + const [hasOverlayStyleIndicator, setHasOverlayStyleIndicator] = useState(true); + return ( + + + {ITEMS.map(createItemRow)} + +