148 lines
3.4 KiB
TypeScript
148 lines
3.4 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import {
|
|
Select as MuiSelect,
|
|
MenuItem,
|
|
FormControl,
|
|
Typography,
|
|
useTheme,
|
|
} from "@mui/material";
|
|
|
|
import ArrowDown from "@icons/ArrowDownIcon";
|
|
|
|
import type { SelectChangeEvent, SxProps } from "@mui/material";
|
|
|
|
type SelectProps = {
|
|
items: string[];
|
|
activeItemIndex?: number;
|
|
empty?: boolean;
|
|
onChange?: (item: string, num: number) => void;
|
|
sx?: SxProps;
|
|
colorMain?: string;
|
|
colorPlaceholder?: string;
|
|
placeholder?: string;
|
|
};
|
|
|
|
export const Select = ({
|
|
items,
|
|
activeItemIndex = 0,
|
|
empty,
|
|
onChange,
|
|
sx,
|
|
placeholder = "",
|
|
colorMain = "#7E2AEA",
|
|
colorPlaceholder = "#9A9AAF",
|
|
}: SelectProps) => {
|
|
const [activeItem, setActiveItem] = useState<number>(
|
|
empty ? -1 : activeItemIndex
|
|
);
|
|
const theme = useTheme();
|
|
|
|
useEffect(() => {
|
|
setActiveItem(activeItemIndex);
|
|
}, [activeItemIndex]);
|
|
|
|
const handleChange = (event: SelectChangeEvent) => {
|
|
const newItemIndex = Number(event.target.value);
|
|
|
|
if (newItemIndex === activeItem) {
|
|
setActiveItem(-1);
|
|
onChange?.("", -1);
|
|
|
|
return;
|
|
}
|
|
|
|
setActiveItem(newItemIndex);
|
|
onChange?.(items[newItemIndex], newItemIndex);
|
|
};
|
|
|
|
return (
|
|
<FormControl
|
|
fullWidth
|
|
size="small"
|
|
sx={{ width: "100%", height: "48px", ...sx }}
|
|
>
|
|
<MuiSelect
|
|
displayEmpty
|
|
renderValue={(value) =>
|
|
value ? (
|
|
items[Number(value)]
|
|
) : (
|
|
<Typography sx={{ color: colorPlaceholder }}>
|
|
{placeholder}
|
|
</Typography>
|
|
)
|
|
}
|
|
id="display-select"
|
|
variant="outlined"
|
|
value={activeItem === -1 ? "" : String(activeItem)}
|
|
onChange={handleChange}
|
|
sx={{
|
|
width: "100%",
|
|
height: "48px",
|
|
borderRadius: "8px",
|
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
border: `1px solid ${colorMain} !important`,
|
|
height: "48px",
|
|
borderRadius: "10px",
|
|
},
|
|
}}
|
|
MenuProps={{
|
|
PaperProps: {
|
|
sx: {
|
|
mt: "8px",
|
|
p: "4px",
|
|
borderRadius: "8px",
|
|
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: theme.palette.background.default,
|
|
color: colorMain,
|
|
},
|
|
},
|
|
},
|
|
}}
|
|
inputProps={{
|
|
sx: {
|
|
color: colorMain,
|
|
display: "block",
|
|
px: "9px",
|
|
gap: "20px",
|
|
"& .MuiTypography-root": {
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
}
|
|
|
|
},
|
|
}}
|
|
IconComponent={(props) => <ArrowDown {...props} />}
|
|
>
|
|
{items.map((item, index) => (
|
|
<MenuItem
|
|
key={item + index}
|
|
value={index}
|
|
sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "20px",
|
|
padding: "10px",
|
|
borderRadius: "5px",
|
|
color: colorPlaceholder,
|
|
whiteSpace: "normal"
|
|
}}
|
|
>
|
|
{item}
|
|
</MenuItem>
|
|
))}
|
|
</MuiSelect>
|
|
</FormControl>
|
|
);
|
|
};
|