From c147981a2fde6dbaacff76b5cd6ff22722ef13dc Mon Sep 17 00:00:00 2001
From: "[poww10s]" <[theironminer@gmail.com]>
Date: Wed, 18 Nov 2020 16:41:44 -0500
Subject: [PATCH] kinda hacky way of implementing checkboxes

---
 src/features/helpers/Helpers.js      | 16 ++++--
 src/features/timbre/parameters/EG.js | 77 ++++++++++++++++++++++++++++
 2 files changed, 90 insertions(+), 3 deletions(-)
 create mode 100644 src/features/timbre/parameters/EG.js

diff --git a/src/features/helpers/Helpers.js b/src/features/helpers/Helpers.js
index 932e075..2548c25 100644
--- a/src/features/helpers/Helpers.js
+++ b/src/features/helpers/Helpers.js
@@ -4,8 +4,8 @@ const Slider = (props) => {
     return (
         <input
             type="range"
-            min="0"
-            max="127"
+            min={props.min}
+            max={props.max}
             value={props.parameter}
             onChange={(e) => props.onChange(e.target.value)}
         />
@@ -27,4 +27,14 @@ const SelectList = (props) => {
     );
 };
 
-export default { Slider, SelectList };
+const Checkbox = (props) => {
+    return (
+        <input
+            type="checkbox"
+            checked={props.parameter}
+            onChange={(e) => props.onChange(e.target.value)}
+        />
+    );
+};
+
+export { Slider, SelectList, Checkbox };
diff --git a/src/features/timbre/parameters/EG.js b/src/features/timbre/parameters/EG.js
new file mode 100644
index 0000000..c9672e9
--- /dev/null
+++ b/src/features/timbre/parameters/EG.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { selectById, parameterUpdated } from './parameterSlice.js';
+import { Slider, Checkbox } from '../../helpers/Helpers';
+
+export default function EG(props) {
+    const parameters = useSelector((state) => selectById(state, props.id));
+    const dispatch = useDispatch();
+
+    return (
+        <div>
+            <Slider
+                parameter={parameters.attack}
+                min="0"
+                max="127"
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { attack: value },
+                        })
+                    )
+                }
+            />
+            <Slider
+                parameter={parameters.decay}
+                min="0"
+                max="127"
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { decay: value },
+                        })
+                    )
+                }
+            />
+            <Slider
+                parameter={parameters.sustain}
+                min="0"
+                max="127"
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { sustain: value },
+                        })
+                    )
+                }
+            />
+            <Slider
+                parameter={parameters.release}
+                min="0"
+                max="127"
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { release: value },
+                        })
+                    )
+                }
+            />
+            <Checkbox
+                parameter={parameters.egReset}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { egReset: !parameters.egReset },
+                        })
+                    )
+                }
+            />
+        </div>
+    );
+}