Added Keyboard shortcuts modal

src/components/KeyboardShortcutsModal.js

@@ -0,0 +1,115 @@
+import React from 'react';
+import {View, Text} from 'react-native';
+import _ from 'underscore';
+import HeaderWithCloseButton from './HeaderWithCloseButton';
+import Modal from './Modal';
+import CONST from '../CONST';
+import styles, {getKeyboardShortcutModalStyle} from '../styles/styles';
+import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import compose from '../libs/compose';
+import KeyboardShortcut from '../libs/KeyboardShortcut';
+import getOperatingSystem from '../libs/getOperatingSystem';
+
+const propTypes = {
+
+    /** prop to fetch screen width */
+    ...windowDimensionsPropTypes,
+
+    /** props to fetch translation functions */
+    ...withLocalizePropTypes,
+
+};
+
+class KeyboardShortcutsModal extends React.PureComponent {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            isOpen: false,
+        };
+    }
+
+    componentDidMount() {
+        let shortcutModifiers = ['control'];
+        if (getOperatingSystem() === CONST.OS.MAC_OS) {
+            shortcutModifiers = ['meta'];
+        }
+        this.unsubscribeShortCutModal = KeyboardShortcut.subscribe('?', () => {
+            this.toggleKeyboardShortcutModal(true);
+        }, shortcutModifiers, false, 'openShortcutDialog');
+    }
+
+    componentWillUnmount() {
+        if (this.unsubscribeShortCutModal) {
+            this.unsubscribeShortCutModal();
+        }
+    }
+
+
+    /**
+     * Set flag for model visibility
+     * @param {Boolean} flag
+     */
+    toggleKeyboardShortcutModal(flag) {
+        this.setState({isOpen: flag});
+    }
+
+    renderRow(shortcut, isFirstRow) {
+        return (
+            <View
+                style={[
+                    styles.keyboardShortcutTableRow,
+                    isFirstRow && styles.keyboardShortcutTableFirstRow,
+                ]}
+                key={shortcut.key}
+            >
+                <View style={[styles.dFlex, styles.p2, styles.keyboardShortcutTablePrefix]}>
+                    <Text>{shortcut.key}</Text>
+                </View>
+                <View style={[styles.flex1, styles.p2, styles.alignSelfStretch]}>
+                    <Text>{this.props.translate(`keyboardShortCutModal.shortcuts.${shortcut.descriptionKey}`)}</Text>
+                </View>
+            </View>
+        );
+    }
+
+
+    render() {
+        const shortcutMap = KeyboardShortcut.getKeyboardShortcutMap();
+        const shortcuts = [];
+        _.each(shortcutMap, (descriptionKey, key) => {
+            shortcuts.push({key, descriptionKey});
+        });
+
+        return (
+            <Modal
+                isVisible={this.state.isOpen}
+                type={CONST.MODAL.MODAL_TYPE.CENTERED}
+                containerStyle={styles.keyboardShortcutModalContainer}
+                onClose={() => this.toggleKeyboardShortcutModal(false)}
+            >
+                <HeaderWithCloseButton title={this.props.translate('keyboardShortCutModal.title')} onCloseButtonPress={() => this.toggleKeyboardShortcutModal(false)} />
+                <View style={[styles.p5, styles.pt0]}>
+                    <Text style={styles.mb5}>{this.props.translate('keyboardShortCutModal.subtitle')}</Text>
+                    <View style={[getKeyboardShortcutModalStyle(this.props.isSmallScreenWidth)]}>
+                        <View style={[styles.alignItemsCenter, styles.keyboardShortcutTableContainer]}>
+                            {shortcuts.map((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

@@ -70,6 +70,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,6 +7,7 @@ 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';
@@ -60,6 +61,7 @@ const defaultProps = {
 class ScreenWrapper extends React.Component {
     constructor(props) {
         super(props);
+
         this.state = {
             didScreenTransitionEnd: false,
         };
@@ -70,7 +72,7 @@ class ScreenWrapper extends React.Component {
             if (!this.props.modal.willAlertModalBecomeVisible) {
                 Navigation.dismissModal();
             }
-        }, [], true);
+        }, [], true, 'escape');
 
         this.unsubscribeTransitionEnd = onScreenTransitionEnd(this.props.navigation, () => {
             this.setState({didScreenTransitionEnd: true});
@@ -118,6 +120,8 @@ class ScreenWrapper extends React.Component {
                                     })
                                     : this.props.children
                             }
+                            <KeyboardShortcutsModal />
+
                         </View>
                     );
                 }}

src/languages/en.js

@@ -761,4 +761,14 @@ export default {
     emojiPicker: {
         skinTonePickerLabel: 'Change default skin tone',
     },
+    keyboardShortCutModal: {
+        title: 'Keyboard Shortcuts',
+        subtitle: 'Do you expense reports faster 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

@@ -763,4 +763,14 @@ export default {
     emojiPicker: {
         skinTonePickerLabel: 'Elige el tono de piel por defecto',
     },
+    keyboardShortCutModal: {
+        title: 'Atajos de teclado',
+        subtitle: '¿Realiza informes de gastos más rápido con estos prácticos 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',
+        },
+    },
 };

src/libs/KeyboardShortcut/index.js

@@ -1,6 +1,11 @@
 import _ from 'underscore';
 
 const events = {};
+const keyboardShortcutMap = {};
+
+function getKeyboardShortcutMap() {
+    return keyboardShortcutMap;
+}
 
 /**
  * Checks if an event for that key is configured and if so, runs it.
@@ -92,6 +97,8 @@ function getKeyCode(key) {
             return 13;
         case 'Escape':
             return 27;
+        case '?':
+            return 191;
         default:
             return key.charCodeAt(0);
     }
@@ -107,20 +114,56 @@ function unsubscribe(key) {
     events[keyCode].pop();
 }
 
+/**
+ * Add key to the shortcut map
+ *
+ * @param {String} key The key to watch, i.e. 'K' or 'Escape'
+ * @param {String|String[]} modifiers Can either be shift or control
+ * @param {String} descriptionKey Translation key for shortcut description
+ */
+function addKeyToMap(key, modifiers, descriptionKey) {
+    let shortcutKey = [key];
+    if (typeof modifiers === 'string') {
+        shortcutKey.unshift(modifiers);
+    } else if (Array.isArray(modifiers)) {
+        shortcutKey = [...modifiers, ...shortcutKey];
+    }
+
+    shortcutKey = shortcutKey.map((modifierKey) => {
+        switch (modifierKey) {
+            case 'control':
+                return 'Ctrl';
+            case 'meta':
+                return 'Cmd';
+            case 'shift':
+                return 'Shift';
+            default:
+                return modifierKey;
+        }
+    });
+
+    shortcutKey = shortcutKey.join(' + ');
+    keyboardShortcutMap[shortcutKey] = descriptionKey;
+}
+
+
 /**
  * Subscribes to a keyboard event.
  * @param {String} key The key to watch, i.e. 'K' or 'Escape'
  * @param {Function} callback The callback to call
  * @param {String|Array} modifiers Can either be shift or control
  * @param {Boolean} captureOnInputs Should we capture the event on inputs too?
+ * @param {String} descriptionKey Translation key for shortcut description
  * @returns {Function} clean up method
  */
-function subscribe(key, callback, modifiers = 'shift', captureOnInputs = false) {
+function subscribe(key, callback, modifiers = 'shift', captureOnInputs = false, descriptionKey) {
     const keyCode = getKeyCode(key);
     if (events[keyCode] === undefined) {
         events[keyCode] = [];
     }
     events[keyCode].push({callback, modifiers: _.isArray(modifiers) ? modifiers : [modifiers], captureOnInputs});
+
+    addKeyToMap(key, modifiers, descriptionKey);
     return () => unsubscribe(key);
 }
 
@@ -137,6 +180,7 @@ function subscribe(key, callback, modifiers = 'shift', captureOnInputs = false)
  */
 const KeyboardShortcut = {
     subscribe,
+    getKeyboardShortcutMap,
 };
 
 export default KeyboardShortcut;

src/libs/KeyboardShortcut/index.native.js

@@ -7,6 +7,7 @@ const KeyboardShortcut = {
         return () => {};
     },
     unsubscribe() {},
+    getKeyboardShortcutMap() {},
 };
 
 export default KeyboardShortcut;

src/libs/Navigation/AppNavigator/AuthScreens.js

@@ -206,10 +206,10 @@ class AuthScreens extends React.Component {
         // based on the key modifiers pressed and the operating system
         this.unsubscribeSearchShortcut = KeyboardShortcut.subscribe('K', () => {
             Navigation.navigate(ROUTES.SEARCH);
-        }, searchShortcutModifiers, true);
+        }, searchShortcutModifiers, true, 'search');
         this.unsubscribeGroupShortcut = KeyboardShortcut.subscribe('K', () => {
             Navigation.navigate(ROUTES.NEW_GROUP);
-        }, groupShortcutModifiers, true);
+        }, groupShortcutModifiers, true, 'newGroup');
     }
 
     shouldComponentUpdate(nextProps) {

src/styles/getModalStyles.js

@@ -3,7 +3,7 @@ import colors from './colors';
 import variables from './variables';
 import themeColors from './themes/default';
 
-export default (type, windowDimensions, popoverAnchorPosition = {}) => {
+export default (type, windowDimensions, popoverAnchorPosition = {}, containerStyle = {}) => {
     const {isSmallScreenWidth, windowWidth} = windowDimensions;
 
     let modalStyle = {
@@ -206,6 +206,8 @@ export default (type, windowDimensions, popoverAnchorPosition = {}) => {
             animationOut = 'slideOutDown';
     }
 
+    modalContainerStyle = {...modalContainerStyle, ...containerStyle};
+
     return {
         modalStyle,
         modalContainerStyle,