Standardize arrow navigation in OptionsLists

package.json

@@ -114,6 +114,7 @@
     "react-web-config": "^1.0.0",
     "rn-fetch-blob": "^0.12.0",
     "save": "^2.4.0",
+    "shim-keyboard-event-key": "^1.0.3",
     "smoothscroll-polyfill": "^0.4.4",
     "underscore": "^1.13.1",
     "urbanairship-react-native": "^11.0.2"

src/CONST/index.js

@@ -175,11 +175,21 @@ const CONST = {
             shortcutKey: 'C',
             modifiers: ['CTRL'],
         },
+        ARROW_UP: {
+            descriptionKey: null,
+            shortcutKey: 'ArrowUp',
+            modifiers: [],
+        },
+        ARROW_DOWN: {
+            descriptionKey: null,
+            shortcutKey: 'ArrowDown',
+            modifiers: [],
+        },
     },
     KEYBOARD_SHORTCUT_KEY_DISPLAY_NAME: {
-        CONTROL: 'Ctrl',
-        META: 'Cmd',
-        SHIFT: 'Shift',
+        CONTROL: 'CTRL',
+        META: 'CMD',
+        SHIFT: 'SHIFT',
     },
     CURRENCY: {
         USD: 'USD',

src/components/ArrowKeyFocusManager.js

@@ -0,0 +1,139 @@
+import _ from 'underscore';
+import {Component} from 'react';
+import PropTypes from 'prop-types';
+import * as PropTypeUtils from '../libs/PropTypeUtils';
+import CONST from '../CONST';
+import KeyboardShortcut from '../libs/KeyboardShortcut';
+
+const propTypes = {
+    /** Children to render. */
+    children: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.node,
+    ]).isRequired,
+
+    /** The initial focused index. */
+    initialFocusedIndex: PropTypeUtils.integerPropType,
+
+    /** The number of items in the list that this component is managing focus for. */
+    listLength: PropTypeUtils.wholeNumberPropType,
+
+    /** A callback executed when the focused input changes. */
+    onFocusedIndexChanged: PropTypes.func,
+
+    /** A callback executed when the enter key is pressed. */
+    onEnterKeyPressed: PropTypes.func,
+
+    /** Should the enter key event bubble? */
+    shouldEnterKeyEventBubble: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+};
+
+const defaultProps = {
+    initialFocusedIndex: 0,
+    listLength: 0,
+    onFocusedIndexChanged: () => {},
+    onEnterKeyPressed: undefined,
+    shouldEnterKeyEventBubble: false,
+};
+
+class ArrowKeyFocusManager extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            focusedIndex: props.initialFocusedIndex,
+        };
+        this.shouldEnterKeyEventBubble = this.shouldEnterKeyEventBubble.bind(this);
+    }
+
+    componentDidMount() {
+        const enterConfig = CONST.KEYBOARD_SHORTCUTS.ENTER;
+        const arrowUpConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_UP;
+        const arrowDownConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_DOWN;
+
+        if (this.props.onEnterKeyPressed) {
+            this.unsubscribeEnterKey = KeyboardShortcut.subscribe(enterConfig.shortcutKey, () => {
+                this.props.onEnterKeyPressed(this.state.focusedIndex);
+            }, enterConfig.descriptionKey, enterConfig.modifiers, true, this.shouldEnterKeyEventBubble);
+        }
+
+        this.unsubscribeArrowUpKey = KeyboardShortcut.subscribe(arrowUpConfig.shortcutKey, () => {
+            if (this.props.listLength <= 1) {
+                return;
+            }
+
+            this.setState(
+                (prevState) => {
+                    let newFocusedIndex = prevState.focusedIndex - 1;
+
+                    // Wrap around to the bottom of the list
+                    if (newFocusedIndex < 0) {
+                        newFocusedIndex = this.props.listLength - 1;
+                    }
+
+                    return {focusedIndex: newFocusedIndex};
+                },
+                () => this.props.onFocusedIndexChanged(this.state.focusedIndex),
+            );
+        }, arrowUpConfig.descriptionKey, arrowUpConfig.modifiers, true);
+
+        this.unsubscribeArrowDownKey = KeyboardShortcut.subscribe(arrowDownConfig.shortcutKey, () => {
+            if (this.props.listLength <= 1) {
+                return;
+            }
+
+            this.setState(
+                (prevState) => {
+                    let newFocusedIndex = prevState.focusedIndex + 1;
+
+                    // Wrap around to the top of the list
+                    if (newFocusedIndex > this.props.listLength - 1) {
+                        newFocusedIndex = 0;
+                    }
+
+                    return {focusedIndex: newFocusedIndex};
+                },
+                () => this.props.onFocusedIndexChanged(this.state.focusedIndex),
+            );
+        }, arrowDownConfig.descriptionKey, arrowDownConfig.modifiers, true);
+    }
+
+    componentWillUnmount() {
+        if (this.unsubscribeEnterKey) {
+            this.unsubscribeEnterKey();
+        }
+
+        if (this.unsubscribeArrowUpKey) {
+            this.unsubscribeArrowUpKey();
+        }
+
+        if (this.unsubscribeArrowDownKey) {
+            this.unsubscribeArrowDownKey();
+        }
+    }
+
+    /**
+     * @returns {Boolean}
+     */
+    shouldEnterKeyEventBubble() {
+        if (_.isFunction(this.props.shouldEnterKeyEventBubble)) {
+            const shouldBubble = this.props.shouldEnterKeyEventBubble(this.state.focusedIndex);
+            if (!_.isBoolean(shouldBubble)) {
+                throw new Error('shouldEnterKeyEventBubble prop did not return a boolean');
+            }
+            return shouldBubble;
+        }
+
+        return this.props.shouldEnterKeyEventBubble;
+    }
+
+    render() {
+        return _.isFunction(this.props.children)
+            ? this.props.children({focusedIndex: this.state.focusedIndex})
+            : this.props.children;
+    }
+}
+
+ArrowKeyFocusManager.propTypes = propTypes;
+ArrowKeyFocusManager.defaultProps = defaultProps;
+
+export default ArrowKeyFocusManager;

src/components/Button.js

@@ -47,6 +47,9 @@ const propTypes = {
     /** Call the onPress function when Enter key is pressed */
     pressOnEnter: PropTypes.bool,
 
+    /** The priority to assign the enter key event listener */
+    enterKeyEventListenerPriority: PropTypes.number,
+
     /** Additional styles to add after local styles. Applied to Pressable portion of button */
     style: PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.object),
@@ -88,6 +91,7 @@ const defaultProps = {
     onPressIn: () => {},
     onPressOut: () => {},
     pressOnEnter: false,
+    enterKeyEventListenerPriority: 0,
     style: [],
     innerStyles: [],
     textStyles: [],
@@ -119,7 +123,7 @@ class Button extends Component {
                 return;
             }
             this.props.onPress();
-        }, shortcutConfig.descriptionKey, shortcutConfig.modifiers, true);
+        }, shortcutConfig.descriptionKey, shortcutConfig.modifiers, true, false, this.props.enterKeyEventListenerPriority);
     }
 
     componentWillUnmount() {