66 lines
1.4 KiB
TypeScript
66 lines
1.4 KiB
TypeScript
import { FC } from "react";
|
|
import {
|
|
TextField as InternalTextField,
|
|
InputAdornment,
|
|
IconButton,
|
|
} from "@mui/material";
|
|
import { Refresh as RefreshIcon } from "@mui/icons-material";
|
|
import { colors } from "../styles/theme";
|
|
|
|
type TextFieldProps = {
|
|
name: string;
|
|
label: string;
|
|
formState: Record<string, any>;
|
|
refreshable?: boolean;
|
|
disabled?: boolean;
|
|
required?: boolean;
|
|
lines?: number;
|
|
helperText?: string;
|
|
};
|
|
|
|
export const TextField: FC<TextFieldProps> = ({
|
|
name,
|
|
label,
|
|
formState,
|
|
refreshable = false,
|
|
disabled = false,
|
|
required = false,
|
|
lines = 1,
|
|
helperText,
|
|
}) => {
|
|
const { darkMediumGray } = colors;
|
|
|
|
return (
|
|
<InternalTextField
|
|
fullWidth
|
|
name={name}
|
|
label={label}
|
|
size="small"
|
|
disabled={disabled}
|
|
multiline={lines > 1}
|
|
rows={lines}
|
|
required={required}
|
|
defaultValue={formState.values[name]}
|
|
error={Boolean(formState.errors[name])}
|
|
helperText={formState.errors[name] ?? helperText}
|
|
InputProps={{
|
|
endAdornment: refreshable ? (
|
|
<InputAdornment position="end">
|
|
<IconButton
|
|
onClick={() => {}}
|
|
size="small"
|
|
color="primary"
|
|
sx={{ p: 0, color: darkMediumGray }}
|
|
>
|
|
<RefreshIcon />
|
|
</IconButton>
|
|
</InputAdornment>
|
|
) : null,
|
|
|
|
sx: {
|
|
backgroundColor: "#fff",
|
|
},
|
|
}}
|
|
/>
|
|
);
|
|
};
|