start InputComponents Refactor

This commit is contained in:
[poww10s]
2020-09-14 01:55:55 -04:00
parent 44de46577d
commit 1f019e6368
-111
View File
@@ -1,112 +1 @@
import React, { useState, useEffect } from "react";
import { makeStyles } from "@material-ui/styles";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import InputLabel from "@material-ui/core/InputLabel";
import FormControl from "@material-ui/core/FormControl";
import TextField from "@material-ui/core/TextField";
import Slider from "@material-ui/core/Slider";
const useStyles = makeStyles((theme) => ({
formControl: {
margin: theme.spacing(1),
minWidth: 120,
},
selectEmpty: {
marginTop: theme.spacing(2),
},
root: {
width: 127,
},
}));
function SettingSlider() {
const classes = useStyles();
const [value, setValue] = React.useState(0);
const handleEvent = (event, newValue) => {
setValue(newValue);
};
const valuetext = (value) => {
return `${value}`;
};
return (
<div className={classes.root}>
<Slider
value={value}
getAriaValueText={valuetext}
valueLabelDisplay="auto"
onChange={handleEvent}
min={0}
max={127}
/>
</div>
);
}
function NameInput(props) {
const [name, setName] = useState("init");
useEffect(
(props) => {
props.returnName(name);
},
[name]
);
const handleChange = (e) => {
setName(e.target.value);
};
return (
<form>
<TextField
id="simple-filled"
value={name}
label="Name"
variant="filled"
onChange={(e) => {
setName(handleChange);
}}
/>
</form>
);
}
function SettingSelect(props) {
const classes = useStyles();
const [setting, setSetting] = useState("");
useEffect(
{
//here we update the sysex / or the settings object when the value changes
},
[setting]
);
const handleChange = (e) => {
setSetting(e.target.value);
};
return (
<FormControl className={classes.formControl}>
<InputLabel id="simple-select-filled">{props.name}</InputLabel>
<Select
labelId="simple-select-filled"
id="simple-select-filled"
value={setting}
onChange={handleChange}
>
<MenuItem value={props.options}></MenuItem>
</Select>
</FormControl>
);
}
export default {
SettingSelect,
SettingSlider,
NameInput,
};