converting Shortcuts to a React.Component to resolve issue with React…

… Fiber (storybookjs#1539)
oriSomething · Jul 31, 2017 · 413a77c · 413a77c
1 parent d83b588
commit 413a77c
Showing 1 changed file with 20 additions and 15 deletions.
diff --git a/lib/ui/src/modules/ui/components/shortcuts_help.js b/lib/ui/src/modules/ui/components/shortcuts_help.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { Component } from 'react';
 import ReactModal from 'react-modal';
 
 const commandStyle = {
@@ -93,21 +93,26 @@ Keys.propTypes = {
   shortcutKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
 
-export const Shortcuts = ({ appShortcuts }) => {
-  const shortcuts = appShortcuts.map(shortcut =>
-    <div key={shortcut.name}>
-      <Keys shortcutKeys={shortcut.keys} />
-      {shortcut.name}
-    </div>
-  );
+// eslint-disable-next-line react/prefer-stateless-function
+export class Shortcuts extends Component {
+  render() {
+    const { appShortcuts } = this.props;
 
-  return (
-    <div>
-      <h4 style={h4Style}>Keyboard Shortcuts</h4>
-      {shortcuts}
-    </div>
-  );
-};
+    const shortcuts = appShortcuts.map(shortcut =>
+      <div key={shortcut.name}>
+        <Keys shortcutKeys={shortcut.keys} />
+        {shortcut.name}
+      </div>
+    );
+
+    return (
+      <div>
+        <h4 style={h4Style}>Keyboard Shortcuts</h4>
+        {shortcuts}
+      </div>
+    );
+  }
+}
 
 Shortcuts.propTypes = {
   appShortcuts: PropTypes.arrayOf(