121 lines
3.6 KiB
TypeScript
121 lines
3.6 KiB
TypeScript
import { FormControl, InputLabel, SxProps, TextField, TextFieldProps, Theme, useMediaQuery, useTheme } from "@mui/material";
|
|
|
|
|
|
interface Props {
|
|
id?: string;
|
|
label?: string;
|
|
labelSx?: SxProps<Theme>;
|
|
bold?: boolean;
|
|
gap?: string;
|
|
backgroundColor?: string;
|
|
FormControlSx?: SxProps<Theme>;
|
|
TextFieldSx?: SxProps<Theme>;
|
|
placeholder?: TextFieldProps["placeholder"];
|
|
value?: TextFieldProps["value"];
|
|
helperText?: TextFieldProps["helperText"];
|
|
error?: TextFieldProps["error"];
|
|
type?: TextFieldProps["type"];
|
|
onBlur?: TextFieldProps["onBlur"];
|
|
onChange?: TextFieldProps["onChange"];
|
|
fullWidth?: boolean;
|
|
}
|
|
|
|
export function PenaTextField({
|
|
id = "pena-textfield",
|
|
label,
|
|
labelSx,
|
|
bold = false,
|
|
gap = "10px",
|
|
onChange,
|
|
error,
|
|
helperText,
|
|
onBlur,
|
|
placeholder,
|
|
type,
|
|
value,
|
|
backgroundColor,
|
|
FormControlSx,
|
|
TextFieldSx,
|
|
fullWidth = true,
|
|
}: Props) {
|
|
const theme = useTheme();
|
|
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
|
|
|
const labelFont = upMd
|
|
? bold
|
|
? theme.typography.p1
|
|
: { ...theme.typography.body1, fontWeight: 500 }
|
|
: theme.typography.body2;
|
|
|
|
const placeholderFont = upMd ? undefined : { fontWeight: 400, fontSize: "16px", lineHeight: "19px" };
|
|
|
|
return (
|
|
<FormControl
|
|
fullWidth={fullWidth}
|
|
variant="standard"
|
|
sx={{
|
|
gap,
|
|
...FormControlSx,
|
|
}}
|
|
>
|
|
{label && (
|
|
<InputLabel
|
|
shrink
|
|
htmlFor={id}
|
|
sx={{
|
|
position: "inherit",
|
|
color: "black",
|
|
transform: "none",
|
|
...labelFont,
|
|
...labelSx,
|
|
}}
|
|
>
|
|
{label}
|
|
</InputLabel>
|
|
)}
|
|
<TextField
|
|
fullWidth
|
|
id={id}
|
|
error={error}
|
|
helperText={helperText}
|
|
onBlur={onBlur}
|
|
placeholder={placeholder}
|
|
type={type}
|
|
value={value}
|
|
sx={{
|
|
"& .MuiInputBase-root": {
|
|
height: "48px",
|
|
borderRadius: "8px",
|
|
"& fieldset": {
|
|
border: `1px solid ${theme.palette.gray.main}`,
|
|
},
|
|
"&:hover fieldset": {
|
|
border: `1px solid ${theme.palette.gray.dark}`,
|
|
},
|
|
"&.Mui-focused fieldset": {
|
|
border: `2px solid ${theme.palette.purple.main}`,
|
|
},
|
|
},
|
|
"& .MuiFormHelperText-root.MuiFormHelperText-contained.MuiFormHelperText-filled.Mui-error": {
|
|
position: "absolute",
|
|
top: "45px",
|
|
},
|
|
...TextFieldSx,
|
|
}}
|
|
inputProps={{
|
|
sx: {
|
|
boxSizing: "border-box",
|
|
backgroundColor: backgroundColor ?? theme.palette.background.default,
|
|
borderRadius: "8px",
|
|
height: "48px",
|
|
py: 0,
|
|
color: theme.palette.gray.dark,
|
|
...placeholderFont,
|
|
},
|
|
}}
|
|
onChange={onChange}
|
|
/>
|
|
</FormControl>
|
|
);
|
|
}
|