From ef632242d82fa6cedf572ea0028a0aeb2ff6295b Mon Sep 17 00:00:00 2001 From: Shawn Dempsey Date: Mon, 26 Sep 2022 12:01:37 -0700 Subject: [PATCH 1/2] Refactor vertical scrollbar to only be visible when text content overflows --- .../TextInput/RCTTextInputViewConfig.js | 1 + Libraries/Components/TextInput/TextInput.js | 7 ++++ .../Multiline/RCTMultilineTextInputView.h | 1 + .../Multiline/RCTMultilineTextInputView.m | 35 +++++++++++++++++-- .../RCTMultilineTextInputViewManager.m | 1 + .../TextInput/TextInputExample.ios.js | 6 ++++ 6 files changed, 48 insertions(+), 3 deletions(-) diff --git a/Libraries/Components/TextInput/RCTTextInputViewConfig.js b/Libraries/Components/TextInput/RCTTextInputViewConfig.js index d757e17c5b02cd..6b57fc751eaf92 100644 --- a/Libraries/Components/TextInput/RCTTextInputViewConfig.js +++ b/Libraries/Components/TextInput/RCTTextInputViewConfig.js @@ -130,6 +130,7 @@ const RCTTextInputViewConfig = { blurOnSubmit: true, mostRecentEventCount: true, scrollEnabled: true, + hideVerticalScrollIndicator: true, selectionColor: {process: require('../../StyleSheet/processColor')}, contextMenuHidden: true, secureTextEntry: true, diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js index 2cf23652864afb..b2253e8b5d75be 100644 --- a/Libraries/Components/TextInput/TextInput.js +++ b/Libraries/Components/TextInput/TextInput.js @@ -331,6 +331,13 @@ type IOSProps = $ReadOnly<{| scrollEnabled?: ?boolean, // [TODO(macOS GH#774) + /** + * If `true`, hide vertical scrollbar on the underlying multiline scrollview + * The default value is `false`. + * @platform macos + */ + hideVerticalScrollIndicator?: ?boolean, + /** * If `false`, disables grammar-check. * @platform macos diff --git a/Libraries/Text/TextInput/Multiline/RCTMultilineTextInputView.h b/Libraries/Text/TextInput/Multiline/RCTMultilineTextInputView.h index 461750e1eea085..2bbc48b3a88cb2 100644 --- a/Libraries/Text/TextInput/Multiline/RCTMultilineTextInputView.h +++ b/Libraries/Text/TextInput/Multiline/RCTMultilineTextInputView.h @@ -13,6 +13,7 @@ NS_ASSUME_NONNULL_BEGIN #if TARGET_OS_OSX // [TODO(macOS GH#774) - (void)setReadablePasteBoardTypes:(NSArray *)readablePasteboardTypes; +@property (nonatomic, assign) BOOL hideVerticalScrollIndicator; #endif // ]TODO(macOS GH#774) @end diff --git a/Libraries/Text/TextInput/Multiline/RCTMultilineTextInputView.m b/Libraries/Text/TextInput/Multiline/RCTMultilineTextInputView.m index 5abf53b63f64d2..740837cadd6bea 100644 --- a/Libraries/Text/TextInput/Multiline/RCTMultilineTextInputView.m +++ b/Libraries/Text/TextInput/Multiline/RCTMultilineTextInputView.m @@ -28,6 +28,7 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge _backedTextInputView = [[RCTUITextView alloc] initWithFrame:self.bounds]; _backedTextInputView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; #if TARGET_OS_OSX // TODO(macOS GH#774) + self.hideVerticalScrollIndicator = NO; _scrollView = [[RCTUIScrollView alloc] initWithFrame:self.bounds]; // TODO(macOS ISS#3536887) _scrollView.backgroundColor = [RCTUIColor clearColor]; _scrollView.drawsBackground = NO; @@ -35,6 +36,7 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge _scrollView.hasHorizontalRuler = NO; _scrollView.hasVerticalRuler = NO; _scrollView.autoresizingMask = NSViewWidthSizable | NSViewHeightSizable; + [_scrollView setHasVerticalScroller:YES]; _backedTextInputView.verticallyResizable = YES; _backedTextInputView.horizontallyResizable = YES; @@ -102,6 +104,36 @@ - (void)setEnableFocusRing:(BOOL)enableFocusRing { - (void)setReadablePasteBoardTypes:(NSArray *)readablePasteboardTypes { [_backedTextInputView setReadablePasteBoardTypes:readablePasteboardTypes]; } + +- (BOOL)shouldShowVerticalScrollbar +{ + // Hide vertical scrollbar if explicity set to NO + if (self.hideVerticalScrollIndicator) { + return NO; + } + + CGSize textViewSize = [_backedTextInputView intrinsicContentSize]; + NSLog(@"content size: %@", NSStringFromCGSize(textViewSize)); + // Hide vertical scrollbar if attributed text overflows view + NSClipView *clipView = (NSClipView *)_scrollView.contentView; + if (textViewSize.height > clipView.bounds.size.height) { + return YES; + }; + + return NO; +} + +- (void)textInputDidChange +{ + [_scrollView setHasVerticalScroller:[self shouldShowVerticalScrollbar]]; +} + +- (void)setAttributedText:(NSAttributedString *)attributedText +{ + [_backedTextInputView setAttributedText:attributedText]; + [_scrollView setHasVerticalScroller:[self shouldShowVerticalScrollbar]]; +} + #endif // ]TODO(macOS GH#774) #pragma mark - UIScrollViewDelegate @@ -109,9 +141,6 @@ - (void)setReadablePasteBoardTypes:(NSArray *)readablePasteboa - (void)scrollViewDidScroll:(RCTUIScrollView *)scrollView // TODO(macOS ISS#3536887) { RCTDirectEventBlock onScroll = self.onScroll; -#if TARGET_OS_OSX // [TODO(macOS GH#774) - [_scrollView setHasVerticalScroller:YES]; -#endif // ]TODO(macOS GH#774) if (onScroll) { CGPoint contentOffset = scrollView.contentOffset; CGSize contentSize = scrollView.contentSize; diff --git a/Libraries/Text/TextInput/Multiline/RCTMultilineTextInputViewManager.m b/Libraries/Text/TextInput/Multiline/RCTMultilineTextInputViewManager.m index f652dc20ef303a..5be0df1d2ef866 100644 --- a/Libraries/Text/TextInput/Multiline/RCTMultilineTextInputViewManager.m +++ b/Libraries/Text/TextInput/Multiline/RCTMultilineTextInputViewManager.m @@ -24,6 +24,7 @@ - (RCTUIView *)view // TODO(macOS ISS#3536887) RCT_REMAP_OSX_VIEW_PROPERTY(dataDetectorTypes, backedTextInputView.enabledTextCheckingTypes, NSTextCheckingTypes) // TODO(macOS GH#774) #if TARGET_OS_OSX // [TODO(macOS GH#774) +RCT_EXPORT_VIEW_PROPERTY(hideVerticalScrollIndicator, BOOL) RCT_CUSTOM_VIEW_PROPERTY(pastedTypes, NSArray*, RCTUITextView) { NSArray *types = json ? [RCTConvert NSPasteboardTypeArray:json] : nil; diff --git a/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js b/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js index 90b7e5d4ed9fcf..49cdb7af710e0d 100644 --- a/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js +++ b/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js @@ -742,6 +742,12 @@ exports.examples = ([ multiline={true} style={styles.multiline} /> + Date: Wed, 28 Sep 2022 16:16:15 -0700 Subject: [PATCH 2/2] Remove NSLog! --- Libraries/Text/TextInput/Multiline/RCTMultilineTextInputView.m | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/Libraries/Text/TextInput/Multiline/RCTMultilineTextInputView.m b/Libraries/Text/TextInput/Multiline/RCTMultilineTextInputView.m index 740837cadd6bea..d4c69015ddc1a6 100644 --- a/Libraries/Text/TextInput/Multiline/RCTMultilineTextInputView.m +++ b/Libraries/Text/TextInput/Multiline/RCTMultilineTextInputView.m @@ -112,9 +112,8 @@ - (BOOL)shouldShowVerticalScrollbar return NO; } - CGSize textViewSize = [_backedTextInputView intrinsicContentSize]; - NSLog(@"content size: %@", NSStringFromCGSize(textViewSize)); // Hide vertical scrollbar if attributed text overflows view + CGSize textViewSize = [_backedTextInputView intrinsicContentSize]; NSClipView *clipView = (NSClipView *)_scrollView.contentView; if (textViewSize.height > clipView.bounds.size.height) { return YES;