80 lines
1.9 KiB
TypeScript
80 lines
1.9 KiB
TypeScript
import { useState } from "react";
|
||
|
||
import {
|
||
Button,
|
||
Checkbox,
|
||
FormControl,
|
||
ListItemText,
|
||
MenuItem,
|
||
Select,
|
||
SelectChangeEvent,
|
||
TextField,
|
||
} from "@mui/material";
|
||
import { MOCK_DATA_USERS } from "@root/api/roles";
|
||
|
||
const ITEM_HEIGHT = 48;
|
||
const ITEM_PADDING_TOP = 8;
|
||
const MenuProps = {
|
||
PaperProps: {
|
||
style: {
|
||
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
|
||
},
|
||
},
|
||
};
|
||
|
||
export default function CreateForm() {
|
||
const [personName, setPersonName] = useState<string[]>([]);
|
||
|
||
const handleChange = (event: SelectChangeEvent<typeof personName>) => {
|
||
const {
|
||
target: { value },
|
||
} = event;
|
||
setPersonName(typeof value === "string" ? value.split(",") : value);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<TextField
|
||
placeholder="название"
|
||
fullWidth
|
||
sx={{
|
||
alignItems: "center",
|
||
width: "400px",
|
||
"& .MuiInputBase-root": {
|
||
backgroundColor: "#F2F3F7",
|
||
height: "48px",
|
||
},
|
||
}}
|
||
inputProps={{
|
||
sx: {
|
||
borderRadius: "10px",
|
||
fontSize: "18px",
|
||
lineHeight: "21px",
|
||
py: 0,
|
||
},
|
||
}}
|
||
/>
|
||
<Button sx={{ ml: "5px", bgcolor: "#fe9903", color: "white" }}>Отправить</Button>
|
||
<FormControl sx={{ ml: "25px", width: "80%" }}>
|
||
<Select
|
||
sx={{ bgcolor: "white", height: "48px" }}
|
||
labelId="demo-multiple-checkbox-label"
|
||
id="demo-multiple-checkbox"
|
||
multiple
|
||
value={personName}
|
||
onChange={handleChange}
|
||
renderValue={(selected) => selected.join(", ")}
|
||
MenuProps={MenuProps}
|
||
>
|
||
{MOCK_DATA_USERS.map(({ name, id }) => (
|
||
<MenuItem key={id} value={name}>
|
||
<Checkbox checked={personName.indexOf(name) > -1} />
|
||
<ListItemText primary={name} />
|
||
</MenuItem>
|
||
))}
|
||
</Select>
|
||
</FormControl>
|
||
</>
|
||
);
|
||
}
|