2024-08-05 07:39:46 +00:00
|
|
|
import {
|
|
|
|
FormControl,
|
|
|
|
MenuItem,
|
|
|
|
Select as SelectMui,
|
|
|
|
SelectChangeEvent,
|
|
|
|
styled,
|
|
|
|
SelectProps as SelectMuiProps,
|
|
|
|
MenuItemProps
|
|
|
|
} from '@mui/material'
|
|
|
|
|
|
|
|
const SelectCustomized = styled(SelectMui)<SelectMuiProps>(() => ({
|
|
|
|
backgroundColor: 'var(--primary-main)',
|
|
|
|
fontSize: '14px',
|
|
|
|
fontWeight: '500',
|
|
|
|
color: 'white',
|
|
|
|
':hover': {
|
|
|
|
backgroundColor: 'var(--primary-light)'
|
|
|
|
},
|
|
|
|
'& .MuiSelect-select:focus': {
|
|
|
|
backgroundColor: 'var(--primary-light)'
|
|
|
|
},
|
|
|
|
'& .MuiSvgIcon-root': {
|
|
|
|
color: 'white'
|
|
|
|
},
|
|
|
|
'& .MuiOutlinedInput-notchedOutline': {
|
|
|
|
border: 'none'
|
|
|
|
}
|
|
|
|
}))
|
|
|
|
|
|
|
|
const MenuItemCustomized = styled(MenuItem)<MenuItemProps>(() => ({
|
|
|
|
marginInline: '5px',
|
|
|
|
borderRadius: '4px',
|
|
|
|
'&:hover': {
|
|
|
|
background: 'var(--primary-light)',
|
|
|
|
color: 'white'
|
|
|
|
},
|
|
|
|
'&.Mui-selected': {
|
|
|
|
background: 'var(--primary-dark)',
|
|
|
|
color: 'white'
|
|
|
|
},
|
|
|
|
'&.Mui-selected:hover': {
|
|
|
|
background: 'var(--primary-light)'
|
|
|
|
},
|
|
|
|
'&.Mui-selected.Mui-focusVisible': {
|
|
|
|
background: 'var(--primary-light)',
|
|
|
|
color: 'white'
|
|
|
|
},
|
|
|
|
'&.Mui-focusVisible': {
|
|
|
|
background: 'var(--primary-light)',
|
|
|
|
color: 'white'
|
|
|
|
},
|
|
|
|
'& + *': {
|
|
|
|
marginTop: '5px'
|
|
|
|
}
|
|
|
|
}))
|
|
|
|
|
|
|
|
interface SelectItemProps<T extends string> {
|
|
|
|
value: T
|
|
|
|
label: string
|
|
|
|
}
|
|
|
|
|
|
|
|
interface SelectProps<T extends string> {
|
2024-08-07 12:15:20 +00:00
|
|
|
value: T
|
2024-08-05 07:39:46 +00:00
|
|
|
setValue: React.Dispatch<React.SetStateAction<T>>
|
|
|
|
options: SelectItemProps<T>[]
|
2024-08-06 12:07:41 +00:00
|
|
|
name?: string
|
|
|
|
id?: string
|
2024-08-05 07:39:46 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export function Select<T extends string>({
|
2024-08-07 12:15:20 +00:00
|
|
|
value,
|
2024-08-05 07:39:46 +00:00
|
|
|
setValue,
|
2024-08-06 12:07:41 +00:00
|
|
|
options,
|
|
|
|
name,
|
|
|
|
id
|
2024-08-05 07:39:46 +00:00
|
|
|
}: SelectProps<T>) {
|
|
|
|
const handleChange = (event: SelectChangeEvent<unknown>) => {
|
|
|
|
setValue(event.target.value as T)
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<FormControl>
|
|
|
|
<SelectCustomized
|
2024-08-06 12:07:41 +00:00
|
|
|
id={id}
|
|
|
|
name={name}
|
2024-08-05 07:39:46 +00:00
|
|
|
size="small"
|
|
|
|
variant="outlined"
|
2024-08-07 12:15:20 +00:00
|
|
|
value={value}
|
2024-08-05 07:39:46 +00:00
|
|
|
onChange={handleChange}
|
|
|
|
MenuProps={{
|
|
|
|
MenuListProps: {
|
|
|
|
sx: {
|
|
|
|
paddingBlock: '5px'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
PaperProps: {
|
|
|
|
sx: {
|
|
|
|
boxShadow: '0 0 4px 0 rgb(0, 0, 0, 0.1)'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{options.map((o) => {
|
|
|
|
return (
|
|
|
|
<MenuItemCustomized key={o.label} value={o.value as string}>
|
|
|
|
{o.label}
|
|
|
|
</MenuItemCustomized>
|
|
|
|
)
|
|
|
|
})}
|
|
|
|
</SelectCustomized>
|
|
|
|
</FormControl>
|
|
|
|
)
|
|
|
|
}
|