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 | 2x 2x 2x 2x 2x 2x 24x 24x 2x | import React from 'react';
import { TextField as MuiTextField, TextFieldProps as MuiTextFieldProps } from '@mui/material';
import { cx } from '@emotion/css';
import { TextInputBase, inputStyles, formHelperTextStyles } from './styles';
import { TextInputSize } from './types';
import { InputProps } from '@mui/material/Input';
export interface TextInputProps extends Omit<MuiTextFieldProps, 'children' | 'color' | 'size' | 'InputProps'> {
readonly size?: TextInputSize;
readonly InputProps?: Partial<InputProps>;
}
const TextInput: React.FunctionComponent<TextInputProps> = ({
classes,
className,
InputProps,
FormHelperTextProps,
size = TextInputSize.Medium,
variant,
...materialTextFieldProps
}) => {
const classNames = cx(TextInputBase(), className, classes?.root);
return (
<MuiTextField
data-testid={'inputField'}
classes={{ root: classNames, ...classes }}
variant={variant}
role={'textField'}
InputProps={{
...InputProps,
classes: {
root: cx(inputStyles(size), InputProps?.classes?.root),
input: cx(inputStyles(size), InputProps?.classes?.input),
},
}}
// InputLabelProps={{
// ...InputLabelProps,
// classes: { root: cx(inputLabelStyles().root, InputLabelProps?.classes?.root) },
// shrink: true,
// }}
FormHelperTextProps={{
...FormHelperTextProps,
classes: { root: cx(formHelperTextStyles(), FormHelperTextProps?.classes?.root) },
}}
{...materialTextFieldProps}
/>
);
};
export { TextInput };
|