Skip to content

ScrollView - Respect the shows<Horizontal | Vertical>ScrollIndicator props on macOS #1135

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 25, 2022
Merged

ScrollView - Respect the shows<Horizontal | Vertical>ScrollIndicator props on macOS #1135

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
520f69d
Respect the iOS scrollbar props on macOS
Saadnajmi Apr 25, 2022
a2591b2
Fix iOS build error + reduce upstream diff
Saadnajmi Apr 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 10 additions & 27 deletions React/Views/ScrollView/RCTScrollContentView.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,32 +18,25 @@
#import "RCTScrollView.h"

@implementation RCTScrollContentView
#if TARGET_OS_OSX // [TODO(macOS GH#774)
{
BOOL _hasHorizontalScroller;
BOOL _hasVerticalScroller;
}
#endif // ]TODO(macOS GH#774)

- (void)reactSetFrame:(CGRect)frame
{
[super reactSetFrame:frame];

#if !TARGET_OS_OSX // TODO(macOS GH#774)
RCTScrollView *scrollView = (RCTScrollView *)self.superview.superview;
#else // [TODO(macOS GH#774)
// macOS also has a NSClipView in its hierarchy
RCTScrollView *scrollView = (RCTScrollView *)self.superview.superview.superview;
#endif // ]TODO(macOS GH#774)

[super reactSetFrame:frame];

if (!scrollView) {
return;
}

RCTAssert([scrollView isKindOfClass:[RCTScrollView class]], @"Unexpected view hierarchy of RCTScrollView component.");

[scrollView updateContentSizeIfNeeded];

#if TARGET_OS_OSX // [TODO(macOS GH#774)
// On macOS scroll indicators may float over the content view like they do in iOS
// or depending on system preferences they may be outside of the content view
Expand All @@ -52,24 +45,14 @@ - (void)reactSetFrame:(CGRect)frame
// the contents will overflow causing the scroll indicators to appear unnecessarily.
NSScrollView *platformScrollView = [scrollView scrollView];
if ([platformScrollView scrollerStyle] == NSScrollerStyleLegacy) {
const BOOL nextHasHorizontalScroller = [platformScrollView hasHorizontalScroller];
const BOOL nextHasVerticalScroller = [platformScrollView hasVerticalScroller];

if (_hasHorizontalScroller != nextHasHorizontalScroller ||
_hasVerticalScroller != nextHasVerticalScroller) {

_hasHorizontalScroller = nextHasHorizontalScroller;
_hasVerticalScroller = nextHasVerticalScroller;

CGFloat horizontalScrollerHeight = _hasHorizontalScroller ? NSHeight([[platformScrollView horizontalScroller] frame]) : 0;
CGFloat verticalScrollerWidth = _hasVerticalScroller ? NSWidth([[platformScrollView verticalScroller] frame]) : 0;

RCTScrollContentLocalData *localData =
[[RCTScrollContentLocalData alloc]
initWithVerticalScrollerWidth:horizontalScrollerHeight
horizontalScrollerHeight:verticalScrollerWidth];
[[[scrollView bridge] uiManager] setLocalData:localData forView:self];
}
CGFloat horizontalScrollerHeight = [platformScrollView hasHorizontalScroller] ? NSHeight([[platformScrollView horizontalScroller] frame]) : 0;
CGFloat verticalScrollerWidth = [platformScrollView hasVerticalScroller] ? NSWidth([[platformScrollView verticalScroller] frame]) : 0;

RCTScrollContentLocalData *localData =
[[RCTScrollContentLocalData alloc]
initWithVerticalScrollerWidth:horizontalScrollerHeight
horizontalScrollerHeight:verticalScrollerWidth];
[[[scrollView bridge] uiManager] setLocalData:localData forView:self];
}
#endif // ]TODO(macOS GH#774)
}
Expand Down
6 changes: 1 addition & 5 deletions React/Views/ScrollView/RCTScrollView.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ - (instancetype)initWithFrame:(CGRect)frame
self.scrollEnabled = YES;
self.hasHorizontalScroller = YES;
self.hasVerticalScroller = YES;
self.autohidesScrollers = YES;
self.panGestureRecognizer = [[NSPanGestureRecognizer alloc] initWithTarget:self action:@selector(handleCustomPan:)];
#else // ]TODO(macOS GH#774)
[self.panGestureRecognizer addTarget:self action:@selector(handleCustomPan:)];
Expand Down Expand Up @@ -642,11 +643,6 @@ - (void)updateClippedSubviews
[self react_updateClippedSubviewsWithClipRect:clipRect relativeToView:clipView];
_lastClippedToRect = bounds;
}

#if TARGET_OS_OSX // [TODO(macOS GH#774)
[[self scrollView] setHasHorizontalScroller:[self isHorizontal:_scrollView]];
[[self scrollView] setHasVerticalScroller:[self isVertical:_scrollView]];
#endif // ]TODO(macOS GH#774)
}

#if TARGET_OS_OSX // [TODO(macOS GH#774)
Expand Down
58 changes: 29 additions & 29 deletions packages/rn-tester/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -542,8 +542,8 @@ SPEC CHECKSUMS:
boost-for-react-native: 8f7c9ecfe357664c072ffbe2432569667cbf1f1b
CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
DoubleConversion: ed15e075aa758ac0e4c1f8b830bd4e4d40d669e8
FBLazyVector: b04d46643b820872d517121ab99ee0fcc3652735
FBReactNativeSpec: 29fbafa21846fc05f16601462c2cdd85c8ab2327
FBLazyVector: 355530728b6d2dfc786d383ce7f01c75e38712a5
FBReactNativeSpec: 0fe35e4946c5cc5c30a43c5092992847a65f9a8b
Flipper: 30e8eeeed6abdc98edaf32af0cda2f198be4b733
Flipper-Boost-iOSX: fd1e2b8cbef7e662a122412d7ac5f5bea715403c
Flipper-DoubleConversion: 57ffbe81ef95306cc9e69c4aa3aeeeeb58a6a28c
Expand All @@ -558,34 +558,34 @@ SPEC CHECKSUMS:
libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b
RCT-Folly: 43adc9ce880eb76792f88c011773cb5c664c1419
RCTRequired: e6c345a47b0a8f4d7a3580eae3b7d0f2988df60d
RCTTypeSafety: 18b870bddb331c7e20adac11ee9583886a282627
React: 56de49d8da4553e37919863849a49c0ed2a465cf
React-callinvoker: 36a10abf76935c8b8e203df2358069e4e44a48d8
React-Core: ed44b2fc2eae9bae380a19331e0042057328ee9a
React-CoreModules: 0da1659db734216d777800d4de0eb4bd68af210a
React-cxxreact: f2d046b584dd2f39030af320162b630ffb7b9696
React-jsi: 0bf552b8e8e4be5ed595ebe8b1124b43360972f9
React-jsiexecutor: ae67abfcb813dac739f4dd84877d2fbd0474ec77
React-jsinspector: 445d4bfb2a4cc193700e1cd55104a3e19d8c30a8
React-logger: 55d2951923395c7cd0c7e293045acf087b035840
React-perflogger: c4a96a6dc927a184f5a2ecd2af63eda1e7f1f6d2
React-RCTActionSheet: 135b7376307a5e810a820460c7acdffb09572cce
React-RCTAnimation: d6ff61f5bf7c705ac756364103eb52b130a967a6
React-RCTBlob: d3e8bc6d1c03a58aaa254bf12723ad8a49c87bdd
React-RCTImage: 7c66a75aa705802914e45b5a018d7a1188393f43
React-RCTLinking: 3e91123397f6c0189521212ac4c5ed145749e2ab
React-RCTNetwork: 7da561efde67f2c69616e9366aa69fc9a3073729
React-RCTPushNotification: fed975816f88ff617355f6506c95c6730fa2489b
React-RCTSettings: 74f5795e9d771d22c78b7d70d1e86d7fccf56a91
React-RCTTest: 47c1358e4b9fe92ce3423b35cb09fb35f4d36d0a
React-RCTText: f2422acef4b6f05cf476f8281bb8e037376cb382
React-RCTVibration: 0e85b7f956d418743725c0ef58e3e4cdffa5bef7
React-runtimeexecutor: 48b53a0d27d87992792da7cf7717636bcc3f283b
RCTRequired: 4999f5d6e0b51b4924f851028b28f9225d74af42
RCTTypeSafety: c128e4858e53ac9137bd670603f4ac11f244d7a2
React: f864f87a1e992abac98fb81425acdadd5fc8c42f
React-callinvoker: 2b63496e2f1c1c84c73257d66c23668a487270b4
React-Core: d6f040e51b2435bcbd1856d0d991c6ff2bed98d4
React-CoreModules: b235ad7900a9d3cd28cb99f66a12a7c5aa37d6a4
React-cxxreact: 70aba2ac1b27c0ce01f5eb706fe16f6ecf87fd4f
React-jsi: eaf4bb7f5f00af328ffcafd09fd4bf74c6bc8d25
React-jsiexecutor: cdb977b883b5aedc873f10e04944ef33ba65b251
React-jsinspector: 8db1ac014c0d38a6673b0fdb83642d85fd4cb579
React-logger: f2c1ddea67269cb504924a5c07ae508a6409b987
React-perflogger: caaa9c52857ae620ef60bcf7f9b6411a16948872
React-RCTActionSheet: 8cf9c718ee9088bd380a1107cdcb7e638b7fc817
React-RCTAnimation: e799c0f4d7185323b5c8501e54ae004df40000f9
React-RCTBlob: 328da29bdc57bf6d374a5d4718a7da9220c104c1
React-RCTImage: 56acd81b3c1408eb8314373feb6ca29b274ede71
React-RCTLinking: e4f1793bf7a767d7c6fa78fdeb68b4cb7ad42619
React-RCTNetwork: 0c12d55775374c0bfa3d165f584b615290de0e14
React-RCTPushNotification: 29f85b459afbdf42403acb17626f3b143193146f
React-RCTSettings: c70de3a7ee87019e7f0cbc10e8abc0e6a77a2dbb
React-RCTTest: ece529f0bc614cc3940354d524ebe06d24ed2115
React-RCTText: e0423ccc4b50d83d54cf6a922e57a6b0113bb297
React-RCTVibration: 1de2bc1d267f5eef12bba7e2fab65c07d712f849
React-runtimeexecutor: 43e26ebbe2bddb0a6967638887c2f7e08869f06e
React-TurboModuleCxx-RNW: f2e32cbfced49190a61d66c993a8975de79a158a
React-TurboModuleCxx-WinRTPort: cf61ecb7e83a2f403c5abc286dd7482db38f4ae5
ReactCommon: 5c06a07ebe8e546f61fd4c749f3197a1ff9072c1
Yoga: 025b741b201dcf30e983cf2a3e59c28e65c18c59
React-TurboModuleCxx-WinRTPort: 41bff88d280cb2270c4980c8de1fb44f0bba908d
ReactCommon: b390476fd1380f1cd943187374ec2cacb834c3de
Yoga: ba56cce168e5cce27fc1c888d618bc1cac1ea1df
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

PODFILE CHECKSUM: c7a7110b242497f2bf323ba74caedb9ee61ee05e
Expand Down