69 lines
1.6 KiB
TypeScript
69 lines
1.6 KiB
TypeScript
|
import { FormControl, TextField, useTheme, SxProps, Theme } from "@mui/material";
|
||
|
|
|
||
|
|
import type { ChangeEvent, KeyboardEvent, FocusEvent } from "react";
|
||
|
|
import type { InputProps } from "@mui/material";
|
||
|
|
|
||
|
|
interface CustomTextFieldProps {
|
||
|
|
placeholder: string;
|
||
|
|
value?: string;
|
||
|
|
error?: string;
|
||
|
|
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
|
||
|
|
onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
|
||
|
|
onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
|
||
|
|
text?: string;
|
||
|
|
sx?: SxProps<Theme>;
|
||
|
|
InputProps?: Partial<InputProps>;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function CustomTextField({
|
||
|
|
placeholder,
|
||
|
|
value,
|
||
|
|
text,
|
||
|
|
sx,
|
||
|
|
error,
|
||
|
|
onChange,
|
||
|
|
onKeyDown,
|
||
|
|
onBlur,
|
||
|
|
InputProps,
|
||
|
|
}: CustomTextFieldProps) {
|
||
|
|
const theme = useTheme();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<FormControl fullWidth variant="standard" sx={{ p: 0 }}>
|
||
|
|
<TextField
|
||
|
|
defaultValue={text}
|
||
|
|
fullWidth
|
||
|
|
value={value}
|
||
|
|
placeholder={placeholder}
|
||
|
|
error={!!error}
|
||
|
|
label={error}
|
||
|
|
onChange={onChange}
|
||
|
|
onKeyDown={onKeyDown}
|
||
|
|
onBlur={onBlur}
|
||
|
|
sx={{
|
||
|
|
"& .MuiInputBase-root": {
|
||
|
|
backgroundColor: theme.palette.background.default,
|
||
|
|
height: "48px",
|
||
|
|
borderRadius: "10px",
|
||
|
|
},
|
||
|
|
"& .MuiInputLabel-root": {
|
||
|
|
fontSize: "13.5px",
|
||
|
|
marginTop: "3px",
|
||
|
|
},
|
||
|
|
...sx,
|
||
|
|
}}
|
||
|
|
InputProps={InputProps}
|
||
|
|
inputProps={{
|
||
|
|
sx: {
|
||
|
|
borderRadius: "10px",
|
||
|
|
fontSize: "18px",
|
||
|
|
lineHeight: "21px",
|
||
|
|
py: 0,
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
data-cy="textfield"
|
||
|
|
/>
|
||
|
|
</FormControl>
|
||
|
|
);
|
||
|
|
}
|