add ModFX Component

2020-11-20 22:56:49 -05:00
parent c8463a0db8
commit c08fb8ea50
3 changed files with 57 additions and 0 deletions
@@ -0,0 +1,57 @@
+import React from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { selectById, parameterUpdated } from "./parameterSlice.js";
+import { Slider, SelectList } from "../../helpers/Helpers";
+import styles from "./Parameters.module.css";
+
+const ModFX = (props) => {
+  const parameters = useSelector((state) => selectById(state, props.id));
+  const dispatch = useDispatch();
+
+  return (
+    <div className={styles.container}>
+      <SelectList
+        value={parameters.type}
+        list={
+          ({ value: "Flanger/Chorus" },
+          { value: "Ensemble" },
+          { value: "Phaser" })
+        }
+        onChange={(value) =>
+          dispatch(
+            parameterUpdated({
+              id: props.id,
+              changes: { type: value },
+            })
+          )
+        }
+      />
+      <Slider
+        min={0}
+        max={127}
+        parameter={parameters.lfoSpeed}
+        onChange={(value) =>
+          dispatch(
+            parameterUpdated({
+              id: props.id,
+              changes: { lfoSpeed: value },
+            })
+          )
+        }
+      />
+      <Slider
+        min={0}
+        max={127}
+        parameter={parameters.effectDepth}
+        onChange={(value) =>
+          dispatch(
+            parameterUpdated({
+              id: props.id,
+              changes: { effectDepth: value },
+            })
+          )
+        }
+      />
+    </div>
+  );
+};