Added Keyboard shortcuts modal

src/CONST.js

@@ -1,5 +1,6 @@
 const CLOUDFRONT_URL = 'https://d2k5nsl2zxldvw.cloudfront.net';
 const NEW_EXPENSIFY_URL = 'https://new.expensify.com';
+const PLATFORM_OS_MACOS = 'Mac OS';
 
 const CONST = {
     // 50 megabytes in bytes
@@ -119,6 +120,47 @@ const CONST = {
         IOS: 'ios',
         ANDROID: 'android',
     },
+    KEYBOARD_SHORTCUT_MODIFIERS: {
+        CTRL: {
+            DEFAULT: 'control',
+            [PLATFORM_OS_MACOS]: 'meta',
+        },
+        SHIFT: {
+            DEFAULT: 'shift',
+        },
+    },
+    KEYBOARD_SHORTCUTS: {
+        SEARCH: {
+            descriptionKey: 'search',
+            shortcutKey: 'K',
+            modifiers: ['CTRL'],
+        },
+        NEW_GROUP: {
+            descriptionKey: 'newGroup',
+            shortcutKey: 'K',
+            modifiers: ['CTRL', 'SHIFT'],
+        },
+        SHORTCUT_MODAL: {
+            descriptionKey: 'openShortcutDialog',
+            shortcutKey: '?',
+            modifiers: ['CTRL'],
+        },
+        ESCAPE: {
+            descriptionKey: 'escape',
+            shortcutKey: 'Escape',
+            modifiers: [],
+        },
+        ENTER: {
+            descriptionKey: null,
+            shortcutKey: 'Enter',
+            modifiers: [],
+        },
+    },
+    KEYBOARD_SHORTCUT_KEY_DISPLAY_NAME: {
+        CONTROL: 'Ctrl',
+        META: 'Cmd',
+        SHIFT: 'Shift',
+    },
     CURRENCY: {
         USD: 'USD',
     },
@@ -360,7 +402,7 @@ const CONST = {
 
     OS: {
         WINDOWS: 'Windows',
-        MAC_OS: 'Mac OS',
+        MAC_OS: PLATFORM_OS_MACOS,
         ANDROID: 'Android',
         IOS: 'iOS',
         LINUX: 'Linux',

src/components/Button.js

@@ -8,6 +8,7 @@ import OpacityView from './OpacityView';
 import Text from './Text';
 import KeyboardShortcut from '../libs/KeyboardShortcut';
 import Icon from './Icon';
+import CONST from '../CONST';
 
 const propTypes = {
     /** The text for the button label */
@@ -90,14 +91,15 @@ class Button extends Component {
             return;
         }
 
+        const shortcutConfig = CONST.KEYBOARD_SHORTCUTS.ENTER;
+
         // Setup and attach keypress handler for pressing the button with Enter key
-        this.unsubscribe = KeyboardShortcut.subscribe('Enter', () => {
+        this.unsubscribe = KeyboardShortcut.subscribe(shortcutConfig.shortcutKey, () => {
             if (this.props.isDisabled || this.props.isLoading) {
                 return;
             }
-
             this.props.onPress();
-        }, [], true);
+        }, shortcutConfig.descriptionKey, shortcutConfig.modifiers, true);
     }
 
     componentWillUnmount() {

src/components/KeyboardShortcutsModal.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import {View} from 'react-native';
+import _ from 'underscore';
+import HeaderWithCloseButton from './HeaderWithCloseButton';
+import Text from './Text';
+import Modal from './Modal';
+import CONST from '../CONST';
+import styles from '../styles/styles';
+import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import compose from '../libs/compose';
+import KeyboardShortcut from '../libs/KeyboardShortcut';
+
+const propTypes = {
+    /** prop to fetch screen width */
+    ...windowDimensionsPropTypes,
+
+    /** props to fetch translation functions */
+    ...withLocalizePropTypes,
+};
+
+class KeyboardShortcutsModal extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            isOpen: false,
+        };
+
+        this.showKeyboardShortcutModal = this.showKeyboardShortcutModal.bind(this);
+        this.hideKeyboardShortcutModal = this.hideKeyboardShortcutModal.bind(this);
+    }
+
+    componentDidMount() {
+        const shortcutConfig = CONST.KEYBOARD_SHORTCUTS.SHORTCUT_MODAL;
+        const shortcutModifiers = KeyboardShortcut.getShortcutModifiers(shortcutConfig.modifiers);
+        this.unsubscribeShortcutModal = KeyboardShortcut.subscribe(shortcutConfig.shortcutKey, () => {
+            this.showKeyboardShortcutModal();
+        }, shortcutConfig.descriptionKey, shortcutModifiers, true);
+    }
+
+    componentWillUnmount() {
+        if (!this.unsubscribeShortcutModal) {
+            return;
+        }
+        this.unsubscribeShortcutModal();
+    }
+
+    showKeyboardShortcutModal() {
+        this.setState({isOpen: true});
+    }
+
+    hideKeyboardShortcutModal() {
+        this.setState({isOpen: false});
+    }
+
+    /**
+     * Render single row for the Keyboard shortcuts with description
+     * @param {Object} shortcut
+     * @param {Boolean} isFirstRow
+     * @returns {*}
+     */
+    renderRow(shortcut, isFirstRow) {
+        return (
+            <View
+                style={[
+                    styles.keyboardShortcutTableRow,
+                    styles.flex1,
+                    isFirstRow && styles.keyboardShortcutTableFirstRow,
+                ]}
+                key={shortcut.displayName}
+            >
+                <View style={[styles.dFlex, styles.p2, styles.keyboardShortcutTablePrefix]}>
+                    <Text>{shortcut.displayName}</Text>
+                </View>
+                <View style={[styles.flex1, styles.p2, styles.alignSelfStretch]}>
+                    <Text>{this.props.translate(`keyboardShortcutModal.shortcuts.${shortcut.descriptionKey}`)}</Text>
+                </View>
+            </View>
+        );
+    }
+
+    render() {
+        const shortcuts = KeyboardShortcut.getKeyboardShortcuts();
+        const modalType = this.props.isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CENTERED;
+
+        return (
+            <Modal
+                isVisible={this.state.isOpen}
+                type={modalType}
+                containerStyle={styles.keyboardShortcutModalContainer}
+                onClose={this.hideKeyboardShortcutModal}
+            >
+                <HeaderWithCloseButton title={this.props.translate('keyboardShortcutModal.title')} onCloseButtonPress={this.hideKeyboardShortcutModal} />
+                <View style={[styles.p5, styles.pt0]}>
+                    <Text style={styles.mb5}>{this.props.translate('keyboardShortcutModal.subtitle')}</Text>
+                    <View style={[styles.keyboardShortcutTableWrapper]}>
+                        <View style={[styles.alignItemsCenter, styles.keyboardShortcutTableContainer]}>
+                            {_.map(shortcuts, (shortcut, index) => {
+                                const isFirstRow = index === 0;
+                                return this.renderRow(shortcut, isFirstRow);
+                            })}
+                        </View>
+                    </View>
+                </View>
+            </Modal>
+        );
+    }
+}
+
+KeyboardShortcutsModal.propTypes = propTypes;
+
+export default compose(
+    withWindowDimensions,
+    withLocalize,
+)(KeyboardShortcutsModal);

src/components/Modal/BaseModal.js

@@ -72,6 +72,7 @@ class BaseModal extends PureComponent {
                 isSmallScreenWidth: this.props.isSmallScreenWidth,
             },
             this.props.popoverAnchorPosition,
+            this.props.containerStyle,
         );
         return (
             <ReactNativeModal

src/components/Modal/modalPropTypes.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import _ from 'underscore';
 import CONST from '../../CONST';
 import {windowDimensionsPropTypes} from '../withWindowDimensions';
+import stylePropTypes from '../../styles/stylePropTypes';
 
 const propTypes = {
     /** Decides whether the modal should cover fullscreen. FullScreen modal has backdrop */
@@ -54,6 +55,9 @@ const propTypes = {
         left: PropTypes.number,
     }),
 
+    /** Modal container styles  */
+    containerStyle: stylePropTypes,
+
     ...windowDimensionsPropTypes,
 };
 
@@ -68,6 +72,7 @@ const defaultProps = {
     animationIn: null,
     animationOut: null,
     popoverAnchorPosition: {},
+    containerStyle: {},
 };
 
 export {propTypes, defaultProps};

src/components/ScreenWrapper.js

@@ -7,11 +7,13 @@ import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
 import {withOnyx} from 'react-native-onyx';
 import styles, {getSafeAreaPadding} from '../styles/styles';
 import HeaderGap from './HeaderGap';
+import KeyboardShortcutsModal from './KeyboardShortcutsModal';
 import KeyboardShortcut from '../libs/KeyboardShortcut';
 import onScreenTransitionEnd from '../libs/onScreenTransitionEnd';
 import Navigation from '../libs/Navigation/Navigation';
 import compose from '../libs/compose';
 import ONYXKEYS from '../ONYXKEYS';
+import CONST from '../CONST';
 
 const propTypes = {
     /** Array of additional styles to add */
@@ -60,19 +62,21 @@ const defaultProps = {
 class ScreenWrapper extends React.Component {
     constructor(props) {
         super(props);
+
         this.state = {
             didScreenTransitionEnd: false,
         };
     }
 
     componentDidMount() {
-        this.unsubscribeEscapeKey = KeyboardShortcut.subscribe('Escape', () => {
+        const shortcutConfig = CONST.KEYBOARD_SHORTCUTS.ESCAPE;
+        this.unsubscribeEscapeKey = KeyboardShortcut.subscribe(shortcutConfig.shortcutKey, () => {
             if (this.props.modal.willAlertModalBecomeVisible) {
                 return;
             }
 
             Navigation.dismissModal();
-        }, [], true);
+        }, shortcutConfig.descriptionKey, shortcutConfig.modifiers, true);
 
         this.unsubscribeTransitionEnd = onScreenTransitionEnd(this.props.navigation, () => {
             this.setState({didScreenTransitionEnd: true});
@@ -120,6 +124,7 @@ class ScreenWrapper extends React.Component {
                                     })
                                     : this.props.children
                             }
+                            <KeyboardShortcutsModal />
                         </View>
                     );
                 }}

src/languages/en.js

@@ -774,4 +774,14 @@ export default {
     emojiPicker: {
         skinTonePickerLabel: 'Change default skin tone',
     },
+    keyboardShortcutModal: {
+        title: 'Keyboard Shortcuts',
+        subtitle: 'Save time with these handy keyboard shortcuts:',
+        shortcuts: {
+            openShortcutDialog: 'Opens the keyboard shortcuts dialog',
+            escape: 'Escape Dialogs',
+            search: 'Open search dialog',
+            newGroup: 'New group screen',
+        },
+    },
 };

src/languages/es.js

@@ -776,4 +776,14 @@ export default {
     emojiPicker: {
         skinTonePickerLabel: 'Elige el tono de piel por defecto',
     },
+    keyboardShortcutModal: {
+        title: 'Atajos de teclado',
+        subtitle: 'Ahorra tiempo con estos atajos de teclado:',
+        shortcuts: {
+            openShortcutDialog: 'Abre el cuadro de diálogo de métodos abreviados de teclado',
+            escape: 'Diálogos de escape',
+            search: 'Abrir diálogo de búsqueda',
+            newGroup: 'Nueva pantalla de grupo',
+        },
+    },
 };