From 413a77ca42b5f36810b814b23b8a9f5826b4be07 Mon Sep 17 00:00:00 2001
From: Ori Livni <ori@orisomething.com>
Date: Mon, 31 Jul 2017 15:06:29 +0300
Subject: [PATCH] converting Shortcuts to a React.Component to resolve issue
 with React Fiber (#1539)

---
 .../modules/ui/components/shortcuts_help.js   | 35 +++++++++++--------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/lib/ui/src/modules/ui/components/shortcuts_help.js b/lib/ui/src/modules/ui/components/shortcuts_help.js
index 40b572d2dd08..d139fd22f279 100755
--- 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(