Add support for macOS legacy scroller system setting. (#262)

* Add support for macOS legacy scroller system setting. * Add missing comment. Whitespace cleanup * Add locals * Fixed ] in comment
microsoft · Mar 23, 2020 · d604a2d · d604a2d
1 parent 08a90a0
commit d604a2d
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 17 deletions.
diff --git a/Libraries/Components/ScrollView/ScrollView.js b/Libraries/Components/ScrollView/ScrollView.js
@@ -569,6 +569,7 @@ export type Props = $ReadOnly<{|
 |}>;
 
 type State = {|
+  contentKey: number, // TODO(macOS ISS#2323203)
   layoutHeight: ?number,
   ...ScrollResponderState,
 |};
@@ -683,6 +684,7 @@ class ScrollView extends React.Component<Props, State> {
   _headerLayoutYs: Map<string, number> = new Map();
 
   state = {
+    contentKey: 1, // TODO(macOS ISS#2323203)
     layoutHeight: null,
     ...ScrollResponder.Mixin.scrollResponderMixinGetInitialState(),
   };
@@ -956,6 +958,10 @@ class ScrollView extends React.Component<Props, State> {
       x: Math.max(0, Math.min(maxX, newOffset.x)),
       y: Math.max(0, Math.min(maxY, newOffset.y)),
     });
+  };
+
+  _handlePreferredScrollerStyleDidChange = (event: ScrollEvent) => {
+    this.setState({contentKey: this.state.contentKey + 1});
   }; // ]TODO(macOS ISS#2323203)
 
   _handleScroll = (e: ScrollEvent) => {
@@ -1107,6 +1113,7 @@ class ScrollView extends React.Component<Props, State> {
             ? false
             : this.props.removeClippedSubviews
         }
+        key={this.state.contentKey} // TODO(macOS ISS#2323203)
         collapsable={false}>
         {children}
       </ScrollContentContainerViewClass>
@@ -1138,6 +1145,8 @@ class ScrollView extends React.Component<Props, State> {
       // bubble up from TextInputs
       onContentSizeChange: null,
       onScrollKeyDown: this._handleKeyDown, // TODO(macOS ISS#2323203)
+      onPreferredScrollerStyleDidChange: this
+        ._handlePreferredScrollerStyleDidChange, // TODO(macOS ISS#2323203)
       onLayout: this._handleLayout,
       onMomentumScrollBegin: this._scrollResponder
         .scrollResponderHandleMomentumScrollBegin,

diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js
@@ -57,13 +57,19 @@ type DirectEventProps = $ReadOnly<{|
    */
   onDoubleClick?: ?(event: SyntheticEvent<{}>) => mixed, // TODO(macOS ISS#2323203)
 
+  /**
+   * This event is fired when the system's preferred scroller style changes.
+   * The `preferredScrollerStyle` key will be `legacy` or `overlay`.
+   */
+  onPreferredScrollerStyleDidChange?: ?(event: ScrollEvent) => mixed, // TODO(macOS ISS#2323203)
+
   /**
    * When `acceptsKeyboardFocus` is true, the system will try to invoke this function
    * when the user performs accessibility key down gesture.
    */
   onScrollKeyDown?: ?(event: ScrollEvent) => mixed, // TODO(macOS ISS#2323203)
 
-  onMouseEnter?: (event: SyntheticEvent<{}>) => mixed, // [TODO(macOS ISS#2323203)
+  onMouseEnter?: (event: SyntheticEvent<{}>) => mixed, // TODO(macOS ISS#2323203)
 
   /**
    * Invoked on mount and layout changes with:

diff --git a/Libraries/Lists/VirtualizedList.js b/Libraries/Lists/VirtualizedList.js
@@ -1104,7 +1104,9 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       keyEventHandler = this.props.enableSelectionOnKeyPress
         ? this._handleKeyDown
         : null;
-    } // ]TODO(macOS ISS#2323203)
+    }
+    const preferredScrollerStyleDidChangeHandler = this.props
+      .onPreferredScrollerStyleDidChange; // ]TODO(macOS ISS#2323203)
     const onRefresh = props.onRefresh;
     if (this._isNestedWithSameOrientation()) {
       // $FlowFixMe - Typing ReactNativeComponent revealed errors
@@ -1121,6 +1123,9 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         <ScrollView
           {...props}
           onScrollKeyDown={keyEventHandler} // TODO(macOS ISS#2323203)
+          onPreferredScrollerStyleDidChange={
+            preferredScrollerStyleDidChangeHandler
+          } // TODO(macOS ISS#2323203)
           refreshControl={
             props.refreshControl == null ? (
               <RefreshControl
@@ -1135,11 +1140,18 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         />
       );
     } else {
-      // $FlowFixMe Invalid prop usage
-      return <ScrollView {...props} onScrollKeyDown={keyEventHandler} />; // TODO(macOS ISS#2323203)
+      return (
+        // $FlowFixMe Invalid prop usage
+        <ScrollView
+          {...props}
+          onScrollKeyDown={keyEventHandler}
+          onPreferredScrollerStyleDidChange={
+            preferredScrollerStyleDidChangeHandler
+          }
+        />
+      ); // TODO(macOS ISS#2323203)
     }
   };
-
   _onCellLayout(e, cellKey, index) {
     const layout = e.nativeEvent.layout;
     const next = {

diff --git a/Libraries/Lists/VirtualizedSectionList.js b/Libraries/Lists/VirtualizedSectionList.js
@@ -345,12 +345,17 @@ class VirtualizedSectionList<
       keyEventHandler = this.props.enableSelectionOnKeyPress
         ? this._handleKeyDown
         : null;
-    } // ]TODO(macOS ISS#2323203)
+    }
+    const preferredScrollerStyleDidChangeHandler = this.props
+      .onPreferredScrollerStyleDidChange; // ]TODO(macOS ISS#2323203)
     return (
       <VirtualizedList
         {...this.state.childProps}
         ref={this._captureRef}
         onScrollKeyDown={keyEventHandler}
+        onPreferredScrollerStyleDidChange={
+          preferredScrollerStyleDidChangeHandler
+        }
         {...this.state.selectedRowIndexPath}
       /> // TODO(macOS ISS#2323203)
     );

diff --git a/Libraries/Types/CoreEventTypes.js b/Libraries/Types/CoreEventTypes.js
@@ -133,6 +133,7 @@ export type ScrollEvent = SyntheticEvent<
     zoomScale?: number,
     responderIgnoreScroll?: boolean,
     key?: string, // TODO(macOS)
+    preferredScrollerStyle?: string, // TODO(macOS)
   |}>,
 >;
 

diff --git a/React/Views/ScrollView/RCTScrollContentView.m b/React/Views/ScrollView/RCTScrollContentView.m
@@ -16,15 +16,34 @@ @implementation RCTScrollContentView
 
 - (void)reactSetFrame:(CGRect)frame
 {
-  [super reactSetFrame:frame];
-
 #if !TARGET_OS_OSX // TODO(macOS ISS#2323203)
   RCTScrollView *scrollView = (RCTScrollView *)self.superview.superview;
 #else // [TODO(macOS ISS#2323203)
   // macOS also has a NSClipView in its hierarchy
   RCTScrollView *scrollView = (RCTScrollView *)self.superview.superview.superview;
+
+  if (scrollView != nil) {
+    // 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
+    // which means the clip view will be smaller than the scroll view itself.
+    // In such cases the content view layout must shrink accordingly otherwise
+    // the contents will overflow causing the scroll indicators to appear unnecessarily.
+    NSScrollView *platformScrollView = scrollView.scrollView;
+    if (platformScrollView.scrollerStyle == NSScrollerStyleLegacy) {
+      NSScroller *verticalScroller = platformScrollView.verticalScroller;
+      if (!verticalScroller.isHidden) {
+        frame.size.width -= verticalScroller.frame.size.width;
+      }
+      NSScroller *horizontalScroller = platformScrollView.horizontalScroller;
+      if (!horizontalScroller.isHidden) {
+        frame.size.height -= horizontalScroller.frame.size.height;
+      }
+    }
+  }
 #endif // ]TODO(macOS ISS#2323203)
 
+  [super reactSetFrame:frame];
+
   if (!scrollView) {
     return;
   }

diff --git a/React/Views/ScrollView/RCTScrollView.h b/React/Views/ScrollView/RCTScrollView.h
@@ -67,6 +67,7 @@
 @property (nonatomic, copy) RCTDirectEventBlock onMomentumScrollBegin;
 @property (nonatomic, copy) RCTDirectEventBlock onMomentumScrollEnd;
 @property (nonatomic, copy) RCTDirectEventBlock onScrollKeyDown; // TODO(macOS ISS#2323203)
+@property (nonatomic, copy) RCTDirectEventBlock onPreferredScrollerStyleDidChange; // TODO(macOS ISS#2323203)
 
 - (void)flashScrollIndicators; // TODO(macOS ISS#2323203)
 

diff --git a/React/Views/ScrollView/RCTScrollView.m b/React/Views/ScrollView/RCTScrollView.m
@@ -187,6 +187,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 ISS#2323203)
     [self.panGestureRecognizer addTarget:self action:@selector(handleCustomPan:)];
@@ -756,19 +757,28 @@ - (void)updateClippedSubviews
 - (void)viewDidMoveToWindow
 {
   [super viewDidMoveToWindow];
-
+
+  NSNotificationCenter *defaultCenter = [NSNotificationCenter defaultCenter];
   if ([self window] == nil) {
     // Unregister for bounds change notifications
-    [[NSNotificationCenter defaultCenter] removeObserver:self name:NSViewBoundsDidChangeNotification object:_scrollView.contentView];
-  }
-  else {
+    [defaultCenter removeObserver:self
+                             name:NSViewBoundsDidChangeNotification
+                           object:_scrollView.contentView];
+    [defaultCenter removeObserver:self
+                             name:NSPreferredScrollerStyleDidChangeNotification
+                           object:nil];
+  } else {
     // Register for bounds change notifications so we can track scrolling
-    [[NSNotificationCenter defaultCenter] addObserver:self
-                                             selector:@selector(scrollViewDocumentViewBoundsDidChange:)
-                                                 name:NSViewBoundsDidChangeNotification
-                                               object:_scrollView.contentView];  // NSClipView
+    [defaultCenter addObserver:self
+                      selector:@selector(scrollViewDocumentViewBoundsDidChange:)
+                          name:NSViewBoundsDidChangeNotification
+                        object:_scrollView.contentView]; // NSClipView
+    [defaultCenter addObserver:self
+                      selector:@selector(preferredScrollerStyleDidChange:)
+                          name:NSPreferredScrollerStyleDidChangeNotification
+                        object:nil];
   }
-  
+
   _notifyDidScroll = ([self window] != nil);
 }
 #endif // ]TODO(macOS ISS#2323203)
@@ -1426,6 +1436,19 @@ - (void)keyDown:(UIEvent*)theEvent
     }
   }
 }
+
+static NSString *RCTStringForScrollerStyle(NSScrollerStyle scrollerStyle) {
+  switch (scrollerStyle) {
+    case NSScrollerStyleLegacy:
+      return @"legacy";
+    case NSScrollerStyleOverlay:
+      return @"overlay";
+  }
+}
+
+- (void)preferredScrollerStyleDidChange:(__unused NSNotification *)notification {
+  RCT_SEND_SCROLL_EVENT(onPreferredScrollerStyleDidChange, (@{ @"preferredScrollerStyle": RCTStringForScrollerStyle([NSScroller preferredScrollerStyle])}));
+}
 #endif // ]TODO(macOS ISS#2323203)
 
 // Note: setting several properties of UIScrollView has the effect of

diff --git a/React/Views/ScrollView/RCTScrollViewManager.m b/React/Views/ScrollView/RCTScrollViewManager.m
@@ -101,6 +101,7 @@ - (RCTPlatformView *)view
 RCT_EXPORT_VIEW_PROPERTY(onMomentumScrollEnd, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(DEPRECATED_sendUpdatedChildFrames, BOOL)
 RCT_EXPORT_OSX_VIEW_PROPERTY(onScrollKeyDown, RCTDirectEventBlock) // TODO(macOS ISS#2323203)
+RCT_EXPORT_OSX_VIEW_PROPERTY(onPreferredScrollerStyleDidChange, RCTDirectEventBlock) // TODO(macOS ISS#2323203)
 #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 110000 /* __IPHONE_11_0 */
 RCT_EXPORT_VIEW_PROPERTY(contentInsetAdjustmentBehavior, UIScrollViewContentInsetAdjustmentBehavior)
 #endif