Added beginners drawer/form of Settings screen

Author: tedkulp

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
   "editor.formatOnSave": true,
   "eslint.enable": true,
-  "editor.tabSize": 2
+  "editor.tabSize": 2,
+  "git.autofetch": true
 }

package-lock.json

@@ -58,6 +58,8 @@
     "electron-devtools-installer": "^2.2.4",
     "electron-squirrel-startup": "^1.0.0",
     "elgato-stream-deck": "github:tedkulp/node-elgato-stream-deck",
+    "formik": "^1.5.8",
+    "formik-material-ui": "0.0.20",
     "jimp": "^0.6.4",
     "lodash": "^4.17.15",
     "mobx": "^5.13.0",

package.json

@@ -7,6 +7,7 @@ import CssBaseline from '@material-ui/core/CssBaseline';
 import Paper from '@material-ui/core/Paper';
 
 import ConfigGrid from './ConfigGrid';
+import Drawer from './Drawer';
 
 const { ipcRenderer } = window.require('electron');
 
@@ -56,6 +57,7 @@ export default _props => {
       <main className={classes.layout}>
         <Paper className={classes.paper}>
           <ConfigGrid />
+          <Drawer />
         </Paper>
       </main>
     </React.Fragment>

src/components/Config.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/styles';
-import { useStoreState, useStoreActions } from 'easy-peasy';
+import { useStoreActions } from 'easy-peasy';
 
 import Grid from '@material-ui/core/Grid';
 import Paper from '@material-ui/core/Paper';
@@ -17,19 +17,16 @@ const useStyles = makeStyles(_theme => ({
 
 const ConfigGridCell = ({ col, row }) => {
   const classes = useStyles();
-  const _currentIndex = useStoreState(state => state.currentIndex);
   const setCurrentIndex = useStoreActions(actions => actions.setCurrentIndex);
-  // const clearCurrentIndex = useStoreActions(actions => actions.clearCurrentIndex);
 
   col = col || 1;
   row = row || 1;
 
+  const currentIndex = `${col},${row}`;
+
   return (
-    <Grid item xs={2} onClick={() => setCurrentIndex(`${row},${col}`)}>
-      <Paper className={classes.cell}>
-        {/* eslint-disable-next-line react/jsx-one-expression-per-line */}
-        {row},{col}
-      </Paper>
+    <Grid item xs={2} onClick={() => setCurrentIndex(currentIndex)}>
+      <Paper className={classes.cell}>{currentIndex}</Paper>
     </Grid>
   );
 };

src/components/ConfigGridCell.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+// import { get } from 'lodash';
+import { useStoreState, useStoreActions } from 'easy-peasy';
+import { Formik, Field } from 'formik';
+import { TextField, Select } from 'formik-material-ui';
+import { makeStyles } from '@material-ui/core/styles';
+
+import Drawer from '@material-ui/core/Drawer';
+import FormControl from '@material-ui/core/FormControl';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+
+const useStyles = makeStyles({
+  field: {
+    marginBottom: '1em'
+  },
+  container: {
+    padding: '1em',
+    width: 350
+  }
+});
+
+const defaultButton = {
+  name: '',
+  type: 'switch'
+};
+
+export default () => {
+  const classes = useStyles();
+  const currentIndex = useStoreState(state => state.currentIndex);
+  const currentButton = useStoreState(state => state.currentButton || defaultButton);
+  const clearCurrentIndex = useStoreActions(actions => actions.clearCurrentIndex);
+
+  return (
+    <Drawer open={!!currentIndex} onClose={clearCurrentIndex} anchor="right">
+      <div className={classes.container}>
+        <Formik initialValues={currentButton}>
+          {({ handleSubmit }) => (
+            <form onSubmit={handleSubmit}>
+              <Field
+                name="name"
+                label="Name"
+                component={TextField}
+                fullWidth
+                className={classes.field}
+              />
+              <FormControl className={classes.field} fullWidth>
+                <InputLabel htmlFor="type">Type</InputLabel>
+                <Field name="type" select fullWidth component={Select}>
+                  <MenuItem value="switch">Switch Scene</MenuItem>
+                  <MenuItem value="toggle">Toggle Scene</MenuItem>
+                  <MenuItem value="toggleSource">Toggle Source</MenuItem>
+                  <MenuItem value="toggleSceneSource">Toggle Scene Source</MenuItem>
+                  <MenuItem value="momentary">Momentary</MenuItem>
+                  <MenuItem value="cycle">Cycle (Not Implemented)</MenuItem>
+                  <MenuItem value="bindKey">Global Keypress</MenuItem>
+                  <MenuItem value="toggleStudio">Toggle Studio Mode</MenuItem>
+                  <MenuItem value="previewTransition">Transition</MenuItem>
+                </Field>
+              </FormControl>
+            </form>
+          )}
+        </Formik>
+      </div>
+    </Drawer>
+  );
+};