Merge pull request #963 from metasfresh/dev-918

Keyboard Shortcuts for Done, Apply, Start and Cancel #918
metasfresh · Jul 3, 2017 · ef82229 · ef82229
2 parents 1d68f72 + 6db0cf7
commit ef82229
Show file tree

Hide file tree

Showing 7 changed files with 158 additions and 10 deletions.
diff --git a/src/actions/WindowActions.js b/src/actions/WindowActions.js
@@ -811,7 +811,7 @@ export function findRowByPropName(arr, name) {
 export function getItemsByProperty(arr, prop, value) {
     let ret = [];
 
-    arr.map((item) => {
+    arr && arr.map((item) => {
         if (item[prop] === value) {
             ret.push(item);
         }

diff --git a/src/components/app/DocumentList.js b/src/components/app/DocumentList.js
@@ -156,8 +156,10 @@ class DocumentList extends Component {
                 cachedSelection && !disconnectFromState &&
                     dispatch(selectTableItems(cachedSelection, windowType))
                 this.setState({
-                    cachedSelection: undefined
-                })
+                    refreshSelection: true
+                }, () => this.setState({
+                    refreshSelection: false
+                }))
             }else{
                 this.setState({
                     cachedSelection: selected
@@ -551,6 +553,7 @@ class DocumentList extends Component {
                                 disableOnClickOutside={clickOutsideLock}
                                 defaultSelected={cachedSelection ?
                                     cachedSelection : selected}
+                                refreshSelection={this.state.refreshSelection}
                                 queryLimitHit={data.queryLimitHit}
                                 doesSelectionExist={this.doesSelectionExist}
                                 {...{isIncluded, disconnectFromState, autofocus,

diff --git a/src/components/app/Modal.js b/src/components/app/Modal.js
@@ -7,6 +7,11 @@ import Window from '../Window';
 import Process from '../Process';
 import Indicator from './Indicator';
 import OverlayField from './OverlayField';
+import keymap from '../../keymap.js';
+import ModalContextShortcuts from '../shortcuts/ModalContextShortcuts';
+import { ShortcutManager } from 'react-shortcuts';
+import Tooltips from '../tooltips/Tooltips.js'
+const shortcutManager = new ShortcutManager(keymap);
 
 import {
     closeModal,
@@ -35,7 +40,8 @@ class Modal extends Component {
             isNewDoc: dataId === 'NEW',
             init: false,
             pending: false,
-            waitingFetch: false
+            waitingFetch: false,
+            isTooltipShow: false
         }
     }
 
@@ -86,6 +92,16 @@ class Modal extends Component {
         }
     }
 
+    toggleTooltip = (key = null) => {
+        this.setState({
+            isTooltipShow: key
+        });
+    }
+
+    getChildContext = () => {
+        return { shortcuts: shortcutManager }
+    }
+
     init = () => {
         const {
             dispatch, windowType, dataId, tabId, rowId, modalType, selected,
@@ -264,7 +280,7 @@ class Modal extends Component {
         } = this.props;
 
         const {
-            scrolled, pending, isNewDoc
+            scrolled, pending, isNewDoc, isTooltipShow
         } = this.state;
 
         return(
@@ -290,8 +306,19 @@ class Modal extends Component {
                             }
                             onClick={this.removeModal}
                             tabIndex={0}
+                            onMouseEnter={() =>
+                                this.toggleTooltip(keymap.MODAL_CONTEXT.CANCEL)
+                            }
+                            onMouseLeave={this.toggleTooltip}
                         >
                             {counterpart.translate('modal.actions.cancel')}
+                            {isTooltipShow === keymap.MODAL_CONTEXT.CANCEL &&
+                                <Tooltips
+                                    name={keymap.MODAL_CONTEXT.CANCEL}
+                                    action={counterpart.translate('modal.actions.cancel')}
+                                    type={''}
+                                />
+                            }
                         </button>}
                         <button
                             className={
@@ -301,11 +328,25 @@ class Modal extends Component {
                             }
                             onClick={this.handleClose}
                             tabIndex={0}
+                            onMouseEnter={() =>
+                                this.toggleTooltip(keymap.MODAL_CONTEXT.CLOSE)
+                            }
+                            onMouseLeave={this.toggleTooltip}
                         >
                             {modalType === 'process' ? 
                                 counterpart.translate('modal.actions.cancel') : 
                                 counterpart.translate('modal.actions.done')
                             }
+                            {isTooltipShow === keymap.MODAL_CONTEXT.CLOSE &&
+                                <Tooltips
+                                    name={keymap.MODAL_CONTEXT.CLOSE}
+                                    action={modalType === 'process' ? 
+                                        counterpart.translate('modal.actions.cancel') : 
+                                        counterpart.translate('modal.actions.done')
+                                    }
+                                    type={''}
+                                />
+                            }
                         </button>
                         {modalType === 'process' &&
                             <button
@@ -316,8 +357,19 @@ class Modal extends Component {
                                 }
                                 onClick={this.handleStart}
                                 tabIndex={0}
+                                onMouseEnter={() =>
+                                    this.toggleTooltip(keymap.MODAL_CONTEXT.START)
+                                }
+                                onMouseLeave={this.toggleTooltip}
                             >
                                 {counterpart.translate('modal.actions.start')}
+                                {isTooltipShow === keymap.MODAL_CONTEXT.START &&
+                                    <Tooltips
+                                        name={keymap.MODAL_CONTEXT.START}
+                                        action={counterpart.translate('modal.actions.start')}
+                                        type={''}
+                                    />
+                                }
                             </button>
                         }
                     </div>
@@ -332,6 +384,11 @@ class Modal extends Component {
                 >
                     {this.renderModalBody()}
                 </div>
+                <ModalContextShortcuts
+                    start={modalType === 'process' ? this.handleStart : ''}
+                    close={this.handleClose}
+                    cancel={isNewDoc ? this.removeModal : ''}
+                />
             </div>
         </div>
         )
@@ -376,6 +433,10 @@ class Modal extends Component {
     }
 }
 
+Modal.childContextTypes = {
+    shortcuts: PropTypes.object.isRequired
+}
+
 Modal.propTypes = {
     dispatch: PropTypes.func.isRequired
 };

diff --git a/src/components/app/RawModal.js b/src/components/app/RawModal.js
@@ -11,12 +11,20 @@ import {
     deleteView
 } from '../../actions/AppActions';
 
+import keymap from '../../keymap.js';
+import ModalContextShortcuts from '../shortcuts/ModalContextShortcuts';
+import { ShortcutManager } from 'react-shortcuts';
+import Tooltips from '../tooltips/Tooltips.js';
+import counterpart from 'counterpart';
+const shortcutManager = new ShortcutManager(keymap);
+
 class RawModal extends Component {
     constructor(props) {
         super(props);
 
         this.state = {
-            scrolled: false
+            scrolled: false,
+            isTooltipShow: false
         }
     }
 
@@ -41,6 +49,16 @@ class RawModal extends Component {
             modalContent.removeEventListener('scroll', this.handleScroll);
     }
 
+    toggleTooltip = (visible) => {
+        this.setState({
+            isTooltipShow: visible
+        });
+    }
+
+    getChildContext = () => {
+        return { shortcuts: shortcutManager }
+    }
+
     handleScroll = (event) => {
         const scrollTop = event.srcElement.scrollTop;
 
@@ -74,7 +92,7 @@ class RawModal extends Component {
         } = this.props;
 
         const {
-            scrolled
+            scrolled, isTooltipShow
         } = this.state;
 
         return (
@@ -100,8 +118,19 @@ class RawModal extends Component {
                                 className="btn btn-meta-outline-secondary btn-distance-3 btn-md"
                                 onClick={this.handleClose}
                                 tabIndex={0}
+                                onMouseEnter={() =>
+                                    this.toggleTooltip(true)
+                                }
+                                onMouseLeave={() => this.toggleTooltip(false)}
                             >
-                                Done
+                                {counterpart.translate('modal.actions.done')}
+                            {isTooltipShow &&
+                                <Tooltips
+                                    name={keymap.MODAL_CONTEXT.CLOSE}
+                                    action={counterpart.translate('modal.actions.done')}
+                                    type={''}
+                                />
+                            }
                             </button>
                         </div>
                     </div>
@@ -112,6 +141,9 @@ class RawModal extends Component {
                     >
                         {children}
                     </div>
+                    <ModalContextShortcuts
+                        close={this.handleClose}
+                    />
                 </div>
             </div>
         )
@@ -122,6 +154,10 @@ const mapStateToProps = state => ({
     modalVisible: state.windowHandler.modal.visible || false
 });
 
+RawModal.childContextTypes = {
+    shortcuts: PropTypes.object.isRequired
+}
+
 RawModal.propTypes = {
     dispatch: PropTypes.func.isRequired,
     modalVisible: PropTypes.bool

diff --git a/src/components/shortcuts/ModalContextShortcuts.js b/src/components/shortcuts/ModalContextShortcuts.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import { Shortcuts } from 'react-shortcuts';
+
+class ModalContextShortcuts extends Component {
+    constructor(props){
+        super(props);
+    }
+    handleShortcuts = (action, event) => {
+        const {start, close, cancel} = this.props;
+
+        switch (action) {
+            case 'START':
+                event.preventDefault();
+                start();
+                break;
+            case 'CLOSE':
+                event.preventDefault();
+                close();
+                break;
+            case 'CANCEL':
+                event.preventDefault();
+                cancel();
+                break;
+        }
+    }
+
+    render() {
+        return (
+        <Shortcuts
+            name="MODAL_CONTEXT"
+            handler = { this.handleShortcuts }
+            targetNodeSelector = "body"
+            isolate = { true }
+            preventDefault = { true }
+            stopPropagation = { true }
+        />
+        )
+    }
+}
+
+export default ModalContextShortcuts;
diff --git a/src/components/table/Table.js b/src/components/table/Table.js
@@ -69,7 +69,7 @@ class Table extends Component {
     componentDidUpdate(prevProps, prevState) {
         const {
             mainTable, open, rowData, defaultSelected, disconnectFromState,
-            dispatch, type
+            dispatch, type, refreshSelection
         } = this.props;
 
         const {
@@ -97,7 +97,9 @@ class Table extends Component {
 
         if(
             JSON.stringify(prevProps.defaultSelected) !==
-            JSON.stringify(defaultSelected)
+            JSON.stringify(defaultSelected) ||
+            JSON.stringify(prevProps.refreshSelection) !==
+            JSON.stringify(refreshSelection) && refreshSelection
         ){
             this.setState({
                 selected: defaultSelected

diff --git a/src/keymap.js b/src/keymap.js
@@ -47,5 +47,10 @@ export default {
     },
     DOCUMENT_STATUS_CONTEXT: {
         COMPLETE_STATUS: mod + '+' + 'u'
+    },
+    MODAL_CONTEXT: {
+        START: mod + '+' + 's',
+        CLOSE: mod + '+' + 'c',
+        CANCEL: mod + '+' + 'q'
     }
 }