67 lines
2.2 KiB
JavaScript
67 lines
2.2 KiB
JavaScript
import OutlinedInput from "@mui/material/OutlinedInput";
|
|
import MenuItem from "@mui/material/MenuItem";
|
|
import Select from "@mui/material/Select";
|
|
import { styleTextSelectRight } from "@/mui";
|
|
import IconMultipleSelect from "@/components/icons/IconMultipleSelect";
|
|
|
|
export default function MultipleSelect({ value, updateData, name, list }) {
|
|
const handleChange = (event) => {
|
|
const {
|
|
target: { value },
|
|
} = event;
|
|
const newVal = typeof value === "string" ? value.split(",") : value;
|
|
updateData(newVal, "value", name);
|
|
};
|
|
|
|
return (
|
|
<div className="auto-complete-selector w-full">
|
|
<Select
|
|
multiple
|
|
displayEmpty
|
|
value={value}
|
|
onChange={handleChange}
|
|
input={<OutlinedInput />}
|
|
IconComponent={IconMultipleSelect}
|
|
className=""
|
|
sx={{
|
|
...styleTextSelectRight,
|
|
width: "100% !important",
|
|
"& .MuiInputBase-input": { padding: "12.5px 14px !important" },
|
|
"& .MuiInputBase-root": {
|
|
borderRadius: 2,
|
|
padding: "0 !important",
|
|
height: {
|
|
xs: "43px !important",
|
|
sm: "43px !important",
|
|
md: "46px !important",
|
|
lg: "48px !important",
|
|
},
|
|
},
|
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
border: "1px solid #D7D7D7",
|
|
},
|
|
"& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline":
|
|
{
|
|
borderColor: "#D7D7D7 !important",
|
|
},
|
|
"& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
|
|
{
|
|
border: "1px solid #5559CE !important",
|
|
},
|
|
}}
|
|
>
|
|
{list.map((item) => (
|
|
<MenuItem
|
|
key={item.id || item.uuid}
|
|
value={item.id}
|
|
selected={value.includes(item.id)}
|
|
className={`!flex !justify-start !p-[8px] !text-start !text-[#A1A1A1] ${ value.includes(item.id) ? "dark:!bg-[#35343D] !bg-[#F1F1F1]" : "dark:!bg-[#1F1D2B] !bg-[#FFF]" } hover:dark:!bg-[#35343D] hover:!bg-[#F5F5F5]`}
|
|
>
|
|
{item.name || item.label}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</div>
|
|
);
|
|
}
|