129 lines
3.3 KiB
TypeScript
129 lines
3.3 KiB
TypeScript
import React, { useState } from "react";
|
|
import {
|
|
FormControl,
|
|
MenuItem,
|
|
Select,
|
|
SelectChangeEvent,
|
|
} from "@mui/material";
|
|
import ArrowDown from "@icons/ArrowDownIcon";
|
|
import CustomCheckbox from "./CustomCheckbox";
|
|
|
|
type CheckboxSelectProps = {
|
|
options: { label: string; value: string }[];
|
|
sx?: any;
|
|
placeholder: string;
|
|
};
|
|
|
|
export const CheckboxSelect: React.FC<CheckboxSelectProps> = ({
|
|
options,
|
|
sx,
|
|
placeholder,
|
|
}: CheckboxSelectProps) => {
|
|
const [selectedValues, setSelectedValues] = useState<string[]>([]);
|
|
|
|
const handleChange = (event: SelectChangeEvent<string[]>) => {
|
|
const values = event.target.value as string[];
|
|
|
|
if (values.includes("SelectAll")) {
|
|
setSelectedValues(options.map((option) => option.value));
|
|
} else {
|
|
setSelectedValues(values);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<FormControl
|
|
fullWidth
|
|
size="small"
|
|
sx={{ width: "100%", height: "48px", ...sx }}
|
|
>
|
|
<Select
|
|
displayEmpty
|
|
multiple
|
|
value={selectedValues}
|
|
onChange={handleChange}
|
|
sx={{
|
|
width: "100%",
|
|
height: "48px",
|
|
borderRadius: "8px",
|
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
border: "1px solid #7E2AEA !important",
|
|
borderRadius: "10px",
|
|
},
|
|
}}
|
|
MenuProps={{
|
|
PaperProps: {
|
|
sx: {
|
|
mt: "8px",
|
|
p: "4px",
|
|
borderRadius: "8px",
|
|
backgroundColor: "#fff",
|
|
border: "1px solid #EEE4FC",
|
|
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
|
|
},
|
|
},
|
|
MenuListProps: {
|
|
sx: {
|
|
py: 0,
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "8px",
|
|
"& .Mui-selected": {
|
|
backgroundColor: "#fff",
|
|
color: "#7E2AEA",
|
|
},
|
|
},
|
|
},
|
|
}}
|
|
inputProps={{
|
|
sx: {
|
|
color: "#7E2AEA",
|
|
display: "block",
|
|
px: "9px",
|
|
gap: "20px",
|
|
width: "90%",
|
|
},
|
|
}}
|
|
IconComponent={(props) => <ArrowDown {...props} />}
|
|
renderValue={(selected) => {
|
|
if (selected.length === 0) {
|
|
return <span style={{ color: "#7E2AEA" }}>{placeholder}</span>;
|
|
}
|
|
|
|
return (
|
|
<span>
|
|
{options
|
|
.filter((option) => selected.includes(option.value))
|
|
.map((option) => option.label)
|
|
.join(", ")}
|
|
</span>
|
|
);
|
|
}}
|
|
>
|
|
<MenuItem
|
|
sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
}}
|
|
value="SelectAll"
|
|
>
|
|
<CustomCheckbox
|
|
checked={selectedValues.includes("SelectAll")}
|
|
label="Выбрать всё"
|
|
/>
|
|
</MenuItem>
|
|
{options.map((option) => (
|
|
<MenuItem key={option.value} value={option.value}>
|
|
<CustomCheckbox
|
|
sx={{ padding: "0", borderRadius: "6px" }}
|
|
label={option.label}
|
|
checked={selectedValues.includes(option.value)}
|
|
/>
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
);
|
|
};
|