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>
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
}
|