Support inverted ScrollView on macOS

appden · christophpurrer · commit ea07b6fb8a8e · 2022-08-29T23:16:28.000-07:00
Allow to render a scrollView's content in inverted order which is especially helpful in messaging applications.

We can't rely on -1 scale hacks on macOS because of inverse issues with trackpad/scrollwheel, dragging scrollbars, tracking hovers, etc.

Hence we added 'native' support for inverted views
diff --git a/Libraries/Components/ScrollView/ScrollView.js b/Libraries/Components/ScrollView/ScrollView.js
@@ -499,6 +499,10 @@ export type Props = $ReadOnly<{|
    * ScrollView. This is usually used with inverted ScrollViews.
    */
   invertStickyHeaders?: ?boolean,
+  /**
+   * Reverses the direction of scroll. Uses native inversion on macOS and scale transforms of -1 elsewhere
+   */
+  inverted?: ?boolean,
   /**
    * Determines whether the keyboard gets dismissed in response to a drag.
    *
@@ -1192,6 +1196,11 @@ class ScrollView extends React.Component<Props, State> {
     this.setState({contentKey: this.state.contentKey + 1});
   }; // ]TODO(macOS GH#774)
 
+  // [TODO(macOS GH#774)
+  _handleInvertedDidChange = () => {
+    this.setState({contentKey: this.state.contentKey + 1});
+  }; // ]TODO(macOS GH#774)
+
   _handleScroll = (e: ScrollEvent) => {
     if (__DEV__) {
       if (
@@ -1716,6 +1725,7 @@ class ScrollView extends React.Component<Props, State> {
             : this.props.removeClippedSubviews
         }
         key={this.state.contentKey} // TODO(macOS GH#774)
+        inverted={this.props.inverted} // TODO(macOS GH#774)
         collapsable={false}>
         {children}
       </NativeDirectionalScrollContentView>
@@ -1743,6 +1753,7 @@ class ScrollView extends React.Component<Props, State> {
       // Override the onContentSizeChange from props, since this event can
       // bubble up from TextInputs
       onContentSizeChange: null,
+      onInvertedDidChange: this._handleInvertedDidChange, // TODO macOS GH#774
       onPreferredScrollerStyleDidChange:
         this._handlePreferredScrollerStyleDidChange, // TODO(macOS GH#774)
       onLayout: this._handleLayout,
diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js
@@ -70,6 +70,11 @@ type DirectEventProps = $ReadOnly<{|
    */
   onDoubleClick?: ?(event: SyntheticEvent<{}>) => mixed, // TODO(macOS GH#774)
 
+  /**
+   * This event is fired when the scrollView's inverted property changes.
+   */
+  onInvertedDidChange?: ?() => mixed, // TODO(macOS GH#774)
+
   /**
    * This event is fired when the system's preferred scroller style changes.
    * The `preferredScrollerStyle` key will be `legacy` or `overlay`.
diff --git a/Libraries/Lists/FlatList.js b/Libraries/Lists/FlatList.js
@@ -136,7 +136,7 @@ type OptionalProps<ItemT> = {|
   initialSelectedIndex?: ?number,
   // ]TODO(macOS GH#774)
   /**
-   * Reverses the direction of scroll. Uses scale transforms of -1.
+   * Reverses the direction of scroll. Uses native inversion on macOS and scale transforms of -1 elsewhere
    */
   inverted?: ?boolean,
   /**
diff --git a/Libraries/Lists/VirtualizedList.js b/Libraries/Lists/VirtualizedList.js
@@ -979,11 +979,13 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       this.props;
     const {data, horizontal} = this.props;
     const isVirtualizationDisabled = this._isVirtualizationDisabled();
-    const inversionStyle = this.props.inverted
-      ? horizontalOrDefault(this.props.horizontal)
-        ? styles.horizontallyInverted
-        : styles.verticallyInverted
-      : null;
+    // macOS natively supports inverted lists, thus not needing an inversion style
+    const inversionStyle =
+      this.props.inverted && Platform.OS !== 'macos' // TODO(macOS GH#774)
+        ? horizontalOrDefault(this.props.horizontal)
+          ? styles.horizontallyInverted
+          : styles.verticallyInverted
+        : null;
     const cells = [];
     const stickyIndicesFromProps = new Set(this.props.stickyHeaderIndices);
     const stickyHeaderIndices = [];
@@ -1330,6 +1332,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     // [TODO(macOS GH#774)
     const preferredScrollerStyleDidChangeHandler =
       this.props.onPreferredScrollerStyleDidChange;
+    const invertedDidChange = this.props.onInvertedDidChange;
 
     const keyboardNavigationProps = {
       focusable: true,
@@ -1354,6 +1357,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           {...props}
           // [TODO(macOS GH#774)
           {...(props.enableSelectionOnKeyPress && keyboardNavigationProps)}
+          onInvertedDidChange={invertedDidChange}
           onPreferredScrollerStyleDidChange={
             preferredScrollerStyleDidChangeHandler
           } // TODO(macOS GH#774)]
@@ -1377,6 +1381,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           {...props}
           // [TODO(macOS GH#774)
           {...(props.enableSelectionOnKeyPress && keyboardNavigationProps)}
+          onInvertedDidChange={invertedDidChange}
           onPreferredScrollerStyleDidChange={
             preferredScrollerStyleDidChangeHandler
           } // TODO(macOS GH#774)]
diff --git a/React/Views/ScrollView/RCTScrollContentView.h b/React/Views/ScrollView/RCTScrollContentView.h
@@ -11,4 +11,8 @@
 
 @interface RCTScrollContentView : RCTView
 
+#if TARGET_OS_OSX // [TODO(macOS GH#774)
+@property (nonatomic, assign, getter=isInverted) BOOL inverted;
+#endif // ]TODO(macOS GH#774)
+
 @end
diff --git a/React/Views/ScrollView/RCTScrollContentView.m b/React/Views/ScrollView/RCTScrollContentView.m
@@ -18,6 +18,12 @@
 #import "RCTScrollView.h"
 
 @implementation RCTScrollContentView
+#if TARGET_OS_OSX // [TODO(macOS GH#774)
+- (BOOL)isFlipped
+{
+  return !self.inverted;
+}
+#endif // ]TODO(macOS GH#774)
 
 - (void)reactSetFrame:(CGRect)frame
 {
diff --git a/React/Views/ScrollView/RCTScrollContentViewManager.m b/React/Views/ScrollView/RCTScrollContentViewManager.m
@@ -14,6 +14,8 @@ @implementation RCTScrollContentViewManager
 
 RCT_EXPORT_MODULE()
 
+RCT_EXPORT_OSX_VIEW_PROPERTY(inverted, BOOL) // TODO(macOS GH#774)
+
 - (RCTScrollContentView *)view
 {
   return [RCTScrollContentView new];
diff --git a/React/Views/ScrollView/RCTScrollView.h b/React/Views/ScrollView/RCTScrollView.h
@@ -67,6 +67,8 @@
 @property (nonatomic, copy) RCTDirectEventBlock onMomentumScrollEnd;
 @property (nonatomic, copy) RCTDirectEventBlock onPreferredScrollerStyleDidChange; // TODO(macOS GH#774)
 
+@property (nonatomic, copy) RCTDirectEventBlock onInvertedDidChange; // TODO(macOS GH#774)
+
 - (void)flashScrollIndicators; // TODO(macOS GH#774)
 
 @end
diff --git a/React/Views/ScrollView/RCTScrollView.m b/React/Views/ScrollView/RCTScrollView.m
@@ -45,6 +45,7 @@ @interface RCTCustomScrollView :
 @property (nonatomic, assign) BOOL pinchGestureEnabled;
 #else // [TODO(macOS GH#774)
 + (BOOL)isCompatibleWithResponsiveScrolling;
+@property (nonatomic, assign, getter=isInverted) BOOL inverted;
 @property (nonatomic, assign, getter=isScrollEnabled) BOOL scrollEnabled;
 @property (nonatomic, strong) NSPanGestureRecognizer *panGestureRecognizer;
 #endif // ]TODO(macOS GH#774)
@@ -108,6 +109,11 @@ + (BOOL)isCompatibleWithResponsiveScrolling
   return YES;
 }
 
+- (BOOL)isFlipped
+{
+  return !self.inverted;
+}
+
 - (void)scrollWheel:(NSEvent *)theEvent
 {
   if (!self.scrollEnabled) {
@@ -556,6 +562,15 @@ - (void)setAccessibilityRole:(NSAccessibilityRole)accessibilityRole
 {
   [_scrollView setAccessibilityRole:accessibilityRole];
 }
+
+- (void)setInverted:(BOOL)inverted
+{
+  BOOL changed = _inverted != inverted;
+  _inverted = inverted;  
+  if (changed && _onInvertedDidChange) {
+    _onInvertedDidChange(@{});
+  }
+}
 #endif // ]TODO(macOS GH#774)
 
 RCT_NOT_IMPLEMENTED(-(instancetype)initWithFrame : (CGRect)frame)
@@ -1207,14 +1222,14 @@ - (void)uiManagerWillPerformMounting:(RCTUIManager *)manager
           RCTUIView *subview = self.contentView.subviews[ii]; // TODO(OSS Candidate ISS#2710739) use property instead of ivar for mac and TODO(macOS ISS#3536887)
           BOOL hasNewView = NO;
           if (horz) {
-            CGFloat leftInset = self.inverted ? self->_scrollView.contentInset.right : self->_scrollView.contentInset.left;
+            CGFloat leftInset = self.inverted ? self->_scrollView.contentInset.left : self->_scrollView.contentInset.right;
             CGFloat x = self->_scrollView.contentOffset.x + leftInset;
-            hasNewView = subview.frame.origin.x > x;
+            hasNewView = subview.frame.origin.x >= x;
           } else {
             CGFloat bottomInset =
-                self.inverted ? self->_scrollView.contentInset.top : self->_scrollView.contentInset.bottom;
+                self.inverted ? self->_scrollView.contentInset.bottom : self->_scrollView.contentInset.top;
             CGFloat y = self->_scrollView.contentOffset.y + bottomInset;
-            hasNewView = subview.frame.origin.y > y;
+            hasNewView = subview.frame.origin.y >= y;
           }
           if (hasNewView || ii == self.contentView.subviews.count - 1) { // TODO(OSS Candidate ISS#2710739) use property instead of ivar for mac
             self->_prevFirstVisibleFrame = subview.frame;
diff --git a/React/Views/ScrollView/RCTScrollViewManager.m b/React/Views/ScrollView/RCTScrollViewManager.m
@@ -99,6 +99,7 @@ - (RCTPlatformView *)view // TODO(macOS GH#774)
 RCT_EXPORT_VIEW_PROPERTY(onScrollEndDrag, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onMomentumScrollBegin, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onMomentumScrollEnd, RCTDirectEventBlock)
+RCT_EXPORT_OSX_VIEW_PROPERTY(onInvertedDidChange, RCTDirectEventBlock) // TODO(macOS GH#774)
 RCT_EXPORT_OSX_VIEW_PROPERTY(onPreferredScrollerStyleDidChange, RCTDirectEventBlock) // TODO(macOS GH#774)
 RCT_EXPORT_VIEW_PROPERTY(inverted, BOOL)
 #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 130000 /* __IPHONE_13_0 */
diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
@@ -491,6 +491,48 @@ if (Platform.OS === 'ios') {
 }
 exports.examples = examples;
 
+// TODO [(macOS GH#774)
+if (Platform.OS === 'macos') {
+  examples.push({
+    title: '<ScrollView> (inverted = true/false)\n',
+    description:
+      "You can display <ScrollView>'s child components in inverted order",
+    render: function (): React.Node {
+      return <InvertedContentExample />;
+    },
+  });
+}
+
+const InvertedContentExample = () => {
+  const [inverted, setInverted] = useState(true);
+  const [items, setItems] = useState(ITEMS);
+  return (
+    <>
+      <ScrollView
+        style={[styles.scrollView, {height: 200}]}
+        inverted={inverted}>
+        {items.map(createItemRow)}
+      </ScrollView>
+      <Text style={{paddingTop: 10, paddingBottom: 10}}>
+        Same example as above, but with the opposite inverted option
+      </Text>
+      <ScrollView
+        style={[styles.scrollView, {height: 200}]}
+        inverted={!inverted}>
+        {items.map(createItemRow)}
+      </ScrollView>
+      <Button
+        label={'toggle inverted'}
+        onPress={() => {
+          setInverted(!inverted);
+          setItems([...Array(14)].map((_, i) => `Item ${i}`));
+        }}
+      />
+    </>
+  );
+};
+// ]TODO(macOS GH#774)
+
 const AndroidScrollBarOptions = () => {
   const [persistentScrollBar, setPersistentScrollBar] = useState(false);
   return (

Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,8 @@ @implementation RCTScrollContentViewManager`
`14`	`14`
`15`	`15`	`RCT_EXPORT_MODULE()`
`16`	`16`
	`17`	`+RCT_EXPORT_OSX_VIEW_PROPERTY(inverted, BOOL) // TODO(macOS GH#774)`
	`18`	`+`
`17`	`19`	`- (RCTScrollContentView *)view`
`18`	`20`	`{`
`19`	`21`	`return [RCTScrollContentView new];`