You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 lines
1.2 KiB
55 lines
1.2 KiB
import { FC } from 'react'; |
|
import { |
|
OutlinedInput as MUIOutlinedInput, |
|
outlinedInputClasses as muiOutlinedInputClasses, |
|
OutlinedInputProps as MUIOutlinedInputProps, |
|
} from '@mui/material'; |
|
|
|
import { GREY, TEXT, UNSELECTED } from '../../lib/consts/DEFAULT_THEME'; |
|
|
|
type OutlinedInputProps = MUIOutlinedInputProps; |
|
|
|
const OutlinedInput: FC<OutlinedInputProps> = (outlinedInputProps) => { |
|
const { label, sx, ...outlinedInputRestProps } = outlinedInputProps; |
|
const combinedSx = { |
|
color: GREY, |
|
|
|
[`& .${muiOutlinedInputClasses.notchedOutline}`]: { |
|
borderColor: UNSELECTED, |
|
}, |
|
|
|
'&:hover': { |
|
[`& .${muiOutlinedInputClasses.notchedOutline}`]: { |
|
borderColor: GREY, |
|
}, |
|
}, |
|
|
|
[`&.${muiOutlinedInputClasses.focused}`]: { |
|
color: TEXT, |
|
|
|
[`& .${muiOutlinedInputClasses.notchedOutline}`]: { |
|
borderColor: GREY, |
|
|
|
'& legend': { |
|
paddingRight: label ? '1.2em' : 0, |
|
}, |
|
}, |
|
}, |
|
|
|
...sx, |
|
}; |
|
|
|
return ( |
|
<MUIOutlinedInput |
|
{...{ |
|
label, |
|
...outlinedInputRestProps, |
|
sx: combinedSx, |
|
}} |
|
/> |
|
); |
|
}; |
|
|
|
export type { OutlinedInputProps }; |
|
|
|
export default OutlinedInput;
|
|
|