58 lines
1.4 KiB
JavaScript
58 lines
1.4 KiB
JavaScript
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>
|
|
);
|
|
};
|