Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | 36x 36x 36x 36x 137x 36x 2935x 36x 3294x | import { TextField as MuiTextField, TextFieldProps } from "@mui/material";
import { BaseTextFieldProps } from "@mui/material/TextField";
import classNames from "classnames";
import React, { forwardRef } from "react";
import makeStyles from "utils/makeStyles";
const useStyles = makeStyles((theme) => ({
multiline: {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: theme.palette.grey[500],
},
"& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline": {
borderColor: theme.palette.grey[900],
},
},
root: {
"& .MuiOutlinedInput-root": {
borderRadius: theme.shape.borderRadius * 3,
},
display: "block",
},
}));
type AccessibleTextFieldProps = Omit<TextFieldProps, "variant"> & {
id: BaseTextFieldProps["id"];
onChange?: TextFieldProps["onChange"];
variant?: "filled" | "outlined" | "standard";
};
const TextField = forwardRef<
HTMLInputElement | HTMLDivElement,
AccessibleTextFieldProps
>(
(
{ className, variant = "outlined", helperText, name, ...otherProps },
ref
) => {
const classes = useStyles();
return (
<MuiTextField
{...otherProps}
inputRef={ref}
name={name}
variant={variant}
helperText={
<span data-testid={`${name}-helper-text`}>{helperText}</span>
}
className={classNames(classes.root, className, {
[classes.multiline]: otherProps.multiline,
})}
/>
);
}
);
TextField.displayName = "TextField";
export default TextField;
|