[0.66] Deprecate onScrollKeyDown, refactor Flatlist selection logic (#1375)

* Revert "Revert Flatlist changes (#1306)"

This reverts commit 8ce9545.

* Refactor handling of keyDown/keyUp (#1338)

This refactors / simplifies certain keyUp|Down event handling.
It will make a later change (adding textInput handling for textInput fields) easier (to review)

Co-authored-by: Scott Kyle <[email protected]>

* Deprecate onScrollKeyDown, refactor Flatlist selection logic (#1365)

* Deprecate onScrollKeyDown

remove pressable diff

Remove JS handling for PageUp/Down, fix flow errors

Add back "autoscroll to focused view" behavior

remove commented code

remove change to pressable

Update documentation

fix flow error

fix lint issue

Fix 'selectRowAtIndex'

More simplification

lock

* Make method public again

* Add initialSelectedIndex

* macOS tags

* fix lint

* remove one more reference

* yarn lint --fix

* RNTester: only show the Flatlist keyboard navigation switch on macOS

Co-authored-by: Christoph Purrer <[email protected]>
Co-authored-by: Scott Kyle <[email protected]>

Author: 3 people

Libraries/Components/ScrollView/ScrollView.js

@@ -1179,82 +1179,6 @@ class ScrollView extends React.Component<Props, State> {
   }
 
   // [TODO(macOS GH#774)
-  _handleKeyDown = (event: ScrollEvent) => {
-    if (this.props.onScrollKeyDown) {
-      this.props.onScrollKeyDown(event);
-    } else {
-      if (Platform.OS === 'macos') {
-        const nativeEvent = event.nativeEvent;
-        const key = nativeEvent.key;
-        const kMinScrollOffset = 10;
-        if (key === 'PAGE_UP') {
-          this._handleScrollByKeyDown(event, {
-            x: nativeEvent.contentOffset.x,
-            y:
-              nativeEvent.contentOffset.y +
-              -nativeEvent.layoutMeasurement.height,
-          });
-        } else if (key === 'PAGE_DOWN') {
-          this._handleScrollByKeyDown(event, {
-            x: nativeEvent.contentOffset.x,
-            y:
-              nativeEvent.contentOffset.y +
-              nativeEvent.layoutMeasurement.height,
-          });
-        } else if (key === 'LEFT_ARROW') {
-          this._handleScrollByKeyDown(event, {
-            x:
-              nativeEvent.contentOffset.x +
-              -(this.props.horizontalLineScroll !== undefined
-                ? this.props.horizontalLineScroll
-                : kMinScrollOffset),
-            y: nativeEvent.contentOffset.y,
-          });
-        } else if (key === 'RIGHT_ARROW') {
-          this._handleScrollByKeyDown(event, {
-            x:
-              nativeEvent.contentOffset.x +
-              (this.props.horizontalLineScroll !== undefined
-                ? this.props.horizontalLineScroll
-                : kMinScrollOffset),
-            y: nativeEvent.contentOffset.y,
-          });
-        } else if (key === 'DOWN_ARROW') {
-          this._handleScrollByKeyDown(event, {
-            x: nativeEvent.contentOffset.x,
-            y:
-              nativeEvent.contentOffset.y +
-              (this.props.verticalLineScroll !== undefined
-                ? this.props.verticalLineScroll
-                : kMinScrollOffset),
-          });
-        } else if (key === 'UP_ARROW') {
-          this._handleScrollByKeyDown(event, {
-            x: nativeEvent.contentOffset.x,
-            y:
-              nativeEvent.contentOffset.y +
-              -(this.props.verticalLineScroll !== undefined
-                ? this.props.verticalLineScroll
-                : kMinScrollOffset),
-          });
-        }
-      }
-    }
-  };
-
-  _handleScrollByKeyDown = (event: ScrollEvent, newOffset) => {
-    const maxX =
-      event.nativeEvent.contentSize.width -
-      event.nativeEvent.layoutMeasurement.width;
-    const maxY =
-      event.nativeEvent.contentSize.height -
-      event.nativeEvent.layoutMeasurement.height;
-    this.scrollTo({
-      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 GH#774)
@@ -1807,7 +1731,6 @@ class ScrollView extends React.Component<Props, State> {
       // Override the onContentSizeChange from props, since this event can
       // bubble up from TextInputs
       onContentSizeChange: null,
-      onScrollKeyDown: this._handleKeyDown, // TODO(macOS GH#774)
       onPreferredScrollerStyleDidChange: this
         ._handlePreferredScrollerStyleDidChange, // TODO(macOS GH#774)
       onLayout: this._handleLayout,

Libraries/Components/View/ViewPropTypes.js

@@ -76,12 +76,6 @@ type DirectEventProps = $ReadOnly<{|
    */
   onPreferredScrollerStyleDidChange?: ?(event: ScrollEvent) => mixed, // TODO(macOS GH#774)
 
-  /**
-   * 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 GH#774)
-
   /**
    * Invoked on mount and layout changes with:
    *

Libraries/Lists/FlatList.js

@@ -66,6 +66,24 @@ type OptionalProps<ItemT> = {|
    * Optional custom style for multi-item rows generated when numColumns > 1.
    */
   columnWrapperStyle?: ViewStyleProp,
+  // [TODO(macOS GH#774)
+  /**
+   * Allows you to 'select' a row using arrow keys. The selected row will have the prop `isSelected`
+   * passed in as true to it's renderItem / ListItemComponent. You can also imperatively select a row
+   * using the `selectRowAtIndex` method. You can set the initially selected row using the
+   * `initialSelectedIndex` prop.
+   * Keyboard Behavior:
+   * - ArrowUp: Select row above current selected row
+   * - ArrowDown: Select row below current selected row
+   * - Option+ArrowUp: Select the first row
+   * - Opton+ArrowDown: Select the last 'realized' row
+   * - Home: Scroll to top of list
+   * - End: Scroll to end of list
+   *
+   * @platform macos
+   */
+  enableSelectionOnKeyPress?: ?boolean,
+  // ]TODO(macOS GH#774)
   /**
    * A marker property for telling the list to re-render (since it implements `PureComponent`). If
    * any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the
@@ -111,6 +129,12 @@ type OptionalProps<ItemT> = {|
    * `getItemLayout` to be implemented.
    */
   initialScrollIndex?: ?number,
+  // [TODO(macOS GH#774)
+  /**
+   * The initially selected row, if `enableSelectionOnKeyPress` is set.
+   */
+  initialSelectedIndex?: ?number,
+  // ]TODO(macOS GH#774)
   /**
    * Reverses the direction of scroll. Uses scale transforms of -1.
    */
@@ -369,6 +393,19 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     }
   }
 
+  // [TODO(macOS GH#750)
+  /**
+   * Move selection to the specified index
+   *
+   * @platform macos
+   */
+  selectRowAtIndex(index: number) {
+    if (this._listRef) {
+      this._listRef.selectRowAtIndex(index);
+    }
+  }
+  // ]TODO(macOS GH#750)
+
   /**
    * Provides a handle to the underlying scroll responder.
    */