feat: Element Settings: Input Field - Enter closes Settings dialog #229

TimSusa · Oct 24, 2020 · 1754465 · 1754465
1 parent 4200af3
commit 1754465
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "midi-bricks-mono",
-  "version": "1.3.41.alpha-0",
+  "version": "1.3.41.alpha-1",
   "private": false,
   "license": "MIT",
   "repository": "https://github.com/TimSusa/midi-bricks-mono.git",

diff --git a/packages/midi-bricks-doc/package.json b/packages/midi-bricks-doc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "midi-bricks-doc",
-  "version": "1.3.41.alpha-0",
+  "version": "1.3.41.alpha-1",
   "private": true,
   "description": "Documentation for midi-bricks",
   "author": "TimSusa <[email protected]>",

diff --git a/packages/midi-bricks/package.json b/packages/midi-bricks/package.json
@@ -1,7 +1,7 @@
 {
   "name": "midi-bricks-electron",
   "productName": "MIDI-Bricks",
-  "version": "1.3.41.alpha-0",
+  "version": "1.3.41.alpha-1",
   "main": "./app/electron.js",
   "homepage": ".",
   "repository": "https://github.com/TimSusa/midi-bricks-mono.git",

diff --git a/packages/midi-bricks/src/components/ApplicationSettingsDialog.jsx b/packages/midi-bricks/src/components/ApplicationSettingsDialog.jsx
@@ -6,6 +6,7 @@ import DialogContent from '@material-ui/core/DialogContent'
 import DialogActions from '@material-ui/core/DialogActions'
 import Dialog from '@material-ui/core/Dialog'
 import { Typography } from '@material-ui/core'
+import keycode from 'keycode'
 
 export default ApplicationSettingsDialog
 
@@ -17,11 +18,12 @@ ApplicationSettingsDialog.propTypes = {
   value: PropTypes.string
 }
 
+let ApplicationSettings = null
 function ApplicationSettingsDialog(props) {
   const { isOpen = true, onClose, iconColor, ...other } = props
 
-  if (isOpen) {
-    var ApplicationSettings = React.lazy(() =>
+  if (isOpen && !ApplicationSettings) {
+    ApplicationSettings = React.lazy(() =>
       import('../pages/ApplicationSettings')
     )
   }
@@ -57,7 +59,7 @@ function ApplicationSettingsDialog(props) {
 
 function handleKeydown(onClose, e) {
   // Enter key will close dialog
-  if (e.keyCode === 13) {
+  if (keycode(e) === 'esc') {
     onClose()
     e.preventDefault()
   }

diff --git a/packages/midi-bricks/src/components/footer/Footer.jsx b/packages/midi-bricks/src/components/footer/Footer.jsx
@@ -37,6 +37,8 @@ Footer.propTypes = {
   thunkLiveModeToggle: PropTypes.func
 }
 
+let MidiSettingsDialog = null
+
 function Footer() {
   const dispatch = useDispatch()
   const theme = useTheme()
@@ -55,8 +57,8 @@ function Footer() {
   } = useSelector((state) => state.viewSettings)
 
   const isOpen = isSettingsDialogMode && lastFocusedIdx === lastFocusedPage
-  if (isOpen) {
-    var MidiSettingsDialog = React.lazy(() =>
+  if (isOpen && !MidiSettingsDialog) {
+    MidiSettingsDialog = React.lazy(() =>
       import('../midi-settings-dialog/MidiSettingsDialog')
     )
   }
@@ -118,9 +120,7 @@ function Footer() {
                         })
                       )
                     }}
-                    sliderEntry={pageTargets.find(
-                      (itemt) => itemt.id === lastFocusedPage
-                    )}
+                    i={lastFocusedPage}
                     iconColor={classes.iconColor}
                   />
                 </Suspense>

diff --git a/packages/midi-bricks/src/components/midi-settings-dialog/MidiSettingsDialog.jsx b/packages/midi-bricks/src/components/midi-settings-dialog/MidiSettingsDialog.jsx
@@ -7,6 +7,7 @@ import DialogActions from '@material-ui/core/DialogActions'
 import Dialog from '@material-ui/core/Dialog'
 import MidiSettings from '../midi-settings/MidiSettings'
 import { Typography } from '@material-ui/core'
+import keycode from 'keycode'
 
 function MidiSettingsDialog(props) {
   const { i, onClose, iconColor, ...other } = props
@@ -36,7 +37,7 @@ function MidiSettingsDialog(props) {
 
 function handleKeydown(onClose, e) {
   // Enter key will close dialog
-  if (e.keyCode === 13) {
+  if (keycode(e) === 'esc') {
     onClose()
     e.preventDefault()
   }

diff --git a/packages/midi-bricks/src/pages/ApplicationSettings.jsx b/packages/midi-bricks/src/pages/ApplicationSettings.jsx
@@ -102,7 +102,7 @@ function ApplicationSettings() {
         noPadding={false}
         onChange={() => setIsViewPanelExpanded(!isViewPanelExpanded)}
       >
-        {isWebMode && (
+        {/* {isWebMode && (
           <FormControlLabel
             control={
               <Tooltip title='Set to fullscreen, when switching to livemode'>
@@ -120,7 +120,7 @@ function ApplicationSettings() {
             }
             label='Live Mode Fullscreen'
           />
-        )}
+        )} */}
 
         {!isWebMode && (
           <FormControlLabel