129 lines
3.1 KiB
JavaScript
129 lines
3.1 KiB
JavaScript
import React from 'react';
|
|
import { useSelector, useDispatch } from 'react-redux';
|
|
import { selectById, parameterUpdated } from './parameterSlice.js';
|
|
import { Slider, SelectList } from '../../helpers/Helpers';
|
|
|
|
const Patch = (props) => {
|
|
return (
|
|
<div>
|
|
Source
|
|
<SelectList
|
|
value={props.patch.source}
|
|
list={[
|
|
{ value: 'Filter EG' },
|
|
{ value: 'Amp Eg' },
|
|
{ value: 'LFO 1' },
|
|
{ value: 'LFO 2' },
|
|
{ value: 'Velocity' },
|
|
{ value: 'Keyboard Track' },
|
|
{ value: 'Pitch Bend' },
|
|
{ value: 'Mod Wheel' },
|
|
]}
|
|
onChange={(value) =>
|
|
props.onChange({
|
|
source: value,
|
|
destination: props.patch.destination,
|
|
modIntensity: props.patch.modIntensity,
|
|
})
|
|
}
|
|
/>
|
|
Destination
|
|
<SelectList
|
|
value={props.patch.destination}
|
|
list={[
|
|
{ value: 'Pitch' },
|
|
{ value: 'OSC 2 Tune' },
|
|
{ value: 'OSC 1 Control 1' },
|
|
{ value: 'Noise Level' },
|
|
{ value: 'Cutoff' },
|
|
{ value: 'Amp' },
|
|
{ value: 'Pan' },
|
|
{ value: 'LFO 2 Frequency' },
|
|
]}
|
|
onChange={(value) =>
|
|
props.onChange({
|
|
source: props.patch.source,
|
|
destination: value,
|
|
modIntensity: props.patch.modIntensity,
|
|
})
|
|
}
|
|
/>
|
|
Mod Intensity
|
|
<Slider
|
|
min={0}
|
|
max={127}
|
|
parameter={props.patch.modIntensity}
|
|
onChange={(value) =>
|
|
props.onChange({
|
|
source: props.patch.source,
|
|
destination: props.patch.destination,
|
|
modIntensity: value,
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default function Patches(props) {
|
|
const parameters = useSelector((state) => selectById(state, props.id));
|
|
const dispatch = useDispatch();
|
|
|
|
return (
|
|
<div className={props.className} id='patches'>
|
|
<span>{`${props.name}`}</span>
|
|
<Patch
|
|
patch={parameters.patch1}
|
|
onChange={(value) =>
|
|
dispatch(
|
|
parameterUpdated({
|
|
id: props.id,
|
|
changes: {
|
|
patch1: value,
|
|
},
|
|
})
|
|
)
|
|
}
|
|
/>
|
|
<div />
|
|
<Patch
|
|
patch={parameters.patch2}
|
|
onChange={(value, parameter) =>
|
|
dispatch(
|
|
parameterUpdated({
|
|
id: props.id,
|
|
changes: {
|
|
patch2: value,
|
|
},
|
|
})
|
|
)
|
|
}
|
|
/>
|
|
<div />
|
|
<Patch
|
|
patch={parameters.patch3}
|
|
onChange={(value, parameter) =>
|
|
dispatch(
|
|
parameterUpdated({
|
|
id: props.id,
|
|
changes: { patch3: value },
|
|
})
|
|
)
|
|
}
|
|
/>
|
|
<div />
|
|
<Patch
|
|
patch={parameters.patch4}
|
|
onChange={(value, parameter) =>
|
|
dispatch(
|
|
parameterUpdated({
|
|
id: props.id,
|
|
changes: { patch4: value },
|
|
})
|
|
)
|
|
}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|