fix: Persisting element settings changes

TimSusa · May 31, 2019 · 70493ff · 70493ff
1 parent b3ec5f9
commit 70493ff
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 24 deletions.
diff --git a/packages/midi-bricks/src/components/channel-strip-list/ChannelStripList.jsx b/packages/midi-bricks/src/components/channel-strip-list/ChannelStripList.jsx
@@ -30,7 +30,7 @@ function ChannelStripList(props) {
   const classes = makeStyles(styles, { withTheme: true })()
   const {
     actions,
-    sliderList =[],
+    sliderList = [],
     monitorVal: { driver = 'None', cC = 'None', channel = 'None' } = {},
     viewSettings: {
       pageType,
@@ -41,7 +41,8 @@ function ChannelStripList(props) {
       isSettingsDialogMode = false,
       // isLiveMode = false,
       isMidiLearnMode = false,
-      lastFocusedIdxs=[],
+      lastFocusedIdxs = [],
+      lastFocusedPage,
       rowHeight,
       columns,
       isAutoSize,
@@ -103,7 +104,10 @@ function ChannelStripList(props) {
                 e.stopPropagation()
               }}
               onClick={
-                !isLayoutMode && isSettingsMode && !isSettingsDialogMode && !lastFocusedIdxs.includes(i)
+                !isLayoutMode &&
+                isSettingsMode &&
+                !isSettingsDialogMode &&
+                !lastFocusedIdxs.includes(i)
                   ? (e) => {
                     actions.setLastFocusedIndex({ i })
                     e.preventDefault()
@@ -123,9 +127,7 @@ function ChannelStripList(props) {
                 }
               }
             >
-              <SizeMe 
-                monitorHeight
-              >
+              <SizeMe monitorHeight>
                 {({ size }) => {
                   return (
                     <div
@@ -183,7 +185,12 @@ function ChannelStripList(props) {
                                 isFocused
                               )
                             }
-                            toggleSettings={toggleSettings.bind(this, actions)}
+                            toggleSettings={toggleSettings.bind(
+                              this,
+                              lastFocusedPage,
+                              i,
+                              actions
+                            )}
                             sliderEntry={sliderEntry}
                           />
                         </span>
@@ -202,22 +209,24 @@ function ChannelStripList(props) {
       <Typography variant='h4' className={classes.noMidiTypography}>
         <br />
         <br />
-        Dear user, 
-        I suggest for you to load an example preset.
+        Dear user, I suggest for you to load an example preset.
         <br />
         <br />
         <Button
           onClick={() =>
             // TODO: use thunkLoadFile
-            props.actions.loadFile({ content: preset, presetName: 'APC-40 Preset' })
+            props.actions.loadFile({
+              content: preset,
+              presetName: 'APC-40 Preset'
+            })
           }
         >
           LOAD EXAMPLE PRESET
         </Button>
         <br />
         <br />
-        Otherwise, feel free to play arround and add a page or buttons.
-        You can do this with the button at the right top in the AppBar → ↑
+        Otherwise, feel free to play arround and add a page or buttons. You can
+        do this with the button at the right top in the AppBar → ↑
       </Typography>
     )
   }
@@ -329,8 +338,8 @@ function styles(theme) {
   }
 }
 
-function toggleSettings(actions, { isSettingsDialogMode }) {
-  actions.toggleSettingsDialogMode({ isSettingsDialogMode })
+function toggleSettings(lastFocusedPage, i, actions, { isSettingsDialogMode }) {
+  actions.toggleSettingsDialogMode({ i, lastFocusedPage, isSettingsDialogMode })
 }
 
 function mapStateToProps({

diff --git a/packages/midi-bricks/src/components/footer/Footer.jsx b/packages/midi-bricks/src/components/footer/Footer.jsx
@@ -96,7 +96,8 @@ function Footer(props) {
                   actions.setLastFocusedIndex({ i: '' })
                   actions.toggleSettingsDialogMode({
                     i: '',
-                    isSettingsDialogMode: false
+                    isSettingsDialogMode: false,
+                    lastFocusedPage
                   })
                 }}
                 sliderEntry={pageTargets.find(

diff --git a/packages/midi-bricks/src/components/footer/FooterButton.jsx b/packages/midi-bricks/src/components/footer/FooterButton.jsx
@@ -38,7 +38,8 @@ export function FooterButton(props) {
             actions.setLastFocusedPage({ lastFocusedPage: id })
             actions.toggleSettingsDialogMode({
               i: id,
-              isSettingsDialogMode: true
+              isSettingsDialogMode: true,
+              lastFocusedPage: id
             })
           }
           : handleClick.bind(this, {

diff --git a/packages/midi-bricks/src/components/midi-settings/MidiSettings.jsx b/packages/midi-bricks/src/components/midi-settings/MidiSettings.jsx
@@ -59,6 +59,7 @@ function MidiSettings(props) {
         classes={classes}
         label={type === undefined ? pageTarget.label : label}
         i={i}
+        lastFocusedPage={lastFocusedPage}
         actions={actions}
         type={type}
       />

diff --git a/packages/midi-bricks/src/components/midi-settings/elements/DriverEmtpyRedirectButton.jsx b/packages/midi-bricks/src/components/midi-settings/elements/DriverEmtpyRedirectButton.jsx
@@ -15,6 +15,7 @@ export function DriverEmtpyRedirectButton({
           toggleSettingsDialogMode({
             i,
             isSettingsDialogMode: false,
+            lastFocusedPage: i
           })
           togglePage({
             pageType: PAGE_TYPES.MIDI_DRIVER_MODE,

diff --git a/packages/midi-bricks/src/components/midi-settings/elements/MidiSettingsLabelInput.jsx b/packages/midi-bricks/src/components/midi-settings/elements/MidiSettingsLabelInput.jsx
@@ -15,6 +15,7 @@ MidiSettingsLabelInput.propTypes = {
 export function MidiSettingsLabelInput({
   label,
   i,
+  lastFocusedPage,
   classes,
   actions,
   type
@@ -30,25 +31,27 @@ export function MidiSettingsLabelInput({
         type='label'
         name={`input-label-name-${i}`}
         value={label}
-        onChange={handleLabelChange.bind(this, i, actions, type)}
+        onChange={handleLabelChange.bind(this, lastFocusedPage, i, actions, type)}
         autoFocus
       />
     </FormControl>
   )
 }
 
-function handleLabelChange(i, actions, type, e) {
+function handleLabelChange(lastFocusedPage, i, actions, type, e) {
   e.preventDefault()
   e.stopPropagation()
 
   if (type === undefined) {
     actions.setPageTargetSettings({
-      label: e.target.value
+      label: e.target.value,
+      lastFocusedPage
     })
   } else {
     actions.changeLabel({
       i,
-      val: e.target.value
+      val: e.target.value,
+      lastFocusedPage
     })
   }
 }
diff --git a/packages/midi-bricks/src/pages/GlobalSettingsPage.jsx b/packages/midi-bricks/src/pages/GlobalSettingsPage.jsx
@@ -47,6 +47,7 @@ function GlobalSettingsPage(props) {
     sliderList,
     viewSettings: {
       isSettingsDialogMode,
+      lastFocusedPage,
       lastFocusedIdx,
       availableDrivers: { outputs: chosenOutputs, inputs: chosenInputs },
       pageTargets
@@ -111,7 +112,8 @@ function GlobalSettingsPage(props) {
                         open
                         onClose={actions.toggleSettingsDialogMode.bind(this, {
                           i,
-                          isSettingsDialogMode: false
+                          isSettingsDialogMode: false,
+                          lastFocusedPage
                         })}
                         sliderEntry={sliderEntry}
                       />
@@ -204,7 +206,8 @@ function GlobalSettingsPage(props) {
                           actions.setLastFocusedIndex({ i })
                           actions.toggleSettingsDialogMode({
                             i,
-                            isSettingsDialogMode: true
+                            isSettingsDialogMode: true,
+                            lastFocusedPage
                           })
                         }}
                       >

diff --git a/packages/midi-bricks/src/reducers/view-settings.js b/packages/midi-bricks/src/reducers/view-settings.js
@@ -255,10 +255,10 @@ export const viewSettings = {
     })
   },
   [ActionTypeViewSettings.TOGGLE_SETTINGS_DIALOG_MODE](state, action) {
-    const { isSettingsDialogMode, i } = action.payload
+    const { isSettingsDialogMode, i, lastFocusedPage } = action.payload
     return createNextState(state, (draftState) => {
       draftState.isSettingsDialogMode = isSettingsDialogMode
-      draftState.lastFocusedPage = i
+      draftState.lastFocusedPage = lastFocusedPage
       draftState.lastFocusedIdx = i
       return draftState
     })