add LFO component and add prop lists

2020-11-18 17:59:20 -05:00
parent 68d6471357
commit 71cfe8a16e
5 changed files with 193 additions and 18 deletions
@@ -0,0 +1,60 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { selectById, parameterUpdated } from './parameterSlice.js';
+import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
+
+export default function LFO(props) {
+    const parameters = useSelector((state) => selectById(state, props.id));
+    const dispatch = useDispatch();
+
+    return (
+        <div>
+            <SelectList
+                value={parameters.waveform}
+                list={props.waveforms}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { waveform: value },
+                        })
+                    )
+                }
+            />
+            <SelectList
+                value={parameters.keySync}
+                list={['Off', 'Timbre', 'Voice']}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { keySync: value },
+                        })
+                    )
+                }
+            />
+            <Checkbox
+                parameter={parameters.tempoSync}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { tempoSync: value },
+                        })
+                    )
+                }
+            />
+            <Slider
+                parameter={parameters.frequency}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { frequency: value },
+                        })
+                    )
+                }
+            />
+        </div>
+    );
+}