OHIF-332: Users should be able to see all available hotkeys and language settings in one place (#1895)

* OHIF-330: Update Modal Styles

* feat/ohif-332: finish raw ui

* feat/ohif-332: update mode configuration strategy

* feat/ohif-332: fix hotkey errors

* feat/ohif-332: update hotkey logic with recent merged changes

* feat/ohif-322: wrap

* feat/ohif-322: add disable state

* ohif-332: cr updates

* ohif-332: disable

* ohif-332: cr updates

* ohif-332: extract header component

* ohif-332: cr update to fix merge conflicts and design issue

Co-authored-by: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>

platform/ui/src/components/HotkeyField/HotkeyField.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { hotkeys } from '@ohif/core';
+import { Input } from '@ohif/ui';
+
+import { getKeys, formatKeysForInput } from './utils';
+
+/**
+ * HotkeyField
+ * Renders a hotkey input that records keys
+ *
+ * @param {object} props component props
+ * @param {Array[]} props.keys keys to be controlled by this field
+ * @param {boolean} props.disabled disables the field
+ * @param {function} props.onChange callback with changed values
+ * @param {string} props.className input classes
+ * @param {Array[]} props.modifierKeys
+ */
+const HotkeyField = ({ disabled, keys, onChange, className, modifierKeys }) => {
+  const inputValue = formatKeysForInput(keys);
+
+  const onInputKeyDown = event => {
+    event.stopPropagation();
+    event.preventDefault();
+
+    hotkeys.record(sequence => {
+      const keys = getKeys({ sequence, modifierKeys });
+      hotkeys.unpause();
+      onChange(keys);
+    });
+  };
+
+  const onFocus = () => {
+    hotkeys.pause();
+    hotkeys.startRecording();
+  };
+
+  return (
+    <Input
+      readOnly
+      disabled={disabled}
+      value={inputValue}
+      onKeyDown={onInputKeyDown}
+      onFocus={onFocus}
+      className={className}
+    />
+  );
+};
+
+HotkeyField.propTypes = {
+  keys: PropTypes.array.isRequired,
+  onChange: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  modifierKeys: PropTypes.array,
+  disabled: PropTypes.bool,
+};
+
+HotkeyField.defaultProps = {
+  disabled: false
+};
+
+export default HotkeyField;

platform/ui/src/components/HotkeyField/index.js

@@ -0,0 +1,3 @@
+import HotkeyField from './HotkeyField.jsx';
+
+export default HotkeyField;

platform/ui/src/components/HotkeyField/utils.js

@@ -0,0 +1,31 @@
+/**
+ * Take the pressed key array and return the readable string for the keys
+ *
+ * @param {Array} [keys=[]]
+ * @returns {string} string representation of an array of keys
+ */
+const formatKeysForInput = (keys = []) => keys.join('+');
+
+/**
+ * formats given keys sequence to insert the modifier keys in the first index of the array
+ * @param {string} sequence keys sequence from MouseTrap Record -> "shift+left"
+ * @returns {Array} keys in array-format -> ['shift','left']
+ */
+const getKeys = ({ sequence, modifierKeys }) => {
+  const keysArray = sequence.join(' ').split('+');
+  let keys = [];
+  let modifiers = [];
+  keysArray.forEach(key => {
+    if (modifierKeys && modifierKeys.includes(key)) {
+      modifiers.push(key);
+    } else {
+      keys.push(key);
+    }
+  });
+  return [...modifiers, ...keys];
+};
+
+export {
+  getKeys,
+  formatKeysForInput
+};