From 46436b0575ea66e472c2ce9b7e6d5d03fdd2299b Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Wed, 13 Jun 2018 23:22:52 +0800
Subject: [PATCH] refactor(settings): key code & controlled component

---
 src/components/SettingsBar.js | 4 ++--
 src/utils/keyHelper.js        | 5 +----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/SettingsBar.js b/src/components/SettingsBar.js
index 2cae7b8..9c41f00 100644
--- a/src/components/SettingsBar.js
+++ b/src/components/SettingsBar.js
@@ -21,7 +21,7 @@ function detectOS() {
 }
 
 function friendlyFormatShortcut(shortcut) {
-  if (!shortcut) return
+  if (typeof shortcut !== 'string') return ''
   const OS = detectOS()
   if (OS === OperatingSystems.Windows) {
     return shortcut.replace(/meta/, 'win')
@@ -158,9 +158,9 @@ export default class SettingsBar extends React.Component {
                 <input
                   className={'toggle-shortcut-input form-control'}
                   placeholder={'focus here and press the shortcut keys'}
-                  default={''}
                   value={friendlyFormatShortcut(toggleShowSideBarShortcut)}
                   onKeyDown={this.onShortCutInputKeyDown}
+                  readOnly
                 />
                 <button className={'btn'} onClick={this.saveShortcut}>
                   Save
diff --git a/src/utils/keyHelper.js b/src/utils/keyHelper.js
index 89b4c29..292a0e2 100644
--- a/src/utils/keyHelper.js
+++ b/src/utils/keyHelper.js
@@ -35,15 +35,12 @@ function parse(keysString) {
 function parseKeyCode(code) {
   return code
     .toLowerCase()
-    .replace(/(left|right)$/, '')
     .replace(/^control$/, 'ctrl')
-    .replace(/^digit/, '')
-    .replace(/^key/, '')
 }
 
 function parseEvent(e) {
   const { altKey: alt, shiftKey: shift, metaKey: meta, ctrlKey: ctrl } = e
-  const code = parseKeyCode(e.code)
+  const code = parseKeyCode(e.key)
   const keys = { meta, ctrl, shift, alt, [code]: true }
   const combination = parse(
     Object.entries(keys)