fix: Combined Hotkeys for special characters (#1233)

* fix: Combined Hotkeys for special characters * add record method to hotkey manager * fix record plugin * remove unused component * add record to modal props * rename record method * replace handlers to use hotkeyRecord * fix combined keys * change expected result count from 18 to 17 * autoformat * Remove duplicate test, that was testing the wrong things; fix label; update configs * Revert "Remove duplicate test, that was testing the wrong things; fix label; update configs" This reverts commit 4292f4fe67351962d61cae623b920dcbd87dd71d. * Fix the record plugin's registration * fix exposed record method usage * adding logging for info level items * Hotkey definitions don't need to be globally reactive; use localstorage/appconfig as sources of truth; not redux * Tidy up test * Remove unused code from UserPreferencesForm * Log info when we run a command * fix hotkey preference restore * use application configured hotkeys if there are no user preferred * Avoid logging circular ref * Fix callouts * Fix small issue with array * Fix langua issue after refactor and merge * Refactor on recordCurrentCombo as Rodrigo did before * Separating components in 2 files * WIP Refactor to simplify the user preferences and move into each form the save and controll functionalities * Remove context * Remove unused import * Initial work on Field treatment * Refactor General preferences * Small refactor removing type from HotkeyField * small update on style * Refactor and layout fixed * Make hotkeys preferences working with old hotkeys row * Move error handling out of hotkey row/input component * WIP custom form * Moving validation function to component * Exposing hotkeyRecord as it does not depend on HotkeyManager Class * Making hotkeyField as much detached possible from parent component * Small refactors * Refactor on user preferences * Clean up into the changes * Small fix to let save working * Style finish * move about docs into about folder * Fix double tap on single keys * Style refactor * Remove log * Fix log issues on unit tests * Fix unit test breaking on ohif/core index * Fixing hotkeys unpause unit test issue * Rename file to adopt lowercase * Rename file to adopt lowercase * Fixing callouts * Big refactor miving some of the components into viewer and creating small components into ohif/ui * Typo on folder name * Updating ohif ui docs * Remove comments * Fix binding of combo keys * Fix some cypress tests failures * Fixing onCancel button * Fixing e2e tests * Small style update * Fixing unit tests failing after fix issue * Remove some not used code * Remove left over after debug * Adding prevent default on hotkeys events * Fixinf existing hotkeys validator with 3 keys pressed * Exposing hotkeys as root level on ohif-core * Clean up * Exposing all availableLanguages with labels and fixing an issue on language switcher * Fixing e2e cypress tests * Preveinting some simple errors * Treating error once we try to set hotkey definitions * Adding ui notification on setHotkeys errors * Implementing a service queue request to hold until functions are implemented * Making sure toFixed is only called on Numbers Co-authored-by: Danny Brown <danny.ri.brown@gmail.com> Co-authored-by: Gustavo André Lelis <galelis@gmail.com>
2020-02-12 15:35:04 -05:00
1 parent 9a62c28b3f
commit 2f30e7a821
@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+// Style
+import './TabComponents.styl';
+
+/**
+ * Take name of the tab and create the data-cy value for it
+ *
+ * @param {string} [name=''] tab name
+ * @returns {string} data-cy value
+ */
+const getDataCy = (name = '') => {
+  return name
+    .split(' ')
+    .join('-')
+    .toLowerCase();
+};
+
+/**
+ * Single tab data information
+ *
+ * @typedef {Object} tabData
+ * @property {string} name - name of the tab
+ * @property {Object} Component - tab component to be rendered
+ * @property {Object} customProps - tab custom properties
+ * @property {bool} hidden - bool to define if tab is hidden of not
+ */
+
+/**
+ * Take a list of components data and render then into tabs
+ *
+ * @param {Object} props
+ * @param {[tabData]} props.tabs array of tab data
+ * @param {Object} props.customProps common custom properties
+ */
+function TabComponents({ tabs, customProps = {} }) {
+  const [currentTabIndex, setCurrentTabIndex] = useState(0);
+
+  return (
+    tabs.length > 0 && (
+      <div className="TabComponents">
+        <div className="TabComponents_tabHeader">
+          <div className="TabComponents_tabHeader_selector">
+            <div className="dialog-separator-after">
+              <ul className="nav nav-tabs">
+                {tabs.map((tab, index) => {
+                  const { name, hidden } = tab;
+                  return (
+                    !hidden && (
+                      <li
+                        key={index}
+                        onClick={() => {
+                          setCurrentTabIndex(index);
+                        }}
+                        className={classnames(
+                          'nav-link',
+                          index === currentTabIndex && 'active'
+                        )}
+                        data-cy={getDataCy(name)}
+                      >
+                        <button>{name}</button>
+                      </li>
+                    )
+                  );
+                })}
+              </ul>
+            </div>
+          </div>
+        </div>
+        {tabs.map((tab, index) => {
+          const { Component, customProps: tabCustomProps, hidden } = tab;
+          return (
+            !hidden && (
+              <div
+                key={index}
+                className={classnames(
+                  'TabComponents_content',
+                  index === currentTabIndex && 'active'
+                )}
+              >
+                <Component {...customProps} {...tabCustomProps} />
+              </div>
+            )
+          );
+        })}
+      </div>
+    )
+  );
+}
+
+TabComponents.propTypes = {
+  tabs: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      Component: PropTypes.any,
+      customProps: PropTypes.object,
+      hidden: PropTypes.bool,
+    })
+  ),
+  customProps: PropTypes.object,
+};
+
+export { TabComponents };