Standardize arrow navigation in OptionsLists

src/CONST.js

@@ -168,11 +168,26 @@ const CONST = {
             shortcutKey: 'Enter',
             modifiers: [],
         },
+        CTRL_ENTER: {
+            descriptionKey: null,
+            shortcutKey: 'Enter',
+            modifiers: ['CTRL'],
+        },
         COPY: {
             descriptionKey: 'copy',
             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',

src/components/ArrowKeyFocusManager.js

@@ -0,0 +1,76 @@
+import {Component} from 'react';
+import PropTypes from 'prop-types';
+import CONST from '../CONST';
+import KeyboardShortcut from '../libs/KeyboardShortcut';
+
+const propTypes = {
+    /** Children to render. */
+    children: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.node,
+    ]).isRequired,
+
+    /** The current focused index. */
+    focusedIndex: PropTypes.number.isRequired,
+
+    /** The maximum index – provided so that the focus can be sent back to the beginning of the list when the end is reached. */
+    maxIndex: PropTypes.number.isRequired,
+
+    /** A callback executed when the focused input changes. */
+    onFocusedIndexChanged: PropTypes.func.isRequired,
+};
+
+class ArrowKeyFocusManager extends Component {
+    componentDidMount() {
+        const arrowUpConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_UP;
+        const arrowDownConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_DOWN;
+
+        this.unsubscribeArrowUpKey = KeyboardShortcut.subscribe(arrowUpConfig.shortcutKey, () => {
+            if (this.props.maxIndex <= 1) {
+                return;
+            }
+
+            let newFocusedIndex = this.props.focusedIndex - 1;
+
+            // Wrap around to the bottom of the list
+            if (newFocusedIndex < 0) {
+                newFocusedIndex = this.props.maxIndex;
+            }
+
+            this.props.onFocusedIndexChanged(newFocusedIndex);
+        }, arrowUpConfig.descriptionKey, arrowUpConfig.modifiers, true);
+
+        this.unsubscribeArrowDownKey = KeyboardShortcut.subscribe(arrowDownConfig.shortcutKey, () => {
+            if (this.props.maxIndex <= 1) {
+                return;
+            }
+
+            let newFocusedIndex = this.props.focusedIndex + 1;
+
+            // Wrap around to the top of the list
+            if (newFocusedIndex > this.props.maxIndex) {
+                newFocusedIndex = 0;
+            }
+
+            this.props.onFocusedIndexChanged(newFocusedIndex);
+        }, arrowDownConfig.descriptionKey, arrowDownConfig.modifiers, true);
+    }
+
+    componentWillUnmount() {
+        if (this.unsubscribeArrowUpKey) {
+            this.unsubscribeArrowUpKey();
+        }
+
+        if (this.unsubscribeArrowDownKey) {
+            this.unsubscribeArrowDownKey();
+        }
+    }
+
+    render() {
+        return this.props.children;
+    }
+}
+
+ArrowKeyFocusManager.propTypes = propTypes;
+
+export default ArrowKeyFocusManager;

src/components/IOUConfirmationList.js

@@ -1,19 +1,14 @@
 import React, {Component} from 'react';
-import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import styles from '../styles/styles';
-import Text from './Text';
-import themeColors from '../styles/themes/default';
 import * as OptionsListUtils from '../libs/OptionsListUtils';
-import OptionsList from './OptionsList';
+import OptionsSelector from './OptionsSelector';
 import ONYXKEYS from '../ONYXKEYS';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
 import compose from '../libs/compose';
-import FixedFooter from './FixedFooter';
-import TextInput from './TextInput';
 import CONST from '../CONST';
 import ButtonWithMenu from './ButtonWithMenu';
 import Log from '../libs/Log';
@@ -26,10 +21,10 @@ const propTypes = {
     /** Callback to inform parent modal of success */
     onConfirm: PropTypes.func.isRequired,
 
-    /** Callback to to parent modal to send money */
+    /** Callback to parent modal to send money */
     onSendMoney: PropTypes.func.isRequired,
 
-    // Callback to update comment from IOUModal
+    /** Callback to update comment from IOUModal */
     onUpdateComment: PropTypes.func,
 
     /** Comment value from IOUModal */
@@ -44,7 +39,7 @@ const propTypes = {
     /** IOU type */
     iouType: PropTypes.string,
 
-    // Selected participants from IOUModal with login
+    /** Selected participants from IOUModal with login */
     participants: PropTypes.arrayOf(PropTypes.shape({
         login: PropTypes.string.isRequired,
         alternateText: PropTypes.string,
@@ -135,26 +130,7 @@ class IOUConfirmationList extends Component {
         };
 
         this.toggleOption = this.toggleOption.bind(this);
-        this.onPress = this.onPress.bind(this);
-    }
-
-    componentDidMount() {
-        // We need to wait for the transition animation to end before focusing the TextInput,
-        // otherwise the TextInput isn't animated correctly
-        setTimeout(() => this.textInput.focus(), CONST.ANIMATED_TRANSITION);
-    }
-
-    /**
-     * @param {String} value
-     */
-    onPress(value) {
-        if (this.props.iouType === CONST.IOU.IOU_TYPE.SEND) {
-            Log.info(`[IOU] Sending money via: ${value}`);
-            this.props.onSendMoney(value);
-        } else {
-            Log.info(`[IOU] Requesting money via: ${value}`);
-            this.props.onConfirm(this.getSplits());
-        }
+        this.confirm = this.confirm.bind(this);
     }
 
     /**
@@ -190,6 +166,7 @@ class IOUConfirmationList extends Component {
 
     /**
      * Returns the participants without amount
+     *
      * @param {Array} participants
      * @returns {Array}
      */
@@ -199,7 +176,7 @@ class IOUConfirmationList extends Component {
 
     /**
      * Returns the sections needed for the OptionsSelector
-     * @param {Boolean} maxParticipantsReached
+     *
      * @returns {Array}
      */
     getSections() {
@@ -210,6 +187,7 @@ class IOUConfirmationList extends Component {
 
             const formattedSelectedParticipants = this.getParticipantsWithAmount(selectedParticipants);
             const formattedUnselectedParticipants = this.getParticipantsWithoutAmount(unselectedParticipants);
+            const formattedParticipants = _.union(formattedSelectedParticipants, formattedUnselectedParticipants);
 
             const formattedMyPersonalDetails = OptionsListUtils.getIOUConfirmationOptionsFromMyPersonalDetail(
                 this.props.myPersonalDetails,
@@ -227,14 +205,9 @@ class IOUConfirmationList extends Component {
                 isDisabled: true,
             }, {
                 title: this.props.translate('iOUConfirmationList.whoWasThere'),
-                data: formattedSelectedParticipants,
+                data: formattedParticipants,
                 shouldShow: true,
-                indexOffset: 0,
-            }, {
-                title: undefined,
-                data: formattedUnselectedParticipants,
-                shouldShow: !_.isEmpty(formattedUnselectedParticipants),
-                indexOffset: 0,
+                indexOffset: 1,
             });
         } else {
             const formattedParticipants = OptionsListUtils.getIOUConfirmationOptionsFromParticipants(this.props.participants,
@@ -342,52 +315,60 @@ class IOUConfirmationList extends Component {
         });
     }
 
+    /**
+     * @param {String} paymentMethod
+     */
+    confirm(paymentMethod) {
+        const selectedParticipants = this.getSelectedParticipants();
+        if (_.isEmpty(selectedParticipants)) {
+            return;
+        }
+
+        if (this.props.iouType === CONST.IOU.IOU_TYPE.SEND) {
+            if (!paymentMethod) {
+                return;
+            }
+
+            Log.info(`[IOU] Sending money via: ${paymentMethod}`);
+            this.props.onSendMoney(paymentMethod);
+        } else {
+            this.props.onConfirm(this.getSplits());
+        }
+    }
+
     render() {
-        const hoverStyle = this.props.hasMultipleParticipants ? styles.hoveredComponentBG : {};
-        const toggleOption = this.props.hasMultipleParticipants ? this.toggleOption : undefined;
         const selectedParticipants = this.getSelectedParticipants();
         const shouldShowSettlementButton = this.props.iouType === CONST.IOU.IOU_TYPE.SEND;
         const shouldDisableButton = selectedParticipants.length === 0 || this.props.network.isOffline;
         const isLoading = this.props.iou.loading && !this.props.network.isOffline;
         const recipient = this.state.participants[0];
         const canModifyParticipants = this.props.isIOUAttachedToExistingChatReport && this.props.hasMultipleParticipants;
         return (
-            <>
-                <View style={[styles.flexGrow0, styles.flexShrink1, styles.flexBasisAuto, styles.w100, styles.flexRow]}>
-                    <OptionsList
-                        sections={this.getSections()}
-                        disableArrowKeysActions
-                        disableFocusOptions
-                        hideAdditionalOptionStates
-                        forceTextUnreadStyle
-                        canSelectMultipleOptions={this.props.hasMultipleParticipants}
-                        selectedOptions={this.getSelectedOptions()}
-                        onSelectRow={toggleOption}
-                        isDisabled={!canModifyParticipants}
-                        optionHoveredStyle={hoverStyle}
-                    />
-                </View>
-                <View style={[styles.ph5, styles.pv5, styles.flexGrow1, styles.flexShrink0, styles.iouConfirmComment]}>
-                    <TextInput
-                        ref={el => this.textInput = el}
-                        label={this.props.translate('iOUConfirmationList.whatsItFor')}
-                        value={this.props.comment}
-                        onChangeText={this.props.onUpdateComment}
-                        placeholder={this.props.translate('common.optional')}
-                        placeholderTextColor={themeColors.placeholderText}
-                    />
-                </View>
-                <FixedFooter>
-                    {this.props.network.isOffline && (
-                        <Text style={[styles.formError, styles.pb2]}>
-                            {this.props.translate('session.offlineMessage')}
-                        </Text>
-                    )}
-                    {shouldShowSettlementButton ? (
+            <OptionsSelector
+                sections={this.getSections()}
+                value={this.props.comment}
+                onSelectRow={canModifyParticipants ? this.toggleOption : undefined}
+                onConfirmSelection={this.confirm}
+                onChangeText={this.props.onUpdateComment}
+                textInputLabel={this.props.translate('iOUConfirmationList.whatsItFor')}
+                placeholderText={this.props.translate('common.optional')}
+                selectedOptions={this.getSelectedOptions()}
+                canSelectMultipleOptions={this.props.hasMultipleParticipants}
+                disableArrowKeysActions={!canModifyParticipants}
+                isDisabled={!canModifyParticipants}
+                hideAdditionalOptionStates
+                forceTextUnreadStyle
+                autoFocus
+                shouldDelayFocus
+                shouldTextInputAppearBelowOptions
+                shouldShowOfflineMessage
+                optionHoveredStyle={canModifyParticipants ? styles.hoveredComponentBG : {}}
+                footerContent={shouldShowSettlementButton
+                    ? (
                         <SettlementButton
                             isDisabled={shouldDisableButton}
-                            isLoading={this.props.iou.loading && !this.props.network.isOffline}
-                            onPress={this.onPress}
+                            isLoading={isLoading}
+                            onPress={this.confirm}
                             shouldShowPaypal={Boolean(recipient.payPalMeAddress)}
                             recipientPhoneNumber={recipient.phoneNumber}
                             enablePaymentsRoute={ROUTES.IOU_SEND_ENABLE_PAYMENTS}
@@ -399,12 +380,11 @@ class IOUConfirmationList extends Component {
                         <ButtonWithMenu
                             isDisabled={shouldDisableButton}
                             isLoading={isLoading}
-                            onPress={(_event, value) => this.onPress(value)}
+                            onPress={(_event, value) => this.confirm(value)}
                             options={this.splitOrRequestOptions}
                         />
                     )}
-                </FixedFooter>
-            </>
+            />
         );
     }
 }

src/components/OptionRow.js

@@ -99,13 +99,13 @@ const OptionRow = (props) => {
         styles.chatLinkRowPressable,
         styles.flexGrow1,
         styles.optionItemAvatarNameWrapper,
-        styles.sidebarInnerRowSmall,
+        styles.optionRowCompact,
         styles.justifyContentCenter,
     ] : [
         styles.chatLinkRowPressable,
         styles.flexGrow1,
         styles.optionItemAvatarNameWrapper,
-        styles.sidebarInnerRow,
+        styles.optionRow,
         styles.justifyContentCenter,
     ]);
     const hoveredBackgroundColor = props.hoverStyle && props.hoverStyle.backgroundColor