Allow custom keys for slider monitor

packages/redux-slider-monitor/README.md

@@ -43,6 +43,8 @@ Pass the `keyboardEnabled` prop to use these shortcuts
 
 `ctrl+]`: step forward
 
+You can override these shortcuts with the `playKey`, `stepBackwardKey`, and `stepForwardKey` respectively. These props are parsed by [parse-key](https://github.com/thlorenz/parse-key), just like in `DockMonitor`.
+
 ### Running Examples
 
 You can do this:

packages/redux-slider-monitor/package.json

@@ -45,6 +45,7 @@
   },
   "dependencies": {
     "devui": "^1.0.0-3",
+    "parse-key": "^0.2.1",
     "prop-types": "^15.5.8",
     "redux-devtools-themes": "^1.0.0"
   }

packages/redux-slider-monitor/src/SliderMonitor.js

@@ -6,6 +6,7 @@ import { Toolbar, Divider } from 'devui/lib/Toolbar';
 import Slider from 'devui/lib/Slider';
 import Button from 'devui/lib/Button';
 import SegmentedControl from 'devui/lib/SegmentedControl';
+import parseKey from 'parse-key';
 
 import reducer from './reducers';
 import SliderButton from './SliderButton';
@@ -29,7 +30,10 @@ export default class SliderMonitor extends (PureComponent || Component) {
     select: PropTypes.func.isRequired,
     hideResetButton: PropTypes.bool,
     theme: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-    keyboardEnabled: PropTypes.bool
+    keyboardEnabled: PropTypes.bool,
+    playKey: PropTypes.string,
+    stepBackwardKey: PropTypes.string,
+    stepForwardKey: PropTypes.string
   };
 
   static defaultProps = {
@@ -76,12 +80,52 @@ export default class SliderMonitor extends (PureComponent || Component) {
     this.props.dispatch(reset());
   };
 
+  matchesKey = (key, event) => {
+    if (!key) {
+      return false;
+    }
+    const parsedKey = parseKey(key);
+    const charCode = event.keyCode || event.which;
+    const char = String.fromCharCode(charCode);
+    return parsedKey.name.toUpperCase() === char.toUpperCase() &&
+      parsedKey.alt === event.altKey &&
+      parsedKey.ctrl === event.ctrlKey &&
+      parsedKey.meta === event.metaKey &&
+      parsedKey.shift === event.shiftKey;
+  };
+
+  isPlayKey = event => {
+      if (this.props.playKey) {
+          return this.matchesKey(this.props.playKey, event);
+      } else {
+          // ctrl+j
+          return event.ctrlKey && event.keyCode === 74;
+      }
+  };
+
+  isStepBackwardKey = event => {
+      if (this.props.stepBackwardKey) {
+          return this.matchesKey(this.props.stepBackwardKey, event);
+      } else {
+          // ctrl+]
+          return event.ctrlKey && event.keyCode === 219;
+      }
+  };
+
+  isStepForwardKey = event => {
+      if (this.props.stepForwardKey) {
+          return this.matchesKey(this.props.stepForwardKey, event);
+      } else {
+          // ctrl+[
+          return event.ctrlKey && event.keyCode === 221;
+      }
+  };
+
   handleKeyPress = event => {
     if (!this.props.keyboardEnabled) {
       return null;
     }
-    if (event.ctrlKey && event.keyCode === 74) {
+    if (this.isPlayKey(event)) {
-      // ctrl+j
       event.preventDefault();
 
       if (this.state.timer) {
@@ -93,12 +137,10 @@ export default class SliderMonitor extends (PureComponent || Component) {
       } else {
         this.startReplay();
       }
-    } else if (event.ctrlKey && event.keyCode === 219) {
+    } else if (this.isStepBackwardKey(event)) {
-      // ctrl+[
       event.preventDefault();
       this.stepLeft();
-    } else if (event.ctrlKey && event.keyCode === 221) {
+    } else if (this.isStepForwardKey(event)) {
-      // ctrl+]
       event.preventDefault();
       this.stepRight();
     }